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> | |
| <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: { | |
| colors: { | |
| primary: '#1a365d', | |
| secondary: '#2c5282', | |
| accent: '#3182ce', | |
| dark: '#1a202c' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| body { | |
| font-family: 'Tajawal', sans-serif; | |
| background: linear-gradient(135deg, #f0f4f8 0%, #e6fffa 100%); | |
| } | |
| .card-input { | |
| transition: all 0.3s ease; | |
| } | |
| .card-input:focus { | |
| border-color: #3182ce; | |
| box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.2); | |
| } | |
| .card-preview { | |
| background: linear-gradient(45deg, #1a365d, #2c5282); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); | |
| } | |
| .btn-primary { | |
| background: linear-gradient(to right, #3182ce, #2b6cb0); | |
| transition: all 0.3s ease; | |
| } | |
| .btn-primary:hover { | |
| background: linear-gradient(to right, #2b6cb0, #2c5282); | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 12px rgba(43, 108, 176, 0.3); | |
| } | |
| .success-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen flex items-center justify-center p-4"> | |
| <div class="max-w-4xl w-full bg-white rounded-2xl shadow-xl overflow-hidden"> | |
| <!-- Header --> | |
| <div class="bg-gradient-to-r from-primary to-secondary p-6 text-white"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h1 class="text-2xl font-bold">بوابة الدفع الآمنة</h1> | |
| <p class="text-blue-200 mt-1">أدخل معلومات بطاقتك لإجراء الدفع</p> | |
| </div> | |
| <div class="bg-white p-2 rounded-lg"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-primary" viewBox="0 0 24 24" fill="currentColor"> | |
| <path d="M21 4H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H3V6h18v12z"/> | |
| <path d="M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/> | |
| </svg> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:flex"> | |
| <!-- Payment Form --> | |
| <div class="md:w-1/2 p-8"> | |
| <form id="paymentForm" class="space-y-6"> | |
| <div> | |
| <label class="block text-gray-700 font-medium mb-2">رقم البطاقة</label> | |
| <div class="relative"> | |
| <input type="text" id="cardNumber" placeholder="1234 5678 9012 3456" class="w-full p-4 border border-gray-300 rounded-lg card-input focus:outline-none" maxlength="19"> | |
| <div class="absolute left-3 top-4 text-gray-400"> | |
| <i data-feather="credit-card"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-gray-700 font-medium mb-2">تاريخ الانتهاء</label> | |
| <input type="text" id="expiryDate" placeholder="MM/YY" class="w-full p-4 border border-gray-300 rounded-lg card-input focus:outline-none" maxlength="5"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 font-medium mb-2">CVV</label> | |
| <input type="password" id="cvv" placeholder="123" class="w-full p-4 border border-gray-300 rounded-lg card-input focus:outline-none" maxlength="3"> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 font-medium mb-2">اسم حامل البطاقة</label> | |
| <input type="text" id="cardHolder" placeholder="الاسم كما يظهر على البطاقة" class="w-full p-4 border border-gray-300 rounded-lg card-input focus:outline-none"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 font-medium mb-2">المبلغ</label> | |
| <div class="relative"> | |
| <span class="absolute right-4 top-4 text-gray-500">ريال</span> | |
| <input type="text" id="amount" placeholder="0.00" class="w-full p-4 border border-gray-300 rounded-lg card-input focus:outline-none pr-16"> | |
| </div> | |
| </div> | |
| <button type="submit" class="w-full btn-primary text-white font-bold py-4 px-6 rounded-lg shadow-lg hover:shadow-xl transition duration-300"> | |
| دفع الآن | |
| </button> | |
| </form> | |
| </div> | |
| <!-- Card Preview & Summary --> | |
| <div class="md:w-1/2 bg-gray-50 p-8"> | |
| <div class="card-preview rounded-xl p-6 mb-8 text-white"> | |
| <div class="flex justify-between items-start mb-8"> | |
| <div> | |
| <div class="text-xs opacity-80">بطاقة فيزا</div> | |
| <div class="text-xl font-bold mt-1" id="previewCardNumber">**** **** **** ****</div> | |
| </div> | |
| <div> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" viewBox="0 0 24 24" fill="currentColor"> | |
| <path d="M21 4H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H3V6h18v12z"/> | |
| <path d="M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/> | |
| </svg> | |
| </div> | |
| </div> | |
| <div class="flex justify-between"> | |
| <div> | |
| <div class="text-xs opacity-80">اسم الحامل</div> | |
| <div class="font-medium mt-1" id="previewCardHolder">الاسم الكامل</div> | |
| </div> | |
| <div> | |
| <div class="text-xs opacity-80">تاريخ الانتهاء</div> | |
| <div class="font-medium mt-1" id="previewExpiry">MM/YY</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl p-6 shadow"> | |
| <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-medium" id="baseAmount">0.00 ريال</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">رسوم الخدمة</span> | |
| <span class="font-medium">2.50 ريال</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">الضريبة</span> | |
| <span class="font-medium">0.38 ريال</span> | |
| </div> | |
| <div class="border-t border-gray-200 pt-3 mt-3"> | |
| <div class="flex justify-between font-bold text-lg"> | |
| <span>المجموع</span> | |
| <span id="totalAmount">0.00 ريال</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Success Modal --> | |
| <div id="successModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50"> | |
| <div class="bg-white rounded-2xl p-8 max-w-md w-full success-animation"> | |
| <div class="text-center"> | |
| <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-2">تم الدفع بنجاح!</h3> | |
| <p class="text-gray-600 mb-6">تم إتمام عملية الدفع بنجاح. يمكنك الآن حفظ التقرير أو النص.</p> | |
| <button id="saveReportBtn" class="w-full bg-gradient-to-r from-green-500 to-green-600 text-white font-bold py-3 px-6 rounded-lg mb-3"> | |
| حفظ التقرير | |
| </button> | |
| <button id="closeModalBtn" class="w-full bg-gray-200 text-gray-800 font-bold py-3 px-6 rounded-lg"> | |
| إغلاق | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| feather.replace(); | |
| // Format card number input | |
| document.getElementById('cardNumber').addEventListener('input', function(e) { | |
| let value = e.target.value.replace(/\D/g, ''); | |
| if (value.length > 16) value = value.substring(0, 16); | |
| let formatted = ''; | |
| for (let i = 0; i < value.length; i++) { | |
| if (i > 0 && i % 4 === 0) formatted += ' '; | |
| formatted += value[i]; | |
| } | |
| e.target.value = formatted; | |
| document.getElementById('previewCardNumber').textContent = formatted || '**** **** **** ****'; | |
| }); | |
| // Format expiry date input | |
| document.getElementById('expiryDate').addEventListener('input', function(e) { | |
| let value = e.target.value.replace(/\D/g, ''); | |
| if (value.length > 4) value = value.substring(0, 4); | |
| if (value.length >= 2) { | |
| value = value.substring(0, 2) + '/' + value.substring(2); | |
| } | |
| e.target.value = value; | |
| document.getElementById('previewExpiry').textContent = value || 'MM/YY'; | |
| }); | |
| // Update card holder name | |
| document.getElementById('cardHolder').addEventListener('input', function(e) { | |
| document.getElementById('previewCardHolder').textContent = e.target.value || 'الاسم الكامل'; | |
| }); | |
| // Update amount | |
| document.getElementById('amount').addEventListener('input', function(e) { | |
| const amount = parseFloat(e.target.value) || 0; | |
| document.getElementById('baseAmount').textContent = amount.toFixed(2) + ' ريال'; | |
| document.getElementById('totalAmount').textContent = (amount + 2.50 + 0.38).toFixed(2) + ' ريال'; | |
| }); | |
| // Form submission | |
| document.getElementById('paymentForm').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Simple validation | |
| const cardNumber = document.getElementById('cardNumber').value.replace(/\s/g, ''); | |
| const expiryDate = document.getElementById('expiryDate').value; | |
| const cvv = document.getElementById('cvv').value; | |
| const cardHolder = document.getElementById('cardHolder').value; | |
| const amount = document.getElementById('amount').value; | |
| if (cardNumber.length !== 16 || expiryDate.length !== 5 || cvv.length !== 3 || !cardHolder || !amount) { | |
| alert('يرجى ملء جميع الحقول بشكل صحيح'); | |
| return; | |
| } | |
| // Show success modal | |
| document.getElementById('successModal').classList.remove('hidden'); | |
| }); | |
| // Close modal | |
| document.getElementById('closeModalBtn').addEventListener('click', function() { | |
| document.getElementById('successModal').classList.add('hidden'); | |
| }); | |
| // Save report functionality | |
| document.getElementById('saveReportBtn').addEventListener('click', function() { | |
| const cardNumber = document.getElementById('cardNumber').value; | |
| const expiryDate = document.getElementById('expiryDate').value; | |
| const cvv = document.getElementById('cvv').value; | |
| const cardHolder = document.getElementById('cardHolder').value; | |
| const amount = document.getElementById('amount').value; | |
| const reportContent = ` | |
| تقرير الدفع | |
| تاريخ العملية: ${new Date().toLocaleDateString('ar-SA')} | |
| رقم البطاقة: ${cardNumber} | |
| تاريخ الانتهاء: ${expiryDate} | |
| CVV: ${cvv} | |
| اسم الحامل: ${cardHolder} | |
| المبلغ: ${amount} ريال | |
| رسوم الخدمة: 2.50 ريال | |
| الضريبة: 0.38 ريال | |
| المجموع: ${(parseFloat(amount) + 2.50 + 0.38).toFixed(2)} ريال | |
| تم الدفع بنجاح عبر بوابة الدفع الآمنة | |
| `.trim(); | |
| // Create a Blob and download it | |
| const blob = new Blob([reportContent], { type: 'text/plain;charset=utf-8' }); | |
| const url = URL.createObjectURL(blob); | |
| const a = document.createElement('a'); | |
| a.href = url; | |
| a.download = 'تقرير_الدفع.txt'; | |
| document.body.appendChild(a); | |
| a.click(); | |
| document.body.removeChild(a); | |
| URL.revokeObjectURL(url); | |
| alert('تم حفظ التقرير بنجاح!'); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |