Spaces:
Paused
Paused
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width,initial-scale=1" /> | |
| <title>الذئب الابيض · ACCESS CONTROL</title> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap'); | |
| :root { | |
| --bg: #050505; | |
| --card-bg: rgba(15, 15, 20, 0.7); | |
| --primary: #0A84FF; | |
| --primary-glow: rgba(10, 132, 255, 0.4); | |
| --accent: #5E5CE6; | |
| --text: #FFFFFF; | |
| --text-muted: #8E8E93; | |
| --border: rgba(255, 255, 255, 0.08); | |
| --error: #FF453A; | |
| --success: #32D74B; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| font-family: 'Plus Jakarta Sans', sans-serif; | |
| } | |
| body { | |
| background-color: var(--bg); | |
| color: var(--text); | |
| height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| body::before { | |
| content: ''; | |
| position: absolute; | |
| width: 50vw; | |
| height: 50vw; | |
| background: radial-gradient(circle, var(--primary-glow) 0%, transparent 70%); | |
| top: -25vw; | |
| left: -25vw; | |
| z-index: 0; | |
| filter: blur(80px); | |
| animation: float 20s infinite alternate ease-in-out; | |
| } | |
| body::after { | |
| content: ''; | |
| position: absolute; | |
| width: 40vw; | |
| height: 40vw; | |
| background: radial-gradient(circle, rgba(94, 92, 230, 0.15) 0%, transparent 70%); | |
| bottom: -20vw; | |
| right: -20vw; | |
| z-index: 0; | |
| filter: blur(80px); | |
| animation: float 25s infinite alternate-reverse ease-in-out; | |
| } | |
| @keyframes float { | |
| from { | |
| transform: translate(0, 0) scale(1); | |
| } | |
| to { | |
| transform: translate(10%, 10%) scale(1.1); | |
| } | |
| } | |
| .container { | |
| width: 100%; | |
| max-width: 420px; | |
| padding: 20px; | |
| position: relative; | |
| z-index: 10; | |
| } | |
| .login-card { | |
| background: var(--card-bg); | |
| backdrop-filter: blur(30px); | |
| -webkit-backdrop-filter: blur(30px); | |
| border: 1px solid var(--border); | |
| border-radius: 28px; | |
| padding: 48px 32px; | |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); | |
| text-align: center; | |
| animation: slideUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); | |
| } | |
| @keyframes slideUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .logo-container { | |
| position: relative; | |
| margin-bottom: 32px; | |
| display: inline-block; | |
| } | |
| .logo-img { | |
| width: 100px; | |
| height: 100px; | |
| border-radius: 30px; | |
| object-fit: cover; | |
| position: relative; | |
| z-index: 2; | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| .logo-glow { | |
| position: absolute; | |
| inset: -5px; | |
| background: linear-gradient(135deg, var(--primary), var(--accent)); | |
| border-radius: 32px; | |
| z-index: 1; | |
| filter: blur(15px); | |
| opacity: 0.6; | |
| animation: pulse 4s infinite ease-in-out; | |
| } | |
| @keyframes pulse { | |
| 0%, | |
| 100% { | |
| opacity: 0.5; | |
| filter: blur(10px); | |
| } | |
| 50% { | |
| opacity: 0.8; | |
| filter: blur(18px); | |
| } | |
| } | |
| h1 { | |
| font-size: 28px; | |
| font-weight: 800; | |
| letter-spacing: -0.03em; | |
| margin-bottom: 8px; | |
| background: linear-gradient(180deg, #FFFFFF 0%, #A1A1A6 100%); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .subtitle { | |
| color: var(--text-muted); | |
| font-size: 14px; | |
| font-weight: 500; | |
| margin-bottom: 40px; | |
| font-family: 'JetBrains Mono', monospace; | |
| text-transform: uppercase; | |
| letter-spacing: 0.1em; | |
| } | |
| .tabs { | |
| display: flex; | |
| gap: 4px; | |
| margin-bottom: 28px; | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 14px; | |
| padding: 4px; | |
| } | |
| .tab { | |
| flex: 1; | |
| padding: 12px; | |
| border: none; | |
| background: transparent; | |
| color: var(--text-muted); | |
| font-size: 14px; | |
| font-weight: 700; | |
| cursor: pointer; | |
| border-radius: 12px; | |
| transition: all 0.3s; | |
| font-family: 'Plus Jakarta Sans', sans-serif; | |
| letter-spacing: 0.05em; | |
| } | |
| .tab.active { | |
| background: var(--primary); | |
| color: white; | |
| box-shadow: 0 4px 15px rgba(10, 132, 255, 0.3); | |
| } | |
| .tab:hover:not(.active) { | |
| color: var(--text); | |
| } | |
| .form-section { | |
| display: none; | |
| } | |
| .form-section.active { | |
| display: block; | |
| } | |
| .input-group { | |
| margin-bottom: 14px; | |
| position: relative; | |
| } | |
| input { | |
| width: 100%; | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid var(--border); | |
| border-radius: 16px; | |
| padding: 16px 20px; | |
| color: var(--text); | |
| font-size: 15px; | |
| font-weight: 500; | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| outline: none; | |
| } | |
| input:focus { | |
| border-color: var(--primary); | |
| background: rgba(255, 255, 255, 0.08); | |
| box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.1); | |
| } | |
| input::placeholder { | |
| color: rgba(255, 255, 255, 0.3); | |
| } | |
| .btn { | |
| width: 100%; | |
| background: var(--primary); | |
| color: white; | |
| border: none; | |
| border-radius: 16px; | |
| padding: 16px; | |
| font-size: 16px; | |
| font-weight: 700; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| margin-top: 12px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .btn:hover { | |
| background: #0071E3; | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 20px rgba(10, 132, 255, 0.3); | |
| } | |
| .btn:active { | |
| transform: translateY(0); | |
| } | |
| .btn-secondary { | |
| background: rgba(255, 255, 255, 0.08); | |
| margin-top: 8px; | |
| } | |
| .btn-secondary:hover { | |
| background: rgba(255, 255, 255, 0.15); | |
| box-shadow: none; | |
| } | |
| .msg { | |
| margin-top: 20px; | |
| font-size: 13px; | |
| font-weight: 500; | |
| min-height: 20px; | |
| transition: color 0.3s; | |
| } | |
| .footer { | |
| margin-top: 36px; | |
| color: rgba(255, 255, 255, 0.2); | |
| font-size: 11px; | |
| font-family: 'JetBrains Mono', monospace; | |
| letter-spacing: 0.05em; | |
| } | |
| .loading-bar { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| height: 3px; | |
| background: linear-gradient(90deg, transparent, var(--primary), transparent); | |
| width: 100%; | |
| display: none; | |
| animation: loading 1.5s infinite; | |
| } | |
| @keyframes loading { | |
| 0% { | |
| transform: translateX(-100%); | |
| } | |
| 100% { | |
| transform: translateX(100%); | |
| } | |
| } | |
| .plans-info { | |
| margin-top: 16px; | |
| text-align: left; | |
| } | |
| .plan-row { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 10px 14px; | |
| border-radius: 12px; | |
| margin-bottom: 6px; | |
| background: rgba(255, 255, 255, 0.03); | |
| border: 1px solid var(--border); | |
| font-size: 13px; | |
| } | |
| .plan-name { | |
| font-weight: 700; | |
| color: var(--text); | |
| } | |
| .plan-detail { | |
| color: var(--text-muted); | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 11px; | |
| } | |
| .plan-free { | |
| border-color: rgba(50, 215, 75, 0.3); | |
| } | |
| .plan-pro { | |
| border-color: rgba(10, 132, 255, 0.3); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="login-card"> | |
| <div class="logo-container"> | |
| <div class="logo-glow"></div> | |
| <img src="https://f.top4top.io/p_37210bgwm1.jpg" alt="Logo" class="logo-img"> | |
| </div> | |
| <h1>الذئب الابيض</h1> | |
| <div class="subtitle">Bot Hosting Platform / منصة استضافة البوتات</div> | |
| <div class="tabs"> | |
| <button class="tab active" onclick="switchTab('login')">LOGIN / دخول</button> | |
| <button class="tab" onclick="switchTab('register')">REGISTER / حساب جديد</button> | |
| </div> | |
| <!-- LOGIN --> | |
| <div class="form-section active" id="loginForm"> | |
| <div class="input-group"> | |
| <input id="lu" placeholder="Username / اسم المستخدم" autocomplete="username"> | |
| </div> | |
| <div class="input-group"> | |
| <input id="lp" placeholder="Password / كلمة المرور" type="password" autocomplete="current-password"> | |
| </div> | |
| <button class="btn" onclick="doLogin()"> | |
| <span id="loginBtnText">AUTHENTICATE / تسجيل الدخول</span> | |
| <div class="loading-bar" id="loginLoad"></div> | |
| </button> | |
| </div> | |
| <!-- REGISTER --> | |
| <div class="form-section" id="registerForm"> | |
| <div id="regStep1"> | |
| <div class="input-group"> | |
| <input id="re" placeholder="Email Address / البريد الإلكتروني" type="email" autocomplete="email"> | |
| </div> | |
| <div class="input-group"> | |
| <input id="ru" placeholder="Choose a username / اختر اسم مستخدم" autocomplete="off" minlength="3" | |
| maxlength="20"> | |
| </div> | |
| <div class="input-group"> | |
| <input id="rp" placeholder="Create a password / كلمة مرور جديدة" type="password" autocomplete="new-password" | |
| minlength="6"> | |
| </div> | |
| <div class="input-group"> | |
| <input id="rp2" placeholder="Confirm password / تأكيد كلمة المرور" type="password" | |
| autocomplete="new-password"> | |
| </div> | |
| <button class="btn" onclick="doRegister()"> | |
| <span id="regBtnText">SEND VERIFICATION CODE / أرسل كود التحقق</span> | |
| <div class="loading-bar" id="regLoad"></div> | |
| </button> | |
| </div> | |
| <div id="regStep2" style="display:none; text-align:center;"> | |
| <p style="color:var(--text-muted); font-size:14px; margin-bottom: 20px;">We sent a 6-digit code to your | |
| email.<br>لقد أرسلنا كود تحقق من 6 أرقام إلى بريدك الإلكتروني.</p> | |
| <div class="input-group"> | |
| <input id="rotp" placeholder="Enter 6-digit Code / أدخل الكود" maxlength="6" | |
| style="text-align:center; font-size: 24px; letter-spacing: 10px;"> | |
| </div> | |
| <button class="btn" onclick="doVerify()"> | |
| <span id="verifyBtnText">CONFIRM REGISTRATION / تأكيد الحساب</span> | |
| <div class="loading-bar" id="verifyLoad"></div> | |
| </button> | |
| </div> | |
| <div class="plans-info"> | |
| <div class="plan-row plan-free" style="border-color: var(--success); background: rgba(50, 215, 75, 0.1);"> | |
| <span class="plan-name">🟢 UNLIMITED FREE / مجاني بالكامل</span> | |
| <span class="plan-detail">100 BOTS · 4GB RAM · AI ACCESS</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="msg" id="m"></div> | |
| <div class="footer"> | |
| © 2026 WHITE WOLF PROTOCOL [v0.1]<br> | |
| PROTECTED BY @j49_c | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| function switchTab(tab) { | |
| document.querySelectorAll('.tab').forEach((t, i) => { t.classList.toggle('active', (tab === 'login' ? i === 0 : i === 1)); }); | |
| document.getElementById('loginForm').classList.toggle('active', tab === 'login'); | |
| document.getElementById('registerForm').classList.toggle('active', tab === 'register'); | |
| document.getElementById('m').textContent = ''; | |
| } | |
| async function doLogin() { | |
| const m = document.getElementById('m'); | |
| const lb = document.getElementById('loginLoad'); | |
| const bt = document.getElementById('loginBtnText'); | |
| m.textContent = ''; lb.style.display = 'block'; bt.textContent = 'CONNECTING...'; | |
| const username = document.getElementById('lu').value.trim(); | |
| const password = document.getElementById('lp').value; | |
| try { | |
| const r = await fetch('/api/auth/login', { | |
| method: 'POST', headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ username, password }) | |
| }); | |
| const d = await r.json().catch(() => ({ success: false, message: 'Connection error' })); | |
| if (!r.ok || !d.success) { | |
| m.style.color = "var(--error)"; | |
| m.textContent = (d.message || 'Authentication Failed').toUpperCase(); | |
| lb.style.display = 'none'; bt.textContent = 'AUTHENTICATE'; | |
| return; | |
| } | |
| m.style.color = "var(--success)"; | |
| m.textContent = 'ACCESS GRANTED'; | |
| bt.textContent = 'INITIALIZING...'; | |
| setTimeout(() => { window.location.href = d.is_admin ? './admin' : './'; }, 600); | |
| } catch (e) { | |
| m.style.color = "var(--error)"; m.textContent = "CONNECTION ERROR"; | |
| lb.style.display = 'none'; bt.textContent = 'RETRY'; | |
| } | |
| } | |
| async function doRegister() { | |
| const m = document.getElementById('m'); | |
| const lb = document.getElementById('regLoad'); | |
| const bt = document.getElementById('regBtnText'); | |
| m.textContent = ''; lb.style.display = 'block'; bt.textContent = 'WORKING...'; | |
| const email = document.getElementById('re').value.trim(); | |
| const username = document.getElementById('ru').value.trim(); | |
| const password = document.getElementById('rp').value; | |
| const pass2 = document.getElementById('rp2').value; | |
| if (!email.includes('@')) { m.style.color = "var(--error)"; m.textContent = 'INVALID EMAIL / بريد غير صالح'; lb.style.display = 'none'; bt.textContent = 'SEND VERIFICATION CODE / أرسل كود التحقق'; return; } | |
| if (password !== pass2) { m.style.color = "var(--error)"; m.textContent = 'PASSWORDS MISMATCH / كلمات المرور غير متطابقة'; lb.style.display = 'none'; bt.textContent = 'SEND VERIFICATION CODE / أرسل كود التحقق'; return; } | |
| if (password.length < 6) { m.style.color = "var(--error)"; m.textContent = 'PASSWORD MIN 6 CHARACTERS / كلمة المرور قصيرة جداً'; lb.style.display = 'none'; bt.textContent = 'SEND VERIFICATION CODE / أرسل كود التحقق'; return; } | |
| try { | |
| const r = await fetch('/api/auth/register-otp', { | |
| method: 'POST', headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ email, username, password }) | |
| }); | |
| const d = await r.json().catch(() => ({ success: false, message: 'Connection error' })); | |
| if (!r.ok || !d.success) { | |
| m.style.color = "var(--error)"; | |
| m.textContent = (d.message || 'Registration Failed / فشل التسجيل').toUpperCase(); | |
| lb.style.display = 'none'; bt.textContent = 'SEND VERIFICATION CODE / أرسل كود التحقق'; | |
| return; | |
| } | |
| if (d.skip_otp) { | |
| m.style.color = "#FF9F0A"; | |
| m.textContent = d.message || 'ACCOUNT CREATED (PENDING APPROVAL) / بانتظار الموافقة'; | |
| lb.style.display = 'none'; | |
| document.getElementById('regStep1').style.display = 'none'; | |
| bt.style.display = 'none'; | |
| return; | |
| } | |
| m.style.color = "var(--success)"; | |
| m.textContent = 'OTP SENT TO EMAIL / تم إرسال كود التحقق'; | |
| document.getElementById('regStep1').style.display = 'none'; | |
| document.getElementById('regStep2').style.display = 'block'; | |
| } catch (e) { | |
| m.style.color = "var(--error)"; | |
| m.textContent = 'NETWORK FAILURE / فشل في الاتصال'; | |
| lb.style.display = 'none'; bt.textContent = 'SEND VERIFICATION CODE / أرسل كود التحقق'; | |
| } | |
| } | |
| async function doVerify() { | |
| const m = document.getElementById('m'); | |
| const lb = document.getElementById('verifyLoad'); | |
| const bt = document.getElementById('verifyBtnText'); | |
| m.textContent = ''; lb.style.display = 'block'; bt.textContent = 'VERIFYING...'; | |
| const email = document.getElementById('re').value.trim(); | |
| const code = document.getElementById('rotp').value.trim(); | |
| try { | |
| const r = await fetch('/api/auth/register-verify', { | |
| method: 'POST', headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ email, code }) | |
| }); | |
| const d = await r.json().catch(() => ({ success: false, message: 'Connection error' })); | |
| if (!r.ok || !d.success) { | |
| m.style.color = "var(--error)"; | |
| m.textContent = (d.message || 'Verification Failed').toUpperCase(); | |
| lb.style.display = 'none'; bt.textContent = 'CONFIRM REGISTRATION'; | |
| return; | |
| } | |
| m.style.color = "var(--success)"; | |
| m.textContent = 'ACCOUNT CREATED. LOGGING IN...'; | |
| bt.textContent = 'INITIALIZING...'; | |
| setTimeout(() => { window.location.href = './'; }, 600); | |
| } catch (e) { | |
| m.style.color = "var(--error)"; | |
| m.textContent = 'NETWORK FAILURE'; | |
| lb.style.display = 'none'; bt.textContent = 'CONFIRM REGISTRATION'; | |
| } | |
| } | |
| document.addEventListener('contextmenu', e => e.preventDefault()); | |
| document.onkeydown = function (e) { | |
| if (e.keyCode == 123) return false; | |
| if (e.ctrlKey && e.shiftKey && (e.keyCode == 'I'.charCodeAt(0) || e.keyCode == 'J'.charCodeAt(0) || e.keyCode == 'C'.charCodeAt(0))) return false; | |
| if (e.ctrlKey && e.keyCode == 'U'.charCodeAt(0)) return false; | |
| }; | |
| setInterval(() => { const s = performance.now(); debugger; if (performance.now() - s > 100) window.location.href = "about:blank"; }, 500); | |
| document.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') { | |
| if (document.getElementById('loginForm').classList.contains('active')) doLogin(); | |
| else doRegister(); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |