Spaces:

Hnxrec
/

resturant-space

Running

App Files Files Community

Hnxrec commited on May 26, 2025

Commit

fa71ee6

verified ·

1 Parent(s): cfad371

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +1187 -19
prompts.txt +0 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Resturant Space
-emoji: 📉
-colorFrom: indigo
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: resturant-space
+emoji: 🐳
+colorFrom: red
+colorTo: yellow
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,1187 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Restro-fi Premium | Restaurant Ordering System</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Poppins', sans-serif;
+            background-color: #f8fafc;
+        }
+        .menu-item-card {
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+        }
+        .menu-item-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
+        }
+        .category-btn.active {
+            background: linear-gradient(135deg, #f59e0b, #ef4444);
+            color: white;
+        }
+        .cart-item:hover .remove-btn {
+            opacity: 1;
+        }
+        .tab-content {
+            display: none;
+            animation: fadeIn 0.3s ease;
+        }
+        .tab-content.active {
+            display: block;
+        }
+        .order-status {
+            transition: all 0.3s ease;
+        }
+        .order-status.pending {
+            background-color: #fef3c7;
+            color: #92400e;
+        }
+        .order-status.preparing {
+            background-color: #bfdbfe;
+            color: #1e40af;
+        }
+        .order-status.served {
+            background-color: #d1fae5;
+            color: #065f46;
+        }
+        .order-status.cancelled {
+            background-color: #fee2e2;
+            color: #991b1b;
+        }
+        .table-card {
+            transition: all 0.3s ease;
+        }
+        .table-card:hover {
+            transform: scale(1.03);
+        }
+        .table-available {
+            background: linear-gradient(135deg, #10b981, #3b82f6);
+        }
+        .table-occupied {
+            background: linear-gradient(135deg, #ef4444, #f59e0b);
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+        }
+        .sidebar-overlay {
+            backdrop-filter: blur(5px);
+        }
+        .floating-btn {
+            box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
+        }
+        .notification {
+            animation: slideIn 0.5s ease, fadeOut 0.5s ease 2.5s forwards;
+        }
+        @keyframes slideIn {
+            from { transform: translateX(100%); }
+            to { transform: translateX(0); }
+        }
+        @keyframes fadeOut {
+            to { opacity: 0; }
+        }
+    </style>
+</head>
+<body class="bg-gray-50">
+    <!-- Notification -->
+    <div id="notification" class="notification fixed top-4 right-4 hidden z-50">
+        <div class="bg-white rounded-lg shadow-lg p-4 flex items-start border-l-4 border-orange-500 max-w-sm">
+            <div class="mr-3">
+                <div class="h-8 w-8 rounded-full bg-orange-100 flex items-center justify-center">
+                    <i class="fas fa-check text-orange-500"></i>
+                </div>
+            </div>
+            <div class="flex-1">
+                <h4 class="font-medium text-gray-900" id="notification-title">Success</h4>
+                <p class="text-sm text-gray-600" id="notification-message">Your order has been placed successfully!</p>
+            </div>
+            <button class="ml-4 text-gray-400 hover:text-gray-500" id="close-notification">
+                <i class="fas fa-times"></i>
+            </button>
+        </div>
+    </div>
+    <!-- Header -->
+    <header class="bg-white shadow-sm sticky top-0 z-30">
+        <div class="container mx-auto px-6 py-3 flex justify-between items-center">
+            <div class="flex items-center">
+                <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">
+                    <i class="fas fa-utensils text-white"></i>
+                </div>
+                <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>
+            </div>
+            <div class="flex items-center space-x-4">
+                <div class="hidden md:flex space-x-2">
+                    <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">
+                        <i class="fas fa-user mr-2"></i> Customer View
+                    </button>
+                    <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">
+                        <i class="fas fa-cog mr-2"></i> Admin View
+                    </button>
+                </div>
+                <div class="relative">
+                    <button id="cartIcon" class="relative p-2 rounded-full bg-gray-100 hover:bg-gray-200 transition">
+                        <i class="fas fa-shopping-cart text-gray-700"></i>
+                        <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>
+                    </button>
+                </div>
+                <div class="relative group">
+                    <div class="flex items-center space-x-2 cursor-pointer">
+                        <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">
+                        <span class="hidden md:inline text-sm font-medium">Admin</span>
+                        <i class="fas fa-chevron-down text-xs text-gray-500"></i>
+                    </div>
+                    <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">
+                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center">
+                            <i class="fas fa-user mr-2 text-gray-500"></i> Profile
+                        </a>
+                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center">
+                            <i class="fas fa-cog mr-2 text-gray-500"></i> Settings
+                        </a>
+                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center">
+                            <i class="fas fa-sign-out-alt mr-2 text-gray-500"></i> Logout
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+    <!-- Mobile View Toggle -->
+    <div class="md:hidden fixed bottom-4 right-4 z-40">
+        <div class="flex space-x-2">
+            <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">
+                <i class="fas fa-user"></i>
+            </button>
+            <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">
+                <i class="fas fa-cog"></i>
+            </button>
+        </div>
+    </div>
+    <!-- Main Content - Customer View -->
+    <main id="customerView" class="container mx-auto px-4 py-6">
+        <!-- Table Selection -->
+        <div class="bg-white rounded-xl shadow-sm p-6 mb-6 border border-gray-100">
+            <h2 class="text-xl font-semibold mb-4 flex items-center">
+                <i class="fas fa-chair mr-2 text-orange-500"></i> Select Your Table
+            </h2>
+            <div class="flex flex-wrap gap-3">
+                <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">
+                    <span class="h-2 w-2 rounded-full bg-green-500 mr-2"></span> Table 1
+                </button>
+                <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">
+                    <span class="h-2 w-2 rounded-full bg-red-500 mr-2"></span> Table 2
+                </button>
+                <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">
+                    <span class="h-2 w-2 rounded-full bg-green-500 mr-2"></span> Table 3
+                </button>
+                <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">
+                    <span class="h-2 w-2 rounded-full bg-green-500 mr-2"></span> Table 4
+                </button>
+                <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">
+                    <span class="h-2 w-2 rounded-full bg-green-500 mr-2"></span> Table 5
+                </button>
+                <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">
+                    <span class="h-2 w-2 rounded-full bg-green-500 mr-2"></span> Table 6
+                </button>
+            </div>
+            <div class="mt-4 pt-4 border-t border-gray-100">
+                <p class="text-sm text-gray-600 mb-2">Or scan the QR code at your table</p>
+                <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">
+                    <i class="fas fa-qrcode mr-2"></i> Scan QR Code
+                </button>
+            </div>
+        </div>
+        <!-- Menu Categories -->
+        <div class="mb-6">
+            <div class="flex overflow-x-auto pb-2 space-x-2 scrollbar-hide">
+                <button class="category-btn px-4 py-2 rounded-lg whitespace-nowrap transition flex items-center active" data-category="all">
+                    <i class="fas fa-utensils mr-2"></i> All Items
+                </button>
+                <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">
+                    <i class="fas fa-bread-slice mr-2"></i> Starters
+                </button>
+                <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">
+                    <i class="fas fa-drumstick-bite mr-2"></i> Main Courses
+                </button>
+                <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">
+                    <i class="fas fa-ice-cream mr-2"></i> Desserts
+                </button>
+                <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">
+                    <i class="fas fa-glass-martini-alt mr-2"></i> Drinks
+                </button>
+            </div>
+        </div>
+        <!-- Search -->
+        <div class="mb-6 relative">
+            <div class="relative">
+                <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">
+                <i class="fas fa-search absolute left-3 top-3.5 text-gray-400"></i>
+            </div>
+        </div>
+        <!-- Menu Items -->
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6" id="menuItems">
+            <!-- Menu items will be dynamically added here -->
+        </div>
+    </main>
+    <!-- Main Content - Admin View (Hidden by default) -->
+    <main id="adminView" class="container mx-auto px-4 py-6 hidden">
+        <!-- Admin Dashboard -->
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
+            <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
+                <div class="flex justify-between items-start">
+                    <div>
+                        <p class="text-gray-500">Total Orders</p>
+                        <h3 class="text-2xl font-bold">124</h3>
+                        <p class="text-sm text-green-500 flex items-center mt-1">
+                            <i class="fas fa-arrow-up mr-1"></i> 12% from yesterday
+                        </p>
+                    </div>
+                    <div class="bg-blue-100 p-3 rounded-full">
+                        <i class="fas fa-shopping-bag text-blue-500 text-xl"></i>
+                    </div>
+                </div>
+            </div>
+            <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
+                <div class="flex justify-between items-start">
+                    <div>
+                        <p class="text-gray-500">Pending Orders</p>
+                        <h3 class="text-2xl font-bold">8</h3>
+                        <p class="text-sm text-red-500 flex items-center mt-1">
+                            <i class="fas fa-arrow-down mr-1"></i> 2 from yesterday
+                        </p>
+                    </div>
+                    <div class="bg-orange-100 p-3 rounded-full">
+                        <i class="fas fa-clock text-orange-500 text-xl"></i>
+                    </div>
+                </div>
+            </div>
+            <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
+                <div class="flex justify-between items-start">
+                    <div>
+                        <p class="text-gray-500">Today's Revenue</p>
+                        <h3 class="text-2xl font-bold">$1,245</h3>
+                        <p class="text-sm text-green-500 flex items-center mt-1">
+                            <i class="fas fa-arrow-up mr-1"></i> $320 from yesterday
+                        </p>
+                    </div>
+                    <div class="bg-green-100 p-3 rounded-full">
+                        <i class="fas fa-dollar-sign text-green-500 text-xl"></i>
+                    </div>
+                </div>
+            </div>
+            <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
+                <div class="flex justify-between items-start">
+                    <div>
+                        <p class="text-gray-500">Active Tables</p>
+                        <h3 class="text-2xl font-bold">12/20</h3>
+                        <p class="text-sm text-gray-500 flex items-center mt-1">
+                            <i class="fas fa-info-circle mr-1"></i> 60% occupancy
+                        </p>
+                    </div>
+                    <div class="bg-purple-100 p-3 rounded-full">
+                        <i class="fas fa-chair text-purple-500 text-xl"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Admin Tabs -->
+        <div class="bg-white rounded-xl shadow-sm mb-6 border border-gray-100">
+            <div class="flex overflow-x-auto scrollbar-hide">
+                <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">
+                    <i class="fas fa-clipboard-list mr-2"></i> Orders
+                </button>
+                <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">
+                    <i class="fas fa-utensils mr-2"></i> Menu
+                </button>
+                <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">
+                    <i class="fas fa-tags mr-2"></i> Categories
+                </button>
+                <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">
+                    <i class="fas fa-chair mr-2"></i> Tables
+                </button>
+            </div>
+        </div>
+        <!-- Orders Tab Content -->
+        <div id="ordersTab" class="tab-content active">
+            <div class="bg-white rounded-xl shadow-sm overflow-hidden border border-gray-100">
+                <div class="overflow-x-auto">
+                    <table class="min-w-full divide-y divide-gray-200">
+                        <thead class="bg-gray-50">
+                            <tr>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Order ID</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Table</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Items</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
+                            </tr>
+                        </thead>
+                        <tbody class="bg-white divide-y divide-gray-200">
+                            <!-- Orders will be dynamically added here -->
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+        <!-- Menu Tab Content -->
+        <div id="menuTab" class="tab-content">
+            <div class="bg-white rounded-xl shadow-sm p-6 mb-6 border border-gray-100">
+                <div class="flex justify-between items-center mb-4">
+                    <h2 class="text-xl font-semibold flex items-center">
+                        <i class="fas fa-utensils mr-2 text-orange-500"></i> Menu Items
+                    </h2>
+                    <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">
+                        <i class="fas fa-plus mr-2"></i> Add Item
+                    </button>
+                </div>
+                <div class="overflow-x-auto">
+                    <table class="min-w-full divide-y divide-gray-200">
+                        <thead class="bg-gray-50">
+                            <tr>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Price</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
+                            </tr>
+                        </thead>
+                        <tbody class="bg-white divide-y divide-gray-200" id="adminMenuItems">
+                            <!-- Admin menu items will be dynamically added here -->
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+        <!-- Categories Tab Content -->
+        <div id="categoriesTab" class="tab-content">
+            <div class="bg-white rounded-xl shadow-sm p-6 mb-6 border border-gray-100">
+                <div class="flex justify-between items-center mb-4">
+                    <h2 class="text-xl font-semibold flex items-center">
+                        <i class="fas fa-tags mr-2 text-orange-500"></i> Menu Categories
+                    </h2>
+                    <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">
+                        <i class="fas fa-plus mr-2"></i> Add Category
+                    </button>
+                </div>
+                <div class="overflow-x-auto">
+                    <table class="min-w-full divide-y divide-gray-200">
+                        <thead class="bg-gray-50">
+                            <tr>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Items</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
+                            </tr>
+                        </thead>
+                        <tbody class="bg-white divide-y divide-gray-200" id="adminCategories">
+                            <!-- Categories will be dynamically added here -->
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+        <!-- Tables Tab Content -->
+        <div id="tablesTab" class="tab-content">
+            <div class="bg-white rounded-xl shadow-sm p-6 mb-6 border border-gray-100">
+                <div class="flex justify-between items-center mb-4">
+                    <h2 class="text-xl font-semibold flex items-center">
+                        <i class="fas fa-chair mr-2 text-orange-500"></i> Restaurant Tables
+                    </h2>
+                    <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">
+                        <i class="fas fa-plus mr-2"></i> Add Table
+                    </button>
+                </div>
+                <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4" id="tablesList">
+                    <!-- Tables will be dynamically added here -->
+                </div>
+            </div>
+        </div>
+    </main>
+    <!-- Shopping Cart Sidebar -->
+    <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">
+        <div class="flex flex-col h-full">
+            <div class="flex justify-between items-center p-4 border-b border-gray-100">
+                <h2 class="text-xl font-semibold flex items-center">
+                    <i class="fas fa-shopping-cart mr-2 text-orange-500"></i> Your Order
+                </h2>
+                <button id="closeCartBtn" class="text-gray-500 hover:text-gray-700 p-1 rounded-full hover:bg-gray-100">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="p-4 border-b border-gray-100">
+                <div class="flex justify-between items-center">
+                    <span class="font-medium flex items-center">
+                        <i class="fas fa-chair mr-2 text-gray-500"></i> Table:
+                    </span>
+                    <span id="selectedTableDisplay" class="font-semibold text-orange-500">Not selected</span>
+                </div>
+            </div>
+            <div class="flex-1 overflow-y-auto p-4" id="cartItems">
+                <!-- Cart items will be dynamically added here -->
+                <div class="text-center text-gray-500 py-10" id="emptyCartMessage">
+                    <i class="fas fa-shopping-cart text-4xl mb-2 text-gray-300"></i>
+                    <p class="font-medium">Your cart is empty</p>
+                    <p class="text-sm mt-1">Add items from the menu to get started</p>
+                </div>
+            </div>
+            <div class="p-4 border-t border-gray-100">
+                <div class="flex justify-between mb-2">
+                    <span class="text-gray-600">Subtotal:</span>
+                    <span id="cartSubtotal" class="font-medium">$0.00</span>
+                </div>
+                <div class="flex justify-between mb-4">
+                    <span class="text-gray-600">Tax (10%):</span>
+                    <span id="cartTax" class="font-medium">$0.00</span>
+                </div>
+                <div class="flex justify-between font-bold text-lg border-t border-gray-100 pt-3">
+                    <span>Total:</span>
+                    <span id="cartTotal" class="text-orange-500">$0.00</span>
+                </div>
+                <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>
+                    <i class="fas fa-paper-plane mr-2"></i> Place Order
+                </button>
+            </div>
+        </div>
+    </div>
+    <div id="cartOverlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden sidebar-overlay"></div>
+    <!-- Add Menu Item Modal -->
+    <div id="addMenuItemModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
+        <div class="bg-white rounded-xl shadow-xl w-full max-w-md mx-4">
+            <div class="flex justify-between items-center p-4 border-b border-gray-100">
+                <h3 class="text-lg font-semibold flex items-center">
+                    <i class="fas fa-plus-circle mr-2 text-orange-500"></i> Add Menu Item
+                </h3>
+                <button id="closeMenuItemModal" class="text-gray-500 hover:text-gray-700 p-1 rounded-full hover:bg-gray-100">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="p-4">
+                <form id="menuItemForm">
+                    <div class="mb-4">
+                        <label class="block text-gray-700 mb-2 font-medium" for="itemName">Name</label>
+                        <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>
+                    </div>
+                    <div class="mb-4">
+                        <label class="block text-gray-700 mb-2 font-medium" for="itemDescription">Description</label>
+                        <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>
+                    </div>
+                    <div class="mb-4">
+                        <label class="block text-gray-700 mb-2 font-medium" for="itemPrice">Price</label>
+                        <div class="relative">
+                            <span class="absolute left-3 top-2.5 text-gray-500">$</span>
+                            <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>
+                        </div>
+                    </div>
+                    <div class="mb-4">
+                        <label class="block text-gray-700 mb-2 font-medium" for="itemCategory">Category</label>
+                        <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>
+                            <option value="">Select a category</option>
+                            <option value="starters">Starters</option>
+                            <option value="mains">Main Courses</option>
+                            <option value="desserts">Desserts</option>
+                            <option value="drinks">Drinks</option>
+                        </select>
+                    </div>
+                    <div class="mb-4">
+                        <label class="block text-gray-700 mb-2 font-medium" for="itemImage">Image</label>
+                        <div class="flex items-center justify-center w-full">
+                            <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">
+                                <div class="flex flex-col items-center justify-center pt-5 pb-6">
+                                    <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i>
+                                    <p class="mb-2 text-sm text-gray-500">Click to upload</p>
+                                    <p class="text-xs text-gray-500">PNG, JPG (MAX. 2MB)</p>
+                                </div>
+                                <input id="itemImage" type="file" class="hidden" />
+                            </label>
+                        </div>
+                    </div>
+                    <div class="flex justify-end space-x-3">
+                        <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>
+                        <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>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Sample data
+        const menuItems = [
+            { id: 1, name: "Garlic Bread", description: "Toasted bread with garlic butter and herbs", price: 4.99, category: "starters", image: "https://images.unsplash.com/photo-1518604666860-9ed391f76460?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80" },
+            { id: 2, name: "Bruschetta", description: "Toasted bread topped with tomatoes, garlic and fresh basil", price: 5.99, category: "starters", image: "https://images.unsplash.com/photo-1490645935967-10de6ba17061?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80" },
+            { id: 3, name: "Margherita Pizza", description: "Classic pizza with tomato sauce, mozzarella and basil", price: 12.99, category: "mains", image: "https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80" },
+            { id: 4, name: "Spaghetti Carbonara", description: "Pasta with creamy egg sauce, pancetta and parmesan", price: 14.99, category: "mains", image: "https://images.unsplash.com/photo-1589227365533-cee630bd59bd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80" },
+            { id: 5, name: "Tiramisu", description: "Classic Italian dessert with coffee-soaked ladyfingers", price: 6.99, category: "desserts", image: "https://images.unsplash.com/photo-1563805042-7684c019e1cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80" },
+            { id: 6, name: "Chocolate Lava Cake", description: "Warm chocolate cake with a molten center, served with vanilla ice cream", price: 7.99, category: "desserts", image: "https://images.unsplash.com/photo-1564355808539-22fda35bed7e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80" },
+            { id: 7, name: "Red Wine", description: "Glass of premium house red wine", price: 8.99, category: "drinks", image: "https://images.unsplash.com/photo-1551024506-0ecc539b5e0e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80" },
+            { id: 8, name: "Sparkling Water", description: "Bottle of sparkling mineral water", price: 3.99, category: "drinks", image: "https://images.unsplash.com/photo-1567337710282-00832a8167a9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80" }
+        ];
+        const categories = [
+            { id: 1, name: "Starters", slug: "starters", itemCount: 2 },
+            { id: 2, name: "Main Courses", slug: "mains", itemCount: 2 },
+            { id: 3, name: "Desserts", slug: "desserts", itemCount: 2 },
+            { id: 4, name: "Drinks", slug: "drinks", itemCount: 2 }
+        ];
+        const tables = [
+            { id: 1, number: "1", qrCode: "qr1", status: "available" },
+            { id: 2, number: "2", qrCode: "qr2", status: "occupied" },
+            { id: 3, number: "3", qrCode: "qr3", status: "available" },
+            { id: 4, number: "4", qrCode: "qr4", status: "available" },
+            { id: 5, number: "5", qrCode: "qr5", status: "available" },
+            { id: 6, number: "6", qrCode: "qr6", status: "available" }
+        ];
+        const orders = [
+            { id: 1, table: "2", items: [{id: 3, name: "Margherita Pizza", quantity: 1, price: 12.99}, {id: 7, name: "Red Wine", quantity: 2, price: 8.99}], total: 30.97, status: "pending", timestamp: "2023-06-15T14:30:00" },
+            { id: 2, table: "5", items: [{id: 4, name: "Spaghetti Carbonara", quantity: 1, price: 14.99}, {id: 5, name: "Tiramisu", quantity: 1, price: 6.99}], total: 21.98, status: "preparing", timestamp: "2023-06-15T14:15:00" },
+            { id: 3, table: "3", items: [{id: 1, name: "Garlic Bread", quantity: 2, price: 4.99}, {id: 2, name: "Bruschetta", quantity: 1, price: 5.99}, {id: 8, name: "Sparkling Water", quantity: 1, price: 3.99}], total: 19.96, status: "served", timestamp: "2023-06-15T13:45:00" },
+            { id: 4, table: "1", items: [{id: 6, name: "Chocolate Lava Cake", quantity: 1, price: 7.99}], total: 7.99, status: "cancelled", timestamp: "2023-06-15T13:30:00" }
+        ];
+        // State
+        let cart = [];
+        let selectedTable = null;
+        let selectedCategory = "all";
+        let searchQuery = "";
+        // DOM Elements
+        const customerView = document.getElementById('customerView');
+        const adminView = document.getElementById('adminView');
+        const customerBtn = document.getElementById('customerBtn');
+        const adminBtn = document.getElementById('adminBtn');
+        const mobileCustomerBtn = document.getElementById('mobileCustomerBtn');
+        const mobileAdminBtn = document.getElementById('mobileAdminBtn');
+        const cartIcon = document.getElementById('cartIcon');
+        const cartCount = document.getElementById('cartCount');
+        const cartSidebar = document.getElementById('cartSidebar');
+        const cartOverlay = document.getElementById('cartOverlay');
+        const closeCartBtn = document.getElementById('closeCartBtn');
+        const cartItems = document.getElementById('cartItems');
+        const emptyCartMessage = document.getElementById('emptyCartMessage');
+        const selectedTableDisplay = document.getElementById('selectedTableDisplay');
+        const cartSubtotal = document.getElementById('cartSubtotal');
+        const cartTax = document.getElementById('cartTax');
+        const cartTotal = document.getElementById('cartTotal');
+        const placeOrderBtn = document.getElementById('placeOrderBtn');
+        const tableBtns = document.querySelectorAll('.table-btn');
+        const categoryBtns = document.querySelectorAll('.category-btn');
+        const menuSearch = document.getElementById('menuSearch');
+        const menuItemsContainer = document.getElementById('menuItems');
+        const adminTabs = document.querySelectorAll('.admin-tab');
+        const tabContents = document.querySelectorAll('.tab-content');
+        const ordersTab = document.getElementById('ordersTab');
+        const menuTab = document.getElementById('menuTab');
+        const categoriesTab = document.getElementById('categoriesTab');
+        const tablesTab = document.getElementById('tablesTab');
+        const addMenuItemBtn = document.getElementById('addMenuItemBtn');
+        const addMenuItemModal = document.getElementById('addMenuItemModal');
+        const closeMenuItemModal = document.getElementById('closeMenuItemModal');
+        const cancelMenuItem = document.getElementById('cancelMenuItem');
+        const menuItemForm = document.getElementById('menuItemForm');
+        const adminMenuItems = document.getElementById('adminMenuItems');
+        const adminCategories = document.getElementById('adminCategories');
+        const addCategoryBtn = document.getElementById('addCategoryBtn');
+        const tablesList = document.getElementById('tablesList');
+        const addTableBtn = document.getElementById('addTableBtn');
+        const notification = document.getElementById('notification');
+        const notificationTitle = document.getElementById('notification-title');
+        const notificationMessage = document.getElementById('notification-message');
+        const closeNotification = document.getElementById('close-notification');
+        // Initialize the app
+        function init() {
+            renderMenuItems();
+            renderAdminMenuItems();
+            renderAdminCategories();
+            renderOrders();
+            renderTables();
+            setupEventListeners();
+        }
+        // Set up event listeners
+        function setupEventListeners() {
+            // View toggle
+            customerBtn.addEventListener('click', () => {
+                customerView.classList.remove('hidden');
+                adminView.classList.add('hidden');
+                customerBtn.classList.add('from-orange-500', 'to-red-500');
+                customerBtn.classList.remove('bg-gray-200', 'text-gray-800');
+                adminBtn.classList.add('from-gray-800', 'to-gray-700');
+                adminBtn.classList.remove('bg-gray-200', 'text-gray-800');
+            });
+            adminBtn.addEventListener('click', () => {
+                customerView.classList.add('hidden');
+                adminView.classList.remove('hidden');
+                adminBtn.classList.add('from-gray-800', 'to-gray-700');
+                adminBtn.classList.remove('bg-gray-200', 'text-gray-800');
+                customerBtn.classList.add('bg-gray-200', 'text-gray-800');
+                customerBtn.classList.remove('from-orange-500', 'to-red-500');
+            });
+            // Mobile view toggle
+            mobileCustomerBtn.addEventListener('click', () => {
+                customerView.classList.remove('hidden');
+                adminView.classList.add('hidden');
+            });
+            mobileAdminBtn.addEventListener('click', () => {
+                customerView.classList.add('hidden');
+                adminView.classList.remove('hidden');
+            });
+            // Cart toggle
+            cartIcon.addEventListener('click', toggleCart);
+            closeCartBtn.addEventListener('click', toggleCart);
+            cartOverlay.addEventListener('click', toggleCart);
+            // Table selection
+            tableBtns.forEach(btn => {
+                btn.addEventListener('click', () => {
+                    selectedTable = btn.dataset.table;
+                    selectedTableDisplay.textContent = `Table ${selectedTable}`;
+                    updatePlaceOrderButton();
+                    // Update active table button
+                    tableBtns.forEach(b => {
+                        b.classList.remove('bg-orange-500', 'text-white');
+                        b.classList.add('bg-gray-50', 'border', 'border-gray-200');
+                    });
+                    btn.classList.add('bg-orange-500', 'text-white');
+                    btn.classList.remove('bg-gray-50', 'border', 'border-gray-200');
+                });
+            });
+            // Category filter
+            categoryBtns.forEach(btn => {
+                btn.addEventListener('click', () => {
+                    selectedCategory = btn.dataset.category;
+                    // Update active category button
+                    categoryBtns.forEach(b => {
+                        if (b.dataset.category === selectedCategory) {
+                            b.classList.add('active');
+                        } else {
+                            b.classList.remove('active');
+                        }
+                    });
+                    renderMenuItems();
+                });
+            });
+            // Search
+            menuSearch.addEventListener('input', (e) => {
+                searchQuery = e.target.value.toLowerCase();
+                renderMenuItems();
+            });
+            // Admin tabs
+            adminTabs.forEach(tab => {
+                tab.addEventListener('click', () => {
+                    const tabId = tab.dataset.tab + 'Tab';
+                    // Update active tab
+                    adminTabs.forEach(t => {
+                        t.classList.remove('border-orange-500', 'text-orange-600');
+                    });
+                    tab.classList.add('border-orange-500', 'text-orange-600');
+                    // Show corresponding content
+                    tabContents.forEach(content => {
+                        content.classList.remove('active');
+                    });
+                    document.getElementById(tabId).classList.add('active');
+                });
+            });
+            // Add menu item modal
+            addMenuItemBtn.addEventListener('click', () => {
+                addMenuItemModal.classList.remove('hidden');
+            });
+            closeMenuItemModal.addEventListener('click', () => {
+                addMenuItemModal.classList.add('hidden');
+            });
+            cancelMenuItem.addEventListener('click', () => {
+                addMenuItemModal.classList.add('hidden');
+            });
+            // Notification
+            closeNotification.addEventListener('click', () => {
+                notification.classList.add('hidden');
+            });
+            // Place order
+            placeOrderBtn.addEventListener('click', placeOrder);
+        }
+        // Show notification
+        function showNotification(title, message) {
+            notificationTitle.textContent = title;
+            notificationMessage.textContent = message;
+            notification.classList.remove('hidden');
+            setTimeout(() => {
+                notification.classList.add('hidden');
+            }, 3000);
+        }
+        // Toggle cart sidebar
+        function toggleCart() {
+            cartSidebar.classList.toggle('translate-x-full');
+            cartOverlay.classList.toggle('hidden');
+        }
+        // Render menu items based on filters
+        function renderMenuItems() {
+            menuItemsContainer.innerHTML = '';
+            const filteredItems = menuItems.filter(item => {
+                const matchesCategory = selectedCategory === 'all' || item.category === selectedCategory;
+                const matchesSearch = item.name.toLowerCase().includes(searchQuery) ||
+                                      item.description.toLowerCase().includes(searchQuery);
+                return matchesCategory && matchesSearch;
+            });
+            if (filteredItems.length === 0) {
+                menuItemsContainer.innerHTML = `
+                    <div class="col-span-full text-center py-10">
+                        <i class="fas fa-utensils text-4xl text-gray-300 mb-2"></i>
+                        <p class="text-gray-500 font-medium">No menu items found</p>
+                        <p class="text-sm text-gray-400">Try adjusting your search or filter</p>
+                    </div>
+                `;
+                return;
+            }
+            filteredItems.forEach(item => {
+                const cartItem = cart.find(ci => ci.id === item.id);
+                const quantity = cartItem ? cartItem.quantity : 0;
+                const itemElement = document.createElement('div');
+                itemElement.className = 'menu-item-card bg-white rounded-xl shadow-sm overflow-hidden border border-gray-100';
+                itemElement.innerHTML = `
+                    <div class="h-48 overflow-hidden relative">
+                        <img src="${item.image}" alt="${item.name}" class="w-full h-full object-cover">
+                        <div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div>
+                        <div class="absolute bottom-0 left-0 p-4">
+                            <h3 class="font-semibold text-white text-lg">${item.name}</h3>
+                            <span class="font-bold text-orange-300">$${item.price.toFixed(2)}</span>
+                        </div>
+                    </div>
+                    <div class="p-4">
+                        <p class="text-gray-600 text-sm mb-4">${item.description}</p>
+                        <div class="flex items-center justify-between">
+                            <div class="flex items-center border border-gray-200 rounded-lg overflow-hidden">
+                                <button class="quantity-btn px-3 py-1 bg-gray-50 hover:bg-gray-100 transition" data-id="${item.id}" data-action="decrease">
+                                    <i class="fas fa-minus text-xs"></i>
+                                </button>
+                                <span class="px-3 quantity-display text-sm font-medium">${quantity}</span>
+                                <button class="quantity-btn px-3 py-1 bg-gray-50 hover:bg-gray-100 transition" data-id="${item.id}" data-action="increase">
+                                    <i class="fas fa-plus text-xs"></i>
+                                </button>
+                            </div>
+                            <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}">
+                                <i class="fas fa-cart-plus mr-1 text-xs"></i> Add
+                            </button>
+                        </div>
+                    </div>
+                `;
+                menuItemsContainer.appendChild(itemElement);
+            });
+            // Add event listeners to quantity buttons
+            document.querySelectorAll('.quantity-btn').forEach(btn => {
+                btn.addEventListener('click', (e) => {
+                    const itemId = parseInt(btn.dataset.id);
+                    const action = btn.dataset.action;
+                    updateCartItem(itemId, action);
+                });
+            });
+            // Add event listeners to add to cart buttons
+            document.querySelectorAll('.add-to-cart-btn').forEach(btn => {
+                btn.addEventListener('click', (e) => {
+                    const itemId = parseInt(btn.dataset.id);
+                    addToCart(itemId);
+                });
+            });
+        }
+        // Render admin menu items
+        function renderAdminMenuItems() {
+            adminMenuItems.innerHTML = '';
+            menuItems.forEach(item => {
+                const itemElement = document.createElement('tr');
+                itemElement.className = 'hover:bg-gray-50';
+                itemElement.innerHTML = `
+                    <td class="px-6 py-4 whitespace-nowrap">
+                        <div class="flex items-center">
+                            <div class="flex-shrink-0 h-10 w-10">
+                                <img src="${item.image}" alt="${item.name}" class="h-10 w-10 rounded-full object-cover">
+                            </div>
+                            <div class="ml-4">
+                                <div class="text-sm font-medium text-gray-900">${item.name}</div>
+                                <div class="text-xs text-gray-500 line-clamp-1">${item.description}</div>
+                            </div>
+                        </div>
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap">
+                        <span class="px-2 py-1 text-xs font-medium rounded-full bg-gray-100 text-gray-800 capitalize">${item.category}</span>
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap">
+                        <div class="text-sm font-medium text-gray-900">$${item.price.toFixed(2)}</div>
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                        <button class="text-orange-600 hover:text-orange-900 mr-3 edit-item-btn" data-id="${item.id}">
+                            <i class="fas fa-edit"></i>
+                        </button>
+                        <button class="text-red-600 hover:text-red-900 delete-item-btn" data-id="${item.id}">
+                            <i class="fas fa-trash"></i>
+                        </button>
+                    </td>
+                `;
+                adminMenuItems.appendChild(itemElement);
+            });
+        }
+        // Render admin categories
+        function renderAdminCategories() {
+            adminCategories.innerHTML = '';
+            categories.forEach(category => {
+                const categoryElement = document.createElement('tr');
+                categoryElement.className = 'hover:bg-gray-50';
+                categoryElement.innerHTML = `
+                    <td class="px-6 py-4 whitespace-nowrap">
+                        <div class="text-sm font-medium text-gray-900 capitalize">${category.slug}</div>
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap">
+                        <div class="text-sm text-gray-900">${category.itemCount} items</div>
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                        <button class="text-orange-600 hover:text-orange-900 mr-3 edit-category-btn" data-id="${category.id}">
+                            <i class="fas fa-edit"></i>
+                        </button>
+                        <button class="text-red-600 hover:text-red-900 delete-category-btn" data-id="${category.id}">
+                            <i class="fas fa-trash"></i>
+                        </button>
+                    </td>
+                `;
+                adminCategories.appendChild(categoryElement);
+            });
+        }
+        // Render orders
+        function renderOrders() {
+            const ordersTableBody = document.querySelector('#ordersTab tbody');
+            ordersTableBody.innerHTML = '';
+            orders.forEach(order => {
+                const orderElement = document.createElement('tr');
+                orderElement.className = 'hover:bg-gray-50';
+                orderElement.innerHTML = `
+                    <td class="px-6 py-4 whitespace-nowrap">
+                        <div class="text-sm font-medium text-gray-900">#${order.id}</div>
+                        <div class="text-xs text-gray-500">${new Date(order.timestamp).toLocaleTimeString()}</div>
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap">
+                        <div class="text-sm text-gray-900">Table ${order.table}</div>
+                    </td>
+                    <td class="px-6 py-4">
+                        <div class="text-sm text-gray-900 line-clamp-1">
+                            ${order.items.map(item => `${item.quantity}x ${item.name}`).join(', ')}
+                        </div>
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap">
+                        <div class="text-sm font-medium text-gray-900">$${order.total.toFixed(2)}</div>
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap">
+                        <span class="px-2 py-1 text-xs font-semibold rounded-full order-status ${order.status} capitalize">
+                            ${order.status}
+                        </span>
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                        <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}">
+                            <option value="pending" ${order.status === 'pending' ? 'selected' : ''}>Pending</option>
+                            <option value="preparing" ${order.status === 'preparing' ? 'selected' : ''}>Preparing</option>
+                            <option value="served" ${order.status === 'served' ? 'selected' : ''}>Served</option>
+                            <option value="cancelled" ${order.status === 'cancelled' ? 'selected' : ''}>Cancelled</option>
+                        </select>
+                    </td>
+                `;
+                ordersTableBody.appendChild(orderElement);
+            });
+            // Add event listeners to status selects
+            document.querySelectorAll('.status-select').forEach(select => {
+                select.addEventListener('change', (e) => {
+                    const orderId = parseInt(select.dataset.orderId);
+                    const newStatus = select.value;
+                    updateOrderStatus(orderId, newStatus);
+                });
+            });
+        }
+        // Render tables
+        function renderTables() {
+            tablesList.innerHTML = '';
+            tables.forEach(table => {
+                const tableElement = document.createElement('div');
+                tableElement.className = 'table-card bg-white rounded-xl shadow-sm overflow-hidden border border-gray-100';
+                tableElement.innerHTML = `
+                    <div class="p-4">
+                        <div class="flex justify-between items-start mb-2">
+                            <h3 class="font-semibold text-lg">Table ${table.number}</h3>
+                            <span class="text-xs font-medium px-2 py-1 rounded-full ${table.status === 'available' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}">
+                                ${table.status === 'available' ? 'Available' : 'Occupied'}
+                            </span>
+                        </div>
+                        <div class="mb-4">
+                            <div class="w-full h-32 bg-gray-100 rounded-lg flex items-center justify-center">
+                                <i class="fas fa-qrcode text-4xl text-gray-400"></i>
+                            </div>
+                        </div>
+                        <div class="flex justify-between items-center">
+                            <button class="text-xs text-blue-500 hover:text-blue-700 flex items-center">
+                                <i class="fas fa-download mr-1"></i> QR Code
+                            </button>
+                            <div class="flex space-x-2">
+                                <button class="edit-table-btn text-xs text-orange-500 hover:text-orange-700 flex items-center" data-id="${table.id}">
+                                    <i class="fas fa-edit mr-1"></i> Edit
+                                </button>
+                                <button class="delete-table-btn text-xs text-red-500 hover:text-red-700 flex items-center" data-id="${table.id}">
+                                    <i class="fas fa-trash mr-1"></i> Delete
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                `;
+                tablesList.appendChild(tableElement);
+            });
+        }
+        // Add item to cart
+        function addToCart(itemId) {
+            const item = menuItems.find(i => i.id === itemId);
+            if (!item) return;
+            const existingItem = cart.find(i => i.id === itemId);
+            if (existingItem) {
+                existingItem.quantity += 1;
+            } else {
+                cart.push({
+                    id: item.id,
+                    name: item.name,
+                    price: item.price,
+                    quantity: 1
+                });
+            }
+            updateCart();
+            renderMenuItems();
+            showNotification('Item Added', `${item.name} has been added to your cart`);
+        }
+        // Update cart item quantity
+        function updateCartItem(itemId, action) {
+            const itemIndex = cart.findIndex(i => i.id === itemId);
+            if (itemIndex === -1) return;
+            if (action === 'increase') {
+                cart[itemIndex].quantity += 1;
+            } else if (action === 'decrease') {
+                cart[itemIndex].quantity -= 1;
+                if (cart[itemIndex].quantity <= 0) {
+                    cart.splice(itemIndex, 1);
+                }
+            }
+            updateCart();
+            renderMenuItems();
+        }
+        // Update cart display
+        function updateCart() {
+            // Update cart count
+            const totalItems = cart.reduce((total, item) => total + item.quantity, 0);
+            cartCount.textContent = totalItems;
+            // Update cart items
+            cartItems.innerHTML = '';
+            if (cart.length === 0) {
+                emptyCartMessage.classList.remove('hidden');
+            } else {
+                emptyCartMessage.classList.add('hidden');
+                cart.forEach(item => {
+                    const itemElement = document.createElement('div');
+                    itemElement.className = 'cart-item flex justify-between items-center mb-4 pb-4 border-b border-gray-100';
+                    itemElement.innerHTML = `
+                        <div>
+                            <h4 class="font-medium">${item.name}</h4>
+                            <p class="text-sm text-gray-600">$${item.price.toFixed(2)} x ${item.quantity}</p>
+                        </div>
+                        <div class="flex items-center">
+                            <span class="font-medium mr-4">$${(item.price * item.quantity).toFixed(2)}</span>
+                            <button class="remove-btn px-2 py-1 bg-gray-100 text-gray-500 rounded-lg hover:bg-gray-200 transition opacity-0" data-id="${item.id}">
+                                <i class="fas fa-trash text-sm"></i>
+                            </button>
+                        </div>
+                    `;
+                    cartItems.appendChild(itemElement);
+                });
+                // Add event listeners to remove buttons
+                document.querySelectorAll('.remove-btn').forEach(btn => {
+                    btn.addEventListener('click', (e) => {
+                        const itemId = parseInt(btn.dataset.id);
+                        removeFromCart(itemId);
+                    });
+                });
+            }
+            // Update totals
+            const subtotal = cart.reduce((total, item) => total + (item.price * item.quantity), 0);
+            const tax = subtotal * 0.1;
+            const total = subtotal + tax;
+            cartSubtotal.textContent = `$${subtotal.toFixed(2)}`;
+            cartTax.textContent = `$${tax.toFixed(2)}`;
+            cartTotal.textContent = `$${total.toFixed(2)}`;
+            updatePlaceOrderButton();
+        }
+        // Remove item from cart
+        function removeFromCart(itemId) {
+            const item = menuItems.find(i => i.id === itemId);
+            cart = cart.filter(item => item.id !== itemId);
+            updateCart();
+            renderMenuItems();
+            if (item) {
+                showNotification('Item Removed', `${item.name} has been removed from your cart`);
+            }
+        }
+        // Update place order button state
+        function updatePlaceOrderButton() {
+            if (cart.length > 0 && selectedTable) {
+                placeOrderBtn.disabled = false;
+            } else {
+                placeOrderBtn.disabled = true;
+            }
+        }
+        // Place order
+        function placeOrder() {
+            if (cart.length === 0 || !selectedTable) return;
+            // Create order object
+            const newOrder = {
+                id: orders.length + 1,
+                table: selectedTable,
+                items: cart.map(item => ({
+                    id: item.id,
+                    name: item.name,
+                    quantity: item.quantity,
+                    price: item.price
+                })),
+                total: cart.reduce((total, item) => total + (item.price * item.quantity), 0),
+                status: "pending",
+                timestamp: new Date().toISOString()
+            };
+            // Add to orders
+            orders.unshift(newOrder);
+            // Reset cart and table selection
+            cart = [];
+            selectedTable = null;
+            selectedTableDisplay.textContent = "Not selected";
+            // Update UI
+            updateCart();
+            renderMenuItems();
+            renderOrders();
+            toggleCart();
+            // Reset table buttons
+            tableBtns.forEach(btn => {
+                btn.classList.remove('bg-orange-500', 'text-white');
+                btn.classList.add('bg-gray-50', 'border', 'border-gray-200');
+            });
+            // Show success message
+            showNotification('Order Placed', `Order #${newOrder.id} placed successfully for Table ${newOrder.table}!`);
+        }
+        // Update order status
+        function updateOrderStatus(orderId, newStatus) {
+            const order = orders.find(o => o.id === orderId);
+            if (order) {
+                order.status = newStatus;
+                renderOrders();
+                showNotification('Order Updated', `Order #${orderId} status changed to ${newStatus}`);
+            }
+        }
+        // Initialize the app
+        init();
+    </script>
+<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=Hnxrec/resturant-space" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

File without changes