Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>PotholeIQ — Supervisor Login</title> | |
| <style> | |
| :root{ --blue:#0061d5; --blue-deep:#003a85; --ink:#0b2545; --muted:#5b6b85; --line:#dbe6f5; --bg:#f4f8fd; } | |
| *{box-sizing:border-box;margin:0;padding:0} | |
| body{font-family:'Segoe UI',Inter,system-ui,Arial,sans-serif;background:var(--bg);color:var(--ink);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px} | |
| .card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 6px 24px rgba(11,37,69,.08);padding:30px 28px;width:100%;max-width:380px} | |
| .logo{width:46px;height:46px;border-radius:12px;background:var(--blue);display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;margin:0 auto 14px} | |
| h1{font-size:19px;font-weight:800;color:var(--blue-deep);text-align:center} | |
| .sub{font-size:12.5px;color:var(--muted);text-align:center;margin-top:4px;margin-bottom:20px} | |
| label{font-size:12px;color:var(--muted);display:block;margin:12px 0 5px;font-weight:600} | |
| input{width:100%;font:inherit;font-size:14px;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink)} | |
| input:focus{outline:none;border-color:var(--blue)} | |
| button{width:100%;margin-top:18px;font:inherit;font-weight:700;cursor:pointer;border:none;background:var(--blue);color:#fff;padding:11px;border-radius:9px;font-size:14px} | |
| button:hover{background:var(--blue-deep)} | |
| button:disabled{opacity:.6;cursor:default} | |
| .msg{margin-top:14px;font-size:12.5px;text-align:center;min-height:16px} | |
| .msg.err{color:#c0341d} | |
| .msg.ok{color:#0c6b46} | |
| .foot{margin-top:16px;font-size:11px;color:var(--muted);text-align:center} | |
| </style> | |
| </head> | |
| <body> | |
| <form class="card" id="form"> | |
| <div class="logo">🛣️</div> | |
| <h1>PotholeIQ Command Center</h1> | |
| <div class="sub">Supervisor access only</div> | |
| <label for="email">Email</label> | |
| <input id="email" type="email" autocomplete="username" required /> | |
| <label for="password">Password</label> | |
| <input id="password" type="password" autocomplete="current-password" required /> | |
| <button id="btn" type="submit">Sign in</button> | |
| <div class="msg" id="msg"></div> | |
| </form> | |
| <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script> | |
| <script> | |
| const SUPABASE_URL = 'https://knvoctdesiwogofcyced.supabase.co'; | |
| const SUPABASE_PUBLISHABLE = 'sb_publishable_pCMhOVA6YYg2948wi6ValQ_hhhC-xfK'; | |
| const sb = supabase.createClient(SUPABASE_URL, SUPABASE_PUBLISHABLE); | |
| const msg = document.getElementById('msg'); | |
| const btn = document.getElementById('btn'); | |
| // already signed in as supervisor? skip the form | |
| (async () => { | |
| const { data } = await sb.auth.getSession(); | |
| if (data.session && data.session.user?.app_metadata?.role === 'supervisor') { | |
| location.href = 'command-center.html'; | |
| } | |
| })(); | |
| document.getElementById('form').addEventListener('submit', async (e) => { | |
| e.preventDefault(); | |
| msg.className = 'msg'; msg.textContent = ''; | |
| btn.disabled = true; btn.textContent = 'Signing in…'; | |
| const email = document.getElementById('email').value.trim(); | |
| const password = document.getElementById('password').value; | |
| const { data, error } = await sb.auth.signInWithPassword({ email, password }); | |
| if (error) { | |
| msg.className = 'msg err'; msg.textContent = error.message; | |
| btn.disabled = false; btn.textContent = 'Sign in'; | |
| return; | |
| } | |
| if (data.user?.app_metadata?.role !== 'supervisor') { | |
| await sb.auth.signOut(); | |
| msg.className = 'msg err'; msg.textContent = 'This account is not a supervisor.'; | |
| btn.disabled = false; btn.textContent = 'Sign in'; | |
| return; | |
| } | |
| msg.className = 'msg ok'; msg.textContent = 'Welcome — loading dashboard…'; | |
| location.href = 'command-center.html'; | |
| }); | |
| </script> | |
| </body> | |
| </html> | |