Hugging Face's logo

Spaces:
hassnsaad
/
anycoder-e7ea7357
Running

App Files Community
hassnsaad commited on
Commit
8b050a5
·
verified ·
1 Parent(s): 6929712

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1187 -19
index.html CHANGED
@@ -1,19 +1,1187 @@
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
+
8
+ <!-- Font Awesome for icons -->
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
10
+
11
+ <!-- Google Fonts -->
12
+ <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;900&display=swap" rel="stylesheet">
13
+
14
+ <style>
15
+ * {
16
+ margin: 0;
17
+ padding: 0;
18
+ box-sizing: border-box;
19
+ }
20
+
21
+ :root {
22
+ --primary-color: #1e3a8a;
23
+ --secondary-color: #f59e0b;
24
+ --accent-color: #10b981;
25
+ --danger-color: #ef4444;
26
+ --dark: #1f2937;
27
+ --light: #f3f4f6;
28
+ --white: #ffffff;
29
+ --gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
30
+ --gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
31
+ --gradient-3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
32
+ --gradient-4: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
33
+ --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
34
+ --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
35
+ --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
36
+ --shadow-xl: 0 20px 25px rgba(0,0,0,0.1);
37
+ }
38
+
39
+ body {
40
+ font-family: 'Tajawal', sans-serif;
41
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
42
+ min-height: 100vh;
43
+ overflow-x: hidden;
44
+ }
45
+
46
+ /* Loading Screen */
47
+ .loading-screen {
48
+ position: fixed;
49
+ top: 0;
50
+ left: 0;
51
+ width: 100%;
52
+ height: 100%;
53
+ background: var(--gradient-1);
54
+ display: flex;
55
+ justify-content: center;
56
+ align-items: center;
57
+ z-index: 9999;
58
+ transition: opacity 0.5s, visibility 0.5s;
59
+ }
60
+
61
+ .loading-screen.hidden {
62
+ opacity: 0;
63
+ visibility: hidden;
64
+ }
65
+
66
+ .loader {
67
+ width: 80px;
68
+ height: 80px;
69
+ border: 4px solid rgba(255,255,255,0.3);
70
+ border-top-color: white;
71
+ border-radius: 50%;
72
+ animation: spin 1s linear infinite;
73
+ }
74
+
75
+ @keyframes spin {
76
+ to { transform: rotate(360deg); }
77
+ }
78
+
79
+ /* Header */
80
+ header {
81
+ background: rgba(255, 255, 255, 0.95);
82
+ backdrop-filter: blur(10px);
83
+ box-shadow: var(--shadow-lg);
84
+ position: sticky;
85
+ top: 0;
86
+ z-index: 1000;
87
+ animation: slideDown 0.5s ease-out;
88
+ }
89
+
90
+ @keyframes slideDown {
91
+ from {
92
+ transform: translateY(-100%);
93
+ opacity: 0;
94
+ }
95
+ to {
96
+ transform: translateY(0);
97
+ opacity: 1;
98
+ }
99
+ }
100
+
101
+ nav {
102
+ display: flex;
103
+ justify-content: space-between;
104
+ align-items: center;
105
+ padding: 1rem 2rem;
106
+ max-width: 1400px;
107
+ margin: 0 auto;
108
+ }
109
+
110
+ .logo {
111
+ display: flex;
112
+ align-items: center;
113
+ gap: 0.5rem;
114
+ font-size: 1.5rem;
115
+ font-weight: 900;
116
+ color: var(--primary-color);
117
+ text-decoration: none;
118
+ transition: transform 0.3s;
119
+ }
120
+
121
+ .logo:hover {
122
+ transform: scale(1.05);
123
+ }
124
+
125
+ .logo i {
126
+ font-size: 2rem;
127
+ background: var(--gradient-1);
128
+ -webkit-background-clip: text;
129
+ -webkit-text-fill-color: transparent;
130
+ }
131
+
132
+ .nav-links {
133
+ display: flex;
134
+ gap: 2rem;
135
+ list-style: none;
136
+ align-items: center;
137
+ }
138
+
139
+ .nav-links a {
140
+ color: var(--dark);
141
+ text-decoration: none;
142
+ font-weight: 500;
143
+ transition: all 0.3s;
144
+ position: relative;
145
+ padding: 0.5rem 0;
146
+ }
147
+
148
+ .nav-links a::after {
149
+ content: '';
150
+ position: absolute;
151
+ bottom: 0;
152
+ right: 0;
153
+ width: 0;
154
+ height: 2px;
155
+ background: var(--gradient-1);
156
+ transition: width 0.3s;
157
+ }
158
+
159
+ .nav-links a:hover::after {
160
+ width: 100%;
161
+ }
162
+
163
+ .lang-toggle {
164
+ background: var(--gradient-1);
165
+ color: white;
166
+ border: none;
167
+ padding: 0.5rem 1rem;
168
+ border-radius: 25px;
169
+ cursor: pointer;
170
+ font-weight: 500;
171
+ transition: transform 0.3s, box-shadow 0.3s;
172
+ }
173
+
174
+ .lang-toggle:hover {
175
+ transform: translateY(-2px);
176
+ box-shadow: var(--shadow-lg);
177
+ }
178
+
179
+ /* Hero Section */
180
+ .hero {
181
+ padding: 4rem 2rem;
182
+ text-align: center;
183
+ color: white;
184
+ position: relative;
185
+ overflow: hidden;
186
+ }
187
+
188
+ .hero::before {
189
+ content: '';
190
+ position: absolute;
191
+ top: -50%;
192
+ right: -50%;
193
+ width: 200%;
194
+ height: 200%;
195
+ background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
196
+ animation: float 20s infinite linear;
197
+ }
198
+
199
+ @keyframes float {
200
+ to { transform: rotate(360deg); }
201
+ }
202
+
203
+ .hero h1 {
204
+ font-size: 3rem;
205
+ margin-bottom: 1rem;
206
+ position: relative;
207
+ z-index: 1;
208
+ animation: fadeInUp 0.8s ease-out;
209
+ }
210
+
211
+ @keyframes fadeInUp {
212
+ from {
213
+ opacity: 0;
214
+ transform: translateY(30px);
215
+ }
216
+ to {
217
+ opacity: 1;
218
+ transform: translateY(0);
219
+ }
220
+ }
221
+
222
+ .hero p {
223
+ font-size: 1.2rem;
224
+ margin-bottom: 2rem;
225
+ position: relative;
226
+ z-index: 1;
227
+ animation: fadeInUp 0.8s ease-out 0.2s both;
228
+ }
229
+
230
+ /* Search Section */
231
+ .search-container {
232
+ background: rgba(255, 255, 255, 0.95);
233
+ backdrop-filter: blur(10px);
234
+ border-radius: 20px;
235
+ padding: 2rem;
236
+ max-width: 1200px;
237
+ margin: -2rem auto 2rem;
238
+ box-shadow: var(--shadow-xl);
239
+ position: relative;
240
+ z-index: 10;
241
+ animation: fadeInUp 0.8s ease-out 0.4s both;
242
+ }
243
+
244
+ .search-tabs {
245
+ display: flex;
246
+ gap: 1rem;
247
+ margin-bottom: 2rem;
248
+ border-bottom: 2px solid var(--light);
249
+ }
250
+
251
+ .tab {
252
+ padding: 1rem 2rem;
253
+ background: none;
254
+ border: none;
255
+ color: var(--dark);
256
+ font-weight: 500;
257
+ cursor: pointer;
258
+ position: relative;
259
+ transition: all 0.3s;
260
+ }
261
+
262
+ .tab.active {
263
+ color: var(--primary-color);
264
+ }
265
+
266
+ .tab.active::after {
267
+ content: '';
268
+ position: absolute;
269
+ bottom: -2px;
270
+ right: 0;
271
+ width: 100%;
272
+ height: 2px;
273
+ background: var(--gradient-1);
274
+ }
275
+
276
+ .search-form {
277
+ display: grid;
278
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
279
+ gap: 1rem;
280
+ margin-bottom: 1rem;
281
+ }
282
+
283
+ .form-group {
284
+ position: relative;
285
+ }
286
+
287
+ .form-group i {
288
+ position: absolute;
289
+ right: 1rem;
290
+ top: 50%;
291
+ transform: translateY(-50%);
292
+ color: var(--primary-color);
293
+ }
294
+
295
+ .form-group input,
296
+ .form-group select {
297
+ width: 100%;
298
+ padding: 1rem 3rem 1rem 1rem;
299
+ border: 2px solid var(--light);
300
+ border-radius: 10px;
301
+ font-family: 'Tajawal', sans-serif;
302
+ font-size: 1rem;
303
+ transition: all 0.3s;
304
+ }
305
+
306
+ .form-group input:focus,
307
+ .form-group select:focus {
308
+ outline: none;
309
+ border-color: var(--primary-color);
310
+ box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.1);
311
+ }
312
+
313
+ .search-btn {
314
+ grid-column: span 1;
315
+ background: var(--gradient-1);
316
+ color: white;
317
+ border: none;
318
+ padding: 1rem 2rem;
319
+ border-radius: 10px;
320
+ font-weight: 600;
321
+ cursor: pointer;
322
+ transition: all 0.3s;
323
+ display: flex;
324
+ align-items: center;
325
+ justify-content: center;
326
+ gap: 0.5rem;
327
+ }
328
+
329
+ .search-btn:hover {
330
+ transform: translateY(-2px);
331
+ box-shadow: var(--shadow-lg);
332
+ }
333
+
334
+ /* Features Section */
335
+ .features {
336
+ padding: 4rem 2rem;
337
+ background: white;
338
+ }
339
+
340
+ .container {
341
+ max-width: 1200px;
342
+ margin: 0 auto;
343
+ }
344
+
345
+ .section-title {
346
+ text-align: center;
347
+ font-size: 2.5rem;
348
+ color: var(--dark);
349
+ margin-bottom: 3rem;
350
+ position: relative;
351
+ }
352
+
353
+ .section-title::after {
354
+ content: '';
355
+ position: absolute;
356
+ bottom: -10px;
357
+ right: 50%;
358
+ transform: translateX(50%);
359
+ width: 100px;
360
+ height: 4px;
361
+ background: var(--gradient-1);
362
+ border-radius: 2px;
363
+ }
364
+
365
+ .features-grid {
366
+ display: grid;
367
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
368
+ gap: 2rem;
369
+ }
370
+
371
+ .feature-card {
372
+ background: white;
373
+ border-radius: 20px;
374
+ padding: 2rem;
375
+ box-shadow: var(--shadow-md);
376
+ transition: all 0.3s;
377
+ position: relative;
378
+ overflow: hidden;
379
+ }
380
+
381
+ .feature-card::before {
382
+ content: '';
383
+ position: absolute;
384
+ top: 0;
385
+ right: 0;
386
+ width: 100%;
387
+ height: 4px;
388
+ background: var(--gradient-1);
389
+ transform: scaleX(0);
390
+ transform-origin: right;
391
+ transition: transform 0.3s;
392
+ }
393
+
394
+ .feature-card:hover::before {
395
+ transform: scaleX(1);
396
+ }
397
+
398
+ .feature-card:hover {
399
+ transform: translateY(-5px);
400
+ box-shadow: var(--shadow-xl);
401
+ }
402
+
403
+ .feature-icon {
404
+ width: 60px;
405
+ height: 60px;
406
+ background: var(--gradient-1);
407
+ border-radius: 15px;
408
+ display: flex;
409
+ align-items: center;
410
+ justify-content: center;
411
+ color: white;
412
+ font-size: 1.5rem;
413
+ margin-bottom: 1rem;
414
+ }
415
+
416
+ .feature-card h3 {
417
+ color: var(--dark);
418
+ margin-bottom: 0.5rem;
419
+ }
420
+
421
+ .feature-card p {
422
+ color: #6b7280;
423
+ line-height: 1.6;
424
+ }
425
+
426
+ /* Properties Section */
427
+ .properties {
428
+ padding: 4rem 2rem;
429
+ background: var(--light);
430
+ }
431
+
432
+ .filter-bar {
433
+ display: flex;
434
+ gap: 1rem;
435
+ margin-bottom: 2rem;
436
+ flex-wrap: wrap;
437
+ align-items: center;
438
+ }
439
+
440
+ .filter-btn {
441
+ padding: 0.5rem 1rem;
442
+ background: white;
443
+ border: 2px solid var(--light);
444
+ border-radius: 25px;
445
+ cursor: pointer;
446
+ transition: all 0.3s;
447
+ font-weight: 500;
448
+ }
449
+
450
+ .filter-btn.active {
451
+ background: var(--gradient-1);
452
+ color: white;
453
+ border-color: transparent;
454
+ }
455
+
456
+ .properties-grid {
457
+ display: grid;
458
+ grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
459
+ gap: 2rem;
460
+ }
461
+
462
+ .property-card {
463
+ background: white;
464
+ border-radius: 20px;
465
+ overflow: hidden;
466
+ box-shadow: var(--shadow-md);
467
+ transition: all 0.3s;
468
+ position: relative;
469
+ }
470
+
471
+ .property-card:hover {
472
+ transform: translateY(-5px);
473
+ box-shadow: var(--shadow-xl);
474
+ }
475
+
476
+ .property-image {
477
+ position: relative;
478
+ height: 250px;
479
+ overflow: hidden;
480
+ }
481
+
482
+ .property-image img {
483
+ width: 100%;
484
+ height: 100%;
485
+ object-fit: cover;
486
+ transition: transform 0.3s;
487
+ }
488
+
489
+ .property-card:hover .property-image img {
490
+ transform: scale(1.1);
491
+ }
492
+
493
+ .property-badge {
494
+ position: absolute;
495
+ top: 1rem;
496
+ right: 1rem;
497
+ background: var(--accent-color);
498
+ color: white;
499
+ padding: 0.25rem 0.75rem;
500
+ border-radius: 20px;
501
+ font-size: 0.875rem;
502
+ font-weight: 600;
503
+ }
504
+
505
+ .property-favorite {
506
+ position: absolute;
507
+ top: 1rem;
508
+ left: 1rem;
509
+ width: 40px;
510
+ height: 40px;
511
+ background: rgba(255, 255, 255, 0.9);
512
+ border-radius: 50%;
513
+ display: flex;
514
+ align-items: center;
515
+ justify-content: center;
516
+ cursor: pointer;
517
+ transition: all 0.3s;
518
+ }
519
+
520
+ .property-favorite:hover {
521
+ background: white;
522
+ transform: scale(1.1);
523
+ }
524
+
525
+ .property-favorite.active i {
526
+ color: var(--danger-color);
527
+ }
528
+
529
+ .property-details {
530
+ padding: 1.5rem;
531
+ }
532
+
533
+ .property-price {
534
+ font-size: 1.5rem;
535
+ font-weight: 700;
536
+ color: var(--primary-color);
537
+ margin-bottom: 0.5rem;
538
+ }
539
+
540
+ .property-location {
541
+ display: flex;
542
+ align-items: center;
543
+ gap: 0.5rem;
544
+ color: #6b7280;
545
+ margin-bottom: 1rem;
546
+ }
547
+
548
+ .property-features {
549
+ display: flex;
550
+ gap: 1rem;
551
+ padding-top: 1rem;
552
+ border-top: 1px solid var(--light);
553
+ }
554
+
555
+ .property-feature {
556
+ display: flex;
557
+ align-items: center;
558
+ gap: 0.25rem;
559
+ color: #6b7280;
560
+ font-size: 0.875rem;
561
+ }
562
+
563
+ /* Map Section */
564
+ .map-section {
565
+ padding: 4rem 2rem;
566
+ background: white;
567
+ }
568
+
569
+ .map-container {
570
+ height: 500px;
571
+ background: var(--light);
572
+ border-radius: 20px;
573
+ position: relative;
574
+ overflow: hidden;
575
+ box-shadow: var(--shadow-lg);
576
+ }
577
+
578
+ .map-placeholder {
579
+ width: 100%;
580
+ height: 100%;
581
+ background: url('https://picsum.photos/seed/saudimap/1200/500.jpg') center/cover;
582
+ display: flex;
583
+ align-items: center;
584
+ justify-content: center;
585
+ position: relative;
586
+ }
587
+
588
+ .map-overlay {
589
+ position: absolute;
590
+ top: 50%;
591
+ left: 50%;
592
+ transform: translate(-50%, -50%);
593
+ background: white;
594
+ padding: 2rem;
595
+ border-radius: 15px;
596
+ box-shadow: var(--shadow-xl);
597
+ text-align: center;
598
+ }
599
+
600
+ .map-controls {
601
+ position: absolute;
602
+ bottom: 2rem;
603
+ right: 2rem;
604
+ display: flex;
605
+ flex-direction: column;
606
+ gap: 0.5rem;
607
+ }
608
+
609
+ .map-control-btn {
610
+ width: 40px;
611
+ height: 40px;
612
+ background: white;
613
+ border: none;
614
+ border-radius: 10px;
615
+ box-shadow: var(--shadow-md);
616
+ cursor: pointer;
617
+ transition: all 0.3s;
618
+ }
619
+
620
+ .map-control-btn:hover {
621
+ transform: scale(1.1);
622
+ box-shadow: var(--shadow-lg);
623
+ }
624
+
625
+ /* Calculator Section */
626
+ .calculator-section {
627
+ padding: 4rem 2rem;
628
+ background: var(--light);
629
+ }
630
+
631
+ .calculator-container {
632
+ display: grid;
633
+ grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
634
+ gap: 2rem;
635
+ }
636
+
637
+ .calculator-card {
638
+ background: white;
639
+ padding: 2rem;
640
+ border-radius: 20px;
641
+ box-shadow: var(--shadow-md);
642
+ }
643
+
644
+ .calculator-card h3 {
645
+ color: var(--dark);
646
+ margin-bottom: 1.5rem;
647
+ display: flex;
648
+ align-items: center;
649
+ gap: 0.5rem;
650
+ }
651
+
652
+ .calculator-input {
653
+ margin-bottom: 1rem;
654
+ }
655
+
656
+ .calculator-input label {
657
+ display: block;
658
+ margin-bottom: 0.5rem;
659
+ color: var(--dark);
660
+ font-weight: 500;
661
+ }
662
+
663
+ .calculator-input input {
664
+ width: 100%;
665
+ padding: 0.75rem;
666
+ border: 2px solid var(--light);
667
+ border-radius: 10px;
668
+ font-size: 1rem;
669
+ transition: all 0.3s;
670
+ }
671
+
672
+ .calculator-input input:focus {
673
+ outline: none;
674
+ border-color: var(--primary-color);
675
+ }
676
+
677
+ .calculate-btn {
678
+ width: 100%;
679
+ padding: 1rem;
680
+ background: var(--gradient-1);
681
+ color: white;
682
+ border: none;
683
+ border-radius: 10px;
684
+ font-weight: 600;
685
+ cursor: pointer;
686
+ transition: all 0.3s;
687
+ }
688
+
689
+ .calculate-btn:hover {
690
+ transform: translateY(-2px);
691
+ box-shadow: var(--shadow-lg);
692
+ }
693
+
694
+ .result-box {
695
+ margin-top: 1.5rem;
696
+ padding: 1.5rem;
697
+ background: var(--light);
698
+ border-radius: 10px;
699
+ display: none;
700
+ }
701
+
702
+ .result-box.show {
703
+ display: block;
704
+ animation: fadeIn 0.5s;
705
+ }
706
+
707
+ @keyframes fadeIn {
708
+ from { opacity: 0; }
709
+ to { opacity: 1; }
710
+ }
711
+
712
+ .result-item {
713
+ display: flex;
714
+ justify-content: space-between;
715
+ margin-bottom: 0.5rem;
716
+ }
717
+
718
+ .result-label {
719
+ color: #6b7280;
720
+ }
721
+
722
+ .result-value {
723
+ font-weight: 600;
724
+ color: var(--primary-color);
725
+ }
726
+
727
+ /* Footer */
728
+ footer {
729
+ background: var(--dark);
730
+ color: white;
731
+ padding: 3rem 2rem 1rem;
732
+ }
733
+
734
+ .footer-content {
735
+ max-width: 1200px;
736
+ margin: 0 auto;
737
+ display: grid;
738
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
739
+ gap: 2rem;
740
+ margin-bottom: 2rem;
741
+ }
742
+
743
+ .footer-section h4 {
744
+ margin-bottom: 1rem;
745
+ color: var(--secondary-color);
746
+ }
747
+
748
+ .footer-section ul {
749
+ list-style: none;
750
+ }
751
+
752
+ .footer-section li {
753
+ margin-bottom: 0.5rem;
754
+ }
755
+
756
+ .footer-section a {
757
+ color: #9ca3af;
758
+ text-decoration: none;
759
+ transition: color 0.3s;
760
+ }
761
+
762
+ .footer-section a:hover {
763
+ color: white;
764
+ }
765
+
766
+ .social-links {
767
+ display: flex;
768
+ gap: 1rem;
769
+ margin-top: 1rem;
770
+ }
771
+
772
+ .social-link {
773
+ width: 40px;
774
+ height: 40px;
775
+ background: rgba(255, 255, 255, 0.1);
776
+ border-radius: 50%;
777
+ display: flex;
778
+ align-items: center;
779
+ justify-content: center;
780
+ transition: all 0.3s;
781
+ }
782
+
783
+ .social-link:hover {
784
+ background: var(--gradient-1);
785
+ transform: translateY(-3px);
786
+ }
787
+
788
+ .footer-bottom {
789
+ text-align: center;
790
+ padding-top: 2rem;
791
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
792
+ color: #9ca3af;
793
+ }
794
+
795
+ .footer-bottom a {
796
+ color: var(--secondary-color);
797
+ text-decoration: none;
798
+ }
799
+
800
+ /* Mobile Menu */
801
+ .mobile-menu-toggle {
802
+ display: none;
803
+ background: none;
804
+ border: none;
805
+ font-size: 1.5rem;
806
+ color: var(--primary-color);
807
+ cursor: pointer;
808
+ }
809
+
810
+ /* Responsive Design */
811
+ @media (max-width: 768px) {
812
+ .nav-links {
813
+ position: fixed;
814
+ top: 70px;
815
+ right: -100%;
816
+ width: 100%;
817
+ height: calc(100vh - 70px);
818
+ background: white;
819
+ flex-direction: column;
820
+ padding: 2rem;
821
+ transition: right 0.3s;
822
+ box-shadow: var(--shadow-xl);
823
+ }
824
+
825
+ .nav-links.active {
826
+ right: 0;
827
+ }
828
+
829
+ .mobile-menu-toggle {
830
+ display: block;
831
+ }
832
+
833
+ .hero h1 {
834
+ font-size: 2rem;
835
+ }
836
+
837
+ .search-form {
838
+ grid-template-columns: 1fr;
839
+ }
840
+
841
+ .properties-grid {
842
+ grid-template-columns: 1fr;
843
+ }
844
+
845
+ .calculator-container {
846
+ grid-template-columns: 1fr;
847
+ }
848
+ }
849
+
850
+ /* Animations */
851
+ .fade-in {
852
+ animation: fadeIn 0.5s ease-out;
853
+ }
854
+
855
+ .slide-in-left {
856
+ animation: slideInLeft 0.5s ease-out;
857
+ }
858
+
859
+ @keyframes slideInLeft {
860
+ from {
861
+ opacity: 0;
862
+ transform: translateX(-30px);
863
+ }
864
+ to {
865
+ opacity: 1;
866
+ transform: translateX(0);
867
+ }
868
+ }
869
+
870
+ /* Notification */
871
+ .notification {
872
+ position: fixed;
873
+ bottom: 2rem;
874
+ left: 2rem;
875
+ background: white;
876
+ padding: 1rem 1.5rem;
877
+ border-radius: 10px;
878
+ box-shadow: var(--shadow-xl);
879
+ display: flex;
880
+ align-items: center;
881
+ gap: 1rem;
882
+ transform: translateX(-400px);
883
+ transition: transform 0.3s;
884
+ z-index: 1000;
885
+ }
886
+
887
+ .notification.show {
888
+ transform: translateX(0);
889
+ }
890
+
891
+ .notification-icon {
892
+ width: 40px;
893
+ height: 40px;
894
+ background: var(--gradient-1);
895
+ border-radius: 50%;
896
+ display: flex;
897
+ align-items: center;
898
+ justify-content: center;
899
+ color: white;
900
+ }
901
+
902
+ .notification-content h4 {
903
+ color: var(--dark);
904
+ margin-bottom: 0.25rem;
905
+ }
906
+
907
+ .notification-content p {
908
+ color: #6b7280;
909
+ font-size: 0.875rem;
910
+ }
911
+ </style>
912
+ </head>
913
+ <body>
914
+ <!-- Loading Screen -->
915
+ <div class="loading-screen" id="loadingScreen">
916
+ <div class="loader"></div>
917
+ </div>
918
+
919
+ <!-- Header -->
920
+ <header>
921
+ <nav>
922
+ <a href="#" class="logo">
923
+ <i class="fas fa-building"></i>
924
+ عقار ذكي
925
+ </a>
926
+ <button class="mobile-menu-toggle" id="mobileMenuToggle">
927
+ <i class="fas fa-bars"></i>
928
+ </button>
929
+ <ul class="nav-links" id="navLinks">
930
+ <li><a href="#home">الرئيسية</a></li>
931
+ <li><a href="#properties">العقارات</a></li>
932
+ <li><a href="#map">الخريطة</a></li>
933
+ <li><a href="#calculator">الحاسبة</a></li>
934
+ <li><a href="#contact">اتصل بنا</a></li>
935
+ <li><button class="lang-toggle" onclick="toggleLanguage()">EN</button></li>
936
+ </ul>
937
+ </nav>
938
+ </header>
939
+
940
+ <!-- Hero Section -->
941
+ <section class="hero" id="home">
942
+ <h1>اكتشف منزلك المثالي في المملكة</h1>
943
+ <p>منصة عقارية ذكية متطورة تجربة لا مثيل لها للبحث عن العقارات</p>
944
+
945
+ <!-- Search Container -->
946
+ <div class="search-container">
947
+ <div class="search-tabs">
948
+ <button class="tab active" onclick="switchTab(this, 'buy')">شراء</button>
949
+ <button class="tab" onclick="switchTab(this, 'rent')">إيجار</button>
950
+ <button class="tab" onclick="switchTab(this, 'invest')">استثمار</button>
951
+ </div>
952
+ <form class="search-form" onsubmit="searchProperties(event)">
953
+ <div class="form-group">
954
+ <i class="fas fa-map-marker-alt"></i>
955
+ <input type="text" placeholder="المدينة أو الحي" required>
956
+ </div>
957
+ <div class="form-group">
958
+ <i class="fas fa-home"></i>
959
+ <select>
960
+ <option>نوع العقار</option>
961
+ <option>فيلا</option>
962
+ <option>شقة</option>
963
+ <option>أرض</option>
964
+ <option>عمارة</option>
965
+ </select>
966
+ </div>
967
+ <div class="form-group">
968
+ <i class="fas fa-bed"></i>
969
+ <select>
970
+ <option>عدد الغرف</option>
971
+ <option>غرفة واحدة</option>
972
+ <option>غرفتان</option>
973
+ <option>3 غرف</option>
974
+ <option>4 غرف</option>
975
+ <option>5+ غرف</option>
976
+ </select>
977
+ </div>
978
+ <div class="form-group">
979
+ <i class="fas fa-money-bill-wave"></i>
980
+ <input type="number" placeholder="السعر الأقصى">
981
+ </div>
982
+ <button type="submit" class="search-btn">
983
+ <i class="fas fa-search"></i>
984
+ بحث
985
+ </button>
986
+ </form>
987
+ </div>
988
+ </section>
989
+
990
+ <!-- Features Section -->
991
+ <section class="features">
992
+ <div class="container">
993
+ <h2 class="section-title">مميزاتنا الفريدة</h2>
994
+ <div class="features-grid">
995
+ <div class="feature-card">
996
+ <div class="feature-icon">
997
+ <i class="fas fa-brain"></i>
998
+ </div>
999
+ <h3>ذكاء اصطناعي متقدم</h3>
1000
+ <p>نظام توصيات ذكي يحلل احتياجاتك ويقترح أفضل العقارات المناسبة لك</p>
1001
+ </div>
1002
+ <div class="feature-card">
1003
+ <div class="feature-icon">
1004
+ <i class="fas fa-vr-cardboard"></i>
1005
+ </div>
1006
+ <h3>جولات افتراضية 360°</h3>
1007
+ <p>استكشف العقارات من منزلك بتقنية الواقع الافتراضي المتقدمة</p>
1008
+ </div>
1009
+ <div class="feature-card">
1010
+ <div class="feature-icon">
1011
+ <i class="fas fa-chart-line"></i>
1012
+ </div>
1013
+ <h3>تحليل استثماري</h3>
1014
+ <p>تقارير مفصلة عن العائد على الاستثمار والنمو المتوقع للمنطقة</p>
1015
+ </div>
1016
+ <div class="feature-card">
1017
+ <div class="feature-icon">
1018
+ <i class="fas fa-shield-alt"></i>
1019
+ </div>
1020
+ <h3>توثيق آمن</h3>
1021
+ <p>معاملات آمنة وموثقة بالتعاون مع الجهات الرسمية</p>
1022
+ </div>
1023
+ <div class="feature-card">
1024
+ <div class="feature-icon">
1025
+ <i class="fas fa-users"></i>
1026
+ </div>
1027
+ <h3>مجتمع المستثمرين</h3>
1028
+ <p>انضم إلى أكبر مجعي للمستثمرين العقاريين في المملكة</p>
1029
+ </div>
1030
+ <div class="feature-card">
1031
+ <div class="feature-icon">
1032
+ <i class="fas fa-gavel"></i>
1033
+ </div>
1034
+ <h3>خدمات قانونية</h3>
1035
+ <p>فريق قانوني متخصص لمساعدتك في جميع الإجراءات</p>
1036
+ </div>
1037
+ </div>
1038
+ </div>
1039
+ </section>
1040
+
1041
+ <!-- Properties Section -->
1042
+ <section class="properties" id="properties">
1043
+ <div class="container">
1044
+ <h2 class="section-title">عقارات مميزة</h2>
1045
+ <div class="filter-bar">
1046
+ <button class="filter-btn active" onclick="filterProperties('all')">الكل</button>
1047
+ <button class="filter-btn" onclick="filterProperties('villa')">فلل</button>
1048
+ <button class="filter-btn" onclick="filterProperties('apartment')">شقق</button>
1049
+ <button class="filter-btn" onclick="filterProperties('land')">أراضي</button>
1050
+ <button class="filter-btn" onclick="filterProperties('commercial')">تجاري</button>
1051
+ </div>
1052
+ <div class="properties-grid" id="propertiesGrid">
1053
+ <!-- Property Cards -->
1054
+ <div class="property-card" data-type="villa">
1055
+ <div class="property-image">
1056
+ <img src="https://picsum.photos/seed/villa1/400/250.jpg" alt="فيلا فاخرة">
1057
+ <span class="property-badge">جديد</span>
1058
+ <div class="property-favorite" onclick="toggleFavorite(this)">
1059
+ <i class="far fa-heart"></i>
1060
+ </div>
1061
+ </div>
1062
+ <div class="property-details">
1063
+ <div class="property-price">2,500,000 ريال</div>
1064
+ <div class="property-location">
1065
+ <i class="fas fa-map-marker-alt"></i>
1066
+ الرياض، حي النخيل
1067
+ </div>
1068
+ <div class="property-features">
1069
+ <div class="property-feature">
1070
+ <i class="fas fa-bed"></i>
1071
+ <span>4 غرف</span>
1072
+ </div>
1073
+ <div class="property-feature">
1074
+ <i class="fas fa-bath"></i>
1075
+ <span>3 حمامات</span>
1076
+ </div>
1077
+ <div class="property-feature">
1078
+ <i class="fas fa-ruler-combined"></i>
1079
+ <span>350 م²</span>
1080
+ </div>
1081
+ </div>
1082
+ </div>
1083
+ </div>
1084
+
1085
+ <div class="property-card" data-type="apartment">
1086
+ <div class="property-image">
1087
+ <img src="https://picsum.photos/seed/apartment1/400/250.jpg" alt="شقة عصرية">
1088
+ <span class="property-badge">مميز</span>
1089
+ <div class="property-favorite" onclick="toggleFavorite(this)">
1090
+ <i class="far fa-heart"></i>
1091
+ </div>
1092
+ </div>
1093
+ <div class="property-details">
1094
+ <div class="property-price">850,000 ريال</div>
1095
+ <div class="property-location">
1096
+ <i class="fas fa-map-marker-alt"></i>
1097
+ جدة، حي الروضة
1098
+ </div>
1099
+ <div class="property-features">
1100
+ <div class="property-feature">
1101
+ <i class="fas fa-bed"></i>
1102
+ <span>3 غرف</span>
1103
+ </div>
1104
+ <div class="property-feature">
1105
+ <i class="fas fa-bath"></i>
1106
+ <span>2 حمامات</span>
1107
+ </div>
1108
+ <div class="property-feature">
1109
+ <i class="fas fa-ruler-combined"></i>
1110
+ <span>180 م²</span>
1111
+ </div>
1112
+ </div>
1113
+ </div>
1114
+ </div>
1115
+
1116
+ <div class="property-card" data-type="land">
1117
+ <div class="property-image">
1118
+ <img src="https://picsum.photos/seed/land1/400/250.jpg" alt="أرض استثمارية">
1119
+ <span class="property-badge">فرصة ذهبية</span>
1120
+ <div class="property-favorite" onclick="toggleFavorite(this)">
1121
+ <i class="far fa-heart"></i>
1122
+ </div>
1123
+ </div>
1124
+ <div class="property-details">
1125
+ <div class="property-price">1,200,000 ريال</div>
1126
+ <div class="property-location">
1127
+ <i class="fas fa-map-marker-alt"></i>
1128
+ الدمام، حي الشاطئ
1129
+ </div>
1130
+ <div class="property-features">
1131
+ <div class="property-feature">
1132
+ <i class="fas fa-ruler-combined"></i>
1133
+ <span>500 م²</span>
1134
+ </div>
1135
+ <div class="property-feature">
1136
+ <i class="fas fa-road"></i>
1137
+ <span>30m شارع</span>
1138
+ </div>
1139
+ <div class="property-feature">
1140
+ <i class="fas fa-warehouse"></i>
1141
+ <span>سكني</span>
1142
+ </div>
1143
+ </div>
1144
+ </div>
1145
+ </div>
1146
+
1147
+ <div class="property-card" data-type="commercial">
1148
+ <div class="property-image">
1149
+ <img src="https://picsum.photos/seed/commercial1/400/250.jpg" alt="محل تجاري">
1150
+ <span class="property-badge">موقع مميز</span>
1151
+ <div class="property-favorite" onclick="toggleFavorite(this)">
1152
+ <i class="far fa-heart"></i>
1153
+ </div>
1154
+ </div>
1155
+ <div class="property-details">
1156
+ <div class="property-price">3,000,000 ريال</div>
1157
+ <div class="property-location">
1158
+ <i class="fas fa-map-marker-alt"></i>
1159
+ الرياض، شارع الملك فهد
1160
+ </div>
1161
+ <div class="property-features">
1162
+ <div class="property-feature">
1163
+ <i class="fas fa-ruler-combined"></i>
1164
+ <span>200 م²</span>
1165
+ </div>
1166
+ <div class="property-feature">
1167
+ <i class="fas fa-store"></i>
1168
+ <span>دور أرضي</span>
1169
+ </div>
1170
+ <div class="property-feature">
1171
+ <i class="fas fa-parking"></i>
1172
+ <span>موقف سيارات</span>
1173
+ </div>
1174
+ </div>
1175
+ </div>
1176
+ </div>
1177
+
1178
+ <div class="property-card" data-type="villa">
1179
+ <div class="property-image">
1180
+ <img src="https://picsum.photos/seed/villa2/400/250.jpg" alt="فيلا حديثة">
1181
+ <span class="property-badge">فاخر</span>
1182
+ <div class="property-favorite" onclick="toggleFavorite(this)">
1183
+ <i class="far fa-heart"></i>
1184
+ </div>
1185
+ </div>
1186
+ <div class="property-details">
1187
+ <div class="property-price">4,500