archived-hc-harbor/app/views/static_pages/index.html.erb

<div class="container">
  <% if current_user&.trust_level != "red" %>
    <div class="text-red-400 bg-red-500/10 border border-red-500/20 rounded-lg p-4 text-center">
      <strong>Hold up!</strong> Your account has been flagged for suspicious activity.<br>
      This means that you are no longer included in the public leaderboards.<br>
      If this was a mistake, please email <a href="mailto:echo@hackclub.com" class="underline text-red-600">echo@hackclub.com</a>.
    </div>
  <% end %>
  <p class="italic underline mt-2">
    <%= @flavor_text %>
  </p>
  <h1 class="title">
    <% if current_user %>
      Keep Track of <span class="primary-color">Your</span> Coding Time
    <% else %>
      Free Coding Time Tracker - See How Much You <span class="primary-color">Code</span>
    <% end %>
    <%# link_to "🃏", wildcard_static_pages_path, class: "wildcard" %>
  </h1>
  <style>
    .wildcard {
      opacity: 0;
    }
    .wildcard:hover {
      opacity: 1;
    }
  </style>
  <p class="flavor">
    <%= @usage_social_proof&.downcase %>
  </p>
  <% unless current_user %>
    <p class="subtitle">
      Hackatime helps you track how much time you spend coding. See which programming languages you use most and how productive you are. It's completely free and works with over <%= link_to "75 code editors", docs_path + "#supported-editors" %>!
    </p>
    
    <% if @home_stats&.[](:seconds_tracked) && @home_stats&.[](:users_tracked) %>
      <div class="social-proof">
        <h2 style="font-size: 1.2em; margin: 0.5em 0;">Join Thousands of High Schoolers</h2>
        <p class="subtitle">
          Already tracking <span class="primary-color"><%= number_with_delimiter(@home_stats[:seconds_tracked] / 3600) %> <%= 'hour'.pluralize(@home_stats[:seconds_tracked] / 3600) %></span>
          of coding across <span class="primary-color"><%= number_with_delimiter(@home_stats[:users_tracked]) %> <%= 'high schooler'.pluralize(@home_stats[:users_tracked]) %></span>
          since <span class="primary-color">2025</span>.
        </p>
      </div>
      
      <div class="benefits-section" style="margin: 2em 0;">
        <h2 style="font-size: 1.3em; margin-bottom: 1em;">Why Choose Hackatime?</h2>
        <ul style="list-style: none; padding: 0;">
          <li style="margin: 0.5em 0;">✅ <strong>100% Free</strong> - No paid plans or hidden fees</li>
          <li style="margin: 0.5em 0;">📊 <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 style="margin: 0.5em 0;">📡 <strong>Works Offline</strong> - Time tracking continues even without internet</li>
          <li style="margin: 0.5em 0;">🔒 <strong>Privacy First</strong> - Your data stays safe</li>
          <li style="margin: 0.5em 0;">⚡ <strong>Real-time Stats</strong> - See your coding time instantly</li>
          <li style="margin: 0.5em 0;">🏆 <strong>Leaderboards</strong> - Compare with other high schoolers</li>
        </ul>
      </div>
    <% end %>
  <% end %>
  <% if current_user %>

    <% if @show_wakatime_setup_notice %>
      <div class="setup-notice">
        <%= link_to "Set up Hackatime! Click me.", my_wakatime_setup_path, class: "auth-button setup-button primary-action" %>
        <div class="setup-info">
          <% if @ssp_users_recent&.any? %>
            <div class="recent-setup-users">
              <% @ssp_users_recent.each do |user| %>
                <div class="avatar-container">
                  <div class="avatar-tooltip"><%= user[:display_name] %></div>
                  <img src="<%= user[:avatar_url] %>" alt="<%= user[:display_name] %>" class="setup-avatar" />
                </div>
              <% end %>
              <% if @ssp_users_size && @ssp_users_size > 5 %>
                <div class="avatar-container all-users-hover" title="See all <%= @ssp_users_size %> users">
                  <div class="setup-avatar more-avatars">+<%= @ssp_users_size - 5 %></div>
                  <div class="users-hover-list">
                    <h4>All users who set up Hackatime</h4>
                    <div class="hover-user-list">
                      <% @ssp_users_recent.each do |user| %>
                        <div class="user-item">
                          <img src="<%= user[:avatar_url] %>" alt="<%= user[:display_name] %>" class="user-avatar" />
                          <span class="user-name"><%= user[:display_name] %></span>
                        </div>
                      <% end %>
                    </div>
                  </div>
                </div>
              <% end %>
            </div>
          <% end %>
          <% if @ssp_message %>
            <p class="setup-hint"><%= @ssp_message %> (this is real data)</p>
          <% end %>
        </div>
      </div>
    <% end %>

    <p>
      <% if @show_logged_time_sentence %>
        You've logged
        <%= short_time_detailed @todays_duration %>
        <% if @todays_languages.any? || @todays_editors.any? %>
          across
          <% if @todays_languages.any? %>
            <% if @todays_languages.length >= 4 %>
              <%= @todays_languages[0..1].join(", ") %> <span title="<%= @todays_languages[2..].join(", ") %>">(& <%= pluralize(@todays_languages.length - 2, 'other language') %>)</span>
            <% else %>
              <%= @todays_languages.to_sentence %>
            <% end %>
          <% end %>
          <% if @todays_languages.any? && @todays_editors.any? %>
            using
          <% end %>
          <% if @todays_editors.any? %>
            <%= @todays_editors.to_sentence %>
          <% end %>
        <% end %>
      <% else %>
        No time logged today... but you can change that!
      <% end %>
    </p>

    <%= turbo_frame_tag "mini_leaderboard", src: mini_leaderboard_static_pages_path do %>
      <%= render "leaderboards/mini_leaderboard_loading" %>
    <% end %>

    <%= turbo_frame_tag "filterable_dashboard", src: filterable_dashboard_static_pages_path do %>
      <span>Loading...</span>
    <% end %>

    <%= turbo_frame_tag "activity_graph", src: activity_graph_static_pages_path do %>
      <span>Loading...</span>
    <% end %>
  <% else %>
    <% if @leaderboard %>
      <h3>Today's Top Hack Clubbers</h3>
      <%= render "leaderboards/mini_leaderboard", leaderboard: @leaderboard, current_user: nil %>
    <% end %>
    
    <div class="login-grid">
      <div class="video-container">
        <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></iframe>
      </div>
      
      <div class="auth-container">
        <div class="auth-options">
          <%= link_to "Sign in with Hack Club Slack", slack_auth_path, class: "auth-button slack" %>
          
          <div class="auth-divider">or</div>
          
          <%= form_tag email_auth_path, class: "email-auth-form", data: { turbo: false } do %>
            <div class="field">
              <%= email_field_tag :email, nil, placeholder: "Enter your email", required: true %>
            </div>
            <%= submit_tag "Send sign-in link", class: "auth-button email", data: { disable_with: "Sending..." } %>
          <% end %>
          <% if params[:sign_in_email] %>
            <div class="auth-success">
              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>
    </div>
  <% end %>
</div>