mirror of
https://github.com/System-End/hackatime.git
synced 2026-04-19 19:55:16 +00:00
redo sign in styles (#696)
This commit is contained in:
Echo
GitHub
parent
8a04c681b1
commit
d7e04e2b29
3 changed files with 35 additions and 34 deletions
|
|
@ -24,30 +24,31 @@
|
|||
<% 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 hca_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 %>
|
||||
<span class="hidden md:flex">Sign in with Hack Club</span>
|
||||
<%= link_to hca_auth_path, class: "inline-flex items-center justify-center px-6 py-3 rounded text-white font-bold cursor-pointer border-none w-full mt-4 bg-primary" do %>
|
||||
<img src="/images/icon-rounded.png" class="h-6 w-6 mr-2">
|
||||
<span>Sign in with your Hack Club account</span>
|
||||
<% end %>
|
||||
|
||||
<p class="text-center text-gray-400 text-sm">
|
||||
<%= link_to slack_auth_path, class: "text-gray-400 hover:text-primary underline" do %>
|
||||
Sign in with Slack instead
|
||||
<% end %>
|
||||
</p>
|
||||
|
||||
<div class="flex items-center my-4">
|
||||
<div class="flex-1 border-t border-gray-600"></div>
|
||||
<div class="flex-1 border-t border-darkless"></div>
|
||||
<span class="px-4 text-gray-400 text-sm">or</span>
|
||||
<div class="flex-1 border-t border-gray-600"></div>
|
||||
<div class="flex-1 border-t border-darkless"></div>
|
||||
</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 class="flex gap-2">
|
||||
<%= form_tag email_auth_path, class: "relative flex-1", 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-darkless bg-dark hover:bg-gray-600 placeholder-gray-300 rounded focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500" %>
|
||||
<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 %>
|
||||
<%= link_to slack_auth_path, class: "flex items-center justify-center px-4 py-3 rounded text-white cursor-pointer border border-darkless bg-dark hover:bg-gray-600 transition-colors w-1/4 gap-2" do %>
|
||||
<span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 h-6"><path fill="currentColor" d="M6 15a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2h2zm1 0a2 2 0 0 1 2-2a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2a2 2 0 0 1-2-2zm2-8a2 2 0 0 1-2-2a2 2 0 0 1 2-2a2 2 0 0 1 2 2v2zm0 1a2 2 0 0 1 2 2a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2a2 2 0 0 1 2-2zm8 2a2 2 0 0 1 2-2a2 2 0 0 1 2 2a2 2 0 0 1-2 2h-2zm-1 0a2 2 0 0 1-2 2a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2a2 2 0 0 1 2 2zm-2 8a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2v-2zm0-1a2 2 0 0 1-2-2a2 2 0 0 1 2-2h5a2 2 0 0 1 2 2a2 2 0 0 1-2 2z"/></svg></span>
|
||||
<span class="hidden xl:inline">Slack Sign In</span>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<% if params[:sign_in_email] %>
|
||||
<div class="text-green-500 mt-4 text-center max-w-[50vw] mx-auto">
|
||||
|
|
@ -75,7 +76,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-all duration-200 text-center block hover:translate-y-[-2px] hover:shadow-lg hover:shadow-blue-500/20">
|
||||
<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-0.5 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>
|
||||
|
|
@ -96,10 +97,10 @@
|
|||
<% 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>
|
||||
<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-0.5 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-0.5 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-0.5 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-0.5 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>
|
||||
|
|
@ -128,8 +129,8 @@
|
|||
</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]">
|
||||
<div class="flex flex-col md:flex-row bg-linear-to-r from-[#EFCCCC] to-[#D35648] mt-4 mb-4 rounded-lg">
|
||||
<div class="w-full md:w-1/3 -translate-y-5">
|
||||
<img src="/images/athena.png" class="w-[400px]">
|
||||
</div>
|
||||
<div class="w-full md:w-2/3 p-8 pl-4 pr-4">
|
||||
|
|
@ -149,7 +150,7 @@
|
|||
<%= link_to "Let's setup Hackatime! Click me :D", my_wakatime_setup_path, class: "inline-block w-auto text-3xl font-bold px-8 py-4 bg-primary text-white rounded shadow-md hover:shadow-lg hover:-translate-y-1 transition-all duration-300 animate-pulse" %>
|
||||
<div class="flex items-center mt-4 flex-nowrap">
|
||||
<% if @ssp_users_recent&.any? %>
|
||||
<div class="flex m-0 ml-0 flex-shrink-0">
|
||||
<div class="flex m-0 ml-0 shrink-0">
|
||||
<% @ssp_users_recent.each_with_index do |user, index| %>
|
||||
<div class="relative cursor-pointer transition-transform duration-200 hover:-translate-y-1 hover:z-10 group <%= index > 0 ? '-ml-4' : '' %>">
|
||||
<div class="absolute -top-9 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-2 py-1 rounded text-xs whitespace-nowrap opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-20">
|
||||
|
|
@ -162,7 +163,7 @@
|
|||
<% if @ssp_users_size && @ssp_users_size > 5 %>
|
||||
<div class="relative cursor-pointer transition-transform duration-200 hover:-translate-y-1 hover:z-10 group -ml-4" title="See all <%= @ssp_users_size %> users">
|
||||
<div class="w-10 h-10 rounded-full border-2 border-primary bg-primary text-white font-bold text-sm flex items-center justify-center shadow-sm">+<%= @ssp_users_size - 5 %></div>
|
||||
<div class="absolute left-[-20px] top-11 bg-gray-800 rounded-lg shadow-xl p-4 w-80 z-50 max-h-96 overflow-y-auto opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200">
|
||||
<div class="absolute -left-5 top-11 bg-gray-800 rounded-lg shadow-xl p-4 w-80 z-50 max-h-96 overflow-y-auto opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200">
|
||||
<h4 class="mt-0 mb-2 text-base text-gray-200 border-b border-gray-600 pb-2">All users who set up Hackatime</h4>
|
||||
<div class="flex flex-col gap-2">
|
||||
<% @ssp_users_recent.each do |user| %>
|
||||
|
|
|
|||
|
|
@ -3,24 +3,24 @@
|
|||
<div class="fixed inset-0 flex items-center justify-center bg-darker">
|
||||
<div class="w-full max-w-md px-6 py-8">
|
||||
<header class="text-center mb-8">
|
||||
<h1 class="font-bold text-3xl text-white">Log in to Hackatime</h1>
|
||||
<h1 class="font-bold text-3xl text-white">Welcome to Hackatime</h1>
|
||||
</header>
|
||||
|
||||
<%= link_to slack_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-red-600 transition-colors" do %>
|
||||
<img src="/images/slack.png" class="h-5 w-5 mr-2 bg-white rounded p-0.5">
|
||||
<span>Sign in with Hack Club Slack</span>
|
||||
<%= 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-red-600 transition-colors" do %>
|
||||
<img src="/images/icon-rounded.png" class="h-6 w-6 mr-2">
|
||||
<span>Sign in with your Hack Club account</span>
|
||||
<% end %>
|
||||
|
||||
<div class="flex items-center my-4">
|
||||
<div class="flex-1 border-t border-gray-600"></div>
|
||||
<div class="flex-1 border-t border-darkless"></div>
|
||||
<span class="px-4 text-gray-400 text-sm">or</span>
|
||||
<div class="flex-1 border-t border-gray-600"></div>
|
||||
<div class="flex-1 border-t border-darkless"></div>
|
||||
</div>
|
||||
|
||||
<%= form_tag email_auth_path, class: "relative", data: { turbo: false } do %>
|
||||
<%= hidden_field_tag :continue, @continue_param if @continue_param %>
|
||||
<div class="relative">
|
||||
<%= email_field_tag :email, params[:email], placeholder: "Enter your email", required: true, class: "w-full px-3 py-3 pr-12 border border-gray-600 rounded text-base bg-gray-800 text-white placeholder-gray-500 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500" %>
|
||||
<%= email_field_tag :email, params[:email], placeholder: "Enter your email", required: true, class: "w-full px-3 py-3 pr-12 border border-darkless bg-dark hover:bg-gray-600 placeholder-gray-300 rounded focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500" %>
|
||||
<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" class="w-5 h-5"><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>
|
||||
|
|
|
|||
BIN
public/images/icon-rounded.png
Normal file
BIN
public/images/icon-rounded.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Loading…
Add table
Reference in a new issue