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="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>💳</text></svg>"> | |
| <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://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900&display=swap'); | |
| body { | |
| font-family: 'Cairo', sans-serif; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| min-height: 100vh; | |
| } | |
| .card-glow { | |
| box-shadow: 0 0 20px rgba(102, 126, 234, 0.3); | |
| } | |
| .input-focus:focus { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 25px rgba(102, 126, 234, 0.2); | |
| } | |
| .btn-hover:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4); | |
| } | |
| .floating-card { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .security-shield { | |
| background: linear-gradient(45deg, #667eea, #764ba2); | |
| background-size: 400% 400%; | |
| animation: gradient 3s ease infinite; | |
| } | |
| @keyframes gradient { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| .visa-logo { | |
| background: linear-gradient(135deg, #1a1f71, #0f4c75); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Background Animation --> | |
| <div class="fixed inset-0 overflow-hidden"> | |
| <div class="absolute -top-40 -right-40 w-80 h-80 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div> | |
| <div class="absolute -bottom-40 -left-40 w-80 h-80 bg-yellow-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div> | |
| <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-pink-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000"></div> | |
| </div> | |
| <!-- Main Container --> | |
| <div class="relative z-10 flex items-center justify-center min-h-screen p-4"> | |
| <div class="w-full max-w-6xl"> | |
| <!-- Header --> | |
| <div class="text-center mb-8" data-aos="fade-down"> | |
| <h1 class="text-4xl md:text-5xl font-bold text-white mb-2">بوابة الدفع الآمنة</h1> | |
| <p class="text-purple-200 text-lg">أتمم عملية الدفع بأمان وسرية تامة</p> | |
| </div> | |
| <!-- Payment Container --> | |
| <div class="grid lg:grid-cols-2 gap-8"> | |
| <!-- Payment Form --> | |
| <div class="bg-white/95 backdrop-blur-sm rounded-2xl shadow-2xl p-8 card-glow" data-aos="fade-right"> | |
| <!-- Security Badge --> | |
| <div class="flex items-center justify-between mb-6"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="security-shield p-2 rounded-full"> | |
| <i data-feather="shield" class="w-6 h-6 text-white"></i> | |
| </div> | |
| <span class="text-sm font-medium text-gray-600">مدعوم بتشفير 256-bit SSL</span> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <i data-feather="credit-card" class="w-8 h-8 text-blue-600"></i> | |
| <span class="visa-logo text-2xl font-bold">VISA</span> | |
| </div> | |
| </div> | |
| <form id="paymentForm" class="space-y-6"> | |
| <!-- Card Number --> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">رقم البطاقة</label> | |
| <div class="relative"> | |
| <input type="text" id="cardNumber" maxlength="19" placeholder="1234 5678 9012 3456" | |
| class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent input-focus transition-all duration-300"> | |
| <div class="absolute left-3 top-1/2 transform -translate-y-1/2"> | |
| <i data-feather="credit-card" class="w-5 h-5 text-gray-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card Holder --> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">اسم حامل البطاقة</label> | |
| <input type="text" id="cardHolder" placeholder="أحمد محمد" | |
| class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent input-focus transition-all duration-300"> | |
| </div> | |
| <!-- Expiry & CVV --> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">تاريخ الانتهاء</label> | |
| <input type="text" id="expiry" maxlength="5" placeholder="MM/YY" | |
| class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent input-focus transition-all duration-300"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">رمز CVV</label> | |
| <div class="relative"> | |
| <input type="password" id="cvv" maxlength="4" placeholder="123" | |
| class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent input-focus transition-all duration-300"> | |
| <button type="button" class="absolute left-3 top-1/2 transform -translate-y-1/2" onclick="toggleCvv()"> | |
| <i data-feather="eye" class="w-5 h-5 text-gray-400 hover:text-purple-600"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Amount --> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">المبلغ</label> | |
| <div class="relative"> | |
| <input type="number" id="amount" placeholder="0.00" | |
| class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent input-focus transition-all duration-300 pr-12"> | |
| <span class="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-500 font-medium">ر.س</span> | |
| </div> | |
| </div> | |
| <!-- Payment Button --> | |
| <button type="submit" id="payButton" | |
| class="w-full bg-gradient-to-r from-purple-600 to-blue-600 text-white font-bold py-4 px-6 rounded-lg btn-hover transition-all duration-300 flex items-center justify-center"> | |
| <span id="buttonText">إتمام الدفع الآن</span> | |
| <div id="loadingSpinner" class="hidden ml-2"> | |
| <div class="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div> | |
| </div> | |
| </button> | |
| </form> | |
| <!-- Security Features --> | |
| <div class="mt-6 flex items-center justify-center space-x-4 text-sm text-gray-500"> | |
| <div class="flex items-center space-x-1"> | |
| <i data-feather="lock" class="w-4 h-4"></i> | |
| <span>آمن 100%</span> | |
| </div> | |
| <div class="flex items-center space-x-1"> | |
| <i data-feather="clock" class="w-4 h-4"></i> | |
| <span>معالجة فورية</span> | |
| </div> | |
| <div class="flex items-center space-x-1"> | |
| <i data-feather="check-circle" class="w-4 h-4"></i> | |
| <span>مضمون</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Payment Summary --> | |
| <div class="space-y-6" data-aos="fade-left"> | |
| <!-- Virtual Card Preview --> | |
| <div class="bg-gradient-to-br from-purple-600 to-blue-600 rounded-2xl p-6 text-white floating-card"> | |
| <div class="flex justify-between items-start mb-8"> | |
| <div> | |
| <p class="text-purple-200 text-sm">البطاقة الافتراضية</p> | |
| <p class="text-2xl font-bold mt-1">**** **** **** <span id="last4">1234</span></p> | |
| </div> | |
| <i data-feather="wifi" class="w-8 h-8 text-purple-200"></i> | |
| </div> | |
| <div class="flex justify-between items-end"> | |
| <div> | |
| <p class="text-purple-200 text-sm">اسم حامل البطاقة</p> | |
| <p id="previewName" class="font-bold">أحمد محمد</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-purple-200 text-sm">ينتهي في</p> | |
| <p id="previewExpiry" class="font-bold">12/25</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Transaction Details --> | |
| <div class="bg-white/95 backdrop-blur-sm rounded-2xl shadow-2xl p-6"> | |
| <h3 class="text-lg font-bold text-gray-800 mb-4">تفاصيل المعاملة</h3> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">المبلغ الإجمالي</span> | |
| <span class="font-bold" id="totalAmount">0.00 ر.س</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">رسوم المعالجة</span> | |
| <span class="font-bold">0.00 ر.س</span> | |
| </div> | |
| <div class="border-t pt-3"> | |
| <div class="flex justify-between"> | |
| <span class="text-lg font-bold">المبلغ النهائي</span> | |
| <span class="text-lg font-bold text-purple-600" id="finalAmount">0.00 ر.س</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Support --> | |
| <div class="bg-white/95 backdrop-blur-sm rounded-2xl shadow-2xl p-6"> | |
| <h3 class="text-lg font-bold text-gray-800 mb-4">تحتاج مساعدة؟</h3> | |
| <div class="space-y-3"> | |
| <button class="w-full flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors"> | |
| <span class="text-sm font-medium">الدردشة المباشرة</span> | |
| <i data-feather="message-circle" class="w-5 h-5 text-purple-600"></i> | |
| </button> | |
| <button class="w-full flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors"> | |
| <span class="text-sm font-medium">الدعم عبر الهاتف</span> | |
| <i data-feather="phone" class="w-5 h-5 text-purple-600"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Success Modal --> | |
| <div id="successModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50"> | |
| <div class="bg-white rounded-2xl p-8 max-w-md mx-4 text-center" data-aos="zoom-in"> | |
| <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i data-feather="check" class="w-10 h-10 text-green-600"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-2">تم الدفع بنجاح!</h3> | |
| <p class="text-gray-600 mb-4">تمت معالجة دفعتك بنجاح. سيتم إرسال تأكيد إلى بريدك الإلكتروني.</p> | |
| <button onclick="closeSuccessModal()" class="bg-purple-600 text-white px-6 py-2 rounded-lg hover:bg-purple-700 transition-colors"> | |
| حسناً | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize AOS | |
| AOS.init({ | |
| duration: 1000, | |
| once: true | |
| }); | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Card number formatting | |
| document.getElementById('cardNumber').addEventListener('input', function(e) { | |
| let value = e.target.value.replace(/\s/g, '').replace(/[^0-9]/gi, ''); | |
| let formattedValue = value.match(/.{1,4}/g)?.join(' ') || value; | |
| e.target.value = formattedValue; | |
| // Update preview | |
| const last4 = value.slice(-4) || '1234'; | |
| document.getElementById('last4').textContent = last4; | |
| }); | |
| // Expiry formatting | |
| document.getElementById('expiry').addEventListener('input', function(e) { | |
| let value = e.target.value.replace(/\D/g, ''); | |
| if (value.length >= 2) { | |
| value = value.substring(0, 2) + '/' + value.substring(2, 4); | |
| } | |
| e.target.value = value; | |
| // Update preview | |
| document.getElementById('previewExpiry').textContent = value || '12/25'; | |
| }); | |
| // Card holder name update | |
| document.getElementById('cardHolder').addEventListener('input', function(e) { | |
| document.getElementById('previewName').textContent = e.target.value || 'أحمد محمد'; | |
| }); | |
| // Amount formatting | |
| document.getElementById('amount').addEventListener('input', function(e) { | |
| const value = parseFloat(e.target.value) || 0; | |
| document.getElementById('totalAmount').textContent = value.toFixed(2) + ' ر.س'; | |
| document.getElementById('finalAmount').textContent = value.toFixed(2) + ' ر.س'; | |
| }); | |
| // CVV toggle | |
| function toggleCvv() { | |
| const cvvInput = document.getElementById('cvv'); | |
| const eyeIcon = document.querySelector('[onclick="toggleCvv()"] i'); | |
| if (cvvInput.type === 'password') { | |
| cvvInput.type = 'text'; | |
| eyeIcon.setAttribute('data-feather', 'eye-off'); | |
| } else { | |
| cvvInput.type = 'password'; | |
| eyeIcon.setAttribute('data-feather', 'eye'); | |
| } | |
| feather.replace(); | |
| } | |
| // Form submission | |
| document.getElementById('paymentForm').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Show loading | |
| document.getElementById('buttonText').classList.add('hidden'); | |
| document.getElementById('loadingSpinner').classList.remove('hidden'); | |
| document.getElementById('payButton').disabled = true; | |
| // Simulate payment processing | |
| setTimeout(() => { | |
| document.getElementById('successModal').classList.remove('hidden'); | |
| document.getElementById('successModal').classList.add('flex'); | |
| // Reset form | |
| document.getElementById('paymentForm').reset(); | |
| document.getElementById('buttonText').classList.remove('hidden'); | |
| document.getElementById('loadingSpinner').classList.add('hidden'); | |
| document.getElementById('payButton').disabled = false; | |
| }, 2000); | |
| }); | |
| // Close success modal | |
| function closeSuccessModal() { | |
| document.getElementById('successModal').classList.add('hidden'); | |
| document.getElementById('successModal').classList.remove('flex'); | |
| } | |
| // Add blob animation delay | |
| const style = document.createElement('style'); | |
| style.textContent = ` | |
| .animation-delay-2000 { animation-delay: 2s; } | |
| .animation-delay-4000 { animation-delay: 4s; } | |
| @keyframes blob { | |
| 0% { transform: translate(0px, 0px) scale(1); } | |
| 33% { transform: translate(30px, -50px) scale(1.1); } | |
| 66% { transform: translate(-20px, 20px) scale(0.9); } | |
| 100% { transform: translate(0px, 0px) scale(1); } | |
| } | |
| .animate-blob { | |
| animation: blob 7s infinite; | |
| } | |
| `; | |
| document.head.appendChild(style); | |
| </script> | |
| </body> | |
| </html> | |