diff --git a/sketches/doorbell/doorbell.html b/sketches/doorbell/doorbell.html index 35e7c2b..0b712d6 100644 --- a/sketches/doorbell/doorbell.html +++ b/sketches/doorbell/doorbell.html @@ -44,6 +44,7 @@ #connection.connecting { color: #f890e7; } #connection.error { color: #f890e7; } #connection.backoff { color: #888; } + #connection.ratelimited { color: #ff4444; } #status { text-align: center; @@ -246,10 +247,83 @@ #toast.error { background: #f890e7; } + + .admin-toggle { + text-align: center; + margin-top: 20px; + padding: 10px; + font-size: 10px; + color: #555; + cursor: pointer; + letter-spacing: 1px; + text-transform: uppercase; + } + + .admin-toggle:hover { + color: #888; + } + + #adminPanel { + display: none; + background: #111; + border: 1px solid #333; + border-radius: 8px; + padding: 15px; + margin-top: 10px; + } + + #adminPanel.visible { + display: block; + } + + .admin-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 10px; + } + + .admin-btn { + padding: 12px; + font-size: 11px; + background: #1a1a1a; + border: 1px solid #444; + color: #888; + border-radius: 6px; + cursor: pointer; + } + + .admin-btn:hover { + border-color: #0bd3d3; + color: #0bd3d3; + } + + .admin-btn.danger { + border-color: #f890e7; + color: #f890e7; + } + + .admin-btn.danger:hover { + background: #f890e7; + color: #000; + } + + #authStatus { + text-align: center; + font-size: 9px; + color: #0bd3d3; + margin-bottom: 5px; + letter-spacing: 1px; + font-family: monospace; + } + + #authStatus.unauth { + color: #f890e7; + }