ui: grayscale palette, square corners throughout
Removes all indigo/emerald/amber/red accent colors — everything now uses the slate ramp. Strips rounded corners from containers, cards, buttons, inputs, badges; the only remaining rounded element is the circular logo image itself. Affordances preserved without color: - Primary buttons (Publish/Log in/Unlock/Copy link flash): bg-slate-100 on dark background for high contrast - Secondary buttons (Copy/Open): bg-slate-800 - Destructive (Delete): outlined with border-slate-500 so it reads as different from secondary - Error messages: uppercase "ERROR" prefix + left border accent - Success flash / ready drop state: uppercase "PUBLISHED"/"READY" labels and solid border-slate-200 vs. the dashed/empty state - Protected lock: amber badge swapped for a slate-100 badge overlay - Chart: slate-200 line on slate-400/20 fill instead of indigo Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -5,8 +5,8 @@
|
||||
<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">
|
||||
class="w-20 h-20 rounded-full ring-1 ring-slate-700 shadow-lg shadow-black/40">
|
||||
<span class="absolute -bottom-1 -right-1 inline-flex items-center justify-center w-8 h-8 bg-slate-100 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"/>
|
||||
@@ -18,16 +18,18 @@
|
||||
</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>
|
||||
<div class="border-l-2 border-slate-100 bg-slate-900 text-slate-100 px-3 py-2 mb-3 text-sm">
|
||||
<span class="uppercase tracking-wider text-xs font-bold text-slate-300 mr-2">Error</span>{{ .Error }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
<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">
|
||||
class="w-full bg-slate-900 border border-slate-800 px-3 py-2 focus:outline-none focus:border-slate-400">
|
||||
</label>
|
||||
<button class="w-full bg-indigo-600 hover:bg-indigo-500 text-white rounded px-3 py-2 font-medium">Unlock</button>
|
||||
<button class="w-full bg-slate-100 hover:bg-white text-slate-950 px-3 py-2 font-medium">Unlock</button>
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
Reference in New Issue
Block a user