homepage submission (#530)

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);
+  }
+}

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();
 });

app/views/static_pages/index.html.erb

@@ -1,3 +1,6 @@
+<div class="fixed bottom-6 right-4 bg-primary w-[30px] h-[30px] rounded-b-full flex justify-center items-center z-50 bounce" id="scroll-arrow">
+  <img src="/images/down-arrow.svg" class="w-8 h-8" />
+</div>
 <div class="container">
   <% if current_user&.trust_level == "red" %>
     <div class="text-primary bg-red-500/10 border-2 border-red-500/20 p-4 text-center rounded-lg mb-4">
@@ -17,42 +20,125 @@
       <%= @flavor_text %>
     </p>
   </div>
-  <h1 class="font-bold mt-1 mb-1 text-5xl">
-    <% if current_user %>
-      Keep Track of <span class="text-primary">Your</span> Coding Time
-    <% else %>
-      Free Coding Time Tracker - See How Much You <span class="text-primary">Code</span>
-    <% end %>
-  </h1>
-  <p class="font-thin italic text-gray-400">
-    <%= @usage_social_proof&.downcase %>
-  </p>
-  <% unless current_user %>
-    <p class="text-xl mt-2">
-      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" %>!
-    </p>
+  <div id="clock" class="w-[70vw] text-[10vw] cursor-pointer flex justify-center items-center select-none border-12 border-primary rounded-[64px] mx-auto mt-8 mb-8">
+    <div class="ds-digital clock-display"></div>
+  </div>
+  <% if current_user %>
+    <h1 class="font-bold mt-1 mb-1 text-5xl text-center">Keep Track of <span class="text-primary">Your</span> Coding Time</h1>
+  <% else %>
+    <h1 class="font-bold mt-1 mb-1 text-5xl text-center">Track How Much You <span class="text-primary">Code</span></h1>
+    <div class="flex flex-col w-full max-w-[50vw] mx-auto mb-22">
+      <%= 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 %>
+        <img src="/images/slack.png" class="h-8 w-8 mr-2 bg-white rounded-full p-1" />
+        <span class="hidden md:flex">Sign in with Hack Club Slack</span>
+      <% end %>
 
-    <% if @home_stats&.[](:seconds_tracked) && @home_stats&.[](:users_tracked) %>
-      <div>
-        <h2 class="text-3xl my-2">
-          Already tracking <span class="text-primary"><%= number_with_delimiter(@home_stats[:seconds_tracked] / 3600) %> <%= 'hour'.pluralize(@home_stats[:seconds_tracked] / 3600) %></span>
-          of coding across <span class="text-primary"><%= number_with_delimiter(@home_stats[:users_tracked]) %> <%= 'high schooler'.pluralize(@home_stats[:users_tracked]) %></span>
-          since <span class="text-primary">2025</span>.
-        </h2>
+      <div class="flex items-center my-4">
+        <div class="flex-1 border-t border-gray-600"></div>
+        <span class="px-4 text-gray-400 text-sm">or</span>
+        <div class="flex-1 border-t border-gray-600"></div>
       </div>
 
-      <div class="my-8">
-        <ul class="text-xl list-none p-0">
-          <li class="my-2">✅ <strong>100% Free</strong></li>
-          <li class="my-2">📊 <strong>75+ Editors</strong> - 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" %></li>
-          <li class="my-2">📡 <strong>Works Offline</strong></li>
-          <li class="my-2">🔒 <strong>Privacy First</strong> - Your data stays safe</li>
-          <li class="my-2">⚡ <strong>Real-time Stats</strong> - See your coding time instantly</li>
-          <li class="my-2">🏆 <strong>Leaderboards</strong> - Compare with other high schoolers</li>
-        </ul>
-      </div>
+      <%= form_tag email_auth_path, class: "relative", data: { turbo: false } do %>
+        <div class="relative">
+          <%= 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" %>
+          <button type="submit" class="absolute right-2 top-1/2 transform -translate-y-1/2 w-8 h-8 p-1 bg-blue-600 hover:bg-blue-700 rounded cursor-pointer border-none flex items-center justify-center transition-colors">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M13.3 20.275q-.3-.3-.3-.7t.3-.7L16.175 16H7q-.825 0-1.412-.587T5 14V5q0-.425.288-.712T6 4t.713.288T7 5v9h9.175l-2.9-2.9q-.3-.3-.288-.7t.288-.7q.3-.3.7-.312t.7.287L19.3 14.3q.15.15.212.325t.063.375t-.063.375t-.212.325l-4.575 4.575q-.3.3-.712.3t-.713-.3"/></svg>
+          </button>
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+  <% if params[:sign_in_email] %>
+    <div class="text-green-500 mt-4 text-center max-w-[50vw] mx-auto">
+      Check your email for a sign-in link!
+    </div>
+    <% 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 %>
+  <div class="w-full flex justify-center overflow-x-none">
+    <p class="monospace text-center text-primary text-[22px] select-none whitespace-nowrap">
+      ==============================================/ h a c k /=============================================
+    </p>
+  </div>
+  <div class="mt-8 mb-8">
+    <h1 class="font-bold mt-1 mb-1 text-4xl">Compatible with your favourite IDEs</h1>
+    <p class="text-primary monospace text-[20px]">Hackatime works with these code editors and more!</p>
+    <div id="supported-editors" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4 mt-4">
+      <% 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| %>
+        <a href="<%= doc_path("editors/#{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">
+          <img src="/images/editor-icons/<%= slug %>-128.png" alt="<%= name %>" class="w-12 h-12 mx-auto mb-2">
+          <div class="text-sm text-white"><%= name %></div>
+        </a>
+      <% end %>
+    </div>
+  </div>
+  <div class="w-full flex justify-center overflow-x-none">
+    <p class="monospace text-center text-primary text-[22px] select-none whitespace-nowrap">
+      -----------------------------------------------------------------------------------------------
+    </p>
+  </div>
+  <div class="mt-8 mb-8">
+    <h1 class="font-bold mt-1 mb-1 text-4xl">Why Hackatime?</h1>
+    <% if @home_stats&.[](:seconds_tracked) && @home_stats&.[](:users_tracked) %>
+      <p class="text-primary monospace text-[20px]">
+        We've tracked over <span class="text-primary"><%= number_with_delimiter(@home_stats[:seconds_tracked] / 3600) %> <%= 'hour'.pluralize(@home_stats[:seconds_tracked] / 3600) %></span> of coding time across <span class="text-primary"><%= number_with_delimiter(@home_stats[:users_tracked]) %> <%= 'high schooler'.pluralize(@home_stats[:users_tracked]) %></span> since <span class="text-primary">2025</span>!
+      </p>
+    <% end %>
+    <div class="overflow-x-auto -mx-4 px-4 pb-4 no-scrollbar">
+      <div class="grid grid-cols-4 gap-4 mt-4 text-center h-30 min-w-[800px] select-none cursor-pointer">
+        <p class="flex flex-col text-3xl justify-center bg-darkless rounded-lg p-3 hover:bg-primary/10 transition-all duration-200 text-center hover:translate-y-[-2px] hover:shadow-lg hover:shadow-blue-500/20"><span class="text-green font-bold text-4xl">100%</span><br>free</p>
+        <p class="flex flex-col text-3xl justify-center bg-darkless rounded-lg p-3 hover:bg-primary/10 transition-all duration-200 text-center hover:translate-y-[-2px] hover:shadow-lg hover:shadow-blue-500/20">works<br><span class="text-green font-bold text-4xl">offline</span></p>
+        <p class="flex flex-col text-3xl justify-center bg-darkless rounded-lg p-3 hover:bg-primary/10 transition-all duration-200 text-center hover:translate-y-[-2px] hover:shadow-lg hover:shadow-blue-500/20"><span class="text-green font-bold text-4xl">real time</span><br>stats</p>
+        <p class="flex flex-col text-3xl justify-center bg-darkless rounded-lg p-3 hover:bg-primary/10 transition-all duration-200 text-center hover:translate-y-[-2px] hover:shadow-lg hover:shadow-blue-500/20">rise to the<br><span class="text-green font-bold text-4xl">top #1</span></p>
+      </div>
+    </div>
+  </div>
+  <div class="w-full flex justify-center overflow-x-none">
+    <p class="monospace text-center text-primary text-[22px] select-none whitespace-nowrap">
+      --------------------------------| #hackclub | #hackclub | #hackclub |--------------------------------
+    </p>
+
+  </div>
+  <div class="mt-8 mb-8">
+    <h1 class="font-bold mt-1 mb-1 text-4xl">For your favourite <span class="text-primary">Hack Club</span> events!</span></h1>
+    <p class="text-primary monospace text-[20px]">Don't commit fraud lol ;)</p>
+    <div class="flex flex-col md:flex-row bg-[url('/images/som-bg.png')] mt-4 mb-4 rounded-lg">
+      <div class="w-full md:w-1/2 p-8">
+        <img src="/images/som.png" class="h-2/3 mx-auto md:mx-0 mb-6" />
+        <%= 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" %>
+      </div>
+      <div class="w-full md:w-1/2 p-8 pl-4 pr-4 grid grid-cols-1 gap-4">
+        <div class="som-box p-4">
+          <h2 class="font-bold text-[22px]">Build Projects</h2>
+          <p class="text-[18px]">Build websites, games, apps, or any other personal open-source coding projects to showcase your skills.</p>
+        </div>
+        <div class="som-box p-4">
+          <h2 class="font-bold text-[22px]">Get Stuff</h2>
+          <p class="text-[18px]">Get awesome prizes like Raspberry Pis, Server hosting credits, 3D printers, and more to fuel your next creation.</p>
+        </div>
+      </div>
+    </div>
+    <div class="flex flex-col md:flex-row bg-gradient-to-r from-[#EFCCCC] to-[#D35648] mt-4 mb-4 rounded-lg">
+      <div class="w-full md:w-1/3 translate-y-[-20px]">
+        <img src="/images/athena.png" class="w-[400px]" />
+      </div>
+      <div class="w-full md:w-2/3 p-8 pl-4 pr-4">
+        <img src="/images/athena_award.svg" class="h-24 mb-4" />
+        <p class="text-[18px] m-4">Earn an <b>industry recognized technical certificate</b> 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.</p>
+        <%= 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" %>
+      </div>
+    </div>
+  </div>
   <% if current_user %>
     <% if @show_wakatime_setup_notice %>
       <div class="text-left my-8 flex flex-col">
@@ -136,36 +222,20 @@
       <%= render "leaderboards/mini_leaderboard", leaderboard: @leaderboard, current_user: nil %>
     <% end %>
 
+    <div class="w-full flex justify-center overflow-x-none">
+      <p class="monospace text-center text-primary text-[22px] select-none whitespace-nowrap">
+      ==============================================/ h a c k /=============================================
+      </p>
+    </div>
+
     <div class="grid grid-cols-1 md:grid-cols-2 gap-8 my-8 items-center">
       <div class="w-full relative pb-[56.25%] h-0 overflow-hidden">
         <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/eFVA_ZWnzDk?si=TcEVwiigFZh0Sp_Z&loop=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen class="absolute top-0 left-0 w-full h-full rounded-lg"></iframe>
       </div>
 
-      <div class="flex justify-center items-center">
-        <div class="max-w-md mx-auto text-center w-full">
-          <%= 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" %>
-
-          <div class="my-4 text-gray-300 relative">
-            <span class="px-3">or</span>
-            <div class="absolute top-1/2 left-0 w-[45%] h-px bg-gray-600"></div>
-            <div class="absolute top-1/2 right-0 w-[45%] h-px bg-gray-600"></div>
-          </div>
-
-          <%= form_tag email_auth_path, class: "space-y-4", data: { turbo: false } do %>
-            <div class="mb-4">
-              <%= 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" %>
-            </div>
-            <%= 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] %>
-            <div class="text-green-500 mt-4">
-              Check your email for a sign-in link!
-            </div>
-            <% dev_tool do %>
-              Because you're on localhost, <%= link_to "click here to view the email", letter_opener_web_path %>
-            <% end %>
-          <% end %>
-        </div>
+      <div>
+        <h1 class="font-bold mt-1 mb-1 text-5xl">Start hacking with <span class="text-primary">Hackatime</span> now!</h1>
+        <p class="text-primary monospace text-[20px]">Superrrrrr easy to setup :)</p>
       </div>
     </div>
   <% end %>

public/images/down-arrow.svg

@@ -0,0 +1,6 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 18.0711L19.0711 11L57.4189 49.3478L50.3478 56.4189L12 18.0711Z" fill="#17171D"/>
+<path d="M88.8633 18.0711L81.7922 11L43.4444 49.3478L50.5155 56.4189L88.8633 18.0711Z" fill="#17171D"/>
+<path d="M12 51.0711L19.0711 44L57.4189 82.3478L50.3478 89.4189L12 51.0711Z" fill="#17171D"/>
+<path d="M88.8633 51.0711L81.7922 44L43.4444 82.3478L50.5155 89.4189L88.8633 51.0711Z" fill="#17171D"/>
+</svg>