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:
@@ -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();
|
||||
}
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
|
||||
1195
static/style.css
1195
static/style.css
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user