Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Admin Login</title> | |
| <link rel="shortcut icon" href="css/favicon.ico" type="image/x-icon"> | |
| <link rel="icon" href="css/favicon.ico" type="image/x-icon"> | |
| <style> | |
| * { box-sizing: border-box; margin: 0; padding: 0; } | |
| body { | |
| background: #0a0a0a; | |
| color: #00ff41; | |
| font-family: 'Courier New', monospace; | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| overflow: hidden; | |
| } | |
| canvas#matrix { | |
| position: fixed; | |
| top: 0; left: 0; | |
| width: 100%; height: 100%; | |
| z-index: 0; | |
| opacity: 0.18; | |
| } | |
| .login-card { | |
| position: relative; | |
| z-index: 1; | |
| background: rgba(0, 0, 0, 0.85); | |
| border: 1px solid #00ff41; | |
| padding: 48px 40px; | |
| width: 100%; | |
| max-width: 400px; | |
| box-shadow: 0 0 40px rgba(0, 255, 65, 0.15); | |
| } | |
| .logo { | |
| font-size: 1.4rem; | |
| font-weight: bold; | |
| color: #00ff41; | |
| letter-spacing: 2px; | |
| margin-bottom: 8px; | |
| } | |
| .subtitle { | |
| font-size: 0.75rem; | |
| color: #007a1e; | |
| margin-bottom: 36px; | |
| letter-spacing: 1px; | |
| } | |
| label { | |
| display: block; | |
| font-size: 0.75rem; | |
| color: #00cc33; | |
| letter-spacing: 1px; | |
| margin-bottom: 8px; | |
| } | |
| input[type="password"] { | |
| width: 100%; | |
| background: #0d0d0d; | |
| border: 1px solid #00ff41; | |
| color: #00ff41; | |
| font-family: 'Courier New', monospace; | |
| font-size: 1rem; | |
| padding: 12px 14px; | |
| outline: none; | |
| margin-bottom: 24px; | |
| letter-spacing: 2px; | |
| } | |
| input[type="password"]:focus { | |
| border-color: #00ff41; | |
| box-shadow: 0 0 10px rgba(0, 255, 65, 0.3); | |
| } | |
| input[type="password"]::placeholder { | |
| color: #1a4d2a; | |
| letter-spacing: 1px; | |
| } | |
| button[type="submit"] { | |
| width: 100%; | |
| background: transparent; | |
| border: 1px solid #00ff41; | |
| color: #00ff41; | |
| font-family: 'Courier New', monospace; | |
| font-size: 0.9rem; | |
| font-weight: bold; | |
| letter-spacing: 3px; | |
| padding: 12px; | |
| cursor: pointer; | |
| text-transform: uppercase; | |
| transition: background 0.2s, color 0.2s; | |
| } | |
| button[type="submit"]:hover:not(:disabled) { | |
| background: #00ff41; | |
| color: #0a0a0a; | |
| } | |
| button[type="submit"]:disabled { | |
| opacity: 0.4; | |
| cursor: not-allowed; | |
| } | |
| .error { | |
| display: none; | |
| color: #ff3333; | |
| font-size: 0.78rem; | |
| margin-top: 16px; | |
| border: 1px solid #ff3333; | |
| padding: 8px 12px; | |
| letter-spacing: 1px; | |
| } | |
| .error.visible { display: block; } | |
| </style> | |
| </head> | |
| <body> | |
| <canvas id="matrix"></canvas> | |
| <div class="login-card"> | |
| <div class="logo">> ADMIN MATRIX</div> | |
| <div class="subtitle">AUTHENTICATION REQUIRED</div> | |
| <form id="loginForm" autocomplete="off"> | |
| <label for="apiKey">API KEY</label> | |
| <input | |
| type="password" | |
| id="apiKey" | |
| name="apiKey" | |
| placeholder="Enter API key..." | |
| autocomplete="new-password" | |
| required | |
| /> | |
| <button type="submit" id="submitBtn">ACCESS</button> | |
| <div class="error" id="errorMsg">INVALID API KEY — ACCESS DENIED</div> | |
| </form> | |
| </div> | |
| <script> | |
| // Matrix rain background | |
| (function () { | |
| const canvas = document.getElementById('matrix'); | |
| const ctx = canvas.getContext('2d'); | |
| let cols, drops; | |
| function init() { | |
| canvas.width = window.innerWidth; | |
| canvas.height = window.innerHeight; | |
| cols = Math.floor(canvas.width / 16); | |
| drops = Array(cols).fill(1); | |
| } | |
| function draw() { | |
| ctx.fillStyle = 'rgba(0,0,0,0.05)'; | |
| ctx.fillRect(0, 0, canvas.width, canvas.height); | |
| ctx.fillStyle = '#00ff41'; | |
| ctx.font = '14px Courier New'; | |
| for (let i = 0; i < drops.length; i++) { | |
| const char = String.fromCharCode(0x30a0 + Math.random() * 96); | |
| ctx.fillText(char, i * 16, drops[i] * 16); | |
| if (drops[i] * 16 > canvas.height && Math.random() > 0.975) drops[i] = 0; | |
| drops[i]++; | |
| } | |
| } | |
| init(); | |
| window.addEventListener('resize', init); | |
| setInterval(draw, 50); | |
| })(); | |
| // Auth logic | |
| const API_BASE = location.hostname === 'localhost' ? 'http://localhost:4000/api' : '/api'; | |
| function getRedirectUrl() { | |
| const params = new URLSearchParams(location.search); | |
| const redirect = params.get('redirect'); | |
| if (redirect) { | |
| try { | |
| const url = new URL(redirect); | |
| // Only allow same-origin redirects | |
| if (url.origin === location.origin) return redirect; | |
| } catch (_) {} | |
| } | |
| return 'index.html'; | |
| } | |
| document.getElementById('loginForm').addEventListener('submit', async function (e) { | |
| e.preventDefault(); | |
| const key = document.getElementById('apiKey').value.trim(); | |
| const btn = document.getElementById('submitBtn'); | |
| const err = document.getElementById('errorMsg'); | |
| if (!key) return; | |
| btn.disabled = true; | |
| btn.textContent = 'VERIFYING...'; | |
| err.classList.remove('visible'); | |
| try { | |
| const res = await fetch(`${API_BASE}/auth/verify`, { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ key }), | |
| }); | |
| const data = await res.json(); | |
| if (data.valid) { | |
| sessionStorage.setItem('admin_api_key', key); | |
| window.location.replace(getRedirectUrl()); | |
| } else { | |
| err.classList.add('visible'); | |
| btn.disabled = false; | |
| btn.textContent = 'ACCESS'; | |
| } | |
| } catch (_) { | |
| err.textContent = 'CONNECTION ERROR — BACKEND UNAVAILABLE'; | |
| err.classList.add('visible'); | |
| btn.disabled = false; | |
| btn.textContent = 'ACCESS'; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |