| <!doctype html> |
| <html lang="ar" dir="rtl"> |
| <head> |
| <meta charset="utf-8"/> |
| <meta name="viewport" content="width=device-width,initial-scale=1"/> |
| <title>تسجيل الدخول — منصة محرك</title> |
| <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&family=Inter:wght@400;600;700&display=swap" rel="stylesheet"> |
| <link rel="stylesheet" href="/theme.css?v=moharek2025"/> |
| <style> |
| body { display:flex; align-items:center; justify-content:center; min-height:100vh; position:relative; } |
| .login-container { width:100%; max-width:520px; padding:20px; position:relative; z-index:10; } |
| .login-card { background:var(--glass-bg); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); border:1px solid var(--glass-border); border-radius:32px; padding:56px; transition:all .6s cubic-bezier(.16,1,.3,1); } |
| .login-card:hover { border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.05); } |
| .logo { text-align:center; margin-bottom:40px; } |
| .logo img { height:48px; filter:drop-shadow(0 0 20px rgba(251,191,36,.3)); } |
| h1 { font-size:36px; font-weight:900; color:#fff; text-align:center; margin-bottom:12px; letter-spacing:-1px; } |
| .subtitle { text-align:center; color:var(--text-muted); font-size:16px; margin-bottom:40px; line-height:1.6; } |
| .tabs { display:flex; gap:12px; margin-bottom:40px; background:rgba(0,0,0,.2); padding:6px; border-radius:100px; } |
| .tab { flex:1; padding:14px 24px; background:transparent; border:none; color:var(--text-muted); border-radius:100px; cursor:pointer; font-size:15px; font-weight:700; transition:all .3s; font-family:'Cairo',sans-serif; } |
| .tab.active { background:#c8f04e; color:#071f21; box-shadow:0 4px 12px rgba(200,240,78,.3); } |
| .form-group { margin-bottom:24px; } |
| .form-group label { display:block; font-size:14px; font-weight:700; color:#fff; margin-bottom:10px; } |
| .form-group input { width:100%; padding:16px 20px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,0.08); border-radius:16px; color:#fff; font-size:15px; font-family:'Cairo',sans-serif; transition:all .3s; } |
| .form-group input:focus { outline:none; border-color:#c8f04e; background:rgba(255,255,255,.08); box-shadow:0 0 0 4px rgba(200,240,78,.1); } |
| .form-group input::placeholder { color:rgba(255,255,255,0.3); } |
| .btn-submit { width:100%; padding:18px; background:#c8f04e; color:#071f21; border:none; border-radius:100px; font-size:17px; font-weight:800; cursor:pointer; transition:all .4s; font-family:'Cairo',sans-serif; margin-top:12px; } |
| .btn-submit:hover { transform:scale(1.02); box-shadow:0 12px 32px rgba(200,240,78,.4); } |
| .btn-submit:disabled { opacity:.5; cursor:not-allowed; transform:none; } |
| .error-msg { background:rgba(255,77,77,.15); border:1px solid #ff4d4d; color:#ff4d4d; padding:14px 18px; border-radius:16px; font-size:14px; margin-bottom:24px; display:none; font-weight:600; } |
| .success-msg { background:rgba(74,222,128,.15); border:1px solid #4ade80; color:#4ade80; padding:14px 18px; border-radius:16px; font-size:14px; margin-bottom:24px; display:none; font-weight:600; } |
| .back-link { text-align:center; margin-top:28px; } |
| .back-link a { color:#c8f04e; text-decoration:none; font-size:15px; font-weight:600; transition:.3s; } |
| .back-link a:hover { color:#fff; } |
| .form-section { display:none; } |
| .form-section.active { display:block; } |
| </style> |
| </head> |
| <body> |
| <div class="bg-mesh"></div> |
| <div class="bg-dot-grid"></div> |
| |
| <div class="login-container"> |
| <div class="login-card"> |
| <div class="logo"> |
| <img src="./moharek-logo-v2.svg" alt="Moharek" style="height:48px;filter:drop-shadow(0 0 20px rgba(251,191,36,.3))" onerror="document.getElementById('logoFallback').style.display='block'" /> |
| <div id="logoFallback" style="display:none;font-size:32px;font-weight:900;color:#5DB85C;background:linear-gradient(135deg,#E05040,#5DB85C);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">م</div> |
| </div> |
| <h1>مرحباً بك في محرك</h1> |
| <p class="subtitle">منصة تحسين محركات البحث بالذكاء الاصطناعي</p> |
|
|
| <div class="tabs"> |
| <button class="tab active" onclick="switchTab('login')">تسجيل الدخول</button> |
| <button class="tab" onclick="switchTab('register')">إنشاء حساب</button> |
| </div> |
|
|
| <div class="error-msg" id="errorMsg"></div> |
| <div class="success-msg" id="successMsg"></div> |
|
|
| <div class="form-section active" id="loginForm"> |
| <form onsubmit="handleLogin(event)"> |
| <div class="form-group"> |
| <label>البريد الإلكتروني</label> |
| <input type="email" id="loginEmail" required placeholder="example@domain.com"/> |
| </div> |
| <div class="form-group"> |
| <label>كلمة المرور</label> |
| <input type="password" id="loginPassword" required placeholder="••••••••"/> |
| </div> |
| <button type="submit" class="btn-submit" id="loginBtn">تسجيل الدخول</button> |
| </form> |
| </div> |
|
|
| <div class="form-section" id="registerForm"> |
| <form onsubmit="handleRegister(event)"> |
| <div class="form-group"> |
| <label>البريد الإلكتروني</label> |
| <input type="email" id="regEmail" required placeholder="example@domain.com"/> |
| </div> |
| <div class="form-group"> |
| <label>كلمة المرور</label> |
| <input type="password" id="regPassword" required placeholder="••••••••" minlength="6"/> |
| </div> |
| <div class="form-group"> |
| <label>تأكيد كلمة المرور</label> |
| <input type="password" id="regPasswordConfirm" required placeholder="••••••••" minlength="6"/> |
| </div> |
| <button type="submit" class="btn-submit" id="regBtn">إنشاء حساب</button> |
| </form> |
| </div> |
|
|
| <div class="back-link"> |
| <a href="/">← العودة للصفحة الرئيسية</a> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| const API = '/api'; |
| |
| const params = new URLSearchParams(window.location.search); |
| const mode = params.get('mode') || 'login'; |
| if (mode === 'signup') { |
| switchTab('register'); |
| } |
| |
| function switchTab(tab) { |
| const tabs = document.querySelectorAll('.tab'); |
| tabs.forEach(t => t.classList.remove('active')); |
| |
| const clickedTab = event?.target; |
| if (clickedTab) clickedTab.classList.add('active'); |
| |
| document.querySelectorAll('.form-section').forEach(f => f.classList.remove('active')); |
| if (tab === 'login') { |
| document.getElementById('loginForm').classList.add('active'); |
| } else { |
| document.getElementById('registerForm').classList.add('active'); |
| } |
| hideMessages(); |
| } |
| |
| function showError(msg) { |
| document.getElementById('errorMsg').textContent = msg; |
| document.getElementById('errorMsg').style.display = 'block'; |
| document.getElementById('successMsg').style.display = 'none'; |
| } |
| |
| function showSuccess(msg) { |
| document.getElementById('successMsg').textContent = msg; |
| document.getElementById('successMsg').style.display = 'block'; |
| document.getElementById('errorMsg').style.display = 'none'; |
| } |
| |
| function hideMessages() { |
| document.getElementById('errorMsg').style.display = 'none'; |
| document.getElementById('successMsg').style.display = 'none'; |
| } |
| |
| async function handleLogin(e) { |
| e.preventDefault(); |
| hideMessages(); |
| |
| const email = document.getElementById('loginEmail').value; |
| const password = document.getElementById('loginPassword').value; |
| const btn = document.getElementById('loginBtn'); |
| |
| btn.disabled = true; |
| btn.textContent = 'جارٍ تسجيل الدخول...'; |
| |
| try { |
| const res = await fetch(API + '/users/login', { |
| method: 'POST', |
| headers: { 'Content-Type': 'application/json' }, |
| body: JSON.stringify({ email, password }) |
| }); |
| |
| const data = await res.json(); |
| |
| if (data.ok && data.token) { |
| console.log('Login successful, token:', data.token.substring(0, 20) + '...'); |
| localStorage.setItem('token', data.token); |
| localStorage.setItem('user', JSON.stringify(data.user || {})); |
| console.log('Token stored in localStorage'); |
| |
| showSuccess('تم تسجيل الدخول بنجاح! جاري التحويل...'); |
| |
| setTimeout(() => { |
| console.log('Redirecting to portal...'); |
| |
| window.location.replace('/portal.html'); |
| }, 1500); |
| } else { |
| showError(data.error || 'فشل تسجيل الدخول'); |
| btn.disabled = false; |
| btn.textContent = 'تسجيل الدخول'; |
| } |
| } catch (err) { |
| console.error('Login error:', err); |
| showError('خطأ في الاتصال بالخادم'); |
| btn.disabled = false; |
| btn.textContent = 'تسجيل الدخول'; |
| } |
| } |
| |
| async function handleRegister(e) { |
| e.preventDefault(); |
| hideMessages(); |
| |
| const email = document.getElementById('regEmail').value; |
| const password = document.getElementById('regPassword').value; |
| const passwordConfirm = document.getElementById('regPasswordConfirm').value; |
| const btn = document.getElementById('regBtn'); |
| |
| if (password !== passwordConfirm) { |
| showError('كلمات المرور غير متطابقة'); |
| return; |
| } |
| |
| if (password.length < 6) { |
| showError('كلمة المرور يجب أن تكون 6 أحرف على الأقل'); |
| return; |
| } |
| |
| btn.disabled = true; |
| btn.textContent = 'جارٍ إنشاء الحساب...'; |
| |
| try { |
| const res = await fetch(API + '/users/register', { |
| method: 'POST', |
| headers: { 'Content-Type': 'application/json' }, |
| body: JSON.stringify({ email, password }) |
| }); |
| |
| const data = await res.json(); |
| |
| if (data.ok && data.token) { |
| localStorage.setItem('token', data.token); |
| localStorage.setItem('user', JSON.stringify(data.user || {})); |
| |
| showSuccess('تم إنشاء الحساب بنجاح! جاري التحويل...'); |
| |
| setTimeout(() => { |
| |
| window.location.replace('/portal.html'); |
| }, 1500); |
| } else { |
| showError(data.error || 'فشل إنشاء الحساب'); |
| btn.disabled = false; |
| btn.textContent = 'إنشاء حساب'; |
| } |
| } catch (err) { |
| console.error('Register error:', err); |
| showError('خطأ في الاتصال بالخادم'); |
| btn.disabled = false; |
| btn.textContent = 'إنشاء حساب'; |
| } |
| } |
| </script> |
| </body> |
| </html> |
|
|
