Hugging Face's logo

Spaces:
wesam0099
/
parking_web
Sleeping

App Files Community
wesam0099 commited on
Commit
63591ae
·
verified ·
1 Parent(s): ec41538

Update WEB/templates/index.html

Browse files
Files changed (1) hide show
  1. WEB/templates/index.html +753 -752
WEB/templates/index.html CHANGED
@@ -1,753 +1,754 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta charset="UTF-8">
6
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
7
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
- <title>Park</title>
9
- <link rel="stylesheet" type="text/css" href="./styles/style.css">
10
- <link rel="stylesheet" type="text/css" href="./styles/navbar.css">
11
- <link rel="preconnect" href="https://fonts.googleapis.com">
12
- <link rel="shortcut icon" href="./images/logo.png" type="image/x-icon">
13
- <link rel="stylesheet" href="./styles/responsive.css">
14
- </head>
15
-
16
- <body>
17
-
18
- <!--? Navbar Start -->
19
- <header>
20
- <nav id="navbar">
21
- <div class="nav-logo">
22
- <div class="logo">
23
- <a href="index.html">
24
- <div>
25
- <img src="./images/logo.png" alt="">
26
- </div>
27
- <div id="logo-txt">Park</div>
28
- </a>
29
- </div>
30
- </div>
31
- <div class="nav-link">
32
- <ul>
33
- <a href="#home">
34
- <li>Home</li>
35
- </a>
36
- <a href="#services">
37
- <li>Location</li>
38
- </a>
39
- <a href="#about">
40
- <li>About Us</li>
41
- </a>
42
- <a href="#ContactUs">
43
- <li>Contact Us</li>
44
- </a>
45
- <a href="signin.html"> <!-- Link to the Sign-In Page -->
46
- <li>Sign In</li>
47
- </a>
48
- </ul>
49
-
50
- <!-- Search Section -->
51
- <div class="search-container">
52
- <input type="text" id="searchInput" placeholder="Search for a location..." />
53
- <button id="searchButton">Search</button>
54
- </div>
55
-
56
- <!-- Search Section -->
57
-
58
- </div>
59
- <div class="nav-right-login">
60
- <img src="./images/trucGif.gif" alt="">
61
- </div>
62
- </nav>
63
- <div class="cycle">
64
- <img src="./images/cycle.gif" alt="">
65
- </div>
66
- </header>
67
- <!--? Navbar End -->
68
-
69
- <!-- Location Sections -->
70
- <section id="جامعة دبي">
71
- <!-- Content for -->
72
- </section>
73
-
74
- <section id=" مستشفى السعودي الالماني دبي">
75
- <!-- Content -->
76
- </section>
77
-
78
- <section id="دبي مول">
79
- <!-- -->
80
- </section>
81
-
82
- <section id="برج العرب">
83
- <!-- Content for -->
84
- </section>
85
-
86
-
87
-
88
-
89
- <!--? Main-Section Start -->
90
- <main id="home">
91
- <section id="container">
92
- <seciton id="home-left">
93
- <!-- -->
94
- <div class="welcome">
95
- <div><Span>Your Smart </Span> Parking</div>
96
- <div>
97
- One Tap Away
98
- </div>
99
- </div>
100
- <div>
101
- <p>
102
- Discover available parking spots – no more searching hassle!
103
- </p>
104
- </div>
105
- <div class="">
106
- <div>
107
- <img src="" alt="">
108
- </div>
109
- <div>
110
- <img src="" alt="">
111
- </div>
112
- </div>
113
-
114
-
115
- </seciton>
116
- <seciton id="home-right">
117
- <!-- -->
118
- <div class="image-bg"></div>
119
- <div class="jeep-img">
120
- <img src="./images/Parking.png" alt="">
121
- </div>
122
- </seciton>
123
- </section>
124
-
125
- </main>
126
- <!--? Main-Section End -->
127
-
128
- <!--? Services Section Start -->
129
- <section id="services">
130
- <div class="services-head">
131
- <h1>Location</h1>
132
- <h1> University of Dubai</h1>
133
- </div>
134
- <div id="services-main">
135
- <div class="form-container">
136
- <div class="form-enhancer"><img src="./images/mmmmessage.webp" alt=""> </div>
137
-
138
- <!-- New Parking Status Section -->
139
- <div class="parking-status">
140
- <h2>🚗 <span class="parking-title">Parking</span></h2>
141
- <div class="parking-info">
142
- <p><strong>🟢 Available Spots:</strong> <span id="available-parking-king">--</span></p>
143
- <p><strong>🔴 Occupied Spots:</strong> <span id="unavailable-parking-king">--</span></p>
144
- <p><strong>⚪ Total Spots:</strong> <span id="total-parking-king">--</span></p>
145
- </div>
146
- </div>
147
-
148
- </div>
149
- <div class="arrow-of-services">
150
- <div class="arrow-services">
151
- <img src="./images/red-arrow.webp" alt="">
152
- </div>
153
- </div>
154
- <div class="parking-gif">
155
- <img src="./images/DUbaiuni.jpg" alt="">
156
- <div>
157
- <button onclick="window.location.href='https://maps.app.goo.gl/3pVVgDmisHNq7s3c6'">Go to the Map</button>
158
- </div>
159
- </div>
160
- </div>
161
- </section>
162
-
163
- <script>
164
- const locations1 = ["University of Dubai"];
165
-
166
- function updateParkingStatus(location, availableId, totalId, unavailableId) {
167
- fetch(`http://127.0.0.1:5000/parking-status?location=${location}`)
168
- .then(response => response.json())
169
- .then(data => {
170
- document.getElementById(availableId).innerText = data.available_parking;
171
- document.getElementById(totalId).innerText = data.total_parking;
172
- document.getElementById(unavailableId).innerText = data.unavailable_parking;
173
- })
174
- .catch(error => console.error(`Error fetching parking data for ${location}:`, error));
175
- }
176
-
177
- // Update all locations every 5 seconds
178
- setInterval(() => {
179
- updateParkingStatus('University of Dubai', 'available-parking-king', 'total-parking-king', 'unavailable-parking-king');
180
-
181
- }, 5000);
182
-
183
-
184
- </script>
185
-
186
- <!--? Services (((1))) Section end -->
187
-
188
-
189
-
190
-
191
-
192
- <!--? Services (((2))) Section Start -->
193
- <section id="services">
194
- <div class="services-head">
195
- <h1>Location</h1>
196
- <h1> Saudi German Hospital – Dubai</h1>
197
- </div>
198
- <div id="services-main">
199
- <div class="form-container">
200
- <div class="form-enhancer"><img src="./images/mmmmessage.webp" alt=""> </div>
201
-
202
- <!-- New Parking Status Section -->
203
- <div class="parking-status">
204
- <h2>🚗 <span class="parking-title">Parking</span></h2>
205
- <div class="parking-info">
206
- <p><strong>🟢 Available Spots:</strong> <span id="available-parking-taif">--</span></p>
207
- <p><strong>🔴 Occupied Spots:</strong> <span id="unavailable-parking-taif">--</span></p>
208
- <p><strong>⚪ Total Spots:</strong> <span id="total-parking-taif">--</span></p>
209
- </div>
210
- </div>
211
-
212
- </div>
213
- <div class="arrow-of-services">
214
- <div class="arrow-services">
215
- <img src="./images/red-arrow.webp" alt="">
216
- </div>
217
- </div>
218
- <div class="parking-gif">
219
- <img src="./images/hospitelDUBAI.webp" alt="">
220
- <div>
221
- <button onclick="window.location.href='https://maps.app.goo.gl/wKJ78E8HsscX4xdB6'">Go to the Map</button>
222
- </div>
223
- </div>
224
- </div>
225
- </section>
226
-
227
- <script>
228
- const locations2 = ["Saudi Hospital"];
229
-
230
- function updateParkingStatus(location, availableId, totalId, unavailableId) {
231
- fetch(`http://127.0.0.1:5000/parking-status?location=${location}`)
232
- .then(response => response.json())
233
- .then(data => {
234
- document.getElementById(availableId).innerText = data.available_parking;
235
- document.getElementById(totalId).innerText = data.total_parking;
236
- document.getElementById(unavailableId).innerText = data.unavailable_parking;
237
- })
238
- .catch(error => console.error(`Error fetching parking data for ${location}:`, error));
239
- }
240
-
241
- // Update all locations every 5 seconds
242
- setInterval(() => {
243
-
244
- updateParkingStatus('Saudi Hospital', 'available-parking-taif', 'total-parking-taif', 'unavailable-parking-taif');
245
-
246
- }, 5000);
247
-
248
- </script>
249
- <!--? Services (((2))) Section End -->
250
-
251
-
252
-
253
- <!--? Services (((3))) Section start -->
254
-
255
- <section id="services">
256
- <div class="services-head">
257
- <h1>Location</h1>
258
- <h1>Dubai Mall</h1>
259
- </div>
260
- <div id="services-main">
261
- <div class="form-container">
262
- <div class="form-enhancer"><img src="./images/mmmmessage.webp" alt=""> </div>
263
-
264
- <!-- New Parking Status Section -->
265
- <div class="parking-status">
266
- <h2>🚗 <span class="parking-title">Parking</span></h2>
267
- <div class="parking-info">
268
- <p><strong>🟢 Available Spots:</strong> <span id="available-parking-airport">--</span></p>
269
- <p><strong>🔴 Occupied Spots: </strong> <span id="unavailable-parking-airport">--</span></p>
270
- <p><strong>⚪ Total Spots:</strong> <span id="total-parking-airport">--</span></p>
271
- </div>
272
- </div>
273
-
274
- </div>
275
- <div class="arrow-of-services">
276
- <div class="arrow-services">
277
- <img src="./images/red-arrow.webp" alt="">
278
- </div>
279
- </div>
280
- <div class="parking-gif">
281
- <img src="./images/dubi mall.jpg" alt="">
282
- <div>
283
- <button onclick="window.location.href='https://www.google.com/maps?sca_esv=28a45a8f6728ec42&rlz=1C1ONGR_enSA1125SA1125&biw=1440&bih=791&output=search&q=%D8%AF%D8%A8%D9%8A+%D9%85%D9%88%D9%84&source=lnms&fbs=ABzOT_C0L9rKKdONkGl6Mi8DWvrbHjHidxa-J8Q5Aa5K-R4xt8-hUSwcsX6ngZeKl3r-Q7bZnK5dHbrQqQdr9TT2p3y3EuKopwAhx6g8FoHyfAEvPyhQ65LcHYCX-qc5n5X-oD__6HEPS6SpuLfMN4W_G0bPB4fWM9EmlwG1m7NoZEK7rd2nQzKy4XjFJ5jNQWi99QhT5GmyS28H7uaSVh7_FDFMMq-xokX6qdWZeFcqXkxA84Cd9v-eqkQMpY6XhxrPzVlncOI6qsyTHkdZd4KTMV52hVvijg&entry=mc&ved=1t:200715&ictx=111'"> Go to the Map</button>
284
- </div>
285
- </div>
286
- </div>
287
- </section>
288
-
289
- <script>
290
- const locations3 = ["Dubai Mall"];
291
-
292
- function updateParkingStatus(location, availableId, totalId, unavailableId) {
293
- fetch(`http://127.0.0.1:5000/parking-status?location=${location}`)
294
- .then(response => response.json())
295
- .then(data => {
296
- document.getElementById(availableId).innerText = data.available_parking;
297
- document.getElementById(totalId).innerText = data.total_parking;
298
- document.getElementById(unavailableId).innerText = data.unavailable_parking;
299
- })
300
- .catch(error => console.error(`Error fetching parking data for ${location}:`, error));
301
- }
302
-
303
- // Update all locations every 5 seconds
304
- setInterval(() => {
305
-
306
- updateParkingStatus('Dubai Mall', 'available-parking-airport', 'total-parking-airport', 'unavailable-parking-airport');
307
-
308
- }, 5000);
309
-
310
- </script>
311
-
312
- <!--? Services (((3))) Section end -->
313
-
314
-
315
-
316
- <!--? Services (((4))) Section start -->
317
-
318
- <section id="services">
319
- <div class="services-head">
320
- <h1>Location</h1>
321
- <h1> Burj Al Arab</h1>
322
- </div>
323
- <div id="services-main">
324
- <div class="form-container">
325
- <div class="form-enhancer"><img src="./images/mmmmessage.webp" alt=""> </div>
326
-
327
- <!-- New Parking Status Section -->
328
- <div class="parking-status">
329
- <h2>🚗 <span class="parking-title">Parking</span></h2>
330
- <div class="parking-info">
331
- <p><strong>🟢 Available Spots:</strong> <span id="available-parking-shubra">--</span></p>
332
- <p><strong>🔴 Occupied Spots:</strong> <span id="unavailable-parking-shubra">--</span></p>
333
- <p><strong>⚪ Total Spots:</strong> <span id="total-parking-shubra">--</span></p>
334
- </div>
335
- </div>
336
-
337
- </div>
338
- <div class="arrow-of-services">
339
- <div class="arrow-services">
340
- <img src="./images/red-arrow.webp" alt="">
341
- </div>
342
- </div>
343
- <div class="parking-gif">
344
- <img src="./images/burj arab.jpg" alt="">
345
- <div>
346
- <button onclick="window.location.href='https://www.google.com/maps/place/%D8%A8%D8%B1%D8%AC+%D8%A7%D9%84%D8%B9%D8%B1%D8%A8%E2%80%AD/@25.1415548,55.187167,17z/data=!4m9!3m8!1s0x3e5f6a576414cf2d:0xb3da71b879f0e038!5m2!4m1!1i2!8m2!3d25.1411914!4d55.1852468!16zL20vMDJtem05?entry=ttu&g_ep=EgoyMDI1MDQwMi4xIKXMDSoASAFQAw%3D%3D'">Go to the Map</button>
347
- </div>
348
- </div>
349
- </div>
350
- </section>
351
-
352
- <script>
353
- const locations4 = ["Burj Al Arab"];
354
-
355
- function updateParkingStatus(location, availableId, totalId, unavailableId) {
356
- fetch(`http://127.0.0.1:5000/parking-status?location=${location}`)
357
- .then(response => response.json())
358
- .then(data => {
359
- document.getElementById(availableId).innerText = data.available_parking;
360
- document.getElementById(totalId).innerText = data.total_parking;
361
- document.getElementById(unavailableId).innerText = data.unavailable_parking;
362
- })
363
- .catch(error => console.error(`Error fetching parking data for ${location}:`, error));
364
- }
365
-
366
- // Update all locations every 5 seconds
367
- setInterval(() => {
368
-
369
- updateParkingStatus('Burj Al Arab', 'available-parking-shubra', 'total-parking-shubra', 'unavailable-parking-shubra');
370
- }, 5000);
371
-
372
- </script>
373
-
374
- <!--? Services (((4))) Section end -->
375
-
376
-
377
-
378
-
379
-
380
- <!--
381
- <section id="parking">
382
- <div class="overlay-searching">
383
- <div class="loader-searching" id="loader-searching">
384
- <div>
385
- <img src="./images/animated-car-image-0252.gif" alt="">
386
- </div>
387
- </div>
388
- </div>
389
- <div id="floor">
390
- <div id="lane1" class="lane">
391
- <div class="slot" id="slot-1">
392
- <img src="./images/Bike.png" alt="">
393
- </div>
394
- <div class="slot" id="slot-2">
395
- <img src="./images/Bike.png" alt="">
396
- </div>
397
- <div class="slot" id="slot-3">
398
- <img src="./images/Bike.png" alt="">
399
- </div>
400
- <div class="slot" id="slot-4">
401
- <img src="./images/Bike.png" alt="">
402
- </div>
403
- <div class="slot" id="slot-5">
404
- <img src="./images/Bike.png" alt="">
405
- </div>
406
-
407
- </div>
408
- <div id="lane2" class="lane">
409
- <div class="slot" id="slot-1">
410
- <img src="./images/Jeep.png" alt="">
411
- </div>
412
- <div class="slot" id="slot-2">
413
- <img src="./images/Jeep.png" alt="">
414
- </div>
415
- <div class="slot" id="slot-3">
416
- <img src="./images/Jeep.png" alt="">
417
- </div>
418
- <div class="slot" id="slot-4">
419
- <img src="./images/Jeep.png" alt="">
420
- </div>
421
- <div class="slot" id="slot-5">
422
- <img src="./images/Jeep.png" alt="">
423
- </div>
424
-
425
- </div>
426
- <div id="lane3" class="lane">
427
- <div class="slot" id="slot-1">
428
- <img src="./images/Car.png" alt="">
429
-
430
- </div>
431
- <div class="slot" id="slot-2">
432
- <img src="./images/Car.png" alt="">
433
-
434
- </div>
435
- <div class="slot" id="slot-3">
436
- <img src="./images/Car.png" alt="">
437
-
438
- </div>
439
- <div class="slot" id="slot-4">
440
- <img src="./images/Car.png" alt="">
441
-
442
- </div>
443
- <div class="slot" id="slot-5">
444
- <img src="./images/Car.png" alt="">
445
-
446
- </div>
447
-
448
- </div>
449
- <div id="lane4" class="lane">
450
- <div class="slot" id="slot-1">
451
- <img src="./images/Bus.png" alt="">
452
- </div>
453
- <div class="slot" id="slot-2">
454
- <img src="./images/Bus.png" alt="">
455
- </div>
456
- <div class="slot" id="slot-3">
457
- <img src="./images/Bus.png" alt="">
458
- </div>
459
- <div class="slot" id="slot-4">
460
- <img src="./images/Bus.png" alt="">
461
- </div>
462
- <div class="slot" id="slot-5">
463
- <img src="./images/Bus.png" alt="">
464
- </div>
465
-
466
- </div>
467
- <div id="lane5" class="lane">
468
- <div class="slot" id="slot-1">
469
- <img src="./images/Truck.png" alt="">
470
- </div>
471
- <div class="slot" id="slot-2">
472
- <img src="./images/Truck.png" alt="">
473
- </div>
474
- <div class="slot" id="slot-3">
475
- <img src="./images/Truck.png" alt="">
476
- </div>
477
- <div class="slot" id="slot-4">
478
- <img src="./images/Truck.png" alt="">
479
- </div>
480
- <div class="slot" id="slot-5">
481
- <img src="./images/Truck.png" alt="">
482
- </div>
483
-
484
- </div>
485
- </div>
486
- <div class="parking-recipt">
487
-
488
- <div class="recipt-container">
489
- <h1>--Parking Receipt--</h1>
490
- <div class="recipt-date">
491
- <div class="recipt">
492
- Receipt no: <span> --</span>
493
- </div>
494
- <div class="date">
495
- Date: <span> --</span>
496
- </div>
497
- </div>
498
- <div class="name">
499
- Name: <span> --</span>
500
- </div>
501
-
502
- <div class="reg_num">
503
- Reg no: <span>--</span>
504
- </div>
505
-
506
- <div class="type">
507
- Vehicle type: <span> --</span>
508
- </div>
509
-
510
- <div class="floor-slot">
511
- <div class="floor">
512
- Floor no: <span>--</span>
513
- </div>
514
- <span>|</span>
515
- <div class="Lane">
516
- Lane no: <span>--</span>
517
- </div>
518
- <span>|</span>
519
- <div class="Slot">
520
- Slot no: <span> --</span>
521
- </div>
522
-
523
- </div>
524
- <div class="totalPrice">
525
- Total price: <span> --</span>
526
- </div>
527
- <div class="promo-code">
528
- <div class="promo">
529
- <input type="text" placeholder="Enter Coupon code">
530
- </div>
531
- <div class="apply_promo">
532
- <button>Apply Promo</button>
533
- </div>
534
- </div>
535
-
536
- <div class="pay">
537
- <button>Pay <span></span></button>
538
- </div>
539
-
540
- <div id="paid">
541
- <img src="./images/paid.png" alt="">
542
- </div>
543
- </div>
544
-
545
- </div>
546
- </section>
547
-
548
- </section> -->
549
- <!--? Servies Section End -->
550
-
551
- <!--? About Section Start -->
552
- <section id="about">
553
- <div class="about-head">
554
- <p>📌 About Us</p>
555
- <p>An AI-Based Smart System for Parking Management 🚗</p>
556
- </div>
557
- <div class="about-container1">
558
- <div class="about-left">
559
- <img src="./images/AI park2.jpg" alt="">
560
- </div>
561
- <div class="about-right">
562
- <div>
563
- <h1>📌 Who Are We?</h1>
564
-
565
- <h1> Park is an intelligent, fully integrated parking management system that relies on AI
566
- technologies and real-time video analysis to offer a smart and seamless parking
567
- experience for users.
568
- The system aims to streamline the parking process, reduce congestion, and improve the
569
- efficient use of available parking spaces.<h1>
570
-
571
- <h1> 🔷 What Do We Offer?</h1>
572
-
573
- <h1>Smart Parking Detection: Using AI to analyze live video feeds
574
- and accurately detect available and occupied parking spots in real time.<h1>
575
-
576
-
577
- <p>
578
- <h1> Advanced Parking Management: Supports managing multiple locations like
579
- universities, airports, and malls, providing instant updates on parking availability.</h1>
580
- </p>
581
-
582
-
583
- <h1> Computer Vision Capabilities: Integrates AI video analytics with vehicle detection
584
- and identification, enabling real-time interaction with live data</h1>
585
- </p>
586
-
587
-
588
- </p>
589
-
590
- </div>
591
- </div>
592
- </div>
593
- <div class="about-container2">
594
-
595
- <div class="about-left">
596
- <div>
597
- <h1>Why Park?</h1>
598
- <h1> ✅ High accuracy in identifying vehicles and available spaces</h1>
599
- <h1> ✅ Seamless integration with smart parking systems and smart cities</h1>
600
- <h1> ✅ Saves time and effort through automating the search for available spots</h1>
601
- <h1> ✅ Improves user experience and reduces congestion in crowded areas</h1>
602
- <h1> 🚀 With Park, you can make parking smarter and smoother than ever!</h1>
603
-
604
-
605
-
606
- <p>
607
- </p>
608
-
609
- </div>
610
- </div>
611
- <div class="about-right">
612
- <img src="./images/sedan.png" alt="">
613
- </div>
614
- </div>
615
- </section>
616
-
617
- <!--? About Section End -->
618
- <!--? Contact US Section Start -->
619
- <section id="ContactUs">
620
- <div>
621
- <h1>Contact Us</h1>
622
- </div>
623
- <div id="contact-main">
624
- <div class="message-img">
625
- <img src="./images/message.webp" alt="">
626
- </div>
627
- <div id="contactForm">
628
-
629
- <form id="contactUsForm">
630
- <div class="input"><input title="Please enter your name" id='name' type="text"
631
- placeholder="Enter your name 📛"></div>
632
- <div class="input"><input title="Please enter the email address" id='email' type="email"
633
- placeholder="Enter your email 📧"></div>
634
- <div class="input"><input title="Please enter mobile number" id='mobNo' type=" tel"
635
- placeholder="Enter your number ☎️"></div>
636
- <div class="input">
637
- <textarea title="Please write you suggestion" name="" id="suggestion" cols="30"
638
- rows=5" placeholder="Suggestion ✍️"></textarea>
639
- </div>
640
- </form>
641
- <div class="input btn">
642
- <div class="source">
643
-
644
-
645
-
646
-
647
- </button>
648
- </a>
649
- </div>
650
- <div class="download" title="Click to Download the Source Code">
651
- <a href="PabloParkingSourceCode.zip" download>
652
-
653
- </a>
654
- </div>
655
- </div>
656
- <div>
657
- <button title="Send Message" onclick="SendMessage()">Send Message</button>
658
- </div>
659
- </div>
660
- </div>
661
-
662
- </div>
663
- </section>
664
- <!--? Contact US Section End -->
665
-
666
-
667
- <!--
668
-
669
- <section id="investors">
670
- <div>
671
- <h1></h1>
672
- </div>
673
- <section id="investor-container">
674
- <aside id="investor-left" class="investor-cards">
675
- <div class="investor-image">
676
- <a href="" target="_blank"><img
677
- src="./images/Karan.jpg" alt=""></a>
678
- </div>
679
- <div class="investor-details">
680
- <div class="investor-about">
681
- <p>1</p>
682
- <div class="investors-link">
683
- <div>
684
-
685
- </div>
686
- <div>
687
-
688
- </div>
689
- </div>
690
- </div>
691
- </div>
692
- </aside>
693
- <aside id="investor-mid" class="investor-cards">
694
- <div class="investor-image">
695
- <a target="_blank"
696
- href="">
697
- <img src="./images/AtanuBhai.png" alt=""></a>
698
- </div>
699
- <div class="investor-details">
700
- <div class="investor-about">
701
- <p>2</p>
702
- </div>
703
- <div>
704
- </div>
705
- </div>
706
- </aside>
707
- <aside id="investor-right" class="investor-cards">
708
- <div class="investor-image">
709
- <a href="" target="_blank"><img
710
- src="./images/abhishekBhai.jpg" alt=""></a>
711
- </div>
712
- <div class="investor-details">
713
- <div class="investor-about">
714
- <p>3</p>
715
- </div>
716
- <div>
717
- </div>
718
- </div>
719
- </aside>
720
- </section>
721
- </section>
722
-
723
- -->
724
-
725
-
726
- <!-- ? footer start -->
727
- <footer>
728
- <div class="lower-row">
729
- <div class="copyright">
730
- © 2025 by Park
731
- </div>
732
- <div>
733
-
734
- </div>
735
- </div>
736
- </footer>
737
- <!-- ? footer end -->
738
-
739
- <!--? Alert window -->
740
- <div id="alert-box">
741
- <div class="alert-cross">
742
- <img src="./images/close.png" alt="">
743
- </div>
744
- <div class="alert-message">
745
- <p>please enter valid details please enter valid details </p>
746
- </div>
747
- <div class="alert-line"></div>
748
- </div>
749
- <!--? Alert window -->
750
- <script src="./scripts/index.js"></script>
751
- </body>
752
-
 
753
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
+ <title>Park</title>
9
+ <link rel="stylesheet" href="{{ url_for('static', filename='styles/style.css') }}">
10
+ <link rel="stylesheet" href="{{ url_for('static', filename='styles/navbar.css') }}">
11
+ <link rel="stylesheet" href="{{ url_for('static', filename='styles/responsive.css') }}">
12
+ <link rel="preconnect" href="https://fonts.googleapis.com">
13
+ <link rel="shortcut icon" href="./images/logo.png" type="image/x-icon">
14
+ <link rel="stylesheet" href="./styles/responsive.css">
15
+ </head>
16
+
17
+ <body>
18
+
19
+ <!--? Navbar Start -->
20
+ <header>
21
+ <nav id="navbar">
22
+ <div class="nav-logo">
23
+ <div class="logo">
24
+ <a href="index.html">
25
+ <div>
26
+ <img src="./images/logo.png" alt="">
27
+ </div>
28
+ <div id="logo-txt">Park</div>
29
+ </a>
30
+ </div>
31
+ </div>
32
+ <div class="nav-link">
33
+ <ul>
34
+ <a href="#home">
35
+ <li>Home</li>
36
+ </a>
37
+ <a href="#services">
38
+ <li>Location</li>
39
+ </a>
40
+ <a href="#about">
41
+ <li>About Us</li>
42
+ </a>
43
+ <a href="#ContactUs">
44
+ <li>Contact Us</li>
45
+ </a>
46
+ <a href="signin.html"> <!-- Link to the Sign-In Page -->
47
+ <li>Sign In</li>
48
+ </a>
49
+ </ul>
50
+
51
+ <!-- Search Section -->
52
+ <div class="search-container">
53
+ <input type="text" id="searchInput" placeholder="Search for a location..." />
54
+ <button id="searchButton">Search</button>
55
+ </div>
56
+
57
+ <!-- Search Section -->
58
+
59
+ </div>
60
+ <div class="nav-right-login">
61
+ <img src="./images/trucGif.gif" alt="">
62
+ </div>
63
+ </nav>
64
+ <div class="cycle">
65
+ <img src="./images/cycle.gif" alt="">
66
+ </div>
67
+ </header>
68
+ <!--? Navbar End -->
69
+
70
+ <!-- Location Sections -->
71
+ <section id="جامعة دبي">
72
+ <!-- Content for -->
73
+ </section>
74
+
75
+ <section id=" مستشفى السعودي الالماني دبي">
76
+ <!-- Content -->
77
+ </section>
78
+
79
+ <section id="دبي مول">
80
+ <!-- -->
81
+ </section>
82
+
83
+ <section id="برج العرب">
84
+ <!-- Content for -->
85
+ </section>
86
+
87
+
88
+
89
+
90
+ <!--? Main-Section Start -->
91
+ <main id="home">
92
+ <section id="container">
93
+ <seciton id="home-left">
94
+ <!-- -->
95
+ <div class="welcome">
96
+ <div><Span>Your Smart </Span> Parking</div>
97
+ <div>
98
+ One Tap Away
99
+ </div>
100
+ </div>
101
+ <div>
102
+ <p>
103
+ Discover available parking spots – no more searching hassle!
104
+ </p>
105
+ </div>
106
+ <div class="">
107
+ <div>
108
+ <img src="" alt="">
109
+ </div>
110
+ <div>
111
+ <img src="" alt="">
112
+ </div>
113
+ </div>
114
+
115
+
116
+ </seciton>
117
+ <seciton id="home-right">
118
+ <!-- -->
119
+ <div class="image-bg"></div>
120
+ <div class="jeep-img">
121
+ <img src="./images/Parking.png" alt="">
122
+ </div>
123
+ </seciton>
124
+ </section>
125
+
126
+ </main>
127
+ <!--? Main-Section End -->
128
+
129
+ <!--? Services Section Start -->
130
+ <section id="services">
131
+ <div class="services-head">
132
+ <h1>Location</h1>
133
+ <h1> University of Dubai</h1>
134
+ </div>
135
+ <div id="services-main">
136
+ <div class="form-container">
137
+ <div class="form-enhancer"><img src="./images/mmmmessage.webp" alt=""> </div>
138
+
139
+ <!-- New Parking Status Section -->
140
+ <div class="parking-status">
141
+ <h2>🚗 <span class="parking-title">Parking</span></h2>
142
+ <div class="parking-info">
143
+ <p><strong>🟢 Available Spots:</strong> <span id="available-parking-king">--</span></p>
144
+ <p><strong>🔴 Occupied Spots:</strong> <span id="unavailable-parking-king">--</span></p>
145
+ <p><strong>⚪ Total Spots:</strong> <span id="total-parking-king">--</span></p>
146
+ </div>
147
+ </div>
148
+
149
+ </div>
150
+ <div class="arrow-of-services">
151
+ <div class="arrow-services">
152
+ <img src="./images/red-arrow.webp" alt="">
153
+ </div>
154
+ </div>
155
+ <div class="parking-gif">
156
+ <img src="./images/DUbaiuni.jpg" alt="">
157
+ <div>
158
+ <button onclick="window.location.href='https://maps.app.goo.gl/3pVVgDmisHNq7s3c6'">Go to the Map</button>
159
+ </div>
160
+ </div>
161
+ </div>
162
+ </section>
163
+
164
+ <script>
165
+ const locations1 = ["University of Dubai"];
166
+
167
+ function updateParkingStatus(location, availableId, totalId, unavailableId) {
168
+ fetch(`http://127.0.0.1:5000/parking-status?location=${location}`)
169
+ .then(response => response.json())
170
+ .then(data => {
171
+ document.getElementById(availableId).innerText = data.available_parking;
172
+ document.getElementById(totalId).innerText = data.total_parking;
173
+ document.getElementById(unavailableId).innerText = data.unavailable_parking;
174
+ })
175
+ .catch(error => console.error(`Error fetching parking data for ${location}:`, error));
176
+ }
177
+
178
+ // Update all locations every 5 seconds
179
+ setInterval(() => {
180
+ updateParkingStatus('University of Dubai', 'available-parking-king', 'total-parking-king', 'unavailable-parking-king');
181
+
182
+ }, 5000);
183
+
184
+
185
+ </script>
186
+
187
+ <!--? Services (((1))) Section end -->
188
+
189
+
190
+
191
+
192
+
193
+ <!--? Services (((2))) Section Start -->
194
+ <section id="services">
195
+ <div class="services-head">
196
+ <h1>Location</h1>
197
+ <h1> Saudi German Hospital – Dubai</h1>
198
+ </div>
199
+ <div id="services-main">
200
+ <div class="form-container">
201
+ <div class="form-enhancer"><img src="./images/mmmmessage.webp" alt=""> </div>
202
+
203
+ <!-- New Parking Status Section -->
204
+ <div class="parking-status">
205
+ <h2>🚗 <span class="parking-title">Parking</span></h2>
206
+ <div class="parking-info">
207
+ <p><strong>🟢 Available Spots:</strong> <span id="available-parking-taif">--</span></p>
208
+ <p><strong>🔴 Occupied Spots:</strong> <span id="unavailable-parking-taif">--</span></p>
209
+ <p><strong>⚪ Total Spots:</strong> <span id="total-parking-taif">--</span></p>
210
+ </div>
211
+ </div>
212
+
213
+ </div>
214
+ <div class="arrow-of-services">
215
+ <div class="arrow-services">
216
+ <img src="./images/red-arrow.webp" alt="">
217
+ </div>
218
+ </div>
219
+ <div class="parking-gif">
220
+ <img src="./images/hospitelDUBAI.webp" alt="">
221
+ <div>
222
+ <button onclick="window.location.href='https://maps.app.goo.gl/wKJ78E8HsscX4xdB6'">Go to the Map</button>
223
+ </div>
224
+ </div>
225
+ </div>
226
+ </section>
227
+
228
+ <script>
229
+ const locations2 = ["Saudi Hospital"];
230
+
231
+ function updateParkingStatus(location, availableId, totalId, unavailableId) {
232
+ fetch(`http://127.0.0.1:5000/parking-status?location=${location}`)
233
+ .then(response => response.json())
234
+ .then(data => {
235
+ document.getElementById(availableId).innerText = data.available_parking;
236
+ document.getElementById(totalId).innerText = data.total_parking;
237
+ document.getElementById(unavailableId).innerText = data.unavailable_parking;
238
+ })
239
+ .catch(error => console.error(`Error fetching parking data for ${location}:`, error));
240
+ }
241
+
242
+ // Update all locations every 5 seconds
243
+ setInterval(() => {
244
+
245
+ updateParkingStatus('Saudi Hospital', 'available-parking-taif', 'total-parking-taif', 'unavailable-parking-taif');
246
+
247
+ }, 5000);
248
+
249
+ </script>
250
+ <!--? Services (((2))) Section End -->
251
+
252
+
253
+
254
+ <!--? Services (((3))) Section start -->
255
+
256
+ <section id="services">
257
+ <div class="services-head">
258
+ <h1>Location</h1>
259
+ <h1>Dubai Mall</h1>
260
+ </div>
261
+ <div id="services-main">
262
+ <div class="form-container">
263
+ <div class="form-enhancer"><img src="./images/mmmmessage.webp" alt=""> </div>
264
+
265
+ <!-- New Parking Status Section -->
266
+ <div class="parking-status">
267
+ <h2>🚗 <span class="parking-title">Parking</span></h2>
268
+ <div class="parking-info">
269
+ <p><strong>🟢 Available Spots:</strong> <span id="available-parking-airport">--</span></p>
270
+ <p><strong>🔴 Occupied Spots: </strong> <span id="unavailable-parking-airport">--</span></p>
271
+ <p><strong>⚪ Total Spots:</strong> <span id="total-parking-airport">--</span></p>
272
+ </div>
273
+ </div>
274
+
275
+ </div>
276
+ <div class="arrow-of-services">
277
+ <div class="arrow-services">
278
+ <img src="./images/red-arrow.webp" alt="">
279
+ </div>
280
+ </div>
281
+ <div class="parking-gif">
282
+ <img src="./images/dubi mall.jpg" alt="">
283
+ <div>
284
+ <button onclick="window.location.href='https://www.google.com/maps?sca_esv=28a45a8f6728ec42&rlz=1C1ONGR_enSA1125SA1125&biw=1440&bih=791&output=search&q=%D8%AF%D8%A8%D9%8A+%D9%85%D9%88%D9%84&source=lnms&fbs=ABzOT_C0L9rKKdONkGl6Mi8DWvrbHjHidxa-J8Q5Aa5K-R4xt8-hUSwcsX6ngZeKl3r-Q7bZnK5dHbrQqQdr9TT2p3y3EuKopwAhx6g8FoHyfAEvPyhQ65LcHYCX-qc5n5X-oD__6HEPS6SpuLfMN4W_G0bPB4fWM9EmlwG1m7NoZEK7rd2nQzKy4XjFJ5jNQWi99QhT5GmyS28H7uaSVh7_FDFMMq-xokX6qdWZeFcqXkxA84Cd9v-eqkQMpY6XhxrPzVlncOI6qsyTHkdZd4KTMV52hVvijg&entry=mc&ved=1t:200715&ictx=111'"> Go to the Map</button>
285
+ </div>
286
+ </div>
287
+ </div>
288
+ </section>
289
+
290
+ <script>
291
+ const locations3 = ["Dubai Mall"];
292
+
293
+ function updateParkingStatus(location, availableId, totalId, unavailableId) {
294
+ fetch(`http://127.0.0.1:5000/parking-status?location=${location}`)
295
+ .then(response => response.json())
296
+ .then(data => {
297
+ document.getElementById(availableId).innerText = data.available_parking;
298
+ document.getElementById(totalId).innerText = data.total_parking;
299
+ document.getElementById(unavailableId).innerText = data.unavailable_parking;
300
+ })
301
+ .catch(error => console.error(`Error fetching parking data for ${location}:`, error));
302
+ }
303
+
304
+ // Update all locations every 5 seconds
305
+ setInterval(() => {
306
+
307
+ updateParkingStatus('Dubai Mall', 'available-parking-airport', 'total-parking-airport', 'unavailable-parking-airport');
308
+
309
+ }, 5000);
310
+
311
+ </script>
312
+
313
+ <!--? Services (((3))) Section end -->
314
+
315
+
316
+
317
+ <!--? Services (((4))) Section start -->
318
+
319
+ <section id="services">
320
+ <div class="services-head">
321
+ <h1>Location</h1>
322
+ <h1> Burj Al Arab</h1>
323
+ </div>
324
+ <div id="services-main">
325
+ <div class="form-container">
326
+ <div class="form-enhancer"><img src="./images/mmmmessage.webp" alt=""> </div>
327
+
328
+ <!-- New Parking Status Section -->
329
+ <div class="parking-status">
330
+ <h2>🚗 <span class="parking-title">Parking</span></h2>
331
+ <div class="parking-info">
332
+ <p><strong>🟢 Available Spots:</strong> <span id="available-parking-shubra">--</span></p>
333
+ <p><strong>🔴 Occupied Spots:</strong> <span id="unavailable-parking-shubra">--</span></p>
334
+ <p><strong>⚪ Total Spots:</strong> <span id="total-parking-shubra">--</span></p>
335
+ </div>
336
+ </div>
337
+
338
+ </div>
339
+ <div class="arrow-of-services">
340
+ <div class="arrow-services">
341
+ <img src="./images/red-arrow.webp" alt="">
342
+ </div>
343
+ </div>
344
+ <div class="parking-gif">
345
+ <img src="./images/burj arab.jpg" alt="">
346
+ <div>
347
+ <button onclick="window.location.href='https://www.google.com/maps/place/%D8%A8%D8%B1%D8%AC+%D8%A7%D9%84%D8%B9%D8%B1%D8%A8%E2%80%AD/@25.1415548,55.187167,17z/data=!4m9!3m8!1s0x3e5f6a576414cf2d:0xb3da71b879f0e038!5m2!4m1!1i2!8m2!3d25.1411914!4d55.1852468!16zL20vMDJtem05?entry=ttu&g_ep=EgoyMDI1MDQwMi4xIKXMDSoASAFQAw%3D%3D'">Go to the Map</button>
348
+ </div>
349
+ </div>
350
+ </div>
351
+ </section>
352
+
353
+ <script>
354
+ const locations4 = ["Burj Al Arab"];
355
+
356
+ function updateParkingStatus(location, availableId, totalId, unavailableId) {
357
+ fetch(`http://127.0.0.1:5000/parking-status?location=${location}`)
358
+ .then(response => response.json())
359
+ .then(data => {
360
+ document.getElementById(availableId).innerText = data.available_parking;
361
+ document.getElementById(totalId).innerText = data.total_parking;
362
+ document.getElementById(unavailableId).innerText = data.unavailable_parking;
363
+ })
364
+ .catch(error => console.error(`Error fetching parking data for ${location}:`, error));
365
+ }
366
+
367
+ // Update all locations every 5 seconds
368
+ setInterval(() => {
369
+
370
+ updateParkingStatus('Burj Al Arab', 'available-parking-shubra', 'total-parking-shubra', 'unavailable-parking-shubra');
371
+ }, 5000);
372
+
373
+ </script>
374
+
375
+ <!--? Services (((4))) Section end -->
376
+
377
+
378
+
379
+
380
+
381
+ <!--
382
+ <section id="parking">
383
+ <div class="overlay-searching">
384
+ <div class="loader-searching" id="loader-searching">
385
+ <div>
386
+ <img src="./images/animated-car-image-0252.gif" alt="">
387
+ </div>
388
+ </div>
389
+ </div>
390
+ <div id="floor">
391
+ <div id="lane1" class="lane">
392
+ <div class="slot" id="slot-1">
393
+ <img src="./images/Bike.png" alt="">
394
+ </div>
395
+ <div class="slot" id="slot-2">
396
+ <img src="./images/Bike.png" alt="">
397
+ </div>
398
+ <div class="slot" id="slot-3">
399
+ <img src="./images/Bike.png" alt="">
400
+ </div>
401
+ <div class="slot" id="slot-4">
402
+ <img src="./images/Bike.png" alt="">
403
+ </div>
404
+ <div class="slot" id="slot-5">
405
+ <img src="./images/Bike.png" alt="">
406
+ </div>
407
+
408
+ </div>
409
+ <div id="lane2" class="lane">
410
+ <div class="slot" id="slot-1">
411
+ <img src="./images/Jeep.png" alt="">
412
+ </div>
413
+ <div class="slot" id="slot-2">
414
+ <img src="./images/Jeep.png" alt="">
415
+ </div>
416
+ <div class="slot" id="slot-3">
417
+ <img src="./images/Jeep.png" alt="">
418
+ </div>
419
+ <div class="slot" id="slot-4">
420
+ <img src="./images/Jeep.png" alt="">
421
+ </div>
422
+ <div class="slot" id="slot-5">
423
+ <img src="./images/Jeep.png" alt="">
424
+ </div>
425
+
426
+ </div>
427
+ <div id="lane3" class="lane">
428
+ <div class="slot" id="slot-1">
429
+ <img src="./images/Car.png" alt="">
430
+
431
+ </div>
432
+ <div class="slot" id="slot-2">
433
+ <img src="./images/Car.png" alt="">
434
+
435
+ </div>
436
+ <div class="slot" id="slot-3">
437
+ <img src="./images/Car.png" alt="">
438
+
439
+ </div>
440
+ <div class="slot" id="slot-4">
441
+ <img src="./images/Car.png" alt="">
442
+
443
+ </div>
444
+ <div class="slot" id="slot-5">
445
+ <img src="./images/Car.png" alt="">
446
+
447
+ </div>
448
+
449
+ </div>
450
+ <div id="lane4" class="lane">
451
+ <div class="slot" id="slot-1">
452
+ <img src="./images/Bus.png" alt="">
453
+ </div>
454
+ <div class="slot" id="slot-2">
455
+ <img src="./images/Bus.png" alt="">
456
+ </div>
457
+ <div class="slot" id="slot-3">
458
+ <img src="./images/Bus.png" alt="">
459
+ </div>
460
+ <div class="slot" id="slot-4">
461
+ <img src="./images/Bus.png" alt="">
462
+ </div>
463
+ <div class="slot" id="slot-5">
464
+ <img src="./images/Bus.png" alt="">
465
+ </div>
466
+
467
+ </div>
468
+ <div id="lane5" class="lane">
469
+ <div class="slot" id="slot-1">
470
+ <img src="./images/Truck.png" alt="">
471
+ </div>
472
+ <div class="slot" id="slot-2">
473
+ <img src="./images/Truck.png" alt="">
474
+ </div>
475
+ <div class="slot" id="slot-3">
476
+ <img src="./images/Truck.png" alt="">
477
+ </div>
478
+ <div class="slot" id="slot-4">
479
+ <img src="./images/Truck.png" alt="">
480
+ </div>
481
+ <div class="slot" id="slot-5">
482
+ <img src="./images/Truck.png" alt="">
483
+ </div>
484
+
485
+ </div>
486
+ </div>
487
+ <div class="parking-recipt">
488
+
489
+ <div class="recipt-container">
490
+ <h1>--Parking Receipt--</h1>
491
+ <div class="recipt-date">
492
+ <div class="recipt">
493
+ Receipt no: <span> --</span>
494
+ </div>
495
+ <div class="date">
496
+ Date: <span> --</span>
497
+ </div>
498
+ </div>
499
+ <div class="name">
500
+ Name: <span> --</span>
501
+ </div>
502
+
503
+ <div class="reg_num">
504
+ Reg no: <span>--</span>
505
+ </div>
506
+
507
+ <div class="type">
508
+ Vehicle type: <span> --</span>
509
+ </div>
510
+
511
+ <div class="floor-slot">
512
+ <div class="floor">
513
+ Floor no: <span>--</span>
514
+ </div>
515
+ <span>|</span>
516
+ <div class="Lane">
517
+ Lane no: <span>--</span>
518
+ </div>
519
+ <span>|</span>
520
+ <div class="Slot">
521
+ Slot no: <span> --</span>
522
+ </div>
523
+
524
+ </div>
525
+ <div class="totalPrice">
526
+ Total price: <span> --</span>
527
+ </div>
528
+ <div class="promo-code">
529
+ <div class="promo">
530
+ <input type="text" placeholder="Enter Coupon code">
531
+ </div>
532
+ <div class="apply_promo">
533
+ <button>Apply Promo</button>
534
+ </div>
535
+ </div>
536
+
537
+ <div class="pay">
538
+ <button>Pay <span></span></button>
539
+ </div>
540
+
541
+ <div id="paid">
542
+ <img src="./images/paid.png" alt="">
543
+ </div>
544
+ </div>
545
+
546
+ </div>
547
+ </section>
548
+
549
+ </section> -->
550
+ <!--? Servies Section End -->
551
+
552
+ <!--? About Section Start -->
553
+ <section id="about">
554
+ <div class="about-head">
555
+ <p>📌 About Us</p>
556
+ <p>An AI-Based Smart System for Parking Management 🚗</p>
557
+ </div>
558
+ <div class="about-container1">
559
+ <div class="about-left">
560
+ <img src="./images/AI park2.jpg" alt="">
561
+ </div>
562
+ <div class="about-right">
563
+ <div>
564
+ <h1>📌 Who Are We?</h1>
565
+
566
+ <h1> Park is an intelligent, fully integrated parking management system that relies on AI
567
+ technologies and real-time video analysis to offer a smart and seamless parking
568
+ experience for users.
569
+ The system aims to streamline the parking process, reduce congestion, and improve the
570
+ efficient use of available parking spaces.<h1>
571
+
572
+ <h1> 🔷 What Do We Offer?</h1>
573
+
574
+ <h1>Smart Parking Detection: Using AI to analyze live video feeds
575
+ and accurately detect available and occupied parking spots in real time.<h1>
576
+
577
+
578
+ <p>
579
+ <h1> Advanced Parking Management: Supports managing multiple locations like
580
+ universities, airports, and malls, providing instant updates on parking availability.</h1>
581
+ </p>
582
+
583
+
584
+ <h1> Computer Vision Capabilities: Integrates AI video analytics with vehicle detection
585
+ and identification, enabling real-time interaction with live data</h1>
586
+ </p>
587
+
588
+
589
+ </p>
590
+
591
+ </div>
592
+ </div>
593
+ </div>
594
+ <div class="about-container2">
595
+
596
+ <div class="about-left">
597
+ <div>
598
+ <h1>Why Park?</h1>
599
+ <h1> ✅ High accuracy in identifying vehicles and available spaces</h1>
600
+ <h1> ✅ Seamless integration with smart parking systems and smart cities</h1>
601
+ <h1> ✅ Saves time and effort through automating the search for available spots</h1>
602
+ <h1> ✅ Improves user experience and reduces congestion in crowded areas</h1>
603
+ <h1> 🚀 With Park, you can make parking smarter and smoother than ever!</h1>
604
+
605
+
606
+
607
+ <p>
608
+ </p>
609
+
610
+ </div>
611
+ </div>
612
+ <div class="about-right">
613
+ <img src="./images/sedan.png" alt="">
614
+ </div>
615
+ </div>
616
+ </section>
617
+
618
+ <!--? About Section End -->
619
+ <!--? Contact US Section Start -->
620
+ <section id="ContactUs">
621
+ <div>
622
+ <h1>Contact Us</h1>
623
+ </div>
624
+ <div id="contact-main">
625
+ <div class="message-img">
626
+ <img src="./images/message.webp" alt="">
627
+ </div>
628
+ <div id="contactForm">
629
+
630
+ <form id="contactUsForm">
631
+ <div class="input"><input title="Please enter your name" id='name' type="text"
632
+ placeholder="Enter your name 📛"></div>
633
+ <div class="input"><input title="Please enter the email address" id='email' type="email"
634
+ placeholder="Enter your email 📧"></div>
635
+ <div class="input"><input title="Please enter mobile number" id='mobNo' type=" tel"
636
+ placeholder="Enter your number ☎️"></div>
637
+ <div class="input">
638
+ <textarea title="Please write you suggestion" name="" id="suggestion" cols="30"
639
+ rows=5" placeholder="Suggestion ✍️"></textarea>
640
+ </div>
641
+ </form>
642
+ <div class="input btn">
643
+ <div class="source">
644
+
645
+
646
+
647
+
648
+ </button>
649
+ </a>
650
+ </div>
651
+ <div class="download" title="Click to Download the Source Code">
652
+ <a href="PabloParkingSourceCode.zip" download>
653
+
654
+ </a>
655
+ </div>
656
+ </div>
657
+ <div>
658
+ <button title="Send Message" onclick="SendMessage()">Send Message</button>
659
+ </div>
660
+ </div>
661
+ </div>
662
+
663
+ </div>
664
+ </section>
665
+ <!--? Contact US Section End -->
666
+
667
+
668
+ <!--
669
+
670
+ <section id="investors">
671
+ <div>
672
+ <h1></h1>
673
+ </div>
674
+ <section id="investor-container">
675
+ <aside id="investor-left" class="investor-cards">
676
+ <div class="investor-image">
677
+ <a href="" target="_blank"><img
678
+ src="./images/Karan.jpg" alt=""></a>
679
+ </div>
680
+ <div class="investor-details">
681
+ <div class="investor-about">
682
+ <p>1</p>
683
+ <div class="investors-link">
684
+ <div>
685
+
686
+ </div>
687
+ <div>
688
+
689
+ </div>
690
+ </div>
691
+ </div>
692
+ </div>
693
+ </aside>
694
+ <aside id="investor-mid" class="investor-cards">
695
+ <div class="investor-image">
696
+ <a target="_blank"
697
+ href="">
698
+ <img src="./images/AtanuBhai.png" alt=""></a>
699
+ </div>
700
+ <div class="investor-details">
701
+ <div class="investor-about">
702
+ <p>2</p>
703
+ </div>
704
+ <div>
705
+ </div>
706
+ </div>
707
+ </aside>
708
+ <aside id="investor-right" class="investor-cards">
709
+ <div class="investor-image">
710
+ <a href="" target="_blank"><img
711
+ src="./images/abhishekBhai.jpg" alt=""></a>
712
+ </div>
713
+ <div class="investor-details">
714
+ <div class="investor-about">
715
+ <p>3</p>
716
+ </div>
717
+ <div>
718
+ </div>
719
+ </div>
720
+ </aside>
721
+ </section>
722
+ </section>
723
+
724
+ -->
725
+
726
+
727
+ <!-- ? footer start -->
728
+ <footer>
729
+ <div class="lower-row">
730
+ <div class="copyright">
731
+ © 2025 by Park
732
+ </div>
733
+ <div>
734
+
735
+ </div>
736
+ </div>
737
+ </footer>
738
+ <!-- ? footer end -->
739
+
740
+ <!--? Alert window -->
741
+ <div id="alert-box">
742
+ <div class="alert-cross">
743
+ <img src="./images/close.png" alt="">
744
+ </div>
745
+ <div class="alert-message">
746
+ <p>please enter valid details please enter valid details </p>
747
+ </div>
748
+ <div class="alert-line"></div>
749
+ </div>
750
+ <!--? Alert window -->
751
+ <script src="./scripts/index.js"></script>
752
+ </body>
753
+
754
  </html>