| <!DOCTYPE html> |
| <html lang="ar" dir="rtl"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport"content="width=device-width, initial-scale=1.0"> |
| <title>تسجيل الدخول | كاش اب</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap" rel="stylesheet"> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| fontFamily: { |
| 'tajawal': ['Tajawal', 'sans-serif'] |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| body { |
| font-family: 'Tajawal', sans-serif; |
| background: linear-gradient(135deg, #fefefe 0%, #f0f0f0 100%); |
| } |
| .form-container { |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15); |
| } |
| .floating-input:focus + label, .floating-input:not(:placeholder-shown) + label { |
| transform: translateY(-2rem) scale(0.85); |
| color: #ef4444; |
| } |
| .floating-input:focus { |
| border-color: #ef4444; |
| } |
| .auth-tabs button.active { |
| color: #ef4444; |
| border-bottom: 2px solid #ef4444; |
| } |
| </style> |
| </head> |
| <body class="min-h-screen flex items-center justify-center p-4"> |
| <div class="w-full max-w-md"> |
| <div class="text-center mb-10"> |
| <h1 class="text-3xl font-bold text-gray-800">مرحباً بك في <span class="text-red-500">كاش اب</span></h1> |
| <p class="text-gray-600 mt-2">منصة آمنة لإدارة حسابك</p> |
| </div> |
| <div class="bg-white rounded-2xl form-container overflow-hidden"> |
| <div class="auth-tabs flex border-b"> |
| <button id="login-tab" class="flex-1 py-4 font-medium active">تسجيل الدخول</button> |
| <button id="register-tab" class="flex-1 py-4 font-medium">إنشاء حساب</button> |
| </div> |
| |
| <div class="p-8"> |
| |
| <form id="login-form" class="tab-content"> |
| <div class="mb-6 relative"> |
| <input type="email" id="login-email" class="floating-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none peer placeholder-transparent" placeholder=" " required> |
| <label for="login-email" class="absolute right-4 top-3 text-gray-500 transition-all duration-200 peer-placeholder-shown:top-3 peer-placeholder-shown:text-base peer-focus:top-[-0.5rem] peer-focus:text-sm">البريد الإلكتروني</label> |
| </div> |
| |
| <div class="mb-6 relative"> |
| <input type="password" id="login-password" class="floating-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none peer placeholder-transparent" placeholder=" " required> |
| <label for="login-password" class="absolute right-4 top-3 text-gray-500 transition-all duration-200 peer-placeholder-shown:top-3 peer-placeholder-shown:text-base peer-focus:top-[-0.5rem] peer-focus:text-sm">كلمة المرور</label> |
| </div> |
| |
| <div class="flex items-center justify-between mb-6"> |
| <div class="flex items-center"> |
| <input id="remember-me" type="checkbox" class="w-4 h-4 text-red-500 border-gray-300 rounded focus:ring-red-400"> |
| <label for="remember-me" class="mr-2 text-sm text-gray-700">تذكرني</label> |
| </div> |
| <a href="#" class="text-sm text-red-500 hover:text-red-700">نسيت كلمة المرور؟</a> |
| </div> |
| <button type="submit" class="w-full bg-red-500 hover:bg-red-600 text-white py-3 rounded-lg font-medium transition duration-300">تسجيل الدخول</button> |
| <div class="mt-6 text-center"> |
| <p class="text-gray-600">أو سجل باستخدام</p> |
| <div class="flex justify-center space-x-4 mt-4"> |
| <button type="button" class="p-2 border border-gray-300 rounded-full hover:bg-gray-50"> |
| <svg class="w-5 h-5 text-gray-700" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm3 8h-1.35c-.538 0-.65.221-.65.778v1.222h2l-.209 2h-1.791v7h-3v-7h-2v-2h2v-2.308c0-1.769.931-2.692 3.029-2.692h1.971v3z"/></svg> |
| </button> |
| <button type="button" class="p-2 border border-gray-300 rounded-full hover:bg-gray-50"> |
| <svg class="w-5 h-5 text-gray-700" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2.033 16.01c.564-1.789 1.632-3.932 1.821-4.474.273-.787-.211-1.136-1.74.209l-.34-.64c1.744-1.897 5.335-2.326 4.113.613-.763 1.835-1.309 3.074-1.621 4.03-.455 1.393.694.723 1.596-.35 2.05-2.442 2.194-5.142.854-5.007-1.814.182-3.429 2.406-3.429 2.406s-1.057-1.867-3.429-2.406c-1.34-.135-1.196 2.565.854 5.007.902 1.073 2.051 1.743 1.596.35-.312-.956-.858-2.195-1.621-4.03-1.242-2.94-4.833-2.51-3.089.387-.211.321-.34.64-.34.64.571-1.035 1.493-2.278 2.033-4.01.191-.542 1.259-2.685 1.821-4.474.444.697.86 1.835.86 1.835s1.596-2.278 3.429-2.278c1.833 0 3.429 2.278 3.429 2.278s.416-1.138.86-1.835c.54-.789 1.462-2.032 2.033-4.01.561 1.732 1.629 3.975 1.821 4.01.539 1.732 1.461 3.975 2.033 4.01.539 1.732 1.461 3.975 2.033 4.01.539 1.732 1.461 3.975 2.033 4.01-.191.542-1.259 2.685-1.821 4.474-.444-.697-.86-1.835-.86-1.835s-1.596 2.278-3.429 2.278c-1.833 0-3.429-2.278-3.429-2.278s-.416 1.138-.86 1.835c-.54.789-1.462 2.032-2.033 4.01-.561-1.732-1.629-3.975-1.821-4.01-.539-1.732-1.461-3.975-2.033-4.01-.539-1.732-1.461-3.975-2.033-4.01.191-.542 1.259-2.685 1.821-4.474.444.697.86 1.835.86 1.835s1.596-2.278 3.429-2.278c1.833 0 3.429 2.278 3.429 2.278s.416-1.138.86-1.835c.54-.789 1.462-2.032 2.033-4.01.561 1.732 1.629 3.975 1.821 4.01.539 1.732 1.461 3.975 2.033 4.01.539 1.732 1.461 3.975 2.033 4.01-.191.542-1.259 2.685-1.821 4.474-.444-.697-.86-1.835-.86-1.835s-1.596 2.278-3.429 2.278c-1.833 0-3.429-2.278-3.429-2.278s-.416 1.138-.86 1.835c-.54.789-1.462 2.032-2.033 4.01-.561-1.732-1.629-3.975-1.821-4.01-.539-1.732-1.461-3.975-2.033-4.01-.539-1.732-1.461-3.975-2.033-4.01.191-.542 1.259-2.685 1.821-4.474.444.697.86 1.835.86 1.835s1.596-2.278 3.429-2.278c1.833 0 3.429 2.278 3.429 2.278s.416-1.138.86-1.835c.54-.789 1.462-2.032 2.033-4.01.561 1.732 1.629 3.975 1.821 4.01.539 1.732 1.461 3.975 2.033 4.01.539 1.732 1.461 3.975 2.033 4.01-.191.542-1.259 2.685-1.821 4.474-.444-.697-.86-1.835-.86-1.835s-1.596 2.278-3.429 2.278c-1.833 0-3.429-2.278-3.429-2.278s-.416 1.138-.86 1.835c-.54.789-1.462 2.032-2.033 4.01-.561-1.732-1.629-3.975-1.821-4.01-.539-1.732-1.461-3.975-2.033-4.01-.539-1.732-1.461-3.975-2.033-4.01.191-.542 1.259-2.685 1.821-4.474.444.697.86 1.835.86 1.835s1.596-2.278 3.429-2.278c1.833 0 3.429 2.278 3.429 2.278s.416-1.138.86-1.835c.54-.789 1.462-2.032 2.033-4.01.561 1.732 1.629 3.975 1.821 4.01.539 1.732 1.461 3.975 2.033 4.01.539 1.732 1.461 3.975 2.033 4.01-.191.542-1.259 2.685-1.821 4.474-.444-.697-.86-1.835-.86-1.835s-1.596 2.278-3.429 2.278c-1.833 0-3.429-2.278-3.429-2.278s-.416 1.138-.86 1.835c-.54.789-1.462 2.032-2.033 4.01-.561-1.732-1.629-3.975-1.821-4.01-.539-1.732-1.461-3.975-2.033-4.01-.539-1.732-1.461-3.975-2.033- |
| </body> |
| </html> |
