luddie/Calender
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign UI as light-themed week-grid calendar matching Skylight-style device

Browse Source 
- 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>
This commit is contained in:
Luwig Mey
2026-07-27 20:32:15 +12:00
parent 18965045fa
commit fc6abfe745
6 changed files with 564 additions and 733 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
templates/index.html
View File

@@ -3,48 +3,46 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Family Calendar Display</title>
<title>Family Calendar</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
<!-- Background container -->
<div id="background"></div>
<!-- Main content overlay -->
<div class="container">
<!-- Header with Time and Date -->
<header class="header">
<div class="time-display">
<div id="time" class="time">--:--</div>
<div id="date" class="date">Loading...</div>
<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="weather-summary">
<div class="current-weather-item">
<div class="weather-label">Today</div>
<div id="current-temp" class="current-temp">--°</div>
<div id="weather-icon" class="weather-icon"></div>
</div>
<div id="header-forecast" class="header-forecast">
<!-- 3-day forecast will be inserted here -->
<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>
</header>
<!-- Main content area -->
<div class="main-content">
<!-- Calendar Section -->
<section class="calendar-section">
<h2>Upcoming Events</h2>
<div id="calendar-events" class="events-list">
<div class="event-placeholder">Loading events...</div>
</div>
</section>
</div>
<!-- Week grid: Sunday - Saturday + Next Week preview -->
<main id="week-grid" class="week-grid">
<div class="event-placeholder">Loading calendar...</div>
</main>
<!-- Footer with Dad Joke -->
<footer class="footer">
<div id="joke" class="joke">Loading a joke to brighten your day...</div>
</footer>
<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>