Hugging Face's logo

Spaces:
Gresso
/
charity-fund
Running

App Files Community
Gresso commited on
Commit
ccdf16b
·
verified ·
1 Parent(s): 66cbebf

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +490 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Charity Fund
3
- emoji: 📈
4
- colorFrom: red
5
- colorTo: purple
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: charity-fund
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: pink
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,490 @@
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
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap');
11
+
12
+ body {
13
+ font-family: 'Tajawal', sans-serif;
14
+ }
15
+
16
+ .donation-progress {
17
+ height: 8px;
18
+ background-color: #e5e7eb;
19
+ border-radius: 4px;
20
+ overflow: hidden;
21
+ }
22
+
23
+ .progress-bar {
24
+ height: 100%;
25
+ background-color: #10b981;
26
+ transition: width 0.5s ease;
27
+ }
28
+
29
+ .donation-card:hover {
30
+ transform: translateY(-5px);
31
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
32
+ }
33
+
34
+ .floating-btn {
35
+ animation: float 3s ease-in-out infinite;
36
+ }
37
+
38
+ @keyframes float {
39
+ 0% { transform: translateY(0px); }
40
+ 50% { transform: translateY(-10px); }
41
+ 100% { transform: translateY(0px); }
42
+ }
43
+ </style>
44
+ </head>
45
+ <body class="bg-gray-50 text-gray-800">
46
+ <!-- Header -->
47
+ <header class="bg-green-600 text-white shadow-lg">
48
+ <div class="container mx-auto px-4 py-6">
49
+ <div class="flex justify-between items-center">
50
+ <div class="flex items-center space-x-2">
51
+ <i class="fas fa-hands-helping text-3xl"></i>
52
+ <h1 class="text-2xl font-bold">الصندوق الخيري</h1>
53
+ </div>
54
+ <nav class="hidden md:block">
55
+ <ul class="flex space-x-8">
56
+ <li><a href="#" class="hover:text-green-200 font-medium">الرئيسية</a></li>
57
+ <li><a href="#" class="hover:text-green-200 font-medium">المشاريع</a></li>
58
+ <li><a href="#" class="hover:text-green-200 font-medium">قصص النجاح</a></li>
59
+ <li><a href="#" class="hover:text-green-200 font-medium">عن الصندوق</a></li>
60
+ <li><a href="#" class="hover:text-green-200 font-medium">اتصل بنا</a></li>
61
+ </ul>
62
+ </nav>
63
+ <button class="md:hidden text-2xl">
64
+ <i class="fas fa-bars"></i>
65
+ </button>
66
+ </div>
67
+ </div>
68
+ </header>
69
+
70
+ <!-- Hero Section -->
71
+ <section class="bg-gradient-to-r from-green-600 to-green-500 text-white py-16">
72
+ <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
73
+ <div class="md:w-1/2 mb-8 md:mb-0">
74
+ <h2 class="text-4xl font-bold mb-4">ساهم في صنع الفرق</h2>
75
+ <p class="text-xl mb-6">تبرعك اليوم يمكن أن يغير حياة شخص ما إلى الأبد. كن جزءًا من مسيرتنا الخيرية وساعدنا في تحقيق الأمل لمحتاج.</p>
76
+ <div class="flex flex-col sm:flex-row gap-4">
77
+ <button class="bg-white text-green-600 px-6 py-3 rounded-lg font-bold hover:bg-gray-100 transition duration-300">
78
+ تبرع الآن <i class="fas fa-heart ml-2"></i>
79
+ </button>
80
+ <button class="border-2 border-white px-6 py-3 rounded-lg font-bold hover:bg-white hover:text-green-600 transition duration-300">
81
+ تعرف على مشاريعنا <i class="fas fa-arrow-left ml-2"></i>
82
+ </button>
83
+ </div>
84
+ </div>
85
+ <div class="md:w-1/2 flex justify-center">
86
+ <img src="https://images.unsplash.com/photo-1507679799987-c73779587ccf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" alt="Charity" class="rounded-xl shadow-2xl max-w-md w-full">
87
+ </div>
88
+ </div>
89
+ </section>
90
+
91
+ <!-- Stats Section -->
92
+ <section class="py-12 bg-white">
93
+ <div class="container mx-auto px-4">
94
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center">
95
+ <div class="p-6 rounded-lg bg-green-50">
96
+ <div class="text-4xl font-bold text-green-600 mb-2">1,245</div>
97
+ <div class="text-gray-600">مشروع خيري</div>
98
+ </div>
99
+ <div class="p-6 rounded-lg bg-green-50">
100
+ <div class="text-4xl font-bold text-green-600 mb-2">75,320</div>
101
+ <div class="text-gray-600">متبرع</div>
102
+ </div>
103
+ <div class="p-6 rounded-lg bg-green-50">
104
+ <div class="text-4xl font-bold text-green-600 mb-2">5.2M</div>
105
+ <div class="text-gray-600">ريال تبرعات</div>
106
+ </div>
107
+ <div class="p-6 rounded-lg bg-green-50">
108
+ <div class="text-4xl font-bold text-green-600 mb-2">32</div>
109
+ <div class="text-gray-600">بلد مستفيد</div>
110
+ </div>
111
+ </div>
112
+ </div>
113
+ </section>
114
+
115
+ <!-- Featured Projects -->
116
+ <section class="py-16 bg-gray-50">
117
+ <div class="container mx-auto px-4">
118
+ <div class="text-center mb-12">
119
+ <h2 class="text-3xl font-bold mb-4">مشاريعنا الخيرية</h2>
120
+ <p class="text-gray-600 max-w-2xl mx-auto">نسعى دائمًا لتنفيذ مشاريع خيرية ذات تأثير إيجابي مستدام في حياة المستفيدين</p>
121
+ </div>
122
+
123
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
124
+ <!-- Project 1 -->
125
+ <div class="bg-white rounded-xl shadow-md overflow-hidden donation-card transition duration-300">
126
+ <img src="https://images.unsplash.com/photo-1529310399831-ed472b81d589?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Food Aid" class="w-full h-48 object-cover">
127
+ <div class="p-6">
128
+ <div class="flex justify-between items-center mb-4">
129
+ <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded">إغاثة</span>
130
+ <span class="text-gray-500 text-sm">15 يوم متبقي</span>
131
+ </div>
132
+ <h3 class="text-xl font-bold mb-2">سلة غذائية لعائلة</h3>
133
+ <p class="text-gray-600 mb-4">توفير سلة غذائية شهرية لعائلة محتاجة لمدة عام كامل</p>
134
+
135
+ <div class="mb-4">
136
+ <div class="flex justify-between text-sm mb-1">
137
+ <span>45,000 ر.س</span>
138
+ <span>60,000 ر.س</span>
139
+ </div>
140
+ <div class="donation-progress">
141
+ <div class="progress-bar" style="width: 75%"></div>
142
+ </div>
143
+ </div>
144
+
145
+ <button class="w-full bg-green-600 hover:bg-green-700 text-white py-2 rounded-lg transition duration-300">
146
+ ساهم في المشروع <i class="fas fa-hand-holding-heart mr-2"></i>
147
+ </button>
148
+ </div>
149
+ </div>
150
+
151
+ <!-- Project 2 -->
152
+ <div class="bg-white rounded-xl shadow-md overflow-hidden donation-card transition duration-300">
153
+ <img src="https://images.unsplash.com/photo-1577896851231-70ef18881754?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Education" class="w-full h-48 object-cover">
154
+ <div class="p-6">
155
+ <div class="flex justify-between items-center mb-4">
156
+ <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">تعليم</span>
157
+ <span class="text-gray-500 text-sm">30 يوم متبقي</span>
158
+ </div>
159
+ <h3 class="text-xl font-bold mb-2">تعليم طفل يتيم</h3>
160
+ <p class="text-gray-600 mb-4">تغطية مصاريف تعليم طفل يتيم لمدة عام دراسي كامل</p>
161
+
162
+ <div class="mb-4">
163
+ <div class="flex justify-between text-sm mb-1">
164
+ <span>12,500 ر.س</span>
165
+ <span>25,000 ر.س</span>
166
+ </div>
167
+ <div class="donation-progress">
168
+ <div class="progress-bar" style="width: 50%"></div>
169
+ </div>
170
+ </div>
171
+
172
+ <button class="w-full bg-green-600 hover:bg-green-700 text-white py-2 rounded-lg transition duration-300">
173
+ ساهم في المشروع <i class="fas fa-hand-holding-heart mr-2"></i>
174
+ </button>
175
+ </div>
176
+ </div>
177
+
178
+ <!-- Project 3 -->
179
+ <div class="bg-white rounded-xl shadow-md overflow-hidden donation-card transition duration-300">
180
+ <img src="https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Medical" class="w-full h-48 object-cover">
181
+ <div class="p-6">
182
+ <div class="flex justify-between items-center mb-4">
183
+ <span class="bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded">صحة</span>
184
+ <span class="text-gray-500 text-sm">10 يوم متبقي</span>
185
+ </div>
186
+ <h3 class="text-xl font-bold mb-2">علاج مريض</h3>
187
+ <p class="text-gray-600 mb-4">تغطية تكاليف عملية جراحية لمريض غير قادر</p>
188
+
189
+ <div class="mb-4">
190
+ <div class="flex justify-between text-sm mb-1">
191
+ <span>80,000 ر.س</span>
192
+ <span>100,000 ر.س</span>
193
+ </div>
194
+ <div class="donation-progress">
195
+ <div class="progress-bar" style="width: 80%"></div>
196
+ </div>
197
+ </div>
198
+
199
+ <button class="w-full bg-green-600 hover:bg-green-700 text-white py-2 rounded-lg transition duration-300">
200
+ ساهم في المشروع <i class="fas fa-hand-holding-heart mr-2"></i>
201
+ </button>
202
+ </div>
203
+ </div>
204
+ </div>
205
+
206
+ <div class="text-center mt-10">
207
+ <button class="border-2 border-green-600 text-green-600 px-6 py-3 rounded-lg font-bold hover:bg-green-600 hover:text-white transition duration-300">
208
+ عرض جميع المشاريع <i class="fas fa-arrow-left ml-2"></i>
209
+ </button>
210
+ </div>
211
+ </div>
212
+ </section>
213
+
214
+ <!-- How It Works -->
215
+ <section class="py-16 bg-white">
216
+ <div class="container mx-auto px-4">
217
+ <div class="text-center mb-12">
218
+ <h2 class="text-3xl font-bold mb-4">كيفية التبرع</h2>
219
+ <p class="text-gray-600 max-w-2xl mx-auto">عملية التبرع لدينا سهلة وآمنة ومباشرة</p>
220
+ </div>
221
+
222
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
223
+ <div class="text-center p-6">
224
+ <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
225
+ <i class="fas fa-search text-green-600 text-2xl"></i>
226
+ </div>
227
+ <h3 class="text-xl font-bold mb-2">اختر مشروعًا</h3>
228
+ <p class="text-gray-600">تصفح مشاريعنا الخيرية واختر ما يناسبك</p>
229
+ </div>
230
+
231
+ <div class="text-center p-6">
232
+ <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
233
+ <i class="fas fa-money-bill-wave text-green-600 text-2xl"></i>
234
+ </div>
235
+ <h3 class="text-xl font-bold mb-2">حدد المبلغ</h3>
236
+ <p class="text-gray-600">اختر مبلغ التبرع الذي ترغب به</p>
237
+ </div>
238
+
239
+ <div class="text-center p-6">
240
+ <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
241
+ <i class="fas fa-heart text-green-600 text-2xl"></i>
242
+ </div>
243
+ <h3 class="text-xl font-bold mb-2">اكمل التبرع</h3>
244
+ <p class="text-gray-600">ادخل بياناتك واكمل عملية التبرع الآمنة</p>
245
+ </div>
246
+ </div>
247
+ </div>
248
+ </section>
249
+
250
+ <!-- Testimonials -->
251
+ <section class="py-16 bg-gray-50">
252
+ <div class="container mx-auto px-4">
253
+ <div class="text-center mb-12">
254
+ <h2 class="text-3xl font-bold mb-4">كلمة المتبرعين</h2>
255
+ <p class="text-gray-600 max-w-2xl mx-auto">آراء بعض متبرعينا الكرام في تجربتهم مع الصندوق الخيري</p>
256
+ </div>
257
+
258
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
259
+ <div class="bg-white p-6 rounded-xl shadow-md">
260
+ <div class="flex items-center mb-4">
261
+ <div class="w-12 h-12 rounded-full bg-gray-300 overflow-hidden mr-4">
262
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Donor" class="w-full h-full object-cover">
263
+ </div>
264
+ <div>
265
+ <h4 class="font-bold">أحمد محمد</h4>
266
+ <div class="flex text-yellow-400">
267
+ <i class="fas fa-star"></i>
268
+ <i class="fas fa-star"></i>
269
+ <i class="fas fa-star"></i>
270
+ <i class="fas fa-star"></i>
271
+ <i class="fas fa-star"></i>
272
+ </div>
273
+ </div>
274
+ </div>
275
+ <p class="text-gray-600">"تجربة رائعة مع الصندوق الخيري، الشفافية والمتابعة ممتازة. أشعر بالاطمئنان أن تبرعاتي تصل لمستحقيها."</p>
276
+ </div>
277
+
278
+ <div class="bg-white p-6 rounded-xl shadow-md">
279
+ <div class="flex items-center mb-4">
280
+ <div class="w-12 h-12 rounded-full bg-gray-300 overflow-hidden mr-4">
281
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Donor" class="w-full h-full object-cover">
282
+ </div>
283
+ <div>
284
+ <h4 class="font-bold">سارة عبدالله</h4>
285
+ <div class="flex text-yellow-400">
286
+ <i class="fas fa-star"></i>
287
+ <i class="fas fa-star"></i>
288
+ <i class="fas fa-star"></i>
289
+ <i class="fas fa-star"></i>
290
+ <i class="fas fa-star-half-alt"></i>
291
+ </div>
292
+ </div>
293
+ </div>
294
+ <p class="text-gray-600">"أتابع مشاريع الصندوق منذ سنوات، وأشهد بجدية القائمين عليه وحرصهم على إيصال المساعدات لمستحقيها."</p>
295
+ </div>
296
+
297
+ <div class="bg-white p-6 rounded-xl shadow-md">
298
+ <div class="flex items-center mb-4">
299
+ <div class="w-12 h-12 rounded-full bg-gray-300 overflow-hidden mr-4">
300
+ <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Donor" class="w-full h-full object-cover">
301
+ </div>
302
+ <div>
303
+ <h4 class="font-bold">خالد سعيد</h4>
304
+ <div class="flex text-yellow-400">
305
+ <i class="fas fa-star"></i>
306
+ <i class="fas fa-star"></i>
307
+ <i class="fas fa-star"></i>
308
+ <i class="fas fa-star"></i>
309
+ <i class="fas fa-star"></i>
310
+ </div>
311
+ </div>
312
+ </div>
313
+ <p class="text-gray-600">"ما يميز هذا الصندوق المصداقية والشفافية، مع تحديثات دورية عن سير المشاريع. أوصي الجميع بالتبرع من خلالهم."</p>
314
+ </div>
315
+ </div>
316
+ </div>
317
+ </section>
318
+
319
+ <!-- Donation Form -->
320
+ <section class="py-16 bg-green-600 text-white">
321
+ <div class="container mx-auto px-4">
322
+ <div class="max-w-3xl mx-auto bg-white text-gray-800 rounded-xl shadow-2xl overflow-hidden">
323
+ <div class="md:flex">
324
+ <div class="md:w-1/2 bg-green-700 text-white p-8 flex flex-col justify-center">
325
+ <h2 class="text-2xl font-bold mb-4">تبرع الآن</h2>
326
+ <p class="mb-6">كل تبرع مهما كان حجمه سيصنع فرقًا في حياة شخص محتاج. اختر مشروعًا واكمل بيانات التبرع.</p>
327
+ <div class="flex items-center">
328
+ <i class="fas fa-lock text-2xl mr-3"></i>
329
+ <span>تبرع آمن ومشفّر</span>
330
+ </div>
331
+ </div>
332
+ <div class="md:w-1/2 p-8">
333
+ <form id="donationForm">
334
+ <div class="mb-4">
335
+ <label class="block text-gray-700 mb-2">المشروع</label>
336
+ <select class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500">
337
+ <option>سلة غذائية لعائلة</option>
338
+ <option>تعليم طفل ��تيم</option>
339
+ <option>علاج مريض</option>
340
+ <option>كفالة يتيم</option>
341
+ <option>حفر بئر</option>
342
+ </select>
343
+ </div>
344
+
345
+ <div class="mb-4">
346
+ <label class="block text-gray-700 mb-2">مبلغ التبرع (ر.س)</label>
347
+ <div class="grid grid-cols-3 gap-2 mb-2">
348
+ <button type="button" class="donation-amount bg-gray-100 hover:bg-green-100 py-2 rounded-lg transition">50</button>
349
+ <button type="button" class="donation-amount bg-gray-100 hover:bg-green-100 py-2 rounded-lg transition">100</button>
350
+ <button type="button" class="donation-amount bg-gray-100 hover:bg-green-100 py-2 rounded-lg transition">200</button>
351
+ <button type="button" class="donation-amount bg-gray-100 hover:bg-green-100 py-2 rounded-lg transition">500</button>
352
+ <button type="button" class="donation-amount bg-gray-100 hover:bg-green-100 py-2 rounded-lg transition">1000</button>
353
+ <button type="button" class="donation-amount bg-gray-100 hover:bg-green-100 py-2 rounded-lg transition">آخر</button>
354
+ </div>
355
+ <input type="number" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500" placeholder="أدخل المبلغ">
356
+ </div>
357
+
358
+ <div class="mb-4">
359
+ <label class="block text-gray-700 mb-2">الاسم</label>
360
+ <input type="text" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500" placeholder="الاسم الكامل">
361
+ </div>
362
+
363
+ <div class="mb-6">
364
+ <label class="block text-gray-700 mb-2">البريد الإلكتروني</label>
365
+ <input type="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500" placeholder="[email protected]">
366
+ </div>
367
+
368
+ <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white py-3 rounded-lg font-bold transition duration-300">
369
+ أكمل التبرع <i class="fas fa-arrow-left ml-2"></i>
370
+ </button>
371
+ </form>
372
+ </div>
373
+ </div>
374
+ </div>
375
+ </div>
376
+ </section>
377
+
378
+ <!-- Floating Donate Button -->
379
+ <div class="fixed bottom-6 left-6 z-50">
380
+ <button class="floating-btn bg-green-600 text-white w-16 h-16 rounded-full shadow-xl flex items-center justify-center text-2xl hover:bg-green-700 transition duration-300">
381
+ <i class="fas fa-hand-holding-heart"></i>
382
+ </button>
383
+ </div>
384
+
385
+ <!-- Footer -->
386
+ <footer class="bg-gray-800 text-white pt-12 pb-6">
387
+ <div class="container mx-auto px-4">
388
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
389
+ <div>
390
+ <h3 class="text-xl font-bold mb-4 flex items-center">
391
+ <i class="fas fa-hands-helping text-2xl mr-2"></i> الصندوق الخيري
392
+ </h3>
393
+ <p class="text-gray-400">منظمة خيرية غير ربحية تسعى لمساعدة المحتاجين حول العالم منذ عام 2005.</p>
394
+ </div>
395
+
396
+ <div>
397
+ <h4 class="text-lg font-bold mb-4">روابط سريعة</h4>
398
+ <ul class="space-y-2">
399
+ <li><a href="#" class="text-gray-400 hover:text-white transition">الرئيسية</a></li>
400
+ <li><a href="#" class="text-gray-400 hover:text-white transition">المشاريع</a></li>
401
+ <li><a href="#" class="text-gray-400 hover:text-white transition">قصص النجاح</a></li>
402
+ <li><a href="#" class="text-gray-400 hover:text-white transition">التقارير المالية</a></li>
403
+ </ul>
404
+ </div>
405
+
406
+ <div>
407
+ <h4 class="text-lg font-bold mb-4">تواصل معنا</h4>
408
+ <ul class="space-y-2">
409
+ <li class="flex items-center">
410
+ <i class="fas fa-map-marker-alt mr-2 text-green-400"></i>
411
+ <span class="text-gray-400">الرياض، المملكة العربية ��لسعودية</span>
412
+ </li>
413
+ <li class="flex items-center">
414
+ <i class="fas fa-phone mr-2 text-green-400"></i>
415
+ <span class="text-gray-400">920000000</span>
416
+ </li>
417
+ <li class="flex items-center">
418
+ <i class="fas fa-envelope mr-2 text-green-400"></i>
419
+ <span class="text-gray-400">[email protected]</span>
420
+ </li>
421
+ </ul>
422
+ </div>
423
+
424
+ <div>
425
+ <h4 class="text-lg font-bold mb-4">وسائل التواصل</h4>
426
+ <div class="flex space-x-4">
427
+ <a href="#" class="bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-green-600 transition">
428
+ <i class="fab fa-twitter"></i>
429
+ </a>
430
+ <a href="#" class="bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-green-600 transition">
431
+ <i class="fab fa-facebook-f"></i>
432
+ </a>
433
+ <a href="#" class="bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-green-600 transition">
434
+ <i class="fab fa-instagram"></i>
435
+ </a>
436
+ <a href="#" class="bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-green-600 transition">
437
+ <i class="fab fa-youtube"></i>
438
+ </a>
439
+ </div>
440
+
441
+ <div class="mt-6">
442
+ <h5 class="font-bold mb-2">طرق الدفع</h5>
443
+ <div class="flex space-x-2">
444
+ <img src="https://via.placeholder.com/40" alt="Visa" class="w-10 h-6 object-contain">
445
+ <img src="https://via.placeholder.com/40" alt="Mastercard" class="w-10 h-6 object-contain">
446
+ <img src="https://via.placeholder.com/40" alt="Mada" class="w-10 h-6 object-contain">
447
+ <img src="https://via.placeholder.com/40" alt="Apple Pay" class="w-10 h-6 object-contain">
448
+ </div>
449
+ </div>
450
+ </div>
451
+ </div>
452
+
453
+ <div class="border-t border-gray-700 pt-6 flex flex-col md:flex-row justify-between items-center">
454
+ <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 الصندوق الخيري. جميع الحقوق محفوظة.</p>
455
+ <div class="flex space-x-6">
456
+ <a href="#" class="text-gray-400 hover:text-white text-sm transition">سياسة الخصوصية</a>
457
+ <a href="#" class="text-gray-400 hover:text-white text-sm transition">شروط الاستخدام</a>
458
+ <a href="#" class="text-gray-400 hover:text-white text-sm transition">الأسئلة الشائعة</a>
459
+ </div>
460
+ </div>
461
+ </div>
462
+ </footer>
463
+
464
+ <script>
465
+ // Highlight selected donation amount
466
+ document.querySelectorAll('.donation-amount').forEach(button => {
467
+ button.addEventListener('click', function() {
468
+ document.querySelectorAll('.donation-amount').forEach(btn => {
469
+ btn.classList.remove('bg-green-500', 'text-white');
470
+ btn.classList.add('bg-gray-100', 'hover:bg-green-100');
471
+ });
472
+ this.classList.remove('bg-gray-100', 'hover:bg-green-100');
473
+ this.classList.add('bg-green-500', 'text-white');
474
+ });
475
+ });
476
+
477
+ // Form submission
478
+ document.getElementById('donationForm').addEventListener('submit', function(e) {
479
+ e.preventDefault();
480
+ alert('شكرًا لتبرعك الكريم! سيتم تحويلك الآن لصفحة الدفع.');
481
+ // Here you would typically redirect to payment gateway
482
+ });
483
+
484
+ // Mobile menu toggle (would need more implementation)
485
+ document.querySelector('.md\\:hidden').addEventListener('click', function() {
486
+ alert('سيتم فتح قائمة الجوال هنا في التطبيق الكامل');
487
+ });
488
+ </script>
489
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Gresso/charity-fund" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
490
+ </html>