Spaces:
Running
Running
ابغا صفحة عنوان الاسم و الايميل و رقم الجوال بعدها زر الدفع بس - Initial Deployment
595a856 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="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap'); | |
| body { | |
| font-family: 'Tajawal', sans-serif; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| min-height: 100vh; | |
| } | |
| .form-glow { | |
| box-shadow: 0 0 30px rgba(102, 126, 234, 0.3); | |
| transition: all 0.3s ease; | |
| } | |
| .form-glow:hover { | |
| box-shadow: 0 0 50px rgba(102, 126, 234, 0.5); | |
| } | |
| .input-focus:focus { | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .payment-btn { | |
| background: linear-gradient(45deg, #667eea, #764ba2); | |
| background-size: 200% 200%; | |
| animation: gradientShift 3s ease infinite; | |
| transition: all 0.3s ease; | |
| } | |
| .payment-btn:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4); | |
| } | |
| @keyframes gradientShift { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| .input-icon { | |
| transition: all 0.3s ease; | |
| } | |
| .input-wrapper:hover .input-icon { | |
| transform: scale(1.1); | |
| color: #667eea; | |
| } | |
| </style> | |
| </head> | |
| <body class="flex items-center justify-center p-4"> | |
| <div class="w-full max-w-md"> | |
| <div class="bg-white rounded-3xl form-glow p-8 md:p-10" data-aos="fade-up" data-aos-duration="1000"> | |
| <!-- Header --> | |
| <div class="text-center mb-8" data-aos="fade-down" data-aos-delay="200"> | |
| <div class="w-20 h-20 bg-gradient-to-r from-purple-500 to-blue-600 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i data-feather="credit-card" class="text-white w-10 h-10"></i> | |
| </div> | |
| <h1 class="text-3xl font-bold text-gray-800 mb-2">إتمام الدفع</h1> | |
| <p class="text-gray-500">يرجى إدخال بياناتك لإتمام عملية الدفع</p> | |
| </div> | |
| <!-- Form --> | |
| <form id="paymentForm" class="space-y-6" data-aos="fade-up" data-aos-delay="400"> | |
| <!-- Name Field --> | |
| <div class="space-y-2"> | |
| <label class="block text-sm font-semibold text-gray-700" for="fullName"> | |
| الاسم الكامل | |
| </label> | |
| <div class="relative input-wrapper"> | |
| <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none"> | |
| <i data-feather="user" class="input-icon text-gray-400 w-5 h-5"></i> | |
| </div> | |
| <input type="text" | |
| id="fullName" | |
| name="fullName" | |
| class="w-full pr-12 pl-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent input-focus transition-all duration-300" | |
| placeholder="أحمد محمد العلي" | |
| required> | |
| </div> | |
| </div> | |
| <!-- Email Field --> | |
| <div class="space-y-2"> | |
| <label class="block text-sm font-semibold text-gray-700" for="email"> | |
| البريد الإلكتروني | |
| </label> | |
| <div class="relative input-wrapper"> | |
| <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none"> | |
| <i data-feather="mail" class="input-icon text-gray-400 w-5 h-5"></i> | |
| </div> | |
| <input type="email" | |
| id="email" | |
| name="email" | |
| class="w-full pr-12 pl-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent input-focus transition-all duration-300" | |
| placeholder="example@domain.com" | |
| required> | |
| </div> | |
| </div> | |
| <!-- Phone Field --> | |
| <div class="space-y-2"> | |
| <label class="block text-sm font-semibold text-gray-700" for="phone"> | |
| رقم الجوال | |
| </label> | |
| <div class="relative input-wrapper"> | |
| <div class="absolute inset-y-0 right-0 pr-3 flex items-center"> | |
| <span class="text-gray-500 text-sm font-medium">+966</span> | |
| </div> | |
| <input type="tel" | |
| id="phone" | |
| name="phone" | |
| class="w-full pr-20 pl-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent input-focus transition-all duration-300" | |
| placeholder="512345678" | |
| pattern="[0-9]{9}" | |
| maxlength="9" | |
| required> | |
| </div> | |
| </div> | |
| <!-- Submit Button --> | |
| <button type="submit" | |
| class="w-full payment-btn text-white font-bold py-4 px-6 rounded-xl text-lg shadow-lg"> | |
| <span class="flex items-center justify-center"> | |
| <i data-feather="lock" class="w-5 h-5 ml-2"></i> | |
| إتمام عملية الدفع | |
| </span> | |
| </button> | |
| <!-- Security Notice --> | |
| <div class="text-center mt-6" data-aos="fade-up" data-aos-delay="600"> | |
| <div class="inline-flex items-center text-sm text-gray-500"> | |
| <i data-feather="shield" class="w-4 h-4 ml-1 text-green-500"></i> | |
| <span>معلوماتك آمنة ومشفرة بالكامل</span> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- Loading Overlay --> | |
| <div id="loadingOverlay" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-xl p-8 flex flex-col items-center"> | |
| <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-purple-600 mb-4"></div> | |
| <p class="text-gray-700 font-semibold">جاري معالجة الدفع...</p> | |
| </div> | |
| </div> | |
| <!-- Success Modal --> | |
| <div id="successModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-xl p-8 max-w-sm w-full mx-4 text-center"> | |
| <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i data-feather="check" class="w-8 h-8 text-green-600"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">تم بنجاح!</h3> | |
| <p class="text-gray-600 mb-4">تمت عملية الدفع بنجاح. سيتم إرسال تأكيد إلى بريدك الإلكتروني.</p> | |
| <button onclick="closeModal()" class="w-full bg-purple-600 text-white py-2 px-4 rounded-lg hover:bg-purple-700 transition"> | |
| حسنًا | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize AOS | |
| AOS.init({ | |
| duration: 800, | |
| once: true | |
| }); | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Form handling | |
| document.getElementById('paymentForm').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Show loading | |
| document.getElementById('loadingOverlay').classList.remove('hidden'); | |
| // Simulate processing | |
| setTimeout(() => { | |
| document.getElementById('loadingOverlay').classList.add('hidden'); | |
| document.getElementById('successModal').classList.remove('hidden'); | |
| this.reset(); | |
| }, 2000); | |
| }); | |
| // Close modal | |
| function closeModal() { | |
| document.getElementById('successModal').classList.add('hidden'); | |
| } | |
| // Phone input formatting | |
| document.getElementById('phone').addEventListener('input', function(e) { | |
| this.value = this.value.replace(/[^0-9]/g, ''); | |
| }); | |
| // Add hover effects to inputs | |
| const inputs = document.querySelectorAll('input'); | |
| inputs.forEach(input => { | |
| input.addEventListener('focus', function() { | |
| this.parentElement.classList.add('ring-2', 'ring-purple-200', 'rounded-xl'); | |
| }); | |
| input.addEventListener('blur', function() { | |
| this.parentElement.classList.remove('ring-2', 'ring-purple-200', 'rounded-xl'); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |