Ludwig Mey
fc6abfe745
- Replace scrolling event list + photo background with a Sun–Sat week grid plus a "Next Week" preview column; Prev/Next navigation and per-member filter - Add [Name] event title prefix convention for color-coded family member cards (Ludwig/Dad=blue, Michelle/Mom=pink, Jason=green, Daniel=yellow) - /api/calendar now accepts ?start=YYYY-MM-DD, returns bucketed week payload with member/color metadata; fetches 14 days to populate Next Week column - Drop rotating background photo and dad joke from the display (endpoints kept) - Update README with new UI overview, prefix convention, and API docs Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
51 lines
2.2 KiB
HTML
51 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Family Calendar</title>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
|
</head>
|
|
<body>
|
|
<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>
|
|
</header>
|
|
|
|
<!-- Week grid: Sunday - Saturday + Next Week preview -->
|
|
<main id="week-grid" class="week-grid">
|
|
<div class="event-placeholder">Loading calendar...</div>
|
|
</main>
|
|
|
|
<button id="add-btn" class="add-fab" title="Add events from Google Calendar" aria-label="Add event">+</button>
|
|
</div>
|
|
|
|
<script src="{{ url_for('static', filename='js/app.js') }}"></script>
|
|
</body>
|
|
</html>
|