Refine calendar display layout and features

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>

static/js/app.js

@@ -3,7 +3,7 @@ const INTERVALS = {
     TIME: 1000,              // 1 second
     WEATHER: 900000,         // 15 minutes
     CALENDAR: 300000,        // 5 minutes
-    BACKGROUND: 300000,      // 5 minutes
+    BACKGROUND: 60000,       // 1 minute
     JOKE: 3600000           // 1 hour
 };
 
@@ -65,32 +65,28 @@ async function updateWeather() {
             return;
         }
 
-        // Update current weather
+        // Update current weather in header
         const { current, forecast } = data;
 
         document.getElementById('current-temp').textContent = `${current.temp}°`;
         document.getElementById('weather-icon').textContent = WEATHER_ICONS[current.icon] || '🌤️';
-        document.getElementById('weather-description').textContent = current.description;
-        document.getElementById('feels-like').textContent = `${current.feels_like}°`;
-        document.getElementById('humidity').textContent = `${current.humidity}%`;
-        document.getElementById('wind-speed').textContent = `${current.wind_speed} km/h`;
 
-        // Update forecast
-        const forecastContainer = document.getElementById('forecast-container');
-        forecastContainer.innerHTML = '';
+        // Update 3-day forecast in header
+        const headerForecast = document.getElementById('header-forecast');
+        headerForecast.innerHTML = '';
 
         forecast.forEach(day => {
             const dayElement = document.createElement('div');
-            dayElement.className = 'forecast-day';
+            dayElement.className = 'forecast-item';
             dayElement.innerHTML = `
-                <div class="forecast-day-name">${day.date}</div>
-                <div class="forecast-description">${day.description}</div>
-                <div class="forecast-temp">
+                <div class="weather-label">${day.date}</div>
+                <div class="forecast-icon">${WEATHER_ICONS[day.icon] || '🌤️'}</div>
+                <div class="forecast-temps">
                     <span class="high">${day.temp_max}°</span>
                     <span class="low">${day.temp_min}°</span>
                 </div>
             `;
-            forecastContainer.appendChild(dayElement);
+            headerForecast.appendChild(dayElement);
         });
 
     } catch (error) {