Ludwig Mey
71a450b968
Major improvements to the calendar display application: - Redesigned weather display: moved forecast to header alongside time - Added 3-day forecast with icons and high/low temps in header - Simplified main layout: removed separate weather section, calendar now full-width - Made layout more compact to fit on one screen without scrolling - Added 2 new background images for rotation - Updated image rotation interval to 1 minute - Improved responsive design and spacing The display now shows: - Header: Time/date on left, current weather + 3-day forecast on right - Main: Full-width calendar events section - Footer: Dad joke All elements now fit on a single screen with a clean, readable layout. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
53 lines
1.8 KiB
HTML
53 lines
1.8 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 Display</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>
|
|
<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>
|
|
</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>
|
|
|
|
<!-- Footer with Dad Joke -->
|
|
<footer class="footer">
|
|
<div id="joke" class="joke">Loading a joke to brighten your day...</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<script src="{{ url_for('static', filename='js/app.js') }}"></script>
|
|
</body>
|
|
</html>
|