KatlegoWalter commited on
Commit
22d1237
·
verified ·
1 Parent(s): e4b6b34

After I click confirm booking the application should show a pop-up that the booking is scheduled and confirm the courtesy car I selected.

Browse files
Files changed (3) hide show
  1. README.md +9 -5
  2. admin-dashboard.html +442 -0
  3. index.html +441 -18
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Undefined
3
- emoji: 🏢
4
- colorFrom: indigo
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
 
1
  ---
2
+ title: undefined
3
+ colorFrom: green
4
+ colorTo: yellow
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
admin-dashboard.html ADDED
@@ -0,0 +1,442 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AutoServe | South African Car Service Booking</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: '#1e3a8a', // navy blue
17
+ secondary: '#9ca3af' // silver
18
+ }
19
+ }
20
+ }
21
+ }
22
+ </script>
23
+ <style>
24
+ .hero-bg {
25
+ background-image: url('http://static.photos/automotive/1200x630/42');
26
+ background-size: cover;
27
+ background-position: center;
28
+ }
29
+ .scroll-smooth {
30
+ scroll-behavior: smooth;
31
+ }
32
+ .courtesy-car-card:hover {
33
+ transform: translateY(-5px);
34
+ box-shadow: 0 10px 25px rgba(0,0,0,0.1);
35
+ }
36
+ </style>
37
+ </head>
38
+ <body class="scroll-smooth bg-gray-50">
39
+ <!-- Navigation -->
40
+ <nav class="bg-primary text-white shadow-lg">
41
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
42
+ <div class="flex items-center space-x-2">
43
+ <i data-feather="settings" class="text-secondary"></i>
44
+ <span class="text-xl font-bold">AutoServe</span>
45
+ </div>
46
+ <div class="hidden md:flex space-x-6">
47
+ <a href="#services" class="hover:text-secondary transition">Services</a>
48
+ <a href="#booking" class="hover:text-secondary transition">Book Now</a>
49
+ <a href="#contact" class="hover:text-secondary transition">Contact</a>
50
+ <a href="#" class="bg-secondary text-primary px-4 py-2 rounded-lg font-medium hover:bg-gray-300 transition" id="adminLoginBtn">Admin Login</a>
51
+ </div>
52
+ <button class="md:hidden focus:outline-none" id="mobileMenuBtn">
53
+ <i data-feather="menu" class="w-6 h-6"></i>
54
+ </button>
55
+ </div>
56
+ <!-- Mobile Menu -->
57
+ <div class="md:hidden hidden bg-primary-darker px-4 py-2" id="mobileMenu">
58
+ <a href="#services" class="block py-2 hover:text-secondary transition">Services</a>
59
+ <a href="#booking" class="block py-2 hover:text-secondary transition">Book Now</a>
60
+ <a href="#contact" class="block py-2 hover:text-secondary transition">Contact</a>
61
+ <a href="#" class="block bg-secondary text-primary px-4 py-2 rounded-lg font-medium my-2 text-center">Admin Login</a>
62
+ </div>
63
+ </nav>
64
+
65
+ <!-- Hero Section -->
66
+ <section class="hero-bg text-white py-20 md:py-32">
67
+ <div class="container mx-auto px-4 text-center bg-black bg-opacity-50 py-10 rounded-lg">
68
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">Your Car Deserves The Best Care</h1>
69
+ <p class="text-xl md:text-2xl mb-8">Book your service online and drive with confidence</p>
70
+ <a href="#booking" class="bg-secondary text-primary px-8 py-3 rounded-lg font-bold text-lg hover:bg-gray-300 transition inline-block">Book Service Now</a>
71
+ </div>
72
+ </section>
73
+
74
+ <!-- Services Section -->
75
+ <section id="services" class="py-16 bg-white">
76
+ <div class="container mx-auto px-4">
77
+ <h2 class="text-3xl font-bold text-center mb-12 text-primary">Our Services</h2>
78
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
79
+ <!-- Service Card 1 -->
80
+ <div class="bg-gray-50 p-6 rounded-lg shadow-md border border-gray-100 hover:shadow-lg transition">
81
+ <div class="text-primary mb-4">
82
+ <i data-feather="tool" class="w-10 h-10"></i>
83
+ </div>
84
+ <h3 class="text-xl font-bold mb-3">Minor Service</h3>
85
+ <p class="text-gray-600">Oil change, filter replacement, fluid top-up and basic safety check.</p>
86
+ </div>
87
+
88
+ <!-- Service Card 2 -->
89
+ <div class="bg-gray-50 p-6 rounded-lg shadow-md border border-gray-100 hover:shadow-lg transition">
90
+ <div class="text-primary mb-4">
91
+ <i data-feather="settings" class="w-10 h-10"></i>
92
+ </div>
93
+ <h3 class="text-xl font-bold mb-3">Major Service</h3>
94
+ <p class="text-gray-600">Comprehensive check including all minor service items plus additional inspections.</p>
95
+ </div>
96
+
97
+ <!-- Service Card 3 -->
98
+ <div class="bg-gray-50 p-6 rounded-lg shadow-md border border-gray-100 hover:shadow-lg transition">
99
+ <div class="text-primary mb-4">
100
+ <i data-feather="activity" class="w-10 h-10"></i>
101
+ </div>
102
+ <h3 class="text-xl font-bold mb-3">Diagnostics</h3>
103
+ <p class="text-gray-600">Advanced computer diagnostics to identify any issues with your vehicle.</p>
104
+ </div>
105
+ </div>
106
+ </div>
107
+ </section>
108
+
109
+ <!-- Booking Form Section -->
110
+ <section id="booking" class="py-16 bg-gray-50">
111
+ <div class="container mx-auto px-4">
112
+ <h2 class="text-3xl font-bold text-center mb-12 text-primary">Book Your Service</h2>
113
+
114
+ <div class="max-w-3xl mx-auto bg-white p-8 rounded-lg shadow-md">
115
+ <form id="bookingForm">
116
+ <!-- Personal Information -->
117
+ <div class="mb-8">
118
+ <h3 class="text-xl font-semibold mb-4 text-primary border-b pb-2">Personal Information</h3>
119
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
120
+ <div>
121
+ <label for="name" class="block text-gray-700 mb-2">Full Name</label>
122
+ <input type="text" id="name" name="name" required class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary">
123
+ </div>
124
+ <div>
125
+ <label for="phone" class="block text-gray-700 mb-2">Phone Number</label>
126
+ <input type="tel" id="phone" name="phone" required class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary">
127
+ </div>
128
+ <div>
129
+ <label for="email" class="block text-gray-700 mb-2">Email Address</label>
130
+ <input type="email" id="email" name="email" required class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary">
131
+ </div>
132
+ </div>
133
+ </div>
134
+
135
+ <!-- Vehicle Information -->
136
+ <div class="mb-8">
137
+ <h3 class="text-xl font-semibold mb-4 text-primary border-b pb-2">Vehicle Information</h3>
138
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
139
+ <div>
140
+ <label for="make" class="block text-gray-700 mb-2">Make</label>
141
+ <input type="text" id="make" name="make" required class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary">
142
+ </div>
143
+ <div>
144
+ <label for="model" class="block text-gray-700 mb-2">Model</label>
145
+ <input type="text" id="model" name="model" required class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary">
146
+ </div>
147
+ <div>
148
+ <label for="reg" class="block text-gray-700 mb-2">Registration Number</label>
149
+ <input type="text" id="reg" name="reg" required class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary">
150
+ </div>
151
+ </div>
152
+ </div>
153
+
154
+ <!-- Service Details -->
155
+ <div class="mb-8">
156
+ <h3 class="text-xl font-semibold mb-4 text-primary border-b pb-2">Service Details</h3>
157
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
158
+ <div>
159
+ <label for="serviceType" class="block text-gray-700 mb-2">Service Type</label>
160
+ <select id="serviceType" name="serviceType" required class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary">
161
+ <option value="">Select Service Type</option>
162
+ <option value="minor">Minor Service</option>
163
+ <option value="major">Major Service</option>
164
+ <option value="diagnostic">Diagnostic</option>
165
+ <option value="body_repair">Body Repair</option>
166
+ <option value="other">Other</option>
167
+ </select>
168
+ </div>
169
+ <div>
170
+ <label for="date" class="block text-gray-700 mb-2">Preferred Date</label>
171
+ <input type="date" id="date" name="date" required class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary">
172
+ </div>
173
+ </div>
174
+ </div>
175
+
176
+ <!-- Courtesy Car Section -->
177
+ <div class="mb-8" id="courtesyCarSection">
178
+ <div class="flex items-center mb-4">
179
+ <input type="checkbox" id="needCar" name="needCar" class="mr-2 h-5 w-5">
180
+ <label for="needCar" class="text-lg font-medium text-gray-700">I need a courtesy car</label>
181
+ </div>
182
+
183
+ <div id="carSelection" class="hidden mt-6">
184
+ <h4 class="text-lg font-semibold mb-4 text-primary">Available Courtesy Cars</h4>
185
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4" id="availableCars">
186
+ <!-- Cars will be populated here via JS -->
187
+ <div class="courtesy-car-card bg-gray-50 p-4 rounded-lg border border-gray-200 cursor-pointer transition" data-car-id="1">
188
+ <div class="flex justify-between items-start">
189
+ <div>
190
+ <h5 class="font-bold text-lg">Toyota Corolla</h5>
191
+ <p class="text-gray-600">CA 123-456 • 45,000 km</p>
192
+ </div>
193
+ <i data-feather="check-circle" class="text-green-500 hidden"></i>
194
+ </div>
195
+ </div>
196
+ <div class="courtesy-car-card bg-gray-50 p-4 rounded-lg border border-gray-200 cursor-pointer transition" data-car-id="2">
197
+ <div class="flex justify-between items-start">
198
+ <div>
199
+ <h5 class="font-bold text-lg">Volkswagen Polo</h5>
200
+ <p class="text-gray-600">CA 789-012 • 32,500 km</p>
201
+ </div>
202
+ <i data-feather="check-circle" class="text-green-500 hidden"></i>
203
+ </div>
204
+ </div>
205
+ <div class="courtesy-car-card bg-gray-50 p-4 rounded-lg border border-gray-200 cursor-pointer transition" data-car-id="3">
206
+ <div class="flex justify-between items-start">
207
+ <div>
208
+ <h5 class="font-bold text-lg">Hyundai i20</h5>
209
+ <p class="text-gray-600">CA 345-678 • 28,100 km</p>
210
+ </div>
211
+ <i data-feather="check-circle" class="text-green-500 hidden"></i>
212
+ </div>
213
+ </div>
214
+ </div>
215
+
216
+ <div id="noCarAvailable" class="hidden mt-4">
217
+ <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4">
218
+ <div class="flex">
219
+ <div class="flex-shrink-0">
220
+ <i data-feather="alert-triangle" class="h-5 w-5 text-yellow-400"></i>
221
+ </div>
222
+ <div class="ml-3">
223
+ <p class="text-sm text-yellow-700">
224
+ No courtesy cars available for your selected date. Would you like to be notified if one becomes available?
225
+ </p>
226
+ <div class="mt-2">
227
+ <div class="flex items-center">
228
+ <input type="checkbox" id="notifyMe" name="notifyMe" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
229
+ <label for="notifyMe" class="ml-2 block text-sm text-gray-700">Yes, notify me</label>
230
+ </div>
231
+ </div>
232
+ </div>
233
+ </div>
234
+ </div>
235
+ </div>
236
+ </div>
237
+ </div>
238
+
239
+ <div class="mt-8">
240
+ <button type="submit" class="w-full bg-primary text-white py-3 px-6 rounded-lg font-bold text-lg hover:bg-blue-800 transition focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2">
241
+ Confirm Booking
242
+ </button>
243
+ </div>
244
+ </form>
245
+ </div>
246
+ </div>
247
+ </section>
248
+
249
+ <!-- Contact Section -->
250
+ <section id="contact" class="py-16 bg-white">
251
+ <div class="container mx-auto px-4">
252
+ <h2 class="text-3xl font-bold text-center mb-12 text-primary">Contact Us</h2>
253
+
254
+ <div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8">
255
+ <div>
256
+ <h3 class="text-xl font-semibold mb-4 text-primary">Our Dealership</h3>
257
+ <div class="space-y-4">
258
+ <div class="flex items-start">
259
+ <i data-feather="map-pin" class="text-secondary mr-3 mt-1"></i>
260
+ <p>123 Auto Street, Johannesburg, South Africa</p>
261
+ </div>
262
+ <div class="flex items-start">
263
+ <i data-feather="phone" class="text-secondary mr-3 mt-1"></i>
264
+ <p>+27 11 123 4567</p>
265
+ </div>
266
+ <div class="flex items-start">
267
+ <i data-feather="mail" class="text-secondary mr-3 mt-1"></i>
268
+ <p>info@autoserve.co.za</p>
269
+ </div>
270
+ <div class="flex items-start">
271
+ <i data-feather="clock" class="text-secondary mr-3 mt-1"></i>
272
+ <p>Monday - Friday: 8:00 AM - 5:00 PM<br>Saturday: 8:00 AM - 1:00 PM</p>
273
+ </div>
274
+ </div>
275
+ </div>
276
+
277
+ <div>
278
+ <h3 class="text-xl font-semibold mb-4 text-primary">Send Us a Message</h3>
279
+ <form>
280
+ <div class="mb-4">
281
+ <label for="contactName" class="block text-gray-700 mb-2">Your Name</label>
282
+ <input type="text" id="contactName" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary">
283
+ </div>
284
+ <div class="mb-4">
285
+ <label for="contactEmail" class="block text-gray-700 mb-2">Your Email</label>
286
+ <input type="email" id="contactEmail" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary">
287
+ </div>
288
+ <div class="mb-4">
289
+ <label for="contactMessage" class="block text-gray-700 mb-2">Message</label>
290
+ <textarea id="contactMessage" rows="4" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"></textarea>
291
+ </div>
292
+ <button type="submit" class="bg-primary text-white py-2 px-6 rounded-lg font-medium hover:bg-blue-800 transition">Send Message</button>
293
+ </form>
294
+ </div>
295
+ </div>
296
+ </div>
297
+ </section>
298
+
299
+ <!-- Footer -->
300
+ <footer class="bg-primary text-white py-8">
301
+ <div class="container mx-auto px-4">
302
+ <div class="flex flex-col md:flex-row justify-between items-center">
303
+ <div class="mb-4 md:mb-0">
304
+ <div class="flex items-center space-x-2">
305
+ <i data-feather="settings" class="text-secondary"></i>
306
+ <span class="text-xl font-bold">AutoServe</span>
307
+ </div>
308
+ <p class="mt-2 text-gray-300">Your car service booking made easy.</p>
309
+ </div>
310
+ <div class="flex space-x-6">
311
+ <a href="#" class="hover:text-secondary transition"><i data-feather="facebook"></i></a>
312
+ <a href="#" class="hover:text-secondary transition"><i data-feather="twitter"></i></a>
313
+ <a href="#" class="hover:text-secondary transition"><i data-feather="instagram"></i></a>
314
+ </div>
315
+ </div>
316
+ <div class="border-t border-gray-700 mt-6 pt-6 text-center text-gray-300">
317
+ <p>&copy; 2023 AutoServe. All rights reserved.</p>
318
+ </div>
319
+ </div>
320
+ </footer>
321
+
322
+ <!-- Admin Login Modal -->
323
+ <div id="adminModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 hidden z-50">
324
+ <div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
325
+ <div class="flex justify-between items-center mb-4">
326
+ <h3 class="text-xl font-bold text-primary">Admin Login</h3>
327
+ <button id="closeModal" class="text-gray-500 hover:text-gray-700">
328
+ <i data-feather="x"></i>
329
+ </button>
330
+ </div>
331
+ <form id="adminLoginForm">
332
+ <div class="mb-4">
333
+ <label for="username" class="block text-gray-700 mb-2">Username</label>
334
+ <input type="text" id="username" required class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary">
335
+ </div>
336
+ <div class="mb-6">
337
+ <label for="password" class="block text-gray-700 mb-2">Password</label>
338
+ <input type="password" id="password" required class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary">
339
+ </div>
340
+ <button type="submit" class="w-full bg-primary text-white py-2 px-6 rounded-lg font-medium hover:bg-blue-800 transition">Login</button>
341
+ </form>
342
+ </div>
343
+ </div>
344
+
345
+ <!-- Booking Confirmation Modal -->
346
+ <div id="confirmationModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 hidden z-50">
347
+ <div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
348
+ <div class="text-center">
349
+ <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 mb-4">
350
+ <i data-feather="check" class="text-green-600"></i>
351
+ </div>
352
+ <h3 class="text-lg font-medium text-gray-900 mb-2">Booking Confirmed!</h3>
353
+ <div class="mt-2 text-sm text-gray-500">
354
+ <p>Your service booking has been confirmed. A confirmation email has been sent to your registered email address.</p>
355
+ </div>
356
+ <div class="mt-5">
357
+ <button id="closeConfirmation" type="button" class="inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary text-base font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:text-sm">
358
+ Close
359
+ </button>
360
+ </div>
361
+ </div>
362
+ </div>
363
+ </div>
364
+
365
+ <script>
366
+ // Mobile menu toggle
367
+ document.getElementById('mobileMenuBtn').addEventListener('click', function() {
368
+ const menu = document.getElementById('mobileMenu');
369
+ menu.classList.toggle('hidden');
370
+ });
371
+
372
+ // Admin login modal
373
+ const adminModal = document.getElementById('adminModal');
374
+ document.getElementById('adminLoginBtn').addEventListener('click', function(e) {
375
+ e.preventDefault();
376
+ adminModal.classList.remove('hidden');
377
+ });
378
+
379
+ document.getElementById('closeModal').addEventListener('click', function() {
380
+ adminModal.classList.add('hidden');
381
+ });
382
+
383
+ // Close modal when clicking outside
384
+ adminModal.addEventListener('click', function(e) {
385
+ if (e.target === adminModal) {
386
+ adminModal.classList.add('hidden');
387
+ }
388
+ });
389
+
390
+ // Courtesy car toggle
391
+ document.getElementById('needCar').addEventListener('change', function() {
392
+ const carSelection = document.getElementById('carSelection');
393
+ if (this.checked) {
394
+ carSelection.classList.remove('hidden');
395
+ // Here you would typically fetch available cars from API based on selected date
396
+ // For demo, we're just showing the hardcoded cars
397
+ document.getElementById('noCarAvailable').classList.add('hidden');
398
+ document.querySelectorAll('#availableCars > div').forEach(car => {
399
+ car.classList.remove('hidden');
400
+ });
401
+ } else {
402
+ carSelection.classList.add('hidden');
403
+ }
404
+ });
405
+
406
+ // Select courtesy car
407
+ document.querySelectorAll('.courtesy-car-card').forEach(card => {
408
+ card.addEventListener('click', function() {
409
+ // Deselect all cars first
410
+ document.querySelectorAll('.courtesy-car-card').forEach(c => {
411
+ c.classList.remove('border-primary', 'border-2');
412
+ c.querySelector('i').classList.add('hidden');
413
+ });
414
+
415
+ // Select this car
416
+ this.classList.add('border-primary', 'border-2');
417
+ this.querySelector('i').classList.remove('hidden');
418
+ });
419
+ });
420
+
421
+ // Form submission
422
+ document.getElementById('bookingForm').addEventListener('submit', function(e) {
423
+ e.preventDefault();
424
+
425
+ // Here you would typically send the form data to your backend API
426
+ // For demo, we're just showing the confirmation modal
427
+
428
+ const confirmationModal = document.getElementById('confirmationModal');
429
+ confirmationModal.classList.remove('hidden');
430
+ });
431
+
432
+ // Close confirmation modal
433
+ document.getElementById('closeConfirmation').addEventListener('click', function() {
434
+ const confirmationModal = document.getElementById('confirmationModal');
435
+ confirmationModal.classList.add('hidden');
436
+ });
437
+
438
+ // Initialize feather icons
439
+ feather.replace();
440
+ </script>
441
+ </body>
442
+ </html>
index.html CHANGED
@@ -1,19 +1,442 @@
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="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AutoServe | South African Car Service Booking</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: '#1e3a8a', // navy blue
17
+ secondary: '#9ca3af' // silver
18
+ }
19
+ }
20
+ }
21
+ }
22
+ </script>
23
+ <style>
24
+ .hero-bg {
25
+ background-image: url('http://static.photos/automotive/1200x630/42');
26
+ background-size: cover;
27
+ background-position: center;
28
+ }
29
+ .scroll-smooth {
30
+ scroll-behavior: smooth;
31
+ }
32
+ .courtesy-car-card:hover {
33
+ transform: translateY(-5px);
34
+ box-shadow: 0 10px 25px rgba(0,0,0,0.1);
35
+ }
36
+ </style>
37
+ </head>
38
+ <body class="scroll-smooth bg-gray-50">
39
+ <!-- Navigation -->
40
+ <nav class="bg-primary text-white shadow-lg">
41
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
42
+ <div class="flex items-center space-x-2">
43
+ <i data-feather="settings" class="text-secondary"></i>
44
+ <span class="text-xl font-bold">AutoServe</span>
45
+ </div>
46
+ <div class="hidden md:flex space-x-6">
47
+ <a href="#services" class="hover:text-secondary transition">Services</a>
48
+ <a href="#booking" class="hover:text-secondary transition">Book Now</a>
49
+ <a href="#contact" class="hover:text-secondary transition">Contact</a>
50
+ <a href="#" class="bg-secondary text-primary px-4 py-2 rounded-lg font-medium hover:bg-gray-300 transition" id="adminLoginBtn">Admin Login</a>
51
+ </div>
52
+ <button class="md:hidden focus:outline-none" id="mobileMenuBtn">
53
+ <i data-feather="menu" class="w-6 h-6"></i>
54
+ </button>
55
+ </div>
56
+ <!-- Mobile Menu -->
57
+ <div class="md:hidden hidden bg-primary-darker px-4 py-2" id="mobileMenu">
58
+ <a href="#services" class="block py-2 hover:text-secondary transition">Services</a>
59
+ <a href="#booking" class="block py-2 hover:text-secondary transition">Book Now</a>
60
+ <a href="#contact" class="block py-2 hover:text-secondary transition">Contact</a>
61
+ <a href="#" class="block bg-secondary text-primary px-4 py-2 rounded-lg font-medium my-2 text-center">Admin Login</a>
62
+ </div>
63
+ </nav>
64
+
65
+ <!-- Hero Section -->
66
+ <section class="hero-bg text-white py-20 md:py-32">
67
+ <div class="container mx-auto px-4 text-center bg-black bg-opacity-50 py-10 rounded-lg">
68
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">Your Car Deserves The Best Care</h1>
69
+ <p class="text-xl md:text-2xl mb-8">Book your service online and drive with confidence</p>
70
+ <a href="#booking" class="bg-secondary text-primary px-8 py-3 rounded-lg font-bold text-lg hover:bg-gray-300 transition inline-block">Book Service Now</a>
71
+ </div>
72
+ </section>
73
+
74
+ <!-- Services Section -->
75
+ <section id="services" class="py-16 bg-white">
76
+ <div class="container mx-auto px-4">
77
+ <h2 class="text-3xl font-bold text-center mb-12 text-primary">Our Services</h2>
78
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
79
+ <!-- Service Card 1 -->
80
+ <div class="bg-gray-50 p-6 rounded-lg shadow-md border border-gray-100 hover:shadow-lg transition">
81
+ <div class="text-primary mb-4">
82
+ <i data-feather="tool" class="w-10 h-10"></i>
83
+ </div>
84
+ <h3 class="text-xl font-bold mb-3">Minor Service</h3>
85
+ <p class="text-gray-600">Oil change, filter replacement, fluid top-up and basic safety check.</p>
86
+ </div>
87
+
88
+ <!-- Service Card 2 -->
89
+ <div class="bg-gray-50 p-6 rounded-lg shadow-md border border-gray-100 hover:shadow-lg transition">
90
+ <div class="text-primary mb-4">
91
+ <i data-feather="settings" class="w-10 h-10"></i>
92
+ </div>
93
+ <h3 class="text-xl font-bold mb-3">Major Service</h3>
94
+ <p class="text-gray-600">Comprehensive check including all minor service items plus additional inspections.</p>
95
+ </div>
96
+
97
+ <!-- Service Card 3 -->
98
+ <div class="bg-gray-50 p-6 rounded-lg shadow-md border border-gray-100 hover:shadow-lg transition">
99
+ <div class="text-primary mb-4">
100
+ <i data-feather="activity" class="w-10 h-10"></i>
101
+ </div>
102
+ <h3 class="text-xl font-bold mb-3">Diagnostics</h3>
103
+ <p class="text-gray-600">Advanced computer diagnostics to identify any issues with your vehicle.</p>
104
+ </div>
105
+ </div>
106
+ </div>
107
+ </section>
108
+
109
+ <!-- Booking Form Section -->
110
+ <section id="booking" class="py-16 bg-gray-50">
111
+ <div class="container mx-auto px-4">
112
+ <h2 class="text-3xl font-bold text-center mb-12 text-primary">Book Your Service</h2>
113
+
114
+ <div class="max-w-3xl mx-auto bg-white p-8 rounded-lg shadow-md">
115
+ <form id="bookingForm">
116
+ <!-- Personal Information -->
117
+ <div class="mb-8">
118
+ <h3 class="text-xl font-semibold mb-4 text-primary border-b pb-2">Personal Information</h3>
119
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
120
+ <div>
121
+ <label for="name" class="block text-gray-700 mb-2">Full Name</label>
122
+ <input type="text" id="name" name="name" required class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary">
123
+ </div>
124
+ <div>
125
+ <label for="phone" class="block text-gray-700 mb-2">Phone Number</label>
126
+ <input type="tel" id="phone" name="phone" required class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary">
127
+ </div>
128
+ <div>
129
+ <label for="email" class="block text-gray-700 mb-2">Email Address</label>
130
+ <input type="email" id="email" name="email" required class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary">
131
+ </div>
132
+ </div>
133
+ </div>
134
+
135
+ <!-- Vehicle Information -->
136
+ <div class="mb-8">
137
+ <h3 class="text-xl font-semibold mb-4 text-primary border-b pb-2">Vehicle Information</h3>
138
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
139
+ <div>
140
+ <label for="make" class="block text-gray-700 mb-2">Make</label>
141
+ <input type="text" id="make" name="make" required class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary">
142
+ </div>
143
+ <div>
144
+ <label for="model" class="block text-gray-700 mb-2">Model</label>
145
+ <input type="text" id="model" name="model" required class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary">
146
+ </div>
147
+ <div>
148
+ <label for="reg" class="block text-gray-700 mb-2">Registration Number</label>
149
+ <input type="text" id="reg" name="reg" required class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary">
150
+ </div>
151
+ </div>
152
+ </div>
153
+
154
+ <!-- Service Details -->
155
+ <div class="mb-8">
156
+ <h3 class="text-xl font-semibold mb-4 text-primary border-b pb-2">Service Details</h3>
157
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
158
+ <div>
159
+ <label for="serviceType" class="block text-gray-700 mb-2">Service Type</label>
160
+ <select id="serviceType" name="serviceType" required class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary">
161
+ <option value="">Select Service Type</option>
162
+ <option value="minor">Minor Service</option>
163
+ <option value="major">Major Service</option>
164
+ <option value="diagnostic">Diagnostic</option>
165
+ <option value="body_repair">Body Repair</option>
166
+ <option value="other">Other</option>
167
+ </select>
168
+ </div>
169
+ <div>
170
+ <label for="date" class="block text-gray-700 mb-2">Preferred Date</label>
171
+ <input type="date" id="date" name="date" required class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary">
172
+ </div>
173
+ </div>
174
+ </div>
175
+
176
+ <!-- Courtesy Car Section -->
177
+ <div class="mb-8" id="courtesyCarSection">
178
+ <div class="flex items-center mb-4">
179
+ <input type="checkbox" id="needCar" name="needCar" class="mr-2 h-5 w-5">
180
+ <label for="needCar" class="text-lg font-medium text-gray-700">I need a courtesy car</label>
181
+ </div>
182
+
183
+ <div id="carSelection" class="hidden mt-6">
184
+ <h4 class="text-lg font-semibold mb-4 text-primary">Available Courtesy Cars</h4>
185
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4" id="availableCars">
186
+ <!-- Cars will be populated here via JS -->
187
+ <div class="courtesy-car-card bg-gray-50 p-4 rounded-lg border border-gray-200 cursor-pointer transition" data-car-id="1">
188
+ <div class="flex justify-between items-start">
189
+ <div>
190
+ <h5 class="font-bold text-lg">Toyota Corolla</h5>
191
+ <p class="text-gray-600">CA 123-456 • 45,000 km</p>
192
+ </div>
193
+ <i data-feather="check-circle" class="text-green-500 hidden"></i>
194
+ </div>
195
+ </div>
196
+ <div class="courtesy-car-card bg-gray-50 p-4 rounded-lg border border-gray-200 cursor-pointer transition" data-car-id="2">
197
+ <div class="flex justify-between items-start">
198
+ <div>
199
+ <h5 class="font-bold text-lg">Volkswagen Polo</h5>
200
+ <p class="text-gray-600">CA 789-012 • 32,500 km</p>
201
+ </div>
202
+ <i data-feather="check-circle" class="text-green-500 hidden"></i>
203
+ </div>
204
+ </div>
205
+ <div class="courtesy-car-card bg-gray-50 p-4 rounded-lg border border-gray-200 cursor-pointer transition" data-car-id="3">
206
+ <div class="flex justify-between items-start">
207
+ <div>
208
+ <h5 class="font-bold text-lg">Hyundai i20</h5>
209
+ <p class="text-gray-600">CA 345-678 • 28,100 km</p>
210
+ </div>
211
+ <i data-feather="check-circle" class="text-green-500 hidden"></i>
212
+ </div>
213
+ </div>
214
+ </div>
215
+
216
+ <div id="noCarAvailable" class="hidden mt-4">
217
+ <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4">
218
+ <div class="flex">
219
+ <div class="flex-shrink-0">
220
+ <i data-feather="alert-triangle" class="h-5 w-5 text-yellow-400"></i>
221
+ </div>
222
+ <div class="ml-3">
223
+ <p class="text-sm text-yellow-700">
224
+ No courtesy cars available for your selected date. Would you like to be notified if one becomes available?
225
+ </p>
226
+ <div class="mt-2">
227
+ <div class="flex items-center">
228
+ <input type="checkbox" id="notifyMe" name="notifyMe" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
229
+ <label for="notifyMe" class="ml-2 block text-sm text-gray-700">Yes, notify me</label>
230
+ </div>
231
+ </div>
232
+ </div>
233
+ </div>
234
+ </div>
235
+ </div>
236
+ </div>
237
+ </div>
238
+
239
+ <div class="mt-8">
240
+ <button type="submit" class="w-full bg-primary text-white py-3 px-6 rounded-lg font-bold text-lg hover:bg-blue-800 transition focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2">
241
+ Confirm Booking
242
+ </button>
243
+ </div>
244
+ </form>
245
+ </div>
246
+ </div>
247
+ </section>
248
+
249
+ <!-- Contact Section -->
250
+ <section id="contact" class="py-16 bg-white">
251
+ <div class="container mx-auto px-4">
252
+ <h2 class="text-3xl font-bold text-center mb-12 text-primary">Contact Us</h2>
253
+
254
+ <div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8">
255
+ <div>
256
+ <h3 class="text-xl font-semibold mb-4 text-primary">Our Dealership</h3>
257
+ <div class="space-y-4">
258
+ <div class="flex items-start">
259
+ <i data-feather="map-pin" class="text-secondary mr-3 mt-1"></i>
260
+ <p>123 Auto Street, Johannesburg, South Africa</p>
261
+ </div>
262
+ <div class="flex items-start">
263
+ <i data-feather="phone" class="text-secondary mr-3 mt-1"></i>
264
+ <p>+27 11 123 4567</p>
265
+ </div>
266
+ <div class="flex items-start">
267
+ <i data-feather="mail" class="text-secondary mr-3 mt-1"></i>
268
+ <p>info@autoserve.co.za</p>
269
+ </div>
270
+ <div class="flex items-start">
271
+ <i data-feather="clock" class="text-secondary mr-3 mt-1"></i>
272
+ <p>Monday - Friday: 8:00 AM - 5:00 PM<br>Saturday: 8:00 AM - 1:00 PM</p>
273
+ </div>
274
+ </div>
275
+ </div>
276
+
277
+ <div>
278
+ <h3 class="text-xl font-semibold mb-4 text-primary">Send Us a Message</h3>
279
+ <form>
280
+ <div class="mb-4">
281
+ <label for="contactName" class="block text-gray-700 mb-2">Your Name</label>
282
+ <input type="text" id="contactName" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary">
283
+ </div>
284
+ <div class="mb-4">
285
+ <label for="contactEmail" class="block text-gray-700 mb-2">Your Email</label>
286
+ <input type="email" id="contactEmail" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary">
287
+ </div>
288
+ <div class="mb-4">
289
+ <label for="contactMessage" class="block text-gray-700 mb-2">Message</label>
290
+ <textarea id="contactMessage" rows="4" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"></textarea>
291
+ </div>
292
+ <button type="submit" class="bg-primary text-white py-2 px-6 rounded-lg font-medium hover:bg-blue-800 transition">Send Message</button>
293
+ </form>
294
+ </div>
295
+ </div>
296
+ </div>
297
+ </section>
298
+
299
+ <!-- Footer -->
300
+ <footer class="bg-primary text-white py-8">
301
+ <div class="container mx-auto px-4">
302
+ <div class="flex flex-col md:flex-row justify-between items-center">
303
+ <div class="mb-4 md:mb-0">
304
+ <div class="flex items-center space-x-2">
305
+ <i data-feather="settings" class="text-secondary"></i>
306
+ <span class="text-xl font-bold">AutoServe</span>
307
+ </div>
308
+ <p class="mt-2 text-gray-300">Your car service booking made easy.</p>
309
+ </div>
310
+ <div class="flex space-x-6">
311
+ <a href="#" class="hover:text-secondary transition"><i data-feather="facebook"></i></a>
312
+ <a href="#" class="hover:text-secondary transition"><i data-feather="twitter"></i></a>
313
+ <a href="#" class="hover:text-secondary transition"><i data-feather="instagram"></i></a>
314
+ </div>
315
+ </div>
316
+ <div class="border-t border-gray-700 mt-6 pt-6 text-center text-gray-300">
317
+ <p>&copy; 2023 AutoServe. All rights reserved.</p>
318
+ </div>
319
+ </div>
320
+ </footer>
321
+
322
+ <!-- Admin Login Modal -->
323
+ <div id="adminModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 hidden z-50">
324
+ <div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
325
+ <div class="flex justify-between items-center mb-4">
326
+ <h3 class="text-xl font-bold text-primary">Admin Login</h3>
327
+ <button id="closeModal" class="text-gray-500 hover:text-gray-700">
328
+ <i data-feather="x"></i>
329
+ </button>
330
+ </div>
331
+ <form id="adminLoginForm">
332
+ <div class="mb-4">
333
+ <label for="username" class="block text-gray-700 mb-2">Username</label>
334
+ <input type="text" id="username" required class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary">
335
+ </div>
336
+ <div class="mb-6">
337
+ <label for="password" class="block text-gray-700 mb-2">Password</label>
338
+ <input type="password" id="password" required class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary">
339
+ </div>
340
+ <button type="submit" class="w-full bg-primary text-white py-2 px-6 rounded-lg font-medium hover:bg-blue-800 transition">Login</button>
341
+ </form>
342
+ </div>
343
+ </div>
344
+
345
+ <!-- Booking Confirmation Modal -->
346
+ <div id="confirmationModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 hidden z-50">
347
+ <div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
348
+ <div class="text-center">
349
+ <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 mb-4">
350
+ <i data-feather="check" class="text-green-600"></i>
351
+ </div>
352
+ <h3 class="text-lg font-medium text-gray-900 mb-2">Booking Confirmed!</h3>
353
+ <div class="mt-2 text-sm text-gray-500">
354
+ <p>Your service booking has been confirmed. A confirmation email has been sent to your registered email address.</p>
355
+ </div>
356
+ <div class="mt-5">
357
+ <button id="closeConfirmation" type="button" class="inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary text-base font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:text-sm">
358
+ Close
359
+ </button>
360
+ </div>
361
+ </div>
362
+ </div>
363
+ </div>
364
+
365
+ <script>
366
+ // Mobile menu toggle
367
+ document.getElementById('mobileMenuBtn').addEventListener('click', function() {
368
+ const menu = document.getElementById('mobileMenu');
369
+ menu.classList.toggle('hidden');
370
+ });
371
+
372
+ // Admin login modal
373
+ const adminModal = document.getElementById('adminModal');
374
+ document.getElementById('adminLoginBtn').addEventListener('click', function(e) {
375
+ e.preventDefault();
376
+ adminModal.classList.remove('hidden');
377
+ });
378
+
379
+ document.getElementById('closeModal').addEventListener('click', function() {
380
+ adminModal.classList.add('hidden');
381
+ });
382
+
383
+ // Close modal when clicking outside
384
+ adminModal.addEventListener('click', function(e) {
385
+ if (e.target === adminModal) {
386
+ adminModal.classList.add('hidden');
387
+ }
388
+ });
389
+
390
+ // Courtesy car toggle
391
+ document.getElementById('needCar').addEventListener('change', function() {
392
+ const carSelection = document.getElementById('carSelection');
393
+ if (this.checked) {
394
+ carSelection.classList.remove('hidden');
395
+ // Here you would typically fetch available cars from API based on selected date
396
+ // For demo, we're just showing the hardcoded cars
397
+ document.getElementById('noCarAvailable').classList.add('hidden');
398
+ document.querySelectorAll('#availableCars > div').forEach(car => {
399
+ car.classList.remove('hidden');
400
+ });
401
+ } else {
402
+ carSelection.classList.add('hidden');
403
+ }
404
+ });
405
+
406
+ // Select courtesy car
407
+ document.querySelectorAll('.courtesy-car-card').forEach(card => {
408
+ card.addEventListener('click', function() {
409
+ // Deselect all cars first
410
+ document.querySelectorAll('.courtesy-car-card').forEach(c => {
411
+ c.classList.remove('border-primary', 'border-2');
412
+ c.querySelector('i').classList.add('hidden');
413
+ });
414
+
415
+ // Select this car
416
+ this.classList.add('border-primary', 'border-2');
417
+ this.querySelector('i').classList.remove('hidden');
418
+ });
419
+ });
420
+
421
+ // Form submission
422
+ document.getElementById('bookingForm').addEventListener('submit', function(e) {
423
+ e.preventDefault();
424
+
425
+ // Here you would typically send the form data to your backend API
426
+ // For demo, we're just showing the confirmation modal
427
+
428
+ const confirmationModal = document.getElementById('confirmationModal');
429
+ confirmationModal.classList.remove('hidden');
430
+ });
431
+
432
+ // Close confirmation modal
433
+ document.getElementById('closeConfirmation').addEventListener('click', function() {
434
+ const confirmationModal = document.getElementById('confirmationModal');
435
+ confirmationModal.classList.add('hidden');
436
+ });
437
+
438
+ // Initialize feather icons
439
+ feather.replace();
440
+ </script>
441
+ </body>
442
  </html>