Login now fills the viewport (min-h-screen flex items-center/justify-center) with the logo, "Artifacto" title, and tagline above the password form. Drops the header/footer chrome on this page since there's nothing to link to before sign-in. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
30 lines
1.3 KiB
HTML
30 lines
1.3 KiB
HTML
{{ define "login" }}
|
|
{{ template "head" "Log in" }}
|
|
<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">
|
|
<img src="/static/logo.png" alt=""
|
|
class="w-20 h-20 rounded-full ring-1 ring-slate-700 mb-4 shadow-lg shadow-indigo-500/10">
|
|
<h1 class="text-3xl font-semibold tracking-tight">Artifacto</h1>
|
|
<p class="text-sm text-slate-400 mt-1">self-hosted HTML artifact publisher</p>
|
|
</div>
|
|
|
|
{{ 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="/login" class="space-y-3">
|
|
<input type="hidden" name="next" value="{{ .Next }}">
|
|
<label class="block">
|
|
<span class="block text-sm text-slate-400 mb-1">Password</span>
|
|
<input type="password" name="password" required autofocus autocomplete="current-password"
|
|
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">Log in</button>
|
|
</form>
|
|
</div>
|
|
</main>
|
|
</body>
|
|
</html>
|
|
{{ end }}
|