From 908b1381ba9ee158655542f78c0d0db6c49d6f20 Mon Sep 17 00:00:00 2001
From: dtoro <d.toro.v@pm.me>
Date: Wed, 22 Apr 2026 23:21:02 +0200
Subject: [PATCH] ui: center unlock page with logo and title

Password prompt for protected artifacts now matches the login screen:
viewport-centered, logo + "Artifacto" title above the form. Lock icon is
now a badge overlaid on the logo so the two visuals combine instead of
stacking. Drops the header/footer chrome since visitors here aren't
logged in and have no navigation to reach.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 internal/server/templates/unlock.html | 35 +++++++++++++++++++--------
 1 file changed, 25 insertions(+), 10 deletions(-)

diff --git a/internal/server/templates/unlock.html b/internal/server/templates/unlock.html
index e19e43b..5f66217 100644
--- a/internal/server/templates/unlock.html
+++ b/internal/server/templates/unlock.html
@@ -1,21 +1,36 @@
 {{ define "unlock" }}
 {{ template "head" "Protected" }}
-<main class="max-w-6xl mx-auto px-6 py-8">
-  <div class="max-w-sm mx-auto mt-24 text-center">
-    <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-slate-900 border border-slate-800 mb-4">
-      <svg class="w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 11v2m-4 4h8a2 2 0 002-2v-5a2 2 0 00-2-2H8a2 2 0 00-2 2v5a2 2 0 002 2zM10 9V7a2 2 0 114 0v2"/></svg>
+<main class="min-h-screen flex items-center justify-center px-6 py-12">
+  <div class="w-full max-w-sm">
+    <div class="flex flex-col items-center text-center mb-8">
+      <div class="relative mb-4">
+        <img src="/static/logo.png" alt=""
+             class="w-20 h-20 rounded-full ring-1 ring-slate-700 shadow-lg shadow-indigo-500/10">
+        <span class="absolute -bottom-1 -right-1 inline-flex items-center justify-center w-8 h-8 rounded-full bg-amber-500 text-slate-950 ring-2 ring-slate-950">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round"
+                  d="M12 11v2m-4 4h8a2 2 0 002-2v-5a2 2 0 00-2-2H8a2 2 0 00-2 2v5a2 2 0 002 2zM10 9V7a2 2 0 114 0v2"/>
+          </svg>
+        </span>
+      </div>
+      <h1 class="text-3xl font-semibold tracking-tight">Artifacto</h1>
+      <p class="text-sm text-slate-400 mt-2">This artifact is password-protected.</p>
     </div>
-    <h1 class="text-xl font-semibold mb-2">Protected artifact</h1>
-    <p class="text-sm text-slate-400 mb-6">Enter the password to view.</p>
+
     {{ if .Error }}
       <div class="rounded bg-red-900/40 border border-red-800 text-red-200 px-3 py-2 mb-3 text-sm">{{ .Error }}</div>
     {{ end }}
-    <form method="post" action="/p/{{ .Slug }}/unlock" class="space-y-3 text-left">
-      <input type="password" name="password" required autofocus
-             class="w-full bg-slate-900 border border-slate-800 rounded px-3 py-2 focus:outline-none focus:border-indigo-500">
+
+    <form method="post" action="/p/{{ .Slug }}/unlock" class="space-y-3">
+      <label class="block">
+        <span class="block text-sm text-slate-400 mb-1">Password</span>
+        <input type="password" name="password" required autofocus autocomplete="off"
+               class="w-full bg-slate-900 border border-slate-800 rounded px-3 py-2 focus:outline-none focus:border-indigo-500">
+      </label>
       <button class="w-full bg-indigo-600 hover:bg-indigo-500 text-white rounded px-3 py-2 font-medium">Unlock</button>
     </form>
   </div>
 </main>
-{{ template "footer" }}
+</body>
+</html>
 {{ end }}