feat: initialize template shell and basic components

templates/auth/login.html

@@ -0,0 +1,48 @@
+{% extends "base.html" %}
+
+{% block title %}Sign In - Stick{% endblock %}
+
+{% 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="text-center mb-8">
+            <h2 class="text-3xl font-extrabold text-slate-100 tracking-tight">Welcome Back</h2>
+            <p class="mt-2 text-sm text-slate-400">Sign in to manage your tasks</p>
+        </div>
+
+        {% if let Some(err) = error %}
+            <div class="mb-6 p-4 rounded-xl bg-rose-500/10 border border-rose-500/20 text-rose-400 text-sm flex items-start gap-2.5">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5 flex-shrink-0 mt-0.5">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" />
+                </svg>
+                <span>{{ err }}</span>
+            </div>
+        {% endif %}
+
+        <form class="space-y-5" action="/auth/login" method="post">
+            <div>
+                <label for="username" class="block text-sm font-medium text-slate-400 mb-1.5">Username</label>
+                <input id="username" name="username" type="text" required class="appearance-none rounded-xl relative block w-full px-4 py-3 bg-[#0f172a]/80 border border-slate-800 placeholder-slate-500 text-white focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500 transition duration-200 text-sm" placeholder="Enter username">
+            </div>
+            
+            <div>
+                <label for="password" class="block text-sm font-medium text-slate-400 mb-1.5">Password</label>
+                <input id="password" name="password" type="password" required class="appearance-none rounded-xl relative block w-full px-4 py-3 bg-[#0f172a]/80 border border-slate-800 placeholder-slate-500 text-white focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500 transition duration-200 text-sm" placeholder="••••••••">
+            </div>
+
+            <div>
+                <button type="submit" class="group relative w-full flex justify-center py-3.5 px-4 border border-transparent text-sm font-semibold rounded-xl text-white bg-gradient-to-r from-sky-500 to-indigo-600 hover:opacity-95 transition focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sky-500 focus:ring-offset-[#0f172a] shadow-lg shadow-sky-500/10">
+                    Sign In
+                </button>
+            </div>
+        </form>
+
+        <div class="mt-6 text-center text-sm text-slate-400">
+            Don't have an account? 
+            <a href="/auth/register" class="font-medium text-sky-400 hover:underline">Sign up now</a>
+        </div>
+    </div>
+</div>
+{% endblock %}

templates/auth/register.html

@@ -0,0 +1,57 @@
+{% extends "base.html" %}
+
+{% block title %}Sign Up - Stick{% endblock %}
+
+{% 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="text-center mb-8">
+            <h2 class="text-3xl font-extrabold text-slate-100 tracking-tight">Create Account</h2>
+            <p class="mt-2 text-sm text-slate-400">Join us to start planning your tasks</p>
+        </div>
+
+        {% if let Some(err) = error %}
+            <div class="mb-6 p-4 rounded-xl bg-rose-500/10 border border-rose-500/20 text-rose-400 text-sm flex items-start gap-2.5">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5 flex-shrink-0 mt-0.5">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" />
+                </svg>
+                <span>{{ err }}</span>
+            </div>
+        {% endif %}
+
+        {% if let Some(msg) = success %}
+            <div class="mb-6 p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-sm flex items-start gap-2.5">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5 flex-shrink-0 mt-0.5">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 0 1-1.043 3.296 3.745 3.745 0 0 1-3.296 1.043A3.745 3.745 0 0 1 12 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 0 1-3.296-1.043 3.745 3.745 0 0 1-1.043-3.296A3.745 3.745 0 0 1 3 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 0 1 1.043-3.296 3.746 3.746 0 0 1 3.296-1.043A3.746 3.746 0 0 1 12 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 0 1 3.296 1.043 3.746 3.746 0 0 1 1.043 3.296A3.745 3.745 0 0 1 21 12Z" />
+                </svg>
+                <span>{{ msg }}</span>
+            </div>
+        {% endif %}
+
+        <form class="space-y-5" action="/auth/register" method="post">
+            <div>
+                <label for="username" class="block text-sm font-medium text-slate-400 mb-1.5">Username</label>
+                <input id="username" name="username" type="text" required class="appearance-none rounded-xl relative block w-full px-4 py-3 bg-[#0f172a]/80 border border-slate-800 placeholder-slate-500 text-white focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 transition duration-200 text-sm" placeholder="Choose a username">
+            </div>
+            
+            <div>
+                <label for="password" class="block text-sm font-medium text-slate-400 mb-1.5">Password</label>
+                <input id="password" name="password" type="password" required class="appearance-none rounded-xl relative block w-full px-4 py-3 bg-[#0f172a]/80 border border-slate-800 placeholder-slate-500 text-white focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 transition duration-200 text-sm" placeholder="••••••••">
+            </div>
+
+            <div>
+                <button type="submit" class="group relative w-full flex justify-center py-3.5 px-4 border border-transparent text-sm font-semibold rounded-xl text-white bg-gradient-to-r from-emerald-500 to-teal-600 hover:opacity-95 transition focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 focus:ring-offset-[#0f172a] shadow-lg shadow-emerald-500/10">
+                    Sign Up
+                </button>
+            </div>
+        </form>
+
+        <div class="mt-6 text-center text-sm text-slate-400">
+            Already have an account? 
+            <a href="/auth/login" class="font-medium text-emerald-400 hover:underline">Log in here</a>
+        </div>
+    </div>
+</div>
+{% endblock %}