Spaces:
Running
Running
| <html lang="ar" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>إدخال الجوال</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <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"> | |
| <style> | |
| body { | |
| font-family: 'Tajawal', sans-serif; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .phone-input-container { | |
| background: rgba(255, 255, 255, 0.95); | |
| backdrop-filter: blur(10px); | |
| border-radius: 20px; | |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); | |
| } | |
| .input-field:focus { | |
| border-color: #667eea; | |
| box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3); | |
| } | |
| .submit-btn { | |
| transition: all 0.3s ease; | |
| background: linear-gradient(to right, #667eea, #764ba2); | |
| } | |
| .submit-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 25px -5px rgba(102, 126, 234, 0.4); | |
| } | |
| .country-code { | |
| background: #f8f9fa; | |
| border-top-right-radius: 12px; | |
| border-bottom-right-radius: 12px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container mx-auto px-4"> | |
| <div class="phone-input-container max-w-md w-full mx-auto p-8"> | |
| <div class="text-center mb-8"> | |
| <h1 class="text-3xl font-bold text-gray-800 mb-2">أدخل رقم الجوال</h1> | |
| <p class="text-gray-600">يرجى إدخال رقم الجوال للحصول على رمز التحقق</p> | |
| </div> | |
| <form id="phoneForm" class="space-y-6"> | |
| <div class="space-y-2"> | |
| <label for="phone" class="block text-sm font-medium text-gray-700">رقم الجوال</label> | |
| <div class="flex"> | |
| <span class="country-code px-4 py-3 text-gray-700 border border-gray-300 border-l-0 rounded-r-lg">+966</span> | |
| <input | |
| type="tel" | |
| id="phone" | |
| name="phone" | |
| required | |
| placeholder="5xxxxxxxx" | |
| class="input-field flex-1 px-4 py-3 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all" | |
| pattern="[0-9]{9}" | |
| maxlength="9" | |
| > | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">أدخل رقم الجوال بدون الرمز الدولي</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <input | |
| type="checkbox" | |
| id="terms" | |
| required | |
| class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" | |
| > | |
| <label for="terms" class="mr-2 block text-sm text-gray-700"> | |
| أوافق على <a href="#" class="text-blue-600 hover:text-blue-800">الشروط والأحكام</a> | |
| </label> | |
| </div> | |
| <button | |
| type="submit" | |
| class="submit-btn w-full py-3 px-4 rounded-lg text-white font-medium shadow-lg hover:shadow-xl transition-all duration-300" | |
| > | |
| إرسال رمز التحقق | |
| </button> | |
| </form> | |
| <div class="mt-6 text-center"> | |
| <p class="text-sm text-gray-600"> | |
| لديك حساب بالفعل؟ <a href="#" class="text-blue-600 hover:text-blue-800 font-medium">تسجيل الدخول</a> | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.getElementById('phoneForm').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const phone = document.getElementById('phone').value; | |
| if(phone.length === 9 && /^\d+$/.test(phone)) { | |
| // هنا يمكنك إضافة منطق إرسال رمز التحقق | |
| alert('تم إرسال رمز التحقق إلى الرقم: ' + phone); | |
| } else { | |
| alert('يرجى إدخال رقم جوال صحيح مكون من 9 أرقام'); | |
| } | |
| }); | |
| // تقييد الإدخال للأرقام فقط | |
| document.getElementById('phone').addEventListener('input', function(e) { | |
| this.value = this.value.replace(/[^0-9]/g, ''); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |