Hugging Face's logo

Spaces:
patoconnect
/
skyfly
Running

App Files Community
patoconnect commited on
Commit
241d8c0
·
verified ·
1 Parent(s): 4863259

i need you to create me airline service where TRAVELLERS can book THEIR flight through the site online, it should look legit and authentic look like this site ( https://www.delta.com ) for the viewers customers ....... this website can send you email confirmation to the traveller - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +624 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Skyfly
3
- emoji: 🏃
4
- colorFrom: green
5
- colorTo: yellow
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: skyfly
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: gray
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,624 @@
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 Airlines | Book Flights Online</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>
10
+ .hero-bg {
11
+ background-image: url('https://images.unsplash.com/photo-1436491865332-7a61a109cc30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1474&q=80');
12
+ background-size: cover;
13
+ background-position: center;
14
+ }
15
+
16
+ .flight-card:hover {
17
+ transform: translateY(-5px);
18
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
19
+ }
20
+
21
+ .tab-active {
22
+ border-bottom: 3px solid #2563eb;
23
+ color: #2563eb;
24
+ font-weight: 600;
25
+ }
26
+
27
+ @keyframes fadeIn {
28
+ from { opacity: 0; transform: translateY(20px); }
29
+ to { opacity: 1; transform: translateY(0); }
30
+ }
31
+
32
+ .animate-fade-in {
33
+ animation: fadeIn 0.5s ease-out forwards;
34
+ }
35
+ </style>
36
+ </head>
37
+ <body class="font-sans bg-gray-50">
38
+ <!-- Top Navigation -->
39
+ <div class="bg-blue-900 text-white py-2 px-4 text-sm">
40
+ <div class="container mx-auto flex justify-between items-center">
41
+ <div class="flex space-x-4">
42
+ <a href="#" class="hover:underline">English</a>
43
+ <a href="#" class="hover:underline">USD</a>
44
+ </div>
45
+ <div class="flex space-x-4">
46
+ <a href="#" class="hover:underline"><i class="fas fa-user mr-1"></i> Sign In</a>
47
+ <a href="#" class="hover:underline"><i class="fas fa-question-circle mr-1"></i> Help</a>
48
+ </div>
49
+ </div>
50
+ </div>
51
+
52
+ <!-- Main Navigation -->
53
+ <nav class="bg-white shadow-md">
54
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
55
+ <div class="flex items-center space-x-8">
56
+ <a href="#" class="text-2xl font-bold text-blue-900">SKYWINGS</a>
57
+ <div class="hidden md:flex space-x-6">
58
+ <a href="#" class="text-blue-900 hover:text-blue-700 font-medium">Book</a>
59
+ <a href="#" class="text-gray-600 hover:text-blue-700 font-medium">My Trips</a>
60
+ <a href="#" class="text-gray-600 hover:text-blue-700 font-medium">Flight Status</a>
61
+ <a href="#" class="text-gray-600 hover:text-blue-700 font-medium">Check-In</a>
62
+ <a href="#" class="text-gray-600 hover:text-blue-700 font-medium">Destinations</a>
63
+ </div>
64
+ </div>
65
+ <div class="flex items-center space-x-4">
66
+ <button class="md:hidden text-gray-600">
67
+ <i class="fas fa-bars text-xl"></i>
68
+ </button>
69
+ <button class="hidden md:block bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded font-medium">
70
+ Sign Up, Earn Miles
71
+ </button>
72
+ </div>
73
+ </div>
74
+ </nav>
75
+
76
+ <!-- Hero Section with Booking Form -->
77
+ <div class="hero-bg bg-blue-900 text-white py-12">
78
+ <div class="container mx-auto px-4">
79
+ <div class="max-w-6xl mx-auto bg-white bg-opacity-10 backdrop-filter backdrop-blur-sm rounded-lg p-6 shadow-xl">
80
+ <div class="flex border-b border-gray-300 border-opacity-30 mb-6">
81
+ <button id="flight-tab" class="tab-active px-6 py-3 text-lg font-medium">Flights</button>
82
+ <button id="hotel-tab" class="px-6 py-3 text-lg font-medium text-gray-300 hover:text-white">Hotels</button>
83
+ <button id="cars-tab" class="px-6 py-3 text-lg font-medium text-gray-300 hover:text-white">Cars</button>
84
+ <button id="packages-tab" class="px-6 py-3 text-lg font-medium text-gray-300 hover:text-white">Packages</button>
85
+ </div>
86
+
87
+ <form id="booking-form" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
88
+ <div>
89
+ <label for="trip-type" class="block text-sm font-medium mb-1">Trip Type</label>
90
+ <select id="trip-type" class="w-full p-3 rounded bg-white bg-opacity-20 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
91
+ <option value="roundtrip">Round Trip</option>
92
+ <option value="oneway">One Way</option>
93
+ <option value="multicity">Multi-City</option>
94
+ </select>
95
+ </div>
96
+
97
+ <div>
98
+ <label for="from" class="block text-sm font-medium mb-1">From</label>
99
+ <input type="text" id="from" placeholder="City or Airport" class="w-full p-3 rounded bg-white bg-opacity-20 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
100
+ </div>
101
+
102
+ <div>
103
+ <label for="to" class="block text-sm font-medium mb-1">To</label>
104
+ <input type="text" id="to" placeholder="City or Airport" class="w-full p-3 rounded bg-white bg-opacity-20 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
105
+ </div>
106
+
107
+ <div class="grid grid-cols-2 gap-4">
108
+ <div>
109
+ <label for="departure" class="block text-sm font-medium mb-1">Departure</label>
110
+ <input type="date" id="departure" class="w-full p-3 rounded bg-white bg-opacity-20 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
111
+ </div>
112
+ <div>
113
+ <label for="return" class="block text-sm font-medium mb-1">Return</label>
114
+ <input type="date" id="return" class="w-full p-3 rounded bg-white bg-opacity-20 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
115
+ </div>
116
+ </div>
117
+
118
+ <div class="grid grid-cols-3 gap-4">
119
+ <div>
120
+ <label for="adults" class="block text-sm font-medium mb-1">Adults</label>
121
+ <select id="adults" class="w-full p-3 rounded bg-white bg-opacity-20 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
122
+ <option value="1">1</option>
123
+ <option value="2">2</option>
124
+ <option value="3">3</option>
125
+ <option value="4">4</option>
126
+ </select>
127
+ </div>
128
+ <div>
129
+ <label for="children" class="block text-sm font-medium mb-1">Children</label>
130
+ <select id="children" class="w-full p-3 rounded bg-white bg-opacity-20 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
131
+ <option value="0">0</option>
132
+ <option value="1">1</option>
133
+ <option value="2">2</option>
134
+ <option value="3">3</option>
135
+ </select>
136
+ </div>
137
+ <div>
138
+ <label for="infants" class="block text-sm font-medium mb-1">Infants</label>
139
+ <select id="infants" class="w-full p-3 rounded bg-white bg-opacity-20 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
140
+ <option value="0">0</option>
141
+ <option value="1">1</option>
142
+ <option value="2">2</option>
143
+ </select>
144
+ </div>
145
+ </div>
146
+
147
+ <div>
148
+ <label for="cabin" class="block text-sm font-medium mb-1">Cabin</label>
149
+ <select id="cabin" class="w-full p-3 rounded bg-white bg-opacity-20 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
150
+ <option value="economy">Economy</option>
151
+ <option value="premium">Premium Economy</option>
152
+ <option value="business">Business</option>
153
+ <option value="first">First Class</option>
154
+ </select>
155
+ </div>
156
+
157
+ <div class="flex items-end">
158
+ <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-200">
159
+ Search Flights <i class="fas fa-arrow-right ml-2"></i>
160
+ </button>
161
+ </div>
162
+ </form>
163
+ </div>
164
+ </div>
165
+ </div>
166
+
167
+ <!-- Flight Deals -->
168
+ <div class="container mx-auto px-4 py-12">
169
+ <h2 class="text-3xl font-bold text-gray-800 mb-8">Featured Flight Deals</h2>
170
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
171
+ <div class="flight-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300">
172
+ <img src="https://images.unsplash.com/photo-1506973035872-a4ec16b8e8d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="New York" class="w-full h-48 object-cover">
173
+ <div class="p-6">
174
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">New York</h3>
175
+ <p class="text-gray-600 mb-4">From $199* roundtrip</p>
176
+ <button class="text-blue-600 font-medium hover:text-blue-800">Book Now</button>
177
+ </div>
178
+ </div>
179
+
180
+ <div class="flight-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300">
181
+ <img src="https://images.unsplash.com/photo-1503917988258-f87a78e3c995?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="London" class="w-full h-48 object-cover">
182
+ <div class="p-6">
183
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">London</h3>
184
+ <p class="text-gray-600 mb-4">From $499* roundtrip</p>
185
+ <button class="text-blue-600 font-medium hover:text-blue-800">Book Now</button>
186
+ </div>
187
+ </div>
188
+
189
+ <div class="flight-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300">
190
+ <img src="https://images.unsplash.com/photo-1538970272646-f61fabb3bfdf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Tokyo" class="w-full h-48 object-cover">
191
+ <div class="p-6">
192
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Tokyo</h3>
193
+ <p class="text-gray-600 mb-4">From $799* roundtrip</p>
194
+ <button class="text-blue-600 font-medium hover:text-blue-800">Book Now</button>
195
+ </div>
196
+ </div>
197
+
198
+ <div class="flight-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300">
199
+ <img src="https://images.unsplash.com/photo-1518391846015-55a9cc003b25?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Sydney" class="w-full h-48 object-cover">
200
+ <div class="p-6">
201
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Sydney</h3>
202
+ <p class="text-gray-600 mb-4">From $899* roundtrip</p>
203
+ <button class="text-blue-600 font-medium hover:text-blue-800">Book Now</button>
204
+ </div>
205
+ </div>
206
+ </div>
207
+ </div>
208
+
209
+ <!-- Why Choose Us -->
210
+ <div class="bg-gray-100 py-12">
211
+ <div class="container mx-auto px-4">
212
+ <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">Why Fly With SkyWings</h2>
213
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
214
+ <div class="bg-white p-6 rounded-lg shadow-sm text-center">
215
+ <div class="text-blue-600 text-4xl mb-4">
216
+ <i class="fas fa-medal"></i>
217
+ </div>
218
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Award-Winning Service</h3>
219
+ <p class="text-gray-600">Consistently recognized for excellence in customer service and operational performance.</p>
220
+ </div>
221
+
222
+ <div class="bg-white p-6 rounded-lg shadow-sm text-center">
223
+ <div class="text-blue-600 text-4xl mb-4">
224
+ <i class="fas fa-wifi"></i>
225
+ </div>
226
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Free Inflight WiFi</h3>
227
+ <p class="text-gray-600">Stay connected with free high-speed WiFi on all domestic flights.</p>
228
+ </div>
229
+
230
+ <div class="bg-white p-6 rounded-lg shadow-sm text-center">
231
+ <div class="text-blue-600 text-4xl mb-4">
232
+ <i class="fas fa-suitcase-rolling"></i>
233
+ </div>
234
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Generous Baggage Allowance</h3>
235
+ <p class="text-gray-600">First checked bag free for all passengers on international flights.</p>
236
+ </div>
237
+ </div>
238
+ </div>
239
+ </div>
240
+
241
+ <!-- Flight Search Results Modal -->
242
+ <div id="search-results-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4">
243
+ <div class="bg-white rounded-lg shadow-xl max-w-4xl w-full max-h-screen overflow-y-auto animate-fade-in">
244
+ <div class="flex justify-between items-center border-b p-4">
245
+ <h3 class="text-xl font-bold text-gray-800">Select Your Flight</h3>
246
+ <button id="close-results" class="text-gray-500 hover:text-gray-700">
247
+ <i class="fas fa-times"></i>
248
+ </button>
249
+ </div>
250
+
251
+ <div class="p-6">
252
+ <div class="mb-6">
253
+ <h4 class="text-lg font-semibold text-gray-800 mb-2">New York (JFK) to London (LHR)</h4>
254
+ <p class="text-gray-600">Tue, Aug 15 - Tue, Aug 22 • 1 Adult • Economy</p>
255
+ </div>
256
+
257
+ <div class="space-y-4">
258
+ <!-- Flight Option 1 -->
259
+ <div class="border rounded-lg overflow-hidden">
260
+ <div class="bg-gray-50 p-4 border-b">
261
+ <div class="flex justify-between items-center">
262
+ <div>
263
+ <span class="font-semibold">SkyWings</span>
264
+ <span class="text-gray-600 text-sm ml-2">Flight #SW101</span>
265
+ </div>
266
+ <div class="text-blue-600 font-semibold">$499</div>
267
+ </div>
268
+ </div>
269
+ <div class="p-4 grid grid-cols-1 md:grid-cols-3 gap-4">
270
+ <div>
271
+ <div class="text-xl font-bold">8:00 AM</div>
272
+ <div class="text-gray-600">JFK</div>
273
+ </div>
274
+ <div class="text-center">
275
+ <div class="text-gray-500 text-sm">7h 30m</div>
276
+ <div class="border-t border-gray-300 my-2"></div>
277
+ <div class="text-gray-500 text-sm">Nonstop</div>
278
+ </div>
279
+ <div class="text-right">
280
+ <div class="text-xl font-bold">3:30 PM</div>
281
+ <div class="text-gray-600">LHR</div>
282
+ </div>
283
+ </div>
284
+ <div class="bg-gray-50 p-4 border-t flex justify-end">
285
+ <button class="select-flight bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded font-medium">
286
+ Select
287
+ </button>
288
+ </div>
289
+ </div>
290
+
291
+ <!-- Flight Option 2 -->
292
+ <div class="border rounded-lg overflow-hidden">
293
+ <div class="bg-gray-50 p-4 border-b">
294
+ <div class="flex justify-between items-center">
295
+ <div>
296
+ <span class="font-semibold">SkyWings</span>
297
+ <span class="text-gray-600 text-sm ml-2">Flight #SW205</span>
298
+ </div>
299
+ <div class="text-blue-600 font-semibold">$549</div>
300
+ </div>
301
+ </div>
302
+ <div class="p-4 grid grid-cols-1 md:grid-cols-3 gap-4">
303
+ <div>
304
+ <div class="text-xl font-bold">10:30 AM</div>
305
+ <div class="text-gray-600">JFK</div>
306
+ </div>
307
+ <div class="text-center">
308
+ <div class="text-gray-500 text-sm">8h 15m</div>
309
+ <div class="border-t border-gray-300 my-2"></div>
310
+ <div class="text-gray-500 text-sm">1 Stop (BOS)</div>
311
+ </div>
312
+ <div class="text-right">
313
+ <div class="text-xl font-bold">6:45 PM</div>
314
+ <div class="text-gray-600">LHR</div>
315
+ </div>
316
+ </div>
317
+ <div class="bg-gray-50 p-4 border-t flex justify-end">
318
+ <button class="select-flight bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded font-medium">
319
+ Select
320
+ </button>
321
+ </div>
322
+ </div>
323
+
324
+ <!-- Flight Option 3 -->
325
+ <div class="border rounded-lg overflow-hidden">
326
+ <div class="bg-gray-50 p-4 border-b">
327
+ <div class="flex justify-between items-center">
328
+ <div>
329
+ <span class="font-semibold">SkyWings</span>
330
+ <span class="text-gray-600 text-sm ml-2">Flight #SW308</span>
331
+ </div>
332
+ <div class="text-blue-600 font-semibold">$429</div>
333
+ </div>
334
+ </div>
335
+ <div class="p-4 grid grid-cols-1 md:grid-cols-3 gap-4">
336
+ <div>
337
+ <div class="text-xl font-bold">6:00 PM</div>
338
+ <div class="text-gray-600">JFK</div>
339
+ </div>
340
+ <div class="text-center">
341
+ <div class="text-gray-500 text-sm">9h 0m</div>
342
+ <div class="border-t border-gray-300 my-2"></div>
343
+ <div class="text-gray-500 text-sm">1 Stop (ORD)</div>
344
+ </div>
345
+ <div class="text-right">
346
+ <div class="text-xl font-bold">3:00 AM</div>
347
+ <div class="text-gray-600">+1 day</div>
348
+ <div class="text-gray-600">LHR</div>
349
+ </div>
350
+ </div>
351
+ <div class="bg-gray-50 p-4 border-t flex justify-end">
352
+ <button class="select-flight bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded font-medium">
353
+ Select
354
+ </button>
355
+ </div>
356
+ </div>
357
+ </div>
358
+ </div>
359
+ </div>
360
+ </div>
361
+
362
+ <!-- Booking Form Modal -->
363
+ <div id="booking-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4">
364
+ <div class="bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-screen overflow-y-auto animate-fade-in">
365
+ <div class="flex justify-between items-center border-b p-4">
366
+ <h3 class="text-xl font-bold text-gray-800">Complete Your Booking</h3>
367
+ <button id="close-booking" class="text-gray-500 hover:text-gray-700">
368
+ <i class="fas fa-times"></i>
369
+ </button>
370
+ </div>
371
+
372
+ <div class="p-6">
373
+ <div class="mb-6 bg-gray-50 p-4 rounded-lg">
374
+ <h4 class="text-lg font-semibold text-gray-800 mb-2">Flight Details</h4>
375
+ <div class="flex justify-between">
376
+ <div>
377
+ <div class="font-medium">JFK → LHR</div>
378
+ <div class="text-sm text-gray-600">Tue, Aug 15 • 8:00 AM - 3:30 PM</div>
379
+ <div class="text-sm text-gray-600">Flight #SW101 • Nonstop • 7h 30m</div>
380
+ </div>
381
+ <div class="text-right">
382
+ <div class="font-medium">LHR → JFK</div>
383
+ <div class="text-sm text-gray-600">Tue, Aug 22 • 10:00 AM - 5:30 PM</div>
384
+ <div class="text-sm text-gray-600">Flight #SW102 • Nonstop • 7h 30m</div>
385
+ </div>
386
+ </div>
387
+ <div class="mt-4 pt-4 border-t border-gray-200">
388
+ <div class="flex justify-between">
389
+ <span class="font-medium">Total Price:</span>
390
+ <span class="text-xl font-bold text-blue-600">$499.00</span>
391
+ </div>
392
+ </div>
393
+ </div>
394
+
395
+ <form id="passenger-form" class="space-y-6">
396
+ <h4 class="text-lg font-semibold text-gray-800">Passenger Information</h4>
397
+
398
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
399
+ <div>
400
+ <label for="first-name" class="block text-sm font-medium text-gray-700 mb-1">First Name</label>
401
+ <input type="text" id="first-name" class="w-full p-3 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
402
+ </div>
403
+ <div>
404
+ <label for="last-name" class="block text-sm font-medium text-gray-700 mb-1">Last Name</label>
405
+ <input type="text" id="last-name" class="w-full p-3 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
406
+ </div>
407
+ </div>
408
+
409
+ <div>
410
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
411
+ <input type="email" id="email" class="w-full p-3 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
412
+ <p class="text-xs text-gray-500 mt-1">Your booking confirmation will be sent here</p>
413
+ </div>
414
+
415
+ <div>
416
+ <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label>
417
+ <input type="tel" id="phone" class="w-full p-3 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
418
+ </div>
419
+
420
+ <div class="pt-4 border-t border-gray-200">
421
+ <h4 class="text-lg font-semibold text-gray-800 mb-4">Payment Information</h4>
422
+
423
+ <div class="mb-4">
424
+ <label for="card-number" class="block text-sm font-medium text-gray-700 mb-1">Card Number</label>
425
+ <input type="text" id="card-number" placeholder="1234 5678 9012 3456" class="w-full p-3 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
426
+ </div>
427
+
428
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
429
+ <div>
430
+ <label for="expiry" class="block text-sm font-medium text-gray-700 mb-1">Expiry Date</label>
431
+ <input type="text" id="expiry" placeholder="MM/YY" class="w-full p-3 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
432
+ </div>
433
+ <div>
434
+ <label for="cvv" class="block text-sm font-medium text-gray-700 mb-1">CVV</label>
435
+ <input type="text" id="cvv" placeholder="123" class="w-full p-3 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
436
+ </div>
437
+ <div>
438
+ <label for="zip" class="block text-sm font-medium text-gray-700 mb-1">ZIP Code</label>
439
+ <input type="text" id="zip" class="w-full p-3 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
440
+ </div>
441
+ </div>
442
+ </div>
443
+
444
+ <div class="pt-4">
445
+ <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-200">
446
+ Complete Booking <i class="fas fa-lock ml-2"></i>
447
+ </button>
448
+ </div>
449
+ </form>
450
+ </div>
451
+ </div>
452
+ </div>
453
+
454
+ <!-- Confirmation Modal -->
455
+ <div id="confirmation-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4">
456
+ <div class="bg-white rounded-lg shadow-xl max-w-md w-full animate-fade-in">
457
+ <div class="p-6 text-center">
458
+ <div class="text-green-500 text-5xl mb-4">
459
+ <i class="fas fa-check-circle"></i>
460
+ </div>
461
+ <h3 class="text-2xl font-bold text-gray-800 mb-2">Booking Confirmed!</h3>
462
+ <p class="text-gray-600 mb-6">Your flight has been successfully booked. A confirmation email has been sent to <span id="confirmation-email" class="font-medium">user@example.com</span>.</p>
463
+
464
+ <div class="bg-gray-50 p-4 rounded-lg mb-6 text-left">
465
+ <div class="font-medium mb-2">Booking Reference: <span class="font-bold">SWB789456123</span></div>
466
+ <div class="text-sm text-gray-600">JFK → LHR • Aug 15, 2023</div>
467
+ </div>
468
+
469
+ <button id="close-confirmation" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-200">
470
+ Done
471
+ </button>
472
+ </div>
473
+ </div>
474
+ </div>
475
+
476
+ <!-- Footer -->
477
+ <footer class="bg-gray-900 text-white pt-12 pb-6">
478
+ <div class="container mx-auto px-4">
479
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
480
+ <div>
481
+ <h4 class="text-lg font-semibold mb-4">About SkyWings</h4>
482
+ <ul class="space-y-2">
483
+ <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li>
484
+ <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>
485
+ <li><a href="#" class="text-gray-400 hover:text-white">Investor Relations</a></li>
486
+ <li><a href="#" class="text-gray-400 hover:text-white">Newsroom</a></li>
487
+ </ul>
488
+ </div>
489
+
490
+ <div>
491
+ <h4 class="text-lg font-semibold mb-4">Book Travel</h4>
492
+ <ul class="space-y-2">
493
+ <li><a href="#" class="text-gray-400 hover:text-white">Flights</a></li>
494
+ <li><a href="#" class="text-gray-400 hover:text-white">Hotels</a></li>
495
+ <li><a href="#" class="text-gray-400 hover:text-white">Cars</a></li>
496
+ <li><a href="#" class="text-gray-400 hover:text-white">Vacation Packages</a></li>
497
+ </ul>
498
+ </div>
499
+
500
+ <div>
501
+ <h4 class="text-lg font-semibold mb-4">Customer Service</h4>
502
+ <ul class="space-y-2">
503
+ <li><a href="#" class="text-gray-400 hover:text-white">Help Center</a></li>
504
+ <li><a href="#" class="text-gray-400 hover:text-white">Contact Us</a></li>
505
+ <li><a href="#" class="text-gray-400 hover:text-white">Feedback</a></li>
506
+ <li><a href="#" class="text-gray-400 hover:text-white">Accessibility</a></li>
507
+ </ul>
508
+ </div>
509
+
510
+ <div>
511
+ <h4 class="text-lg font-semibold mb-4">Legal</h4>
512
+ <ul class="space-y-2">
513
+ <li><a href="#" class="text-gray-400 hover:text-white">Terms of Use</a></li>
514
+ <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li>
515
+ <li><a href="#" class="text-gray-400 hover:text-white">Cookie Policy</a></li>
516
+ <li><a href="#" class="text-gray-400 hover:text-white">Do Not Sell My Info</a></li>
517
+ </ul>
518
+ </div>
519
+ </div>
520
+
521
+ <div class="border-t border-gray-800 pt-6">
522
+ <div class="flex flex-col md:flex-row justify-between items-center">
523
+ <div class="mb-4 md:mb-0">
524
+ <span class="text-gray-400">© 2023 SkyWings Airlines. All rights reserved.</span>
525
+ </div>
526
+ <div class="flex space-x-4">
527
+ <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-facebook"></i></a>
528
+ <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-twitter"></i></a>
529
+ <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-instagram"></i></a>
530
+ <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-linkedin"></i></a>
531
+ </div>
532
+ </div>
533
+ </div>
534
+ </div>
535
+ </footer>
536
+
537
+ <script>
538
+ // Tab switching functionality
539
+ const tabs = ['flight-tab', 'hotel-tab', 'cars-tab', 'packages-tab'];
540
+ tabs.forEach(tabId => {
541
+ document.getElementById(tabId).addEventListener('click', function() {
542
+ tabs.forEach(id => {
543
+ const tab = document.getElementById(id);
544
+ if (id === tabId) {
545
+ tab.classList.add('tab-active');
546
+ tab.classList.remove('text-gray-300');
547
+ } else {
548
+ tab.classList.remove('tab-active');
549
+ tab.classList.add('text-gray-300');
550
+ }
551
+ });
552
+ });
553
+ });
554
+
555
+ // Form submission for flight search
556
+ document.getElementById('booking-form').addEventListener('submit', function(e) {
557
+ e.preventDefault();
558
+ document.getElementById('search-results-modal').classList.remove('hidden');
559
+ });
560
+
561
+ // Close search results modal
562
+ document.getElementById('close-results').addEventListener('click', function() {
563
+ document.getElementById('search-results-modal').classList.add('hidden');
564
+ });
565
+
566
+ // Select flight button
567
+ document.querySelectorAll('.select-flight').forEach(button => {
568
+ button.addEventListener('click', function() {
569
+ document.getElementById('search-results-modal').classList.add('hidden');
570
+ document.getElementById('booking-modal').classList.remove('hidden');
571
+ });
572
+ });
573
+
574
+ // Close booking modal
575
+ document.getElementById('close-booking').addEventListener('click', function() {
576
+ document.getElementById('booking-modal').classList.add('hidden');
577
+ });
578
+
579
+ // Form submission for passenger info and payment
580
+ document.getElementById('passenger-form').addEventListener('submit', function(e) {
581
+ e.preventDefault();
582
+
583
+ // Get the email to display in confirmation
584
+ const email = document.getElementById('email').value;
585
+ document.getElementById('confirmation-email').textContent = email;
586
+
587
+ // Show confirmation modal
588
+ document.getElementById('booking-modal').classList.add('hidden');
589
+ document.getElementById('confirmation-modal').classList.remove('hidden');
590
+
591
+ // In a real app, you would send this data to your server
592
+ console.log('Booking submitted:', {
593
+ firstName: document.getElementById('first-name').value,
594
+ lastName: document.getElementById('last-name').value,
595
+ email: email,
596
+ phone: document.getElementById('phone').value,
597
+ cardNumber: document.getElementById('card-number').value,
598
+ expiry: document.getElementById('expiry').value,
599
+ cvv: document.getElementById('cvv').value,
600
+ zip: document.getElementById('zip').value
601
+ });
602
+
603
+ // Here you would typically send an email confirmation
604
+ // This is just a simulation
605
+ setTimeout(() => {
606
+ console.log(`Email sent to ${email} with booking confirmation`);
607
+ }, 1000);
608
+ });
609
+
610
+ // Close confirmation modal
611
+ document.getElementById('close-confirmation').addEventListener('click', function() {
612
+ document.getElementById('confirmation-modal').classList.add('hidden');
613
+
614
+ // Reset form for demo purposes
615
+ document.getElementById('passenger-form').reset();
616
+ });
617
+
618
+ // Mobile menu toggle (would need more implementation)
619
+ document.querySelector('.md\\:hidden').addEventListener('click', function() {
620
+ alert('Mobile menu would open here in a full implementation');
621
+ });
622
+ </script>
623
+ <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=patoconnect/skyfly" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
624
+ </html>