System-End/hackatime
1
0
Fork 0
mirror of https://github.com/System-End/hackatime.git synced 2026-04-19 22:15:14 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

more css tweaks (#845)

Browse source 
* more css tweaks

* fix agreement check box
This commit is contained in:
Echo 2026-01-25 19:39:54 -05:00 • committed by GitHub
parent 023a641ad6
commit 072c5a3975
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
16 changed files with 61 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/views/admin/oauth_applications/show.html.erb
View file

@ -151,7 +151,7 @@
<% end %>
<%= link_to oauth_application_path(@application),
class: "w-full inline-flex items-center justify-center gap-2 px-4 py-2 border border-primary text-primary font-medium rounded transition-colors duration-200 hover:bg-primary/10" do %>
class: "w-full inline-flex items-center justify-center gap-2 px-4 py-2 border border-primary text-primary font-medium rounded transition-colors duration-200 hover:bg-primary/75" do %>
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />

4
app/views/docs/index.html.erb
View file

@ -129,7 +129,7 @@
['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-colors text-center block">
<a href="<%= doc_path("editors/#{slug}") %>" class="bg-darkless rounded-lg p-3 hover:bg-primary/75 transition-colors text-center block">
<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>
@ -167,7 +167,7 @@
].sort_by { |editor| editor[0] }
%>
<% all_editors.each do |name, slug| %>
<a href="<%= doc_path("editors/#{slug}") %>" class="bg-darkless rounded p-2 hover:bg-primary/10 transition-colors text-center block">
<a href="<%= doc_path("editors/#{slug}") %>" class="bg-darkless rounded p-2 hover:bg-primary/75 transition-colors text-center block">
<img src="/images/editor-icons/<%= slug %>-128.png" alt="<%= name %>" class="w-8 h-8 mx-auto mb-1">
<div class="text-xs text-white leading-tight"><%= name %></div>
</a>

2
app/views/doorkeeper/authorizations/new.html.erb
View file

@ -47,7 +47,7 @@
<%= hidden_field_tag :scope, @pre_auth.scope, id: nil %>
<%= hidden_field_tag :code_challenge, @pre_auth.code_challenge, id: nil %>
<%= hidden_field_tag :code_challenge_method, @pre_auth.code_challenge_method, id: nil %>
<button type="submit" class="w-full px-4 py-3 bg-primary hover:bg-primary/80 text-white font-bold rounded transition-colors cursor-pointer flex items-center justify-center">
<button type="submit" class="w-full px-4 py-3 bg-primary hover:bg-primary/75 text-white font-bold rounded transition-colors cursor-pointer flex items-center justify-center">
<span class="spinner hidden mr-2"><%= render "shared/spinner", class: "h-5 w-5" %></span>
<span class="btn-text"><%= t('doorkeeper.authorizations.buttons.authorize') %></span>
</button>

2
app/views/layouts/application.html.erb
View file

@ -246,7 +246,7 @@
},
{
text: "Log out now",
class: "bg-primary hover:bg-primary/80 text-white font-medium",
class: "bg-primary hover:bg-primary/75 text-white font-medium",
form: true,
url: signout_path,
method: "delete"

2
app/views/leaderboards/index.html.erb
View file

@ -11,7 +11,7 @@
<% if current_user && current_user.github_uid.blank? %>
<div class="bg-darker border border-primary rounded-lg p-4 mb-6">
<%= link_to "Connect your GitHub", "/auth/github", class: "bg-primary hover:bg-primary/50 text-white font-medium mr-2 px-4 py-2 rounded-lg transition-colors duration-200" %> to qualify for the leaderboard.
<%= link_to "Connect your GitHub", "/auth/github", class: "bg-primary hover:bg-primary/75 text-white font-medium mr-2 px-4 py-2 rounded-lg transition-colors duration-200" %> to qualify for the leaderboard.
</div>
<% end %>

2
app/views/my/project_repo_mappings/_archive_modal.html.erb
View file

@ -17,7 +17,7 @@
},
{
text: "Archive",
class: "bg-primary hover:bg-primary/80 text-white font-medium",
class: "bg-primary hover:bg-primary/75 text-white font-medium",
form: true,
url: archive_my_project_repo_mapping_path(CGI.escape(project_name)),
method: "patch"

2
app/views/my/project_repo_mappings/_edit_modal.html.erb
View file

@ -44,7 +44,7 @@
},
{
text: "Update Project",
class: "bg-primary hover:bg-primary/80 text-white font-medium",
class: "bg-primary hover:bg-primary/75 text-white font-medium",
form: true,
form_id: form_id
}

2
app/views/my/project_repo_mappings/_unarchive_modal.html.erb
View file

@ -16,7 +16,7 @@
},
{
text: "Restore",
class: "bg-primary hover:bg-primary/80 text-white font-medium",
class: "bg-primary hover:bg-primary/75 text-white font-medium",
form: true,
url: unarchive_my_project_repo_mapping_path(CGI.escape(project[:project_key] || project[:project])),
method: "patch"

2
app/views/profiles/not_found.html.erb
View file

@ -2,6 +2,6 @@
<div class="text-center py-16">
<h1 class="text-3xl font-bold mb-2">User not found</h1>
<p class="text-gray-400 mb-6">We couldn't find a user with that username... Usernames are case-sensitive if that helps.</p>
<%= link_to "Go back home", root_path, class: "inline-block px-6 py-3 bg-primary text-white rounded font-bold hover:bg-primary/80 transition-colors" %>
<%= link_to "Go back home", root_path, class: "inline-block px-6 py-3 bg-primary text-white rounded font-bold hover:bg-primary/75 transition-colors" %>
</div>
</div>

2
app/views/static_pages/index.html.erb
View file

@ -24,7 +24,7 @@
<% else %>
<h1 class="font-bold mt-1 mb-4 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 hca_auth_path(continue: @continue_param), class: "inline-flex items-center justify-center w-full px-6 py-3 rounded text-white font-bold bg-primary hover:bg-primary/80 transition-colors", data: { turbo: false }, onclick: "let s=this.querySelector('.spinner'),i=this.querySelector('.icon');s.classList.remove('hidden');i.classList.add('hidden');this.style.cssText='pointer-events:none;opacity:0.7'" do %>
<%= link_to hca_auth_path(continue: @continue_param), class: "inline-flex items-center justify-center w-full px-6 py-3 rounded text-white font-bold bg-primary hover:bg-primary/75 transition-colors", data: { turbo: false }, onclick: "let s=this.querySelector('.spinner'),i=this.querySelector('.icon');s.classList.remove('hidden');i.classList.add('hidden');this.style.cssText='pointer-events:none;opacity:0.7'" do %>
<span class="spinner mr-2 hidden"><%= render "shared/spinner", class: "h-6 w-6" %></span>
<img src="/images/icon-rounded.png" class="icon h-6 w-6 mr-2">
<span>Sign in with your Hack Club account</span>

2
app/views/static_pages/minimal_login.html.erb
View file

@ -6,7 +6,7 @@
<h1 class="font-bold text-3xl text-white">Welcome to Hackatime</h1>
</header>
<%= link_to hca_auth_path(continue: @continue_param), class: "inline-flex items-center justify-center w-full px-6 py-3 rounded text-white font-bold bg-primary hover:bg-primary/80 transition-colors", data: { turbo: false }, onclick: "let s=this.querySelector('.spinner'),i=this.querySelector('.icon');s.classList.remove('hidden');i.classList.add('hidden');this.style.cssText='pointer-events:none;opacity:0.7'" do %>
<%= link_to hca_auth_path(continue: @continue_param), class: "inline-flex items-center justify-center w-full px-6 py-3 rounded text-white font-bold bg-primary hover:bg-primary/75 transition-colors", data: { turbo: false }, onclick: "let s=this.querySelector('.spinner'),i=this.querySelector('.icon');s.classList.remove('hidden');i.classList.add('hidden');this.style.cssText='pointer-events:none;opacity:0.7'" do %>
<span class="spinner mr-2 hidden"><%= render "shared/spinner", class: "h-6 w-6" %></span>
<img src="/images/icon-rounded.png" class="icon h-6 w-6 mr-2">
<span>Sign in with your Hack Club account</span>

36
app/views/users/edit.html.erb
View file

@ -20,7 +20,7 @@
</div>
<p class="text-gray-300 mb-4">Get started with tracking your coding time in just a few minutes.</p>
<%= link_to "Set up time tracking", my_wakatime_setup_path,
class: "inline-flex items-center gap-2 px-4 py-2 bg-primary text-white hover:bg-primary/50 font-medium rounded transition-colors duration-200" %>
class: "inline-flex items-center gap-2 px-4 py-2 bg-primary text-white hover:bg-primary/75 font-medium rounded transition-colors duration-200" %>
</div>
<div class="border border-primary rounded-xl p-6 bg-dark transition-all duration-200">
@ -50,7 +50,7 @@
{ class: "w-full px-3 py-2 h-10 bg-darkless rounded text-white focus:border-primary focus:ring-1 focus:ring-primary" } %>
</div>
<p class="text-xs text-secondary">This affects how your activity graph and other time-based features are displayed.</p>
<%= f.submit "Save Settings", class: "w-full px-4 py-2 bg-primary text-white hover:bg-primary/50 font-medium rounded transition-colors duration-200 cursor-pointer" %>
<%= f.submit "Save Settings", class: "w-full px-4 py-2 bg-primary text-white hover:bg-primary/75 font-medium rounded transition-colors duration-200 cursor-pointer" %>
<% end %>
</div>
@ -72,7 +72,7 @@
{},
{ class: "w-full px-3 py-2 h-10 bg-darkless rounded text-white focus:border-primary focus:ring-1 focus:ring-primary" } %>
</div>
<%= f.submit "Save Settings", class: "w-full px-4 py-2 bg-primary text-white hover:bg-primary/50 font-medium rounded transition-colors duration-200 cursor-pointer" %>
<%= f.submit "Save Settings", class: "w-full px-4 py-2 bg-primary text-white hover:bg-primary/75 font-medium rounded transition-colors duration-200 cursor-pointer" %>
<% end %>
</div>
@ -105,7 +105,7 @@
Your profile is currently live at <%= link_to "hackati.me/#{@user.username}", "https://hackati.me/#{@user.username}", target: "_blank", class: "underline" %>
</p>
<% end %>
<%= f.submit "Save Settings", class: "w-full px-4 py-2 bg-primary text-white hover:bg-primary/50 font-medium rounded transition-colors duration-200 cursor-pointer" %>
<%= f.submit "Save Settings", class: "w-full px-4 py-2 bg-primary text-white hover:bg-primary/75 font-medium rounded transition-colors duration-200 cursor-pointer" %>
<% end %>
</div>
@ -134,7 +134,7 @@
<%= f.label :uses_slack_status, "Update my Slack status automatically",
class: "text-sm text-gray-200" %>
</div>
<%= f.submit "Save", class: "mt-3 px-4 py-2 bg-primary text-white hover:bg-primary/50 font-medium rounded transition-colors duration-200 cursor-pointer" %>
<%= f.submit "Save", class: "mt-3 px-4 py-2 bg-primary text-white hover:bg-primary/75 font-medium rounded transition-colors duration-200 cursor-pointer" %>
<% end %>
</div>
@ -177,7 +177,7 @@
class: "text-sm text-gray-200" %>
</div>
<p class="text-xs text-secondary">When enabled, others can view your coding statistics through public APIs. Many Hack Club YSWS programs use this to track your progress. Disabling this can prevent you from participating in some programs.</p>
<%= f.submit "Save Settings", class: "w-full px-4 py-2 bg-primary text-white hover:bg-primary/50 font-medium rounded transition-colors duration-200 cursor-pointer" %>
<%= f.submit "Save Settings", class: "w-full px-4 py-2 bg-primary text-white hover:bg-primary/75 font-medium rounded transition-colors duration-200 cursor-pointer" %>
<% end %>
<div class="border-t border-darkless pt-4 mt-4 space-y-3">
@ -195,7 +195,7 @@
<button type="button"
data-controller="account-deletion"
data-action="click->account-deletion#confirm"
class="w-full px-4 py-2 bg-primary text-white hover:bg-primary/50 font-medium rounded transition-colors duration-200 cursor-pointer">
class="w-full px-4 py-2 bg-primary text-white hover:bg-primary/75 font-medium rounded transition-colors duration-200 cursor-pointer">
Request Account Deletion
</button>
<% else %>
@ -222,7 +222,7 @@
<button type="button"
data-controller="api-key-rotation"
data-action="click->api-key-rotation#confirm"
class="w-full px-4 py-2 bg-primary hover:bg-primary/50 text-white font-medium rounded transition-colors duration-200 cursor-pointer">
class="w-full px-4 py-2 bg-primary hover:bg-primary/75 text-white font-medium rounded transition-colors duration-200 cursor-pointer">
Rotate API Key
</button>
</div>
@ -246,12 +246,12 @@
<span class="text-gray-200 text-sm">Connected: <%= link_to "@#{h(@user.github_username)}", "https://github.com/#{h(@user.github_username)}", target: "_blank", class: "text-primary hover:text-primary/80 underline" %></span>
</div>
<div class="flex items-center gap-2">
<%= link_to "Relink GitHub Account", github_auth_path, data: { turbo: "false" }, class: "inline-flex items-center gap-2 px-3 py-2 bg-primary text-white hover:bg-primary/50 text-sm font-medium rounded transition-colors duration-200 cursor-pointer" %>
<%= link_to "Relink GitHub Account", github_auth_path, data: { turbo: "false" }, class: "inline-flex items-center gap-2 px-3 py-2 bg-primary text-white hover:bg-primary/75 text-sm font-medium rounded transition-colors duration-200 cursor-pointer" %>
<%= button_to "Unlink", github_unlink_path, method: :delete, data: { turbo_confirm: "Are you sure you want to unlink your GitHub account? This will remove your GitHub connection and you may need to re-link to use GitHub-dependent features." }, class: "inline-flex items-center gap-2 px-3 py-2 bg-darkless hover:bg-darkless/50 text-white hover:text-white/80 text-sm font-medium rounded transition-colors duration-200 cursor-pointer" %>
</div>
<% else %>
<%= link_to "Link GitHub Account", github_auth_path, data: { turbo: "false" },
class: "inline-flex items-center gap-2 px-4 py-2 bg-primary text-white hover:bg-primary/50 font-medium rounded transition-colors duration-200 cursor-pointer" %>
class: "inline-flex items-center gap-2 px-4 py-2 bg-primary text-white hover:bg-primary/75 font-medium rounded transition-colors duration-200 cursor-pointer" %>
<% end %>
</div>
@ -273,7 +273,7 @@
method: :delete,
class: "space-y-4" do |f| %>
<%= f.hidden_field :email, value: email.email %>
<%= f.submit "Unlink!", class: "w-full px-4 py-2 bg-primary text-white hover:bg-primary/50 font-medium rounded transition-colors duration-200 cursor-pointer" %>
<%= f.submit "Unlink!", class: "w-full px-4 py-2 bg-primary text-white hover:bg-primary/75 font-medium rounded transition-colors duration-200 cursor-pointer" %>
<% end %>
<% end %>
</div>
@ -287,7 +287,7 @@
placeholder: "Add another email address",
required: true,
class: "w-full px-3 py-2 bg-darkless border border-darkless rounded text-white focus:border-primary focus:ring-1 focus:ring-primary text-sm" %>
<%= submit_tag "Add Email", class: "w-full px-3 py-2 bg-primary hover:bg-primary/80 text-white text-sm font-medium rounded transition-colors duration-200 cursor-pointer" %>
<%= submit_tag "Add Email", class: "w-full px-3 py-2 bg-primary hover:bg-primary/75 text-white text-sm font-medium rounded transition-colors duration-200 cursor-pointer" %>
<% end %>
</div>
</div>
@ -394,7 +394,7 @@
<p class="text-gray-300 text-sm mb-4">This will migrate your heartbeats from waka.hackclub.com to this platform.</p>
<%= button_to "Migrate heartbeats", my_settings_migrate_heartbeats_path, method: :post,
class: "w-full px-4 py-2 bg-primary text-white hover:bg-primary/50 font-medium rounded transition-colors duration-200 cursor-pointer" %>
class: "w-full px-4 py-2 bg-primary text-white hover:bg-primary/75 font-medium rounded transition-colors duration-200 cursor-pointer" %>
<% if @heartbeats_migration_jobs.any? %>
<div class="mt-4 space-y-2">
@ -499,7 +499,7 @@
<div class="space-y-2">
<%= link_to export_my_heartbeats_path(format: :json, all_data: "true"),
class: "w-full bg-primary hover:bg-primary/50 text-white px-4 py-2 rounded font-medium transition-colors inline-flex items-center justify-center gap-2",
class: "w-full bg-primary hover:bg-primary/75 text-white px-4 py-2 rounded font-medium transition-colors inline-flex items-center justify-center gap-2",
method: :get do %>
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10" />
@ -549,7 +549,7 @@
<div class="flex gap-3">
<%= form.submit "Import Heartbeats",
class: "w-full px-3 py-2 bg-primary hover:bg-primary/80 text-white text-md font-medium rounded transition-colors duration-200 cursor-pointer",
class: "w-full px-3 py-2 bg-primary hover:bg-primary/75 text-white text-md font-medium rounded transition-colors duration-200 cursor-pointer",
data: { confirm: "Are you sure you want to import heartbeats? This will add new data to your account." } %>
</div>
<% end %>
@ -616,7 +616,7 @@
},
{
text: "Rotate Now",
class: "bg-primary hover:bg-primary/80 text-white font-medium",
class: "bg-primary hover:bg-primary/75 text-white font-medium",
action: "click->api-key-rotation#rotate"
}
] %>
@ -636,7 +636,7 @@
},
{
text: "Copy Key",
class: "bg-primary hover:bg-primary/80 text-white font-medium",
class: "bg-primary hover:bg-primary/75 text-white font-medium",
action: "click->api-key-rotation#copyKey"
}
],
@ -659,7 +659,7 @@
},
{
text: "Delete My Account",
class: "bg-primary hover:bg-primary/80 text-white font-medium",
class: "bg-primary hover:bg-primary/75 text-white font-medium",
form: true,
url: create_deletion_path,
method: "post"

22
app/views/users/wakatime_setup.html.erb
View file

@ -52,7 +52,7 @@
<div class="code-block bg-darkless rounded-lg p-4 mb-4">
<code class="text-cyan text-sm">export HACKATIME_API_KEY="<%= @current_user_api_key %>" && export HACKATIME_API_URL="<%= api_hackatime_v1_url %>" && export SUCCESS_URL="<%= root_url %>/success.txt" && curl -sSL <%= root_url %>hackatime/setup.sh | bash</code>
<button class="copy-button bg-primary hover:bg-red border-0 text-white px-6 py-2 rounded transition-colors cursor-pointer font-semibold" onclick="copy(this)">Copy</button>
<button class="copy-button bg-primary hover:bg-primary/75 border-0 text-white px-6 py-2 rounded transition-colors cursor-pointer font-semibold" onclick="copy(this)">Copy</button>
</div>
<details class="mb-4 group">
@ -68,8 +68,8 @@
</details>
<div class="flex gap-3 flex-wrap">
<button class="bg-blue hover:bg-cyan text-white border-0 px-4 py-2 rounded transition-colors cursor-pointer text-sm" onclick="toggleSection('windows')">Using Windows?</button>
<button class="bg-purple hover:bg-darkless text-white border-0 px-4 py-2 rounded transition-colors cursor-pointer text-sm" onclick="toggleSection('advanced')">Custom Setup</button>
<button class="bg-blue hover:bg-blue/75 text-white border-0 px-4 py-2 rounded transition-colors cursor-pointer text-sm" onclick="toggleSection('windows')">Using Windows?</button>
<button class="bg-purple hover:bg-purple/75 text-white border-0 px-4 py-2 rounded transition-colors cursor-pointer text-sm" onclick="toggleSection('advanced')">Custom Setup</button>
</div>
</div>
@ -86,7 +86,7 @@
<div class="code-block bg-darkless rounded-lg p-4 mb-4">
<code class="text-cyan text-sm">$env:HACKATIME_API_KEY="<%= @current_user_api_key %>"; $env:HACKATIME_API_URL="<%= api_hackatime_v1_url %>"; powershell -ExecutionPolicy Bypass -Command "& {iwr <%= root_url %>hackatime/setup.ps1 -UseBasicParsing | iex}"</code>
<button class="copy-button bg-primary hover:bg-red border-0 text-white px-6 py-2 rounded transition-colors cursor-pointer font-semibold" onclick="copy(this)">Copy</button>
<button class="copy-button bg-primary hover:bg-primary/75 border-0 text-white px-6 py-2 rounded transition-colors cursor-pointer font-semibold" onclick="copy(this)">Copy</button>
</div>
<details class="mb-4 group">
@ -102,8 +102,8 @@
</details>
<div class="flex gap-3 flex-wrap">
<button class="bg-green hover:bg-cyan text-white border-0 px-4 py-2 rounded transition-colors cursor-pointer text-sm" onclick="toggleSection('mac-linux')">Using Mac/Linux?</button>
<button class="bg-purple hover:bg-darkless text-white border-0 px-4 py-2 rounded transition-colors cursor-pointer text-sm" onclick="toggleSection('advanced')">Custom Setup</button>
<button class="bg-green hover:bg-green/75 text-white border-0 px-4 py-2 rounded transition-colors cursor-pointer text-sm" onclick="toggleSection('mac-linux')">Using Mac/Linux?</button>
<button class="bg-purple hover:bg-purple/75 text-white border-0 px-4 py-2 rounded transition-colors cursor-pointer text-sm" onclick="toggleSection('advanced')">Custom Setup</button>
</div>
</div>
@ -112,16 +112,16 @@
<div class="bg-purple/10 border border-purple/30 rounded-lg p-4 mb-4">
<p class="text-sm">For advanced users who want to manually configure their setup.</p>
</div>
<p class="text-lg mb-4">Create or edit <code class="bg-darkless px-2 py-1 rounded text-cyan">~/.wakatime.cfg</code> with:</p>
<p class="text-lg mb-4">Create or edit <span class="bg-darkless mx-2 px-2 py-1 rounded text-cyan text-md">~/.wakatime.cfg</span> with:</p>
<div class="code-block bg-darkless rounded-lg p-4 mb-4">
<code class="text-cyan text-sm">[settings]&#10;api_url = <%= api_hackatime_v1_url %>&#10;api_key = <%= @current_user_api_key %>&#10;heartbeat_rate_limit_seconds = 30</code>
<button class="copy-button bg-primary hover:bg-red border-0 text-white px-6 py-2 rounded transition-colors cursor-pointer font-semibold" onclick="copy(this)">Copy</button>
<button class="copy-button bg-primary hover:bg-primary/75 border-0 text-white px-6 py-2 rounded transition-colors cursor-pointer font-semibold" onclick="copy(this)">Copy</button>
</div>
<div class="flex gap-3 flex-wrap">
<button class="bg-green hover:bg-cyan text-white border-0 px-4 py-2 rounded transition-colors cursor-pointer text-sm" onclick="toggleSection('mac-linux')">Using Mac/Linux?</button>
<button class="bg-blue hover:bg-cyan text-white border-0 px-4 py-2 rounded transition-colors cursor-pointer text-sm" onclick="toggleSection('windows')">Using Windows?</button>
<button class="bg-green hover:bg-green/75 text-white border-0 px-4 py-2 rounded transition-colors cursor-pointer text-sm" onclick="toggleSection('mac-linux')">Using Mac/Linux?</button>
<button class="bg-blue hover:bg-blue/75 text-white border-0 px-4 py-2 rounded transition-colors cursor-pointer text-sm" onclick="toggleSection('windows')">Using Windows?</button>
</div>
</div>
</div>
@ -160,7 +160,7 @@
<p class="text-secondary text-sm">Hackatime is configured and ready to go.</p>
</div>
<%= link_to my_wakatime_setup_step_2_path, class: "block w-full bg-primary hover:bg-red text-white text-center px-6 py-3 rounded-lg font-semibold transition-colors" do %>
<%= link_to my_wakatime_setup_step_2_path, class: "block w-full bg-primary hover:bg-primary/75 text-white text-center px-6 py-3 rounded-lg font-semibold transition-colors" do %>
Continue →
<% end %>
</div>

18
app/views/users/wakatime_setup_step_2.html.erb
View file

@ -24,7 +24,7 @@
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 max-w-4xl mx-auto">
<%= link_to my_wakatime_setup_step_3_path(editor: "vscode"), class: "bg-dark rounded-lg p-6 hover:bg-darkless transition-colors flex flex-col items-center justify-center text-center gap-4 text-white no-underline group h-full" do %>
<div class="w-20 h-20 rounded-xl flex items-center justify-center bg-darkless group-hover:scale-110 transition-transform duration-200">
<div class="w-20 h-20 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-200">
<img src="/images/editor-icons/vs-code-128.png" alt="VS Code" class="w-16 h-16 object-contain">
</div>
<div>
@ -33,7 +33,7 @@
<% end %>
<%= link_to my_wakatime_setup_step_3_path(editor: "vim"), class: "bg-dark rounded-lg p-6 hover:bg-darkless transition-colors flex flex-col items-center justify-center text-center gap-4 text-white no-underline group h-full" do %>
<div class="w-20 h-20 rounded-xl flex items-center justify-center bg-darkless group-hover:scale-110 transition-transform duration-200">
<div class="w-20 h-20 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-200">
<img src="/images/editor-icons/vim-128.png" alt="Vim" class="w-16 h-16 object-contain">
</div>
<div>
@ -42,7 +42,7 @@
<% end %>
<%= link_to my_wakatime_setup_step_3_path(editor: "neovim"), class: "bg-dark rounded-lg p-6 hover:bg-darkless transition-colors flex flex-col items-center justify-center text-center gap-4 text-white no-underline group h-full" do %>
<div class="w-20 h-20 rounded-xl flex items-center justify-center bg-darkless group-hover:scale-110 transition-transform duration-200">
<div class="w-20 h-20 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-200">
<img src="/images/editor-icons/neovim-128.png" alt="Neovim" class="w-16 h-16 object-contain">
</div>
<div>
@ -51,7 +51,7 @@
<% end %>
<%= link_to my_wakatime_setup_step_3_path(editor: "emacs"), class: "bg-dark rounded-lg p-6 hover:bg-darkless transition-colors flex flex-col items-center justify-center text-center gap-4 text-white no-underline group h-full" do %>
<div class="w-20 h-20 rounded-xl flex items-center justify-center bg-darkless group-hover:scale-110 transition-transform duration-200">
<div class="w-20 h-20 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-200">
<img src="/images/editor-icons/emacs-128.png" alt="Emacs" class="w-16 h-16 object-contain">
</div>
<div>
@ -60,7 +60,7 @@
<% end %>
<%= link_to my_wakatime_setup_step_3_path(editor: "pycharm"), class: "bg-dark rounded-lg p-6 hover:bg-darkless transition-colors flex flex-col items-center justify-center text-center gap-4 text-white no-underline group h-full" do %>
<div class="w-20 h-20 rounded-xl flex items-center justify-center bg-darkless group-hover:scale-110 transition-transform duration-200">
<div class="w-20 h-20 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-200">
<img src="/images/editor-icons/pycharm-128.png" alt="PyCharm" class="w-16 h-16 object-contain">
</div>
<div>
@ -69,7 +69,7 @@
<% end %>
<%= link_to my_wakatime_setup_step_3_path(editor: "sublime"), class: "bg-dark rounded-lg p-6 hover:bg-darkless transition-colors flex flex-col items-center justify-center text-center gap-4 text-white no-underline group h-full" do %>
<div class="w-20 h-20 rounded-xl flex items-center justify-center bg-darkless group-hover:scale-110 transition-transform duration-200">
<div class="w-20 h-20 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-200">
<img src="/images/editor-icons/sublime-text-128.png" alt="Sublime" class="w-16 h-16 object-contain">
</div>
<div>
@ -78,7 +78,7 @@
<% end %>
<%= link_to my_wakatime_setup_step_3_path(editor: "unity"), class: "bg-dark rounded-lg p-6 hover:bg-darkless transition-colors flex flex-col items-center justify-center text-center gap-4 text-white no-underline group h-full" do %>
<div class="w-20 h-20 rounded-xl flex items-center justify-center bg-darkless group-hover:scale-110 transition-transform duration-200">
<div class="w-20 h-20 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-200">
<img src="/images/editor-icons/unity-128.png" alt="Unity" class="w-16 h-16 object-contain">
</div>
<div>
@ -87,7 +87,7 @@
<% end %>
<%= link_to my_wakatime_setup_step_3_path(editor: "godot"), class: "bg-dark rounded-lg p-6 hover:bg-darkless transition-colors flex flex-col items-center justify-center text-center gap-4 text-white no-underline group h-full" do %>
<div class="w-20 h-20 rounded-xl flex items-center justify-center bg-darkless group-hover:scale-110 transition-transform duration-200">
<div class="w-20 h-20 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-200">
<img src="/images/editor-icons/godot-128.png" alt="Godot" class="w-16 h-16 object-contain">
</div>
<div>
@ -96,7 +96,7 @@
<% end %>
<%= link_to my_wakatime_setup_step_3_path(editor: "other"), class: "bg-dark rounded-lg p-6 hover:bg-darkless transition-colors flex flex-col items-center justify-center text-center gap-4 text-white no-underline group h-full col-span-2 md:col-span-3 lg:col-span-4" do %>
<div class="w-20 h-20 rounded-xl flex items-center justify-center bg-darkless group-hover:scale-110 transition-transform duration-200">
<div class="w-20 h-20 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-200">
<div class="text-4xl">🔧</div>
</div>
<div>

8
app/views/users/wakatime_setup_step_3.html.erb
View file

@ -267,19 +267,19 @@ git clone https://github.com/wakatime/vim-wakatime.git</code></pre>
<div>
<h4 class="font-bold mb-2 text-lg">Popular Editors:</h4>
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
<a href="/docs/editors/pycharm" class="flex items-center gap-3 bg-darkless rounded-lg p-3 hover:bg-primary/10 transition-colors">
<a href="/docs/editors/pycharm" class="flex items-center gap-3 bg-darkless rounded-lg p-3 hover:bg-primary/75 transition-colors">
<img src="/images/editor-icons/pycharm-128.png" alt="PyCharm" class="w-8 h-8">
<span>PyCharm</span>
</a>
<a href="/docs/editors/sublime-text" class="flex items-center gap-3 bg-darkless rounded-lg p-3 hover:bg-primary/10 transition-colors">
<a href="/docs/editors/sublime-text" class="flex items-center gap-3 bg-darkless rounded-lg p-3 hover:bg-primary/75 transition-colors">
<img src="/images/editor-icons/sublime-text-128.png" alt="Sublime Text" class="w-8 h-8">
<span>Sublime Text</span>
</a>
<a href="/docs/editors/unity" class="flex items-center gap-3 bg-darkless rounded-lg p-3 hover:bg-primary/10 transition-colors">
<a href="/docs/editors/unity" class="flex items-center gap-3 bg-darkless rounded-lg p-3 hover:bg-primary/75 transition-colors">
<img src="/images/editor-icons/unity-128.png" alt="Unity" class="w-8 h-8">
<span>Unity</span>
</a>
<a href="/docs/editors/neovim" class="flex items-center gap-3 bg-darkless rounded-lg p-3 hover:bg-primary/10 transition-colors">
<a href="/docs/editors/neovim" class="flex items-center gap-3 bg-darkless rounded-lg p-3 hover:bg-primary/75 transition-colors">
<img src="/images/editor-icons/neovim-128.png" alt="Neovim" class="w-8 h-8">
<span>Neovim</span>
</a>

14
app/views/users/wakatime_setup_step_4.html.erb
View file

@ -30,12 +30,12 @@
</div>
<div class="text-center mb-8 mt-4 max-w-5xl mx-auto">
<h2 class="text-3xl font-bold text-green mt-4 mb-4">Oh, and one more thing...</h2>
<h2 class="text-3xl font-bold mt-4 mb-4">Oh, and one more thing...</h2>
<p class="text-xl text-white mb-2">
<b>Please do not try to cheat the system!</b> We have measures in place to detect and prevent cheating. If you attempt to manipulate Hackatime, you will be banned from Hackatime and other participating YSWS / events / programs, so please play fair! We are a non-profit organization and we run off of donations.
</p>
<label class="flex items-center justify-center gap-2 cursor-pointer select-none mt-2">
<input type="checkbox" id="o" class="w-5 h-5 rounded border-gray-300 text-primary focus:ring-primary bg-white text-black">
<input type="checkbox" id="o" class="w-5 h-5 rounded border-gray-300 text-primary focus:ring-primary bg-white">
<span class="text-xl text-primary">I agree and I understand the rules.</span>
</label>
@ -52,16 +52,16 @@
</div>
<div class="flex gap-4 flex-wrap justify-center">
<%= link_to my_wakatime_setup_step_2_path, class: "bg-secondary hover:bg-darkless text-white px-6 py-3 rounded-lg transition-colors" do %>
<%= link_to my_wakatime_setup_step_2_path, class: "px-4 py-3 bg-dark hover:bg-darkless border border-darkless text-gray-300 rounded transition-colors cursor-pointer flex items-center justify-center" do %>
Set up another editor
<% end %>
<% if (url = session.dig(:return_data, "url")) %>
<%= link_to url, id: "s", class: "bg-primary hover:bg-red text-white px-8 py-3 rounded-lg font-semibold transition-colors text-lg opacity-50 pointer-events-none" do %>
<%= link_to url, id: "s", class: "px-4 py-3 bg-primary hover:bg-primary/75 border border-darkless text-white rounded transition-colors cursor-pointer flex items-center justify-center opacity-50 cursor-not-allowed pointer-events-none" do %>
<%= session.dig(:return_data, "button_text") || "Done" %>
<% end %>
<% else %>
<%= link_to root_path, id: "s", class: "bg-primary hover:bg-red text-white px-8 py-3 rounded-lg font-semibold transition-colors text-lg opacity-50 pointer-events-none" do %>
<%= link_to root_path, id: "s", class: "px-4 py-3 bg-primary hover:bg-primary/75 border border-darkless text-white rounded transition-colors cursor-pointer flex items-center justify-center opacity-50 cursor-not-allowed pointer-events-none" do %>
I agree, Get started!
<% end %>
<% end %>
@ -70,10 +70,10 @@
document.getElementById('o').addEventListener('change', function() {
const x = document.getElementById('s');
if (this.checked) {
x.classList.remove('opacity-50', 'pointer-events-none');
x.classList.remove('opacity-50', 'cursor-not-allowed', 'pointer-events-none');
x.disabled = false;
} else {
x.classList.add('opacity-50', 'pointer-events-none');
x.classList.add('opacity-50', 'cursor-not-allowed', 'pointer-events-none');
x.disabled = true;
}
});