shaamilahmed/Htmx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: refine design system aesthetics to flat solid dark-mode theme

Browse Source
This commit is contained in:
Enciphered
2026-05-30 13:28:25 +05:00
parent 110fc61fa2
commit 1e705053f5
10 changed files with 59 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/auth/login.html
+1 -1
View File
@@ -6,7 +6,7 @@
{% block content %}
<div class="grow flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-md w-full bg-[#1e293b]/40 backdrop-blur-xl border border-slate-900 rounded-3xl p-8 shadow-2xl relative overflow-hidden">
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-sky-400 via-blue-500 to-indigo-600"></div>
<div class="absolute top-0 left-0 w-full h-1 bg-sky-500"></div>
<div class="text-center mb-8">
<h2 class="text-3xl font-extrabold text-slate-100 tracking-tight">Welcome Back</h2>
templates/auth/register.html
+2 -2
View File
@@ -6,7 +6,7 @@
{% block content %}
<div class="grow flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-md w-full bg-[#1e293b]/40 backdrop-blur-xl border border-slate-900 rounded-3xl p-8 shadow-2xl relative overflow-hidden">
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-emerald-400 via-teal-500 to-cyan-600"></div>
<div class="absolute top-0 left-0 w-full h-1 bg-emerald-500"></div>
<div class="text-center mb-8">
<h2 class="text-3xl font-extrabold text-slate-100 tracking-tight">Create Account</h2>
@@ -37,7 +37,7 @@
{{ ui::text_input(id="password", name="password", label="Password", type="password", placeholder="••••••••", required=true) }}
<div>
{{ ui::button(label="Sign Up", variant="primary", type="submit", extra_class="w-full py-3.5 bg-gradient-to-r from-emerald-500 to-teal-600 hover:opacity-95 text-white shadow-lg shadow-emerald-500/10 focus:ring-emerald-500") }}
{{ ui::button(label="Sign Up", variant="primary", type="submit", extra_class="w-full py-3.5 bg-emerald-600 hover:bg-emerald-700 text-white shadow-lg shadow-emerald-500/10 focus:ring-emerald-500") }}
</div>
</form>
templates/base.html
+3 -3
View File
@@ -36,12 +36,12 @@
<!-- Logo -->
<div class="flex items-center space-x-3">
<a href="/" class="flex items-center space-x-2.5 group">
<div class="w-9 h-9 rounded-xl bg-gradient-to-tr from-sky-400 to-indigo-600 flex items-center justify-center shadow-lg shadow-sky-500/20 group-hover:scale-105 transition-all duration-300">
<div class="w-9 h-9 rounded-xl bg-indigo-600 flex items-center justify-center shadow-lg shadow-indigo-600/10 group-hover:scale-105 transition-all duration-300">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-5 h-5 text-white">
<path stroke-linecap="round" stroke-linejoin="round" d="m6.75 7.5 3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25Z" />
</svg>
</div>
<span class="text-xl font-bold tracking-tight bg-gradient-to-r from-slate-100 to-slate-300 bg-clip-text text-transparent group-hover:from-white group-hover:to-slate-200 transition duration-300">
<span class="text-xl font-bold tracking-tight text-slate-100 group-hover:text-white transition duration-300">
stick
</span>
</a>
@@ -72,7 +72,7 @@
<a href="/auth/login" class="text-sm font-medium text-muted-foreground hover:text-white transition py-2 px-3 rounded-lg hover:bg-secondary">
Log In
</a>
<a href="/auth/register" class="text-sm font-medium text-white bg-gradient-to-r from-sky-500 to-indigo-600 hover:opacity-90 transition px-4 py-2 rounded-xl shadow-md shadow-sky-500/10">
<a href="/auth/register" class="text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-500 transition px-4 py-2 rounded-xl shadow-md shadow-indigo-600/10">
Sign Up
</a>
{% endif %}
templates/components/index.html
+2 -2
View File
@@ -25,7 +25,7 @@
<!-- Architecture & Concept -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="border border-border bg-secondary/10 rounded-2xl p-6 space-y-3">
<div class="w-10 h-10 rounded-xl bg-gradient-to-tr from-sky-400/20 to-indigo-500/20 border border-sky-500/30 flex items-center justify-center">
<div class="w-10 h-10 rounded-xl bg-sky-500/10 border border-sky-500/20 flex items-center justify-center">
<svg class="h-5 w-5 text-sky-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/>
</svg>
@@ -37,7 +37,7 @@
</div>
<div class="border border-border bg-secondary/10 rounded-2xl p-6 space-y-3">
<div class="w-10 h-10 rounded-xl bg-gradient-to-tr from-emerald-400/20 to-teal-500/20 border border-emerald-500/30 flex items-center justify-center">
<div class="w-10 h-10 rounded-xl bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center">
<svg class="h-5 w-5 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
templates/developers/edit.html
+2 -2
View File
@@ -6,7 +6,7 @@
{% block content %}
<div class="grow py-12 px-4 sm:px-6 lg:px-8 max-w-lg mx-auto w-full">
<div class="bg-[#1e293b]/40 backdrop-blur-xl border border-slate-900 rounded-3xl p-8 shadow-2xl relative overflow-hidden">
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-sky-400 via-blue-500 to-indigo-600"></div>
<div class="absolute top-0 left-0 w-full h-1 bg-sky-500"></div>
<div class="text-center mb-8">
<h2 class="text-3xl font-extrabold text-slate-100 tracking-tight">Edit Developer</h2>
@@ -24,7 +24,7 @@
<a href="/developers" class="flex-1 py-3 px-4 text-center text-sm font-semibold rounded-xl text-slate-300 bg-slate-900 border border-slate-800 hover:border-slate-700 transition">
Cancel
</a>
{{ ui::button(label="Save Changes", variant="indigo", type="submit", extra_class="flex-1 py-3 bg-gradient-to-r from-sky-500 to-indigo-600 hover:opacity-95 transition shadow-lg shadow-sky-500/10") }}
{{ ui::button(label="Save Changes", variant="indigo", type="submit", extra_class="flex-1 py-3 transition shadow-lg shadow-indigo-500/10") }}
</div>
</form>
</div>
templates/developers/list.html
+1 -1
View File
@@ -37,7 +37,7 @@
{{ ui::text_input(id="skills", name="skills", label="Skills (Comma-separated)", type="text", placeholder="e.g. Rust, Axum, MongoDB") }}
{{ ui::button(label="Create Developer", variant="indigo", type="submit", extra_class="w-full py-3 bg-gradient-to-r from-sky-500 to-indigo-600 hover:opacity-95 transition shadow-md shadow-sky-500/10") }}
{{ ui::button(label="Create Developer", variant="indigo", type="submit", extra_class="w-full py-3 transition shadow-md shadow-indigo-500/10") }}
</form>
</div>
</div>
templates/main_view/index.html
+4 -4
View File
@@ -12,9 +12,9 @@
</span>
<!-- Hero Title -->
<h1 class="text-4xl sm:text-6xl font-extrabold tracking-tight mb-6 bg-linear-to-r from-slate-100 via-slate-200 to-slate-400 bg-clip-text text-transparent leading-none">
<h1 class="text-4xl sm:text-6xl font-extrabold tracking-tight mb-6 text-slate-100 leading-none">
Clean, Use-Case Centric <br class="hidden sm:inline">
<span class="bg-linear-to-r from-sky-400 via-blue-500 to-indigo-500 bg-clip-text">Rust Web Development</span>
<span class="text-indigo-500">Rust Web Development</span>
</h1>
<!-- Subtitle -->
@@ -25,11 +25,11 @@
<!-- CTA Buttons -->
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center mb-16">
{% if authenticated %}
<a href="/tasks" class="px-8 py-4 rounded-2xl bg-linear-to-r from-sky-500 via-blue-600 to-indigo-600 hover:opacity-95 transition font-semibold text-white shadow-xl shadow-sky-500/10 hover:shadow-sky-500/20 scale-100 hover:scale-[1.02] transform duration-200">
<a href="/tasks" class="px-8 py-4 rounded-2xl bg-indigo-600 hover:bg-indigo-500 transition font-semibold text-white shadow-xl shadow-indigo-600/10 hover:shadow-indigo-600/20 scale-100 hover:scale-[1.02] transform duration-200">
Go to Tasks Dashboard
</a>
{% else %}
<a href="/auth/register" class="px-8 py-4 rounded-2xl bg-linear-to-r from-sky-500 via-blue-600 to-indigo-600 hover:opacity-95 transition font-semibold text-white shadow-xl shadow-sky-500/10 hover:shadow-sky-500/20 scale-100 hover:scale-[1.02] transform duration-200">
<a href="/auth/register" class="px-8 py-4 rounded-2xl bg-indigo-600 hover:bg-indigo-500 transition font-semibold text-white shadow-xl shadow-indigo-600/10 hover:shadow-indigo-600/20 scale-100 hover:scale-[1.02] transform duration-200">
Get Started Free
</a>
<a href="/auth/login" class="px-8 py-4 rounded-2xl bg-slate-900/60 hover:bg-slate-900 border border-slate-800 hover:border-slate-700 transition font-semibold text-slate-200 scale-100 hover:scale-[1.02] transform duration-200">
templates/tasks/dashboard.html
+2 -2
View File
@@ -17,7 +17,7 @@
Total Tasks: {{ tasks.len() }}
</span>
<!-- Info trigger button -->
{{ ui::modal_trigger(target_id="task-info-modal", label="<svg class='w-4 h-4' fill='none' stroke='currentColor' viewBox='0 0 24 24'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'/></svg>", variant="outline", extra_class="px-2.5 py-2.5") }}
{{ ui::modal_trigger(target_id="task-info-modal", label="<svg class='w-4 h-4' fill='none' stroke='currentColor' viewBox='0 0 24 24'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'/></svg>", variant="outline", extra_class="w-9 h-9 !p-0 flex items-center justify-center") }}
</div>
</div>
@@ -43,7 +43,7 @@
{{ ui::search_combobox(name="assignee_id", label="Assignee (Optional)", placeholder="Search developer...", search_url="/developers/search", input_id="assignee-search", value_id="assignee-id") }}
<!-- Create Task submit button using macro -->
{{ ui::button(label="Create Task", variant="indigo", type="submit", extra_class="w-full py-3 bg-gradient-to-r from-sky-500 to-indigo-600 hover:opacity-95 transition shadow-md shadow-sky-500/10") }}
{{ ui::button(label="Create Task", variant="indigo", type="submit", extra_class="w-full py-3 transition shadow-md shadow-indigo-500/10") }}
</form>
</div>
</div>