diff --git a/www/xiaomi.html b/www/xiaomi.html index d2d3eb0..b94289f 100644 --- a/www/xiaomi.html +++ b/www/xiaomi.html @@ -312,8 +312,72 @@ .toast.show { transform: translateX(-50%) translateY(0); } .toast.hidden { display: none; } + /* Modal: version-warning popup shown on page open. + Blocking (full-screen backdrop + centered panel) so the user + cannot miss the go2rtc/Frigate version caveat before attempting + to pair a Xiaomi camera. */ + .modal-backdrop { + position: fixed; inset: 0; + background: rgba(0, 0, 0, 0.75); + backdrop-filter: blur(4px); + -webkit-backdrop-filter: blur(4px); + display: flex; align-items: center; justify-content: center; + padding: 1.5rem; + z-index: 2000; + animation: fadeIn var(--transition-base); + } + .modal-backdrop.hidden { display: none; } + + .modal { + width: 100%; max-width: 420px; + background: var(--bg-secondary); + border: 1px solid var(--border-color); + border-radius: 12px; + padding: 1.75rem 1.5rem 1.5rem; + box-shadow: var(--shadow-lg), 0 0 0 1px var(--purple-glow); + text-align: center; + animation: modalIn var(--transition-base); + } + + .modal-icon { + width: 48px; height: 48px; + margin: 0 auto 1rem; + border-radius: 50%; + background: rgba(245, 158, 11, 0.12); + display: flex; align-items: center; justify-content: center; + color: #f59e0b; + } + .modal-icon svg { width: 28px; height: 28px; } + + .modal-title { + font-size: 1.0625rem; font-weight: 600; + color: var(--text-primary); margin-bottom: 0.625rem; + letter-spacing: 0.01em; + } + + .modal-text { + font-size: 0.875rem; line-height: 1.55; + color: var(--text-secondary); + margin-bottom: 1.25rem; + } + .modal-text p + p { margin-top: 0.625rem; } + .modal-text code { + font-family: var(--font-mono); + font-size: 0.8125rem; + color: var(--purple-light); + background: var(--bg-tertiary); + padding: 0.0625rem 0.375rem; + border-radius: 4px; + } + + .modal .btn-primary { width: 100%; } + @keyframes spin { to { transform: rotate(360deg); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } + @keyframes modalIn { + from { opacity: 0; transform: translateY(8px) scale(0.98); } + to { opacity: 1; transform: translateY(0) scale(1); } + } @@ -465,6 +529,26 @@ + + +