Fix/device time layout and screenshots

web/index.html

@@ -22,7 +22,10 @@ <h1>Chicken Station</h1>
                 </div>
                 <div class="device-time-card" aria-label="Device time">
                     <p class="device-time-date" id="deviceDate">Device time unavailable</p>
-                    <p class="device-time-value" id="deviceTime">--:--:--</p>
+                    <div class="device-time-row">
+                        <p class="device-time-value" id="deviceTime">--:--:--</p>
+                        <span class="device-time-zone" id="deviceTimezone"></span>
+                    </div>
                 </div>
             </div>
         </header>

web/public/mock/api.js

@@ -55,6 +55,11 @@ class MockAPI {
         return new Date(this.deviceTimeMs + elapsed);
     }
 
+    getCurrentTimeZoneLabel(date = this.getCurrentDeviceDate()) {
+        const offsetMinutes = -date.getTimezoneOffset();
+        return offsetMinutes >= 120 ? 'CEST' : 'CET';
+    }
+
     // Simulate network delay
     async delay(ms = 200 + Math.random() * 300) {
         return new Promise(resolve => setTimeout(resolve, ms));
@@ -101,7 +106,7 @@ class MockAPI {
                 hour: now.getHours(),
                 minute: now.getMinutes(),
                 second: now.getSeconds(),
-                timezone: 'Mock',
+                timezone: this.getCurrentTimeZoneLabel(now),
                 utc_offset_seconds: -now.getTimezoneOffset() * 60
             }
         };

web/src/app.js

@@ -45,6 +45,7 @@ export class ChickenFeederApp {
         this.elements.lastFeedTime = document.getElementById('lastFeedTime');
         this.elements.deviceTime = document.getElementById('deviceTime');
         this.elements.deviceDate = document.getElementById('deviceDate');
+        this.elements.deviceTimezone = document.getElementById('deviceTimezone');
         this.elements.feedLogToggle = document.getElementById('feedLogToggle');
         this.elements.feedLogOverlay = document.getElementById('feedLogOverlay');
         this.elements.feedLogList = document.getElementById('feedLogList');
@@ -477,25 +478,27 @@ export class ChickenFeederApp {
     }
 
     renderDeviceTime() {
-        if (!this.elements.deviceDate || !this.elements.deviceTime) return;
+        if (!this.elements.deviceDate || !this.elements.deviceTime || !this.elements.deviceTimezone) return;
 
         if (!this.deviceTime) {
             this.elements.deviceDate.textContent = 'Device time unavailable';
             this.elements.deviceTime.textContent = '--:--:--';
+            this.elements.deviceTimezone.textContent = '';
+            this.elements.deviceTimezone.hidden = true;
             return;
         }
 
-        const weekdayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
-        const weekday = weekdayNames[this.deviceTime.getUTCDay()];
         const day = String(this.deviceTime.getUTCDate()).padStart(2, '0');
         const month = String(this.deviceTime.getUTCMonth() + 1).padStart(2, '0');
         const year = this.deviceTime.getUTCFullYear();
         const hour = String(this.deviceTime.getUTCHours()).padStart(2, '0');
         const minute = String(this.deviceTime.getUTCMinutes()).padStart(2, '0');
         const second = String(this.deviceTime.getUTCSeconds()).padStart(2, '0');
 
-        this.elements.deviceDate.textContent = `${weekday}, ${day}.${month}.${year}${this.deviceTimeZone ? ` · ${this.deviceTimeZone}` : ''}`;
+        this.elements.deviceDate.textContent = `${day}.${month}.${year}`;
         this.elements.deviceTime.textContent = `${hour}:${minute}:${second}`;
+        this.elements.deviceTimezone.textContent = this.deviceTimeZone;
+        this.elements.deviceTimezone.hidden = !this.deviceTimeZone;
     }
 
     async updateStatus() {

web/src/style.css

@@ -40,7 +40,8 @@ body {
     gap: 12px;
 }
 
-.brand { display: flex; align-items: center; gap: 12px; }
+.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
+.brand > div { min-width: 0; }
 .brand h1 { margin: 0; font-size: 1.35rem; letter-spacing: -0.02em; }
 .topbar-meta {
     display: flex;
@@ -86,22 +87,48 @@ body {
 .device-time-card {
     text-align: right;
     color: var(--text);
+    min-width: 0;
 }
 
 .device-time-date {
     margin: 0;
     font-size: 0.78rem;
     color: var(--muted);
     font-weight: 600;
+    white-space: nowrap;
+}
+
+.device-time-row {
+    margin-top: 2px;
+    display: inline-flex;
+    align-items: baseline;
+    justify-content: flex-end;
+    gap: 8px;
+    white-space: nowrap;
 }
 
 .device-time-value {
-    margin: 2px 0 0;
+    margin: 0;
     font-size: 1.15rem;
     font-weight: 700;
     letter-spacing: 0.04em;
 }
 
+.device-time-zone {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 24px;
+    padding: 2px 8px;
+    border-radius: 999px;
+    background: #eef2ff;
+    border: 1px solid #c7d2fe;
+    color: #4338ca;
+    font-size: 0.72rem;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+}
+
 .layout { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
 .panel {
     background: var(--panel);
@@ -713,9 +740,13 @@ body {
     .status-dot { width: 9px; height: 9px; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.14); }
     .device-time-date { font-size: 0.72rem; }
     .device-time-value { font-size: 1rem; }
+    .device-time-row { gap: 6px; }
+    .device-time-zone { font-size: 0.66rem; padding: 2px 7px; min-height: 22px; }
     .panel { padding: 14px 12px; }
     .feed-button { width: 100%; justify-content: center; }
     .hero-text h2 { font-size: 1.5rem; }
+    .hero-stats { grid-template-columns: 1fr; }
+    .backup-actions { grid-template-columns: 1fr; }
 
     .timer-main { flex-wrap: wrap; gap: 10px; overflow-x: visible; }
     .timer-main > .start-toggle { order: 0; }