style: visual polish for admin + student SPAs

Editorial-lecture-hall direction: Source Serif 4 for question prose
and headlines, IBM Plex Sans chrome, IBM Plex Mono for tabular numerics
(countdown, scores, rank, session id, join URL). Single ink-blue accent
in light mode, brass-amber in dark mode; warm paper background instead
of the soft grey wash. Dropped border-radius from soft 14px to a sharp
2-4px to read as printed material rather than consumer app.

Density rebalanced for the two viewing surfaces. Student question text
goes to clamp(1.5rem, 2.4vw, 1.95rem) so it dominates a 390px phone;
admin chrome (Q-num, countdown, hist labels) tightened so the projector
read is "QUESTION LIVE" + question + options + distribution at a glance
across a 1920x1080 lecture hall. State badge is uppercase + tracked
with a status dot; live state pulses, urgent countdown (<=10s) blinks.

Leaderboard becomes a tabular scoreboard: hairline borders, alternating
row tint, gold/silver/bronze left-border medals on top 3 only (no other
rank treatments), mono numerics throughout. QR panel now has its own
SCAN TO JOIN eyebrow, the URL row sits below in mono with a copy CTA,
session id rendered as a code chip, anchored as one shareable artifact.

Picked-answer button gets a 2-step settle (scale 0.97 -> 1, color
swap), correct-row reveal animates an inset border-draw, countdown bar
gets a slow breathing highlight overlay; all motion respects
prefers-reduced-motion. JS change is one line per SPA: toggle .urgent
on the countdown when remaining <= 10s.
This commit is contained in:
ameer
2026-05-02 21:29:22 +08:00
parent e7a2f0387b
commit 029d0dd399
3 changed files with 967 additions and 230 deletions

View File

@@ -546,6 +546,7 @@ function tickCountdown() {
const remaining = Math.max(0, store.questionDeadlineMs - Date.now());
const limit = (store.currentQuestion?.time_limit ?? 60) * 1000;
el.textContent = `${Math.ceil(remaining / 1000)}s`;
el.classList.toggle("urgent", remaining > 0 && remaining <= 10000);
fill.style.width = `${Math.max(0, Math.min(100, remaining / limit * 100))}%`;
if (remaining <= 0) stopCountdown();
}

View File

@@ -354,6 +354,7 @@ function tickCountdown() {
const remaining = Math.max(0, store.deadlineMs - Date.now());
const limit = (store.currentQuestion?.time_limit ?? 60) * 1000;
el.textContent = `${Math.ceil(remaining / 1000)}s`;
el.classList.toggle("urgent", remaining > 0 && remaining <= 10000);
fill.style.width = `${Math.max(0, Math.min(100, remaining / limit * 100))}%`;
if (remaining <= 0) stopCountdown();
}

File diff suppressed because it is too large Load Diff