Hugging Face's logo

Spaces:
eurosam
/
planner
Running

App Files Community
eurosam commited on
Commit
a5e8cd1
·
verified ·
1 Parent(s): 200b069

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +854 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Planner
3
- emoji: 📉
4
- colorFrom: red
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: planner
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: yellow
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,854 @@
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>TravelGenius - AI-Powered Trip Planner</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
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
12
+ }
13
+ .trip-card:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
16
+ }
17
+ .smooth-transition {
18
+ transition: all 0.3s ease;
19
+ }
20
+ .map-container {
21
+ height: 400px;
22
+ border-radius: 1rem;
23
+ }
24
+ .trip-timeline li:not(:last-child)::after {
25
+ content: "";
26
+ position: absolute;
27
+ left: 1rem;
28
+ top: 2.5rem;
29
+ height: 100%;
30
+ width: 2px;
31
+ background: #e2e8f0;
32
+ }
33
+ .animate-pulse {
34
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
35
+ }
36
+ @keyframes pulse {
37
+ 0%, 100% {
38
+ opacity: 1;
39
+ }
40
+ 50% {
41
+ opacity: 0.5;
42
+ }
43
+ }
44
+ </style>
45
+ </head>
46
+ <body class="bg-gray-50 font-sans">
47
+ <!-- Navigation -->
48
+ <nav class="bg-white shadow-md">
49
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
50
+ <div class="flex justify-between h-16">
51
+ <div class="flex">
52
+ <div class="flex-shrink-0 flex items-center">
53
+ <i class="fas fa-route text-indigo-600 text-2xl mr-2"></i>
54
+ <span class="text-xl font-bold text-gray-900">TravelGenius</span>
55
+ </div>
56
+ <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
57
+ <a href="#" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>
58
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Planner</a>
59
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Destinations</a>
60
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Groups</a>
61
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Deals</a>
62
+ </div>
63
+ </div>
64
+ <div class="hidden sm:ml-6 sm:flex sm:items-center">
65
+ <button class="bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none">
66
+ <span class="sr-only">Notifications</span>
67
+ <i class="fas fa-bell h-6 w-6"></i>
68
+ </button>
69
+ <div class="ml-3 relative">
70
+ <div>
71
+ <button id="user-menu" class="flex text-sm rounded-full focus:outline-none" aria-expanded="false" aria-haspopup="true">
72
+ <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
73
+ </button>
74
+ </div>
75
+ </div>
76
+ <button class="ml-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
77
+ Create Trip
78
+ </button>
79
+ </div>
80
+ <div class="-mr-2 flex items-center sm:hidden">
81
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false">
82
+ <span class="sr-only">Open main menu</span>
83
+ <i class="fas fa-bars h-6 w-6"></i>
84
+ </button>
85
+ </div>
86
+ </div>
87
+ </div>
88
+ </nav>
89
+
90
+ <!-- Hero Section -->
91
+ <div class="gradient-bg text-white">
92
+ <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
93
+ <div class="text-center">
94
+ <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
95
+ AI-Powered Travel Planning
96
+ </h1>
97
+ <p class="mt-6 max-w-lg mx-auto text-xl">
98
+ Let our smart algorithms create the perfect trip tailored to your preferences, budget, and interests.
99
+ </p>
100
+ <div class="mt-10 flex justify-center">
101
+ <div class="inline-flex rounded-md shadow">
102
+ <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-gray-50">
103
+ Start Planning
104
+ </a>
105
+ </div>
106
+ <div class="ml-3 inline-flex">
107
+ <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-500 bg-opacity-60 hover:bg-opacity-70">
108
+ <i class="fas fa-play mr-2"></i> Watch Demo
109
+ </a>
110
+ </div>
111
+ </div>
112
+ </div>
113
+ </div>
114
+ </div>
115
+
116
+ <!-- Trip Planner Form -->
117
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
118
+ <div class="bg-white shadow rounded-lg p-6">
119
+ <h2 class="text-2xl font-bold text-gray-900 mb-6">Create Your Perfect Trip</h2>
120
+
121
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
122
+ <!-- Destination -->
123
+ <div>
124
+ <label for="destination" class="block text-sm font-medium text-gray-700">Destination</label>
125
+ <div class="mt-1 relative rounded-md shadow-sm">
126
+ <input type="text" id="destination" class="focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-3 pr-10 py-2 sm:text-sm border-gray-300 rounded-md" placeholder="Where to?">
127
+ <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
128
+ <i class="fas fa-map-marker-alt text-gray-400"></i>
129
+ </div>
130
+ </div>
131
+ </div>
132
+
133
+ <!-- Travel Dates -->
134
+ <div>
135
+ <label for="dates" class="block text-sm font-medium text-gray-700">Travel Dates</label>
136
+ <div class="mt-1 relative rounded-md shadow-sm">
137
+ <input type="text" id="dates" class="focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-3 pr-10 py-2 sm:text-sm border-gray-300 rounded-md" placeholder="Select dates">
138
+ <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
139
+ <i class="fas fa-calendar-alt text-gray-400"></i>
140
+ </div>
141
+ </div>
142
+ </div>
143
+
144
+ <!-- Travelers -->
145
+ <div>
146
+ <label for="travelers" class="block text-sm font-medium text-gray-700">Travelers</label>
147
+ <div class="mt-1 relative rounded-md shadow-sm">
148
+ <select id="travelers" class="focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-3 pr-10 py-2 sm:text-sm border-gray-300 rounded-md">
149
+ <option>1 Traveler</option>
150
+ <option>2 Travelers</option>
151
+ <option>3-5 Travelers</option>
152
+ <option>6-10 Travelers</option>
153
+ <option>10+ Travelers</option>
154
+ </select>
155
+ <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
156
+ <i class="fas fa-users text-gray-400"></i>
157
+ </div>
158
+ </div>
159
+ </div>
160
+
161
+ <!-- Budget -->
162
+ <div>
163
+ <label for="budget" class="block text-sm font-medium text-gray-700">Budget</label>
164
+ <div class="mt-1 relative rounded-md shadow-sm">
165
+ <select id="budget" class="focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-3 pr-10 py-2 sm:text-sm border-gray-300 rounded-md">
166
+ <option>Economy ($)</option>
167
+ <option>Mid-range ($$)</option>
168
+ <option>Luxury ($$$)</option>
169
+ <option>No budget limit</option>
170
+ </select>
171
+ <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
172
+ <i class="fas fa-wallet text-gray-400"></i>
173
+ </div>
174
+ </div>
175
+ </div>
176
+
177
+ <!-- Travel Style -->
178
+ <div>
179
+ <label for="travel-style" class="block text-sm font-medium text-gray-700">Travel Style</label>
180
+ <div class="mt-1 relative rounded-md shadow-sm">
181
+ <select id="travel-style" class="focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-3 pr-10 py-2 sm:text-sm border-gray-300 rounded-md">
182
+ <option>Adventure</option>
183
+ <option>Relaxation</option>
184
+ <option>Cultural</option>
185
+ <option>Food & Wine</option>
186
+ <option>Family</option>
187
+ <option>Romantic</option>
188
+ <option>Business</option>
189
+ </select>
190
+ <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
191
+ <i class="fas fa-umbrella-beach text-gray-400"></i>
192
+ </div>
193
+ </div>
194
+ </div>
195
+
196
+ <!-- Transportation -->
197
+ <div>
198
+ <label for="transportation" class="block text-sm font-medium text-gray-700">Transportation</label>
199
+ <div class="mt-1 relative rounded-md shadow-sm">
200
+ <select id="transportation" class="focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-3 pr-10 py-2 sm:text-sm border-gray-300 rounded-md">
201
+ <option>Flight</option>
202
+ <option>Train</option>
203
+ <option>Car</option>
204
+ <option>Bus</option>
205
+ <option>Ship/Cruise</option>
206
+ <option>Bike</option>
207
+ <option>Walking</option>
208
+ <option>Mixed</option>
209
+ </select>
210
+ <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
211
+ <i class="fas fa-car text-gray-400"></i>
212
+ </div>
213
+ </div>
214
+ </div>
215
+ </div>
216
+
217
+ <!-- Advanced Options -->
218
+ <div class="mt-6">
219
+ <button id="advanced-options-btn" class="text-sm font-medium text-indigo-600 hover:text-indigo-500 focus:outline-none">
220
+ <i class="fas fa-plus-circle mr-1"></i> Show Advanced Options
221
+ </button>
222
+
223
+ <div id="advanced-options" class="hidden mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
224
+ <!-- Accommodation Type -->
225
+ <div>
226
+ <label for="accommodation" class="block text-sm font-medium text-gray-700">Accommodation</label>
227
+ <select id="accommodation" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
228
+ <option>Any</option>
229
+ <option>Hotel</option>
230
+ <option>Hostel</option>
231
+ <option>Apartment</option>
232
+ <option>Resort</option>
233
+ <option>Villa</option>
234
+ <option>Camping</option>
235
+ </select>
236
+ </div>
237
+
238
+ <!-- Interests -->
239
+ <div>
240
+ <label class="block text-sm font-medium text-gray-700">Interests</label>
241
+ <div class="mt-2 space-y-2">
242
+ <div class="flex items-center">
243
+ <input id="history" name="interests" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
244
+ <label for="history" class="ml-2 block text-sm text-gray-700">History</label>
245
+ </div>
246
+ <div class="flex items-center">
247
+ <input id="nature" name="interests" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
248
+ <label for="nature" class="ml-2 block text-sm text-gray-700">Nature</label>
249
+ </div>
250
+ <div class="flex items-center">
251
+ <input id="shopping" name="interests" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
252
+ <label for="shopping" class="ml-2 block text-sm text-gray-700">Shopping</label>
253
+ </div>
254
+ </div>
255
+ </div>
256
+
257
+ <!-- Dietary Preferences -->
258
+ <div>
259
+ <label for="dietary" class="block text-sm font-medium text-gray-700">Dietary Preferences</label>
260
+ <select id="dietary" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
261
+ <option>No restrictions</option>
262
+ <option>Vegetarian</option>
263
+ <option>Vegan</option>
264
+ <option>Gluten-free</option>
265
+ <option>Halal</option>
266
+ <option>Kosher</option>
267
+ </select>
268
+ </div>
269
+
270
+ <!-- Activity Level -->
271
+ <div>
272
+ <label for="activity-level" class="block text-sm font-medium text-gray-700">Activity Level</label>
273
+ <select id="activity-level" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
274
+ <option>Relaxed</option>
275
+ <option>Moderate</option>
276
+ <option>Active</option>
277
+ <option>Very Active</option>
278
+ </select>
279
+ </div>
280
+
281
+ <!-- Group Type -->
282
+ <div>
283
+ <label for="group-type" class="block text-sm font-medium text-gray-700">Group Type</label>
284
+ <select id="group-type" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
285
+ <option>Solo</option>
286
+ <option>Couple</option>
287
+ <option>Family</option>
288
+ <option>Friends</option>
289
+ <option>Business</option>
290
+ </select>
291
+ </div>
292
+
293
+ <!-- Special Requirements -->
294
+ <div>
295
+ <label for="special-req" class="block text-sm font-medium text-gray-700">Special Requirements</label>
296
+ <textarea id="special-req" rows="2" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 block w-full sm:text-sm border border-gray-300 rounded-md" placeholder="Accessibility needs, pet-friendly, etc."></textarea>
297
+ </div>
298
+ </div>
299
+ </div>
300
+
301
+ <div class="mt-8 flex justify-end">
302
+ <button type="button" class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
303
+ Reset
304
+ </button>
305
+ <button type="button" id="generate-plan" class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
306
+ <i class="fas fa-magic mr-2 mt-0.5"></i> Generate Plan
307
+ </button>
308
+ </div>
309
+ </div>
310
+ </div>
311
+
312
+ <!-- AI Processing Modal -->
313
+ <div id="ai-processing-modal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-75 flex items-center justify-center z-50">
314
+ <div class="bg-white rounded-lg p-8 max-w-md w-full text-center">
315
+ <div class="animate-pulse mb-4">
316
+ <i class="fas fa-brain text-indigo-600 text-5xl"></i>
317
+ </div>
318
+ <h3 class="text-lg font-medium text-gray-900 mb-2">AI is crafting your perfect trip</h3>
319
+ <p class="text-sm text-gray-500 mb-6">Analyzing millions of options to find the best matches for your preferences...</p>
320
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
321
+ <div id="progress-bar" class="bg-indigo-600 h-2.5 rounded-full" style="width: 0%"></div>
322
+ </div>
323
+ </div>
324
+ </div>
325
+
326
+ <!-- Generated Trip Plan -->
327
+ <div id="trip-plan" class="hidden max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
328
+ <div class="bg-white shadow rounded-lg overflow-hidden">
329
+ <div class="p-6 border-b border-gray-200">
330
+ <div class="flex justify-between items-center">
331
+ <h2 class="text-2xl font-bold text-gray-900">Your AI-Generated Trip Plan</h2>
332
+ <div class="flex space-x-3">
333
+ <button class="p-2 rounded-full hover:bg-gray-100">
334
+ <i class="fas fa-share-alt text-gray-500"></i>
335
+ </button>
336
+ <button class="p-2 rounded-full hover:bg-gray-100">
337
+ <i class="fas fa-download text-gray-500"></i>
338
+ </button>
339
+ <button class="p-2 rounded-full hover:bg-gray-100">
340
+ <i class="fas fa-print text-gray-500"></i>
341
+ </button>
342
+ </div>
343
+ </div>
344
+ <div class="mt-4 flex flex-wrap gap-2">
345
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">
346
+ <i class="fas fa-calendar-alt mr-1"></i> 7 days
347
+ </span>
348
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
349
+ <i class="fas fa-wallet mr-1"></i> $$ Mid-range
350
+ </span>
351
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
352
+ <i class="fas fa-users mr-1"></i> Couple
353
+ </span>
354
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
355
+ <i class="fas fa-umbrella-beach mr-1"></i> Relaxation
356
+ </span>
357
+ </div>
358
+ </div>
359
+
360
+ <div class="grid grid-cols-1 lg:grid-cols-3">
361
+ <!-- Trip Overview -->
362
+ <div class="lg:col-span-2 p-6 border-b lg:border-b-0 lg:border-r border-gray-200">
363
+ <h3 class="text-lg font-medium text-gray-900 mb-4">Trip Overview</h3>
364
+
365
+ <div class="map-container bg-gray-200 mb-6 flex items-center justify-center">
366
+ <i class="fas fa-map-marked-alt text-4xl text-gray-400"></i>
367
+ </div>
368
+
369
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
370
+ <div class="bg-gray-50 p-4 rounded-lg">
371
+ <div class="flex items-center">
372
+ <div class="flex-shrink-0 bg-indigo-100 rounded-md p-2">
373
+ <i class="fas fa-plane-departure text-indigo-600"></i>
374
+ </div>
375
+ <div class="ml-3">
376
+ <h4 class="text-sm font-medium text-gray-900">Flights</h4>
377
+ <p class="text-sm text-gray-500">Round-trip from NYC to Rome</p>
378
+ </div>
379
+ </div>
380
+ </div>
381
+ <div class="bg-gray-50 p-4 rounded-lg">
382
+ <div class="flex items-center">
383
+ <div class="flex-shrink-0 bg-green-100 rounded-md p-2">
384
+ <i class="fas fa-hotel text-green-600"></i>
385
+ </div>
386
+ <div class="ml-3">
387
+ <h4 class="text-sm font-medium text-gray-900">Accommodation</h4>
388
+ <p class="text-sm text-gray-500">4-star hotel in city center</p>
389
+ </div>
390
+ </div>
391
+ </div>
392
+ <div class="bg-gray-50 p-4 rounded-lg">
393
+ <div class="flex items-center">
394
+ <div class="flex-shrink-0 bg-blue-100 rounded-md p-2">
395
+ <i class="fas fa-car text-blue-600"></i>
396
+ </div>
397
+ <div class="ml-3">
398
+ <h4 class="text-sm font-medium text-gray-900">Transport</h4>
399
+ <p class="text-sm text-gray-500">Private transfers included</p>
400
+ </div>
401
+ </div>
402
+ </div>
403
+ <div class="bg-gray-50 p-4 rounded-lg">
404
+ <div class="flex items-center">
405
+ <div class="flex-shrink-0 bg-purple-100 rounded-md p-2">
406
+ <i class="fas fa-utensils text-purple-600"></i>
407
+ </div>
408
+ <div class="ml-3">
409
+ <h4 class="text-sm font-medium text-gray-900">Dining</h4>
410
+ <p class="text-sm text-gray-500">5 restaurant reservations</p>
411
+ </div>
412
+ </div>
413
+ </div>
414
+ </div>
415
+
416
+ <h3 class="text-lg font-medium text-gray-900 mb-4">Daily Itinerary</h3>
417
+
418
+ <ul class="trip-timeline space-y-8">
419
+ <li class="relative pl-6">
420
+ <div class="absolute left-0 top-0 flex items-center justify-center w-6 h-6 bg-indigo-100 rounded-full">
421
+ <span class="text-xs font-bold text-indigo-600">1</span>
422
+ </div>
423
+ <div class="bg-gray-50 p-4 rounded-lg">
424
+ <h4 class="text-sm font-medium text-gray-900">Day 1: Arrival in Rome</h4>
425
+ <div class="mt-2 space-y-3">
426
+ <div class="flex items-start">
427
+ <div class="flex-shrink-0 mt-0.5">
428
+ <i class="fas fa-plane-arrival text-gray-400"></i>
429
+ </div>
430
+ <div class="ml-2">
431
+ <p class="text-sm text-gray-700">Arrive at Fiumicino Airport (FCO) at 9:30 AM</p>
432
+ <p class="text-xs text-gray-500">Private transfer to hotel</p>
433
+ </div>
434
+ </div>
435
+ <div class="flex items-start">
436
+ <div class="flex-shrink-0 mt-0.5">
437
+ <i class="fas fa-hotel text-gray-400"></i>
438
+ </div>
439
+ <div class="ml-2">
440
+ <p class="text-sm text-gray-700">Check-in at Hotel Artemide</p>
441
+ <p class="text-xs text-gray-500">Free time to relax</p>
442
+ </div>
443
+ </div>
444
+ <div class="flex items-start">
445
+ <div class="flex-shrink-0 mt-0.5">
446
+ <i class="fas fa-utensils text-gray-400"></i>
447
+ </div>
448
+ <div class="ml-2">
449
+ <p class="text-sm text-gray-700">Dinner at Roscioli</p>
450
+ <p class="text-xs text-gray-500">8:00 PM reservation</p>
451
+ </div>
452
+ </div>
453
+ </div>
454
+ </div>
455
+ </li>
456
+ <li class="relative pl-6">
457
+ <div class="absolute left-0 top-0 flex items-center justify-center w-6 h-6 bg-indigo-100 rounded-full">
458
+ <span class="text-xs font-bold text-indigo-600">2</span>
459
+ </div>
460
+ <div class="bg-gray-50 p-4 rounded-lg">
461
+ <h4 class="text-sm font-medium text-gray-900">Day 2: Ancient Rome</h4>
462
+ <div class="mt-2 space-y-3">
463
+ <div class="flex items-start">
464
+ <div class="flex-shrink-0 mt-0.5">
465
+ <i class="fas fa-landmark text-gray-400"></i>
466
+ </div>
467
+ <div class="ml-2">
468
+ <p class="text-sm text-gray-700">Colosseum & Roman Forum Tour</p>
469
+ <p class="text-xs text-gray-500">9:00 AM - 12:00 PM (Skip-the-line tickets)</p>
470
+ </div>
471
+ </div>
472
+ <div class="flex items-start">
473
+ <div class="flex-shrink-0 mt-0.5">
474
+ <i class="fas fa-utensils text-gray-400"></i>
475
+ </div>
476
+ <div class="ml-2">
477
+ <p class="text-sm text-gray-700">Lunch at Trattoria Da Enzo</p>
478
+ <p class="text-xs text-gray-500">1:00 PM reservation</p>
479
+ </div>
480
+ </div>
481
+ <div class="flex items-start">
482
+ <div class="flex-shrink-0 mt-0.5">
483
+ <i class="fas fa-gopuram text-gray-400"></i>
484
+ </div>
485
+ <div class="ml-2">
486
+ <p class="text-sm text-gray-700">Pantheon & Piazza Navona</p>
487
+ <p class="text-xs text-gray-500">Self-guided exploration</p>
488
+ </div>
489
+ </div>
490
+ </div>
491
+ </div>
492
+ </li>
493
+ </ul>
494
+
495
+ <div class="mt-6">
496
+ <button class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
497
+ <i class="fas fa-plus mr-2"></i> Add More Days
498
+ </button>
499
+ </div>
500
+ </div>
501
+
502
+ <!-- Trip Details & Booking -->
503
+ <div class="p-6">
504
+ <h3 class="text-lg font-medium text-gray-900 mb-4">Trip Summary</h3>
505
+
506
+ <div class="bg-gray-50 rounded-lg p-4 mb-6">
507
+ <div class="flex justify-between mb-2">
508
+ <span class="text-sm font-medium text-gray-500">Total Cost</span>
509
+ <span class="text-sm font-bold text-gray-900">$3,245</span>
510
+ </div>
511
+ <div class="flex justify-between text-sm text-gray-500 mb-1">
512
+ <span>Flights</span>
513
+ <span>$1,200</span>
514
+ </div>
515
+ <div class="flex justify-between text-sm text-gray-500 mb-1">
516
+ <span>Accommodation</span>
517
+ <span>$1,400</span>
518
+ </div>
519
+ <div class="flex justify-between text-sm text-gray-500 mb-1">
520
+ <span>Activities</span>
521
+ <span>$450</span>
522
+ </div>
523
+ <div class="flex justify-between text-sm text-gray-500">
524
+ <span>Transport</span>
525
+ <span>$195</span>
526
+ </div>
527
+ </div>
528
+
529
+ <div class="mb-6">
530
+ <h4 class="text-sm font-medium text-gray-900 mb-2">Recommended Activities</h4>
531
+ <div class="space-y-3">
532
+ <div class="flex items-start">
533
+ <img src="https://images.unsplash.com/photo-1552832230-c0197dd311b5?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100&q=80" alt="Vatican Tour" class="flex-shrink-0 w-12 h-12 rounded-md object-cover">
534
+ <div class="ml-3">
535
+ <p class="text-sm font-medium text-gray-900">Vatican Museums & Sistine Chapel</p>
536
+ <p class="text-xs text-gray-500">Skip-the-line guided tour</p>
537
+ <div class="mt-1 flex items-center text-xs text-gray-500">
538
+ <i class="fas fa-star text-yellow-400 mr-1"></i> 4.9 (1,245 reviews)
539
+ </div>
540
+ </div>
541
+ </div>
542
+ <div class="flex items-start">
543
+ <img src="https://images.unsplash.com/photo-1528728329032-2972f65dfb3f?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100&q=80" alt="Cooking Class" class="flex-shrink-0 w-12 h-12 rounded-md object-cover">
544
+ <div class="ml-3">
545
+ <p class="text-sm font-medium text-gray-900">Roman Pasta Cooking Class</p>
546
+ <p class="text-xs text-gray-500">Hands-on experience with local chef</p>
547
+ <div class="mt-1 flex items-center text-xs text-gray-500">
548
+ <i class="fas fa-star text-yellow-400 mr-1"></i> 4.8 (876 reviews)
549
+ </div>
550
+ </div>
551
+ </div>
552
+ </div>
553
+ </div>
554
+
555
+ <div class="mb-6">
556
+ <h4 class="text-sm font-medium text-gray-900 mb-2">Dining Recommendations</h4>
557
+ <div class="space-y-3">
558
+ <div class="flex items-start">
559
+ <img src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100&q=80" alt="Restaurant" class="flex-shrink-0 w-12 h-12 rounded-md object-cover">
560
+ <div class="ml-3">
561
+ <p class="text-sm font-medium text-gray-900">La Pergola</p>
562
+ <p class="text-xs text-gray-500">Michelin-starred rooftop dining</p>
563
+ <div class="mt-1 flex items-center text-xs text-gray-500">
564
+ <i class="fas fa-utensils text-gray-400 mr-1"></i> Italian, Fine Dining
565
+ </div>
566
+ </div>
567
+ </div>
568
+ <div class="flex items-start">
569
+ <img src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&h=100&q=80" alt="Gelateria" class="flex-shrink-0 w-12 h-12 rounded-md object-cover">
570
+ <div class="ml-3">
571
+ <p class="text-sm font-medium text-gray-900">Giolitti</p>
572
+ <p class="text-xs text-gray-500">Historic gelateria since 1900</p>
573
+ <div class="mt-1 flex items-center text-xs text-gray-500">
574
+ <i class="fas fa-ice-cream text-gray-400 mr-1"></i> Gelato, Desserts
575
+ </div>
576
+ </div>
577
+ </div>
578
+ </div>
579
+ </div>
580
+
581
+ <div class="space-y-3">
582
+ <button class="w-full inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
583
+ <i class="fas fa-shopping-cart mr-2"></i> Book Entire Package
584
+ </button>
585
+ <button class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
586
+ <i class="fas fa-bookmark mr-2"></i> Save for Later
587
+ </button>
588
+ <button class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-indigo-600 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
589
+ <i class="fas fa-sync-alt mr-2"></i> Regenerate Plan
590
+ </button>
591
+ </div>
592
+ </div>
593
+ </div>
594
+ </div>
595
+ </div>
596
+
597
+ <!-- Features Section -->
598
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
599
+ <div class="text-center mb-12">
600
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
601
+ Why Choose TravelGenius?
602
+ </h2>
603
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
604
+ Our AI-powered platform takes the stress out of travel planning
605
+ </p>
606
+ </div>
607
+
608
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
609
+ <div class="bg-white p-6 rounded-lg shadow-md">
610
+ <div class="flex-shrink-0 bg-indigo-100 rounded-md p-3 inline-flex">
611
+ <i class="fas fa-brain text-indigo-600 text-xl"></i>
612
+ </div>
613
+ <h3 class="text-lg font-medium text-gray-900 mt-4">Smart AI Planning</h3>
614
+ <p class="mt-2 text-sm text-gray-500">
615
+ Our algorithms analyze millions of data points to create personalized itineraries based on your unique preferences and constraints.
616
+ </p>
617
+ </div>
618
+
619
+ <div class="bg-white p-6 rounded-lg shadow-md">
620
+ <div class="flex-shrink-0 bg-green-100 rounded-md p-3 inline-flex">
621
+ <i class="fas fa-users text-green-600 text-xl"></i>
622
+ </div>
623
+ <h3 class="text-lg font-medium text-gray-900 mt-4">Group Collaboration</h3>
624
+ <p class="mt-2 text-sm text-gray-500">
625
+ Plan trips with friends, family, or colleagues. Share ideas, vote on activities, and create the perfect group itinerary.
626
+ </p>
627
+ </div>
628
+
629
+ <div class="bg-white p-6 rounded-lg shadow-md">
630
+ <div class="flex-shrink-0 bg-blue-100 rounded-md p-3 inline-flex">
631
+ <i class="fas fa-bolt text-blue-600 text-xl"></i>
632
+ </div>
633
+ <h3 class="text-lg font-medium text-gray-900 mt-4">Real-Time Updates</h3>
634
+ <p class="mt-2 text-sm text-gray-500">
635
+ Get instant notifications about flight changes, weather alerts, and local events that might affect your trip.
636
+ </p>
637
+ </div>
638
+
639
+ <div class="bg-white p-6 rounded-lg shadow-md">
640
+ <div class="flex-shrink-0 bg-purple-100 rounded-md p-3 inline-flex">
641
+ <i class="fas fa-wallet text-purple-600 text-xl"></i>
642
+ </div>
643
+ <h3 class="text-lg font-medium text-gray-900 mt-4">Budget Optimization</h3>
644
+ <p class="mt-2 text-sm text-gray-500">
645
+ We find the best deals and optimize your spending across flights, hotels, and activities to maximize your travel budget.
646
+ </p>
647
+ </div>
648
+
649
+ <div class="bg-white p-6 rounded-lg shadow-md">
650
+ <div class="flex-shrink-0 bg-yellow-100 rounded-md p-3 inline-flex">
651
+ <i class="fas fa-map-marked-alt text-yellow-600 text-xl"></i>
652
+ </div>
653
+ <h3 class="text-lg font-medium text-gray-900 mt-4">Local Insights</h3>
654
+ <p class="mt-2 text-sm text-gray-500">
655
+ Discover hidden gems and authentic experiences recommended by locals and frequent travelers.
656
+ </p>
657
+ </div>
658
+
659
+ <div class="bg-white p-6 rounded-lg shadow-md">
660
+ <div class="flex-shrink-0 bg-red-100 rounded-md p-3 inline-flex">
661
+ <i class="fas fa-lock text-red-600 text-xl"></i>
662
+ </div>
663
+ <h3 class="text-lg font-medium text-gray-900 mt-4">Secure Booking</h3>
664
+ <p class="mt-2 text-sm text-gray-500">
665
+ Book everything in one place with our secure payment system and 24/7 customer support.
666
+ </p>
667
+ </div>
668
+ </div>
669
+ </div>
670
+
671
+ <!-- Testimonials -->
672
+ <div class="gradient-bg text-white py-16">
673
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
674
+ <div class="text-center">
675
+ <h2 class="text-3xl font-extrabold sm:text-4xl">
676
+ What Travelers Are Saying
677
+ </h2>
678
+ </div>
679
+
680
+ <div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-8">
681
+ <div class="bg-white bg-opacity-10 p-6 rounded-lg backdrop-filter backdrop-blur-sm">
682
+ <div class="flex items-center">
683
+ <div class="flex-shrink-0">
684
+ <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
685
+ </div>
686
+ <div class="ml-4">
687
+ <div class="text-sm font-medium">Sarah Johnson</div>
688
+ <div class="text-sm text-indigo-200">Family Traveler</div>
689
+ </div>
690
+ </div>
691
+ <p class="mt-4 text-sm">
692
+ "TravelGenius planned our perfect family vacation to Italy. It accounted for our kids' interests, our budget, and even found activities that both the kids and adults loved!"
693
+ </p>
694
+ </div>
695
+
696
+ <div class="bg-white bg-opacity-10 p-6 rounded-lg backdrop-filter backdrop-blur-sm">
697
+ <div class="flex items-center">
698
+ <div class="flex-shrink-0">
699
+ <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
700
+ </div>
701
+ <div class="ml-4">
702
+ <div class="text-sm font-medium">Michael Chen</div>
703
+ <div class="text-sm text-indigo-200">Adventure Seeker</div>
704
+ </div>
705
+ </div>
706
+ <p class="mt-4 text-sm">
707
+ "As a solo traveler, I love how the AI suggests unique experiences I would never find on my own. The hiking routes in Patagonia were breathtaking!"
708
+ </p>
709
+ </div>
710
+
711
+ <div class="bg-white bg-opacity-10 p-6 rounded-lg backdrop-filter backdrop-blur-sm">
712
+ <div class="flex items-center">
713
+ <div class="flex-shrink-0">
714
+ <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
715
+ </div>
716
+ <div class="ml-4">
717
+ <div class="text-sm font-medium">David Wilson</div>
718
+ <div class="text-sm text-indigo-200">Business Traveler</div>
719
+ </div>
720
+ </div>
721
+ <p class="mt-4 text-sm">
722
+ "The corporate travel features saved me hours of planning. It optimized my schedule between meetings and found great networking events nearby."
723
+ </p>
724
+ </div>
725
+ </div>
726
+ </div>
727
+ </div>
728
+
729
+ <!-- CTA Section -->
730
+ <div class="bg-white">
731
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
732
+ <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
733
+ <span class="block">Ready to experience smarter travel?</span>
734
+ <span class="block text-indigo-600">Start planning your perfect trip today.</span>
735
+ </h2>
736
+ <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
737
+ <div class="inline-flex rounded-md shadow">
738
+ <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">
739
+ Get Started
740
+ </a>
741
+ </div>
742
+ <div class="ml-3 inline-flex">
743
+ <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-indigo-50 hover:bg-indigo-100">
744
+ <i class="fas fa-play-circle mr-2"></i> Watch demo
745
+ </a>
746
+ </div>
747
+ </div>
748
+ </div>
749
+ </div>
750
+
751
+ <!-- Footer -->
752
+ <footer class="bg-gray-800">
753
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
754
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
755
+ <div>
756
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3>
757
+ <ul class="mt-4 space-y-4">
758
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">About</a></li>
759
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Careers</a></li>
760
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Blog</a></li>
761
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Press</a></li>
762
+ </ul>
763
+ </div>
764
+ <div>
765
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Resources</h3>
766
+ <ul class="mt-4 space-y-4">
767
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Help Center</a></li>
768
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Travel Guides</a></li>
769
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Safety</a></li>
770
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Developer API</a></li>
771
+ </ul>
772
+ </div>
773
+ <div>
774
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Legal</h3>
775
+ <ul class="mt-4 space-y-4">
776
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Privacy</a></li>
777
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Terms</a></li>
778
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Cookie Policy</a></li>
779
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">GDPR</a></li>
780
+ </ul>
781
+ </div>
782
+ <div>
783
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Connect</h3>
784
+ <ul class="mt-4 space-y-4">
785
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Facebook</a></li>
786
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Twitter</a></li>
787
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Instagram</a></li>
788
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">LinkedIn</a></li>
789
+ </ul>
790
+ </div>
791
+ </div>
792
+ <div class="mt-12 border-t border-gray-700 pt-8">
793
+ <p class="text-base text-gray-400 text-center">
794
+ &copy; 2023 TravelGenius, Inc. All rights reserved.
795
+ </p>
796
+ </div>
797
+ </div>
798
+ </footer>
799
+
800
+ <script>
801
+ // Toggle advanced options
802
+ document.getElementById('advanced-options-btn').addEventListener('click', function() {
803
+ const options = document.getElementById('advanced-options');
804
+ const icon = this.querySelector('i');
805
+
806
+ if (options.classList.contains('hidden')) {
807
+ options.classList.remove('hidden');
808
+ icon.classList.remove('fa-plus-circle');
809
+ icon.classList.add('fa-minus-circle');
810
+ this.innerHTML = '<i class="fas fa-minus-circle mr-1"></i> Hide Advanced Options';
811
+ } else {
812
+ options.classList.add('hidden');
813
+ icon.classList.remove('fa-minus-circle');
814
+ icon.classList.add('fa-plus-circle');
815
+ this.innerHTML = '<i class="fas fa-plus-circle mr-1"></i> Show Advanced Options';
816
+ }
817
+ });
818
+
819
+ // Simulate AI processing
820
+ document.getElementById('generate-plan').addEventListener('click', function() {
821
+ const modal = document.getElementById('ai-processing-modal');
822
+ const progressBar = document.getElementById('progress-bar');
823
+
824
+ // Show modal
825
+ modal.classList.remove('hidden');
826
+
827
+ // Animate progress bar
828
+ let progress = 0;
829
+ const interval = setInterval(() => {
830
+ progress += Math.random() * 10;
831
+ if (progress > 100) progress = 100;
832
+ progressBar.style.width = `${progress}%`;
833
+
834
+ if (progress === 100) {
835
+ clearInterval(interval);
836
+ setTimeout(() => {
837
+ modal.classList.add('hidden');
838
+ document.getElementById('trip-plan').classList.remove('hidden');
839
+
840
+ // Scroll to trip plan
841
+ document.getElementById('trip-plan').scrollIntoView({
842
+ behavior: 'smooth'
843
+ });
844
+ }, 500);
845
+ }
846
+ }, 200);
847
+ });
848
+
849
+ // Mobile menu toggle would go here
850
+ // Group management functionality would go here
851
+ // Real API integrations would go here
852
+ </script>
853
+ <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=eurosam/planner" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
854
+ </html>