refresh

apps/ui/templates/dashboard.html

@@ -46,6 +46,13 @@
             margin-bottom: 0.5rem;
         }
         
+        .header-buttons {
+            display: flex;
+            gap: 0.5rem;
+            align-items: center;
+        }
+        
+        .refresh-btn,
         .collapse-all-btn {
             padding: 0.75rem;
             background: #667eea;
@@ -61,16 +68,33 @@
             justify-content: center;
         }
         
+        .refresh-btn:hover,
         .collapse-all-btn:hover {
             background: #5568d3;
             transform: translateY(-1px);
             box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
         }
         
+        .refresh-btn:active,
         .collapse-all-btn:active {
             transform: translateY(0);
         }
         
+        .refresh-icon {
+            font-size: 1.5rem;
+            line-height: 1;
+            transition: transform 0.3s;
+        }
+        
+        .refresh-icon.spinning {
+            animation: spin 0.6s linear;
+        }
+        
+        @keyframes spin {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+        }
+        
         .collapse-all-icon {
             font-size: 1.25rem;
             transition: transform 0.3s;
@@ -483,9 +507,14 @@
                 <h1>🏠 Home Automation</h1>
                 <p>Realtime Status: <span class="status disconnected" id="connection-status">Verbinde...</span></p>
             </div>
-            <button class="collapse-all-btn" onclick="toggleAllRooms()" title="Alle Räume ein-/ausklappen">
-                <span class="collapse-all-icon" id="collapse-all-icon">▼</span>
-            </button>
+            <div class="header-buttons">
+                <button class="refresh-btn" onclick="refreshPage()" title="Seite aktualisieren">
+                    <span class="refresh-icon" id="refresh-icon">⟳</span>
+                </button>
+                <button class="collapse-all-btn" onclick="toggleAllRooms()" title="Alle Räume ein-/ausklappen">
+                    <span class="collapse-all-icon" id="collapse-all-icon">▼</span>
+                </button>
+            </div>
         </header>
         
         {% if rooms %}
@@ -640,6 +669,17 @@
             }
         }
         
+        // Refresh page with animation
+        function refreshPage() {
+            const icon = document.getElementById('refresh-icon');
+            icon.classList.add('spinning');
+            
+            // Reload page after brief animation
+            setTimeout(() => {
+                window.location.reload();
+            }, 300);
+        }
+        
         // Toggle all rooms
         function toggleAllRooms() {
             const allContents = document.querySelectorAll('.room-content');