diff --git a/apps/ui/templates/dashboard.html b/apps/ui/templates/dashboard.html index 593b480..93a8fa8 100644 --- a/apps/ui/templates/dashboard.html +++ b/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 @@

🏠 Home Automation

Realtime Status: Verbinde...

- +
+ + +
{% 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');