Hugging Face's logo

Spaces:
Rayan545454
/
ddd5
Running

App Files Community
Rayan545454 commited on
Commit
5bcfbd1
·
verified ·
1 Parent(s): 4a2179b

إذا النص الشخص الثاني لازم حفظ - Initial Deployment

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +358 -18
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ddd5
3
- emoji: 🐠
4
- colorFrom: gray
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: ddd5
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,359 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="ar" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>بوابة الدفع - شخص ثاني</title>
7
+ <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>">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
13
+ <style>
14
+ @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900&display=swap');
15
+
16
+ body {
17
+ font-family: 'Cairo', sans-serif;
18
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
19
+ min-height: 100vh;
20
+ }
21
+
22
+ .card-glow {
23
+ box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
24
+ }
25
+
26
+ .input-focus:focus {
27
+ transform: translateY(-2px);
28
+ box-shadow: 0 10px 25px rgba(102, 126, 234, 0.2);
29
+ }
30
+
31
+ .btn-hover:hover {
32
+ transform: translateY(-2px);
33
+ box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
34
+ }
35
+
36
+ .floating-card {
37
+ animation: float 6s ease-in-out infinite;
38
+ }
39
+
40
+ @keyframes float {
41
+ 0% { transform: translateY(0px); }
42
+ 50% { transform: translateY(-10px); }
43
+ 100% { transform: translateY(0px); }
44
+ }
45
+
46
+ .security-shield {
47
+ background: linear-gradient(45deg, #667eea, #764ba2);
48
+ background-size: 400% 400%;
49
+ animation: gradient 3s ease infinite;
50
+ }
51
+
52
+ @keyframes gradient {
53
+ 0% { background-position: 0% 50%; }
54
+ 50% { background-position: 100% 50%; }
55
+ 100% { background-position: 0% 50%; }
56
+ }
57
+
58
+ .visa-logo {
59
+ background: linear-gradient(135deg, #1a1f71, #0f4c75);
60
+ -webkit-background-clip: text;
61
+ -webkit-text-fill-color: transparent;
62
+ }
63
+ </style>
64
+ </head>
65
+ <body class="min-h-screen">
66
+ <!-- Background Animation -->
67
+ <div class="fixed inset-0 overflow-hidden">
68
+ <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>
69
+ <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>
70
+ <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>
71
+ </div>
72
+
73
+ <!-- Main Container -->
74
+ <div class="relative z-10 flex items-center justify-center min-h-screen p-4">
75
+ <div class="w-full max-w-6xl">
76
+ <!-- Header -->
77
+ <div class="text-center mb-8" data-aos="fade-down">
78
+ <h1 class="text-4xl md:text-5xl font-bold text-white mb-2">بوابة الدفع الآمنة</h1>
79
+ <p class="text-purple-200 text-lg">أتمم عملية الدفع بأمان وسرية تامة</p>
80
+ </div>
81
+
82
+ <!-- Payment Container -->
83
+ <div class="grid lg:grid-cols-2 gap-8">
84
+ <!-- Payment Form -->
85
+ <div class="bg-white/95 backdrop-blur-sm rounded-2xl shadow-2xl p-8 card-glow" data-aos="fade-right">
86
+ <!-- Security Badge -->
87
+ <div class="flex items-center justify-between mb-6">
88
+ <div class="flex items-center space-x-2">
89
+ <div class="security-shield p-2 rounded-full">
90
+ <i data-feather="shield" class="w-6 h-6 text-white"></i>
91
+ </div>
92
+ <span class="text-sm font-medium text-gray-600">مدعوم بتشفير 256-bit SSL</span>
93
+ </div>
94
+ <div class="flex space-x-2">
95
+ <i data-feather="credit-card" class="w-8 h-8 text-blue-600"></i>
96
+ <span class="visa-logo text-2xl font-bold">VISA</span>
97
+ </div>
98
+ </div>
99
+
100
+ <form id="paymentForm" class="space-y-6">
101
+ <!-- Card Number -->
102
+ <div>
103
+ <label class="block text-sm font-medium text-gray-700 mb-2">رقم البطاقة</label>
104
+ <div class="relative">
105
+ <input type="text" id="cardNumber" maxlength="19" placeholder="1234 5678 9012 3456"
106
+ 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">
107
+ <div class="absolute left-3 top-1/2 transform -translate-y-1/2">
108
+ <i data-feather="credit-card" class="w-5 h-5 text-gray-400"></i>
109
+ </div>
110
+ </div>
111
+ </div>
112
+
113
+ <!-- Card Holder -->
114
+ <div>
115
+ <label class="block text-sm font-medium text-gray-700 mb-2">اسم حامل البطاقة</label>
116
+ <input type="text" id="cardHolder" placeholder="أحمد محمد"
117
+ 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">
118
+ </div>
119
+
120
+ <!-- Expiry & CVV -->
121
+ <div class="grid grid-cols-2 gap-4">
122
+ <div>
123
+ <label class="block text-sm font-medium text-gray-700 mb-2">تاريخ الانتهاء</label>
124
+ <input type="text" id="expiry" maxlength="5" placeholder="MM/YY"
125
+ 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">
126
+ </div>
127
+ <div>
128
+ <label class="block text-sm font-medium text-gray-700 mb-2">رمز CVV</label>
129
+ <div class="relative">
130
+ <input type="password" id="cvv" maxlength="4" placeholder="123"
131
+ 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">
132
+ <button type="button" class="absolute left-3 top-1/2 transform -translate-y-1/2" onclick="toggleCvv()">
133
+ <i data-feather="eye" class="w-5 h-5 text-gray-400 hover:text-purple-600"></i>
134
+ </button>
135
+ </div>
136
+ </div>
137
+ </div>
138
+
139
+ <!-- Amount -->
140
+ <div>
141
+ <label class="block text-sm font-medium text-gray-700 mb-2">المبلغ</label>
142
+ <div class="relative">
143
+ <input type="number" id="amount" placeholder="0.00"
144
+ 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">
145
+ <span class="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-500 font-medium">ر.س</span>
146
+ </div>
147
+ </div>
148
+
149
+ <!-- Payment Button -->
150
+ <button type="submit" id="payButton"
151
+ 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">
152
+ <span id="buttonText">إتمام الدفع الآن</span>
153
+ <div id="loadingSpinner" class="hidden ml-2">
154
+ <div class="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
155
+ </div>
156
+ </button>
157
+ </form>
158
+
159
+ <!-- Security Features -->
160
+ <div class="mt-6 flex items-center justify-center space-x-4 text-sm text-gray-500">
161
+ <div class="flex items-center space-x-1">
162
+ <i data-feather="lock" class="w-4 h-4"></i>
163
+ <span>آمن 100%</span>
164
+ </div>
165
+ <div class="flex items-center space-x-1">
166
+ <i data-feather="clock" class="w-4 h-4"></i>
167
+ <span>معالجة فورية</span>
168
+ </div>
169
+ <div class="flex items-center space-x-1">
170
+ <i data-feather="check-circle" class="w-4 h-4"></i>
171
+ <span>مضمون</span>
172
+ </div>
173
+ </div>
174
+ </div>
175
+
176
+ <!-- Payment Summary -->
177
+ <div class="space-y-6" data-aos="fade-left">
178
+ <!-- Virtual Card Preview -->
179
+ <div class="bg-gradient-to-br from-purple-600 to-blue-600 rounded-2xl p-6 text-white floating-card">
180
+ <div class="flex justify-between items-start mb-8">
181
+ <div>
182
+ <p class="text-purple-200 text-sm">البطاقة الافتراضية</p>
183
+ <p class="text-2xl font-bold mt-1">**** **** **** <span id="last4">1234</span></p>
184
+ </div>
185
+ <i data-feather="wifi" class="w-8 h-8 text-purple-200"></i>
186
+ </div>
187
+ <div class="flex justify-between items-end">
188
+ <div>
189
+ <p class="text-purple-200 text-sm">اسم حامل البطاقة</p>
190
+ <p id="previewName" class="font-bold">أحمد محمد</p>
191
+ </div>
192
+ <div class="text-right">
193
+ <p class="text-purple-200 text-sm">ينتهي في</p>
194
+ <p id="previewExpiry" class="font-bold">12/25</p>
195
+ </div>
196
+ </div>
197
+ </div>
198
+
199
+ <!-- Transaction Details -->
200
+ <div class="bg-white/95 backdrop-blur-sm rounded-2xl shadow-2xl p-6">
201
+ <h3 class="text-lg font-bold text-gray-800 mb-4">تفاصيل المعاملة</h3>
202
+ <div class="space-y-3">
203
+ <div class="flex justify-between">
204
+ <span class="text-gray-600">المبلغ الإجمالي</span>
205
+ <span class="font-bold" id="totalAmount">0.00 ر.س</span>
206
+ </div>
207
+ <div class="flex justify-between">
208
+ <span class="text-gray-600">رسوم المعالجة</span>
209
+ <span class="font-bold">0.00 ر.س</span>
210
+ </div>
211
+ <div class="border-t pt-3">
212
+ <div class="flex justify-between">
213
+ <span class="text-lg font-bold">المبلغ النهائي</span>
214
+ <span class="text-lg font-bold text-purple-600" id="finalAmount">0.00 ر.س</span>
215
+ </div>
216
+ </div>
217
+ </div>
218
+ </div>
219
+
220
+ <!-- Support -->
221
+ <div class="bg-white/95 backdrop-blur-sm rounded-2xl shadow-2xl p-6">
222
+ <h3 class="text-lg font-bold text-gray-800 mb-4">تحتاج مساعدة؟</h3>
223
+ <div class="space-y-3">
224
+ <button class="w-full flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
225
+ <span class="text-sm font-medium">الدردشة المباشرة</span>
226
+ <i data-feather="message-circle" class="w-5 h-5 text-purple-600"></i>
227
+ </button>
228
+ <button class="w-full flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
229
+ <span class="text-sm font-medium">الدعم عبر الهاتف</span>
230
+ <i data-feather="phone" class="w-5 h-5 text-purple-600"></i>
231
+ </button>
232
+ </div>
233
+ </div>
234
+ </div>
235
+ </div>
236
+ </div>
237
+ </div>
238
+
239
+ <!-- Success Modal -->
240
+ <div id="successModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
241
+ <div class="bg-white rounded-2xl p-8 max-w-md mx-4 text-center" data-aos="zoom-in">
242
+ <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
243
+ <i data-feather="check" class="w-10 h-10 text-green-600"></i>
244
+ </div>
245
+ <h3 class="text-2xl font-bold text-gray-800 mb-2">تم الدفع بنجاح!</h3>
246
+ <p class="text-gray-600 mb-4">تمت معالجة دفعتك بنجاح. سيتم إرسال تأكيد إلى بريدك الإلكتروني.</p>
247
+ <button onclick="closeSuccessModal()" class="bg-purple-600 text-white px-6 py-2 rounded-lg hover:bg-purple-700 transition-colors">
248
+ حسناً
249
+ </button>
250
+ </div>
251
+ </div>
252
+
253
+ <script>
254
+ // Initialize AOS
255
+ AOS.init({
256
+ duration: 1000,
257
+ once: true
258
+ });
259
+
260
+ // Initialize Feather Icons
261
+ feather.replace();
262
+
263
+ // Card number formatting
264
+ document.getElementById('cardNumber').addEventListener('input', function(e) {
265
+ let value = e.target.value.replace(/\s/g, '').replace(/[^0-9]/gi, '');
266
+ let formattedValue = value.match(/.{1,4}/g)?.join(' ') || value;
267
+ e.target.value = formattedValue;
268
+
269
+ // Update preview
270
+ const last4 = value.slice(-4) || '1234';
271
+ document.getElementById('last4').textContent = last4;
272
+ });
273
+
274
+ // Expiry formatting
275
+ document.getElementById('expiry').addEventListener('input', function(e) {
276
+ let value = e.target.value.replace(/\D/g, '');
277
+ if (value.length >= 2) {
278
+ value = value.substring(0, 2) + '/' + value.substring(2, 4);
279
+ }
280
+ e.target.value = value;
281
+
282
+ // Update preview
283
+ document.getElementById('previewExpiry').textContent = value || '12/25';
284
+ });
285
+
286
+ // Card holder name update
287
+ document.getElementById('cardHolder').addEventListener('input', function(e) {
288
+ document.getElementById('previewName').textContent = e.target.value || 'أحمد محمد';
289
+ });
290
+
291
+ // Amount formatting
292
+ document.getElementById('amount').addEventListener('input', function(e) {
293
+ const value = parseFloat(e.target.value) || 0;
294
+ document.getElementById('totalAmount').textContent = value.toFixed(2) + ' ر.س';
295
+ document.getElementById('finalAmount').textContent = value.toFixed(2) + ' ر.س';
296
+ });
297
+
298
+ // CVV toggle
299
+ function toggleCvv() {
300
+ const cvvInput = document.getElementById('cvv');
301
+ const eyeIcon = document.querySelector('[onclick="toggleCvv()"] i');
302
+
303
+ if (cvvInput.type === 'password') {
304
+ cvvInput.type = 'text';
305
+ eyeIcon.setAttribute('data-feather', 'eye-off');
306
+ } else {
307
+ cvvInput.type = 'password';
308
+ eyeIcon.setAttribute('data-feather', 'eye');
309
+ }
310
+ feather.replace();
311
+ }
312
+
313
+ // Form submission
314
+ document.getElementById('paymentForm').addEventListener('submit', function(e) {
315
+ e.preventDefault();
316
+
317
+ // Show loading
318
+ document.getElementById('buttonText').classList.add('hidden');
319
+ document.getElementById('loadingSpinner').classList.remove('hidden');
320
+ document.getElementById('payButton').disabled = true;
321
+
322
+ // Simulate payment processing
323
+ setTimeout(() => {
324
+ document.getElementById('successModal').classList.remove('hidden');
325
+ document.getElementById('successModal').classList.add('flex');
326
+
327
+ // Reset form
328
+ document.getElementById('paymentForm').reset();
329
+ document.getElementById('buttonText').classList.remove('hidden');
330
+ document.getElementById('loadingSpinner').classList.add('hidden');
331
+ document.getElementById('payButton').disabled = false;
332
+ }, 2000);
333
+ });
334
+
335
+ // Close success modal
336
+ function closeSuccessModal() {
337
+ document.getElementById('successModal').classList.add('hidden');
338
+ document.getElementById('successModal').classList.remove('flex');
339
+ }
340
+
341
+ // Add blob animation delay
342
+ const style = document.createElement('style');
343
+ style.textContent = `
344
+ .animation-delay-2000 { animation-delay: 2s; }
345
+ .animation-delay-4000 { animation-delay: 4s; }
346
+ @keyframes blob {
347
+ 0% { transform: translate(0px, 0px) scale(1); }
348
+ 33% { transform: translate(30px, -50px) scale(1.1); }
349
+ 66% { transform: translate(-20px, 20px) scale(0.9); }
350
+ 100% { transform: translate(0px, 0px) scale(1); }
351
+ }
352
+ .animate-blob {
353
+ animation: blob 7s infinite;
354
+ }
355
+ `;
356
+ document.head.appendChild(style);
357
+ </script>
358
+ </body>
359
  </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ بوابه الدفع فيزا
2
+ إذا النص الشخص الثاني لازم حفظ