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

Implement calendar display application

Browse Source 
Built a full-featured smart display app with Flask backend and responsive frontend.

Features:
- Real-time clock display
- Weather integration (OpenWeatherMap API) for Hamilton, NZ
- Google Calendar integration (placeholder, needs credentials)
- Rotating background images from local directory
- Dad jokes display (icanhazdadjoke API)

Technical stack:
- Backend: Python Flask with API endpoints
- Frontend: HTML/CSS/JavaScript with auto-updating data
- Caching system to avoid API rate limits
- Responsive design for various screen sizes

Deployment ready for Raspberry Pi with systemd service and Chromium kiosk mode setup instructions.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Luwig Mey
2026-02-14 17:23:11 +13:00
parent 4977016a64
commit ae11476245
11 changed files with 1083 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
templates/index.html Normal file
View File

@@ -0,0 +1,76 @@
<!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 id="current-temp" class="current-temp">--°</div>
<div id="weather-icon" class="weather-icon"></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>
<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>