Hugging Face's logo

Spaces:
combos
/
anycoder-ef1fc337
Running

App Files Community
combos commited on
Commit
6a7e4aa
·
verified ·
1 Parent(s): cbb2b69

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +674 -19
index.html CHANGED
@@ -1,19 +1,674 @@
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="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ /* Reset and Base Styles */
10
+ * {
11
+ margin: 0;
12
+ padding: 0;
13
+ box-sizing: border-box;
14
+ font-family: 'Tajawal', sans-serif;
15
+ }
16
+
17
+ html {
18
+ scroll-behavior: smooth;
19
+ }
20
+
21
+ body {
22
+ background-color: #f8f9fa;
23
+ color: #333;
24
+ line-height: 1.6;
25
+ }
26
+
27
+ /* Header Styles */
28
+ header {
29
+ position: fixed;
30
+ top: 0;
31
+ left: 0;
32
+ right: 0;
33
+ background-color: rgba(255, 255, 255, 0.95);
34
+ backdrop-filter: blur(10px);
35
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
36
+ z-index: 1000;
37
+ padding: 1rem;
38
+ }
39
+
40
+ .header-container {
41
+ display: flex;
42
+ justify-content: space-between;
43
+ align-items: center;
44
+ max-width: 1200px;
45
+ margin: 0 auto;
46
+ }
47
+
48
+ .logo {
49
+ font-size: 1.5rem;
50
+ font-weight: bold;
51
+ color: #2c3e50;
52
+ text-decoration: none;
53
+ }
54
+
55
+ .nav-toggle {
56
+ background: none;
57
+ border: none;
58
+ font-size: 1.5rem;
59
+ cursor: pointer;
60
+ color: #2c3e50;
61
+ }
62
+
63
+ .phone-icon {
64
+ font-size: 1.5rem;
65
+ color: #2c3e50;
66
+ }
67
+
68
+ /* Sidebar Styles */
69
+ .sidebar {
70
+ position: fixed;
71
+ top: 0;
72
+ right: -300px;
73
+ width: 300px;
74
+ height: 100vh;
75
+ background-color: #2c3e50;
76
+ color: white;
77
+ transition: right 0.3s ease;
78
+ z-index: 2000;
79
+ padding: 2rem;
80
+ box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
81
+ }
82
+
83
+ .sidebar.active {
84
+ right: 0;
85
+ }
86
+
87
+ .sidebar-close {
88
+ position: absolute;
89
+ top: 1rem;
90
+ left: 1rem;
91
+ background: none;
92
+ border: none;
93
+ font-size: 1.5rem;
94
+ color: white;
95
+ cursor: pointer;
96
+ }
97
+
98
+ .sidebar-nav {
99
+ list-style: none;
100
+ margin-top: 3rem;
101
+ }
102
+
103
+ .sidebar-nav li {
104
+ margin-bottom: 1rem;
105
+ }
106
+
107
+ .sidebar-nav a {
108
+ color: white;
109
+ text-decoration: none;
110
+ font-size: 1.1rem;
111
+ transition: color 0.3s;
112
+ }
113
+
114
+ .sidebar-nav a:hover {
115
+ color: #3498db;
116
+ }
117
+
118
+ /* Hero Section */
119
+ .hero {
120
+ height: 100vh;
121
+ display: flex;
122
+ align-items: center;
123
+ justify-content: center;
124
+ position: relative;
125
+ overflow: hidden;
126
+ margin-top: 70px;
127
+ }
128
+
129
+ .hero video {
130
+ position: absolute;
131
+ top: 0;
132
+ left: 0;
133
+ width: 100%;
134
+ height: 100%;
135
+ object-fit: cover;
136
+ z-index: -1;
137
+ }
138
+
139
+ .hero-content {
140
+ text-align: center;
141
+ color: white;
142
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
143
+ z-index: 1;
144
+ }
145
+
146
+ .hero h1 {
147
+ font-size: 2.5rem;
148
+ margin-bottom: 1rem;
149
+ }
150
+
151
+ .hero p {
152
+ font-size: 1.2rem;
153
+ margin-bottom: 2rem;
154
+ }
155
+
156
+ .btn {
157
+ display: inline-block;
158
+ padding: 0.8rem 1.5rem;
159
+ background-color: #3498db;
160
+ color: white;
161
+ text-decoration: none;
162
+ border-radius: 5px;
163
+ transition: background-color 0.3s;
164
+ border: none;
165
+ cursor: pointer;
166
+ font-size: 1rem;
167
+ }
168
+
169
+ .btn:hover {
170
+ background-color: #2980b9;
171
+ }
172
+
173
+ /* Vehicles Section */
174
+ .section {
175
+ padding: 4rem 1rem;
176
+ max-width: 1200px;
177
+ margin: 0 auto;
178
+ }
179
+
180
+ .section-title {
181
+ text-align: center;
182
+ margin-bottom: 3rem;
183
+ font-size: 2rem;
184
+ color: #2c3e50;
185
+ }
186
+
187
+ .vehicles-container {
188
+ position: relative;
189
+ overflow: hidden;
190
+ }
191
+
192
+ .vehicles-wrapper {
193
+ display: flex;
194
+ gap: 1.5rem;
195
+ overflow-x: auto;
196
+ scroll-snap-type: x mandatory;
197
+ padding-bottom: 1rem;
198
+ scrollbar-width: none;
199
+ }
200
+
201
+ .vehicles-wrapper::-webkit-scrollbar {
202
+ display: none;
203
+ }
204
+
205
+ .vehicle-card {
206
+ flex: 0 0 80%;
207
+ scroll-snap-align: start;
208
+ background-color: white;
209
+ border-radius: 10px;
210
+ overflow: hidden;
211
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
212
+ transition: transform 0.3s;
213
+ }
214
+
215
+ .vehicle-card:hover {
216
+ transform: translateY(-5px);
217
+ }
218
+
219
+ .vehicle-card img {
220
+ width: 100%;
221
+ height: 200px;
222
+ object-fit: cover;
223
+ }
224
+
225
+ .vehicle-info {
226
+ padding: 1.5rem;
227
+ }
228
+
229
+ .vehicle-info h3 {
230
+ margin-bottom: 0.5rem;
231
+ color: #2c3e50;
232
+ }
233
+
234
+ .vehicle-info p {
235
+ color: #7f8c8d;
236
+ margin-bottom: 1rem;
237
+ }
238
+
239
+ .vehicle-price {
240
+ font-size: 1.2rem;
241
+ font-weight: bold;
242
+ color: #e74c3c;
243
+ }
244
+
245
+ /* Products Section */
246
+ .products-grid {
247
+ display: grid;
248
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
249
+ gap: 1.5rem;
250
+ }
251
+
252
+ .product-card {
253
+ background-color: white;
254
+ border-radius: 10px;
255
+ overflow: hidden;
256
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
257
+ transition: transform 0.3s;
258
+ }
259
+
260
+ .product-card:hover {
261
+ transform: translateY(-5px);
262
+ }
263
+
264
+ .product-card img {
265
+ width: 100%;
266
+ height: 180px;
267
+ object-fit: cover;
268
+ }
269
+
270
+ .product-info {
271
+ padding: 1rem;
272
+ }
273
+
274
+ .product-info h3 {
275
+ margin-bottom: 0.5rem;
276
+ color: #2c3e50;
277
+ }
278
+
279
+ .product-price {
280
+ font-size: 1.1rem;
281
+ font-weight: bold;
282
+ color: #27ae60;
283
+ }
284
+
285
+ /* Footer */
286
+ footer {
287
+ background-color: #2c3e50;
288
+ color: white;
289
+ padding: 3rem 1rem 1rem;
290
+ }
291
+
292
+ .footer-container {
293
+ max-width: 1200px;
294
+ margin: 0 auto;
295
+ display: grid;
296
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
297
+ gap: 2rem;
298
+ }
299
+
300
+ .footer-column h3 {
301
+ margin-bottom: 1rem;
302
+ font-size: 1.2rem;
303
+ }
304
+
305
+ .footer-column ul {
306
+ list-style: none;
307
+ }
308
+
309
+ .footer-column ul li {
310
+ margin-bottom: 0.5rem;
311
+ }
312
+
313
+ .footer-column ul li a {
314
+ color: #bdc3c7;
315
+ text-decoration: none;
316
+ transition: color 0.3s;
317
+ }
318
+
319
+ .footer-column ul li a:hover {
320
+ color: white;
321
+ }
322
+
323
+ .social-links {
324
+ display: flex;
325
+ gap: 1rem;
326
+ margin-top: 1rem;
327
+ }
328
+
329
+ .social-links a {
330
+ color: white;
331
+ font-size: 1.5rem;
332
+ transition: color 0.3s;
333
+ }
334
+
335
+ .social-links a:hover {
336
+ color: #3498db;
337
+ }
338
+
339
+ .footer-bottom {
340
+ text-align: center;
341
+ margin-top: 2rem;
342
+ padding-top: 1rem;
343
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
344
+ font-size: 0.9rem;
345
+ color: #bdc3c7;
346
+ }
347
+
348
+ /* WhatsApp Button */
349
+ .whatsapp-btn {
350
+ position: fixed;
351
+ bottom: 2rem;
352
+ left: 2rem;
353
+ width: 60px;
354
+ height: 60px;
355
+ background-color: #25d366;
356
+ color: white;
357
+ border-radius: 50%;
358
+ display: flex;
359
+ align-items: center;
360
+ justify-content: center;
361
+ font-size: 2rem;
362
+ box-shadow: 0 5px 15px rgba(37, 211, 102, 0.3);
363
+ z-index: 1000;
364
+ transition: transform 0.3s;
365
+ }
366
+
367
+ .whatsapp-btn:hover {
368
+ transform: scale(1.1);
369
+ }
370
+
371
+ /* Built with anycoder */
372
+ .built-with {
373
+ position: fixed;
374
+ bottom: 1rem;
375
+ right: 1rem;
376
+ font-size: 0.8rem;
377
+ color: #7f8c8d;
378
+ z-index: 1000;
379
+ }
380
+
381
+ .built-with a {
382
+ color: #3498db;
383
+ text-decoration: none;
384
+ }
385
+
386
+ /* Responsive Adjustments */
387
+ @media (min-width: 768px) {
388
+ .vehicle-card {
389
+ flex: 0 0 45%;
390
+ }
391
+
392
+ .hero h1 {
393
+ font-size: 3rem;
394
+ }
395
+
396
+ .hero p {
397
+ font-size: 1.5rem;
398
+ }
399
+ }
400
+
401
+ @media (min-width: 992px) {
402
+ .vehicle-card {
403
+ flex: 0 0 30%;
404
+ }
405
+
406
+ .header-container {
407
+ padding: 0 2rem;
408
+ }
409
+ }
410
+
411
+ @media (min-width: 1200px) {
412
+ .vehicle-card {
413
+ flex: 0 0 23%;
414
+ }
415
+ }
416
+ </style>
417
+ </head>
418
+ <body>
419
+ <!-- Header -->
420
+ <header>
421
+ <div class="header-container">
422
+ <a href="#" class="logo">سياراتنا</a>
423
+ <div style="display: flex; align-items: center; gap: 1rem;">
424
+ <i class="fas fa-phone phone-icon"></i>
425
+ <button class="nav-toggle" id="navToggle">
426
+ <i class="fas fa-bars"></i>
427
+ </button>
428
+ </div>
429
+ </div>
430
+ </header>
431
+
432
+ <!-- Sidebar -->
433
+ <div class="sidebar" id="sidebar">
434
+ <button class="sidebar-close" id="sidebarClose">
435
+ <i class="fas fa-times"></i>
436
+ </button>
437
+ <nav>
438
+ <ul class="sidebar-nav">
439
+ <li><a href="#">الرئيسية</a></li>
440
+ <li><a href="#">المركبات</a></li>
441
+ <li><a href="#">المنتجات</a></li>
442
+ <li><a href="#">الخدمات</a></li>
443
+ <li><a href="#">اتصل بنا</a></li>
444
+ <li><a href="#">من نحن</a></li>
445
+ </ul>
446
+ </nav>
447
+ </div>
448
+
449
+ <!-- Hero Section -->
450
+ <section class="hero">
451
+ <video autoplay muted loop>
452
+ <source src="https://assets.mixkit.co/videos/preview/mixkit-car-driving-on-a-forest-road-40889-large.mp4" type="video/mp4">
453
+ Your browser does not support the video tag.
454
+ </video>
455
+ <div class="hero-content">
456
+ <h1>استكشف أحدث المركبات</h1>
457
+ <p>اختر من بين مجموعة واسعة من السيارات الجاهزة لتجربة قيادة استثنائية</p>
458
+ <a href="#vehicles" class="btn">عرض المركبات</a>
459
+ </div>
460
+ </section>
461
+
462
+ <!-- Vehicles Section -->
463
+ <section class="section" id="vehicles">
464
+ <h2 class="section-title">مركباتنا المميزة</h2>
465
+ <div class="vehicles-container">
466
+ <div class="vehicles-wrapper">
467
+ <div class="vehicle-card">
468
+ <img src="https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="سيارة رياضية">
469
+ <div class="vehicle-info">
470
+ <h3>سيارة رياضية</h3>
471
+ <p>موديل 2023، محرك 3.0L، أوتوماتيك</p>
472
+ <div class="vehicle-price">120,000 SAR</div>
473
+ </div>
474
+ </div>
475
+ <div class="vehicle-card">
476
+ <img src="https://images.unsplash.com/photo-1503376780353-7e6692767b70?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="سيارة عائلية">
477
+ <div class="vehicle-info">
478
+ <h3>سيارة عائلية</h3>
479
+ <p>موديل 2022، محرك 2.5L، أوتوماتيك</p>
480
+ <div class="vehicle-price">85,000 SAR</div>
481
+ </div>
482
+ </div>
483
+ <div class="vehicle-card">
484
+ <img src="https://images.unsplash.com/photo-1583121274602-3e2820c69888?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="سيارة دفع رباعي">
485
+ <div class="vehicle-info">
486
+ <h3>سيارة دفع رباعي</h3>
487
+ <p>موديل 2023، محرك 3.5L، أوتوماتيك</p>
488
+ <div class="vehicle-price">150,000 SAR</div>
489
+ </div>
490
+ </div>
491
+ <div class="vehicle-card">
492
+ <img src="https://images.unsplash.com/photo-1552519507-da3b142c6e3d?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="سيارة فاخرة">
493
+ <div class="vehicle-info">
494
+ <h3>سيارة فاخرة</h3>
495
+ <p>موديل 2023، محرك 4.0L، أوتوماتيك</p>
496
+ <div class="vehicle-price">250,000 SAR</div>
497
+ </div>
498
+ </div>
499
+ </div>
500
+ </div>
501
+ </section>
502
+
503
+ <!-- Products Section -->
504
+ <section class="section">
505
+ <h2 class="section-title">منتجاتنا</h2>
506
+ <div class="products-grid">
507
+ <div class="product-card">
508
+ <img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="إطارات">
509
+ <div class="product-info">
510
+ <h3>إطارات عالية الجودة</h3>
511
+ <div class="product-price">1,200 SAR</div>
512
+ </div>
513
+ </div>
514
+ <div class="product-card">
515
+ <img src="https://images.unsplash.com/photo-1599491360393-1d5e50418f46?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="زيوت محرك">
516
+ <div class="product-info">
517
+ <h3>زيت محرك اصلي</h3>
518
+ <div class="product-price">250 SAR</div>
519
+ </div>
520
+ </div>
521
+ <div class="product-card">
522
+ <img src="https://images.unsplash.com/photo-1580273916550-e323be2ae537?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="بطاريات">
523
+ <div class="product-info">
524
+ <h3>بطارية سيارات</h3>
525
+ <div class="product-price">500 SAR</div>
526
+ </div>
527
+ </div>
528
+ <div class="product-card">
529
+ <img src="https://images.unsplash.com/photo-1579952363873-27d3bfad9c0d?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="أجزاء محرك">
530
+ <div class="product-info">
531
+ <h3>أجزاء محرك أصلية</h3>
532
+ <div class="product-price">800 SAR</div>
533
+ </div>
534
+ </div>
535
+ </div>
536
+ </section>
537
+
538
+ <!-- Footer -->
539
+ <footer>
540
+ <div class="footer-container">
541
+ <div class="footer-column">
542
+ <h3>روابط سريعة</h3>
543
+ <ul>
544
+ <li><a href="#">الرئيسية</a></li>
545
+ <li><a href="#">المركبات</a></li>
546
+ <li><a href="#">المنتجات</a></li>
547
+ <li><a href="#">الخدمات</a></li>
548
+ </ul>
549
+ </div>
550
+ <div class="footer-column">
551
+ <h3>خدماتنا</h3>
552
+ <ul>
553
+ <li><a href="#">صيانة دورية</a></li>
554
+ <li><a href="#">تغيير زيوت</a></li>
555
+ <li><a href="#">إصلاح محركات</a></li>
556
+ <li><a href="#">تغيير إطارات</a></li>
557
+ </ul>
558
+ </div>
559
+ <div class="footer-column">
560
+ <h3>اتصل بنا</h3>
561
+ <ul>
562
+ <li><a href="tel:+966123456789">+966 12 345 6789</a></li>
563
+ <li><a href="mailto:info@example.com">info@example.com</a></li>
564
+ <li>الرياض، المملكة العربية السعودية</li>
565
+ </ul>
566
+ <div class="social-links">
567
+ <a href="#"><i class="fab fa-facebook"></i></a>
568
+ <a href="#"><i class="fab fa-twitter"></i></a>
569
+ <a href="#"><i class="fab fa-instagram"></i></a>
570
+ <a href="#"><i class="fab fa-youtube"></i></a>
571
+ </div>
572
+ </div>
573
+ </div>
574
+ <div class="footer-bottom">
575
+ <p>جميع الحقوق محفوظة © 2023 | <a href="#">سياسة الخصوصية</a> | <a href="#">شروط الاستخدام</a></p>
576
+ <p>Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a></p>
577
+ </div>
578
+ </footer>
579
+
580
+ <!-- WhatsApp Button -->
581
+ <a href="https://wa.me/1234567890" class="whatsapp-btn" target="_blank">
582
+ <i class="fab fa-whatsapp"></i>
583
+ </a>
584
+
585
+ <script>
586
+ // Sidebar toggle functionality
587
+ const navToggle = document.getElementById('navToggle');
588
+ const sidebar = document.getElementById('sidebar');
589
+ const sidebarClose = document.getElementById('sidebarClose');
590
+
591
+ navToggle.addEventListener('click', () => {
592
+ sidebar.classList.add('active');
593
+ });
594
+
595
+ sidebarClose.addEventListener('click', () => {
596
+ sidebar.classList.remove('active');
597
+ });
598
+
599
+ // Close sidebar when clicking outside
600
+ document.addEventListener('click', (e) => {
601
+ if (!sidebar.contains(e.target) && !navToggle.contains(e.target)) {
602
+ sidebar.classList.remove('active');
603
+ }
604
+ });
605
+
606
+ // Smooth scrolling for anchor links
607
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
608
+ anchor.addEventListener('click', function (e) {
609
+ e.preventDefault();
610
+ const target = document.querySelector(this.getAttribute('href'));
611
+ if (target) {
612
+ target.scrollIntoView({
613
+ behavior: 'smooth',
614
+ block: 'start'
615
+ });
616
+ }
617
+ });
618
+ });
619
+
620
+ // Horizontal scroll for vehicles with mouse drag
621
+ let isDragging = false;
622
+ let startX, scrollLeft;
623
+
624
+ const vehiclesWrapper = document.querySelector('.vehicles-wrapper');
625
+
626
+ if (vehiclesWrapper) {
627
+ vehiclesWrapper.addEventListener('mousedown', (e) => {
628
+ isDragging = true;
629
+ startX = e.pageX - vehiclesWrapper.offsetLeft;
630
+ scrollLeft = vehiclesWrapper.scrollLeft;
631
+ });
632
+
633
+ vehiclesWrapper.addEventListener('mouseleave', () => {
634
+ isDragging = false;
635
+ });
636
+
637
+ vehiclesWrapper.addEventListener('mouseup', () => {
638
+ isDragging = false;
639
+ });
640
+
641
+ vehiclesWrapper.addEventListener('mousemove', (e) => {
642
+ if (!isDragging) return;
643
+ e.preventDefault();
644
+ const x = e.pageX - vehiclesWrapper.offsetLeft;
645
+ const walk = (x - startX) * 2;
646
+ vehiclesWrapper.scrollLeft = scrollLeft - walk;
647
+ });
648
+ }
649
+
650
+ // Touch support for mobile devices
651
+ if (vehiclesWrapper) {
652
+ let startTouchX, startScrollLeft;
653
+
654
+ vehiclesWrapper.addEventListener('touchstart', (e) => {
655
+ isDragging = true;
656
+ startTouchX = e.touches[0].pageX;
657
+ startScrollLeft = vehiclesWrapper.scrollLeft;
658
+ });
659
+
660
+ vehiclesWrapper.addEventListener('touchend', () => {
661
+ isDragging = false;
662
+ });
663
+
664
+ vehiclesWrapper.addEventListener('touchmove', (e) => {
665
+ if (!isDragging) return;
666
+ e.preventDefault();
667
+ const x = e.touches[0].pageX;
668
+ const walk = (x - startTouchX) * 2;
669
+ vehiclesWrapper.scrollLeft = startScrollLeft - walk;
670
+ });
671
+ }
672
+ </script>
673
+ </body>
674
+ </html>