diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 329f1c5..fdac301 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -22,12 +22,21 @@ font-display: swap; } +@font-face { + font-family: "DS-Digital"; + src: url("/fonts/DS-DIGIB.ttf") format("truetype"); + font-weight: bold; + font-style: normal; + font-display: swap; +} + @import "https://uchu.style/color.css"; @import "settings.css"; body, html { font-family: "Phantom Sans", "Segoe UI", sans-serif; + overflow-x: hidden; } *, @@ -105,3 +114,83 @@ select { background-color: transparent; } } + +.ds-digital { + font-family: "DS-Digital", monospace; +} + +.monospace { + font-family: monospace; +} + +.clock-display { + display: grid; + grid-template-columns: 1fr 1fr 1fr 0.05fr 1fr 1fr 0.05fr 1fr 1fr 1fr 1fr; + text-align: center; + width: 100%; + padding-left: 8vw; + padding-right: 8vw; +} + +.blink { + animation: blink-anim 1s infinite; +} + +@keyframes blink-anim { + 0%, 50% { + opacity: 1; + } + 51%, 100% { + opacity: 0; + } +} + +.why-item:hover { + transform: translateY(-2px); + box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.2); +} + +.no-scrollbar::-webkit-scrollbar { + display: none; +} + +.no-scrollbar { + -ms-overflow-style: none; + scrollbar-width: none; +} + +.som-box { + position: relative; + background: linear-gradient(145deg, #f6dbba 0%, #e6d4be 100%); + border-radius: clamp(6px, 1.5vw, 10px); + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 3px 0 5px rgba(0, 0, 0, 0.05); + transition: all 0.3s ease; + border: 2px solid rgba(89, 47, 49, 0.3); + overflow: hidden; + color: black; + height: 100%; + cursor: 'pointer'; + display: flex; + flex-direction: column; + z-index: 2; + margin-left: 20px; + margin-right: 20px; +} + +.bounce { + animation: bounce 1s infinite; +} + +#scroll-arrow { + transition: transform 1s ease-in-out; +} + +@keyframes bounce { + 0%, + 100% { + transform: translateY(0); + } + 50% { + transform: translateY(-10px); + } +} diff --git a/app/javascript/application.js b/app/javascript/application.js index a875796..8b66f6f 100644 --- a/app/javascript/application.js +++ b/app/javascript/application.js @@ -18,7 +18,7 @@ function outta() { // we should figure out a better way of doing this rather than this shit ass way, but it works for now const modal = document.getElementById('logout-modal'); const can = document.getElementById('cancel-logout'); - + if (!modal || !can) return; modal.classList.remove('hidden'); @@ -55,16 +55,71 @@ function outta() { }); } +function weirdclockthing() { + const clock = document.getElementById('clock'); + const display = clock.querySelector('.clock-display'); + + if (!clock || !display) return; + + function write(something) { + display.innerHTML = ''; + Array.from(something).forEach((char) => { + const span = document.createElement('span'); + span.textContent = char === ' ' ? '\u00A0' : char; + if (char === ':') { + span.classList.add('blink'); + } + display.appendChild(span); + }); + } + + write("HAC:KA:TIME"); + + function updateClock() { + const date = new Date(); + const time = `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`; + write(` ${time} `); + } + + let intervalId = null; + clock.onmouseenter = function () { + updateClock(); + if (!intervalId) { + intervalId = setInterval(updateClock, 1000); + } + } + + clock.onmouseleave = function () { + clearInterval(intervalId); + intervalId = null; + write("HAC:KA:TIME"); + } +} + +function scrollarrow() { + window.addEventListener('scroll', function () { + const arrow = document.getElementById('scroll-arrow'); + arrow.classList.remove('bounce'); + this.setInterval(() => { + arrow.style.transform = 'translateY(200px)'; + }, 100); + }); +} + // Handle both initial page load and subsequent Turbo navigations document.addEventListener('turbo:load', function() { setupCurrentlyHacking(); outta(); + weirdclockthing(); }); document.addEventListener('turbo:render', function() { setupCurrentlyHacking(); outta(); + weirdclockthing(); }); document.addEventListener('DOMContentLoaded', function() { setupCurrentlyHacking(); outta(); + weirdclockthing(); + scrollarrow(); }); diff --git a/app/views/static_pages/index.html.erb b/app/views/static_pages/index.html.erb index f846667..ca82de6 100644 --- a/app/views/static_pages/index.html.erb +++ b/app/views/static_pages/index.html.erb @@ -1,3 +1,6 @@ +
+ +
<% if current_user&.trust_level == "red" %>
@@ -17,42 +20,125 @@ <%= @flavor_text %>

-

- <% if current_user %> - Keep Track of Your Coding Time - <% else %> - Free Coding Time Tracker - See How Much You Code - <% end %> -

-

- <%= @usage_social_proof&.downcase %> -

- <% unless current_user %> -

- See which programming languages you use most and how productive you are. Free and works with over <%= link_to "75 code editors", docs_path + "#supported-editors" %>! -

+
+
+
+ <% if current_user %> +

Keep Track of Your Coding Time

+ <% else %> +

Track How Much You Code

+
+ <%= link_to slack_auth_path, class: "inline-flex items-center justify-center px-6 py-3 rounded text-white font-bold cursor-pointer border-none w-full my-2 bg-primary" do %> + + + <% end %> - <% if @home_stats&.[](:seconds_tracked) && @home_stats&.[](:users_tracked) %> -
-

- Already tracking <%= number_with_delimiter(@home_stats[:seconds_tracked] / 3600) %> <%= 'hour'.pluralize(@home_stats[:seconds_tracked] / 3600) %> - of coding across <%= number_with_delimiter(@home_stats[:users_tracked]) %> <%= 'high schooler'.pluralize(@home_stats[:users_tracked]) %> - since 2025. -

+
+
+ or +
-
-
    -
  • ✅ 100% Free
    • -
  • 📊 75+ Editors - Works with <%= link_to "VS Code", doc_path("editors/vs-code") %>, <%= link_to "Vim", doc_path("editors/vim") %>, <%= link_to "Sublime", doc_path("editors/sublime-text") %> and <%= link_to "more", docs_path + "#supported-editors" %>
    • -
  • 📡 Works Offline
    • -
  • 🔒 Privacy First - Your data stays safe
    • -
  • ⚡ Real-time Stats - See your coding time instantly
    • -
  • 🏆 Leaderboards - Compare with other high schoolers
    • -
-
+ <%= form_tag email_auth_path, class: "relative", data: { turbo: false } do %> +
+ <%= email_field_tag :email, nil, placeholder: "Enter your email to get a sign in link", required: true, class: "w-full px-3 py-3 pr-12 border border-gray-600 rounded text-base bg-gray-800 text-white" %> + +
+ <% end %> +
+ <% end %> + <% if params[:sign_in_email] %> +
+ Check your email for a sign-in link! +
+ <% dev_tool class: "text-center max-w-[50vw] mx-auto mb-4" do %> + Because you're on localhost, <%= link_to "click here to view the email", letter_opener_web_path %> <% end %> <% end %> +
+

+ ==============================================/ h a c k /============================================= +

+
+
+

Compatible with your favourite IDEs

+

Hackatime works with these code editors and more!

+
+ <% popular_editors = [ + ['VS Code', 'vs-code'], ['PyCharm', 'pycharm'], ['IntelliJ IDEA', 'intellij-idea'], + ['Sublime Text', 'sublime-text'], ['Vim', 'vim'], ['Neovim', 'neovim'], + ['Android Studio', 'android-studio'], ['Xcode', 'xcode'], ['Unity', 'unity'], + ['Godot', 'godot'], ['Cursor', 'cursor'], ['Zed', 'zed'], + ['Terminal', 'terminal'], ['WebStorm', 'webstorm'], ['Eclipse', 'eclipse'], + ['Emacs', 'emacs'], ['Jupyter', 'jupyter'], ['OnShape', 'onshape'] + ] %> + <% popular_editors.each do |name, slug| %> + " class="bg-darkless rounded-lg p-3 hover:bg-primary/10 transition-all duration-200 text-center block hover:translate-y-[-2px] hover:shadow-lg hover:shadow-blue-500/20"> + <%= name %> +
<%= name %>
+ + <% end %> +
+
+
+

+ ----------------------------------------------------------------------------------------------- +

+
+
+

Why Hackatime?

+ <% if @home_stats&.[](:seconds_tracked) && @home_stats&.[](:users_tracked) %> +

+ We've tracked over <%= number_with_delimiter(@home_stats[:seconds_tracked] / 3600) %> <%= 'hour'.pluralize(@home_stats[:seconds_tracked] / 3600) %> of coding time across <%= number_with_delimiter(@home_stats[:users_tracked]) %> <%= 'high schooler'.pluralize(@home_stats[:users_tracked]) %> since 2025! +

+ <% end %> +
+
+

100%
free

+

works
offline

+

real time
stats

+

rise to the
top #1

+
+
+
+
+

+ --------------------------------| #hackclub | #hackclub | #hackclub |-------------------------------- +

+ +
+
+

For your favourite Hack Club events!

+

Don't commit fraud lol ;)

+
+
+ + <%= link_to "Start building", "https://summer.hackclub.com/", class: "inline-block bg-[#592F31] font-primary font-bold text-[#f6dbba] px-4 py-2 rounded-[100px] text-[22px] hover:scale-105 transition-transform duration-200", target: "_blank" %> +
+
+
+

Build Projects

+

Build websites, games, apps, or any other personal open-source coding projects to showcase your skills.

+
+
+

Get Stuff

+

Get awesome prizes like Raspberry Pis, Server hosting credits, 3D printers, and more to fuel your next creation.

+
+
+
+
+
+ +
+
+ +

Earn an industry recognized technical certificate for coding 30 hours and building 3 personal projects. Win prizes as you code, and a chance to travel to NYC for 2025's largest high school hackathon for girls.

+ <%= link_to "Join Athena", "https://athena.hackclub.com/", class: "inline-block bg-white font-primary font-bold text-[#D35648] px-4 py-2 m-4 rounded-[100px] text-[22px] hover:scale-105 transition-transform duration-200", target: "_blank" %> +
+
+
<% if current_user %> <% if @show_wakatime_setup_notice %>
@@ -136,36 +222,20 @@ <%= render "leaderboards/mini_leaderboard", leaderboard: @leaderboard, current_user: nil %> <% end %> +
+

+ ==============================================/ h a c k /============================================= +

+
+
-
-
- <%= link_to "Sign in with Hack Club Slack", slack_auth_path, class: "inline-block px-6 py-3 rounded text-white font-bold cursor-pointer border-none w-full my-2 bg-primary" %> - -
- or -
-
-
- - <%= form_tag email_auth_path, class: "space-y-4", data: { turbo: false } do %> -
- <%= email_field_tag :email, nil, placeholder: "Enter your email", required: true, class: "w-full px-3 py-3 border border-gray-600 rounded text-base bg-gray-800 text-white" %> -
- <%= submit_tag "Send sign-in link", class: "inline-block px-6 py-3 rounded text-white font-medium cursor-pointer border-none w-full my-2 bg-blue-600", data: { disable_with: "Sending..." } %> - <% end %> - <% if params[:sign_in_email] %> -
- Check your email for a sign-in link! -
- <% dev_tool do %> - Because you're on localhost, <%= link_to "click here to view the email", letter_opener_web_path %> - <% end %> - <% end %> -
+
+

Start hacking with Hackatime now!

+

Superrrrrr easy to setup :)

<% end %> diff --git a/public/fonts/DS-DIGIB.ttf b/public/fonts/DS-DIGIB.ttf new file mode 100644 index 0000000..064ad47 Binary files /dev/null and b/public/fonts/DS-DIGIB.ttf differ diff --git a/public/fonts/Technology-Bold.ttf b/public/fonts/Technology-Bold.ttf new file mode 100644 index 0000000..5c9c2cb Binary files /dev/null and b/public/fonts/Technology-Bold.ttf differ diff --git a/public/images/athena.png b/public/images/athena.png new file mode 100644 index 0000000..b6148fc Binary files /dev/null and b/public/images/athena.png differ diff --git a/public/images/athena_award.svg b/public/images/athena_award.svg new file mode 100644 index 0000000..4e65940 --- /dev/null +++ b/public/images/athena_award.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/images/down-arrow.svg b/public/images/down-arrow.svg new file mode 100644 index 0000000..b7ca0be --- /dev/null +++ b/public/images/down-arrow.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/images/slack.png b/public/images/slack.png new file mode 100644 index 0000000..9a8e8fb Binary files /dev/null and b/public/images/slack.png differ diff --git a/public/images/som-bg.png b/public/images/som-bg.png new file mode 100644 index 0000000..0dfb715 Binary files /dev/null and b/public/images/som-bg.png differ diff --git a/public/images/som.png b/public/images/som.png new file mode 100644 index 0000000..4b04c53 Binary files /dev/null and b/public/images/som.png differ