Hugging Face's logo

Spaces:
pheello
/
flysaver-za
Running

App Files Community
pheello commited on
Commit
5dff425
·
verified ·
1 Parent(s): 3b0422d

Build a complete, mobile-friendly flight search web app named FlySaver ZA for South Africans to find the cheapest local and international flights. Core Features & Pages Homepage (Landing + Search Form) Inputs: Origin & Destination (dropdown with South African airports: JNB, CPT, DUR, PLZ, BFN) Departure & Return Date (calendar pickers) Trip Type toggle (One-way / Round-trip) Number of Passengers Cabin Class (Economy, Business, First) Search button labeled “Search Flights” Popular Routes section (e.g., Johannesburg–Cape Town) Results Page Display 10+ flight options sorted by price (lowest first) Each flight shows: Airline name and logo Departure and arrival times Flight duration Price in South African Rand (ZAR) “Book Now” button (placeholder or API integration) Optional filters: airline, duration, price Additional Pages About: Explain FlySaver ZA’s mission and focus on saving South Africans money Contact: Form with Name, Email, Message fields Travel Deals (optional): Cards with popular or dummy offers Design & UX Fully responsive, mobile-first layout using TailwindCSS Clean, simple UI inspired by Booking.com or Skyscanner Light/Dark mode toggle Tech Stack Frontend: HTML5, TailwindCSS, JavaScript Backend (optional): Node.js with Express or Python Flask Use static mock data initially, designed for easy API integration (e.g., TravelPayouts, Skyscanner) Currency format: South African Rand (ZAR) Deployment & Future Readiness SEO-friendly structure Public access, no login required Lightweight and fast-loading Easy to extend with monetisation features like affiliate tracking or ads Deliver a deployable app folder (frontend + backend) ready to run locally or host online. The default project name is FlySaver ZA, but it should be easily renameable. - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +853 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Flysaver Za
3
- emoji: 📈
4
- colorFrom: indigo
5
  colorTo: purple
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: flysaver-za
3
+ emoji: 🐳
4
+ colorFrom: pink
5
  colorTo: purple
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,853 @@
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" class="scroll-smooth">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>FlySaver ZA - Find Cheap Flights in South Africa</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
+ <script>
10
+ tailwind.config = {
11
+ darkMode: 'class',
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ primary: '#1E40AF',
16
+ secondary: '#1E3A8A',
17
+ accent: '#DB2777',
18
+ }
19
+ }
20
+ }
21
+ }
22
+ </script>
23
+ <style>
24
+ .datepicker {
25
+ z-index: 1000 !important;
26
+ }
27
+ .flight-card:hover {
28
+ transform: translateY(-2px);
29
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
30
+ }
31
+ .search-box {
32
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
33
+ }
34
+ </style>
35
+ </head>
36
+ <body class="bg-gray-50 dark:bg-gray-900 transition-colors duration-200">
37
+ <!-- Header/Navigation -->
38
+ <header class="bg-white dark:bg-gray-800 shadow-sm sticky top-0 z-50">
39
+ <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
40
+ <div class="flex justify-between h-16">
41
+ <div class="flex items-center">
42
+ <a href="#" class="flex items-center">
43
+ <i class="fas fa-plane-departure text-primary dark:text-accent text-2xl mr-2"></i>
44
+ <span class="text-xl font-bold text-gray-900 dark:text-white">FlySaver ZA</span>
45
+ </a>
46
+ </div>
47
+ <div class="flex items-center space-x-4">
48
+ <button id="theme-toggle" class="text-gray-700 dark:text-gray-300 hover:text-primary dark:hover:text-accent">
49
+ <i class="fas fa-moon dark:hidden"></i>
50
+ <i class="fas fa-sun hidden dark:block"></i>
51
+ </button>
52
+ <a href="#home" class="px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-primary dark:hover:text-accent">Home</a>
53
+ <a href="#about" class="px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-primary dark:hover:text-accent">About</a>
54
+ <a href="#contact" class="px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-primary dark:hover:text-accent">Contact</a>
55
+ </div>
56
+ </div>
57
+ </nav>
58
+ </header>
59
+
60
+ <!-- Hero Section with Search Form -->
61
+ <section id="home" class="relative bg-gradient-to-r from-primary to-secondary py-16">
62
+ <div class="absolute inset-0 opacity-20 bg-[url('https://images.unsplash.com/photo-1436491865332-7a61a109cc05?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2074&q=80')]"></div>
63
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
64
+ <div class="text-center mb-12">
65
+ <h1 class="text-4xl font-extrabold text-white sm:text-5xl sm:tracking-tight lg:text-6xl">
66
+ Find the Cheapest Flights in South Africa
67
+ </h1>
68
+ <p class="mt-5 max-w-xl mx-auto text-xl text-gray-100">
69
+ Compare prices across airlines and save up to 40% on your next trip
70
+ </p>
71
+ </div>
72
+
73
+ <!-- Search Form -->
74
+ <div class="bg-white dark:bg-gray-800 rounded-lg p-6 search-box max-w-4xl mx-auto">
75
+ <div class="flex flex-col md:flex-row mb-4">
76
+ <div class="flex-1 mb-4 md:mb-0 md:mr-4">
77
+ <label for="trip-type" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Trip Type</label>
78
+ <div class="flex rounded-md shadow-sm">
79
+ <button type="button" id="one-way" class="trip-type-btn flex-1 py-2 px-4 bg-primary text-white text-sm font-medium rounded-l-md">
80
+ One-way
81
+ </button>
82
+ <button type="button" id="round-trip" class="trip-type-btn flex-1 py-2 px-4 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm font-medium rounded-r-md">
83
+ Round-trip
84
+ </button>
85
+ </div>
86
+ </div>
87
+ <div class="flex-1">
88
+ <label for="passengers" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Passengers & Class</label>
89
+ <div class="flex">
90
+ <select id="passengers" class="flex-1 mr-2 block w-full pl-3 pr-10 py-2 text-base border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm rounded-md">
91
+ <option>1 Passenger</option>
92
+ <option>2 Passengers</option>
93
+ <option>3 Passengers</option>
94
+ <option>4 Passengers</option>
95
+ <option>5+ Passengers</option>
96
+ </select>
97
+ <select id="cabin-class" class="flex-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm rounded-md">
98
+ <option>Economy</option>
99
+ <option>Premium Economy</option>
100
+ <option>Business</option>
101
+ <option>First Class</option>
102
+ </select>
103
+ </div>
104
+ </div>
105
+ </div>
106
+
107
+ <div class="flex flex-col md:flex-row mb-4">
108
+ <div class="flex-1 mb-4 md:mb-0 md:mr-4">
109
+ <label for="origin" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">From</label>
110
+ <select id="origin" class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm rounded-md">
111
+ <option value="">Select origin</option>
112
+ <option value="JNB">Johannesburg (JNB)</option>
113
+ <option value="CPT">Cape Town (CPT)</option>
114
+ <option value="DUR">Durban (DUR)</option>
115
+ <option value="PLZ">Port Elizabeth (PLZ)</option>
116
+ <option value="BFN">Bloemfontein (BFN)</option>
117
+ </select>
118
+ </div>
119
+ <div class="flex-1 mb-4 md:mb-0 md:mr-4">
120
+ <label for="destination" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">To</label>
121
+ <select id="destination" class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm rounded-md">
122
+ <option value="">Select destination</option>
123
+ <option value="JNB">Johannesburg (JNB)</option>
124
+ <option value="CPT">Cape Town (CPT)</option>
125
+ <option value="DUR">Durban (DUR)</option>
126
+ <option value="PLZ">Port Elizabeth (PLZ)</option>
127
+ <option value="BFN">Bloemfontein (BFN)</option>
128
+ </select>
129
+ </div>
130
+ <div class="flex-1">
131
+ <label for="departure-date" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Departure Date</label>
132
+ <input type="date" id="departure-date" class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm rounded-md">
133
+ </div>
134
+ <div class="flex-1 ml-4 return-date-container">
135
+ <label for="return-date" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Return Date</label>
136
+ <input type="date" id="return-date" class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm rounded-md">
137
+ </div>
138
+ </div>
139
+
140
+ <div class="text-center">
141
+ <button id="search-flights" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-accent hover:bg-pink-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent">
142
+ <i class="fas fa-search mr-2"></i> Search Flights
143
+ </button>
144
+ </div>
145
+ </div>
146
+ </div>
147
+ </section>
148
+
149
+ <!-- Popular Routes Section -->
150
+ <section class="py-12 bg-gray-50 dark:bg-gray-800">
151
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
152
+ <div class="text-center mb-10">
153
+ <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white sm:text-4xl">
154
+ Popular Routes in South Africa
155
+ </h2>
156
+ <p class="mt-3 max-w-2xl mx-auto text-xl text-gray-500 dark:text-gray-400 sm:mt-4">
157
+ These routes are frequently searched by our users
158
+ </p>
159
+ </div>
160
+
161
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
162
+ <!-- Route 1 -->
163
+ <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
164
+ <div class="p-6">
165
+ <div class="flex items-center">
166
+ <div class="flex-shrink-0 bg-blue-100 dark:bg-blue-900 rounded-md p-3">
167
+ <i class="fas fa-plane text-primary dark:text-blue-300 text-xl"></i>
168
+ </div>
169
+ <div class="ml-4">
170
+ <h3 class="text-lg font-medium text-gray-900 dark:text-white">Johannesburg to Cape Town</h3>
171
+ <p class="text-sm text-gray-500 dark:text-gray-400">From R1,200</p>
172
+ </div>
173
+ </div>
174
+ <div class="mt-4 flex justify-between items-center">
175
+ <div class="text-sm text-gray-500 dark:text-gray-400">
176
+ <span class="font-medium text-gray-900 dark:text-white">1h 55m</span> average flight time
177
+ </div>
178
+ <button class="text-sm font-medium text-primary dark:text-accent hover:text-secondary dark:hover:text-pink-500">
179
+ Search flights <span aria-hidden="true">&rarr;</span>
180
+ </button>
181
+ </div>
182
+ </div>
183
+ </div>
184
+
185
+ <!-- Route 2 -->
186
+ <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
187
+ <div class="p-6">
188
+ <div class="flex items-center">
189
+ <div class="flex-shrink-0 bg-blue-100 dark:bg-blue-900 rounded-md p-3">
190
+ <i class="fas fa-plane text-primary dark:text-blue-300 text-xl"></i>
191
+ </div>
192
+ <div class="ml-4">
193
+ <h3 class="text-lg font-medium text-gray-900 dark:text-white">Cape Town to Durban</h3>
194
+ <p class="text-sm text-gray-500 dark:text-gray-400">From R1,500</p>
195
+ </div>
196
+ </div>
197
+ <div class="mt-4 flex justify-between items-center">
198
+ <div class="text-sm text-gray-500 dark:text-gray-400">
199
+ <span class="font-medium text-gray-900 dark:text-white">2h 10m</span> average flight time
200
+ </div>
201
+ <button class="text-sm font-medium text-primary dark:text-accent hover:text-secondary dark:hover:text-pink-500">
202
+ Search flights <span aria-hidden="true">&rarr;</span>
203
+ </button>
204
+ </div>
205
+ </div>
206
+ </div>
207
+
208
+ <!-- Route 3 -->
209
+ <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
210
+ <div class="p-6">
211
+ <div class="flex items-center">
212
+ <div class="flex-shrink-0 bg-blue-100 dark:bg-blue-900 rounded-md p-3">
213
+ <i class="fas fa-plane text-primary dark:text-blue-300 text-xl"></i>
214
+ </div>
215
+ <div class="ml-4">
216
+ <h3 class="text-lg font-medium text-gray-900 dark:text-white">Johannesburg to Durban</h3>
217
+ <p class="text-sm text-gray-500 dark:text-gray-400">From R900</p>
218
+ </div>
219
+ </div>
220
+ <div class="mt-4 flex justify-between items-center">
221
+ <div class="text-sm text-gray-500 dark:text-gray-400">
222
+ <span class="font-medium text-gray-900 dark:text-white">1h 5m</span> average flight time
223
+ </div>
224
+ <button class="text-sm font-medium text-primary dark:text-accent hover:text-secondary dark:hover:text-pink-500">
225
+ Search flights <span aria-hidden="true">&rarr;</span>
226
+ </button>
227
+ </div>
228
+ </div>
229
+ </div>
230
+ </div>
231
+ </div>
232
+ </section>
233
+
234
+ <!-- Flight Results Section (Initially Hidden) -->
235
+ <section id="flight-results" class="py-12 bg-white dark:bg-gray-900 hidden">
236
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
237
+ <div class="flex justify-between items-center mb-8">
238
+ <h2 class="text-2xl font-bold text-gray-900 dark:text-white">Flight Results</h2>
239
+ <div class="flex items-center space-x-4">
240
+ <div class="relative">
241
+ <select id="sort-by" class="appearance-none bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 py-2 px-4 pr-8 rounded leading-tight focus:outline-none focus:ring-primary focus:border-primary">
242
+ <option>Sort by: Price (Lowest)</option>
243
+ <option>Sort by: Duration (Shortest)</option>
244
+ <option>Sort by: Departure Time</option>
245
+ </select>
246
+ <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 dark:text-gray-300">
247
+ <i class="fas fa-chevron-down"></i>
248
+ </div>
249
+ </div>
250
+ <button id="modify-search" class="text-sm font-medium text-primary dark:text-accent hover:text-secondary dark:hover:text-pink-500">
251
+ <i class="fas fa-edit mr-1"></i> Modify Search
252
+ </button>
253
+ </div>
254
+ </div>
255
+
256
+ <!-- Filters -->
257
+ <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 mb-8">
258
+ <div class="flex flex-wrap items-center gap-4">
259
+ <div>
260
+ <label for="airline-filter" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Airline</label>
261
+ <select id="airline-filter" class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm rounded-md">
262
+ <option>All Airlines</option>
263
+ <option>South African Airways</option>
264
+ <option>Mango</option>
265
+ <option>Kulula</option>
266
+ <option>FlySafair</option>
267
+ <option>British Airways</option>
268
+ </select>
269
+ </div>
270
+ <div>
271
+ <label for="price-range" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Price Range</label>
272
+ <select id="price-range" class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm rounded-md">
273
+ <option>Any Price</option>
274
+ <option>Under R1,000</option>
275
+ <option>R1,000 - R2,000</option>
276
+ <option>R2,000 - R3,000</option>
277
+ <option>Over R3,000</option>
278
+ </select>
279
+ </div>
280
+ <div>
281
+ <label for="departure-time" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Departure Time</label>
282
+ <select id="departure-time" class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm rounded-md">
283
+ <option>Any Time</option>
284
+ <option>Early Morning (12am - 6am)</option>
285
+ <option>Morning (6am - 12pm)</option>
286
+ <option>Afternoon (12pm - 6pm)</option>
287
+ <option>Evening (6pm - 12am)</option>
288
+ </select>
289
+ </div>
290
+ <button class="mt-6 text-sm font-medium text-primary dark:text-accent hover:text-secondary dark:hover:text-pink-500">
291
+ Clear All Filters
292
+ </button>
293
+ </div>
294
+ </div>
295
+
296
+ <!-- Flight Cards -->
297
+ <div class="space-y-4" id="flights-container">
298
+ <!-- Flight cards will be inserted here by JavaScript -->
299
+ </div>
300
+ </div>
301
+ </section>
302
+
303
+ <!-- About Section -->
304
+ <section id="about" class="py-12 bg-gray-50 dark:bg-gray-800">
305
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
306
+ <div class="lg:text-center">
307
+ <h2 class="text-base text-primary dark:text-accent font-semibold tracking-wide uppercase">About FlySaver ZA</h2>
308
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
309
+ Helping South Africans Travel for Less
310
+ </p>
311
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 dark:text-gray-400 lg:mx-auto">
312
+ Our mission is to make air travel more affordable and accessible for everyone in South Africa.
313
+ </p>
314
+ </div>
315
+
316
+ <div class="mt-10">
317
+ <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
318
+ <div class="flex">
319
+ <div class="flex-shrink-0">
320
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary dark:bg-accent text-white">
321
+ <i class="fas fa-wallet text-xl"></i>
322
+ </div>
323
+ </div>
324
+ <div class="ml-4">
325
+ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Save Money</h3>
326
+ <p class="mt-2 text-base text-gray-500 dark:text-gray-400">
327
+ We compare prices across all major South African airlines to ensure you get the best deal possible.
328
+ </p>
329
+ </div>
330
+ </div>
331
+
332
+ <div class="flex">
333
+ <div class="flex-shrink-0">
334
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary dark:bg-accent text-white">
335
+ <i class="fas fa-bolt text-xl"></i>
336
+ </div>
337
+ </div>
338
+ <div class="ml-4">
339
+ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Quick & Easy</h3>
340
+ <p class="mt-2 text-base text-gray-500 dark:text-gray-400">
341
+ Our simple interface lets you find and book flights in minutes, with no hidden fees.
342
+ </p>
343
+ </div>
344
+ </div>
345
+
346
+ <div class="flex">
347
+ <div class="flex-shrink-0">
348
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary dark:bg-accent text-white">
349
+ <i class="fas fa-map-marked-alt text-xl"></i>
350
+ </div>
351
+ </div>
352
+ <div class="ml-4">
353
+ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Local Focus</h3>
354
+ <p class="mt-2 text-base text-gray-500 dark:text-gray-400">
355
+ We specialize in South African routes and understand the unique needs of local travelers.
356
+ </p>
357
+ </div>
358
+ </div>
359
+
360
+ <div class="flex">
361
+ <div class="flex-shrink-0">
362
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary dark:bg-accent text-white">
363
+ <i class="fas fa-shield-alt text-xl"></i>
364
+ </div>
365
+ </div>
366
+ <div class="ml-4">
367
+ <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Trusted Partners</h3>
368
+ <p class="mt-2 text-base text-gray-500 dark:text-gray-400">
369
+ We work directly with airlines to bring you the most accurate pricing and availability.
370
+ </p>
371
+ </div>
372
+ </div>
373
+ </div>
374
+ </div>
375
+ </div>
376
+ </section>
377
+
378
+ <!-- Contact Section -->
379
+ <section id="contact" class="py-12 bg-white dark:bg-gray-900">
380
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
381
+ <div class="lg:text-center mb-12">
382
+ <h2 class="text-base text-primary dark:text-accent font-semibold tracking-wide uppercase">Contact Us</h2>
383
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
384
+ We're Here to Help
385
+ </p>
386
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 dark:text-gray-400 lg:mx-auto">
387
+ Have questions or feedback? Reach out to our team.
388
+ </p>
389
+ </div>
390
+
391
+ <div class="mt-10 sm:mt-20">
392
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
393
+ <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-6">
394
+ <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Get in Touch</h3>
395
+ <div class="space-y-4">
396
+ <div class="flex items-start">
397
+ <div class="flex-shrink-0">
398
+ <i class="fas fa-envelope text-primary dark:text-accent"></i>
399
+ </div>
400
+ <div class="ml-3 text-base text-gray-500 dark:text-gray-400">
401
+ <p>support@flysaver.co.za</p>
402
+ </div>
403
+ </div>
404
+ <div class="flex items-start">
405
+ <div class="flex-shrink-0">
406
+ <i class="fas fa-phone-alt text-primary dark:text-accent"></i>
407
+ </div>
408
+ <div class="ml-3 text-base text-gray-500 dark:text-gray-400">
409
+ <p>+27 21 123 4567</p>
410
+ </div>
411
+ </div>
412
+ <div class="flex items-start">
413
+ <div class="flex-shrink-0">
414
+ <i class="fas fa-map-marker-alt text-primary dark:text-accent"></i>
415
+ </div>
416
+ <div class="ml-3 text-base text-gray-500 dark:text-gray-400">
417
+ <p>123 Aviation Way<br>Cape Town, 8001<br>South Africa</p>
418
+ </div>
419
+ </div>
420
+ </div>
421
+ </div>
422
+
423
+ <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-6">
424
+ <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Send Us a Message</h3>
425
+ <form class="space-y-4">
426
+ <div>
427
+ <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Name</label>
428
+ <input type="text" id="name" name="name" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">
429
+ </div>
430
+ <div>
431
+ <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
432
+ <input type="email" id="email" name="email" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">
433
+ </div>
434
+ <div>
435
+ <label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Message</label>
436
+ <textarea id="message" name="message" rows="4" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary"></textarea>
437
+ </div>
438
+ <div>
439
+ <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary dark:bg-accent hover:bg-secondary dark:hover:bg-pink-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
440
+ Send Message
441
+ </button>
442
+ </div>
443
+ </form>
444
+ </div>
445
+ </div>
446
+ </div>
447
+ </div>
448
+ </section>
449
+
450
+ <!-- Footer -->
451
+ <footer class="bg-gray-800 dark:bg-gray-900">
452
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
453
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
454
+ <div>
455
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3>
456
+ <ul class="mt-4 space-y-4">
457
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">About</a></li>
458
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Careers</a></li>
459
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Press</a></li>
460
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Blog</a></li>
461
+ </ul>
462
+ </div>
463
+ <div>
464
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Support</h3>
465
+ <ul class="mt-4 space-y-4">
466
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Help Center</a></li>
467
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Safety</a></li>
468
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Cancellation</a></li>
469
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">FAQ</a></li>
470
+ </ul>
471
+ </div>
472
+ <div>
473
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Legal</h3>
474
+ <ul class="mt-4 space-y-4">
475
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Terms</a></li>
476
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Privacy</a></li>
477
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Cookie Policy</a></li>
478
+ </ul>
479
+ </div>
480
+ <div>
481
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Follow Us</h3>
482
+ <div class="mt-4 flex space-x-6">
483
+ <a href="#" class="text-gray-300 hover:text-white">
484
+ <i class="fab fa-facebook-f"></i>
485
+ </a>
486
+ <a href="#" class="text-gray-300 hover:text-white">
487
+ <i class="fab fa-twitter"></i>
488
+ </a>
489
+ <a href="#" class="text-gray-300 hover:text-white">
490
+ <i class="fab fa-instagram"></i>
491
+ </a>
492
+ <a href="#" class="text-gray-300 hover:text-white">
493
+ <i class="fab fa-linkedin-in"></i>
494
+ </a>
495
+ </div>
496
+ </div>
497
+ </div>
498
+ <div class="mt-8 border-t border-gray-700 pt-8 md:flex md:items-center md:justify-between">
499
+ <div class="flex space-x-6 md:order-2">
500
+ <p class="text-base text-gray-400">&copy; 2023 FlySaver ZA. All rights reserved.</p>
501
+ </div>
502
+ <p class="mt-8 text-base text-gray-400 md:mt-0 md:order-1">
503
+ Proudly South African
504
+ </p>
505
+ </div>
506
+ </div>
507
+ </footer>
508
+
509
+ <!-- JavaScript -->
510
+ <script>
511
+ // Dark mode toggle
512
+ const themeToggle = document.getElementById('theme-toggle');
513
+ themeToggle.addEventListener('click', () => {
514
+ document.documentElement.classList.toggle('dark');
515
+ localStorage.setItem('color-theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
516
+ });
517
+
518
+ // Check for saved theme preference
519
+ if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
520
+ document.documentElement.classList.add('dark');
521
+ } else {
522
+ document.documentElement.classList.remove('dark');
523
+ }
524
+
525
+ // Trip type toggle
526
+ const oneWayBtn = document.getElementById('one-way');
527
+ const roundTripBtn = document.getElementById('round-trip');
528
+ const returnDateContainer = document.querySelector('.return-date-container');
529
+ const returnDateInput = document.getElementById('return-date');
530
+
531
+ oneWayBtn.addEventListener('click', () => {
532
+ oneWayBtn.classList.remove('bg-gray-200', 'dark:bg-gray-700', 'text-gray-700', 'dark:text-gray-300');
533
+ oneWayBtn.classList.add('bg-primary', 'text-white');
534
+ roundTripBtn.classList.remove('bg-primary', 'text-white');
535
+ roundTripBtn.classList.add('bg-gray-200', 'dark:bg-gray-700', 'text-gray-700', 'dark:text-gray-300');
536
+ returnDateContainer.classList.add('hidden');
537
+ returnDateInput.value = '';
538
+ });
539
+
540
+ roundTripBtn.addEventListener('click', () => {
541
+ roundTripBtn.classList.remove('bg-gray-200', 'dark:bg-gray-700', 'text-gray-700', 'dark:text-gray-300');
542
+ roundTripBtn.classList.add('bg-primary', 'text-white');
543
+ oneWayBtn.classList.remove('bg-primary', 'text-white');
544
+ oneWayBtn.classList.add('bg-gray-200', 'dark:bg-gray-700', 'text-gray-700', 'dark:text-gray-300');
545
+ returnDateContainer.classList.remove('hidden');
546
+ });
547
+
548
+ // Mock flight data
549
+ const mockFlights = [
550
+ {
551
+ id: 1,
552
+ airline: 'FlySafair',
553
+ logo: 'fas fa-plane',
554
+ departureTime: '06:15',
555
+ arrivalTime: '08:10',
556
+ duration: '1h 55m',
557
+ price: 1250,
558
+ origin: 'JNB',
559
+ destination: 'CPT',
560
+ stops: 0,
561
+ departureDate: '2023-11-15',
562
+ returnDate: '2023-11-22'
563
+ },
564
+ {
565
+ id: 2,
566
+ airline: 'Mango',
567
+ logo: 'fas fa-plane',
568
+ departureTime: '08:45',
569
+ arrivalTime: '10:40',
570
+ duration: '1h 55m',
571
+ price: 1350,
572
+ origin: 'JNB',
573
+ destination: 'CPT',
574
+ stops: 0,
575
+ departureDate: '2023-11-15',
576
+ returnDate: '2023-11-22'
577
+ },
578
+ {
579
+ id: 3,
580
+ airline: 'Kulula',
581
+ logo: 'fas fa-plane',
582
+ departureTime: '12:30',
583
+ arrivalTime: '14:25',
584
+ duration: '1h 55m',
585
+ price: 1400,
586
+ origin: 'JNB',
587
+ destination: 'CPT',
588
+ stops: 0,
589
+ departureDate: '2023-11-15',
590
+ returnDate: '2023-11-22'
591
+ },
592
+ {
593
+ id: 4,
594
+ airline: 'South African Airways',
595
+ logo: 'fas fa-plane',
596
+ departureTime: '15:15',
597
+ arrivalTime: '17:10',
598
+ duration: '1h 55m',
599
+ price: 1800,
600
+ origin: 'JNB',
601
+ destination: 'CPT',
602
+ stops: 0,
603
+ departureDate: '2023-11-15',
604
+ returnDate: '2023-11-22'
605
+ },
606
+ {
607
+ id: 5,
608
+ airline: 'British Airways',
609
+ logo: 'fas fa-plane',
610
+ departureTime: '18:45',
611
+ arrivalTime: '20:40',
612
+ duration: '1h 55m',
613
+ price: 1950,
614
+ origin: 'JNB',
615
+ destination: 'CPT',
616
+ stops: 0,
617
+ departureDate: '2023-11-15',
618
+ returnDate: '2023-11-22'
619
+ },
620
+ {
621
+ id: 6,
622
+ airline: 'FlySafair',
623
+ logo: 'fas fa-plane',
624
+ departureTime: '07:30',
625
+ arrivalTime: '08:35',
626
+ duration: '1h 05m',
627
+ price: 950,
628
+ origin: 'JNB',
629
+ destination: 'DUR',
630
+ stops: 0,
631
+ departureDate: '2023-11-15',
632
+ returnDate: '2023-11-22'
633
+ },
634
+ {
635
+ id: 7,
636
+ airline: 'Mango',
637
+ logo: 'fas fa-plane',
638
+ departureTime: '10:15',
639
+ arrivalTime: '11:20',
640
+ duration: '1h 05m',
641
+ price: 1050,
642
+ origin: 'JNB',
643
+ destination: 'DUR',
644
+ stops: 0,
645
+ departureDate: '2023-11-15',
646
+ returnDate: '2023-11-22'
647
+ },
648
+ {
649
+ id: 8,
650
+ airline: 'Kulula',
651
+ logo: 'fas fa-plane',
652
+ departureTime: '13:45',
653
+ arrivalTime: '14:50',
654
+ duration: '1h 05m',
655
+ price: 1100,
656
+ origin: 'JNB',
657
+ destination: 'DUR',
658
+ stops: 0,
659
+ departureDate: '2023-11-15',
660
+ returnDate: '2023-11-22'
661
+ },
662
+ {
663
+ id: 9,
664
+ airline: 'South African Airways',
665
+ logo: 'fas fa-plane',
666
+ departureTime: '16:30',
667
+ arrivalTime: '17:35',
668
+ duration: '1h 05m',
669
+ price: 1500,
670
+ origin: 'JNB',
671
+ destination: 'DUR',
672
+ stops: 0,
673
+ departureDate: '2023-11-15',
674
+ returnDate: '2023-11-22'
675
+ },
676
+ {
677
+ id: 10,
678
+ airline: 'British Airways',
679
+ logo: 'fas fa-plane',
680
+ departureTime: '19:15',
681
+ arrivalTime: '20:20',
682
+ duration: '1h 05m',
683
+ price: 1650,
684
+ origin: 'JNB',
685
+ destination: 'DUR',
686
+ stops: 0,
687
+ departureDate: '2023-11-15',
688
+ returnDate: '2023-11-22'
689
+ }
690
+ ];
691
+
692
+ // Search flights button click handler
693
+ document.getElementById('search-flights').addEventListener('click', function() {
694
+ const origin = document.getElementById('origin').value;
695
+ const destination = document.getElementById('destination').value;
696
+ const departureDate = document.getElementById('departure-date').value;
697
+ const returnDate = document.getElementById('return-date').value;
698
+ const passengers = document.getElementById('passengers').value;
699
+ const cabinClass = document.getElementById('cabin-class').value;
700
+
701
+ if (!origin || !destination || !departureDate) {
702
+ alert('Please fill in all required fields (Origin, Destination, Departure Date)');
703
+ return;
704
+ }
705
+
706
+ // Filter mock flights based on search criteria
707
+ const filteredFlights = mockFlights.filter(flight =>
708
+ flight.origin === origin &&
709
+ flight.destination === destination &&
710
+ flight.departureDate === departureDate
711
+ );
712
+
713
+ // Sort by price (lowest first)
714
+ filteredFlights.sort((a, b) => a.price - b.price);
715
+
716
+ // Display results
717
+ displayFlightResults(filteredFlights, origin, destination);
718
+
719
+ // Scroll to results
720
+ document.getElementById('flight-results').scrollIntoView({ behavior: 'smooth' });
721
+ });
722
+
723
+ // Modify search button click handler
724
+ document.getElementById('modify-search').addEventListener('click', function() {
725
+ document.getElementById('flight-results').classList.add('hidden');
726
+ document.getElementById('home').scrollIntoView({ behavior: 'smooth' });
727
+ });
728
+
729
+ // Display flight results
730
+ function displayFlightResults(flights, origin, destination) {
731
+ const flightsContainer = document.getElementById('flights-container');
732
+ const flightResultsSection = document.getElementById('flight-results');
733
+
734
+ // Clear previous results
735
+ flightsContainer.innerHTML = '';
736
+
737
+ if (flights.length === 0) {
738
+ flightsContainer.innerHTML = `
739
+ <div class="text-center py-12">
740
+ <i class="fas fa-plane-slash text-4xl text-gray-400 mb-4"></i>
741
+ <h3 class="text-lg font-medium text-gray-900 dark:text-white">No flights found</h3>
742
+ <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">We couldn't find any flights matching your criteria. Try adjusting your search.</p>
743
+ </div>
744
+ `;
745
+ flightResultsSection.classList.remove('hidden');
746
+ return;
747
+ }
748
+
749
+ // Add results count
750
+ const resultsCount = document.createElement('div');
751
+ resultsCount.className = 'text-sm text-gray-500 dark:text-gray-400 mb-4';
752
+ resultsCount.textContent = `Showing ${flights.length} flights from ${getAirportName(origin)} to ${getAirportName(destination)}`;
753
+ flightsContainer.appendChild(resultsCount);
754
+
755
+ // Add flight cards
756
+ flights.forEach(flight => {
757
+ const flightCard = document.createElement('div');
758
+ flightCard.className = 'bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden flight-card transition-all duration-200';
759
+ flightCard.innerHTML = `
760
+ <div class="p-6">
761
+ <div class="flex flex-col sm:flex-row sm:items-center justify-between">
762
+ <div class="flex items-center mb-4 sm:mb-0">
763
+ <div class="flex-shrink-0 bg-blue-100 dark:bg-blue-900 rounded-md p-3 mr-4">
764
+ <i class="${flight.logo} text-primary dark:text-blue-300 text-xl"></i>
765
+ </div>
766
+ <div>
767
+ <h3 class="text-lg font-medium text-gray-900 dark:text-white">${flight.airline}</h3>
768
+ <p class="text-sm text-gray-500 dark:text-gray-400">${flight.stops === 0 ? 'Non-stop' : flight.stops + ' stop' + (flight.stops > 1 ? 's' : '')}</p>
769
+ </div>
770
+ </div>
771
+ <div class="flex items-center space-x-6">
772
+ <div class="text-center">
773
+ <p class="text-lg font-medium text-gray-900 dark:text-white">${flight.departureTime}</p>
774
+ <p class="text-sm text-gray-500 dark:text-gray-400">${getAirportCode(flight.origin)}</p>
775
+ </div>
776
+ <div class="text-center">
777
+ <p class="text-sm text-gray-500 dark:text-gray-400">${flight.duration}</p>
778
+ <div class="relative">
779
+ <div class="border-t-2 border-gray-300 dark:border-gray-600 w-16"></div>
780
+ <i class="fas fa-plane absolute -top-2 -left-2 text-gray-400 dark:text-gray-500 text-xs transform rotate-45"></i>
781
+ </div>
782
+ </div>
783
+ <div class="text-center">
784
+ <p class="text-lg font-medium text-gray-900 dark:text-white">${flight.arrivalTime}</p>
785
+ <p class="text-sm text-gray-500 dark:text-gray-400">${getAirportCode(flight.destination)}</p>
786
+ </div>
787
+ </div>
788
+ <div class="mt-4 sm:mt-0 flex flex-col items-end">
789
+ <p class="text-2xl font-bold text-primary dark:text-accent">R${flight.price.toLocaleString()}</p>
790
+ <button class="mt-2 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary dark:bg-accent hover:bg-secondary dark:hover:bg-pink-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary book-flight" data-flight-id="${flight.id}">
791
+ Book Now
792
+ </button>
793
+ </div>
794
+ </div>
795
+ </div>
796
+ `;
797
+ flightsContainer.appendChild(flightCard);
798
+ });
799
+
800
+ // Show results section
801
+ flightResultsSection.classList.remove('hidden');
802
+
803
+ // Add event listeners to book buttons
804
+ document.querySelectorAll('.book-flight').forEach(button => {
805
+ button.addEventListener('click', function() {
806
+ const flightId = this.getAttribute('data-flight-id');
807
+ const flight = mockFlights.find(f => f.id === parseInt(flightId));
808
+ alert(`Booking flight ${flight.airline} from ${flight.origin} to ${flight.destination} for R${flight.price}`);
809
+ });
810
+ });
811
+ }
812
+
813
+ // Helper functions
814
+ function getAirportName(code) {
815
+ const airports = {
816
+ 'JNB': 'Johannesburg',
817
+ 'CPT': 'Cape Town',
818
+ 'DUR': 'Durban',
819
+ 'PLZ': 'Port Elizabeth',
820
+ 'BFN': 'Bloemfontein'
821
+ };
822
+ return airports[code] || code;
823
+ }
824
+
825
+ function getAirportCode(code) {
826
+ return code; // In a real app, you might format this differently
827
+ }
828
+
829
+ // Set default dates
830
+ const today = new Date();
831
+ const tomorrow = new Date(today);
832
+ tomorrow.setDate(tomorrow.getDate() + 1);
833
+
834
+ document.getElementById('departure-date').valueAsDate = today;
835
+ document.getElementById('return-date').valueAsDate = tomorrow;
836
+
837
+ // Set min date for date inputs to today
838
+ const dateInputs = document.querySelectorAll('input[type="date"]');
839
+ dateInputs.forEach(input => {
840
+ input.min = today.toISOString().split('T')[0];
841
+ });
842
+
843
+ // Popular route buttons
844
+ document.querySelectorAll('.popular-route').forEach(button => {
845
+ button.addEventListener('click', function() {
846
+ const route = this.getAttribute('data-route').split('-');
847
+ document.getElementById('origin').value = route[0];
848
+ document.getElementById('destination').value = route[1];
849
+ });
850
+ });
851
+ </script>
852
+ <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=pheello/flysaver-za" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
853
+ </html>