Spaces:
Running
Running
File size: 10,104 Bytes
595a856 3af63d2 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 | <!DOCTYPE html>
<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>
|