From d015420b66a538e743ca1cc4a4dd701675021ef9 Mon Sep 17 00:00:00 2001 From: grabowski Date: Mon, 10 Aug 2026 17:59:06 +0700 Subject: [PATCH] feat: full-basin 2024 flood replay with clock and demo indicator The replay now drives the entire map from a 120 kB all-station snapshot (static/flood-2024-all.json: 649 hourly frames x 16 stations of level + discharge, forward-filled on an aligned grid): - station markers recolor/resize per frame from historic discharge - river segments restyle per frame (color/width from the same nearest-gauge grading as live mode) - flood zones flood/recede from P.1's historic level - a large clock overlay on the map shows replay date/time, P.1 level and total basin flow - the LIVE DATA pill switches to an amber '2024 REPLAY' (or 'SIMULATION' for the demo_level/demo_rise hooks) and back on finish - replay end or stop restores the live view via a full dashboard reload Replaces the P.1-only snapshot (flood-2024-p1.json removed). --- src/static/dashboard.html | 144 ++++++++++++++++++++++----------- src/static/flood-2024-all.json | 1 + src/static/flood-2024-p1.json | 1 - 3 files changed, 100 insertions(+), 46 deletions(-) create mode 100644 src/static/flood-2024-all.json delete mode 100644 src/static/flood-2024-p1.json diff --git a/src/static/dashboard.html b/src/static/dashboard.html index 89fc5be..b09c9df 100644 --- a/src/static/dashboard.html +++ b/src/static/dashboard.html @@ -50,6 +50,8 @@ background: var(--mint); color: #146644; font-weight: 750; font-size: .8rem; } .live-dot { width: 8px; height: 8px; border-radius: 50%; background: #22a66c; box-shadow: 0 0 0 5px rgba(34,166,108,.12); } + .live-pill.demo { background: #fdeeda; color: #9a6200; } + .live-pill.demo .live-dot { background: #e6a23c; box-shadow: 0 0 0 5px rgba(230,162,60,.15); } button { border: 1px solid var(--border); border-radius: 11px; background: white; color: var(--ink); padding: 10px 14px; cursor: pointer; font-weight: 700; box-shadow: 0 3px 10px rgba(22,52,62,.05); @@ -127,6 +129,14 @@ width: 26px; height: 26px; display: grid; place-items: center; font-size: 19px; filter: drop-shadow(0 3px 4px rgba(5,43,58,.45)); } + .replay-clock { + position: absolute; z-index: 650; left: 50%; transform: translateX(-50%); bottom: 20px; + background: rgba(19,43,53,.9); color: white; padding: 12px 26px; border-radius: 15px; + text-align: center; display: none; pointer-events: none; backdrop-filter: blur(6px); + box-shadow: 0 12px 30px rgba(9,30,38,.4); + } + .replay-clock strong { display: block; font-size: 1.65rem; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; } + .replay-clock span { font-size: .78rem; opacity: .85; } .forecast-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; margin-top: 14px; } .forecast-station { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; } .forecast-station strong { font-size: .8rem; } @@ -181,7 +191,7 @@
-
LIVE DATA
+
LIVE DATA
@@ -211,6 +221,7 @@
Loading river conditions…
Map data could not be loaded.
+