Hugging Face's logo

Spaces:
chipmonktalent
/
skywing
Running

App Files Community
chipmonktalent commited on
Commit
3f7efc5
·
verified ·
1 Parent(s): f77ca10

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +724 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Skywing
3
- emoji: 📉
4
  colorFrom: pink
5
- colorTo: red
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: skywing
3
+ emoji: 🐳
4
  colorFrom: pink
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,724 @@
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>SkyWings | Flight Booking</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style type="text/tailwindcss">
10
+ @layer components {
11
+ .btn-primary {
12
+ @apply bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition-all duration-300 shadow-lg hover:shadow-xl;
13
+ }
14
+ .card {
15
+ @apply bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-lg;
16
+ }
17
+ .seat {
18
+ @apply w-10 h-10 flex items-center justify-center rounded-lg cursor-pointer transition-all duration-200;
19
+ }
20
+ .seat-available {
21
+ @apply bg-blue-100 hover:bg-blue-200 text-blue-800;
22
+ }
23
+ .seat-selected {
24
+ @apply bg-blue-600 text-white font-bold;
25
+ }
26
+ .seat-booked {
27
+ @apply bg-gray-200 text-gray-400 cursor-not-allowed;
28
+ }
29
+ .animated-bg {
30
+ background: linear-gradient(45deg, #3b82f6, #8b5cf6, #ec4899);
31
+ background-size: 300% 300%;
32
+ animation: gradient 15s ease infinite;
33
+ }
34
+ @keyframes gradient {
35
+ 0% { background-position: 0% 50%; }
36
+ 50% { background-position: 100% 50%; }
37
+ 100% { background-position: 0% 50%; }
38
+ }
39
+ }
40
+ .airplane {
41
+ transform: rotate(90deg);
42
+ }
43
+ </style>
44
+ </head>
45
+ <body>
46
+ <!-- Header Section -->
47
+ <header class="animated-bg text-white shadow-lg">
48
+ <div class="container mx-auto px-4 py-6">
49
+ <div class="flex justify-between items-center">
50
+ <div class="flex items-center space-x-2">
51
+ <i class="fas fa-plane-departure text-3xl"></i>
52
+ <h1 class="text-3xl font-bold">SkyWings</h1>
53
+ </div>
54
+ <nav class="hidden md:flex space-x-8">
55
+ <a href="#" class="hover:underline">Home</a>
56
+ <a href="#" class="hover:underline">Flights</a>
57
+ <a href="#" class="hover:underline">Deals</a>
58
+ <a href="#" class="hover:underline">Contact</a>
59
+ </nav>
60
+ <div class="flex items-center space-x-4">
61
+ <button class="px-4 py-2 rounded-lg bg-white bg-opacity-20 hover:bg-opacity-30 transition">
62
+ <i class="fas fa-user"></i> <span class="hidden sm:inline">Sign In</span>
63
+ </button>
64
+ <button class="px-4 py-2 rounded-lg bg-white text-blue-600 font-medium">
65
+ <i class="fas fa-user-plus"></i> <span class="hidden sm:inline">Register</span>
66
+ </button>
67
+ </div>
68
+ <button class="md:hidden text-2xl">
69
+ <i class="fas fa-bars"></i>
70
+ </button>
71
+ </div>
72
+ </div>
73
+ </header>
74
+
75
+ <!-- Hero Search Section -->
76
+ <section class="relative bg-blue-50">
77
+ <div class="container mx-auto px-4 py-12">
78
+ <div class="text-center mb-12">
79
+ <h2 class="text-4xl font-bold text-gray-800 mb-4">Find Your Perfect Flight</h2>
80
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">Discover amazing destinations at unbeatable prices with SkyWings</p>
81
+ </div>
82
+
83
+ <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-lg p-6">
84
+ <div class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4">
85
+ <div class="flex-1">
86
+ <label class="block text-gray-700 font-medium mb-2">From</label>
87
+ <select class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
88
+ <option>Select Departure</option>
89
+ <option>New York (JFK)</option>
90
+ <option>Los Angeles (LAX)</option>
91
+ <option>Chicago (ORD)</option>
92
+ <option>Miami (MIA)</option>
93
+ <option>London (LHR)</option>
94
+ </select>
95
+ </div>
96
+ <div class="flex items-center justify-center">
97
+ <button id="swapRoutes" class="p-2 bg-gray-100 rounded-full hover:bg-gray-200 transition">
98
+ <i class="fas fa-exchange-alt text-gray-600"></i>
99
+ </button>
100
+ </div>
101
+ <div class="flex-1">
102
+ <label class="block text-gray-700 font-medium mb-2">To</label>
103
+ <select class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
104
+ <option>Select Destination</option>
105
+ <option>Los Angeles (LAX)</option>
106
+ <option>New York (JFK)</option>
107
+ <option>London (LHR)</option>
108
+ <option>Paris (CDG)</option>
109
+ <option>Tokyo (HND)</option>
110
+ </select>
111
+ </div>
112
+ </div>
113
+
114
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
115
+ <div>
116
+ <label class="block text-gray-700 font-medium mb-2">Departure</label>
117
+ <input type="date" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
118
+ </div>
119
+ <div>
120
+ <label class="block text-gray-700 font-medium mb-2">Return</label>
121
+ <input type="date" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
122
+ </div>
123
+ <div>
124
+ <label class="block text-gray-700 font-medium mb-2">Passengers</label>
125
+ <select class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
126
+ <option>1 Adult</option>
127
+ <option>2 Adults</option>
128
+ <option>3 Adults</option>
129
+ <option>4 Adults</option>
130
+ <option>1 Adult, 1 Child</option>
131
+ <option>2 Adults, 1 Child</option>
132
+ </select>
133
+ </div>
134
+ </div>
135
+
136
+ <div class="mt-8 text-center">
137
+ <button class="btn-primary">
138
+ <i class="fas fa-search mr-2"></i> Search Flights
139
+ </button>
140
+ </div>
141
+ </div>
142
+ </div>
143
+ </section>
144
+
145
+ <!-- Available Flights Section -->
146
+ <section class="py-16 bg-white" id="flightResults">
147
+ <div class="container mx-auto px-4">
148
+ <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">Available Flights</h2>
149
+
150
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
151
+ <!-- Flight Card 1 -->
152
+ <div class="card">
153
+ <div class="bg-blue-600 text-white p-4">
154
+ <div class="flex justify-between">
155
+ <div>
156
+ <h3 class="text-xl font-bold">New York (JFK)</h3>
157
+ <p class="text-gray-100">11:00 AM</p>
158
+ </div>
159
+ <div class="text-right">
160
+ <h3 class="text-xl font-bold">London (LHR)</h3>
161
+ <p class="text-gray-100">9:30 PM (+1)</p>
162
+ </div>
163
+ </div>
164
+ <div class="flex justify-center mt-4">
165
+ <i class="fas fa-plane text-2xl"></i>
166
+ <div class="mx-4 text-sm">7h 30m</div>
167
+ <i class="fas fa-circle text-xs mt-2"></i>
168
+ <div class="ml-4 text-sm">Direct</div>
169
+ </div>
170
+ </div>
171
+ <div class="p-4">
172
+ <div class="flex justify-between items-center mb-4">
173
+ <div>
174
+ <span class="text-gray-500">Flight No:</span>
175
+ <span class="font-medium">SW 278</span>
176
+ </div>
177
+ <div>
178
+ <span class="text-2xl font-bold text-blue-600">$459</span>
179
+ <span class="text-gray-500">/person</span>
180
+ </div>
181
+ </div>
182
+ <div class="flex justify-between items-center">
183
+ <div class="flex items-center text-gray-500">
184
+ <i class="fas fa-suitcase-rolling mr-1"></i>
185
+ <span>1 checked bag</span>
186
+ </div>
187
+ <button class="btn-primary py-2 px-4 text-sm">
188
+ Select Flight
189
+ </button>
190
+ </div>
191
+ </div>
192
+ </div>
193
+
194
+ <!-- Flight Card 2 -->
195
+ <div class="card">
196
+ <div class="bg-blue-800 text-white p-4">
197
+ <div class="flex justify-between">
198
+ <div>
199
+ <h3 class="text-xl font-bold">New York (JFK)</h3>
200
+ <p class="text-gray-100">2:45 PM</p>
201
+ </div>
202
+ <div class="text-right">
203
+ <h3 class="text-xl font-bold">London (LHR)</h3>
204
+ <p class="text-gray-100">6:15 AM (+1)</p>
205
+ </div>
206
+ </div>
207
+ <div class="flex justify-center mt-4">
208
+ <i class="fas fa-plane text-2xl"></i>
209
+ <div class="mx-4 text-sm">10h 30m</div>
210
+ <i class="fas fa-circle text-xs mt-2"></i>
211
+ <div class="ml-4 text-sm">1 stop (CDG)</div>
212
+ </div>
213
+ </div>
214
+ <div class="p-4">
215
+ <div class="flex justify-between items-center mb-4">
216
+ <div>
217
+ <span class="text-gray-500">Flight No:</span>
218
+ <span class="font-medium">SW 482</span>
219
+ </div>
220
+ <div>
221
+ <span class="text-2xl font-bold text-blue-600">$399</span>
222
+ <span class="text-gray-500">/person</span>
223
+ </div>
224
+ </div>
225
+ <div class="flex justify-between items-center">
226
+ <div class="flex items-center text-gray-500">
227
+ <i class="fas fa-suitcase-rolling mr-1"></i>
228
+ <span>1 checked bag</span>
229
+ </div>
230
+ <button class="btn-primary py-2 px-4 text-sm">
231
+ Select Flight
232
+ </button>
233
+ </div>
234
+ </div>
235
+ </div>
236
+
237
+ <!-- Flight Card 3 -->
238
+ <div class="card">
239
+ <div class="bg-blue-700 text-white p-4">
240
+ <div class="flex justify-between">
241
+ <div>
242
+ <h3 class="text-xl font-bold">New York (JFK)</h3>
243
+ <p class="text-gray-100">7:15 PM</p>
244
+ </div>
245
+ <div class="text-right">
246
+ <h3 class="text-xl font-bold">London (LHR)</h3>
247
+ <p class="text-gray-100">11:45 AM (+1)</p>
248
+ </div>
249
+ </div>
250
+ <div class="flex justify-center mt-4">
251
+ <i class="fas fa-plane text-2xl"></i>
252
+ <div class="mx-4 text-sm">9h 30m</div>
253
+ <i class="fas fa-circle text-xs mt-2"></i>
254
+ <div class="ml-4 text-sm">Direct</div>
255
+ </div>
256
+ </div>
257
+ <div class="p-4">
258
+ <div class="flex justify-between items-center mb-4">
259
+ <div>
260
+ <span class="text-gray-500">Flight No:</span>
261
+ <span class="font-medium">SW 765</span>
262
+ </div>
263
+ <div>
264
+ <span class="text-2xl font-bold text-blue-600">$529</span>
265
+ <span class="text-gray-500">/person</span>
266
+ </div>
267
+ </div>
268
+ <div class="flex justify-between items-center">
269
+ <div class="flex items-center text-gray-500">
270
+ <i class="fas fa-suitcase-rolling mr-1"></i>
271
+ <span>2 checked bags</span>
272
+ </div>
273
+ <button class="btn-primary py-2 px-4 text-sm">
274
+ Select Flight
275
+ </button>
276
+ </div>
277
+ </div>
278
+ </div>
279
+ </div>
280
+ </div>
281
+ </section>
282
+
283
+ <!-- Seat Selection Section (Hidden by default) -->
284
+ <section class="py-16 bg-gray-50 hidden" id="seatSelection">
285
+ <div class="container mx-auto px-4">
286
+ <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">Select Your Seats</h2>
287
+
288
+ <div class="flex flex-col md:flex-row gap-8">
289
+ <!-- Flight Info -->
290
+ <div class="md:w-1/3">
291
+ <div class="card p-6 sticky top-4">
292
+ <h3 class="text-xl font-bold mb-4">Flight Summary</h3>
293
+ <div class="space-y-4">
294
+ <div class="flex justify-between">
295
+ <span class="text-gray-600">Flight Number:</span>
296
+ <span class="font-medium">SW 765</span>
297
+ </div>
298
+ <div class="flex justify-between">
299
+ <span class="text-gray-600">Departure:</span>
300
+ <span class="font-medium">JFK → LHR</span>
301
+ </div>
302
+ <div class="flex justify-between">
303
+ <span class="text-gray-600">Date:</span>
304
+ <span class="font-medium">June 15, 2023</span>
305
+ </div>
306
+ <div class="flex justify-between">
307
+ <span class="text-gray-600">Time:</span>
308
+ <span class="font-medium">7:15 PM - 11:45 AM</span>
309
+ </div>
310
+ <div class="flex justify-between">
311
+ <span class="text-gray-600">Duration:</span>
312
+ <span class="font-medium">9h 30m</span>
313
+ </div>
314
+ <div class="flex justify-between">
315
+ <span class="text-gray-600">Passengers:</span>
316
+ <span class="font-medium">2 Adults</span>
317
+ </div>
318
+ <hr class="my-4">
319
+ <div class="flex justify-between text-lg font-bold">
320
+ <span>Total:</span>
321
+ <span class="text-blue-600">$1,058.00</span>
322
+ </div>
323
+ </div>
324
+ </div>
325
+ </div>
326
+
327
+ <!-- Seat Map -->
328
+ <div class="md:w-2/3">
329
+ <div class="card p-6">
330
+ <div class="flex justify-between items-center mb-6">
331
+ <h3 class="text-xl font-bold">Seat Map</h3>
332
+ <div class="flex items-center space-x-4">
333
+ <div class="flex items-center">
334
+ <div class="seat-available seat w-4 h-4 mr-2"></div>
335
+ <span class="text-sm">Available</span>
336
+ </div>
337
+ <div class="flex items-center">
338
+ <div class="seat-selected seat w-4 h-4 mr-2"></div>
339
+ <span class="text-sm">Selected</span>
340
+ </div>
341
+ <div class="flex items-center">
342
+ <div class="seat-booked seat w-4 h-4 mr-2"></div>
343
+ <span class="text-sm">Booked</span>
344
+ </div>
345
+ </div>
346
+ </div>
347
+
348
+ <div class="overflow-x-auto">
349
+ <div class="airplane mx-auto mb-8" style="width: 100%; max-width: 600px;">
350
+ <!-- Aircraft nose -->
351
+ <div class="relative">
352
+ <!-- Cockpit -->
353
+ <div class="absolute -left-2 top-10 w-4 h-4 rounded-full bg-gray-300"></div>
354
+
355
+ <!-- First Class -->
356
+ <div class="border-2 border-gray-300 rounded-lg p-4 mb-4">
357
+ <div class="flex justify-between">
358
+ <div class="flex space-x-2">
359
+ <div class="seat seat-available" data-seat="1A">1A</div>
360
+ <div class="seat seat-available" data-seat="1B">1B</div>
361
+ <div class="seat seat-booked" data-seat="1C">1C</div>
362
+ </div>
363
+ <div class="flex space-x-2">
364
+ <div class="seat seat-booked" data-seat="1D">1D</div>
365
+ <div class="seat seat-available" data-seat="1E">1E</div>
366
+ <div class="seat seat-available" data-seat="1F">1F</div>
367
+ </div>
368
+ </div>
369
+
370
+ <div class="flex justify-between mt-2">
371
+ <div class="flex space-x-2">
372
+ <div class="seat seat-available" data-seat="2A">2A</div>
373
+ <div class="seat seat-booked" data-seat="2B">2B</div>
374
+ <div class="seat seat-booked" data-seat="2C">2C</div>
375
+ </div>
376
+ <div class="flex space-x-2">
377
+ <div class="seat seat-booked" data-seat="2D">2D</div>
378
+ <div class="seat seat-booked" data-seat="2E">2E</div>
379
+ <div class="seat seat-available" data-seat="2F">2F</div>
380
+ </div>
381
+ </div>
382
+ </div>
383
+
384
+ <!-- Business Class -->
385
+ <div class="border-2 border-gray-300 rounded-lg p-4 mb-4">
386
+ <div class="flex justify-between">
387
+ <div class="flex space-x-2">
388
+ <div class="seat seat-available" data-seat="3A">3A</div>
389
+ <div class="seat seat-available" data-seat="3B">3B</div>
390
+ </div>
391
+ <div class="flex space-x-2">
392
+ <div class="seat seat-available" data-seat="3C">3C</div>
393
+ <div class="seat seat-available" data-seat="3D">3D</div>
394
+ </div>
395
+ </div>
396
+
397
+ <div class="flex justify-between mt-2">
398
+ <div class="flex space-x-2">
399
+ <div class="seat seat-available" data-seat="4A">4A</div>
400
+ <div class="seat seat-booked" data-seat="4B">4B</div>
401
+ </div>
402
+ <div class="flex space-x-2">
403
+ <div class="seat seat-booked" data-seat="4C">4C</div>
404
+ <div class="seat seat-available" data-seat="4D">4D</div>
405
+ </div>
406
+ </div>
407
+
408
+ <div class="flex justify-between mt-2">
409
+ <div class="flex space-x-2">
410
+ <div class="seat seat-booked" data-seat="5A">5A</div>
411
+ <div class="seat seat-booked" data-seat="5B">5B</div>
412
+ </div>
413
+ <div class="flex space-x-2">
414
+ <div class="seat seat-available" data-seat="5C">5C</div>
415
+ <div class="seat seat-available" data-seat="5D">5D</div>
416
+ </div>
417
+ </div>
418
+ </div>
419
+
420
+ <!-- Economy Class -->
421
+ <div class="border-2 border-gray-300 rounded-lg p-4">
422
+ <div class="flex justify-between">
423
+ <div class="flex space-x-2">
424
+ <div class="seat seat-available" data-seat="6A">6A</div>
425
+ <div class="seat seat-available" data-seat="6B">6B</div>
426
+ <div class="seat seat-booked" data-seat="6C">6C</div>
427
+ </div>
428
+ <div class="flex space-x-2">
429
+ <div class="seat seat-booked" data-seat="6D">6D</div>
430
+ <div class="seat seat-available" data-seat="6E">6E</div>
431
+ <div class="seat seat-available" data-seat="6F">6F</div>
432
+ </div>
433
+ </div>
434
+
435
+ <div class="flex justify-between mt-2">
436
+ <div class="flex space-x-2">
437
+ <div class="seat seat-booked" data-seat="7A">7A</div>
438
+ <div class="seat seat-booked" data-seat="7B">7B</div>
439
+ <div class="seat seat-booked" data-seat="7C">7C</div>
440
+ </div>
441
+ <div class="flex space-x-2">
442
+ <div class="seat seat-booked" data-seat="7D">7D</div>
443
+ <div class="seat seat-available" data-seat="7E">7E</div>
444
+ <div class="seat seat-available" data-seat="7F">7F</div>
445
+ </div>
446
+ </div>
447
+
448
+ <div class="flex justify-between mt-2">
449
+ <div class="flex space-x-2">
450
+ <div class="seat seat-booked" data-seat="8A">8A</div>
451
+ <div class="seat seat-booked" data-seat="8B">8B</div>
452
+ <div class="seat seat-available" data-seat="8C">8C</div>
453
+ </div>
454
+ <div class="flex space-x-2">
455
+ <div class="seat seat-available" data-seat="8D">8D</div>
456
+ <div class="seat seat-booked" data-seat="8E">8E</div>
457
+ <div class="seat seat-booked" data-seat="8F">8F</div>
458
+ </div>
459
+ </div>
460
+
461
+ <div class="flex justify-between mt-2">
462
+ <div class="flex space-x-2">
463
+ <div class="seat seat-available" data-seat="9A">9A</div>
464
+ <div class="seat seat-available" data-seat="9B">9B</div>
465
+ <div class="seat seat-available" data-seat="9C">9C</div>
466
+ </div>
467
+ <div class="flex space-x-2">
468
+ <div class="seat seat-available" data-seat="9D">9D</div>
469
+ <div class="seat seat-available" data-seat="9E">9E</div>
470
+ <div class="seat seat-available" data-seat="9F">9F</div>
471
+ </div>
472
+ </div>
473
+ </div>
474
+
475
+ <div class="flex justify-between mt-6">
476
+ <div class="flex flex-col items-center">
477
+ <div class="w-4 h-4 bg-gray-300 rounded-full mb-1"></div>
478
+ <div class="text-xs">Front</div>
479
+ </div>
480
+ <div class="flex flex-col items-center">
481
+ <div class="w-4 h-4 bg-gray-300 rounded-full mb-1"></div>
482
+ <div class="text-xs">Rear</div>
483
+ </div>
484
+ </div>
485
+ </div>
486
+ </div>
487
+ </div>
488
+
489
+ <div class="mt-6 flex flex-col sm:flex-row justify-between items-center">
490
+ <div class="mb-4 sm:mb-0">
491
+ <h4 class="font-semibold">Selected Seats: <span id="selectedSeatsList"></span></h4>
492
+ <p class="text-gray-500 text-sm">Please select your preferred seats</p>
493
+ </div>
494
+ <button id="confirmSeats" class="btn-primary disabled:opacity-50" disabled>
495
+ Confirm Seats & Continue
496
+ </button>
497
+ </div>
498
+ </div>
499
+ </div>
500
+ </div>
501
+ </div>
502
+ </section>
503
+
504
+ <!-- Booking Confirmation (Hidden by default) -->
505
+ <section class="py-16 bg-gradient-to-br from-blue-50 to-indigo-50 hidden" id="bookingConfirmation">
506
+ <div class="container mx-auto px-4">
507
+ <div class="max-w-3xl mx-auto">
508
+ <div class="card overflow-hidden">
509
+ <div class="bg-blue-600 text-white p-6 text-center">
510
+ <i class="fas fa-check-circle text-5xl mb-4"></i>
511
+ <h2 class="text-3xl font-bold mb-2">Booking Confirmed!</h2>
512
+ <p class="text-blue-100">Thank you for choosing SkyWings</p>
513
+ </div>
514
+
515
+ <div class="p-6">
516
+ <div class="text-center mb-8">
517
+ <h3 class="text-xl font-bold text-gray-800 mb-4">Your Flight Details</h3>
518
+ <img src="https://cdn-icons-png.flaticon.com/512/4825/4825038.png" alt="Flight Ticket" class="w-32 h-32 mx-auto mb-4">
519
+ </div>
520
+
521
+ <div class="space-y-6">
522
+ <div class="flex justify-between border-b pb-3">
523
+ <span class="text-gray-600">Booking Reference:</span>
524
+ <span class="font-medium text-gray-800">SWB78903421</span>
525
+ </div>
526
+
527
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
528
+ <div>
529
+ <h4 class="font-semibold mb-3 text-gray-700">Departure</h4>
530
+ <div class="space-y-2">
531
+ <div class="flex justify-between">
532
+ <span class="text-gray-500">From:</span>
533
+ <span class="font-medium">New York (JFK)</span>
534
+ </div>
535
+ <div class="flex justify-between">
536
+ <span class="text-gray-500">To:</span>
537
+ <span class="font-medium">London (LHR)</span>
538
+ </div>
539
+ <div class="flex justify-between">
540
+ <span class="text-gray-500">Date:</span>
541
+ <span class="font-medium">June 15, 2023</span>
542
+ </div>
543
+ <div class="flex justify-between">
544
+ <span class="text-gray-500">Time:</span>
545
+ <span class="font-medium">7:15 PM</span>
546
+ </div>
547
+ <div class="flex justify-between">
548
+ <span class="text-gray-500">Flight:</span>
549
+ <span class="font-medium">SW 765</span>
550
+ </div>
551
+ </div>
552
+ </div>
553
+
554
+ <div>
555
+ <h4 class="font-semibold mb-3 text-gray-700">Passenger Details</h4>
556
+ <div class="space-y-2">
557
+ <div class="flex justify-between">
558
+ <span class="text-gray-500">Passengers:</span>
559
+ <span class="font-medium">2 Adults</span>
560
+ </div>
561
+ <div class="flex justify-between">
562
+ <span class="text-gray-500">Seats:</span>
563
+ <span class="font-medium" id="confirmedSeats">6A, 6B</span>
564
+ </div>
565
+ <div class="flex justify-between">
566
+ <span class="text-gray-500">Bags:</span>
567
+ <span class="font-medium">2 x 23kg</span>
568
+ </div>
569
+ <div class="flex justify-between">
570
+ <span class="text-gray-500">Meals:</span>
571
+ <span class="font-medium">Standard</span>
572
+ </div>
573
+ </div>
574
+ </div>
575
+ </div>
576
+
577
+ <div class="bg-blue-50 rounded-lg p-4">
578
+ <h4 class="font-semibold mb-2 text-blue-800">Check-in Information</h4>
579
+ <p class="text-sm text-gray-600 mb-3">Online check-in opens 24 hours before departure. Please have your passport and booking reference ready.</p>
580
+ <div class="flex flex-col sm:flex-row justify-between items-center">
581
+ <div class="mb-2 sm:mb-0">
582
+ <i class="fas fa-qrcode text-blue-600 mr-1"></i>
583
+ <span class="text-sm text-gray-700">Digital boarding pass will be emailed</span>
584
+ </div>
585
+ <button class="text-blue-600 hover:underline text-sm font-medium">
586
+ <i class="fas fa-envelope mr-1"></i> Email Itinerary
587
+ </button>
588
+ </div>
589
+ </div>
590
+ </div>
591
+
592
+ <div class="mt-8 text-center">
593
+ <button class="btn-primary">
594
+ Download Your Ticket
595
+ </button>
596
+ <p class="text-gray-500 mt-4 text-sm">You'll also receive a confirmation email with all the details.</p>
597
+ </div>
598
+ </div>
599
+ </div>
600
+ </div>
601
+ </div>
602
+ </section>
603
+
604
+ <!-- Footer -->
605
+ <footer class="bg-gray-800 text-white py-12">
606
+ <div class="container mx-auto px-4">
607
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
608
+ <div>
609
+ <h3 class="text-xl font-bold mb-4 flex items-center">
610
+ <i class="fas fa-plane mr-2"></i> SkyWings
611
+ </h3>
612
+ <p class="text-gray-400">Making your journey comfortable and memorable since 2005.</p>
613
+ <div class="flex space-x-4 mt-4">
614
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
615
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
616
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
617
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a>
618
+ </div>
619
+ </div>
620
+ <div>
621
+ <h4 class="font-bold mb-4">Explore</h4>
622
+ <ul class="space-y-2">
623
+ <li><a href="#" class="text-gray-400 hover:text-white">Destinations</a></li>
624
+ <li><a href="#" class="text-gray-400 hover:text-white">Deals & Offers</a></li>
625
+ <li><a href="#" class="text-gray-400 hover:text-white">Travel Guide</a></li>
626
+ <li><a href="#" class="text-gray-400 hover:text-white">Frequent Flyer</a></li>
627
+ <li><a href="#" class="text-gray-400 hover:text-white">Charter Flights</a></li>
628
+ </ul>
629
+ </div>
630
+ <div>
631
+ <h4 class="font-bold mb-4">Company</h4>
632
+ <ul class="space-y-2">
633
+ <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li>
634
+ <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>
635
+ <li><a href="#" class="text-gray-400 hover:text-white">News & Media</a></li>
636
+ <li><a href="#" class="text-gray-400 hover:text-white">Investor Relations</a></li>
637
+ <li><a href="#" class="text-gray-400 hover:text-white">Corporate Travel</a></li>
638
+ </ul>
639
+ </div>
640
+ <div>
641
+ <h4 class="font-bold mb-4">Support</h4>
642
+ <ul class="space-y-2">
643
+ <li><a href="#" class="text-gray-400 hover:text-white">Help Center</a></li>
644
+ <li><a href="#" class="text-gray-400 hover:text-white">Contact Us</a></li>
645
+ <li><a href="#" class="text-gray-400 hover:text-white">Feedback</a></li>
646
+ <li><a href="#" class="text-gray-400 hover:text-white">Baggage Policy</a></li>
647
+ <li><a href="#" class="text-gray-400 hover:text-white">Terms & Conditions</a></li>
648
+ </ul>
649
+ </div>
650
+ </div>
651
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400 text-sm">
652
+ <p>© 2023 SkyWings Airlines. All rights reserved.</p>
653
+ </div>
654
+ </div>
655
+ </footer>
656
+
657
+ <!-- JavaScript -->
658
+ <script>
659
+ document.addEventListener('DOMContentLoaded', function() {
660
+ // Swap routes button
661
+ document.getElementById('swapRoutes').addEventListener('click', function() {
662
+ const fromSelect = document.querySelector('select:nth-of-type(1)');
663
+ const toSelect = document.querySelector('select:nth-of-type(2)');
664
+ const tempValue = fromSelect.value;
665
+ fromSelect.value = toSelect.value;
666
+ toSelect.value = tempValue;
667
+ });
668
+
669
+ // Flight selection - show seat selection
670
+ const flightButtons = document.querySelectorAll('.card button');
671
+ flightButtons.forEach(button => {
672
+ button.addEventListener('click', function() {
673
+ document.getElementById('flightResults').classList.add('hidden');
674
+ document.getElementById('seatSelection').classList.remove('hidden');
675
+ });
676
+ });
677
+
678
+ // Seat selection logic
679
+ const seats = document.querySelectorAll('.seat-available');
680
+ const selectedSeatsList = document.getElementById('selectedSeatsList');
681
+ const confirmSeatsBtn = document.getElementById('confirmSeats');
682
+ const confirmedSeats = document.getElementById('confirmedSeats');
683
+ let selectedSeats = [];
684
+
685
+ seats.forEach(seat => {
686
+ seat.addEventListener('click', function() {
687
+ const seatNumber = this.getAttribute('data-seat');
688
+
689
+ if (this.classList.contains('seat-selected')) {
690
+ // Deselect seat
691
+ this.classList.remove('seat-selected');
692
+ this.classList.add('seat-available');
693
+ selectedSeats = selectedSeats.filter(s => s !== seatNumber);
694
+ } else if (selectedSeats.length < 2) { // Limit to 2 seats for this demo
695
+ // Select seat
696
+ this.classList.remove('seat-available');
697
+ this.classList.add('seat-selected');
698
+ selectedSeats.push(seatNumber);
699
+ }
700
+
701
+ // Update UI
702
+ if (selectedSeats.length > 0) {
703
+ selectedSeatsList.textContent = selectedSeats.join(', ');
704
+ confirmSeatsBtn.disabled = false;
705
+ } else {
706
+ selectedSeatsList.textContent = 'None';
707
+ confirmSeatsBtn.disabled = true;
708
+ }
709
+ });
710
+ });
711
+
712
+ // Confirm seats - show booking confirmation
713
+ confirmSeatsBtn.addEventListener('click', function() {
714
+ document.getElementById('seatSelection').classList.add('hidden');
715
+ document.getElementById('bookingConfirmation').classList.remove('hidden');
716
+ confirmedSeats.textContent = selectedSeats.join(', ');
717
+
718
+ // Scroll to top
719
+ window.scrollTo({ top: 0, behavior: 'smooth' });
720
+ });
721
+ });
722
+ </script>
723
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=chipmonktalent/skywing" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
724
+ </html>