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:
@@ -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">📅</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">‹</button>
|
||||
<span id="week-range" class="week-range">--</span>
|
||||
<button id="next-week" class="nav-arrow" aria-label="Next week">›</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">--°</span>
|
||||
</div>
|
||||
<span class="wifi-icon" id="connection-status" title="Connected">📡</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 -->
|
||||
|
||||
Reference in New Issue
Block a user