diff --git a/node-red/settings-smoke-notify.html b/node-red/settings-smoke-notify.html index 66cb01e..9ae2629 100644 --- a/node-red/settings-smoke-notify.html +++ b/node-red/settings-smoke-notify.html @@ -324,6 +324,66 @@ border: 1px solid #3a3a5a; } + /* Status Badges */ + .status-badges { + display: flex; + gap: 10px; + margin-top: 8px; + flex-wrap: wrap; + } + + .status-badge { + display: inline-flex; + align-items: center; + gap: 5px; + padding: 4px 10px; + border-radius: 12px; + font-size: 11px; + font-weight: 500; + } + + .status-badge.smoke { + background: #1a3a1a; + color: #4ade80; + border: 1px solid #22c55e; + } + + .status-badge.smoke.active { + background: #5c1a1a; + color: #ff6b6b; + border: 1px solid #dc3545; + animation: pulse-red 1.5s infinite; + } + + .status-badge.siren { + background: #1a2a3a; + color: #60a5fa; + border: 1px solid #3b82f6; + } + + .status-badge.siren.active { + background: #5c3a1a; + color: #ffa502; + border: 1px solid #ff9500; + animation: pulse-orange 1.5s infinite; + } + + .status-badge.no-siren { + background: #2a2a3a; + color: #888; + border: 1px solid #444; + } + + @keyframes pulse-red { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.6; } + } + + @keyframes pulse-orange { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.6; } + } + .card-header { display: flex; justify-content: space-between; @@ -522,6 +582,24 @@ box-shadow: 0 5px 20px rgba(56, 239, 125, 0.4); } + .refresh-page-btn { + flex: 1; + padding: 15px; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + border: none; + border-radius: 10px; + color: white; + font-size: 14px; + font-weight: 600; + cursor: pointer; + transition: transform 0.2s, box-shadow 0.2s; + } + + .refresh-page-btn:hover { + transform: translateY(-2px); + box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4); + } + .empty-state { text-align: center; padding: 30px; @@ -615,6 +693,13 @@ πŸ’Ύ Alle Gruppen speichern + + +
+ +