Hugging Face's logo

Spaces:
bronzemoontr
/
hotel
Running

App Files Community
bronzemoontr commited on
Commit
17eaa2c
·
verified ·
1 Parent(s): 5313a22

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +605 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Hotel
3
- emoji: 🐠
4
- colorFrom: green
5
- colorTo: indigo
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: hotel
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: green
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,605 @@
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>BookEase - Find Your Perfect Stay</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
+ .property-card:hover {
11
+ transform: translateY(-5px);
12
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
13
+ }
14
+ .search-box {
15
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
16
+ }
17
+ .date-picker {
18
+ z-index: 50;
19
+ }
20
+ .filter-dropdown {
21
+ max-height: 0;
22
+ overflow: hidden;
23
+ transition: max-height 0.3s ease-out;
24
+ }
25
+ .filter-dropdown.active {
26
+ max-height: 500px;
27
+ }
28
+ .heart-icon {
29
+ transition: all 0.2s ease;
30
+ }
31
+ .heart-icon:hover {
32
+ transform: scale(1.2);
33
+ }
34
+ .heart-icon.active {
35
+ color: #f43f5e;
36
+ }
37
+ </style>
38
+ </head>
39
+ <body class="bg-gray-50">
40
+ <!-- Header/Navigation -->
41
+ <header class="bg-white shadow-sm sticky top-0 z-40">
42
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
43
+ <div class="flex items-center">
44
+ <a href="#" class="text-2xl font-bold text-blue-600 flex items-center">
45
+ <i class="fas fa-hotel mr-2"></i>
46
+ <span>BookEase</span>
47
+ </a>
48
+ <nav class="hidden md:flex ml-10 space-x-6">
49
+ <a href="#" class="text-gray-700 hover:text-blue-600 font-medium">Stays</a>
50
+ <a href="#" class="text-gray-700 hover:text-blue-600 font-medium">Flights</a>
51
+ <a href="#" class="text-gray-700 hover:text-blue-600 font-medium">Car Rentals</a>
52
+ <a href="#" class="text-gray-700 hover:text-blue-600 font-medium">Attractions</a>
53
+ <a href="#admin" class="text-gray-700 hover:text-blue-600 font-medium">Admin</a>
54
+ </nav>
55
+ </div>
56
+ <div class="flex items-center space-x-4">
57
+ <button class="hidden md:block text-gray-700 hover:text-blue-600 font-medium">List your property</button>
58
+ <button class="hidden md:block bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700">Register</button>
59
+ <button class="hidden md:block border border-blue-600 text-blue-600 px-4 py-2 rounded-md hover:bg-blue-50">Sign in</button>
60
+ <button class="md:hidden text-gray-700">
61
+ <i class="fas fa-bars text-xl"></i>
62
+ </button>
63
+ </div>
64
+ </div>
65
+ </header>
66
+
67
+ <!-- Main Search Section -->
68
+ <section class="bg-blue-600 py-8">
69
+ <div class="container mx-auto px-4">
70
+ <div class="search-box bg-white rounded-xl p-6 max-w-6xl mx-auto">
71
+ <h1 class="text-2xl font-bold text-gray-800 mb-6">Find your perfect stay</h1>
72
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
73
+ <div class="relative">
74
+ <label class="block text-sm font-medium text-gray-700 mb-1">Destination</label>
75
+ <input type="text" placeholder="Where are you going?"
76
+ class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
77
+ <i class="fas fa-search absolute right-3 top-9 text-gray-400"></i>
78
+ </div>
79
+
80
+ <div class="relative">
81
+ <label class="block text-sm font-medium text-gray-700 mb-1">Check-in</label>
82
+ <input type="text" placeholder="Add dates"
83
+ class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 date-picker">
84
+ </div>
85
+
86
+ <div class="relative">
87
+ <label class="block text-sm font-medium text-gray-700 mb-1">Check-out</label>
88
+ <input type="text" placeholder="Add dates"
89
+ class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 date-picker">
90
+ </div>
91
+
92
+ <div class="relative">
93
+ <label class="block text-sm font-medium text-gray-700 mb-1">Guests</label>
94
+ <input type="text" placeholder="Add guests"
95
+ class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
96
+ </div>
97
+ </div>
98
+ <button class="mt-6 bg-blue-600 text-white px-6 py-3 rounded-md hover:bg-blue-700 w-full md:w-auto">
99
+ Search
100
+ </button>
101
+ </div>
102
+ </div>
103
+ </section>
104
+
105
+ <!-- Filters Section -->
106
+ <section class="bg-white py-4 border-b">
107
+ <div class="container mx-auto px-4">
108
+ <div class="flex flex-wrap items-center justify-between gap-4">
109
+ <div class="flex items-center space-x-6 overflow-x-auto pb-2 scrollbar-hide">
110
+ <button class="flex flex-col items-center text-blue-600 min-w-max">
111
+ <i class="fas fa-hotel text-xl mb-1"></i>
112
+ <span class="text-xs">Hotels</span>
113
+ </button>
114
+ <button class="flex flex-col items-center text-gray-600 hover:text-blue-600 min-w-max">
115
+ <i class="fas fa-home text-xl mb-1"></i>
116
+ <span class="text-xs">Apartments</span>
117
+ </button>
118
+ <button class="flex flex-col items-center text-gray-600 hover:text-blue-600 min-w-max">
119
+ <i class="fas fa-umbrella-beach text-xl mb-1"></i>
120
+ <span class="text-xs">Resorts</span>
121
+ </button>
122
+ <button class="flex flex-col items-center text-gray-600 hover:text-blue-600 min-w-max">
123
+ <i class="fas fa-mountain text-xl mb-1"></i>
124
+ <span class="text-xs">Villas</span>
125
+ </button>
126
+ <button class="flex flex-col items-center text-gray-600 hover:text-blue-600 min-w-max">
127
+ <i class="fas fa-building text-xl mb-1"></i>
128
+ <span class="text-xs">Hostels</span>
129
+ </button>
130
+ <button class="flex flex-col items-center text-gray-600 hover:text-blue-600 min-w-max">
131
+ <i class="fas fa-campground text-xl mb-1"></i>
132
+ <span class="text-xs">Cabins</span>
133
+ </button>
134
+ </div>
135
+
136
+ <button id="filterToggle" class="flex items-center space-x-2 border border-gray-300 rounded-md px-4 py-2 text-gray-700 hover:bg-gray-50">
137
+ <i class="fas fa-sliders-h"></i>
138
+ <span>Filters</span>
139
+ </button>
140
+ </div>
141
+
142
+ <div id="filterDropdown" class="filter-dropdown mt-4 bg-gray-50 rounded-lg p-4">
143
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
144
+ <div>
145
+ <h3 class="font-medium mb-3">Price range</h3>
146
+ <div class="flex items-center justify-between mb-2">
147
+ <span class="text-sm text-gray-600">$0</span>
148
+ <span class="text-sm text-gray-600">$500+</span>
149
+ </div>
150
+ <input type="range" min="0" max="500" value="250" class="w-full h-2 bg-blue-200 rounded-lg appearance-none cursor-pointer">
151
+ <div class="flex justify-between mt-2">
152
+ <span class="text-sm font-medium">$0 - $250</span>
153
+ </div>
154
+ </div>
155
+
156
+ <div>
157
+ <h3 class="font-medium mb-3">Star rating</h3>
158
+ <div class="flex space-x-2">
159
+ <button class="px-3 py-1 border rounded-md hover:bg-blue-50 hover:border-blue-200">1+</button>
160
+ <button class="px-3 py-1 border rounded-md hover:bg-blue-50 hover:border-blue-200">2+</button>
161
+ <button class="px-3 py-1 border rounded-md bg-blue-100 border-blue-300 text-blue-700">3+</button>
162
+ <button class="px-3 py-1 border rounded-md hover:bg-blue-50 hover:border-blue-200">4+</button>
163
+ <button class="px-3 py-1 border rounded-md hover:bg-blue-50 hover:border-blue-200">5</button>
164
+ </div>
165
+ </div>
166
+
167
+ <div>
168
+ <h3 class="font-medium mb-3">Facilities</h3>
169
+ <div class="grid grid-cols-2 gap-2">
170
+ <label class="flex items-center space-x-2">
171
+ <input type="checkbox" class="rounded text-blue-600">
172
+ <span class="text-sm">Free WiFi</span>
173
+ </label>
174
+ <label class="flex items-center space-x-2">
175
+ <input type="checkbox" class="rounded text-blue-600">
176
+ <span class="text-sm">Pool</span>
177
+ </label>
178
+ <label class="flex items-center space-x-2">
179
+ <input type="checkbox" class="rounded text-blue-600" checked>
180
+ <span class="text-sm">Parking</span>
181
+ </label>
182
+ <label class="flex items-center space-x-2">
183
+ <input type="checkbox" class="rounded text-blue-600">
184
+ <span class="text-sm">Airport shuttle</span>
185
+ </label>
186
+ </div>
187
+ </div>
188
+ </div>
189
+ <div class="flex justify-end mt-4">
190
+ <button class="px-4 py-2 bg-gray-200 rounded-md mr-3 hover:bg-gray-300">Clear all</button>
191
+ <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">Show results</button>
192
+ </div>
193
+ </div>
194
+ </div>
195
+ </section>
196
+
197
+ <!-- Main Content -->
198
+ <main class="container mx-auto px-4 py-8">
199
+ <!-- Map View Toggle -->
200
+ <div class="flex justify-between items-center mb-6">
201
+ <h2 class="text-xl font-bold text-gray-800">1,245 properties found in New York</h2>
202
+ <button class="flex items-center space-x-2 text-blue-600">
203
+ <i class="fas fa-map-marked-alt"></i>
204
+ <span>Show on map</span>
205
+ </button>
206
+ </div>
207
+
208
+ <!-- Sort Options -->
209
+ <div class="flex justify-between items-center mb-6 bg-gray-100 p-3 rounded-md">
210
+ <div class="text-sm text-gray-600">Book without credit card · Free cancellation</div>
211
+ <div class="flex items-center space-x-4">
212
+ <span class="text-sm text-gray-600">Sort by:</span>
213
+ <select class="border rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500">
214
+ <option>Our top picks</option>
215
+ <option>Price (lowest first)</option>
216
+ <option>Price (highest first)</option>
217
+ <option>Star rating</option>
218
+ <option>Distance from center</option>
219
+ </select>
220
+ </div>
221
+ </div>
222
+
223
+ <!-- Property Listings -->
224
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
225
+ <!-- Property Card 1 -->
226
+ <div class="property-card bg-white rounded-xl overflow-hidden border border-gray-200 transition-all duration-300">
227
+ <div class="relative">
228
+ <img src="https://images.unsplash.com/photo-1566073771259-6a8506099945?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
229
+ alt="Luxury Hotel" class="w-full h-48 object-cover">
230
+ <button class="heart-icon absolute top-3 right-3 text-white text-xl bg-black bg-opacity-40 rounded-full p-2">
231
+ <i class="far fa-heart"></i>
232
+ </button>
233
+ <div class="absolute bottom-3 left-3 bg-blue-600 text-white text-xs px-2 py-1 rounded">
234
+ <i class="fas fa-bolt mr-1"></i> 25% off
235
+ </div>
236
+ </div>
237
+ <div class="p-4">
238
+ <div class="flex justify-between items-start">
239
+ <div>
240
+ <h3 class="font-bold text-lg">Grand Luxury Hotel</h3>
241
+ <p class="text-gray-600 text-sm">Manhattan, New York</p>
242
+ </div>
243
+ <div class="flex items-center bg-blue-100 text-blue-800 px-2 py-1 rounded">
244
+ <span class="font-bold">8.9</span>
245
+ <span class="text-xs ml-1">Excellent</span>
246
+ </div>
247
+ </div>
248
+ <div class="mt-3 flex items-center text-sm text-gray-600">
249
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
250
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
251
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
252
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
253
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
254
+ </div>
255
+ <div class="mt-4">
256
+ <p class="text-gray-500 text-sm line-through">$450</p>
257
+ <div class="flex justify-between items-end">
258
+ <div>
259
+ <span class="font-bold text-xl text-blue-600">$337</span>
260
+ <span class="text-gray-600 text-sm">/night</span>
261
+ </div>
262
+ <button class="text-blue-600 text-sm font-medium hover:text-blue-800">
263
+ View deal <i class="fas fa-chevron-right ml-1"></i>
264
+ </button>
265
+ </div>
266
+ </div>
267
+ </div>
268
+ </div>
269
+
270
+ <!-- Property Card 2 -->
271
+ <div class="property-card bg-white rounded-xl overflow-hidden border border-gray-200 transition-all duration-300">
272
+ <div class="relative">
273
+ <img src="https://images.unsplash.com/photo-1551882547-ff40c63fe5fa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
274
+ alt="Boutique Hotel" class="w-full h-48 object-cover">
275
+ <button class="heart-icon absolute top-3 right-3 text-white text-xl bg-black bg-opacity-40 rounded-full p-2">
276
+ <i class="far fa-heart"></i>
277
+ </button>
278
+ </div>
279
+ <div class="p-4">
280
+ <div class="flex justify-between items-start">
281
+ <div>
282
+ <h3 class="font-bold text-lg">Urban Boutique Hotel</h3>
283
+ <p class="text-gray-600 text-sm">Brooklyn, New York</p>
284
+ </div>
285
+ <div class="flex items-center bg-green-100 text-green-800 px-2 py-1 rounded">
286
+ <span class="font-bold">9.2</span>
287
+ <span class="text-xs ml-1">Superb</span>
288
+ </div>
289
+ </div>
290
+ <div class="mt-3 flex items-center text-sm text-gray-600">
291
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
292
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
293
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
294
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
295
+ <i class="fas fa-star-half-alt text-yellow-400 mr-1"></i>
296
+ </div>
297
+ <div class="mt-4">
298
+ <p class="text-gray-500 text-sm">Includes taxes & fees</p>
299
+ <div class="flex justify-between items-end">
300
+ <div>
301
+ <span class="font-bold text-xl text-blue-600">$215</span>
302
+ <span class="text-gray-600 text-sm">/night</span>
303
+ </div>
304
+ <button class="text-blue-600 text-sm font-medium hover:text-blue-800">
305
+ View deal <i class="fas fa-chevron-right ml-1"></i>
306
+ </button>
307
+ </div>
308
+ </div>
309
+ </div>
310
+ </div>
311
+
312
+ <!-- Property Card 3 -->
313
+ <div class="property-card bg-white rounded-xl overflow-hidden border border-gray-200 transition-all duration-300">
314
+ <div class="relative">
315
+ <img src="https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
316
+ alt="Budget Hotel" class="w-full h-48 object-cover">
317
+ <button class="heart-icon absolute top-3 right-3 text-white text-xl bg-black bg-opacity-40 rounded-full p-2">
318
+ <i class="far fa-heart"></i>
319
+ </button>
320
+ <div class="absolute bottom-3 left-3 bg-green-600 text-white text-xs px-2 py-1 rounded">
321
+ <i class="fas fa-leaf mr-1"></i> Eco-friendly
322
+ </div>
323
+ </div>
324
+ <div class="p-4">
325
+ <div class="flex justify-between items-start">
326
+ <div>
327
+ <h3 class="font-bold text-lg">Central Budget Inn</h3>
328
+ <p class="text-gray-600 text-sm">Midtown, New York</p>
329
+ </div>
330
+ <div class="flex items-center bg-blue-100 text-blue-800 px-2 py-1 rounded">
331
+ <span class="font-bold">8.1</span>
332
+ <span class="text-xs ml-1">Very good</span>
333
+ </div>
334
+ </div>
335
+ <div class="mt-3 flex items-center text-sm text-gray-600">
336
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
337
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
338
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
339
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
340
+ </div>
341
+ <div class="mt-4">
342
+ <p class="text-gray-500 text-sm">Breakfast included</p>
343
+ <div class="flex justify-between items-end">
344
+ <div>
345
+ <span class="font-bold text-xl text-blue-600">$129</span>
346
+ <span class="text-gray-600 text-sm">/night</span>
347
+ </div>
348
+ <button class="text-blue-600 text-sm font-medium hover:text-blue-800">
349
+ View deal <i class="fas fa-chevron-right ml-1"></i>
350
+ </button>
351
+ </div>
352
+ </div>
353
+ </div>
354
+ </div>
355
+ </div>
356
+
357
+ <!-- Pagination -->
358
+ <div class="flex justify-center mt-10">
359
+ <nav class="flex items-center space-x-2">
360
+ <button class="px-3 py-1 rounded-md border bg-blue-600 text-white">
361
+ 1
362
+ </button>
363
+ <button class="px-3 py-1 rounded-md border hover:bg-gray-100">
364
+ 2
365
+ </button>
366
+ <button class="px-3 py-1 rounded-md border hover:bg-gray-100">
367
+ 3
368
+ </button>
369
+ <button class="px-3 py-1 rounded-md border hover:bg-gray-100">
370
+ 4
371
+ </button>
372
+ <span class="px-2">...</span>
373
+ <button class="px-3 py-1 rounded-md border hover:bg-gray-100">
374
+ 12
375
+ </button>
376
+ <button class="px-3 py-1 rounded-md border hover:bg-gray-100">
377
+ <i class="fas fa-chevron-right"></i>
378
+ </button>
379
+ </nav>
380
+ </div>
381
+ </main>
382
+
383
+ <!-- Admin Panel Section -->
384
+ <section id="admin" class="py-12 bg-gray-100">
385
+ <div class="container mx-auto px-4">
386
+ <h2 class="text-2xl font-bold text-gray-800 mb-8">Admin Dashboard</h2>
387
+
388
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
389
+ <!-- Properties Management -->
390
+ <div class="bg-white rounded-lg shadow-md p-6">
391
+ <h3 class="text-lg font-semibold mb-4 flex items-center">
392
+ <i class="fas fa-hotel mr-2 text-blue-600"></i> Properties
393
+ </h3>
394
+ <div class="space-y-3">
395
+ <a href="#" class="block px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 text-center">
396
+ Add New Property
397
+ </a>
398
+ <a href="#" class="block px-4 py-2 bg-gray-200 rounded-md hover:bg-gray-300 text-center">
399
+ Manage Properties
400
+ </a>
401
+ <a href="#" class="block px-4 py-2 bg-gray-200 rounded-md hover:bg-gray-300 text-center">
402
+ View Bookings
403
+ </a>
404
+ </div>
405
+ </div>
406
+
407
+ <!-- Users Management -->
408
+ <div class="bg-white rounded-lg shadow-md p-6">
409
+ <h3 class="text-lg font-semibold mb-4 flex items-center">
410
+ <i class="fas fa-users mr-2 text-blue-600"></i> Users
411
+ </h3>
412
+ <div class="space-y-3">
413
+ <a href="#" class="block px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 text-center">
414
+ Add New User
415
+ </a>
416
+ <a href="#" class="block px-4 py-2 bg-gray-200 rounded-md hover:bg-gray-300 text-center">
417
+ Manage Users
418
+ </a>
419
+ <a href="#" class="block px-4 py-2 bg-gray-200 rounded-md hover:bg-gray-300 text-center">
420
+ User Analytics
421
+ </a>
422
+ </div>
423
+ </div>
424
+
425
+ <!-- Reports -->
426
+ <div class="bg-white rounded-lg shadow-md p-6">
427
+ <h3 class="text-lg font-semibold mb-4 flex items-center">
428
+ <i class="fas fa-chart-bar mr-2 text-blue-600"></i> Reports
429
+ </h3>
430
+ <div class="space-y-3">
431
+ <a href="#" class="block px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 text-center">
432
+ Financial Reports
433
+ </a>
434
+ <a href="#" class="block px-4 py-2 bg-gray-200 rounded-md hover:bg-gray-300 text-center">
435
+ Occupancy Rates
436
+ </a>
437
+ <a href="#" class="block px-4 py-2 bg-gray-200 rounded-md hover:bg-gray-300 text-center">
438
+ Customer Reviews
439
+ </a>
440
+ </div>
441
+ </div>
442
+ </div>
443
+
444
+ <!-- Quick Stats -->
445
+ <div class="mt-8 bg-white rounded-lg shadow-md p-6">
446
+ <h3 class="text-lg font-semibold mb-4">Quick Stats</h3>
447
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
448
+ <div class="bg-blue-50 p-4 rounded-lg">
449
+ <div class="text-blue-600 font-bold text-2xl">1,245</div>
450
+ <div class="text-gray-600">Total Properties</div>
451
+ </div>
452
+ <div class="bg-green-50 p-4 rounded-lg">
453
+ <div class="text-green-600 font-bold text-2xl">328</div>
454
+ <div class="text-gray-600">Bookings Today</div>
455
+ </div>
456
+ <div class="bg-yellow-50 p-4 rounded-lg">
457
+ <div class="text-yellow-600 font-bold text-2xl">84%</div>
458
+ <div class="text-gray-600">Occupancy Rate</div>
459
+ </div>
460
+ <div class="bg-purple-50 p-4 rounded-lg">
461
+ <div class="text-purple-600 font-bold text-2xl">4.8</div>
462
+ <div class="text-gray-600">Avg. Rating</div>
463
+ </div>
464
+ </div>
465
+ </div>
466
+ </div>
467
+ </section>
468
+
469
+ <!-- Newsletter Section -->
470
+ <section class="bg-blue-50 py-12">
471
+ <div class="container mx-auto px-4 max-w-4xl text-center">
472
+ <h2 class="text-2xl font-bold text-gray-800 mb-4">Save time, save money!</h2>
473
+ <p class="text-gray-600 mb-6">Sign up and we'll send the best deals to you</p>
474
+ <div class="flex flex-col md:flex-row gap-2 justify-center">
475
+ <input type="email" placeholder="Your email address"
476
+ class="px-4 py-3 rounded-md border focus:outline-none focus:ring-2 focus:ring-blue-500 w-full md:w-96">
477
+ <button class="bg-blue-600 text-white px-6 py-3 rounded-md hover:bg-blue-700">
478
+ Subscribe
479
+ </button>
480
+ </div>
481
+ </div>
482
+ </section>
483
+
484
+ <!-- Footer -->
485
+ <footer class="bg-gray-800 text-white pt-12 pb-6">
486
+ <div class="container mx-auto px-4">
487
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
488
+ <div>
489
+ <h3 class="font-bold text-lg mb-4">BookEase</h3>
490
+ <ul class="space-y-2">
491
+ <li><a href="#" class="text-gray-300 hover:text-white">About BookEase</a></li>
492
+ <li><a href="#" class="text-gray-300 hover:text-white">Careers</a></li>
493
+ <li><a href="#" class="text-gray-300 hover:text-white">Press Center</a></li>
494
+ <li><a href="#" class="text-gray-300 hover:text-white">Travel Blog</a></li>
495
+ </ul>
496
+ </div>
497
+ <div>
498
+ <h3 class="font-bold text-lg mb-4">Help</h3>
499
+ <ul class="space-y-2">
500
+ <li><a href="#" class="text-gray-300 hover:text-white">Customer Service</a></li>
501
+ <li><a href="#" class="text-gray-300 hover:text-white">FAQs</a></li>
502
+ <li><a href="#" class="text-gray-300 hover:text-white">Privacy Policy</a></li>
503
+ <li><a href="#" class="text-gray-300 hover:text-white">Terms of Service</a></li>
504
+ </ul>
505
+ </div>
506
+ <div>
507
+ <h3 class="font-bold text-lg mb-4">Partner with us</h3>
508
+ <ul class="space-y-2">
509
+ <li><a href="#" class="text-gray-300 hover:text-white">List your property</a></li>
510
+ <li><a href="#" class="text-gray-300 hover:text-white">Become an affiliate</a></li>
511
+ <li><a href="#" class="text-gray-300 hover:text-white">Corporate accounts</a></li>
512
+ <li><a href="#" class="text-gray-300 hover:text-white">Travel agents</a></li>
513
+ </ul>
514
+ </div>
515
+ <div>
516
+ <h3 class="font-bold text-lg mb-4">Get the app</h3>
517
+ <div class="space-y-3">
518
+ <button class="flex items-center space-x-2 bg-black text-white px-4 py-2 rounded-md w-full max-w-xs">
519
+ <i class="fab fa-apple text-2xl"></i>
520
+ <div class="text-left">
521
+ <div class="text-xs">Download on the</div>
522
+ <div class="font-medium">App Store</div>
523
+ </div>
524
+ </button>
525
+ <button class="flex items-center space-x-2 bg-black text-white px-4 py-2 rounded-md w-full max-w-xs">
526
+ <i class="fab fa-google-play text-2xl"></i>
527
+ <div class="text-left">
528
+ <div class="text-xs">Get it on</div>
529
+ <div class="font-medium">Google Play</div>
530
+ </div>
531
+ </button>
532
+ </div>
533
+ </div>
534
+ </div>
535
+ <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400 text-sm">
536
+ <p>© 2023 BookEase. All rights reserved.</p>
537
+ </div>
538
+ </div>
539
+ </footer>
540
+
541
+ <script>
542
+ // Admin Panel Tabs
543
+ document.querySelectorAll('.admin-tab').forEach(tab => {
544
+ tab.addEventListener('click', function() {
545
+ // Hide all tab contents
546
+ document.querySelectorAll('.tab-content').forEach(content => {
547
+ content.classList.add('hidden');
548
+ });
549
+
550
+ // Show selected tab content
551
+ const tabId = this.getAttribute('data-tab');
552
+ document.getElementById(tabId).classList.remove('hidden');
553
+
554
+ // Update active tab styling
555
+ document.querySelectorAll('.admin-tab').forEach(t => {
556
+ t.classList.remove('bg-blue-600', 'text-white');
557
+ t.classList.add('bg-gray-200', 'hover:bg-gray-300');
558
+ });
559
+ this.classList.add('bg-blue-600', 'text-white');
560
+ this.classList.remove('bg-gray-200', 'hover:bg-gray-300');
561
+ });
562
+ });
563
+
564
+ // Initialize first tab as active
565
+ document.querySelector('.admin-tab').click();
566
+
567
+ // Toggle filter dropdown
568
+ document.getElementById('filterToggle').addEventListener('click', function() {
569
+ document.getElementById('filterDropdown').classList.toggle('active');
570
+ });
571
+
572
+ // Toggle favorite heart icons
573
+ document.querySelectorAll('.heart-icon').forEach(icon => {
574
+ icon.addEventListener('click', function() {
575
+ const heart = this.querySelector('i');
576
+ heart.classList.toggle('far');
577
+ heart.classList.toggle('fas');
578
+ this.classList.toggle('active');
579
+ });
580
+ });
581
+
582
+ // Simulate property card hover effect
583
+ document.querySelectorAll('.property-card').forEach(card => {
584
+ card.addEventListener('mouseenter', function() {
585
+ this.style.transform = 'translateY(-5px)';
586
+ this.style.boxShadow = '0 10px 25px rgba(0, 0, 0, 0.1)';
587
+ });
588
+
589
+ card.addEventListener('mouseleave', function() {
590
+ this.style.transform = '';
591
+ this.style.boxShadow = '';
592
+ });
593
+ });
594
+
595
+ // Simple date picker functionality would go here
596
+ // In a real implementation, you would use a date picker library
597
+ document.querySelectorAll('.date-picker').forEach(input => {
598
+ input.addEventListener('focus', function() {
599
+ // This would show a date picker in a real implementation
600
+ console.log('Show date picker');
601
+ });
602
+ });
603
+ </script>
604
+ <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=bronzemoontr/hotel" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
605
+ </html>