Hugging Face's logo

Spaces:
Hnxrec
/
resturant-space
Running

App Files Community
Hnxrec commited on
Commit
7b1a718
·
verified ·
1 Parent(s): fa71ee6

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +337 -180
  2. prompts.txt +3 -0
index.html CHANGED
@@ -3,29 +3,70 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Restro-fi Premium | Restaurant Ordering 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
- <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
  <style>
11
  body {
12
- font-family: 'Poppins', sans-serif;
13
- background-color: #f8fafc;
 
 
 
 
 
 
 
 
 
14
  }
15
 
16
  .menu-item-card {
17
- transition: all 0.3s ease;
18
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
 
19
  }
20
 
21
  .menu-item-card:hover {
22
  transform: translateY(-5px);
23
- box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
24
  }
25
 
26
  .category-btn.active {
27
- background: linear-gradient(135deg, #f59e0b, #ef4444);
28
- color: white;
 
29
  }
30
 
31
  .cart-item:hover .remove-btn {
@@ -43,26 +84,31 @@
43
 
44
  .order-status {
45
  transition: all 0.3s ease;
 
46
  }
47
 
48
  .order-status.pending {
49
- background-color: #fef3c7;
50
  color: #92400e;
 
51
  }
52
 
53
  .order-status.preparing {
54
- background-color: #bfdbfe;
55
  color: #1e40af;
 
56
  }
57
 
58
  .order-status.served {
59
- background-color: #d1fae5;
60
  color: #065f46;
 
61
  }
62
 
63
  .order-status.cancelled {
64
- background-color: #fee2e2;
65
  color: #991b1b;
 
66
  }
67
 
68
  .table-card {
@@ -74,11 +120,13 @@
74
  }
75
 
76
  .table-available {
77
- background: linear-gradient(135deg, #10b981, #3b82f6);
 
78
  }
79
 
80
  .table-occupied {
81
- background: linear-gradient(135deg, #ef4444, #f59e0b);
 
82
  }
83
 
84
  @keyframes fadeIn {
@@ -91,7 +139,7 @@
91
  }
92
 
93
  .floating-btn {
94
- box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
95
  }
96
 
97
  .notification {
@@ -106,15 +154,122 @@
106
  @keyframes fadeOut {
107
  to { opacity: 0; }
108
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
109
  </style>
110
  </head>
111
  <body class="bg-gray-50">
112
  <!-- Notification -->
113
  <div id="notification" class="notification fixed top-4 right-4 hidden z-50">
114
- <div class="bg-white rounded-lg shadow-lg p-4 flex items-start border-l-4 border-orange-500 max-w-sm">
115
  <div class="mr-3">
116
- <div class="h-8 w-8 rounded-full bg-orange-100 flex items-center justify-center">
117
- <i class="fas fa-check text-orange-500"></i>
118
  </div>
119
  </div>
120
  <div class="flex-1">
@@ -128,93 +283,95 @@
128
  </div>
129
 
130
  <!-- Header -->
131
- <header class="bg-white shadow-sm sticky top-0 z-30">
132
- <div class="container mx-auto px-6 py-3 flex justify-between items-center">
133
  <div class="flex items-center">
134
- <div class="h-10 w-10 rounded-full bg-gradient-to-r from-orange-500 to-red-500 flex items-center justify-center mr-3">
135
- <i class="fas fa-utensils text-white"></i>
136
  </div>
137
- <h1 class="text-xl font-bold text-gray-800">Restro<span class="text-orange-500">-fi</span> <span class="text-xs bg-orange-500 text-white px-2 py-0.5 rounded-full ml-1">Premium</span></h1>
 
 
 
138
  </div>
139
  <div class="flex items-center space-x-4">
140
- <div class="hidden md:flex space-x-2">
141
- <button id="customerBtn" class="px-4 py-2 bg-gradient-to-r from-orange-500 to-red-500 text-white rounded-lg hover:opacity-90 transition flex items-center">
142
  <i class="fas fa-user mr-2"></i> Customer View
143
  </button>
144
- <button id="adminBtn" class="px-4 py-2 bg-gradient-to-r from-gray-800 to-gray-700 text-white rounded-lg hover:opacity-90 transition flex items-center">
145
  <i class="fas fa-cog mr-2"></i> Admin View
146
  </button>
147
  </div>
148
  <div class="relative">
149
- <button id="cartIcon" class="relative p-2 rounded-full bg-gray-100 hover:bg-gray-200 transition">
150
- <i class="fas fa-shopping-cart text-gray-700"></i>
151
- <span id="cartCount" class="absolute -top-1 -right-1 bg-orange-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span>
152
  </button>
153
  </div>
154
  <div class="relative group">
155
  <div class="flex items-center space-x-2 cursor-pointer">
156
- <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User" class="w-8 h-8 rounded-full object-cover border-2 border-orange-500">
157
- <span class="hidden md:inline text-sm font-medium">Admin</span>
158
- <i class="fas fa-chevron-down text-xs text-gray-500"></i>
 
 
159
  </div>
160
- <div class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-xl py-1 z-10 hidden group-hover:block origin-top-right transform transition duration-100 ease-out">
161
- <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center">
162
- <i class="fas fa-user mr-2 text-gray-500"></i> Profile
163
  </a>
164
- <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center">
165
- <i class="fas fa-cog mr-2 text-gray-500"></i> Settings
166
  </a>
167
- <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center">
168
- <i class="fas fa-sign-out-alt mr-2 text-gray-500"></i> Logout
169
  </a>
170
  </div>
171
- </div>
172
- </div>
173
- </div>
174
  </header>
175
 
176
  <!-- Mobile View Toggle -->
177
  <div class="md:hidden fixed bottom-4 right-4 z-40">
178
- <div class="flex space-x-2">
179
- <button id="mobileCustomerBtn" class="floating-btn h-12 w-12 rounded-full bg-gradient-to-r from-orange-500 to-red-500 text-white flex items-center justify-center shadow-lg">
180
  <i class="fas fa-user"></i>
181
  </button>
182
- <button id="mobileAdminBtn" class="floating-btn h-12 w-12 rounded-full bg-gradient-to-r from-gray-800 to-gray-700 text-white flex items-center justify-center shadow-lg">
183
  <i class="fas fa-cog"></i>
184
  </button>
185
  </div>
186
  </div>
187
 
188
  <!-- Main Content - Customer View -->
189
- <main id="customerView" class="container mx-auto px-4 py-6">
190
  <!-- Table Selection -->
191
- <div class="bg-white rounded-xl shadow-sm p-6 mb-6 border border-gray-100">
192
- <h2 class="text-xl font-semibold mb-4 flex items-center">
193
- <i class="fas fa-chair mr-2 text-orange-500"></i> Select Your Table
194
  </h2>
195
  <div class="flex flex-wrap gap-3">
196
- <button class="table-btn px-4 py-2 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition flex items-center" data-table="1">
197
  <span class="h-2 w-2 rounded-full bg-green-500 mr-2"></span> Table 1
198
  </button>
199
- <button class="table-btn px-4 py-2 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition flex items-center" data-table="2">
200
  <span class="h-2 w-2 rounded-full bg-red-500 mr-2"></span> Table 2
201
  </button>
202
- <button class="table-btn px-4 py-2 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition flex items-center" data-table="3">
203
  <span class="h-2 w-2 rounded-full bg-green-500 mr-2"></span> Table 3
204
  </button>
205
- <button class="table-btn px-4 py-2 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition flex items-center" data-table="4">
206
  <span class="h-2 w-2 rounded-full bg-green-500 mr-2"></span> Table 4
207
  </button>
208
- <button class="table-btn px-4 py-2 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition flex items-center" data-table="5">
209
  <span class="h-2 w-2 rounded-full bg-green-500 mr-2"></span> Table 5
210
  </button>
211
- <button class="table-btn px-4 py-2 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition flex items-center" data-table="6">
212
  <span class="h-2 w-2 rounded-full bg-green-500 mr-2"></span> Table 6
213
  </button>
214
  </div>
215
- <div class="mt-4 pt-4 border-t border-gray-100">
216
  <p class="text-sm text-gray-600 mb-2">Or scan the QR code at your table</p>
217
- <button class="px-4 py-2 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-lg hover:opacity-90 transition flex items-center">
218
  <i class="fas fa-qrcode mr-2"></i> Scan QR Code
219
  </button>
220
  </div>
@@ -226,16 +383,16 @@
226
  <button class="category-btn px-4 py-2 rounded-lg whitespace-nowrap transition flex items-center active" data-category="all">
227
  <i class="fas fa-utensils mr-2"></i> All Items
228
  </button>
229
- <button class="category-btn px-4 py-2 bg-gray-100 text-gray-800 rounded-lg whitespace-nowrap hover:bg-gray-200 transition flex items-center" data-category="starters">
230
  <i class="fas fa-bread-slice mr-2"></i> Starters
231
  </button>
232
- <button class="category-btn px-4 py-2 bg-gray-100 text-gray-800 rounded-lg whitespace-nowrap hover:bg-gray-200 transition flex items-center" data-category="mains">
233
  <i class="fas fa-drumstick-bite mr-2"></i> Main Courses
234
  </button>
235
- <button class="category-btn px-4 py-2 bg-gray-100 text-gray-800 rounded-lg whitespace-nowrap hover:bg-gray-200 transition flex items-center" data-category="desserts">
236
  <i class="fas fa-ice-cream mr-2"></i> Desserts
237
  </button>
238
- <button class="category-btn px-4 py-2 bg-gray-100 text-gray-800 rounded-lg whitespace-nowrap hover:bg-gray-200 transition flex items-center" data-category="drinks">
239
  <i class="fas fa-glass-martini-alt mr-2"></i> Drinks
240
  </button>
241
  </div>
@@ -244,7 +401,7 @@
244
  <!-- Search -->
245
  <div class="mb-6 relative">
246
  <div class="relative">
247
- <input type="text" id="menuSearch" placeholder="Search menu items..." class="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent">
248
  <i class="fas fa-search absolute left-3 top-3.5 text-gray-400"></i>
249
  </div>
250
  </div>
@@ -256,80 +413,80 @@
256
  </main>
257
 
258
  <!-- Main Content - Admin View (Hidden by default) -->
259
- <main id="adminView" class="container mx-auto px-4 py-6 hidden">
260
  <!-- Admin Dashboard -->
261
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
262
- <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
263
  <div class="flex justify-between items-start">
264
  <div>
265
- <p class="text-gray-500">Total Orders</p>
266
- <h3 class="text-2xl font-bold">124</h3>
267
- <p class="text-sm text-green-500 flex items-center mt-1">
268
  <i class="fas fa-arrow-up mr-1"></i> 12% from yesterday
269
  </p>
270
  </div>
271
- <div class="bg-blue-100 p-3 rounded-full">
272
- <i class="fas fa-shopping-bag text-blue-500 text-xl"></i>
273
  </div>
274
  </div>
275
  </div>
276
- <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
277
  <div class="flex justify-between items-start">
278
  <div>
279
- <p class="text-gray-500">Pending Orders</p>
280
- <h3 class="text-2xl font-bold">8</h3>
281
- <p class="text-sm text-red-500 flex items-center mt-1">
282
  <i class="fas fa-arrow-down mr-1"></i> 2 from yesterday
283
  </p>
284
  </div>
285
- <div class="bg-orange-100 p-3 rounded-full">
286
- <i class="fas fa-clock text-orange-500 text-xl"></i>
287
  </div>
288
  </div>
289
  </div>
290
- <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
291
  <div class="flex justify-between items-start">
292
  <div>
293
- <p class="text-gray-500">Today's Revenue</p>
294
- <h3 class="text-2xl font-bold">$1,245</h3>
295
- <p class="text-sm text-green-500 flex items-center mt-1">
296
  <i class="fas fa-arrow-up mr-1"></i> $320 from yesterday
297
  </p>
298
  </div>
299
- <div class="bg-green-100 p-3 rounded-full">
300
- <i class="fas fa-dollar-sign text-green-500 text-xl"></i>
301
  </div>
302
  </div>
303
  </div>
304
- <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
305
  <div class="flex justify-between items-start">
306
  <div>
307
- <p class="text-gray-500">Active Tables</p>
308
- <h3 class="text-2xl font-bold">12/20</h3>
309
- <p class="text-sm text-gray-500 flex items-center mt-1">
310
  <i class="fas fa-info-circle mr-1"></i> 60% occupancy
311
  </p>
312
  </div>
313
- <div class="bg-purple-100 p-3 rounded-full">
314
- <i class="fas fa-chair text-purple-500 text-xl"></i>
315
  </div>
316
  </div>
317
  </div>
318
  </div>
319
 
320
  <!-- Admin Tabs -->
321
- <div class="bg-white rounded-xl shadow-sm mb-6 border border-gray-100">
322
  <div class="flex overflow-x-auto scrollbar-hide">
323
- <button class="admin-tab px-6 py-4 font-medium text-gray-600 hover:text-gray-800 border-b-2 border-transparent hover:border-orange-500 whitespace-nowrap flex items-center active" data-tab="orders">
324
  <i class="fas fa-clipboard-list mr-2"></i> Orders
325
  </button>
326
- <button class="admin-tab px-6 py-4 font-medium text-gray-600 hover:text-gray-800 border-b-2 border-transparent hover:border-orange-500 whitespace-nowrap flex items-center" data-tab="menu">
327
  <i class="fas fa-utensils mr-2"></i> Menu
328
  </button>
329
- <button class="admin-tab px-6 py-4 font-medium text-gray-600 hover:text-gray-800 border-b-2 border-transparent hover:border-orange-500 whitespace-nowrap flex items-center" data-tab="categories">
330
  <i class="fas fa-tags mr-2"></i> Categories
331
  </button>
332
- <button class="admin-tab px-6 py-4 font-medium text-gray-600 hover:text-gray-800 border-b-2 border-transparent hover:border-orange-500 whitespace-nowrap flex items-center" data-tab="tables">
333
  <i class="fas fa-chair mr-2"></i> Tables
334
  </button>
335
  </div>
@@ -337,17 +494,17 @@
337
 
338
  <!-- Orders Tab Content -->
339
  <div id="ordersTab" class="tab-content active">
340
- <div class="bg-white rounded-xl shadow-sm overflow-hidden border border-gray-100">
341
  <div class="overflow-x-auto">
342
  <table class="min-w-full divide-y divide-gray-200">
343
- <thead class="bg-gray-50">
344
  <tr>
345
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Order ID</th>
346
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Table</th>
347
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Items</th>
348
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total</th>
349
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
350
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
351
  </tr>
352
  </thead>
353
  <tbody class="bg-white divide-y divide-gray-200">
@@ -360,23 +517,23 @@
360
 
361
  <!-- Menu Tab Content -->
362
  <div id="menuTab" class="tab-content">
363
- <div class="bg-white rounded-xl shadow-sm p-6 mb-6 border border-gray-100">
364
  <div class="flex justify-between items-center mb-4">
365
- <h2 class="text-xl font-semibold flex items-center">
366
- <i class="fas fa-utensils mr-2 text-orange-500"></i> Menu Items
367
  </h2>
368
- <button class="px-4 py-2 bg-gradient-to-r from-orange-500 to-red-500 text-white rounded-lg hover:opacity-90 transition flex items-center" id="addMenuItemBtn">
369
  <i class="fas fa-plus mr-2"></i> Add Item
370
  </button>
371
  </div>
372
  <div class="overflow-x-auto">
373
  <table class="min-w-full divide-y divide-gray-200">
374
- <thead class="bg-gray-50">
375
  <tr>
376
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
377
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th>
378
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Price</th>
379
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
380
  </tr>
381
  </thead>
382
  <tbody class="bg-white divide-y divide-gray-200" id="adminMenuItems">
@@ -389,22 +546,22 @@
389
 
390
  <!-- Categories Tab Content -->
391
  <div id="categoriesTab" class="tab-content">
392
- <div class="bg-white rounded-xl shadow-sm p-6 mb-6 border border-gray-100">
393
  <div class="flex justify-between items-center mb-4">
394
- <h2 class="text-xl font-semibold flex items-center">
395
- <i class="fas fa-tags mr-2 text-orange-500"></i> Menu Categories
396
  </h2>
397
- <button class="px-4 py-2 bg-gradient-to-r from-orange-500 to-red-500 text-white rounded-lg hover:opacity-90 transition flex items-center" id="addCategoryBtn">
398
  <i class="fas fa-plus mr-2"></i> Add Category
399
  </button>
400
  </div>
401
  <div class="overflow-x-auto">
402
  <table class="min-w-full divide-y divide-gray-200">
403
- <thead class="bg-gray-50">
404
  <tr>
405
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
406
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Items</th>
407
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
408
  </tr>
409
  </thead>
410
  <tbody class="bg-white divide-y divide-gray-200" id="adminCategories">
@@ -417,12 +574,12 @@
417
 
418
  <!-- Tables Tab Content -->
419
  <div id="tablesTab" class="tab-content">
420
- <div class="bg-white rounded-xl shadow-sm p-6 mb-6 border border-gray-100">
421
  <div class="flex justify-between items-center mb-4">
422
- <h2 class="text-xl font-semibold flex items-center">
423
- <i class="fas fa-chair mr-2 text-orange-500"></i> Restaurant Tables
424
  </h2>
425
- <button class="px-4 py-2 bg-gradient-to-r from-orange-500 to-red-500 text-white rounded-lg hover:opacity-90 transition flex items-center" id="addTableBtn">
426
  <i class="fas fa-plus mr-2"></i> Add Table
427
  </button>
428
  </div>
@@ -434,22 +591,22 @@
434
  </main>
435
 
436
  <!-- Shopping Cart Sidebar -->
437
- <div id="cartSidebar" class="fixed inset-y-0 right-0 w-full md:w-96 bg-white shadow-xl transform translate-x-full transition-transform duration-300 ease-in-out z-50">
438
  <div class="flex flex-col h-full">
439
- <div class="flex justify-between items-center p-4 border-b border-gray-100">
440
- <h2 class="text-xl font-semibold flex items-center">
441
- <i class="fas fa-shopping-cart mr-2 text-orange-500"></i> Your Order
442
  </h2>
443
  <button id="closeCartBtn" class="text-gray-500 hover:text-gray-700 p-1 rounded-full hover:bg-gray-100">
444
  <i class="fas fa-times"></i>
445
  </button>
446
  </div>
447
- <div class="p-4 border-b border-gray-100">
448
  <div class="flex justify-between items-center">
449
  <span class="font-medium flex items-center">
450
- <i class="fas fa-chair mr-2 text-gray-500"></i> Table:
451
  </span>
452
- <span id="selectedTableDisplay" class="font-semibold text-orange-500">Not selected</span>
453
  </div>
454
  </div>
455
  <div class="flex-1 overflow-y-auto p-4" id="cartItems">
@@ -469,13 +626,13 @@
469
  <span class="text-gray-600">Tax (10%):</span>
470
  <span id="cartTax" class="font-medium">$0.00</span>
471
  </div>
472
- <div class="flex justify-between font-bold text-lg border-t border-gray-100 pt-3">
473
  <span>Total:</span>
474
- <span id="cartTotal" class="text-orange-500">$0.00</span>
475
  </div>
476
- <button id="placeOrderBtn" class="w-full mt-4 px-4 py-3 bg-gradient-to-r from-orange-500 to-red-500 text-white rounded-lg hover:opacity-90 transition disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center" disabled>
477
  <i class="fas fa-paper-plane mr-2"></i> Place Order
478
- </button>
479
  </div>
480
  </div>
481
  </div>
@@ -483,10 +640,10 @@
483
 
484
  <!-- Add Menu Item Modal -->
485
  <div id="addMenuItemModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
486
- <div class="bg-white rounded-xl shadow-xl w-full max-w-md mx-4">
487
- <div class="flex justify-between items-center p-4 border-b border-gray-100">
488
- <h3 class="text-lg font-semibold flex items-center">
489
- <i class="fas fa-plus-circle mr-2 text-orange-500"></i> Add Menu Item
490
  </h3>
491
  <button id="closeMenuItemModal" class="text-gray-500 hover:text-gray-700 p-1 rounded-full hover:bg-gray-100">
492
  <i class="fas fa-times"></i>
@@ -496,22 +653,22 @@
496
  <form id="menuItemForm">
497
  <div class="mb-4">
498
  <label class="block text-gray-700 mb-2 font-medium" for="itemName">Name</label>
499
- <input type="text" id="itemName" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent" required>
500
  </div>
501
  <div class="mb-4">
502
  <label class="block text-gray-700 mb-2 font-medium" for="itemDescription">Description</label>
503
- <textarea id="itemDescription" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent"></textarea>
504
  </div>
505
  <div class="mb-4">
506
  <label class="block text-gray-700 mb-2 font-medium" for="itemPrice">Price</label>
507
  <div class="relative">
508
  <span class="absolute left-3 top-2.5 text-gray-500">$</span>
509
- <input type="number" id="itemPrice" min="0" step="0.01" class="w-full pl-8 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent" required>
510
  </div>
511
  </div>
512
  <div class="mb-4">
513
- <label class="block text-gray-700 mb-2 font-medium" for="itemCategory">Category</label>
514
- <select id="itemCategory" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent" required>
515
  <option value="">Select a category</option>
516
  <option value="starters">Starters</option>
517
  <option value="mains">Main Courses</option>
@@ -522,7 +679,7 @@
522
  <div class="mb-4">
523
  <label class="block text-gray-700 mb-2 font-medium" for="itemImage">Image</label>
524
  <div class="flex items-center justify-center w-full">
525
- <label for="itemImage" class="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100">
526
  <div class="flex flex-col items-center justify-center pt-5 pb-6">
527
  <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i>
528
  <p class="mb-2 text-sm text-gray-500">Click to upload</p>
@@ -533,8 +690,8 @@
533
  </div>
534
  </div>
535
  <div class="flex justify-end space-x-3">
536
- <button type="button" id="cancelMenuItem" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-100 transition">Cancel</button>
537
- <button type="submit" class="px-4 py-2 bg-gradient-to-r from-orange-500 to-red-500 text-white rounded-lg hover:opacity-90 transition">Save Item</button>
538
  </div>
539
  </form>
540
  </div>
@@ -643,19 +800,19 @@
643
  customerBtn.addEventListener('click', () => {
644
  customerView.classList.remove('hidden');
645
  adminView.classList.add('hidden');
646
- customerBtn.classList.add('from-orange-500', 'to-red-500');
647
- customerBtn.classList.remove('bg-gray-200', 'text-gray-800');
648
- adminBtn.classList.add('from-gray-800', 'to-gray-700');
649
- adminBtn.classList.remove('bg-gray-200', 'text-gray-800');
650
  });
651
 
652
  adminBtn.addEventListener('click', () => {
653
  customerView.classList.add('hidden');
654
  adminView.classList.remove('hidden');
655
- adminBtn.classList.add('from-gray-800', 'to-gray-700');
656
- adminBtn.classList.remove('bg-gray-200', 'text-gray-800');
657
- customerBtn.classList.add('bg-gray-200', 'text-gray-800');
658
- customerBtn.classList.remove('from-orange-500', 'to-red-500');
659
  });
660
 
661
  // Mobile view toggle
@@ -683,11 +840,11 @@
683
 
684
  // Update active table button
685
  tableBtns.forEach(b => {
686
- b.classList.remove('bg-orange-500', 'text-white');
687
- b.classList.add('bg-gray-50', 'border', 'border-gray-200');
688
  });
689
- btn.classList.add('bg-orange-500', 'text-white');
690
- btn.classList.remove('bg-gray-50', 'border', 'border-gray-200');
691
  });
692
  });
693
 
@@ -722,9 +879,9 @@
722
 
723
  // Update active tab
724
  adminTabs.forEach(t => {
725
- t.classList.remove('border-orange-500', 'text-orange-600');
726
  });
727
- tab.classList.add('border-orange-500', 'text-orange-600');
728
 
729
  // Show corresponding content
730
  tabContents.forEach(content => {
@@ -800,14 +957,14 @@
800
  const quantity = cartItem ? cartItem.quantity : 0;
801
 
802
  const itemElement = document.createElement('div');
803
- itemElement.className = 'menu-item-card bg-white rounded-xl shadow-sm overflow-hidden border border-gray-100';
804
  itemElement.innerHTML = `
805
  <div class="h-48 overflow-hidden relative">
806
- <img src="${item.image}" alt="${item.name}" class="w-full h-full object-cover">
807
  <div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div>
808
  <div class="absolute bottom-0 left-0 p-4">
809
  <h3 class="font-semibold text-white text-lg">${item.name}</h3>
810
- <span class="font-bold text-orange-300">$${item.price.toFixed(2)}</span>
811
  </div>
812
  </div>
813
  <div class="p-4">
@@ -822,7 +979,7 @@
822
  <i class="fas fa-plus text-xs"></i>
823
  </button>
824
  </div>
825
- <button class="add-to-cart-btn px-3 py-1 bg-gradient-to-r from-orange-500 to-red-500 text-white rounded-lg hover:opacity-90 transition flex items-center" data-id="${item.id}">
826
  <i class="fas fa-cart-plus mr-1 text-xs"></i> Add
827
  </button>
828
  </div>
@@ -856,7 +1013,7 @@
856
 
857
  menuItems.forEach(item => {
858
  const itemElement = document.createElement('tr');
859
- itemElement.className = 'hover:bg-gray-50';
860
  itemElement.innerHTML = `
861
  <td class="px-6 py-4 whitespace-nowrap">
862
  <div class="flex items-center">
@@ -870,16 +1027,16 @@
870
  </div>
871
  </td>
872
  <td class="px-6 py-4 whitespace-nowrap">
873
- <span class="px-2 py-1 text-xs font-medium rounded-full bg-gray-100 text-gray-800 capitalize">${item.category}</span>
874
  </td>
875
  <td class="px-6 py-4 whitespace-nowrap">
876
  <div class="text-sm font-medium text-gray-900">$${item.price.toFixed(2)}</div>
877
  </td>
878
  <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
879
- <button class="text-orange-600 hover:text-orange-900 mr-3 edit-item-btn" data-id="${item.id}">
880
  <i class="fas fa-edit"></i>
881
  </button>
882
- <button class="text-red-600 hover:text-red-900 delete-item-btn" data-id="${item.id}">
883
  <i class="fas fa-trash"></i>
884
  </button>
885
  </td>
@@ -895,7 +1052,7 @@
895
 
896
  categories.forEach(category => {
897
  const categoryElement = document.createElement('tr');
898
- categoryElement.className = 'hover:bg-gray-50';
899
  categoryElement.innerHTML = `
900
  <td class="px-6 py-4 whitespace-nowrap">
901
  <div class="text-sm font-medium text-gray-900 capitalize">${category.slug}</div>
@@ -904,10 +1061,10 @@
904
  <div class="text-sm text-gray-900">${category.itemCount} items</div>
905
  </td>
906
  <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
907
- <button class="text-orange-600 hover:text-orange-900 mr-3 edit-category-btn" data-id="${category.id}">
908
  <i class="fas fa-edit"></i>
909
  </button>
910
- <button class="text-red-600 hover:text-red-900 delete-category-btn" data-id="${category.id}">
911
  <i class="fas fa-trash"></i>
912
  </button>
913
  </td>
@@ -924,7 +1081,7 @@
924
 
925
  orders.forEach(order => {
926
  const orderElement = document.createElement('tr');
927
- orderElement.className = 'hover:bg-gray-50';
928
  orderElement.innerHTML = `
929
  <td class="px-6 py-4 whitespace-nowrap">
930
  <div class="text-sm font-medium text-gray-900">#${order.id}</div>
@@ -947,7 +1104,7 @@
947
  </span>
948
  </td>
949
  <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
950
- <select class="status-select border border-gray-300 rounded-lg px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-orange-500" data-order-id="${order.id}">
951
  <option value="pending" ${order.status === 'pending' ? 'selected' : ''}>Pending</option>
952
  <option value="preparing" ${order.status === 'preparing' ? 'selected' : ''}>Preparing</option>
953
  <option value="served" ${order.status === 'served' ? 'selected' : ''}>Served</option>
@@ -975,7 +1132,7 @@
975
 
976
  tables.forEach(table => {
977
  const tableElement = document.createElement('div');
978
- tableElement.className = 'table-card bg-white rounded-xl shadow-sm overflow-hidden border border-gray-100';
979
  tableElement.innerHTML = `
980
  <div class="p-4">
981
  <div class="flex justify-between items-start mb-2">
@@ -985,8 +1142,8 @@
985
  </span>
986
  </div>
987
  <div class="mb-4">
988
- <div class="w-full h-32 bg-gray-100 rounded-lg flex items-center justify-center">
989
- <i class="fas fa-qrcode text-4xl text-gray-400"></i>
990
  </div>
991
  </div>
992
  <div class="flex justify-between items-center">
@@ -994,10 +1151,10 @@
994
  <i class="fas fa-download mr-1"></i> QR Code
995
  </button>
996
  <div class="flex space-x-2">
997
- <button class="edit-table-btn text-xs text-orange-500 hover:text-orange-700 flex items-center" data-id="${table.id}">
998
  <i class="fas fa-edit mr-1"></i> Edit
999
  </button>
1000
- <button class="delete-table-btn text-xs text-red-500 hover:text-red-700 flex items-center" data-id="${table.id}">
1001
  <i class="fas fa-trash mr-1"></i> Delete
1002
  </button>
1003
  </div>
@@ -1068,7 +1225,7 @@
1068
 
1069
  cart.forEach(item => {
1070
  const itemElement = document.createElement('div');
1071
- itemElement.className = 'cart-item flex justify-between items-center mb-4 pb-4 border-b border-gray-100';
1072
  itemElement.innerHTML = `
1073
  <div>
1074
  <h4 class="font-medium">${item.name}</h4>
@@ -1162,8 +1319,8 @@
1162
 
1163
  // Reset table buttons
1164
  tableBtns.forEach(btn => {
1165
- btn.classList.remove('bg-orange-500', 'text-white');
1166
- btn.classList.add('bg-gray-50', 'border', 'border-gray-200');
1167
  });
1168
 
1169
  // Show success message
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Restro-fi Premium | Luxury Restaurant Ordering</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
+ <script>
9
+ tailwind.config = {
10
+ theme: {
11
+ extend: {
12
+ colors: {
13
+ gold: {
14
+ 100: '#faf3e0',
15
+ 200: '#f5e7c3',
16
+ 300: '#f0dba6',
17
+ 400: '#ebcf89',
18
+ 500: '#e6c36c',
19
+ 600: '#e1b74f',
20
+ 700: '#d4a746',
21
+ 800: '#c79a3d',
22
+ 900: '#ba8d34',
23
+ },
24
+ premium: {
25
+ black: '#1a1a1a',
26
+ dark: '#2d2d2d',
27
+ light: '#3d3d3d',
28
+ }
29
+ },
30
+ fontFamily: {
31
+ sans: ['"Playfair Display"', 'serif'],
32
+ body: ['"Montserrat"', 'sans-serif'],
33
+ },
34
+ }
35
+ }
36
+ }
37
+ </script>
38
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
39
+ <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">
40
  <style>
41
  body {
42
+ font-family: 'Montserrat', sans-serif;
43
+ background-color: #f8f8f8;
44
+ color: #333;
45
+ }
46
+
47
+ .premium-bg {
48
+ background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
49
+ }
50
+
51
+ .gold-gradient {
52
+ background: linear-gradient(135deg, #e6c36c 0%, #d4a746 100%);
53
  }
54
 
55
  .menu-item-card {
56
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
57
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
58
+ border: 1px solid rgba(0, 0, 0, 0.05);
59
  }
60
 
61
  .menu-item-card:hover {
62
  transform: translateY(-5px);
63
+ box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
64
  }
65
 
66
  .category-btn.active {
67
+ background-color: #e6c36c;
68
+ color: #1a1a1a;
69
+ border-color: #e6c36c;
70
  }
71
 
72
  .cart-item:hover .remove-btn {
 
84
 
85
  .order-status {
86
  transition: all 0.3s ease;
87
+ letter-spacing: 0.5px;
88
  }
89
 
90
  .order-status.pending {
91
+ background-color: rgba(252, 211, 77, 0.1);
92
  color: #92400e;
93
+ border: 1px solid rgba(252, 211, 77, 0.3);
94
  }
95
 
96
  .order-status.preparing {
97
+ background-color: rgba(147, 197, 253, 0.1);
98
  color: #1e40af;
99
+ border: 1px solid rgba(147, 197, 253, 0.3);
100
  }
101
 
102
  .order-status.served {
103
+ background-color: rgba(110, 231, 183, 0.1);
104
  color: #065f46;
105
+ border: 1px solid rgba(110, 231, 183, 0.3);
106
  }
107
 
108
  .order-status.cancelled {
109
+ background-color: rgba(252, 165, 165, 0.1);
110
  color: #991b1b;
111
+ border: 1px solid rgba(252, 165, 165, 0.3);
112
  }
113
 
114
  .table-card {
 
120
  }
121
 
122
  .table-available {
123
+ background: linear-gradient(135deg, #f8f8f8, #fff);
124
+ border: 1px solid rgba(0, 0, 0, 0.05);
125
  }
126
 
127
  .table-occupied {
128
+ background: linear-gradient(135deg, #f8f8f8, #fff);
129
+ border: 1px solid rgba(0, 0, 0, 0.05);
130
  }
131
 
132
  @keyframes fadeIn {
 
139
  }
140
 
141
  .floating-btn {
142
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
143
  }
144
 
145
  .notification {
 
154
  @keyframes fadeOut {
155
  to { opacity: 0; }
156
  }
157
+
158
+ /* Premium button styles */
159
+ .btn-primary {
160
+ background-color: #1a1a1a;
161
+ color: #e6c36c;
162
+ border: 1px solid #1a1a1a;
163
+ transition: all 0.3s ease;
164
+ letter-spacing: 0.5px;
165
+ font-weight: 600;
166
+ }
167
+
168
+ .btn-primary:hover {
169
+ background-color: #2d2d2d;
170
+ transform: translateY(-2px);
171
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
172
+ }
173
+
174
+ .btn-secondary {
175
+ background-color: #e6c36c;
176
+ color: #1a1a1a;
177
+ border: 1px solid #e6c36c;
178
+ transition: all 0.3s ease;
179
+ letter-spacing: 0.5px;
180
+ font-weight: 600;
181
+ }
182
+
183
+ .btn-secondary:hover {
184
+ background-color: #d4a746;
185
+ transform: translateY(-2px);
186
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
187
+ }
188
+
189
+ .btn-outline {
190
+ background-color: transparent;
191
+ color: #1a1a1a;
192
+ border: 1px solid rgba(0, 0, 0, 0.2);
193
+ transition: all 0.3s ease;
194
+ letter-spacing: 0.5px;
195
+ font-weight: 500;
196
+ }
197
+
198
+ .btn-outline:hover {
199
+ background-color: rgba(0, 0, 0, 0.02);
200
+ border-color: rgba(0, 0, 0, 0.3);
201
+ transform: translateY(-2px);
202
+ }
203
+
204
+ /* Custom scrollbar */
205
+ ::-webkit-scrollbar {
206
+ width: 6px;
207
+ height: 6px;
208
+ }
209
+
210
+ ::-webkit-scrollbar-track {
211
+ background: rgba(0, 0, 0, 0.05);
212
+ }
213
+
214
+ ::-webkit-scrollbar-thumb {
215
+ background: rgba(0, 0, 0, 0.2);
216
+ border-radius: 3px;
217
+ }
218
+
219
+ ::-webkit-scrollbar-thumb:hover {
220
+ background: rgba(0, 0, 0, 0.3);
221
+ }
222
+
223
+ /* Input styles */
224
+ .input-field {
225
+ border: 1px solid rgba(0, 0, 0, 0.1);
226
+ transition: all 0.3s ease;
227
+ }
228
+
229
+ .input-field:focus {
230
+ border-color: #e6c36c;
231
+ box-shadow: 0 0 0 3px rgba(230, 195, 108, 0.1);
232
+ }
233
+
234
+ /* Table styles */
235
+ .table-row:hover {
236
+ background-color: rgba(230, 195, 108, 0.05) !important;
237
+ }
238
+
239
+ /* Premium border */
240
+ .premium-border {
241
+ border: 1px solid rgba(230, 195, 108, 0.3);
242
+ }
243
+
244
+ /* Gold text */
245
+ .gold-text {
246
+ color: #e6c36c;
247
+ }
248
+
249
+ /* Header shadow */
250
+ .header-shadow {
251
+ box-shadow: 0 4px 30px rgba(230, 195, 108, 0.1);
252
+ }
253
+
254
+ /* Card hover effect */
255
+ .card-hover:hover {
256
+ transform: translateY(-5px);
257
+ box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
258
+ }
259
+
260
+ /* Gold divider */
261
+ .gold-divider {
262
+ border-bottom: 1px solid rgba(230, 195, 108, 0.3);
263
+ }
264
  </style>
265
  </head>
266
  <body class="bg-gray-50">
267
  <!-- Notification -->
268
  <div id="notification" class="notification fixed top-4 right-4 hidden z-50">
269
+ <div class="bg-white rounded-lg shadow-xl p-4 flex items-start border-l-4 border-gold-600 max-w-sm">
270
  <div class="mr-3">
271
+ <div class="h-8 w-8 rounded-full bg-gold-100 flex items-center justify-center">
272
+ <i class="fas fa-check text-gold-600"></i>
273
  </div>
274
  </div>
275
  <div class="flex-1">
 
283
  </div>
284
 
285
  <!-- Header -->
286
+ <header class="premium-bg text-white sticky top-0 z-30 header-shadow">
287
+ <div class="container mx-auto px-6 py-4 flex justify-between items-center">
288
  <div class="flex items-center">
289
+ <div class="h-10 w-10 rounded-full gold-gradient flex items-center justify-center mr-3">
290
+ <i class="fas fa-utensils text-premium-black"></i>
291
  </div>
292
+ <h1 class="text-xl font-bold tracking-tight font-sans">
293
+ <span class="gold-text">RESTRO</span><span class="text-white">FI</span>
294
+ <span class="text-xs bg-gold-600 text-premium-black px-2 py-0.5 rounded-full ml-1 font-normal">PREMIUM</span>
295
+ </h1>
296
  </div>
297
  <div class="flex items-center space-x-4">
298
+ <div class="hidden md:flex space-x-3">
299
+ <button id="customerBtn" class="px-4 py-2 btn-secondary rounded-lg flex items-center">
300
  <i class="fas fa-user mr-2"></i> Customer View
301
  </button>
302
+ <button id="adminBtn" class="px-4 py-2 btn-primary rounded-lg flex items-center">
303
  <i class="fas fa-cog mr-2"></i> Admin View
304
  </button>
305
  </div>
306
  <div class="relative">
307
+ <button id="cartIcon" class="relative p-2 rounded-full bg-gold-600 hover:bg-gold-700 transition">
308
+ <i class="fas fa-shopping-cart text-premium-black"></i>
309
+ <span id="cartCount" class="absolute -top-1 -right-1 bg-premium-black text-gold-600 text-xs rounded-full h-5 w-5 flex items-center justify-center font-bold">0</span>
310
  </button>
311
  </div>
312
  <div class="relative group">
313
  <div class="flex items-center space-x-2 cursor-pointer">
314
+ <div class="h-8 w-8 rounded-full gold-gradient flex items-center justify-center">
315
+ <i class="fas fa-user text-premium-black"></i>
316
+ </div>
317
+ <span class="hidden md:inline text-sm font-medium text-white">Admin</span>
318
+ <i class="fas fa-chevron-down text-xs text-gold-400"></i>
319
  </div>
320
+ <div class="absolute right-0 mt-2 w-48 bg-premium-black rounded-lg shadow-xl py-1 z-10 hidden group-hover:block origin-top-right transform transition duration-100 ease-out premium-border">
321
+ <a href="#" class="block px-4 py-2 text-sm text-white hover:bg-premium-dark flex items-center">
322
+ <i class="fas fa-user mr-2 text-gold-400"></i> Profile
323
  </a>
324
+ <a href="#" class="block px-4 py-2 text-sm text-white hover:bg-premium-dark flex items-center">
325
+ <i class="fas fa-cog mr-2 text-gold-400"></i> Settings
326
  </a>
327
+ <a href="#" class="block px-4 py-2 text-sm text-white hover:bg-premium-dark flex items-center">
328
+ <i class="fas fa-sign-out-alt mr-2 text-gold-400"></i> Logout
329
  </a>
330
  </div>
 
 
 
331
  </header>
332
 
333
  <!-- Mobile View Toggle -->
334
  <div class="md:hidden fixed bottom-4 right-4 z-40">
335
+ <div class="flex space-x-3">
336
+ <button id="mobileCustomerBtn" class="floating-btn h-12 w-12 rounded-full gold-gradient text-premium-black flex items-center justify-center shadow-lg">
337
  <i class="fas fa-user"></i>
338
  </button>
339
+ <button id="mobileAdminBtn" class="floating-btn h-12 w-12 rounded-full bg-premium-black text-gold-600 flex items-center justify-center shadow-lg premium-border">
340
  <i class="fas fa-cog"></i>
341
  </button>
342
  </div>
343
  </div>
344
 
345
  <!-- Main Content - Customer View -->
346
+ <main id="customerView" class="container mx-auto px-4 py-8">
347
  <!-- Table Selection -->
348
+ <div class="bg-white rounded-xl shadow-sm p-6 mb-8 premium-border">
349
+ <h2 class="text-xl font-semibold mb-4 flex items-center gold-text">
350
+ <i class="fas fa-chair mr-2"></i> Select Your Table
351
  </h2>
352
  <div class="flex flex-wrap gap-3">
353
+ <button class="table-btn px-4 py-2 btn-outline rounded-lg flex items-center hover:bg-gold-50" data-table="1">
354
  <span class="h-2 w-2 rounded-full bg-green-500 mr-2"></span> Table 1
355
  </button>
356
+ <button class="table-btn px-4 py-2 btn-outline rounded-lg flex items-center hover:bg-gold-50" data-table="2">
357
  <span class="h-2 w-2 rounded-full bg-red-500 mr-2"></span> Table 2
358
  </button>
359
+ <button class="table-btn px-4 py-2 btn-outline rounded-lg flex items-center hover:bg-gold-50" data-table="3">
360
  <span class="h-2 w-2 rounded-full bg-green-500 mr-2"></span> Table 3
361
  </button>
362
+ <button class="table-btn px-4 py-2 btn-outline rounded-lg flex items-center hover:bg-gold-50" data-table="4">
363
  <span class="h-2 w-2 rounded-full bg-green-500 mr-2"></span> Table 4
364
  </button>
365
+ <button class="table-btn px-4 py-2 btn-outline rounded-lg flex items-center hover:bg-gold-50" data-table="5">
366
  <span class="h-2 w-2 rounded-full bg-green-500 mr-2"></span> Table 5
367
  </button>
368
+ <button class="table-btn px-4 py-2 btn-outline rounded-lg flex items-center hover:bg-gold-50" data-table="6">
369
  <span class="h-2 w-2 rounded-full bg-green-500 mr-2"></span> Table 6
370
  </button>
371
  </div>
372
+ <div class="mt-4 pt-4 gold-divider">
373
  <p class="text-sm text-gray-600 mb-2">Or scan the QR code at your table</p>
374
+ <button class="px-4 py-2 btn-secondary rounded-lg flex items-center">
375
  <i class="fas fa-qrcode mr-2"></i> Scan QR Code
376
  </button>
377
  </div>
 
383
  <button class="category-btn px-4 py-2 rounded-lg whitespace-nowrap transition flex items-center active" data-category="all">
384
  <i class="fas fa-utensils mr-2"></i> All Items
385
  </button>
386
+ <button class="category-btn px-4 py-2 btn-outline rounded-lg whitespace-nowrap flex items-center hover:bg-gold-50" data-category="starters">
387
  <i class="fas fa-bread-slice mr-2"></i> Starters
388
  </button>
389
+ <button class="category-btn px-4 py-2 btn-outline rounded-lg whitespace-nowrap flex items-center hover:bg-gold-50" data-category="mains">
390
  <i class="fas fa-drumstick-bite mr-2"></i> Main Courses
391
  </button>
392
+ <button class="category-btn px-4 py-2 btn-outline rounded-lg whitespace-nowrap flex items-center hover:bg-gold-50" data-category="desserts">
393
  <i class="fas fa-ice-cream mr-2"></i> Desserts
394
  </button>
395
+ <button class="category-btn px-4 py-2 btn-outline rounded-lg whitespace-nowrap flex items-center hover:bg-gold-50" data-category="drinks">
396
  <i class="fas fa-glass-martini-alt mr-2"></i> Drinks
397
  </button>
398
  </div>
 
401
  <!-- Search -->
402
  <div class="mb-6 relative">
403
  <div class="relative">
404
+ <input type="text" id="menuSearch" placeholder="Search menu items..." class="w-full pl-10 pr-4 py-3 input-field rounded-lg focus:outline-none">
405
  <i class="fas fa-search absolute left-3 top-3.5 text-gray-400"></i>
406
  </div>
407
  </div>
 
413
  </main>
414
 
415
  <!-- Main Content - Admin View (Hidden by default) -->
416
+ <main id="adminView" class="container mx-auto px-4 py-8 hidden">
417
  <!-- Admin Dashboard -->
418
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
419
+ <div class="bg-white rounded-xl shadow-sm p-6 premium-border card-hover">
420
  <div class="flex justify-between items-start">
421
  <div>
422
+ <p class="text-gray-500 text-sm uppercase tracking-wider">Total Orders</p>
423
+ <h3 class="text-2xl font-bold mt-1 gold-text">124</h3>
424
+ <p class="text-sm text-green-500 flex items-center mt-2">
425
  <i class="fas fa-arrow-up mr-1"></i> 12% from yesterday
426
  </p>
427
  </div>
428
+ <div class="bg-gold-100 p-3 rounded-full">
429
+ <i class="fas fa-shopping-bag text-gold-600 text-xl"></i>
430
  </div>
431
  </div>
432
  </div>
433
+ <div class="bg-white rounded-xl shadow-sm p-6 premium-border card-hover">
434
  <div class="flex justify-between items-start">
435
  <div>
436
+ <p class="text-gray-500 text-sm uppercase tracking-wider">Pending Orders</p>
437
+ <h3 class="text-2xl font-bold mt-1 gold-text">8</h3>
438
+ <p class="text-sm text-red-500 flex items-center mt-2">
439
  <i class="fas fa-arrow-down mr-1"></i> 2 from yesterday
440
  </p>
441
  </div>
442
+ <div class="bg-gold-100 p-3 rounded-full">
443
+ <i class="fas fa-clock text-gold-600 text-xl"></i>
444
  </div>
445
  </div>
446
  </div>
447
+ <div class="bg-white rounded-xl shadow-sm p-6 premium-border card-hover">
448
  <div class="flex justify-between items-start">
449
  <div>
450
+ <p class="text-gray-500 text-sm uppercase tracking-wider">Today's Revenue</p>
451
+ <h3 class="text-2xl font-bold mt-1 gold-text">$1,245</h3>
452
+ <p class="text-sm text-green-500 flex items-center mt-2">
453
  <i class="fas fa-arrow-up mr-1"></i> $320 from yesterday
454
  </p>
455
  </div>
456
+ <div class="bg-gold-100 p-3 rounded-full">
457
+ <i class="fas fa-dollar-sign text-gold-600 text-xl"></i>
458
  </div>
459
  </div>
460
  </div>
461
+ <div class="bg-white rounded-xl shadow-sm p-6 premium-border card-hover">
462
  <div class="flex justify-between items-start">
463
  <div>
464
+ <p class="text-gray-500 text-sm uppercase tracking-wider">Active Tables</p>
465
+ <h3 class="text-2xl font-bold mt-1 gold-text">12/20</h3>
466
+ <p class="text-sm text-gray-500 flex items-center mt-2">
467
  <i class="fas fa-info-circle mr-1"></i> 60% occupancy
468
  </p>
469
  </div>
470
+ <div class="bg-gold-100 p-3 rounded-full">
471
+ <i class="fas fa-chair text-gold-600 text-xl"></i>
472
  </div>
473
  </div>
474
  </div>
475
  </div>
476
 
477
  <!-- Admin Tabs -->
478
+ <div class="bg-white rounded-xl shadow-sm mb-6 premium-border">
479
  <div class="flex overflow-x-auto scrollbar-hide">
480
+ <button class="admin-tab px-6 py-4 font-medium text-gray-600 hover:text-gray-900 border-b-2 border-transparent hover:border-gold-600 whitespace-nowrap flex items-center active" data-tab="orders">
481
  <i class="fas fa-clipboard-list mr-2"></i> Orders
482
  </button>
483
+ <button class="admin-tab px-6 py-4 font-medium text-gray-600 hover:text-gray-900 border-b-2 border-transparent hover:border-gold-600 whitespace-nowrap flex items-center" data-tab="menu">
484
  <i class="fas fa-utensils mr-2"></i> Menu
485
  </button>
486
+ <button class="admin-tab px-6 py-4 font-medium text-gray-600 hover:text-gray-900 border-b-2 border-transparent hover:border-gold-600 whitespace-nowrap flex items-center" data-tab="categories">
487
  <i class="fas fa-tags mr-2"></i> Categories
488
  </button>
489
+ <button class="admin-tab px-6 py-4 font-medium text-gray-600 hover:text-gray-900 border-b-2 border-transparent hover:border-gold-600 whitespace-nowrap flex items-center" data-tab="tables">
490
  <i class="fas fa-chair mr-2"></i> Tables
491
  </button>
492
  </div>
 
494
 
495
  <!-- Orders Tab Content -->
496
  <div id="ordersTab" class="tab-content active">
497
+ <div class="bg-white rounded-xl shadow-sm overflow-hidden premium-border">
498
  <div class="overflow-x-auto">
499
  <table class="min-w-full divide-y divide-gray-200">
500
+ <thead class="bg-premium-black">
501
  <tr>
502
+ <th class="px-6 py-3 text-left text-xs font-medium text-gold-400 uppercase tracking-wider">Order ID</th>
503
+ <th class="px-6 py-3 text-left text-xs font-medium text-gold-400 uppercase tracking-wider">Table</th>
504
+ <th class="px-6 py-3 text-left text-xs font-medium text-gold-400 uppercase tracking-wider">Items</th>
505
+ <th class="px-6 py-3 text-left text-xs font-medium text-gold-400 uppercase tracking-wider">Total</th>
506
+ <th class="px-6 py-3 text-left text-xs font-medium text-gold-400 uppercase tracking-wider">Status</th>
507
+ <th class="px-6 py-3 text-left text-xs font-medium text-gold-400 uppercase tracking-wider">Actions</th>
508
  </tr>
509
  </thead>
510
  <tbody class="bg-white divide-y divide-gray-200">
 
517
 
518
  <!-- Menu Tab Content -->
519
  <div id="menuTab" class="tab-content">
520
+ <div class="bg-white rounded-xl shadow-sm p-6 mb-6 premium-border">
521
  <div class="flex justify-between items-center mb-4">
522
+ <h2 class="text-xl font-semibold flex items-center gold-text">
523
+ <i class="fas fa-utensils mr-2"></i> Menu Items
524
  </h2>
525
+ <button class="px-4 py-2 btn-primary rounded-lg flex items-center" id="addMenuItemBtn">
526
  <i class="fas fa-plus mr-2"></i> Add Item
527
  </button>
528
  </div>
529
  <div class="overflow-x-auto">
530
  <table class="min-w-full divide-y divide-gray-200">
531
+ <thead class="bg-premium-black">
532
  <tr>
533
+ <th class="px-6 py-3 text-left text-xs font-medium text-gold-400 uppercase tracking-wider">Name</th>
534
+ <th class="px-6 py-3 text-left text-xs font-medium text-gold-400 uppercase tracking-wider">Category</th>
535
+ <th class="px-6 py-3 text-left text-xs font-medium text-gold-400 uppercase tracking-wider">Price</th>
536
+ <th class="px-6 py-3 text-left text-xs font-medium text-gold-400 uppercase tracking-wider">Actions</th>
537
  </tr>
538
  </thead>
539
  <tbody class="bg-white divide-y divide-gray-200" id="adminMenuItems">
 
546
 
547
  <!-- Categories Tab Content -->
548
  <div id="categoriesTab" class="tab-content">
549
+ <div class="bg-white rounded-xl shadow-sm p-6 mb-6 premium-border">
550
  <div class="flex justify-between items-center mb-4">
551
+ <h2 class="text-xl font-semibold flex items-center gold-text">
552
+ <i class="fas fa-tags mr-2"></i> Menu Categories
553
  </h2>
554
+ <button class="px-4 py-2 btn-primary rounded-lg flex items-center" id="addCategoryBtn">
555
  <i class="fas fa-plus mr-2"></i> Add Category
556
  </button>
557
  </div>
558
  <div class="overflow-x-auto">
559
  <table class="min-w-full divide-y divide-gray-200">
560
+ <thead class="bg-premium-black">
561
  <tr>
562
+ <th class="px-6 py-3 text-left text-xs font-medium text-gold-400 uppercase tracking-wider">Name</th>
563
+ <th class="px-6 py-3 text-left text-xs font-medium text-gold-400 uppercase tracking-wider">Items</th>
564
+ <th class="px-6 py-3 text-left text-xs font-medium text-gold-400 uppercase tracking-wider">Actions</th>
565
  </tr>
566
  </thead>
567
  <tbody class="bg-white divide-y divide-gray-200" id="adminCategories">
 
574
 
575
  <!-- Tables Tab Content -->
576
  <div id="tablesTab" class="tab-content">
577
+ <div class="bg-white rounded-xl shadow-sm p-6 mb-6 premium-border">
578
  <div class="flex justify-between items-center mb-4">
579
+ <h2 class="text-xl font-semibold flex items-center gold-text">
580
+ <i class="fas fa-chair mr-2"></i> Restaurant Tables
581
  </h2>
582
+ <button class="px-4 py-2 btn-primary rounded-lg flex items-center" id="addTableBtn">
583
  <i class="fas fa-plus mr-2"></i> Add Table
584
  </button>
585
  </div>
 
591
  </main>
592
 
593
  <!-- Shopping Cart Sidebar -->
594
+ <div id="cartSidebar" class="fixed inset-y-0 right-0 w-full md:w-96 bg-white shadow-xl transform translate-x-full transition-transform duration-300 ease-in-out z-50 premium-border">
595
  <div class="flex flex-col h-full">
596
+ <div class="flex justify-between items-center p-4 gold-divider">
597
+ <h2 class="text-xl font-semibold flex items-center gold-text">
598
+ <i class="fas fa-shopping-cart mr-2"></i> Your Order
599
  </h2>
600
  <button id="closeCartBtn" class="text-gray-500 hover:text-gray-700 p-1 rounded-full hover:bg-gray-100">
601
  <i class="fas fa-times"></i>
602
  </button>
603
  </div>
604
+ <div class="p-4 gold-divider">
605
  <div class="flex justify-between items-center">
606
  <span class="font-medium flex items-center">
607
+ <i class="fas fa-chair mr-2 text-gold-600"></i> Table:
608
  </span>
609
+ <span id="selectedTableDisplay" class="font-semibold text-premium-black">Not selected</span>
610
  </div>
611
  </div>
612
  <div class="flex-1 overflow-y-auto p-4" id="cartItems">
 
626
  <span class="text-gray-600">Tax (10%):</span>
627
  <span id="cartTax" class="font-medium">$0.00</span>
628
  </div>
629
+ <div class="flex justify-between font-bold text-lg gold-divider pt-3">
630
  <span>Total:</span>
631
+ <span id="cartTotal" class="text-premium-black">$0.00</span>
632
  </div>
633
+ <button id="placeOrderBtn" class="w-full mt-4 px-4 py-3 btn-secondary rounded-lg disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center" disabled>
634
  <i class="fas fa-paper-plane mr-2"></i> Place Order
635
+ </button>
636
  </div>
637
  </div>
638
  </div>
 
640
 
641
  <!-- Add Menu Item Modal -->
642
  <div id="addMenuItemModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
643
+ <div class="bg-white rounded-xl shadow-xl w-full max-w-md mx-4 premium-border">
644
+ <div class="flex justify-between items-center p-4 gold-divider">
645
+ <h3 class="text-lg font-semibold flex items-center gold-text">
646
+ <i class="fas fa-plus-circle mr-2"></i> Add Menu Item
647
  </h3>
648
  <button id="closeMenuItemModal" class="text-gray-500 hover:text-gray-700 p-1 rounded-full hover:bg-gray-100">
649
  <i class="fas fa-times"></i>
 
653
  <form id="menuItemForm">
654
  <div class="mb-4">
655
  <label class="block text-gray-700 mb-2 font-medium" for="itemName">Name</label>
656
+ <input type="text" id="itemName", class="w-full px-4 py-2 input-field rounded-lg focus:outline-none" required>
657
  </div>
658
  <div class="mb-4">
659
  <label class="block text-gray-700 mb-2 font-medium" for="itemDescription">Description</label>
660
+ <textarea id="itemDescription" rows="3" class="w-full px-4 py-2 input-field rounded-lg focus:outline-none"></textarea>
661
  </div>
662
  <div class="mb-4">
663
  <label class="block text-gray-700 mb-2 font-medium" for="itemPrice">Price</label>
664
  <div class="relative">
665
  <span class="absolute left-3 top-2.5 text-gray-500">$</span>
666
+ <input type="number" id="itemPrice" min="0" step="0.01" class="w-full pl-8 pr-4 py-2 input-field rounded-lg focus:outline-none" required>
667
  </div>
668
  </div>
669
  <div class="mb-4">
670
+ <label class="block text-gray-700 mb-2 font-medium", for="itemCategory">Category</label>
671
+ <select id="itemCategory" class="w-full px-4 py-2 input-field rounded-lg focus:outline-none" required>
672
  <option value="">Select a category</option>
673
  <option value="starters">Starters</option>
674
  <option value="mains">Main Courses</option>
 
679
  <div class="mb-4">
680
  <label class="block text-gray-700 mb-2 font-medium" for="itemImage">Image</label>
681
  <div class="flex items-center justify-center w-full">
682
+ <label for="itemImage" class="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-200 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100">
683
  <div class="flex flex-col items-center justify-center pt-5 pb-6">
684
  <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i>
685
  <p class="mb-2 text-sm text-gray-500">Click to upload</p>
 
690
  </div>
691
  </div>
692
  <div class="flex justify-end space-x-3">
693
+ <button type="button" id="cancelMenuItem" class="px-4 py-2 btn-outline rounded-lg">Cancel</button>
694
+ <button type="submit" class="px-4 py-2 btn-primary rounded-lg">Save Item</button>
695
  </div>
696
  </form>
697
  </div>
 
800
  customerBtn.addEventListener('click', () => {
801
  customerView.classList.remove('hidden');
802
  adminView.classList.add('hidden');
803
+ customerBtn.classList.add('btn-secondary');
804
+ customerBtn.classList.remove('btn-primary');
805
+ adminBtn.classList.add('btn-primary');
806
+ adminBtn.classList.remove('btn-secondary');
807
  });
808
 
809
  adminBtn.addEventListener('click', () => {
810
  customerView.classList.add('hidden');
811
  adminView.classList.remove('hidden');
812
+ adminBtn.classList.add('btn-primary');
813
+ adminBtn.classList.remove('btn-secondary');
814
+ customerBtn.classList.add('btn-secondary');
815
+ customerBtn.classList.remove('btn-primary');
816
  });
817
 
818
  // Mobile view toggle
 
840
 
841
  // Update active table button
842
  tableBtns.forEach(b => {
843
+ b.classList.remove('bg-gold-600', 'text-premium-black');
844
+ b.classList.add('btn-outline');
845
  });
846
+ btn.classList.add('bg-gold-600', 'text-premium-black');
847
+ btn.classList.remove('btn-outline');
848
  });
849
  });
850
 
 
879
 
880
  // Update active tab
881
  adminTabs.forEach(t => {
882
+ t.classList.remove('border-gold-600', 'text-gray-900');
883
  });
884
+ tab.classList.add('border-gold-600', 'text-gray-900');
885
 
886
  // Show corresponding content
887
  tabContents.forEach(content => {
 
957
  const quantity = cartItem ? cartItem.quantity : 0;
958
 
959
  const itemElement = document.createElement('div');
960
+ itemElement.className = 'menu-item-card bg-white rounded-xl shadow-sm overflow-hidden premium-border';
961
  itemElement.innerHTML = `
962
  <div class="h-48 overflow-hidden relative">
963
+ <img src="${item.image}" alt="${item.name}", class="w-full h-full object-cover">
964
  <div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div>
965
  <div class="absolute bottom-0 left-0 p-4">
966
  <h3 class="font-semibold text-white text-lg">${item.name}</h3>
967
+ <span class="font-bold text-gold-400">$${item.price.toFixed(2)}</span>
968
  </div>
969
  </div>
970
  <div class="p-4">
 
979
  <i class="fas fa-plus text-xs"></i>
980
  </button>
981
  </div>
982
+ <button class="add-to-cart-btn px-3 py-1 bg-premium-black text-gold-400 rounded-lg hover:bg-premium-dark transition flex items-center" data-id="${item.id}">
983
  <i class="fas fa-cart-plus mr-1 text-xs"></i> Add
984
  </button>
985
  </div>
 
1013
 
1014
  menuItems.forEach(item => {
1015
  const itemElement = document.createElement('tr');
1016
+ itemElement.className = 'hover:bg-gray-50 table-row';
1017
  itemElement.innerHTML = `
1018
  <td class="px-6 py-4 whitespace-nowrap">
1019
  <div class="flex items-center">
 
1027
  </div>
1028
  </td>
1029
  <td class="px-6 py-4 whitespace-nowrap">
1030
+ <span class="px-2 py-1 text-xs font-medium rounded-full bg-gold-100 text-premium-black capitalize">${item.category}</span>
1031
  </td>
1032
  <td class="px-6 py-4 whitespace-nowrap">
1033
  <div class="text-sm font-medium text-gray-900">$${item.price.toFixed(2)}</div>
1034
  </td>
1035
  <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
1036
+ <button class="text-gray-600 hover:text-black mr-3 edit-item-btn" data-id="${item.id}">
1037
  <i class="fas fa-edit"></i>
1038
  </button>
1039
+ <button class="text-gray-600 hover:text-black delete-item-btn" data-id="${item.id}">
1040
  <i class="fas fa-trash"></i>
1041
  </button>
1042
  </td>
 
1052
 
1053
  categories.forEach(category => {
1054
  const categoryElement = document.createElement('tr');
1055
+ categoryElement.className = 'hover:bg-gray-50 table-row';
1056
  categoryElement.innerHTML = `
1057
  <td class="px-6 py-4 whitespace-nowrap">
1058
  <div class="text-sm font-medium text-gray-900 capitalize">${category.slug}</div>
 
1061
  <div class="text-sm text-gray-900">${category.itemCount} items</div>
1062
  </td>
1063
  <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
1064
+ <button class="text-gray-600 hover:text-black mr-3 edit-category-btn" data-id="${category.id}">
1065
  <i class="fas fa-edit"></i>
1066
  </button>
1067
+ <button class="text-gray-600 hover:text-black delete-category-btn" data-id="${category.id}">
1068
  <i class="fas fa-trash"></i>
1069
  </button>
1070
  </td>
 
1081
 
1082
  orders.forEach(order => {
1083
  const orderElement = document.createElement('tr');
1084
+ orderElement.className = 'hover:bg-gray-50 table-row';
1085
  orderElement.innerHTML = `
1086
  <td class="px-6 py-4 whitespace-nowrap">
1087
  <div class="text-sm font-medium text-gray-900">#${order.id}</div>
 
1104
  </span>
1105
  </td>
1106
  <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
1107
+ <select class="status-select border border-gray-300 rounded-lg px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-gold-400" data-order-id="${order.id}">
1108
  <option value="pending" ${order.status === 'pending' ? 'selected' : ''}>Pending</option>
1109
  <option value="preparing" ${order.status === 'preparing' ? 'selected' : ''}>Preparing</option>
1110
  <option value="served" ${order.status === 'served' ? 'selected' : ''}>Served</option>
 
1132
 
1133
  tables.forEach(table => {
1134
  const tableElement = document.createElement('div');
1135
+ tableElement.className = 'table-card bg-white rounded-xl shadow-sm overflow-hidden premium-border';
1136
  tableElement.innerHTML = `
1137
  <div class="p-4">
1138
  <div class="flex justify-between items-start mb-2">
 
1142
  </span>
1143
  </div>
1144
  <div class="mb-4">
1145
+ <div class="w-full h-32 bg-gold-100 rounded-lg flex items-center justify-center">
1146
+ <i class="fas fa-qrcode text-4xl text-gold-400"></i>
1147
  </div>
1148
  </div>
1149
  <div class="flex justify-between items-center">
 
1151
  <i class="fas fa-download mr-1"></i> QR Code
1152
  </button>
1153
  <div class="flex space-x-2">
1154
+ <button class="edit-table-btn text-xs text-gray-600 hover:text-black flex items-center" data-id="${table.id}">
1155
  <i class="fas fa-edit mr-1"></i> Edit
1156
  </button>
1157
+ <button class="delete-table-btn text-xs text-gray-600 hover:text-black flex items-center" data-id="${table.id}">
1158
  <i class="fas fa-trash mr-1"></i> Delete
1159
  </button>
1160
  </div>
 
1225
 
1226
  cart.forEach(item => {
1227
  const itemElement = document.createElement('div');
1228
+ itemElement.className = 'cart-item flex justify-between items-center mb-4 pb-4 gold-divider';
1229
  itemElement.innerHTML = `
1230
  <div>
1231
  <h4 class="font-medium">${item.name}</h4>
 
1319
 
1320
  // Reset table buttons
1321
  tableBtns.forEach(btn => {
1322
+ btn.classList.remove('bg-gold-600', 'text-premium-black');
1323
+ btn.classList.add('btn-outline');
1324
  });
1325
 
1326
  // Show success message
prompts.txt CHANGED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ change the UI more Premium Black and white design more premium buttons etc
2
+ make more premium UI/UX use premium golden and premium black colour
3
+ app is not working plase debug