Skip to content

Commit 5f31f41

Browse files
lifeartclaude
lifeart
and
claude
committed
Polish UI for professional appearance
Design system: - Introduce CSS custom properties for colors, radii, and transitions - Unify accent color to #4fc3f7 (cyan from favicon) - All hardcoded hex values now reference semantic tokens Visual hierarchy: - Init Audio button styled as filled primary action (accent bg, dark text) - Init hint uses .init-hint class with accent color - Header uses .header-row class, em-dash separator dimmed Interactive states: - Button hover (subtle lift + brighter border), active (pressed), and focus-visible (accent ring) states with 120ms transitions - Input/select/textarea focus-visible shows accent border + glow - Checkbox focus-visible uses outline offset - Select hover brightens border - Summary hover turns accent color Micro-interactions: - Details border brightens when opened - Scan progress bar transition smoothed to 180ms - Onboarding overlay fades in (250ms), dialog slides up (300ms) - Get Started button lifts 1px on hover Polish: - Onboarding overlay: backdrop blur, deeper shadow, glass-like edge - Readout pills: accent-tinted background, accent text, inline-flex - Help button: accent hover state, focus-visible ring - PWA banner: accent reload button with hover states - Hint line-height improved to 1.45 - Grid/card padding increased to 14px Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent a793efb commit 5f31f41

2 files changed

Lines changed: 188 additions & 87 deletions

File tree

‎index.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,9 @@
2525
</head>
2626
<body>
2727
<header>
28-
<div style="display:flex;justify-content:space-between;align-items:center;">
29-
<h1>Echoscope — Browser Sonar</h1>
30-
<button id="btnHelp" type="button" class="help-btn" title="Show quick-start guide and keyboard shortcuts.">?</button>
28+
<div class="header-row">
29+
<h1>Echoscope <span class="header-sep">&mdash;</span> Browser Sonar</h1>
30+
<button id="btnHelp" type="button" class="help-btn" title="Show quick-start guide and keyboard shortcuts." aria-label="Help">?</button>
3131
</div>
3232
</header>
3333

@@ -56,7 +56,7 @@ <h1>Echoscope — Browser Sonar</h1>
5656
<span id="stereoIndicator" class="small indicator-ok" style="display:none;"></span>
5757
</div>
5858

59-
<p id="initHint" class="hint" style="color:#8dd0ff;font-weight:600;">
59+
<p id="initHint" class="hint init-hint">
6060
&#x2192; Start by clicking <b>Init Audio</b> above to enable microphone access and the audio engine.
6161
</p>
6262
<p class="hint warn">

0 commit comments

Comments
 (0)