style: redesign gateway webui

Author: Mr-Sunglasses

assets/generate.py

@@ -29,7 +29,6 @@
 
 NAVY = "#070F1C"    # the mark
 BRAND = "#0F6B57"   # flat, restrained action colour
-WEBUI_ACCENT = "#0A84FF"
 
 # --- geometry, in the 460-unit space of the source avatar --------------------
 
@@ -118,13 +117,13 @@ def mark_svg(colour: str = NAVY, indent: str = "  ") -> str:
 # --- documents --------------------------------------------------------------
 
 
-def logo(background: str = BRAND) -> str:
+def logo(background: str = BRAND, colour: str = NAVY) -> str:
     """Round badge on a flat disc."""
     d = DISC
     return (f'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 460 460" '
             f'width="460" height="460" role="img" aria-label="vocaphone">\n'
             f'  <circle cx="{d["cx"]:g}" cy="{d["cy"]:g}" r="{d["r"]:g}" fill="{background}"/>\n'
-            f'{mark_svg()}\n'
+            f'{mark_svg(colour)}\n'
             f'</svg>\n')
 
 
@@ -216,7 +215,7 @@ def android_background() -> str:
     "assets/vocaphone-logo.svg": logo,
     "assets/vocaphone-mark.svg": glyph,
     "assets/vocaphone-app-icon.svg": app_icon,
-    "server/app/webui/favicon.svg": lambda: logo(WEBUI_ACCENT),
+    "server/app/webui/favicon.svg": lambda: logo("#ECECEC", colour="#171717"),
     "android/app/src/main/res/drawable/ic_launcher_foreground.xml": android_foreground,
     "android/app/src/main/res/drawable/ic_launcher_background.xml": android_background,
 }

server/app/webui/favicon.svg

@@ -25,7 +25,7 @@ <h2 id="token-title">Connect to your gateway</h2>
 
   <header>
     <div class="brand">
-      <span class="logo">&#127908;</span>
+      <img class="logo" src="/assets/favicon.svg" alt="" />
       <div>
         <h1>vocaphone</h1>
         <span class="muted">Private transcription gateway</span>

server/app/webui/index.html

@@ -1,16 +1,16 @@
 :root {
-  --bg: #111315;
-  --panel: #1a1d20;
-  --panel-strong: #15181b;
-  --panel-border: #303438;
-  --text: #f2f2f2;
-  --muted: #a9afb5;
-  --accent: #0a84ff;
-  --accent-hover: #0071e3;
-  --ok: #0a84ff;
-  --warn: #c98a17;
-  --error: #d84c4c;
-  --radius: 10px;
+  --bg: #212121;
+  --panel: #2a2a2a;
+  --panel-strong: #303030;
+  --panel-border: #3a3a3a;
+  --text: #ececec;
+  --muted: #a3a3a3;
+  --accent: #f4f4f4;
+  --accent-hover: #ffffff;
+  --ok: #6dd3a6;
+  --warn: #e6b77a;
+  --error: #f08a84;
+  --radius: 8px;
   --shadow: none;
 }
 
@@ -31,7 +31,7 @@ h2 { font-size: 17px; letter-spacing: -0.01em; margin: 0 0 12px; }
 h3 { font-size: 14px; margin: 16px 0 8px; }
 
 code {
-  background: #10131a;
+  background: var(--panel-strong);
   border: 1px solid var(--panel-border);
   border-radius: 6px;
   padding: 1px 6px;
@@ -62,7 +62,7 @@ header {
 }
 
 .brand { display: flex; align-items: center; gap: 12px; }
-.logo { font-size: 28px; }
+.logo { display: block; width: 28px; height: 28px; }
 
 .pill {
   padding: 6px 14px;
@@ -188,9 +188,9 @@ main { max-width: 1120px; margin: 0 auto; padding: 24px 24px 60px; }
   border-radius: var(--radius);
   background: var(--panel-strong);
 }
-.metric-card.success, .metric-card.complete { border-color: rgba(10, 132, 255, 0.5); }
-.metric-card.failure, .metric-card.failed { border-color: rgba(224, 92, 92, 0.45); }
-.metric-card.warming { border-color: rgba(108, 148, 255, 0.5); }
+.metric-card.success, .metric-card.complete { border-color: rgba(109, 211, 166, 0.48); }
+.metric-card.failure, .metric-card.failed { border-color: rgba(240, 138, 132, 0.5); }
+.metric-card.warming { border-color: var(--panel-border); }
 .metric-label, .metric-detail { display: block; }
 .metric-label {
   color: var(--muted);
@@ -219,8 +219,8 @@ main { max-width: 1120px; margin: 0 auto; padding: 24px 24px 60px; }
 .checklist { list-style: none; margin: 0; padding: 0; }
 .checklist li { display: flex; align-items: center; gap: 10px; padding: 6px 0; flex-wrap: wrap; }
 .check { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
-.check.ok { background: rgba(10, 132, 255, 0.15); color: var(--ok); }
-.check.missing { background: rgba(224, 92, 92, 0.15); color: var(--error); }
+.check.ok { background: rgba(109, 211, 166, 0.14); color: var(--ok); }
+.check.missing { background: rgba(240, 138, 132, 0.14); color: var(--error); }
 .checklist .hint { margin-left: auto; }
 
 .steps { margin: 0; padding-left: 20px; color: var(--muted); }
@@ -237,8 +237,8 @@ main { max-width: 1120px; margin: 0 auto; padding: 24px 24px 60px; }
   margin-bottom: 16px;
   background: var(--panel);
 }
-.status-hero.ready { border-color: rgba(10, 132, 255, 0.55); }
-.status-hero.attention { border-color: rgba(224, 176, 64, 0.55); }
+.status-hero.ready { border-color: rgba(109, 211, 166, 0.48); }
+.status-hero.attention { border-color: rgba(230, 183, 122, 0.48); }
 .status-hero h2 { font-size: 24px; margin: 3px 0; }
 .status-hero p { color: var(--muted); margin: 0; }
 .eyebrow {
@@ -268,7 +268,7 @@ main { max-width: 1120px; margin: 0 auto; padding: 24px 24px 60px; }
 }
 .callout strong { white-space: nowrap; }
 .callout span { color: var(--muted); }
-.callout.warning { border-color: rgba(224, 176, 64, 0.5); }
+.callout.warning { border-color: rgba(230, 183, 122, 0.48); }
 .callout.warning strong { color: var(--warn); }
 .callout.compact { margin: 16px 0 0; }
 .callout.stacked { flex-direction: column; align-items: stretch; }
@@ -283,7 +283,7 @@ main { max-width: 1120px; margin: 0 auto; padding: 24px 24px 60px; }
   width: 26px;
   height: 26px;
   border-radius: 50%;
-  background: rgba(10, 132, 255, 0.15);
+  background: rgba(109, 211, 166, 0.14);
   color: var(--ok);
   flex: 0 0 auto;
 }
@@ -391,8 +391,8 @@ button.no-margin { margin-left: 0; }
   background: var(--panel);
   padding: 16px;
 }
-.model-card[data-state="installed"] { border-color: rgba(10, 132, 255, 0.5); }
-.model-card[data-state="downloading"] { border-color: rgba(108, 148, 255, 0.55); }
+.model-card[data-state="installed"] { border-color: rgba(109, 211, 166, 0.48); }
+.model-card[data-state="downloading"] { border-color: var(--panel-border); }
 .model-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
 .model-family {
   color: var(--accent);
@@ -476,7 +476,7 @@ button.no-margin { margin-left: 0; }
 /* ---------------------------------------------------------------- buttons */
 
 button { font: inherit; cursor: pointer; border-radius: 8px; border: 1px solid transparent; }
-button.primary { background: var(--accent); color: white; padding: 8px 18px; }
+button.primary { background: var(--accent); color: #171717; padding: 8px 18px; }
 button.primary:hover { background: var(--accent-hover); }
 button.ghost { background: none; border-color: var(--panel-border); color: var(--muted); padding: 8px 14px; }
 button.ghost:hover { color: var(--text); }
@@ -491,7 +491,7 @@ button:focus-visible, input:focus-visible, select:focus-visible {
 
 input, select {
   font: inherit;
-  background: #10131a;
+  background: var(--panel-strong);
   border: 1px solid var(--panel-border);
   color: var(--text);
   border-radius: 8px;
@@ -511,7 +511,7 @@ input:focus, select:focus { border-color: var(--accent); }
 
 .progress {
   height: 6px;
-  background: #10131a;
+  background: var(--panel-strong);
   border-radius: 3px;
   overflow: hidden;
   margin: 6px 0 4px;
@@ -524,7 +524,7 @@ input:focus, select:focus { border-color: var(--accent); }
 .result {
   margin-top: 14px;
   padding: 14px 16px;
-  background: #10131a;
+  background: var(--panel-strong);
   border: 1px solid var(--panel-border);
   border-radius: var(--radius);
 }
@@ -555,7 +555,7 @@ input:focus, select:focus { border-color: var(--accent); }
 .overlay {
   position: fixed;
   inset: 0;
-  background: rgba(8, 9, 12, 0.82);
+  background: rgba(0, 0, 0, 0.68);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -567,7 +567,7 @@ input:focus, select:focus { border-color: var(--accent); }
   border-radius: var(--radius);
   padding: 28px;
   width: min(440px, 90vw);
-  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.55);
+  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
 }
 .modal-icon { display: block; font-size: 24px; margin-bottom: 10px; }
 .modal input { width: 100%; margin: 14px 0 10px; }