Spaces:
Paused
Paused
| <html lang="ar" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Video Swarm — دخول</title> | |
| <style> | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| body { | |
| background: #0a0a0f; | |
| color: #e0e0e0; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| overflow: hidden; | |
| } | |
| .bg-grid { | |
| position: fixed; inset: 0; | |
| background-image: | |
| linear-gradient(rgba(0,255,170,0.03) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(0,255,170,0.03) 1px, transparent 1px); | |
| background-size: 50px 50px; | |
| pointer-events: none; | |
| } | |
| .glow { | |
| position: fixed; width: 600px; height: 600px; | |
| border-radius: 50%; | |
| background: radial-gradient(circle, rgba(0,255,170,0.08) 0%, transparent 70%); | |
| top: 50%; left: 50%; transform: translate(-50%, -50%); | |
| pointer-events: none; | |
| } | |
| .container { | |
| position: relative; z-index: 1; | |
| background: rgba(15,15,25,0.95); | |
| border: 1px solid rgba(0,255,170,0.15); | |
| border-radius: 20px; | |
| padding: 50px 40px; | |
| width: 100%; max-width: 420px; | |
| text-align: center; | |
| box-shadow: 0 0 60px rgba(0,255,170,0.05), 0 20px 40px rgba(0,0,0,0.4); | |
| backdrop-filter: blur(20px); | |
| } | |
| .logo { | |
| width: 80px; height: 80px; | |
| margin: 0 auto 20px; | |
| background: linear-gradient(135deg, #00ffaa, #00aaff); | |
| border-radius: 20px; | |
| display: flex; align-items: center; justify-content: center; | |
| font-size: 36px; font-weight: bold; | |
| box-shadow: 0 0 30px rgba(0,255,170,0.3); | |
| } | |
| h1 { | |
| font-size: 1.8rem; margin-bottom: 8px; | |
| background: linear-gradient(90deg, #00ffaa, #00aaff); | |
| -webkit-background-clip: text; -webkit-text-fill-color: transparent; | |
| } | |
| .subtitle { color: #888; font-size: 0.95rem; margin-bottom: 30px; } | |
| .input-group { | |
| position: relative; margin-bottom: 20px; | |
| } | |
| input[type="password"] { | |
| width: 100%; padding: 16px 20px; | |
| background: rgba(255,255,255,0.03); | |
| border: 1px solid rgba(0,255,170,0.2); | |
| border-radius: 12px; | |
| color: #e0e0e0; font-size: 1rem; | |
| outline: none; transition: all 0.3s; | |
| text-align: center; letter-spacing: 3px; | |
| } | |
| input[type="password"]:focus { | |
| border-color: #00ffaa; | |
| box-shadow: 0 0 20px rgba(0,255,170,0.1); | |
| background: rgba(255,255,255,0.05); | |
| } | |
| button { | |
| width: 100%; padding: 16px; | |
| background: linear-gradient(135deg, #00ffaa, #00aaff); | |
| border: none; border-radius: 12px; | |
| color: #0a0a0f; font-size: 1.1rem; font-weight: bold; | |
| cursor: pointer; transition: all 0.3s; | |
| margin-top: 10px; | |
| } | |
| button:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 30px rgba(0,255,170,0.3); | |
| } | |
| button:disabled { | |
| opacity: 0.5; cursor: not-allowed; transform: none; | |
| } | |
| .error { | |
| color: #ff4444; font-size: 0.9rem; | |
| margin-top: 15px; min-height: 20px; | |
| } | |
| .success { | |
| color: #00ffaa; font-size: 0.9rem; | |
| margin-top: 15px; | |
| } | |
| .spinner { | |
| display: inline-block; width: 18px; height: 18px; | |
| border: 2px solid rgba(0,0,0,0.3); | |
| border-top-color: #0a0a0f; | |
| border-radius: 50%; | |
| animation: spin 0.8s linear infinite; | |
| margin-left: 8px; vertical-align: middle; | |
| } | |
| @keyframes spin { to { transform: rotate(360deg); } } | |
| .footer { | |
| margin-top: 30px; font-size: 0.75rem; | |
| color: #444; | |
| } | |
| </style> | |
| <base target="_blank"> | |
| </head> | |
| <body> | |
| <div class="bg-grid"></div> | |
| <div class="glow"></div> | |
| <div class="container"> | |
| <div class="logo">🎬</div> | |
| <h1>AI Video Swarm</h1> | |
| <p class="subtitle">منصة توليد الفيديو بالذكاء الاصطناعي</p> | |
| <div class="input-group"> | |
| <input type="password" id="passInput" placeholder="أدخل كلمة المرور" | |
| onkeydown="if(event.key==='Enter')doLogin()" autofocus> | |
| </div> | |
| <button id="loginBtn" onclick="doLogin()"> | |
| <span id="btnText">دخول</span> | |
| </button> | |
| <div id="msg" class="error"></div> | |
| <div class="footer"> | |
| GPU Cluster: 8× NVIDIA L40S | Wan 2.6 14B | FP8 Inference | |
| </div> | |
| </div> | |
| <script> | |
| async function doLogin() { | |
| const input = document.getElementById('passInput'); | |
| const btn = document.getElementById('loginBtn'); | |
| const btnText = document.getElementById('btnText'); | |
| const msg = document.getElementById('msg'); | |
| const password = input.value.trim(); | |
| if (!password) { | |
| msg.textContent = 'الرجاء إدخال كلمة المرور'; | |
| msg.className = 'error'; | |
| return; | |
| } | |
| btn.disabled = true; | |
| btnText.innerHTML = 'جاري التحقق... <span class="spinner"></span>'; | |
| msg.textContent = ''; | |
| try { | |
| const res = await fetch('/api/auth/login', { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ password }) | |
| }); | |
| if (res.ok) { | |
| const data = await res.json(); | |
| document.cookie = `access_token=${data.access_token}; path=/; max-age=86400; SameSite=Strict`; | |
| msg.textContent = 'تم التحقق بنجاح! جاري التوجيه...'; | |
| msg.className = 'success'; | |
| setTimeout(() => window.location.href = '/app', 500); | |
| } else { | |
| msg.textContent = 'كلمة المرور غير صحيحة'; | |
| msg.className = 'error'; | |
| } | |
| } catch (e) { | |
| msg.textContent = 'خطأ في الاتصال بالخادم'; | |
| msg.className = 'error'; | |
| } finally { | |
| btn.disabled = false; | |
| btnText.textContent = 'دخول'; | |
| } | |
| } | |
| // Check existing token | |
| (async function() { | |
| const match = document.cookie.match(/access_token=([^;]+)/); | |
| if (match) { | |
| try { | |
| const res = await fetch('/api/auth/verify', { | |
| headers: { 'Authorization': `Bearer ${match[1]}` } | |
| }); | |
| if (res.ok) { | |
| window.location.href = '/app'; | |
| } | |
| } catch(e) {} | |
| } | |
| })(); | |
| </script> | |
| </body> | |
| </html> |