From d7ce9cb670e41dd63f4fd7f4b5ba15984d789ac3 Mon Sep 17 00:00:00 2001 From: Mike Swanson Date: Thu, 30 Apr 2026 18:10:24 -0700 Subject: [PATCH] radio: visual redesign of search + episode pages, active-Q&A highlight follows playhead Frontend pass on the two embedded HTML templates in the FastAPI server. No backend / Python logic changed; only template strings, CSS, and inline JS. Index page: full CSS custom-property theme (light, #c39733 accent), responsive viewport meta, search input with embedded SVG magnifier and focus ring, control bar reorganised into divider-separated groups with the browse-mode toggle rendered via :has() selector, hit cards with hover-lift + arrow indicator and focus-visible outline, restyled Q/A badges and score/topic chips, animated loading dots. Episode page: sticky audio player and sticky aside (top: 130px, max-height calc'd against viewport). New active-Q&A highlight builds a sorted index of QA blocks at load time, computes each block's end as the next block's start (capped at +180s), and on timeupdate/pause toggles .active on both the body QA block and its aside list item; a "NOW PLAYING" pill is revealed on .qa.active. Intro-marker also gets .active. Audio preload bumped from none to metadata so #qa- deep links can seek without a prior user gesture. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../radio-show/audio-processor/server/main.py | 898 +++++++++++++----- 1 file changed, 646 insertions(+), 252 deletions(-) diff --git a/projects/radio-show/audio-processor/server/main.py b/projects/radio-show/audio-processor/server/main.py index 174c071..c84b6fe 100644 --- a/projects/radio-show/audio-processor/server/main.py +++ b/projects/radio-show/audio-processor/server/main.py @@ -686,85 +686,226 @@ def episode_page(episode_id: int): INDEX_HTML = """ - - + + + Computer Guru Radio Archive -

Computer Guru Radio Archive

-
...
- -
- - - - +
+

Computer Guru Radio Archive

+ loading... +
+
+ +
+
+ + + + + + - + + - - + +
-