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

Refine calendar display layout and features

Browse Source 
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>
This commit is contained in:
Luwig Mey
2026-02-14 17:52:36 +13:00
parent ae11476245
commit 71a450b968
7 changed files with 112 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
templates/index.html
View File

@@ -19,43 +19,19 @@
<div id="date" class="date">Loading...</div>
</div>
<div class="weather-summary">
<div id="current-temp" class="current-temp">--°</div>
<div id="weather-icon" class="weather-icon"></div>
<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">
<!-- Weather Section -->
<section class="weather-section">
<h2>Weather</h2>
<div class="current-weather">
<div id="weather-description" class="weather-description">Loading...</div>
<div class="weather-details">
<div class="weather-detail">
<span class="label">Feels like:</span>
<span id="feels-like">--°</span>
</div>
<div class="weather-detail">
<span class="label">Humidity:</span>
<span id="humidity">--%</span>
</div>
<div class="weather-detail">
<span class="label">Wind:</span>
<span id="wind-speed">-- km/h</span>
</div>
</div>
</div>
<!-- 5-Day Forecast -->
<div class="forecast">
<h3>Forecast</h3>
<div id="forecast-container" class="forecast-days">
<!-- Forecast items will be inserted here -->
</div>
</div>
</section>
<!-- Calendar Section -->
<section class="calendar-section">
<h2>Upcoming Events</h2>