Spaces:
Running
Running
ابغا تسجيل الان بعدها الايميل تم السداد و الاسم الرقم الجوال بعدها الرقم السري - Initial Deployment
07dbb7b verified | <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="stylesheet" href="https://cdn.tailwindcss.com"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#10B981', | |
| secondary: '#065F46', | |
| accent: '#F59E0B' | |
| } | |
| } | |
| } | |
| } | |
| </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, #f0fdf4 0%, #dcfce7 100%); | |
| } | |
| .checkmark__circle { | |
| stroke-dasharray: 166; | |
| stroke-dashoffset: 166; | |
| stroke-width: 2; | |
| stroke-miterlimit: 10; | |
| stroke: #10B981; | |
| fill: none; | |
| animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; | |
| } | |
| .checkmark { | |
| width: 80px; | |
| height: 80px; | |
| border-radius: 50%; | |
| display: block; | |
| stroke-width: 2; | |
| stroke: #fff; | |
| stroke-miterlimit: 10; | |
| margin: 20px auto; | |
| box-shadow: inset 0px 0px 0px #10B981; | |
| animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both; | |
| } | |
| .checkmark__check { | |
| transform-origin: 50% 50%; | |
| stroke-dasharray: 48; | |
| stroke-dashoffset: 48; | |
| animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; | |
| } | |
| @keyframes stroke { | |
| 100% { | |
| stroke-dashoffset: 0; | |
| } | |
| } | |
| @keyframes scale { | |
| 0%, 100% { | |
| transform: none; | |
| } | |
| 50% { | |
| transform: scale3d(1.1, 1.1, 1); | |
| } | |
| } | |
| @keyframes fill { | |
| 100% { | |
| box-shadow: inset 0px 0px 0px 30px #10B981; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen flex items-center justify-center p-4"> | |
| <div class="w-full max-w-md"> | |
| <div class="bg-white rounded-2xl shadow-xl p-8 border border-green-100 text-center"> | |
| <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52"> | |
| <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none"/> | |
| <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/> | |
| </svg> | |
| <h1 class="text-2xl font-bold text-gray-800 mb-4">تم السداد بنجاح!</h1> | |
| <p class="text-gray-600 mb-8">تم إتمام عملية السداد بنجاح. يرجى إنشاء كلمة المرور الخاصة بك لإكمال التسجيل.</p> | |
| <form id="passwordForm" class="space-y-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2 text-right">كلمة المرور</label> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /> | |
| </svg> | |
| </div> | |
| <input type="password" id="password" required class="w-full pr-10 pl-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 outline-none transition"> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2 text-right">تأكيد كلمة المرور</label> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /> | |
| </svg> | |
| </div> | |
| <input type="password" id="passwordConfirm" required class="w-full pr-10 pl-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 outline-none transition"> | |
| </div> | |
| </div> | |
| <div> | |
| <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300 transform hover:scale-105"> | |
| إنشاء الحساب | |
| </button> | |
| </div> | |
| </form> | |
| <div class="mt-6"> | |
| <p class="text-gray-600 text-sm"> | |
| <a href="payment.html" class="text-green-600 hover:text-green-800 font-medium">الرجوع للخطوة السابقة</a> | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.getElementById('passwordForm').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const password = document.getElementById('password').value; | |
| const passwordConfirm = document.getElementById('passwordConfirm').value; | |
| if(password !== passwordConfirm) { | |
| alert('كلمة المرور غير متطابقة'); | |
| return; | |
| } | |
| if(password.length < 6) { | |
| alert('كلمة المرور يجب أن تكون 6 أحرف على الأقل'); | |
| return; | |
| } | |
| // هنا يتم إنشاء الحساب | |
| alert('تم إنشاء الحساب بنجاح!'); | |
| window.location.href = 'success.html'; | |
| }); | |
| </script> | |
| </body> | |
| </html> | |