From 2b0ab836fe5f583a1417972c18312a98d337d244 Mon Sep 17 00:00:00 2001 From: dtoro Date: Wed, 22 Apr 2026 23:28:21 +0200 Subject: [PATCH] ui: grayscale palette, square corners throughout MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- internal/server/metrics.go | 4 +- internal/server/templates/dashboard.html | 79 ++++++++++++------------ internal/server/templates/detail.html | 12 ++-- internal/server/templates/login.html | 10 +-- internal/server/templates/unlock.html | 12 ++-- 5 files changed, 62 insertions(+), 55 deletions(-) diff --git a/internal/server/metrics.go b/internal/server/metrics.go index 5fe6b4c..c06f249 100644 --- a/internal/server/metrics.go +++ b/internal/server/metrics.go @@ -109,8 +109,8 @@ func renderChart(series []store.DayPoint) string { } fmt.Fprintf(&area, "L%.1f,%d Z", float64(padLeft)+float64(n-1)*step, padTop+innerH) - fmt.Fprintf(&b, ``, area.String()) - fmt.Fprintf(&b, ``, pts.String()) + fmt.Fprintf(&b, ``, area.String()) + fmt.Fprintf(&b, ``, pts.String()) // x-axis tick labels: first, middle, last day labelIdx := []int{0, n / 2, n - 1} diff --git a/internal/server/templates/dashboard.html b/internal/server/templates/dashboard.html index 593027d..3c11b88 100644 --- a/internal/server/templates/dashboard.html +++ b/internal/server/templates/dashboard.html @@ -5,33 +5,33 @@
-
+
Artifacts
{{ .Stats.TotalArtifacts }}
-
+
Views (7d)
{{ .Stats.Views7d }}
-
+
Views (30d)
{{ .Stats.Views30d }}
-
+
Storage
{{ humanSize .Stats.StorageBytes }}
-
+

Publish

@@ -117,7 +120,7 @@ const input = document.getElementById('dropInput'); const filename = document.getElementById('dropFilename'); const sizeEl = document.getElementById('dropSize'); - const errorEl = document.getElementById('dropError'); + const errorMsg = document.getElementById('dropErrorMsg'); const clearBtn = document.getElementById('dropClear'); if (!zone || !input) return; @@ -127,9 +130,9 @@ error: zone.querySelector('[data-state="error"]'), }; - const READY = ['border-emerald-500', '!border-solid', 'bg-emerald-500/5']; - const OVER = ['border-indigo-500', 'bg-indigo-500/10', 'scale-[1.01]']; - const ERROR = ['border-red-500', 'bg-red-500/5']; + const READY = ['border-slate-200', '!border-solid', 'bg-slate-400/10']; + const OVER = ['border-slate-300', 'bg-slate-400/15', 'scale-[1.01]']; + const ERROR = ['border-slate-200', 'bg-slate-400/10']; function setState(name) { for (const key of Object.keys(panels)) { @@ -168,17 +171,16 @@ function handleFile(f) { if (!/\.html?$/i.test(f.name) && f.type !== 'text/html') { - errorEl.textContent = `Not an HTML file: ${f.name}`; + errorMsg.textContent = `Not an HTML file: ${f.name}`; setState('error'); setTimeout(() => { if (!input.files[0]) setState('empty'); }, 2500); return; } if (f.size > 5 * 1024 * 1024) { - errorEl.textContent = `Too large (${fmtSize(f.size)}, max 5 MB)`; + errorMsg.textContent = `Too large (${fmtSize(f.size)}, max 5 MB)`; setState('error'); return; } - // Reflect drop selection back into the input so the form submits it. try { const dt = new DataTransfer(); dt.items.add(f); @@ -198,17 +200,18 @@ {{ if .FlashSlug }} -
+
- Published: {{ .BaseURL }}/p/{{ .FlashSlug }} + Published + {{ .BaseURL }}/p/{{ .FlashSlug }}
+ class="bg-slate-100 hover:bg-white text-slate-950 px-3 py-1 text-xs font-medium">Copy link
{{ end }} -
+
@@ -225,25 +228,25 @@ {{ range .Items }} - + - {{ else }} - + {{ end }}
- {{ .Slug }} - {{ if .HasPassword }}🔒{{ end }} + {{ .Slug }} + {{ if .HasPassword }}🔒{{ end }} {{ if .Title }}{{ .Title }}{{ else }}—{{ end }} {{ .ViewCount }} {{ humanTime .LastViewedAt }}{{ sparkline .Spark }}{{ sparkline .Spark }} {{ humanSize .SizeBytes }} + - Open + class="text-xs px-2 py-1 bg-slate-800 hover:bg-slate-700">Copy + Open + class="text-xs px-2 py-1 border border-slate-500 text-slate-200 hover:bg-slate-800">Delete
No artifacts yet. Paste some HTML above to publish your first one.
No artifacts yet. Drop an HTML file above to publish your first one.
diff --git a/internal/server/templates/detail.html b/internal/server/templates/detail.html index bf4ef4e..1a7142d 100644 --- a/internal/server/templates/detail.html +++ b/internal/server/templates/detail.html @@ -6,7 +6,7 @@
-

{{ .Artifact.Slug }} {{ if .Artifact.HasPassword }}🔒{{ end }}

+

{{ .Artifact.Slug }} {{ if .Artifact.HasPassword }}🔒{{ end }}

{{ if .Artifact.Title }}

{{ .Artifact.Title }}

{{ end }}

Created {{ humanTime .Artifact.CreatedAt }} · @@ -14,23 +14,23 @@ {{ .Artifact.ViewCount }} views {{ if .Artifact.ExpiresAt }} · expires {{ humanTime .Artifact.ExpiresAt }}{{ end }}

-

{{ .BaseURL }}/p/{{ .Artifact.Slug }}

+

{{ .BaseURL }}/p/{{ .Artifact.Slug }}

+ class="text-sm px-3 py-1.5 bg-slate-800 hover:bg-slate-700">Copy link + class="text-sm px-3 py-1.5 border border-slate-500 text-slate-200 hover:bg-slate-800">Delete
-
+

Views — last 30 days

{{ .ChartSVG }}
-
+

Top referrers

{{ if .Referrers }} diff --git a/internal/server/templates/login.html b/internal/server/templates/login.html index bb73994..f4adaf6 100644 --- a/internal/server/templates/login.html +++ b/internal/server/templates/login.html @@ -4,13 +4,15 @@
+ class="w-20 h-20 rounded-full ring-1 ring-slate-700 mb-4 shadow-lg shadow-black/40">

Artifacto

self-hosted HTML artifact publisher

{{ if .Error }} -
{{ .Error }}
+
+ Error{{ .Error }} +
{{ end }}
@@ -18,9 +20,9 @@ - +
diff --git a/internal/server/templates/unlock.html b/internal/server/templates/unlock.html index 5f66217..3cef01a 100644 --- a/internal/server/templates/unlock.html +++ b/internal/server/templates/unlock.html @@ -5,8 +5,8 @@
- + class="w-20 h-20 rounded-full ring-1 ring-slate-700 shadow-lg shadow-black/40"> + @@ -18,16 +18,18 @@
{{ if .Error }} -
{{ .Error }}
+
+ Error{{ .Error }} +
{{ end }}
- +