Hugging Face's logo

Spaces:
usups
/
booking
Running

App Files Community
usups commited on
Commit
2bd500b
·
verified ·
1 Parent(s): 21cc3fb

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +563 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Booking
3
- emoji: 🌍
4
- colorFrom: green
5
- colorTo: gray
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: booking
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,563 @@
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>Hotel Booking Management System</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
+ .sidebar {
11
+ transition: all 0.3s ease;
12
+ }
13
+ .sidebar.collapsed {
14
+ width: 70px;
15
+ }
16
+ .sidebar.collapsed .sidebar-text {
17
+ display: none;
18
+ }
19
+ .sidebar.collapsed .logo-text {
20
+ display: none;
21
+ }
22
+ .sidebar.collapsed .menu-item {
23
+ justify-content: center;
24
+ }
25
+ .content {
26
+ transition: all 0.3s ease;
27
+ }
28
+ .content.expanded {
29
+ margin-left: 70px;
30
+ }
31
+ .room-card:hover {
32
+ transform: translateY(-5px);
33
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
34
+ }
35
+ .calendar-day {
36
+ transition: all 0.2s ease;
37
+ }
38
+ .calendar-day:hover {
39
+ background-color: #e2e8f0;
40
+ }
41
+ .calendar-day.booked {
42
+ background-color: #fecaca;
43
+ }
44
+ .calendar-day.available {
45
+ background-color: #bbf7d0;
46
+ }
47
+ .calendar-day.selected {
48
+ background-color: #93c5fd;
49
+ }
50
+ </style>
51
+ </head>
52
+ <body class="bg-gray-100 font-sans">
53
+ <div class="flex h-screen overflow-hidden">
54
+ <!-- Sidebar -->
55
+ <div class="sidebar bg-indigo-800 text-white w-64 flex flex-col">
56
+ <div class="p-4 flex items-center space-x-3 border-b border-indigo-700">
57
+ <div class="bg-white p-2 rounded-lg">
58
+ <i class="fas fa-hotel text-indigo-800 text-xl"></i>
59
+ </div>
60
+ <span class="logo-text text-xl font-bold">HotelPro</span>
61
+ </div>
62
+
63
+ <div class="p-4 flex-1 overflow-y-auto">
64
+ <div class="space-y-2">
65
+ <div class="menu-item flex items-center space-x-3 p-3 rounded-lg hover:bg-indigo-700 cursor-pointer">
66
+ <i class="fas fa-tachometer-alt"></i>
67
+ <span class="sidebar-text">Dashboard</span>
68
+ </div>
69
+ <div class="menu-item flex items-center space-x-3 p-3 rounded-lg bg-indigo-700 cursor-pointer">
70
+ <i class="fas fa-calendar-check"></i>
71
+ <span class="sidebar-text">Bookings</span>
72
+ </div>
73
+ <div class="menu-item flex items-center space-x-3 p-3 rounded-lg hover:bg-indigo-700 cursor-pointer">
74
+ <i class="fas fa-bed"></i>
75
+ <span class="sidebar-text">Rooms</span>
76
+ </div>
77
+ <div class="menu-item flex items-center space-x-3 p-3 rounded-lg hover:bg-indigo-700 cursor-pointer">
78
+ <i class="fas fa-users"></i>
79
+ <span class="sidebar-text">Guests</span>
80
+ </div>
81
+ <div class="menu-item flex items-center space-x-3 p-3 rounded-lg hover:bg-indigo-700 cursor-pointer">
82
+ <i class="fas fa-chart-line"></i>
83
+ <span class="sidebar-text">Reports</span>
84
+ </div>
85
+ <div class="menu-item flex items-center space-x-3 p-3 rounded-lg hover:bg-indigo-700 cursor-pointer">
86
+ <i class="fas fa-cog"></i>
87
+ <span class="sidebar-text">Settings</span>
88
+ </div>
89
+ </div>
90
+
91
+ <div class="mt-8 pt-4 border-t border-indigo-700">
92
+ <div class="menu-item flex items-center space-x-3 p-3 rounded-lg hover:bg-indigo-700 cursor-pointer">
93
+ <i class="fas fa-question-circle"></i>
94
+ <span class="sidebar-text">Help & Support</span>
95
+ </div>
96
+ </div>
97
+ </div>
98
+
99
+ <div class="p-4 border-t border-indigo-700">
100
+ <div class="flex items-center space-x-3">
101
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-10 h-10 rounded-full">
102
+ <div class="sidebar-text">
103
+ <div class="font-medium">Admin User</div>
104
+ <div class="text-xs text-indigo-300">Hotel Owner</div>
105
+ </div>
106
+ </div>
107
+ </div>
108
+ </div>
109
+
110
+ <!-- Main Content -->
111
+ <div class="content flex-1 overflow-y-auto">
112
+ <!-- Top Navigation -->
113
+ <div class="bg-white shadow-sm p-4 flex justify-between items-center">
114
+ <div class="flex items-center space-x-4">
115
+ <button id="sidebarToggle" class="text-gray-600 hover:text-gray-900">
116
+ <i class="fas fa-bars text-xl"></i>
117
+ </button>
118
+ <h1 class="text-2xl font-bold text-gray-800">Booking Management</h1>
119
+ </div>
120
+
121
+ <div class="flex items-center space-x-4">
122
+ <div class="relative">
123
+ <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
124
+ <input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
125
+ </div>
126
+ <div class="relative">
127
+ <button class="text-gray-600 hover:text-gray-900 relative">
128
+ <i class="fas fa-bell text-xl"></i>
129
+ <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span>
130
+ </button>
131
+ </div>
132
+ </div>
133
+ </div>
134
+
135
+ <!-- Main Content Area -->
136
+ <div class="p-6">
137
+ <!-- Stats Cards -->
138
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
139
+ <div class="bg-white rounded-lg shadow p-6">
140
+ <div class="flex justify-between items-center">
141
+ <div>
142
+ <p class="text-gray-500">Total Bookings</p>
143
+ <h3 class="text-2xl font-bold">1,248</h3>
144
+ <p class="text-green-500 text-sm">+12% from last month</p>
145
+ </div>
146
+ <div class="bg-indigo-100 p-3 rounded-full">
147
+ <i class="fas fa-calendar-check text-indigo-600 text-xl"></i>
148
+ </div>
149
+ </div>
150
+ </div>
151
+
152
+ <div class="bg-white rounded-lg shadow p-6">
153
+ <div class="flex justify-between items-center">
154
+ <div>
155
+ <p class="text-gray-500">Occupancy Rate</p>
156
+ <h3 class="text-2xl font-bold">78%</h3>
157
+ <p class="text-green-500 text-sm">+5% from last month</p>
158
+ </div>
159
+ <div class="bg-green-100 p-3 rounded-full">
160
+ <i class="fas fa-chart-line text-green-600 text-xl"></i>
161
+ </div>
162
+ </div>
163
+ </div>
164
+
165
+ <div class="bg-white rounded-lg shadow p-6">
166
+ <div class="flex justify-between items-center">
167
+ <div>
168
+ <p class="text-gray-500">Revenue</p>
169
+ <h3 class="text-2xl font-bold">$24,580</h3>
170
+ <p class="text-red-500 text-sm">-3% from last month</p>
171
+ </div>
172
+ <div class="bg-blue-100 p-3 rounded-full">
173
+ <i class="fas fa-dollar-sign text-blue-600 text-xl"></i>
174
+ </div>
175
+ </div>
176
+ </div>
177
+
178
+ <div class="bg-white rounded-lg shadow p-6">
179
+ <div class="flex justify-between items-center">
180
+ <div>
181
+ <p class="text-gray-500">Available Rooms</p>
182
+ <h3 class="text-2xl font-bold">12</h3>
183
+ <p class="text-green-500 text-sm">4 rooms cleaning</p>
184
+ </div>
185
+ <div class="bg-yellow-100 p-3 rounded-full">
186
+ <i class="fas fa-bed text-yellow-600 text-xl"></i>
187
+ </div>
188
+ </div>
189
+ </div>
190
+ </div>
191
+
192
+ <!-- Booking Management Section -->
193
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
194
+ <!-- Calendar View -->
195
+ <div class="bg-white rounded-lg shadow p-6 lg:col-span-2">
196
+ <div class="flex justify-between items-center mb-6">
197
+ <h2 class="text-xl font-bold text-gray-800">Booking Calendar</h2>
198
+ <div class="flex space-x-2">
199
+ <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">Today</button>
200
+ <button class="px-4 py-2 border rounded-lg hover:bg-gray-100">Month</button>
201
+ <button class="px-4 py-2 border rounded-lg hover:bg-gray-100">Week</button>
202
+ <button class="px-4 py-2 border rounded-lg hover:bg-gray-100">Day</button>
203
+ </div>
204
+ </div>
205
+
206
+ <div class="grid grid-cols-7 gap-1 mb-4">
207
+ <div class="text-center font-medium py-2">Sun</div>
208
+ <div class="text-center font-medium py-2">Mon</div>
209
+ <div class="text-center font-medium py-2">Tue</div>
210
+ <div class="text-center font-medium py-2">Wed</div>
211
+ <div class="text-center font-medium py-2">Thu</div>
212
+ <div class="text-center font-medium py-2">Fri</div>
213
+ <div class="text-center font-medium py-2">Sat</div>
214
+ </div>
215
+
216
+ <div class="grid grid-cols-7 gap-1" id="calendar">
217
+ <!-- Calendar days will be populated by JavaScript -->
218
+ </div>
219
+ </div>
220
+
221
+ <!-- Quick Actions -->
222
+ <div class="bg-white rounded-lg shadow p-6">
223
+ <h2 class="text-xl font-bold text-gray-800 mb-6">Quick Actions</h2>
224
+
225
+ <button class="w-full mb-4 flex items-center justify-center space-x-2 bg-indigo-600 text-white py-3 rounded-lg hover:bg-indigo-700 transition">
226
+ <i class="fas fa-plus"></i>
227
+ <span>New Booking</span>
228
+ </button>
229
+
230
+ <button class="w-full mb-4 flex items-center justify-center space-x-2 bg-green-600 text-white py-3 rounded-lg hover:bg-green-700 transition">
231
+ <i class="fas fa-bed"></i>
232
+ <span>Check Availability</span>
233
+ </button>
234
+
235
+ <button class="w-full mb-4 flex items-center justify-center space-x-2 bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 transition">
236
+ <i class="fas fa-file-invoice-dollar"></i>
237
+ <span>Generate Invoice</span>
238
+ </button>
239
+
240
+ <div class="border-t pt-4 mt-4">
241
+ <h3 class="font-medium mb-3">Recent Activities</h3>
242
+ <div class="space-y-3">
243
+ <div class="flex items-start space-x-3">
244
+ <div class="bg-indigo-100 p-2 rounded-full">
245
+ <i class="fas fa-check text-indigo-600 text-sm"></i>
246
+ </div>
247
+ <div>
248
+ <p class="text-sm">Room 203 checked out</p>
249
+ <p class="text-xs text-gray-500">2 minutes ago</p>
250
+ </div>
251
+ </div>
252
+ <div class="flex items-start space-x-3">
253
+ <div class="bg-green-100 p-2 rounded-full">
254
+ <i class="fas fa-calendar text-green-600 text-sm"></i>
255
+ </div>
256
+ <div>
257
+ <p class="text-sm">New booking for Room 105</p>
258
+ <p class="text-xs text-gray-500">15 minutes ago</p>
259
+ </div>
260
+ </div>
261
+ <div class="flex items-start space-x-3">
262
+ <div class="bg-yellow-100 p-2 rounded-full">
263
+ <i class="fas fa-bed text-yellow-600 text-sm"></i>
264
+ </div>
265
+ <div>
266
+ <p class="text-sm">Room 301 needs cleaning</p>
267
+ <p class="text-xs text-gray-500">30 minutes ago</p>
268
+ </div>
269
+ </div>
270
+ </div>
271
+ </div>
272
+ </div>
273
+ </div>
274
+
275
+ <!-- Recent Bookings Table -->
276
+ <div class="bg-white rounded-lg shadow overflow-hidden mb-6">
277
+ <div class="p-6 flex justify-between items-center border-b">
278
+ <h2 class="text-xl font-bold text-gray-800">Recent Bookings</h2>
279
+ <button class="text-indigo-600 hover:text-indigo-800">View All</button>
280
+ </div>
281
+
282
+ <div class="overflow-x-auto">
283
+ <table class="min-w-full divide-y divide-gray-200">
284
+ <thead class="bg-gray-50">
285
+ <tr>
286
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Booking ID</th>
287
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Guest</th>
288
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Room</th>
289
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Dates</th>
290
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
291
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
292
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
293
+ </tr>
294
+ </thead>
295
+ <tbody class="bg-white divide-y divide-gray-200">
296
+ <tr>
297
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#BK-1001</td>
298
+ <td class="px-6 py-4 whitespace-nowrap">
299
+ <div class="flex items-center">
300
+ <div class="flex-shrink-0 h-10 w-10">
301
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
302
+ </div>
303
+ <div class="ml-4">
304
+ <div class="text-sm font-medium text-gray-900">John Smith</div>
305
+ <div class="text-sm text-gray-500">john@example.com</div>
306
+ </div>
307
+ </div>
308
+ </td>
309
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Deluxe Suite (205)</td>
310
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jun 12 - Jun 15, 2023</td>
311
+ <td class="px-6 py-4 whitespace-nowrap">
312
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Checked In</span>
313
+ </td>
314
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$450</td>
315
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
316
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-eye"></i></button>
317
+ <button class="text-green-600 hover:text-green-900 mr-3"><i class="fas fa-edit"></i></button>
318
+ <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
319
+ </td>
320
+ </tr>
321
+ <tr>
322
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#BK-1002</td>
323
+ <td class="px-6 py-4 whitespace-nowrap">
324
+ <div class="flex items-center">
325
+ <div class="flex-shrink-0 h-10 w-10">
326
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="">
327
+ </div>
328
+ <div class="ml-4">
329
+ <div class="text-sm font-medium text-gray-900">Sarah Johnson</div>
330
+ <div class="text-sm text-gray-500">sarah@example.com</div>
331
+ </div>
332
+ </div>
333
+ </td>
334
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Standard Room (104)</td>
335
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jun 15 - Jun 18, 2023</td>
336
+ <td class="px-6 py-4 whitespace-nowrap">
337
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Confirmed</span>
338
+ </td>
339
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$300</td>
340
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
341
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-eye"></i></button>
342
+ <button class="text-green-600 hover:text-green-900 mr-3"><i class="fas fa-edit"></i></button>
343
+ <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
344
+ </td>
345
+ </tr>
346
+ <tr>
347
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#BK-1003</td>
348
+ <td class="px-6 py-4 whitespace-nowrap">
349
+ <div class="flex items-center">
350
+ <div class="flex-shrink-0 h-10 w-10">
351
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/75.jpg" alt="">
352
+ </div>
353
+ <div class="ml-4">
354
+ <div class="text-sm font-medium text-gray-900">Michael Brown</div>
355
+ <div class="text-sm text-gray-500">michael@example.com</div>
356
+ </div>
357
+ </div>
358
+ </td>
359
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Executive Suite (301)</td>
360
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jun 18 - Jun 22, 2023</td>
361
+ <td class="px-6 py-4 whitespace-nowrap">
362
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Pending</span>
363
+ </td>
364
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$600</td>
365
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
366
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-eye"></i></button>
367
+ <button class="text-green-600 hover:text-green-900 mr-3"><i class="fas fa-edit"></i></button>
368
+ <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
369
+ </td>
370
+ </tr>
371
+ </tbody>
372
+ </table>
373
+ </div>
374
+ </div>
375
+
376
+ <!-- Room Availability -->
377
+ <div class="bg-white rounded-lg shadow overflow-hidden">
378
+ <div class="p-6 flex justify-between items-center border-b">
379
+ <h2 class="text-xl font-bold text-gray-800">Room Availability</h2>
380
+ <div class="flex space-x-2">
381
+ <button class="px-4 py-2 border rounded-lg hover:bg-gray-100">All Rooms</button>
382
+ <button class="px-4 py-2 border rounded-lg hover:bg-gray-100">Available</button>
383
+ <button class="px-4 py-2 border rounded-lg hover:bg-gray-100">Occupied</button>
384
+ </div>
385
+ </div>
386
+
387
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 p-6">
388
+ <div class="room-card bg-white border rounded-lg overflow-hidden shadow-sm transition cursor-pointer">
389
+ <div class="h-32 bg-indigo-100 flex items-center justify-center">
390
+ <i class="fas fa-bed text-indigo-500 text-4xl"></i>
391
+ </div>
392
+ <div class="p-4">
393
+ <h3 class="font-bold text-lg">Deluxe Suite (205)</h3>
394
+ <p class="text-gray-600 mb-2">$150/night</p>
395
+ <div class="flex justify-between items-center">
396
+ <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">Available</span>
397
+ <button class="text-indigo-600 hover:text-indigo-800">Book Now</button>
398
+ </div>
399
+ </div>
400
+ </div>
401
+
402
+ <div class="room-card bg-white border rounded-lg overflow-hidden shadow-sm transition cursor-pointer">
403
+ <div class="h-32 bg-blue-100 flex items-center justify-center">
404
+ <i class="fas fa-bed text-blue-500 text-4xl"></i>
405
+ </div>
406
+ <div class="p-4">
407
+ <h3 class="font-bold text-lg">Standard Room (104)</h3>
408
+ <p class="text-gray-600 mb-2">$100/night</p>
409
+ <div class="flex justify-between items-center">
410
+ <span class="px-2 py-1 bg-red-100 text-red-800 text-xs rounded-full">Occupied</span>
411
+ <button class="text-gray-400 cursor-not-allowed">Book Now</button>
412
+ </div>
413
+ </div>
414
+ </div>
415
+
416
+ <div class="room-card bg-white border rounded-lg overflow-hidden shadow-sm transition cursor-pointer">
417
+ <div class="h-32 bg-green-100 flex items-center justify-center">
418
+ <i class="fas fa-bed text-green-500 text-4xl"></i>
419
+ </div>
420
+ <div class="p-4">
421
+ <h3 class="font-bold text-lg">Executive Suite (301)</h3>
422
+ <p class="text-gray-600 mb-2">$200/night</p>
423
+ <div class="flex justify-between items-center">
424
+ <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">Available</span>
425
+ <button class="text-indigo-600 hover:text-indigo-800">Book Now</button>
426
+ </div>
427
+ </div>
428
+ </div>
429
+
430
+ <div class="room-card bg-white border rounded-lg overflow-hidden shadow-sm transition cursor-pointer">
431
+ <div class="h-32 bg-yellow-100 flex items-center justify-center">
432
+ <i class="fas fa-bed text-yellow-500 text-4xl"></i>
433
+ </div>
434
+ <div class="p-4">
435
+ <h3 class="font-bold text-lg">Family Room (108)</h3>
436
+ <p class="text-gray-600 mb-2">$180/night</p>
437
+ <div class="flex justify-between items-center">
438
+ <span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded-full">Cleaning</span>
439
+ <button class="text-gray-400 cursor-not-allowed">Book Now</button>
440
+ </div>
441
+ </div>
442
+ </div>
443
+ </div>
444
+ </div>
445
+ </div>
446
+ </div>
447
+ </div>
448
+
449
+ <script>
450
+ // Toggle sidebar
451
+ document.getElementById('sidebarToggle').addEventListener('click', function() {
452
+ document.querySelector('.sidebar').classList.toggle('collapsed');
453
+ document.querySelector('.content').classList.toggle('expanded');
454
+ });
455
+
456
+ // Generate calendar
457
+ function generateCalendar() {
458
+ const calendar = document.getElementById('calendar');
459
+ const date = new Date();
460
+ const currentMonth = date.getMonth();
461
+ const currentYear = date.getFullYear();
462
+
463
+ // Get first day of month
464
+ const firstDay = new Date(currentYear, currentMonth, 1).getDay();
465
+
466
+ // Get days in month
467
+ const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
468
+
469
+ // Get days from previous month to show
470
+ const prevMonthDays = new Date(currentYear, currentMonth, 0).getDate();
471
+
472
+ // Clear calendar
473
+ calendar.innerHTML = '';
474
+
475
+ // Previous month days
476
+ for (let i = firstDay - 1; i >= 0; i--) {
477
+ const dayElement = document.createElement('div');
478
+ dayElement.className = 'calendar-day bg-gray-100 text-gray-400 p-2 h-24 rounded';
479
+ dayElement.textContent = prevMonthDays - i;
480
+ calendar.appendChild(dayElement);
481
+ }
482
+
483
+ // Current month days
484
+ for (let i = 1; i <= daysInMonth; i++) {
485
+ const dayElement = document.createElement('div');
486
+ dayElement.className = 'calendar-day border p-2 h-24 rounded cursor-pointer';
487
+
488
+ // Add date number
489
+ const dateNumber = document.createElement('div');
490
+ dateNumber.className = 'font-bold';
491
+ dateNumber.textContent = i;
492
+ dayElement.appendChild(dateNumber);
493
+
494
+ // Randomly mark some days as booked or available
495
+ if (Math.random() > 0.7) {
496
+ dayElement.classList.add('booked');
497
+ const bookingInfo = document.createElement('div');
498
+ bookingInfo.className = 'text-xs mt-1 bg-red-100 text-red-800 p-1 rounded';
499
+ bookingInfo.textContent = 'Booked';
500
+ dayElement.appendChild(bookingInfo);
501
+ } else if (Math.random() > 0.5 && i > new Date().getDate()) {
502
+ dayElement.classList.add('available');
503
+ const bookingInfo = document.createElement('div');
504
+ bookingInfo.className = 'text-xs mt-1 bg-green-100 text-green-800 p-1 rounded';
505
+ bookingInfo.textContent = 'Available';
506
+ dayElement.appendChild(bookingInfo);
507
+ }
508
+
509
+ // Highlight today
510
+ if (i === new Date().getDate() && currentMonth === new Date().getMonth()) {
511
+ dayElement.classList.add('selected');
512
+ const todayInfo = document.createElement('div');
513
+ todayInfo.className = 'text-xs mt-1 bg-blue-100 text-blue-800 p-1 rounded';
514
+ todayInfo.textContent = 'Today';
515
+ dayElement.appendChild(todayInfo);
516
+ }
517
+
518
+ calendar.appendChild(dayElement);
519
+ }
520
+
521
+ // Calculate remaining cells (next month days)
522
+ const totalCells = 42; // 6 rows x 7 days
523
+ const remainingCells = totalCells - (firstDay + daysInMonth);
524
+
525
+ // Next month days
526
+ for (let i = 1; i <= remainingCells; i++) {
527
+ const dayElement = document.createElement('div');
528
+ dayElement.className = 'calendar-day bg-gray-100 text-gray-400 p-2 h-24 rounded';
529
+ dayElement.textContent = i;
530
+ calendar.appendChild(dayElement);
531
+ }
532
+ }
533
+
534
+ // Initialize calendar
535
+ generateCalendar();
536
+
537
+ // Add click event to calendar days
538
+ document.getElementById('calendar').addEventListener('click', function(e) {
539
+ const dayElement = e.target.closest('.calendar-day');
540
+ if (dayElement && !dayElement.classList.contains('bg-gray-100')) {
541
+ // Remove selected class from all days
542
+ document.querySelectorAll('.calendar-day').forEach(day => {
543
+ day.classList.remove('selected');
544
+ });
545
+
546
+ // Add selected class to clicked day
547
+ dayElement.classList.add('selected');
548
+ }
549
+ });
550
+
551
+ // Room card hover effect
552
+ document.querySelectorAll('.room-card').forEach(card => {
553
+ card.addEventListener('mouseenter', function() {
554
+ this.classList.add('shadow-md');
555
+ });
556
+
557
+ card.addEventListener('mouseleave', function() {
558
+ this.classList.remove('shadow-md');
559
+ });
560
+ });
561
+ </script>
562
+ <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=usups/booking" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
563
+ </html>