voicemenuspe

Running

App Files Files Community

lokesh341 commited on 15 days ago

Commit

1ea5871

verified ·

1 Parent(s): a11265e

Update templates/menu_page.html

Browse files

Files changed (1) hide show

templates/menu_page.html +82 -52

templates/menu_page.html CHANGED Viewed

@@ -4,19 +4,69 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Biryani Hub Menu</title>
-    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <style>
-        body { font-family: Arial, sans-serif; background-color: #f8f8f8; margin: 0; padding: 0; }
-        .menu-container { max-width: 1200px; margin: 0 auto; padding: 20px; background-color: #fff; border-radius: 8px; margin-top: 20px; }
-        h1 { text-align: center; font-size: 2.5rem; color: #333; }
-        .menu-item { margin-bottom: 20px; padding: 10px; border: 1px solid #ddd; border-radius: 5px; }
-        .menu-item img { width: 100px; height: 100px; border-radius: 8px; margin-right: 10px; }
-        .details { display: flex; align-items: center; }
-        .text { margin-left: 10px; }
-        .menu-option { margin: 20px; font-size: 1.5rem; text-align: center; }
-        .menu-option button { font-size: 1.2rem; padding: 10px 20px; margin: 10px; cursor: pointer; }
-        .cart-container { margin-top: 30px; padding: 10px; border: 1px solid #ddd; border-radius: 5px; background-color: #eaf3e1; }
-        .cart-item { display: flex; justify-content: space-between; margin-bottom: 10px; }
         .view-cart-button {
             background-color: #007bff;
             color: #fff;
@@ -37,39 +87,36 @@
 </head>
 <body>
-    <div class="menu-container">
-        <h1>Welcome to the Menu</h1>
-        <!-- Buttons to select vegetarian or non-vegetarian menu -->
         <div class="menu-option">
             <button onclick="showMenu('veg')">Vegetarian Menu</button>
             <button onclick="showMenu('nonVeg')">Non-Vegetarian Menu</button>
         </div>
-        <div id="menu-items"></div>
-        <button onclick="viewCart()">View Cart</button>
     </div>
-    <!-- Order History Section -->
-    <div class="container mt-4">
-        <h2 class="text-center">Order History</h2>
-        <div id="order-history">
-            <!-- Order history details will be dynamically loaded here -->
         </div>
     </div>
-    <!-- Cart View -->
-    <div class="cart-container" id="cart-container" style="display:none;">
         <h2>Your Cart</h2>
         <div id="cart-items"></div>
         <button onclick="placeOrder()">Place Final Order</button>
     </div>
-    <div class="view-cart-button">
-        <a href="javascript:void(0);" onclick="viewCart()">
             View Cart
         </a>
     </div>
     <script>
         const menuItems = {
             veg: [
                 { name: 'Samosa', price: 9, ingredients: 'Potatoes, Peas, Flour, Spices', description: 'Crispy fried pastry filled with spiced potatoes and peas.', imageUrl: 'https://via.placeholder.com/100' },
@@ -85,9 +132,15 @@
         const cart = [];
         function showMenu(type) {
             const menuContainer = document.getElementById('menu-items');
             menuContainer.innerHTML = ''; // Clear previous menu items
             menuItems[type].forEach(item => {
                 const div = document.createElement('div');
                 div.classList.add('menu-item');
@@ -105,6 +158,7 @@
             });
         }
         function addToCart(itemName) {
             const quantity = prompt(`How many ${itemName} would you like to add?`, 1);
             if (quantity && !isNaN(quantity) && quantity > 0) {
@@ -117,6 +171,7 @@
             }
         }
         function viewCart() {
             const cartContainer = document.getElementById('cart-container');
             const cartItemsContainer = document.getElementById('cart-items');
@@ -130,6 +185,7 @@
             cartContainer.style.display = 'block';
         }
         function placeOrder() {
             if (cart.length > 0) {
                 alert("Your order has been placed successfully!");
@@ -139,32 +195,6 @@
                 alert("Your cart is empty. Please add items before placing the order.");
             }
         }
-        // Example Order History (You can fetch this dynamically from the backend)
-        const orders = [
-            { date: '2023-02-20', orderDetails: 'Chicken Biryani, Butter Chicken', totalAmount: 45, status: 'Completed' },
-            { date: '2023-02-19', orderDetails: 'Paneer Butter Masala, Vegetable Biryani', totalAmount: 35, status: 'Pending' },
-            { date: '2023-02-18', orderDetails: 'Mutton Biryani, Chicken Shawarma', totalAmount: 60, status: 'Cancelled' }
-        ];
-        // Render Order History
-        const orderHistoryContainer = document.getElementById('order-history');
-        if (orders.length > 0) {
-            orders.forEach(order => {
-                const orderCard = document.createElement('div');
-                orderCard.classList.add('order-card');
-                orderCard.innerHTML = `
-                    <p><strong>Date:</strong> ${order.date}</p>
-                    <p><strong>Order:</strong> ${order.orderDetails}</p>
-                    <p><strong>Total Amount:</strong> $${order.totalAmount}</p>
-                    <p><span class="order-status ${order.status === 'Completed' ? 'status-completed' : order.status === 'Pending' ? 'status-pending' : 'status-cancelled'}">${order.status}</span></p>
-                `;
-                orderHistoryContainer.appendChild(orderCard);
-            });
-        } else {
-            orderHistoryContainer.innerHTML = '<p>No past orders found.</p>';
-        }
     </script>
 </body>

     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Biryani Hub Menu</title>
     <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #f8f8f8;
+            margin: 0;
+            padding: 0;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 50px auto;
+            text-align: center;
+        }
+        h1 {
+            font-size: 2.5rem;
+            color: #333;
+        }
+        .menu-option button {
+            font-size: 1.2rem;
+            padding: 10px 20px;
+            margin: 20px;
+            cursor: pointer;
+            border: none;
+            border-radius: 5px;
+            background-color: #007bff;
+            color: white;
+        }
+        .menu-option button:hover {
+            background-color: #0056b3;
+        }
+        .menu-item {
+            display: inline-block;
+            width: 30%;
+            margin: 10px;
+            padding: 10px;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            background-color: #fff;
+        }
+        .menu-item img {
+            width: 100px;
+            height: 100px;
+            border-radius: 8px;
+            margin-bottom: 10px;
+        }
+        .cart-container {
+            margin-top: 30px;
+            padding: 10px;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            background-color: #eaf3e1;
+            display: none;
+        }
+        .cart-item {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 10px;
+        }
+        .view-cart-container {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            z-index: 999;
+        }
         .view-cart-button {
             background-color: #007bff;
             color: #fff;
 </head>
 <body>
+    <div class="container" id="welcome-container">
+        <h1>Welcome to the Biryani Hub Menu</h1>
         <div class="menu-option">
             <button onclick="showMenu('veg')">Vegetarian Menu</button>
             <button onclick="showMenu('nonVeg')">Non-Vegetarian Menu</button>
         </div>
     </div>
+    <div class="container" id="menu-container" style="display: none;">
+        <h1>Menu</h1>
+        <div id="menu-items" class="row">
+            <!-- Dynamically populated menu items will appear here -->
         </div>
+        <button onclick="viewCart()">View Cart</button>
     </div>
+    <div class="cart-container" id="cart-container">
         <h2>Your Cart</h2>
         <div id="cart-items"></div>
         <button onclick="placeOrder()">Place Final Order</button>
     </div>
+    <div class="view-cart-container">
+        <a href="javascript:void(0);" class="view-cart-button" onclick="viewCart()">
             View Cart
         </a>
     </div>
     <script>
+        // Menu data
         const menuItems = {
             veg: [
                 { name: 'Samosa', price: 9, ingredients: 'Potatoes, Peas, Flour, Spices', description: 'Crispy fried pastry filled with spiced potatoes and peas.', imageUrl: 'https://via.placeholder.com/100' },
         const cart = [];
+        // Function to show the menu based on selected type
         function showMenu(type) {
+            // Hide the welcome screen and show the menu
+            document.getElementById('welcome-container').style.display = 'none';
+            document.getElementById('menu-container').style.display = 'block';
             const menuContainer = document.getElementById('menu-items');
             menuContainer.innerHTML = ''; // Clear previous menu items
             menuItems[type].forEach(item => {
                 const div = document.createElement('div');
                 div.classList.add('menu-item');
             });
         }
+        // Function to add items to the cart
         function addToCart(itemName) {
             const quantity = prompt(`How many ${itemName} would you like to add?`, 1);
             if (quantity && !isNaN(quantity) && quantity > 0) {
             }
         }
+        // Function to view the cart
         function viewCart() {
             const cartContainer = document.getElementById('cart-container');
             const cartItemsContainer = document.getElementById('cart-items');
             cartContainer.style.display = 'block';
         }
+        // Function to place the final order
         function placeOrder() {
             if (cart.length > 0) {
                 alert("Your order has been placed successfully!");
                 alert("Your cart is empty. Please add items before placing the order.");
             }
         }
     </script>
 </body>