175 lines
10 KiB
HTML
175 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ar" dir="rtl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>GAMEHUS — ادخل إلى عالمك</title>
|
|
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
|
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" rel="stylesheet">
|
|
<link href="static/style.css" rel="stylesheet">
|
|
</head>
|
|
<body data-page="login">
|
|
|
|
<!-- Animated background particles -->
|
|
<div class="auth-screen" id="auth-screen">
|
|
|
|
<!-- Decorative gold lines -->
|
|
<div style="position:absolute;inset:0;pointer-events:none;overflow:hidden;">
|
|
<div style="position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(212,160,23,0.5),transparent);"></div>
|
|
<div style="position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(212,160,23,0.3),transparent);"></div>
|
|
<!-- floating gold orbs -->
|
|
<div style="position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(212,160,23,0.07),transparent 70%);top:-80px;right:-80px;animation:particleDrift 8s ease-in-out infinite alternate;"></div>
|
|
<div style="position:absolute;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(212,160,23,0.05),transparent 70%);bottom:60px;left:-40px;animation:particleDrift 10s ease-in-out infinite alternate-reverse;"></div>
|
|
</div>
|
|
|
|
<div style="width:100%;max-width:460px;padding:16px;position:relative;z-index:1;">
|
|
<div class="auth-card">
|
|
|
|
<!-- Logo -->
|
|
<div class="auth-logo">
|
|
<span class="logo-gem">💎</span>
|
|
<div class="brand gold-text">GAMEHUS</div>
|
|
<p style="color:var(--text-muted);font-size:0.85rem;margin-top:6px;">منصة الألعاب الفاخرة</p>
|
|
</div>
|
|
|
|
<!-- Tab Switcher: Login / Register -->
|
|
<div class="auth-tabs" role="tablist">
|
|
<button class="auth-tab active" id="tab-login" onclick="switchTab('login')">تسجيل الدخول</button>
|
|
<button class="auth-tab" id="tab-register" onclick="switchTab('register')">حساب جديد</button>
|
|
</div>
|
|
|
|
<!-- LOGIN FORM -->
|
|
<form id="form-login" onsubmit="handleLogin(event)">
|
|
<div class="form-group">
|
|
<label class="form-label">البريد الإلكتروني أو اسم المستخدم</label>
|
|
<input type="text" id="login-id" class="form-input" placeholder="your@email.com" required autocomplete="username">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">كلمة المرور</label>
|
|
<div style="position:relative;">
|
|
<input type="password" id="login-pass" class="form-input" placeholder="••••••••" required autocomplete="current-password">
|
|
<button type="button" onclick="togglePass('login-pass',this)" style="position:absolute;left:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:0.9rem;">👁</button>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;">
|
|
<label style="display:flex;align-items:center;gap:7px;font-size:0.82rem;color:var(--text-muted);cursor:pointer;">
|
|
<input type="checkbox" id="remember-me" style="accent-color:var(--gold-mid);width:14px;height:14px;"> تذكرني
|
|
</label>
|
|
<a href="#" style="font-size:0.82rem;color:var(--gold);font-weight:700;" onclick="Toast.show('سيتم إضافة استعادة كلمة المرور قريباً','info');return false;">نسيت كلمة المرور؟</a>
|
|
</div>
|
|
<div id="login-error" style="display:none;background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);color:#f87171;padding:10px 14px;border-radius:8px;font-size:0.85rem;margin-bottom:14px;"></div>
|
|
<button type="submit" class="btn btn-gold btn-lg" style="width:100%;justify-content:center;" id="login-btn">
|
|
<span id="login-btn-text">🔑 دخول</span>
|
|
</button>
|
|
</form>
|
|
|
|
<!-- REGISTER FORM (hidden by default) -->
|
|
<form id="form-register" style="display:none;" onsubmit="handleRegister(event)">
|
|
<div class="form-group">
|
|
<label class="form-label">اسم المستخدم</label>
|
|
<input type="text" id="reg-username" class="form-input" placeholder="اختر اسماً فريداً" required minlength="3" autocomplete="username">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">البريد الإلكتروني</label>
|
|
<input type="email" id="reg-email" class="form-input" placeholder="your@email.com" required autocomplete="email">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">كلمة المرور</label>
|
|
<div style="position:relative;">
|
|
<input type="password" id="reg-pass" class="form-input" placeholder="••••••••" required minlength="6" autocomplete="new-password">
|
|
<button type="button" onclick="togglePass('reg-pass',this)" style="position:absolute;left:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:0.9rem;">👁</button>
|
|
</div>
|
|
</div>
|
|
<div class="form-group" style="margin-bottom:20px;">
|
|
<label class="form-label">تأكيد كلمة المرور</label>
|
|
<input type="password" id="reg-pass2" class="form-input" placeholder="••••••••" required minlength="6" autocomplete="new-password">
|
|
</div>
|
|
<label style="display:flex;align-items:flex-start;gap:8px;font-size:0.82rem;color:var(--text-muted);cursor:pointer;margin-bottom:18px;">
|
|
<input type="checkbox" required style="accent-color:var(--gold-mid);width:14px;height:14px;margin-top:2px;">
|
|
<span>أوافق على <a href="terms.html" style="color:var(--gold);">شروط الاستخدام</a> و<a href="privacy.html" style="color:var(--gold);">سياسة الخصوصية</a></span>
|
|
</label>
|
|
<div id="reg-error" style="display:none;background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);color:#f87171;padding:10px 14px;border-radius:8px;font-size:0.85rem;margin-bottom:14px;"></div>
|
|
<button type="submit" class="btn btn-gold btn-lg" style="width:100%;justify-content:center;">✨ إنشاء الحساب</button>
|
|
<p style="text-align:center;font-size:0.78rem;color:var(--text-muted);margin-top:14px;">التسجيل مجاني — تحصل على 1,200 فضة فور الانضمام 🔘</p>
|
|
</form>
|
|
|
|
</div>
|
|
|
|
<!-- Quick test accounts hint -->
|
|
<div style="margin-top:16px;background:rgba(212,160,23,0.06);border:1px solid rgba(212,160,23,0.15);border-radius:12px;padding:14px;font-size:0.78rem;color:var(--text-muted);text-align:center;">
|
|
<div style="font-weight:700;color:var(--gold-mid);margin-bottom:6px;">🧪 حسابات الاختبار</div>
|
|
<div style="display:flex;gap:8px;justify-content:center;flex-wrap:wrap;">
|
|
<span onclick="fillLogin('admin@gamehus.com','admin123')" style="cursor:pointer;color:var(--gold);text-decoration:underline;text-underline-offset:2px;">Admin</span>
|
|
<span style="color:var(--text-faint)">·</span>
|
|
<span onclick="fillLogin('vip@gamehus.com','vip123')" style="cursor:pointer;color:var(--gold);text-decoration:underline;text-underline-offset:2px;">VIP</span>
|
|
<span style="color:var(--text-faint)">·</span>
|
|
<span onclick="fillLogin('test@gamehus.com','test123')" style="cursor:pointer;color:var(--gold);text-decoration:underline;text-underline-offset:2px;">Test</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="static/script.js"></script>
|
|
<script>
|
|
// If already logged in → redirect
|
|
if (Auth.getSession()) window.location.replace('index.html');
|
|
// open register tab if hash says so
|
|
if (location.hash === '#register') { switchTab('register'); history.replaceState(null,'',location.pathname); }
|
|
|
|
function switchTab(tab) {
|
|
const isLogin = tab === 'login';
|
|
document.getElementById('tab-login').classList.toggle('active', isLogin);
|
|
document.getElementById('tab-register').classList.toggle('active', !isLogin);
|
|
document.getElementById('form-login').style.display = isLogin ? 'block' : 'none';
|
|
document.getElementById('form-register').style.display = isLogin ? 'none' : 'block';
|
|
}
|
|
|
|
function handleLogin(e) {
|
|
e.preventDefault();
|
|
const id = document.getElementById('login-id').value.trim();
|
|
const pass = document.getElementById('login-pass').value;
|
|
const rem = document.getElementById('remember-me').checked;
|
|
const errEl = document.getElementById('login-error');
|
|
const btn = document.getElementById('login-btn-text');
|
|
btn.textContent = '⏳ جارٍ التحقق...';
|
|
setTimeout(() => {
|
|
const result = Auth.login(id, pass, rem);
|
|
if (result.ok) {
|
|
btn.textContent = '✅ تم الدخول!';
|
|
Toast.show('مرحباً بك ' + result.user.username + ' 👑', 'gold');
|
|
setTimeout(() => window.location.replace('index.html'), 800);
|
|
} else {
|
|
errEl.textContent = result.msg;
|
|
errEl.style.display = 'block';
|
|
btn.textContent = '🔑 دخول';
|
|
document.getElementById('login-pass').value = '';
|
|
}
|
|
}, 500);
|
|
}
|
|
|
|
function handleRegister(e) {
|
|
e.preventDefault();
|
|
const p1 = document.getElementById('reg-pass').value;
|
|
const p2 = document.getElementById('reg-pass2').value;
|
|
const errEl = document.getElementById('reg-error');
|
|
if (p1 !== p2) { errEl.textContent = 'كلمتا المرور غير متطابقتين'; errEl.style.display = 'block'; return; }
|
|
errEl.style.display = 'none';
|
|
Toast.show('🚧 التسجيل سيتم ربطه بـ Firebase قريباً', 'gold');
|
|
}
|
|
|
|
function fillLogin(email, pass) {
|
|
document.getElementById('login-id').value = email;
|
|
document.getElementById('login-pass').value = pass;
|
|
document.getElementById('tab-login').click();
|
|
switchTab('login');
|
|
}
|
|
|
|
function togglePass(inputId, btn) {
|
|
const inp = document.getElementById(inputId);
|
|
if (inp.type === 'password') { inp.type = 'text'; btn.textContent = '🙈'; }
|
|
else { inp.type = 'password'; btn.textContent = '👁'; }
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|