Hugging Face's logo

Spaces:
methodya
/
test
Running

App Files Community
methodya commited on
Commit
e122023
·
verified ·
1 Parent(s): cc8e49c

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +699 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Test
3
- emoji: 🔥
4
- colorFrom: indigo
5
- colorTo: yellow
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: test
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: red
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,699 @@
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
+ background-color: #f5f5f5;
15
+ }
16
+
17
+ .book-card {
18
+ transition: all 0.3s ease;
19
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
20
+ }
21
+
22
+ .book-card:hover {
23
+ transform: translateY(-5px);
24
+ box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
25
+ }
26
+
27
+ .auction-timer {
28
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
29
+ }
30
+
31
+ .bid-btn {
32
+ background: linear-gradient(to right, #8e2de2, #4a00e0);
33
+ }
34
+
35
+ .arabic-input {
36
+ text-align: right;
37
+ direction: rtl;
38
+ }
39
+
40
+ .scrollbar-hide::-webkit-scrollbar {
41
+ display: none;
42
+ }
43
+
44
+ .scrollbar-hide {
45
+ -ms-overflow-style: none;
46
+ scrollbar-width: none;
47
+ }
48
+
49
+ .flickity-prev-next-button {
50
+ width: 30px;
51
+ height: 30px;
52
+ border-radius: 50%;
53
+ }
54
+
55
+ @keyframes pulse {
56
+ 0% { transform: scale(1); }
57
+ 50% { transform: scale(1.05); }
58
+ 100% { transform: scale(1); }
59
+ }
60
+
61
+ .pulse-animation {
62
+ animation: pulse 2s infinite;
63
+ }
64
+ </style>
65
+ </head>
66
+ <body class="bg-gray-100">
67
+ <!-- Header -->
68
+ <header class="bg-gradient-to-r from-indigo-900 to-purple-800 text-white shadow-lg">
69
+ <div class="container mx-auto px-4 py-6">
70
+ <div class="flex justify-between items-center">
71
+ <div class="flex items-center space-x-4">
72
+ <i class="fas fa-book-open text-3xl"></i>
73
+ <h1 class="text-2xl font-bold">مزاد الكتب التراثية</h1>
74
+ </div>
75
+ <div class="flex items-center space-x-6">
76
+ <a href="#" class="hover:text-yellow-300 transition"><i class="fas fa-home"></i> الرئيسية</a>
77
+ <a href="#" class="hover:text-yellow-300 transition"><i class="fas fa-gavel"></i> المزادات</a>
78
+ <a href="#" class="hover:text-yellow-300 transition"><i class="fas fa-info-circle"></i> عن الموقع</a>
79
+ <button class="bg-yellow-500 hover:bg-yellow-600 text-gray-900 font-bold px-4 py-2 rounded-full transition">
80
+ <i class="fas fa-user mr-2"></i>تسجيل الدخول
81
+ </button>
82
+ </div>
83
+ </div>
84
+ </div>
85
+ </header>
86
+
87
+ <!-- Hero Section -->
88
+ <section class="bg-gradient-to-r from-blue-900 to-indigo-800 text-white py-16">
89
+ <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
90
+ <div class="md:w-1/2 mb-8 md:mb-0">
91
+ <h2 class="text-4xl font-bold mb-4">اكتشف كنوز المعرفة التراثية</h2>
92
+ <p class="text-xl mb-6">شارك في المزادات الحصرية لأندر الكتب والمخطوطات التراثية من مختلف العصور والحضارات</p>
93
+ <div class="flex space-x-4">
94
+ <button class="bg-yellow-500 hover:bg-yellow-600 text-gray-900 font-bold px-6 py-3 rounded-full transition">
95
+ <i class="fas fa-gavel mr-2"></i>المزادات الحالية
96
+ </button>
97
+ <button class="bg-transparent border-2 border-white hover:bg-white hover:text-indigo-900 font-bold px-6 py-3 rounded-full transition">
98
+ <i class="fas fa-book mr-2"></i>تصفح الكتالوج
99
+ </button>
100
+ </div>
101
+ </div>
102
+ <div class="md:w-1/2 flex justify-center">
103
+ <div class="relative w-64 h-80 bg-white bg-opacity-20 rounded-lg shadow-2xl flex items-center justify-center">
104
+ <div class="absolute inset-0 bg-gradient-to-br from-transparent via-white to-transparent opacity-20"></div>
105
+ <i class="fas fa-book-quran text-8xl text-white opacity-70"></i>
106
+ <div class="absolute -bottom-4 -right-4 bg-yellow-500 text-gray-900 font-bold px-4 py-2 rounded-full">
107
+ مخطوطة نادرة
108
+ </div>
109
+ </div>
110
+ </div>
111
+ </div>
112
+ </section>
113
+
114
+ <!-- Featured Auctions -->
115
+ <section class="py-12 bg-white">
116
+ <div class="container mx-auto px-4">
117
+ <div class="flex justify-between items-center mb-8">
118
+ <h2 class="text-3xl font-bold text-gray-800">المزادات المميزة</h2>
119
+ <a href="#" class="text-indigo-700 hover:text-indigo-900 font-medium flex items-center">
120
+ عرض الكل <i class="fas fa-arrow-left mr-2"></i>
121
+ </a>
122
+ </div>
123
+
124
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
125
+ <!-- Auction Item 1 -->
126
+ <div class="book-card bg-white rounded-xl overflow-hidden shadow-lg relative">
127
+ <div class="relative h-48 overflow-hidden">
128
+ <img src="https://images.unsplash.com/photo-1544947950-2a1eec1b6a3a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
129
+ alt="كتاب تراثي" class="w-full h-full object-cover">
130
+ <div class="absolute top-4 right-4 bg-red-600 text-white px-3 py-1 rounded-full text-sm font-bold">
131
+ <i class="fas fa-fire mr-1"></i> ساخن
132
+ </div>
133
+ </div>
134
+ <div class="p-6">
135
+ <h3 class="text-xl font-bold text-gray-800 mb-2">مخطوطة الأزهرية في النحو</h3>
136
+ <p class="text-gray-600 mb-4">مخطوطة نادرة تعود للقرن 12 الهجري بخط اليد، بحالة ممتازة</p>
137
+
138
+ <div class="auction-timer p-4 rounded-lg mb-4">
139
+ <p class="text-gray-700 font-medium mb-2">ينتهي المزاد خلال:</p>
140
+ <div class="flex justify-between text-center">
141
+ <div>
142
+ <div class="text-2xl font-bold text-indigo-800">02</div>
143
+ <div class="text-xs text-gray-600">أيام</div>
144
+ </div>
145
+ <div>
146
+ <div class="text-2xl font-bold text-indigo-800">14</div>
147
+ <div class="text-xs text-gray-600">ساعات</div>
148
+ </div>
149
+ <div>
150
+ <div class="text-2xl font-bold text-indigo-800">32</div>
151
+ <div class="text-xs text-gray-600">دقائق</div>
152
+ </div>
153
+ <div>
154
+ <div class="text-2xl font-bold text-indigo-800">15</div>
155
+ <div class="text-xs text-gray-600">ثواني</div>
156
+ </div>
157
+ </div>
158
+ </div>
159
+
160
+ <div class="flex justify-between items-center mb-4">
161
+ <div>
162
+ <p class="text-gray-600 text-sm">السعر الحالي</p>
163
+ <p class="text-2xl font-bold text-indigo-800">1,250 ر.س</p>
164
+ </div>
165
+ <div>
166
+ <p class="text-gray-600 text-sm">عدد المزايدات</p>
167
+ <p class="text-xl font-bold text-center">14</p>
168
+ </div>
169
+ </div>
170
+
171
+ <button class="bid-btn w-full text-white font-bold py-3 rounded-lg hover:opacity-90 transition">
172
+ <i class="fas fa-gavel mr-2"></i>قدم مزايدة
173
+ </button>
174
+ </div>
175
+ </div>
176
+
177
+ <!-- Auction Item 2 -->
178
+ <div class="book-card bg-white rounded-xl overflow-hidden shadow-lg relative">
179
+ <div class="relative h-48 overflow-hidden">
180
+ <img src="https://images.unsplash.com/photo-1589998059171-988d322b03dd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
181
+ alt="كتاب تراثي" class="w-full h-full object-cover">
182
+ <div class="absolute top-4 right-4 bg-blue-600 text-white px-3 py-1 rounded-full text-sm font-bold">
183
+ <i class="fas fa-star mr-1"></i> مميز
184
+ </div>
185
+ </div>
186
+ <div class="p-6">
187
+ <h3 class="text-xl font-bold text-gray-800 mb-2">ديوان المتنبي بخط اليد</h3>
188
+ <p class="text-gray-600 mb-4">نسخة أصلية نادرة من ديوان المتنبي تعود للقرن 10 الهجري</p>
189
+
190
+ <div class="auction-timer p-4 rounded-lg mb-4">
191
+ <p class="text-gray-700 font-medium mb-2">ينتهي المزاد خلال:</p>
192
+ <div class="flex justify-between text-center">
193
+ <div>
194
+ <div class="text-2xl font-bold text-indigo-800">05</div>
195
+ <div class="text-xs text-gray-600">أيام</div>
196
+ </div>
197
+ <div>
198
+ <div class="text-2xl font-bold text-indigo-800">08</div>
199
+ <div class="text-xs text-gray-600">ساعات</div>
200
+ </div>
201
+ <div>
202
+ <div class="text-2xl font-bold text-indigo-800">45</div>
203
+ <div class="text-xs text-gray-600">دقائق</div>
204
+ </div>
205
+ <div>
206
+ <div class="text-2xl font-bold text-indigo-800">22</div>
207
+ <div class="text-xs text-gray-600">ثواني</div>
208
+ </div>
209
+ </div>
210
+ </div>
211
+
212
+ <div class="flex justify-between items-center mb-4">
213
+ <div>
214
+ <p class="text-gray-600 text-sm">السعر الحالي</p>
215
+ <p class="text-2xl font-bold text-indigo-800">3,750 ر.س</p>
216
+ </div>
217
+ <div>
218
+ <p class="text-gray-600 text-sm">عدد المزايدات</p>
219
+ <p class="text-xl font-bold text-center">27</p>
220
+ </div>
221
+ </div>
222
+
223
+ <button class="bid-btn w-full text-white font-bold py-3 rounded-lg hover:opacity-90 transition">
224
+ <i class="fas fa-gavel mr-2"></i>قدم مزايدة
225
+ </button>
226
+ </div>
227
+ </div>
228
+
229
+ <!-- Auction Item 3 -->
230
+ <div class="book-card bg-white rounded-xl overflow-hidden shadow-lg relative">
231
+ <div class="relative h-48 overflow-hidden">
232
+ <img src="https://images.unsplash.com/photo-1541963463532-d68292c34b19?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
233
+ alt="كتاب تراثي" class="w-full h-full object-cover">
234
+ <div class="absolute top-4 right-4 bg-green-600 text-white px-3 py-1 rounded-full text-sm font-bold">
235
+ <i class="fas fa-certificate mr-1"></i> جديد
236
+ </div>
237
+ </div>
238
+ <div class="p-6">
239
+ <h3 class="text-xl font-bold text-gray-800 mb-2">كتاب كليلة ودمنة</h3>
240
+ <p class="text-gray-600 mb-4">طبعة نادرة من كتاب كليلة ودمنة تعود لعام 1893م مع رسوم أصلية</p>
241
+
242
+ <div class="auction-timer p-4 rounded-lg mb-4">
243
+ <p class="text-gray-700 font-medium mb-2">ينتهي المزاد خلال:</p>
244
+ <div class="flex justify-between text-center">
245
+ <div>
246
+ <div class="text-2xl font-bold text-indigo-800">01</div>
247
+ <div class="text-xs text-gray-600">يوم</div>
248
+ </div>
249
+ <div>
250
+ <div class="text-2xl font-bold text-indigo-800">06</div>
251
+ <div class="text-xs text-gray-600">ساعات</div>
252
+ </div>
253
+ <div>
254
+ <div class="text-2xl font-bold text-indigo-800">12</div>
255
+ <div class="text-xs text-gray-600">دقائق</div>
256
+ </div>
257
+ <div>
258
+ <div class="text-2xl font-bold text-indigo-800">45</div>
259
+ <div class="text-xs text-gray-600">ثواني</div>
260
+ </div>
261
+ </div>
262
+ </div>
263
+
264
+ <div class="flex justify-between items-center mb-4">
265
+ <div>
266
+ <p class="text-gray-600 text-sm">السعر الحالي</p>
267
+ <p class="text-2xl font-bold text-indigo-800">2,150 ر.س</p>
268
+ </div>
269
+ <div>
270
+ <p class="text-gray-600 text-sm">عدد المزايدات</p>
271
+ <p class="text-xl font-bold text-center">19</p>
272
+ </div>
273
+ </div>
274
+
275
+ <button class="bid-btn w-full text-white font-bold py-3 rounded-lg hover:opacity-90 transition">
276
+ <i class="fas fa-gavel mr-2"></i>قدم مزايدة
277
+ </button>
278
+ </div>
279
+ </div>
280
+ </div>
281
+ </div>
282
+ </section>
283
+
284
+ <!-- Categories Section -->
285
+ <section class="py-12 bg-gray-100">
286
+ <div class="container mx-auto px-4">
287
+ <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">تصفح حسب التصنيفات</h2>
288
+
289
+ <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
290
+ <a href="#" class="category-card bg-white rounded-lg shadow-md p-6 text-center hover:shadow-lg transition">
291
+ <div class="bg-blue-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-3">
292
+ <i class="fas fa-quran text-blue-600 text-2xl"></i>
293
+ </div>
294
+ <h3 class="font-bold text-gray-800">القرآن وعلومه</h3>
295
+ <p class="text-sm text-gray-600 mt-1">(42 كتاب)</p>
296
+ </a>
297
+
298
+ <a href="#" class="category-card bg-white rounded-lg shadow-md p-6 text-center hover:shadow-lg transition">
299
+ <div class="bg-purple-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-3">
300
+ <i class="fas fa-book-open text-purple-600 text-2xl"></i>
301
+ </div>
302
+ <h3 class="font-bold text-gray-800">اللغة العربية</h3>
303
+ <p class="text-sm text-gray-600 mt-1">(76 كتاب)</p>
304
+ </a>
305
+
306
+ <a href="#" class="category-card bg-white rounded-lg shadow-md p-6 text-center hover:shadow-lg transition">
307
+ <div class="bg-green-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-3">
308
+ <i class="fas fa-scroll text-green-600 text-2xl"></i>
309
+ </div>
310
+ <h3 class="font-bold text-gray-800">المخطوطات</h3>
311
+ <p class="text-sm text-gray-600 mt-1">(28 مخطوطة)</p>
312
+ </a>
313
+
314
+ <a href="#" class="category-card bg-white rounded-lg shadow-md p-6 text-center hover:shadow-lg transition">
315
+ <div class="bg-yellow-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-3">
316
+ <i class="fas fa-history text-yellow-600 text-2xl"></i>
317
+ </div>
318
+ <h3 class="font-bold text-gray-800">التاريخ</h3>
319
+ <p class="text-sm text-gray-600 mt-1">(53 كتاب)</p>
320
+ </a>
321
+
322
+ <a href="#" class="category-card bg-white rounded-lg shadow-md p-6 text-center hover:shadow-lg transition">
323
+ <div class="bg-red-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-3">
324
+ <i class="fas fa-heart text-red-600 text-2xl"></i>
325
+ </div>
326
+ <h3 class="font-bold text-gray-800">الأدب والشعر</h3>
327
+ <p class="text-sm text-gray-600 mt-1">(89 كتاب)</p>
328
+ </a>
329
+
330
+ <a href="#" class="category-card bg-white rounded-lg shadow-md p-6 text-center hover:shadow-lg transition">
331
+ <div class="bg-indigo-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-3">
332
+ <i class="fas fa-atom text-indigo-600 text-2xl"></i>
333
+ </div>
334
+ <h3 class="font-bold text-gray-800">العلوم</h3>
335
+ <p class="text-sm text-gray-600 mt-1">(31 كتاب)</p>
336
+ </a>
337
+ </div>
338
+ </div>
339
+ </section>
340
+
341
+ <!-- How It Works -->
342
+ <section class="py-12 bg-white">
343
+ <div class="container mx-auto px-4">
344
+ <h2 class="text-3xl font-bold text-gray-800 mb-12 text-center">كيف يعمل المزاد؟</h2>
345
+
346
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
347
+ <div class="flex flex-col items-center text-center p-6">
348
+ <div class="bg-blue-100 w-20 h-20 rounded-full flex items-center justify-center mb-4 text-blue-600 text-3xl font-bold">1</div>
349
+ <h3 class="text-xl font-bold text-gray-800 mb-2">سجل حسابك</h3>
350
+ <p class="text-gray-600">قم بإنشاء حسابك في الموقع بخطوات بسيطة لتتمكن من المشاركة في المزادات</p>
351
+ </div>
352
+
353
+ <div class="flex flex-col items-center text-center p-6">
354
+ <div class="bg-purple-100 w-20 h-20 rounded-full flex items-center justify-center mb-4 text-purple-600 text-3xl font-bold">2</div>
355
+ <h3 class="text-xl font-bold text-gray-800 mb-2">قدم مزايدتك</h3>
356
+ <p class="text-gray-600">اختر الكتاب الذي يعجبك وقدم مزايدة أعلى من السعر الحالي</p>
357
+ </div>
358
+
359
+ <div class="flex flex-col items-center text-center p-6">
360
+ <div class="bg-green-100 w-20 h-20 rounded-full flex items-center justify-center mb-4 text-green-600 text-3xl font-bold">3</div>
361
+ <h3 class="text-xl font-bold text-gray-800 mb-2">احصل على الكتاب</h3>
362
+ <p class="text-gray-600">إذا كنت الفائز بالمزاد، سيتم التواصل معك لإتمام عملية الشراء والشحن</p>
363
+ </div>
364
+ </div>
365
+ </div>
366
+ </section>
367
+
368
+ <!-- Testimonials -->
369
+ <section class="py-12 bg-gray-100">
370
+ <div class="container mx-auto px-4">
371
+ <h2 class="text-3xl font-bold text-gray-800 mb-12 text-center">آراء عملائنا</h2>
372
+
373
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
374
+ <div class="bg-white p-6 rounded-lg shadow-md">
375
+ <div class="flex items-center mb-4">
376
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="عميل" class="w-12 h-12 rounded-full mr-4">
377
+ <div>
378
+ <h4 class="font-bold text-gray-800">أحمد السيد</h4>
379
+ <div class="flex text-yellow-400">
380
+ <i class="fas fa-star"></i>
381
+ <i class="fas fa-star"></i>
382
+ <i class="fas fa-star"></i>
383
+ <i class="fas fa-star"></i>
384
+ <i class="fas fa-star"></i>
385
+ </div>
386
+ </div>
387
+ </div>
388
+ <p class="text-gray-600">"حصلت على مخطوطة نادرة من القرن التاسع الهجري بحالة ممتازة، شكرًا لكم على هذا الموقع الرائع!"</p>
389
+ </div>
390
+
391
+ <div class="bg-white p-6 rounded-lg shadow-md">
392
+ <div class="flex items-center mb-4">
393
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="عميل" class="w-12 h-12 rounded-full mr-4">
394
+ <div>
395
+ <h4 class="font-bold text-gray-800">فاطمة محمد</h4>
396
+ <div class="flex text-yellow-400">
397
+ <i class="fas fa-star"></i>
398
+ <i class="fas fa-star"></i>
399
+ <i class="fas fa-star"></i>
400
+ <i class="fas fa-star"></i>
401
+ <i class="fas fa-star-half-alt"></i>
402
+ </div>
403
+ </div>
404
+ </div>
405
+ <p class="text-gray-600">"تجربة رائعة، الموقع سهل الاستخدام والكتب المقدمة أصلية ونادرة كما هو موصوف"</p>
406
+ </div>
407
+
408
+ <div class="bg-white p-6 rounded-lg shadow-md">
409
+ <div class="flex items-center mb-4">
410
+ <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="عميل" class="w-12 h-12 rounded-full mr-4">
411
+ <div>
412
+ <h4 class="font-bold text-gray-800">خالد عبدالله</h4>
413
+ <div class="flex text-yellow-400">
414
+ <i class="fas fa-star"></i>
415
+ <i class="fas fa-star"></i>
416
+ <i class="fas fa-star"></i>
417
+ <i class="fas fa-star"></i>
418
+ <i class="fas fa-star"></i>
419
+ </div>
420
+ </div>
421
+ </div>
422
+ <p class="text-gray-600">"أضفت إلى مكتبتي عدة كتب نا��رة لم أكن أظن أني سأجدها، شكرًا لفريق العمل على الاحترافية"</p>
423
+ </div>
424
+ </div>
425
+ </div>
426
+ </section>
427
+
428
+ <!-- Newsletter -->
429
+ <section class="py-12 bg-gradient-to-r from-indigo-900 to-purple-800 text-white">
430
+ <div class="container mx-auto px-4 text-center">
431
+ <h2 class="text-3xl font-bold mb-4">اشترك في نشرتنا البريدية</h2>
432
+ <p class="text-xl mb-8 opacity-90">احصل على آخر المزادات والعروض مباشرة إلى بريدك الإلكتروني</p>
433
+
434
+ <div class="max-w-md mx-auto flex">
435
+ <input type="email" placeholder="بريدك الإلكتروني" class="arabic-input flex-grow px-4 py-3 rounded-r-lg focus:outline-none text-gray-900">
436
+ <button class="bg-yellow-500 hover:bg-yellow-600 text-gray-900 font-bold px-6 py-3 rounded-l-lg transition">
437
+ اشترك الآن
438
+ </button>
439
+ </div>
440
+ </div>
441
+ </section>
442
+
443
+ <!-- Footer -->
444
+ <footer class="bg-gray-900 text-white py-12">
445
+ <div class="container mx-auto px-4">
446
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
447
+ <div>
448
+ <div class="flex items-center mb-4">
449
+ <i class="fas fa-book-open text-2xl mr-2"></i>
450
+ <h3 class="text-xl font-bold">مزاد الكتب التراثية</h3>
451
+ </div>
452
+ <p class="text-gray-400">منصة متخصصة في بيع الكتب والمخطوطات التراثية النادرة عبر المزادات الإلكترونية</p>
453
+ <div class="flex space-x-4 mt-6">
454
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter text-xl"></i></a>
455
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook text-xl"></i></a>
456
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram text-xl"></i></a>
457
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-youtube text-xl"></i></a>
458
+ </div>
459
+ </div>
460
+
461
+ <div>
462
+ <h4 class="text-lg font-bold mb-4">روابط سريعة</h4>
463
+ <ul class="space-y-2">
464
+ <li><a href="#" class="text-gray-400 hover:text-white transition">المزادات الحالية</a></li>
465
+ <li><a href="#" class="text-gray-400 hover:text-white transition">المزادات القادمة</a></li>
466
+ <li><a href="#" class="text-gray-400 hover:text-white transition">المزادات المنتهية</a></li>
467
+ <li><a href="#" class="text-gray-400 hover:text-white transition">كيفية المشاركة</a></li>
468
+ <li><a href="#" class="text-gray-400 hover:text-white transition">الشروط والأحكام</a></li>
469
+ </ul>
470
+ </div>
471
+
472
+ <div>
473
+ <h4 class="text-lg font-bold mb-4">تصنيفات</h4>
474
+ <ul class="space-y-2">
475
+ <li><a href="#" class="text-gray-400 hover:text-white transition">القرآن وعلومه</a></li>
476
+ <li><a href="#" class="text-gray-400 hover:text-white transition">اللغة العربية</a></li>
477
+ <li><a href="#" class="text-gray-400 hover:text-white transition">المخطوطات</a></li>
478
+ <li><a href="#" class="text-gray-400 hover:text-white transition">التاريخ</a></li>
479
+ <li><a href="#" class="text-gray-400 hover:text-white transition">الأدب والشعر</a></li>
480
+ </ul>
481
+ </div>
482
+
483
+ <div>
484
+ <h4 class="text-lg font-bold mb-4">تواصل معنا</h4>
485
+ <ul class="space-y-2">
486
+ <li class="flex items-center">
487
+ <i class="fas fa-map-marker-alt mr-2 text-gray-400"></i>
488
+ <span class="text-gray-400">الرياض، المملكة العربية السعودية</span>
489
+ </li>
490
+ <li class="flex items-center">
491
+ <i class="fas fa-phone-alt mr-2 text-gray-400"></i>
492
+ <span class="text-gray-400">+966 12 345 6789</span>
493
+ </li>
494
+ <li class="flex items-center">
495
+ <i class="fas fa-envelope mr-2 text-gray-400"></i>
496
+ <span class="text-gray-400">info@heritage-auction.com</span>
497
+ </li>
498
+ </ul>
499
+ </div>
500
+ </div>
501
+
502
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
503
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 مزاد الكتب التراثية. جميع الحقوق محفوظة.</p>
504
+ <div class="flex space-x-6">
505
+ <a href="#" class="text-gray-400 hover:text-white transition">سياسة الخصوصية</a>
506
+ <a href="#" class="text-gray-400 hover:text-white transition">الشروط والأحكام</a>
507
+ <a href="#" class="text-gray-400 hover:text-white transition">الأسئلة الشائعة</a>
508
+ </div>
509
+ </div>
510
+ </div>
511
+ </footer>
512
+
513
+ <!-- Bid Modal -->
514
+ <div id="bidModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
515
+ <div class="bg-white rounded-lg w-full max-w-md mx-4">
516
+ <div class="p-6">
517
+ <div class="flex justify-between items-center mb-4">
518
+ <h3 class="text-xl font-bold text-gray-800">تقديم مزايدة</h3>
519
+ <button id="closeModal" class="text-gray-500 hover:text-gray-700">
520
+ <i class="fas fa-times"></i>
521
+ </button>
522
+ </div>
523
+
524
+ <div class="mb-6">
525
+ <h4 class="font-bold text-gray-800 mb-2">مخطوطة الأزهرية في النحو</h4>
526
+ <p class="text-gray-600 mb-4">السعر الحالي: <span class="font-bold text-indigo-800">1,250 ر.س</span></p>
527
+
528
+ <div class="mb-4">
529
+ <label for="bidAmount" class="block text-gray-700 mb-2">المبلغ (ر.س)</label>
530
+ <input type="number" id="bidAmount" class="arabic-input w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="أدخل المبلغ">
531
+ </div>
532
+
533
+ <div class="mb-4">
534
+ <label for="bidIncrement" class="block text-gray-700 mb-2">زيادة المزاد</label>
535
+ <select id="bidIncrement" class="arabic-input w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
536
+ <option value="50">50 ر.س</option>
537
+ <option value="100">100 ر.س</option>
538
+ <option value="250">250 ر.س</option>
539
+ <option value="500">500 ر.س</option>
540
+ <option value="custom">مخصص</option>
541
+ </select>
542
+ </div>
543
+
544
+ <div class="bg-gray-100 p-4 rounded-lg mb-4">
545
+ <p class="text-gray-700">المبلغ الإجمالي: <span id="totalBid" class="font-bold text-indigo-800">1,300 ر.س</span></p>
546
+ </div>
547
+ </div>
548
+
549
+ <div class="flex space-x-4">
550
+ <button id="submitBid" class="bid-btn flex-grow text-white font-bold py-3 rounded-lg hover:opacity-90 transition">
551
+ <i class="fas fa-gavel mr-2"></i>تأكيد المزايدة
552
+ </button>
553
+ <button id="cancelBid" class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-3 px-6 rounded-lg transition">
554
+ إلغاء
555
+ </button>
556
+ </div>
557
+ </div>
558
+ </div>
559
+ </div>
560
+
561
+ <!-- Success Toast -->
562
+ <div id="successToast" class="fixed bottom-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg flex items-center hidden">
563
+ <i class="fas fa-check-circle mr-2"></i>
564
+ <span>تم تقديم مزايدتك بنجاح!</span>
565
+ </div>
566
+
567
+ <script>
568
+ // Bid Modal Functionality
569
+ const bidButtons = document.querySelectorAll('.bid-btn');
570
+ const bidModal = document.getElementById('bidModal');
571
+ const closeModal = document.getElementById('closeModal');
572
+ const cancelBid = document.getElementById('cancelBid');
573
+ const submitBid = document.getElementById('submitBid');
574
+ const bidAmount = document.getElementById('bidAmount');
575
+ const bidIncrement = document.getElementById('bidIncrement');
576
+ const totalBid = document.getElementById('totalBid');
577
+ const successToast = document.getElementById('successToast');
578
+
579
+ // Current bid amount (for demo purposes)
580
+ let currentBid = 1250;
581
+
582
+ // Open modal when any bid button is clicked
583
+ bidButtons.forEach(button => {
584
+ button.addEventListener('click', () => {
585
+ bidModal.classList.remove('hidden');
586
+ document.body.style.overflow = 'hidden';
587
+
588
+ // Set initial bid amount
589
+ bidAmount.value = currentBid + 50;
590
+ updateTotalBid();
591
+ });
592
+ });
593
+
594
+ // Close modal
595
+ function closeBidModal() {
596
+ bidModal.classList.add('hidden');
597
+ document.body.style.overflow = 'auto';
598
+ }
599
+
600
+ closeModal.addEventListener('click', closeBidModal);
601
+ cancelBid.addEventListener('click', closeBidModal);
602
+
603
+ // Update total bid when amount or increment changes
604
+ function updateTotalBid() {
605
+ const amount = parseInt(bidAmount.value) || 0;
606
+ totalBid.textContent = amount.toLocaleString() + ' ر.س';
607
+ }
608
+
609
+ bidAmount.addEventListener('input', updateTotalBid);
610
+ bidIncrement.addEventListener('change', function() {
611
+ if (this.value !== 'custom') {
612
+ bidAmount.value = currentBid + parseInt(this.value);
613
+ updateTotalBid();
614
+ }
615
+ });
616
+
617
+ // Submit bid
618
+ submitBid.addEventListener('click', function() {
619
+ const amount = parseInt(bidAmount.value);
620
+
621
+ if (isNaN(amount) || amount <= currentBid) {
622
+ alert('يجب أن يكون المبلغ أكبر من السعر الحالي');
623
+ return;
624
+ }
625
+
626
+ // In a real app, you would send this to your backend
627
+ console.log('New bid submitted:', amount);
628
+
629
+ // Show success message
630
+ closeBidModal();
631
+ successToast.classList.remove('hidden');
632
+
633
+ // Hide success message after 3 seconds
634
+ setTimeout(() => {
635
+ successToast.classList.add('hidden');
636
+ }, 3000);
637
+ });
638
+
639
+ // Countdown timer for auctions (demo)
640
+ function updateCountdowns() {
641
+ const countdowns = document.querySelectorAll('.auction-timer');
642
+
643
+ countdowns.forEach(timer => {
644
+ const daysElement = timer.querySelector('div:nth-child(1) div:first-child');
645
+ const hoursElement = timer.querySelector('div:nth-child(2) div:first-child');
646
+ const minutesElement = timer.querySelector('div:nth-child(3) div:first-child');
647
+ const secondsElement = timer.querySelector('div:nth-child(4) div:first-child');
648
+
649
+ let days = parseInt(daysElement.textContent);
650
+ let hours = parseInt(hoursElement.textContent);
651
+ let minutes = parseInt(minutesElement.textContent);
652
+ let seconds = parseInt(secondsElement.textContent);
653
+
654
+ // Decrease seconds
655
+ seconds--;
656
+
657
+ if (seconds < 0) {
658
+ seconds = 59;
659
+ minutes--;
660
+
661
+ if (minutes < 0) {
662
+ minutes = 59;
663
+ hours--;
664
+
665
+ if (hours < 0) {
666
+ hours = 23;
667
+ days--;
668
+ }
669
+ }
670
+ }
671
+
672
+ // Update elements
673
+ daysElement.textContent = days.toString().padStart(2, '0');
674
+ hoursElement.textContent = hours.toString().padStart(2, '0');
675
+ minutesElement.textContent = minutes.toString().padStart(2, '0');
676
+ secondsElement.textContent = seconds.toString().padStart(2, '0');
677
+ });
678
+ }
679
+
680
+ // Update countdown every second
681
+ setInterval(updateCountdowns, 1000);
682
+
683
+ // Pulse animation for featured items
684
+ const featuredItems = document.querySelectorAll('.book-card');
685
+
686
+ featuredItems.forEach((item, index) => {
687
+ // Add delay to each item
688
+ setTimeout(() => {
689
+ item.classList.add('pulse-animation');
690
+
691
+ // Remove animation after first pulse
692
+ setTimeout(() => {
693
+ item.classList.remove('pulse-animation');
694
+ }, 2000);
695
+ }, index * 300);
696
+ });
697
+ </script>
698
+ <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=methodya/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
699
+ </html>