Askama + htmx for frontend

Server-side rendering with htmx and Tailwind CSS for the styling

templates/login.html

@@ -0,0 +1,69 @@
+{% extends "base.html" %} {% block title %}Login - zero2prod{% endblock %} {%
+block content %}
+<div class="min-h-[60vh] flex items-center justify-center">
+  <div class="max-w-md w-full space-y-8">
+    <div class="text-center">
+      <h2 class="text-3xl font-bold text-gray-900">Login</h2>
+      <p class="mt-2 text-sm text-gray-600">
+        Sign in to access the admin dashboard
+      </p>
+    </div>
+
+    <div class="bg-white rounded-lg shadow-md p-8 border border-gray-200">
+      <form action="/login" method="post" class="space-y-6">
+        <div>
+          <label
+            for="username"
+            class="block text-sm font-medium text-gray-700 mb-2"
+          >
+            Username
+          </label>
+          <input
+            type="text"
+            id="username"
+            name="username"
+            required
+            class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+          />
+        </div>
+
+        <div>
+          <label
+            for="password"
+            class="block text-sm font-medium text-gray-700 mb-2"
+          >
+            Password
+          </label>
+          <input
+            type="password"
+            id="password"
+            name="password"
+            required
+            class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+          />
+        </div>
+
+        <div>
+          <button
+            type="submit"
+            class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
+          >
+            Continue
+          </button>
+        </div>
+      </form>
+
+      <div class="mt-4">{{ error_html }}</div>
+    </div>
+
+    <div class="text-center">
+      <a
+        href="/"
+        class="text-sm text-blue-600 hover:text-blue-500 transition-colors"
+      >
+        ← Back to homepage
+      </a>
+    </div>
+  </div>
+</div>
+{% endblock %}