Hugging Face's logo

Spaces:
Taper5749
/
kudaram-lakeview-getaway-guru
Running

App Files Community
Taper5749 commited on
Commit
3ccfbfc
·
verified ·
1 Parent(s): 2796fb5

build other pages also like admin panel staff panel etcetra

Browse files
Files changed (4) hide show
  1. admin.html +261 -0
  2. index.html +14 -2
  3. login.html +142 -0
  4. staff.html +162 -0
admin.html ADDED
@@ -0,0 +1,261 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Admin Panel - Kudaram Lakeview</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
12
+ </head>
13
+ <body class="bg-gray-100">
14
+ <div class="flex h-screen">
15
+ <!-- Sidebar -->
16
+ <div class="w-64 bg-gray-800 text-white">
17
+ <div class="p-4 border-b border-gray-700">
18
+ <h1 class="text-xl font-bold flex items-center">
19
+ <img src="/static/logo.png" alt="Logo" class="h-8 mr-2">
20
+ Admin Panel
21
+ </h1>
22
+ </div>
23
+ <nav class="p-4">
24
+ <div class="space-y-2">
25
+ <a href="/admin" class="flex items-center p-2 rounded bg-gray-700">
26
+ <i data-feather="home" class="mr-2"></i> Dashboard
27
+ </a>
28
+ <a href="/admin/bookings" class="flex items-center p-2 rounded hover:bg-gray-700">
29
+ <i data-feather="calendar" class="mr-2"></i> Bookings
30
+ </a>
31
+ <a href="/admin/rooms" class="flex items-center p-2 rounded hover:bg-gray-700">
32
+ <i data-feather="home" class="mr-2"></i> Rooms
33
+ </a>
34
+ <a href="/admin/guests" class="flex items-center p-2 rounded hover:bg-gray-700">
35
+ <i data-feather="users" class="mr-2"></i> Guests
36
+ </a>
37
+ <a href="/admin/staff" class="flex items-center p-2 rounded hover:bg-gray-700">
38
+ <i data-feather="user-plus" class="mr-2"></i> Staff
39
+ </a>
40
+ <a href="/admin/reports" class="flex items-center p-2 rounded hover:bg-gray-700">
41
+ <i data-feather="bar-chart-2" class="mr-2"></i> Reports
42
+ </a>
43
+ <a href="/admin/settings" class="flex items-center p-2 rounded hover:bg-gray-700">
44
+ <i data-feather="settings" class="mr-2"></i> Settings
45
+ </a>
46
+ </div>
47
+ </nav>
48
+ </div>
49
+
50
+ <!-- Main Content -->
51
+ <div class="flex-1 overflow-auto">
52
+ <!-- Top Navigation -->
53
+ <header class="bg-white shadow-sm">
54
+ <div class="flex justify-between items-center p-4">
55
+ <h2 class="text-xl font-semibold">Dashboard Overview</h2>
56
+ <div class="flex items-center space-x-4">
57
+ <div class="relative">
58
+ <i data-feather="bell" class="text-gray-500"></i>
59
+ <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
60
+ </div>
61
+ <div class="flex items-center">
62
+ <img src="http://static.photos/people/200x200/5" alt="Admin" class="h-8 w-8 rounded-full">
63
+ <span class="ml-2">Admin</span>
64
+ </div>
65
+ </div>
66
+ </div>
67
+ </header>
68
+
69
+ <!-- Dashboard Content -->
70
+ <main class="p-6">
71
+ <!-- Stats Cards -->
72
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
73
+ <div class="bg-white rounded-lg shadow p-6">
74
+ <div class="flex items-center">
75
+ <div class="p-3 rounded-full bg-green-100 text-green-600">
76
+ <i data-feather="dollar-sign"></i>
77
+ </div>
78
+ <div class="ml-4">
79
+ <p class="text-gray-500">Today's Revenue</p>
80
+ <h3 class="text-2xl font-bold">₹24,500</h3>
81
+ </div>
82
+ </div>
83
+ </div>
84
+ <div class="bg-white rounded-lg shadow p-6">
85
+ <div class="flex items-center">
86
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600">
87
+ <i data-feather="home"></i>
88
+ </div>
89
+ <div class="ml-4">
90
+ <p class="text-gray-500">Occupied Rooms</p>
91
+ <h3 class="text-2xl font-bold">14/24</h3>
92
+ </div>
93
+ </div>
94
+ </div>
95
+ <div class="bg-white rounded-lg shadow p-6">
96
+ <div class="flex items-center">
97
+ <div class="p-3 rounded-full bg-purple-100 text-purple-600">
98
+ <i data-feather="users"></i>
99
+ </div>
100
+ <div class="ml-4">
101
+ <p class="text-gray-500">New Guests</p>
102
+ <h3 class="text-2xl font-bold">8</h3>
103
+ </div>
104
+ </div>
105
+ </div>
106
+ <div class="bg-white rounded-lg shadow p-6">
107
+ <div class="flex items-center">
108
+ <div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
109
+ <i data-feather="calendar"></i>
110
+ </div>
111
+ <div class="ml-4">
112
+ <p class="text-gray-500">Check-ins Today</p>
113
+ <h3 class="text-2xl font-bold">5</h3>
114
+ </div>
115
+ </div>
116
+ </div>
117
+ </div>
118
+
119
+ <!-- Charts -->
120
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
121
+ <div class="bg-white rounded-lg shadow p-6">
122
+ <h3 class="text-lg font-semibold mb-4">Revenue Overview</h3>
123
+ <canvas id="revenueChart" height="300"></canvas>
124
+ </div>
125
+ <div class="bg-white rounded-lg shadow p-6">
126
+ <h3 class="text-lg font-semibold mb-4">Occupancy Rate</h3>
127
+ <canvas id="occupancyChart" height="300"></canvas>
128
+ </div>
129
+ </div>
130
+
131
+ <!-- Recent Bookings -->
132
+ <div class="bg-white rounded-lg shadow overflow-hidden">
133
+ <div class="px-6 py-4 border-b border-gray-200">
134
+ <h3 class="text-lg font-semibold">Recent Bookings</h3>
135
+ </div>
136
+ <div class="overflow-x-auto">
137
+ <table class="min-w-full divide-y divide-gray-200">
138
+ <thead class="bg-gray-50">
139
+ <tr>
140
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Booking ID</th>
141
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Guest</th>
142
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Room</th>
143
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Check-in</th>
144
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Check-out</th>
145
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
146
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
147
+ </tr>
148
+ </thead>
149
+ <tbody class="bg-white divide-y divide-gray-200">
150
+ <tr>
151
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#BK00123</td>
152
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Rahul Sharma</td>
153
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Deluxe Lake View</td>
154
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15 May 2023</td>
155
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">18 May 2023</td>
156
+ <td class="px-6 py-4 whitespace-nowrap">
157
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Confirmed</span>
158
+ </td>
159
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
160
+ <a href="#" class="text-indigo-600 hover:text-indigo-900">View</a>
161
+ </td>
162
+ </tr>
163
+ <tr>
164
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#BK00122</td>
165
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Priya Patel</td>
166
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Executive Suite</td>
167
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">14 May 2023</td>
168
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">16 May 2023</td>
169
+ <td class="px-6 py-4 whitespace-nowrap">
170
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Pending</span>
171
+ </td>
172
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
173
+ <a href="#" class="text-indigo-600 hover:text-indigo-900">View</a>
174
+ </td>
175
+ </tr>
176
+ <tr>
177
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#BK00121</td>
178
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Vikram Singh</td>
179
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Family Suite</td>
180
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">12 May 2023</td>
181
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15 May 2023</td>
182
+ <td class="px-6 py-4 whitespace-nowrap">
183
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Confirmed</span>
184
+ </td>
185
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
186
+ <a href="#" class="text-indigo-600 hover:text-indigo-900">View</a>
187
+ </td>
188
+ </tr>
189
+ </tbody>
190
+ </table>
191
+ </div>
192
+ </div>
193
+ </main>
194
+ </div>
195
+ </div>
196
+
197
+ <script>
198
+ // Initialize feather icons
199
+ feather.replace();
200
+
201
+ // Charts
202
+ const revenueCtx = document.getElementById('revenueChart').getContext('2d');
203
+ const revenueChart = new Chart(revenueCtx, {
204
+ type: 'line',
205
+ data: {
206
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
207
+ datasets: [{
208
+ label: 'Revenue (₹)',
209
+ data: [150000, 175000, 190000, 210000, 225000, 240000],
210
+ backgroundColor: 'rgba(16, 185, 129, 0.1)',
211
+ borderColor: 'rgba(16, 185, 129, 1)',
212
+ borderWidth: 2,
213
+ tension: 0.3
214
+ }]
215
+ },
216
+ options: {
217
+ responsive: true,
218
+ plugins: {
219
+ legend: {
220
+ display: false
221
+ }
222
+ },
223
+ scales: {
224
+ y: {
225
+ beginAtZero: true
226
+ }
227
+ }
228
+ }
229
+ });
230
+
231
+ const occupancyCtx = document.getElementById('occupancyChart').getContext('2d');
232
+ const occupancyChart = new Chart(occupancyCtx, {
233
+ type: 'bar',
234
+ data: {
235
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
236
+ datasets: [{
237
+ label: 'Occupancy Rate (%)',
238
+ data: [65, 72, 68, 78, 82, 85],
239
+ backgroundColor: 'rgba(99, 102, 241, 0.6)',
240
+ borderColor: 'rgba(99, 102, 241, 1)',
241
+ borderWidth: 1
242
+ }]
243
+ },
244
+ options: {
245
+ responsive: true,
246
+ plugins: {
247
+ legend: {
248
+ display: false
249
+ }
250
+ },
251
+ scales: {
252
+ y: {
253
+ beginAtZero: true,
254
+ max: 100
255
+ }
256
+ }
257
+ }
258
+ });
259
+ </script>
260
+ </body>
261
+ </html>
index.html CHANGED
@@ -64,10 +64,16 @@
64
  <a href="/login" class="text-gray-500 hover:text-emerald-600 px-3 py-2 rounded-md text-sm font-medium">
65
  <i data-feather="log-in" class="mr-1"></i> Login
66
  </a>
 
 
 
 
 
 
67
  <a href="/book" 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-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
68
  <i data-feather="calendar" class="mr-2"></i> Book Now
69
  </a>
70
- </div>
71
  <div class="-mr-2 flex items-center sm:hidden">
72
  <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-emerald-500" aria-controls="mobile-menu" aria-expanded="false">
73
  <i data-feather="menu"></i>
@@ -98,10 +104,16 @@
98
  <a href="/login" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100">
99
  <i data-feather="log-in" class="mr-2"></i> Login
100
  </a>
 
 
 
 
 
 
101
  <a href="/book" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100">
102
  <i data-feather="calendar" class="mr-2"></i> Book Now
103
  </a>
104
- </div>
105
  </div>
106
  </div>
107
  </nav>
 
64
  <a href="/login" class="text-gray-500 hover:text-emerald-600 px-3 py-2 rounded-md text-sm font-medium">
65
  <i data-feather="log-in" class="mr-1"></i> Login
66
  </a>
67
+ <a href="/admin" class="text-gray-500 hover:text-emerald-600 px-3 py-2 rounded-md text-sm font-medium">
68
+ <i data-feather="lock" class="mr-1"></i> Admin
69
+ </a>
70
+ <a href="/staff" class="text-gray-500 hover:text-emerald-600 px-3 py-2 rounded-md text-sm font-medium">
71
+ <i data-feather="user" class="mr-1"></i> Staff
72
+ </a>
73
  <a href="/book" 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-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
74
  <i data-feather="calendar" class="mr-2"></i> Book Now
75
  </a>
76
+ </div>
77
  <div class="-mr-2 flex items-center sm:hidden">
78
  <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-emerald-500" aria-controls="mobile-menu" aria-expanded="false">
79
  <i data-feather="menu"></i>
 
104
  <a href="/login" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100">
105
  <i data-feather="log-in" class="mr-2"></i> Login
106
  </a>
107
+ <a href="/admin" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100">
108
+ <i data-feather="lock" class="mr-2"></i> Admin
109
+ </a>
110
+ <a href="/staff" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100">
111
+ <i data-feather="user" class="mr-2"></i> Staff
112
+ </a>
113
  <a href="/book" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100">
114
  <i data-feather="calendar" class="mr-2"></i> Book Now
115
  </a>
116
+ </div>
117
  </div>
118
  </div>
119
  </nav>
login.html ADDED
@@ -0,0 +1,142 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Login - Kudaram Lakeview</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>
12
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
13
+ <style>
14
+ .login-container {
15
+ background: rgba(255, 255, 255, 0.9);
16
+ backdrop-filter: blur(10px);
17
+ }
18
+ </style>
19
+ </head>
20
+ <body class="bg-gray-50">
21
+ <!-- Dynamic Background -->
22
+ <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full -z-10"></div>
23
+
24
+ <div class="min-h-screen flex flex-col justify-center py-12 sm:px-6 lg:px-8">
25
+ <div class="sm:mx-auto sm:w-full sm:max-w-md">
26
+ <div class="flex justify-center">
27
+ <img class="h-16 w-auto" src="/static/logo.png" alt="Kudaram Lakeview">
28
+ </div>
29
+ <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
30
+ Sign in to your account
31
+ </h2>
32
+ </div>
33
+
34
+ <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
35
+ <div class="login-container py-8 px-4 shadow rounded-lg sm:px-10">
36
+ <form class="space-y-6" action="#" method="POST">
37
+ <div>
38
+ <label for="email" class="block text-sm font-medium text-gray-700">
39
+ Email address
40
+ </label>
41
+ <div class="mt-1">
42
+ <input id="email" name="email" type="email" autocomplete="email" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm">
43
+ </div>
44
+ </div>
45
+
46
+ <div>
47
+ <label for="password" class="block text-sm font-medium text-gray-700">
48
+ Password
49
+ </label>
50
+ <div class="mt-1">
51
+ <input id="password" name="password" type="password" autocomplete="current-password" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm">
52
+ </div>
53
+ </div>
54
+
55
+ <div class="flex items-center justify-between">
56
+ <div class="flex items-center">
57
+ <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-emerald-600 focus:ring-emerald-500 border-gray-300 rounded">
58
+ <label for="remember-me" class="ml-2 block text-sm text-gray-900">
59
+ Remember me
60
+ </label>
61
+ </div>
62
+
63
+ <div class="text-sm">
64
+ <a href="/forgot-password" class="font-medium text-emerald-600 hover:text-emerald-500">
65
+ Forgot your password?
66
+ </a>
67
+ </div>
68
+ </div>
69
+
70
+ <div>
71
+ <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
72
+ Sign in
73
+ </button>
74
+ </div>
75
+ </form>
76
+
77
+ <div class="mt-6">
78
+ <div class="relative">
79
+ <div class="absolute inset-0 flex items-center">
80
+ <div class="w-full border-t border-gray-300"></div>
81
+ </div>
82
+ <div class="relative flex justify-center text-sm">
83
+ <span class="px-2 bg-white text-gray-500">
84
+ Or continue with
85
+ </span>
86
+ </div>
87
+ </div>
88
+
89
+ <div class="mt-6 grid grid-cols-2 gap-3">
90
+ <div>
91
+ <a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
92
+ <i data-feather="facebook" class="h-5 w-5"></i>
93
+ </a>
94
+ </div>
95
+ <div>
96
+ <a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
97
+ <i data-feather="github" class="h-5 w-5"></i>
98
+ </a>
99
+ </div>
100
+ </div>
101
+ </div>
102
+ </div>
103
+
104
+ <div class="mt-6 text-center text-sm text-gray-600">
105
+ <p>
106
+ Don't have an account?
107
+ <a href="/register" class="font-medium text-emerald-600 hover:text-emerald-500">
108
+ Register here
109
+ </a>
110
+ </p>
111
+ <p class="mt-2">
112
+ <a href="/" class="font-medium text-emerald-600 hover:text-emerald-500">
113
+ ← Back to home
114
+ </a>
115
+ </p>
116
+ </div>
117
+ </div>
118
+ </div>
119
+
120
+ <script>
121
+ // Initialize Vanta.js background
122
+ VANTA.WAVES({
123
+ el: "#vanta-bg",
124
+ mouseControls: true,
125
+ touchControls: true,
126
+ gyroControls: false,
127
+ minHeight: 200.00,
128
+ minWidth: 200.00,
129
+ scale: 1.00,
130
+ scaleMobile: 1.00,
131
+ color: 0x10b981,
132
+ shininess: 20.00,
133
+ waveHeight: 15.00,
134
+ waveSpeed: 0.75,
135
+ zoom: 0.65
136
+ });
137
+
138
+ // Initialize feather icons
139
+ feather.replace();
140
+ </script>
141
+ </body>
142
+ </html>
staff.html ADDED
@@ -0,0 +1,162 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Staff Panel - Kudaram Lakeview</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ </head>
12
+ <body class="bg-gray-100">
13
+ <div class="flex h-screen">
14
+ <!-- Sidebar -->
15
+ <div class="w-64 bg-gray-800 text-white">
16
+ <div class="p-4 border-b border-gray-700">
17
+ <h1 class="text-xl font-bold flex items-center">
18
+ <img src="/static/logo.png" alt="Logo" class="h-8 mr-2">
19
+ Staff Panel
20
+ </h1>
21
+ </div>
22
+ <nav class="p-4">
23
+ <div class="space-y-2">
24
+ <a href="/staff" class="flex items-center p-2 rounded bg-gray-700">
25
+ <i data-feather="home" class="mr-2"></i> Dashboard
26
+ </a>
27
+ <a href="/staff/checkin" class="flex items-center p-2 rounded hover:bg-gray-700">
28
+ <i data-feather="log-in" class="mr-2"></i> Check-ins
29
+ </a>
30
+ <a href="/staff/checkout" class="flex items-center p-2 rounded hover:bg-gray-700">
31
+ <i data-feather="log-out" class="mr-2"></i> Check-outs
32
+ </a>
33
+ <a href="/staff/guests" class="flex items-center p-2 rounded hover:bg-gray-700">
34
+ <i data-feather="users" class="mr-2"></i> Guests
35
+ </a>
36
+ <a href="/staff/rooms" class="flex items-center p-2 rounded hover:bg-gray-700">
37
+ <i data-feather="home" class="mr-2"></i> Rooms
38
+ </a>
39
+ <a href="/staff/services" class="flex items-center p-2 rounded hover:bg-gray-700">
40
+ <i data-feather="bell" class="mr-2"></i> Guest Services
41
+ </a>
42
+ </div>
43
+ </nav>
44
+ </div>
45
+
46
+ <!-- Main Content -->
47
+ <div class="flex-1 overflow-auto">
48
+ <!-- Top Navigation -->
49
+ <header class="bg-white shadow-sm">
50
+ <div class="flex justify-between items-center p-4">
51
+ <h2 class="text-xl font-semibold">Staff Dashboard</h2>
52
+ <div class="flex items-center space-x-4">
53
+ <div class="relative">
54
+ <i data-feather="bell" class="text-gray-500"></i>
55
+ <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
56
+ </div>
57
+ <div class="flex items-center">
58
+ <img src="http://static.photos/people/200x200/6" alt="Staff" class="h-8 w-8 rounded-full">
59
+ <span class="ml-2">Staff Member</span>
60
+ </div>
61
+ </div>
62
+ </div>
63
+ </header>
64
+
65
+ <!-- Dashboard Content -->
66
+ <main class="p-6">
67
+ <!-- Today's Tasks -->
68
+ <div class="bg-white rounded-lg shadow overflow-hidden mb-6">
69
+ <div class="px-6 py-4 border-b border-gray-200">
70
+ <h3 class="text-lg font-semibold">Today's Tasks</h3>
71
+ </div>
72
+ <div class="p-6">
73
+ <div class="space-y-4">
74
+ <div class="flex items-start">
75
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
76
+ <i data-feather="log-in" class="text-blue-600"></i>
77
+ </div>
78
+ <div class="ml-4">
79
+ <h4 class="text-sm font-medium">Check-in for Room 203</h4>
80
+ <p class="text-sm text-gray-500">Mr. Sharma - Expected at 2:00 PM</p>
81
+ </div>
82
+ </div>
83
+ <div class="flex items-start">
84
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center">
85
+ <i data-feather="log-out" class="text-green-600"></i>
86
+ </div>
87
+ <div class="ml-4">
88
+ <h4 class="text-sm font-medium">Check-out for Room 105</h4>
89
+ <p class="text-sm text-gray-500">Ms. Patel - By 11:00 AM</p>
90
+ </div>
91
+ </div>
92
+ <div class="flex items-start">
93
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center">
94
+ <i data-feather="bell" class="text-purple-600"></i>
95
+ </div>
96
+ <div class="ml-4">
97
+ <h4 class="text-sm font-medium">Room Service Request</h4>
98
+ <p class="text-sm text-gray-500">Room 307 - Extra towels needed</p>
99
+ </div>
100
+ </div>
101
+ </div>
102
+ </div>
103
+ </div>
104
+
105
+ <!-- Current Guests -->
106
+ <div class="bg-white rounded-lg shadow overflow-hidden">
107
+ <div class="px-6 py-4 border-b border-gray-200">
108
+ <h3 class="text-lg font-semibold">Current Guests</h3>
109
+ </div>
110
+ <div class="overflow-x-auto">
111
+ <table class="min-w-full divide-y divide-gray-200">
112
+ <thead class="bg-gray-50">
113
+ <tr>
114
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Room</th>
115
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Guest</th>
116
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Check-in</th>
117
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Check-out</th>
118
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
119
+ </tr>
120
+ </thead>
121
+ <tbody class="bg-white divide-y divide-gray-200">
122
+ <tr>
123
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Deluxe 203</td>
124
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Rahul Sharma</td>
125
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15 May 2023</td>
126
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">18 May 2023</td>
127
+ <td class="px-6 py-4 whitespace-nowrap">
128
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Checked In</span>
129
+ </td>
130
+ </tr>
131
+ <tr>
132
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Suite 105</td>
133
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Priya Patel</td>
134
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">14 May 2023</td>
135
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">16 May 2023</td>
136
+ <td class="px-6 py-4 whitespace-nowrap">
137
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Pending Check-out</span>
138
+ </td>
139
+ </tr>
140
+ <tr>
141
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Family 307</td>
142
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Vikram Singh</td>
143
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">12 May 2023</td>
144
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15 May 2023</td>
145
+ <td class="px-6 py-4 whitespace-nowrap">
146
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Checked In</span>
147
+ </td>
148
+ </tr>
149
+ </tbody>
150
+ </table>
151
+ </div>
152
+ </div>
153
+ </main>
154
+ </div>
155
+ </div>
156
+
157
+ <script>
158
+ // Initialize feather icons
159
+ feather.replace();
160
+ </script>
161
+ </body>
162
+ </html>