Hussein2001/nodeJS
0
1<!DOCTYPE html>2<html lang="ar" dir="rtl">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>تسجيل الدخول</title>7 <style>8 * {9 margin: 0;10 padding: 0;11 box-sizing: border-box;12 }13 14 body {15 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;16 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);17 min-height: 100vh;18 display: flex;19 justify-content: center;20 align-items: center;21 padding: 20px;22 }23 24 .login-container {25 background: white;26 border-radius: 20px;27 box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);28 padding: 50px 40px;29 max-width: 450px;30 width: 100%;31 animation: fadeIn 0.8s ease-in;32 }33 34 @keyframes fadeIn {35 from {36 opacity: 0;37 transform: translateY(-30px);38 }39 to {40 opacity: 1;41 transform: translateY(0);42 }43 }44 45 .logo {46 width: 80px;47 height: 80px;48 margin: 0 auto 30px;49 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);50 border-radius: 50%;51 display: flex;52 justify-content: center;53 align-items: center;54 font-size: 40px;55 color: white;56 box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);57 }58 59 h2 {60 text-align: center;61 color: #333;62 font-size: 2em;63 margin-bottom: 10px;64 }65 66 .subtitle {67 text-align: center;68 color: #666;69 margin-bottom: 30px;70 font-size: 0.95em;71 }72 73 .form-group {74 margin-bottom: 25px;75 }76 77 label {78 display: block;79 color: #555;80 font-weight: 600;81 margin-bottom: 8px;82 font-size: 0.95em;83 }84 85 .input-wrapper {86 position: relative;87 }88 89 .input-icon {90 position: absolute;91 right: 15px;92 top: 50%;93 transform: translateY(-50%);94 color: #999;95 font-size: 1.2em;96 }97 98 input[type="text"],99 input[type="email"],100 input[type="password"] {101 width: 100%;102 padding: 15px 45px 15px 15px;103 border: 2px solid #e0e0e0;104 border-radius: 10px;105 font-size: 1em;106 transition: all 0.3s ease;107 outline: none;108 }109 110 input[type="text"]:focus,111 input[type="email"]:focus,112 input[type="password"]:focus {113 border-color: #667eea;114 box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);115 }116 117 .remember-forgot {118 display: flex;119 justify-content: space-between;120 align-items: center;121 margin-bottom: 25px;122 font-size: 0.9em;123 }124 125 .remember-me {126 display: flex;127 align-items: center;128 gap: 8px;129 color: #666;130 }131 132 .remember-me input[type="checkbox"] {133 width: 18px;134 height: 18px;135 cursor: pointer;136 }137 138 .forgot-password {139 color: #667eea;140 text-decoration: none;141 font-weight: 600;142 transition: color 0.3s ease;143 }144 145 .forgot-password:hover {146 color: #764ba2;147 }148 149 .login-btn {150 width: 100%;151 padding: 15px;152 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);153 color: white;154 border: none;155 border-radius: 10px;156 font-size: 1.1em;157 font-weight: 600;158 cursor: pointer;159 transition: transform 0.3s ease, box-shadow 0.3s ease;160 box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);161 }162 163 .login-btn:hover {164 transform: translateY(-2px);165 box-shadow: 0 8px 20px rgba(102, 126, 234, 0.5);166 }167 168 .login-btn:active {169 transform: translateY(0);170 }171 172 .divider {173 text-align: center;174 margin: 30px 0;175 position: relative;176 }177 178 .divider::before {179 content: '';180 position: absolute;181 top: 50%;182 left: 0;183 right: 0;184 height: 1px;185 background: #e0e0e0;186 }187 188 .divider span {189 background: white;190 padding: 0 15px;191 color: #999;192 position: relative;193 z-index: 1;194 }195 196 .social-login {197 display: flex;198 gap: 15px;199 margin-bottom: 25px;200 }201 202 .social-btn {203 flex: 1;204 padding: 12px;205 border: 2px solid #e0e0e0;206 border-radius: 10px;207 background: white;208 cursor: pointer;209 transition: all 0.3s ease;210 display: flex;211 align-items: center;212 justify-content: center;213 gap: 8px;214 font-weight: 600;215 color: #555;216 }217 218 .social-btn:hover {219 border-color: #667eea;220 background: #f8f9ff;221 }222 223 .signup-link {224 text-align: center;225 color: #666;226 font-size: 0.95em;227 }228 229 .signup-link a {230 color: #667eea;231 text-decoration: none;232 font-weight: 600;233 }234 235 .signup-link a:hover {236 text-decoration: underline;237 }238 239 .alert {240 padding: 12px 15px;241 border-radius: 8px;242 margin-bottom: 20px;243 display: none;244 animation: slideDown 0.3s ease;245 }246 247 @keyframes slideDown {248 from {249 opacity: 0;250 transform: translateY(-10px);251 }252 to {253 opacity: 1;254 transform: translateY(0);255 }256 }257 258 .alert.success {259 background: #d4edda;260 color: #155724;261 border: 1px solid #c3e6cb;262 }263 264 .alert.error {265 background: #f8d7da;266 color: #721c24;267 border: 1px solid #f5c6cb;268 }269 270 @media (max-width: 500px) {271 .login-container {272 padding: 40px 25px;273 }274 275 h2 {276 font-size: 1.6em;277 }278 279 .social-login {280 flex-direction: column;281 }282 }283 </style>284</head>285<body>286 <div class="login-container">287 <div class="logo">🔐</div>288 <h2>تسجيل الدخول</h2>289 <p class="subtitle">مرحباً بك مجدداً! سجل دخولك للمتابعة</p>290 291 <div id="alert" class="alert"></div>292 293 <form id="loginForm">294 <div class="form-group">295 <label for="email">البريد الإلكتروني</label>296 <div class="input-wrapper">297 <input type="email" id="email" name="email" placeholder="example@email.com" required>298 <span class="input-icon">📧</span>299 </div>300 </div>301 302 <div class="form-group">303 <label for="password">كلمة المرور</label>304 <div class="input-wrapper">305 <input type="password" id="password" name="password" placeholder="••••••••" required>306 <span class="input-icon">🔒</span>307 </div>308 </div>309 310 <div class="remember-forgot">311 <label class="remember-me">312 <input type="checkbox" name="remember">313 <span>تذكرني</span>314 </label>315 <a href="#" class="forgot-password">نسيت كلمة المرور؟</a>316 </div>317 318 <button type="submit" class="login-btn">تسجيل الدخول</button>319 </form>320 321 <div class="divider">322 <span>أو سجل الدخول باستخدام</span>323 </div>324 325 <div class="social-login">326 <button class="social-btn" onclick="socialLogin('google')">327 <span>🔍</span>328 <span>Google</span>329 </button>330 <button class="social-btn" onclick="socialLogin('github')">331 <span>💻</span>332 <span>GitHub</span>333 </button>334 </div>335 336 <div class="signup-link">337 ليس لديك حساب؟ <a href="register.html">سجل الآن</a>338 </div>339 </div>340 341 <script>342 const loginForm = document.getElementById('loginForm');343 const alertBox = document.getElementById('alert');344 345 function showAlert(message, type) {346 alertBox.textContent = message;347 alertBox.className = `alert ${type}`;348 alertBox.style.display = 'block';349 350 setTimeout(() => {351 alertBox.style.display = 'none';352 }, 4000);353 }354 355 loginForm.addEventListener('submit', async (e) => {356 e.preventDefault();357 358 const email = document.getElementById('email').value;359 const password = document.getElementById('password').value;360 361 // محاكاة عملية تسجيل الدخول362 if (email && password) {363 showAlert('جاري تسجيل الدخول...', 'success');364 365 // هنا يمكنك إضافة طلب API الحقيقي366 setTimeout(() => {367 showAlert('تم تسجيل الدخول بنجاح! جاري التحويل...', 'success');368 setTimeout(() => {369 window.location.href = '/';370 }, 1500);371 }, 1000);372 } else {373 showAlert('الرجاء إدخال البريد الإلكتروني وكلمة المرور', 'error');374 }375 });376 377 function socialLogin(provider) {378 showAlert(`جاري تسجيل الدخول عبر ${provider}...`, 'success');379 // هنا يمكنك إضافة منطق تسجيل الدخول عبر وسائل التواصل الاجتماعي380 }381 382 // إضافة زر لإظهار/إخفاء كلمة المرور383 const passwordInput = document.getElementById('password');384 const passwordIcon = passwordInput.parentElement.querySelector('.input-icon');385 386 passwordIcon.style.cursor = 'pointer';387 passwordIcon.addEventListener('click', () => {388 if (passwordInput.type === 'password') {389 passwordInput.type = 'text';390 passwordIcon.textContent = '👁️';391 } else {392 passwordInput.type = 'password';393 passwordIcon.textContent = '🔒';394 }395 });396 </script>397</body>398</html>399