Switch to 5-day rolling view with clock/weather info panel

- Show today + next 4 days instead of a fixed Sun-Sat week grid
- Replace Next Week column with a right-side info panel (live clock,
  date, current weather + 3-day forecast)
- Simplify topbar to just the view pill, date range, and member filter
- Adjust grid to repeat(5, 1fr) 190px

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-07-27 20:53:36 +12:00
parent fc6abfe745
commit 20c9bb55b1
4 changed files with 199 additions and 237 deletions

View File

@@ -10,31 +10,11 @@
<div class="app">
<!-- Top bar: date/time, week navigation, filter, weather -->
<header class="topbar">
<div class="topbar-left">
<div class="date-time">
<span class="icon-badge">&#128197;</span>
<span id="header-date" class="header-date">Loading...</span>
<span id="header-time" class="header-time">--:--</span>
</div>
<div class="nav-row">
<span class="pill view-pill">Week</span>
<div class="week-nav">
<button id="prev-week" class="nav-arrow" aria-label="Previous week">&#8249;</button>
<span id="week-range" class="week-range">--</span>
<button id="next-week" class="nav-arrow" aria-label="Next week">&#8250;</button>
</div>
<select id="member-filter" class="pill filter-select">
<option value="all">Filter: All</option>
</select>
</div>
</div>
<div class="topbar-right">
<div class="weather-chip">
<span id="weather-icon" class="weather-icon"></span>
<span id="current-temp" class="current-temp">--&deg;</span>
</div>
<span class="wifi-icon" id="connection-status" title="Connected">&#128225;</span>
</div>
<span class="pill view-pill">5 Days</span>
<span id="date-range" class="pill date-range-label">--</span>
<select id="member-filter" class="pill filter-select">
<option value="all">Filter: All</option>
</select>
</header>
<!-- Week grid: Sunday - Saturday + Next Week preview -->