voicemenu143

Sleeping

App Files Files Community

lokesh341 commited on 14 days ago

Commit

86b7bfb

verified ·

1 Parent(s): 7a88679

Update templates/menu_page.html

Browse files

Files changed (1) hide show

templates/menu_page.html +167 -125

templates/menu_page.html CHANGED Viewed

@@ -4,169 +4,211 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Restaurant Menu</title>
     <style>
         body {
             font-family: Arial, sans-serif;
-            background-color: #f8f9fa;
-            text-align: center;
             margin: 0;
-            padding: 20px;
         }
         h1 {
-            color: #ff5722;
         }
-        .menu-container {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: center;
-            margin-top: 20px;
         }
         .menu-item {
-            background: white;
-            padding: 15px;
             margin: 10px;
-            border-radius: 8px;
-            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
-            width: 300px;
-            text-align: left;
-        }
-        .menu-item h3 {
-            margin: 0;
-            color: #333;
-        }
-        .menu-item p {
-            margin: 5px 0;
-            color: #555;
-        }
-        .menu-item button {
-            background-color: #ff5722;
-            color: white;
-            border: none;
-            padding: 8px;
-            cursor: pointer;
-            width: 100%;
             border-radius: 5px;
         }
-        .menu-item button:hover {
-            background-color: #e64a19;
         }
         .cart-container {
             margin-top: 30px;
-            padding: 15px;
-            background: white;
-            border-radius: 8px;
-            width: 50%;
-            margin-left: auto;
-            margin-right: auto;
-            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
-            text-align: left;
-        }
-        .cart-container h2 {
-            text-align: center;
-            color: #ff5722;
         }
         .cart-item {
             display: flex;
             justify-content: space-between;
-            border-bottom: 1px solid #ddd;
-            padding: 5px 0;
         }
-        .cart-total {
-            font-size: 18px;
             font-weight: bold;
-            text-align: right;
-            margin-top: 10px;
         }
     </style>
 </head>
 <body>
-    <h1>Restaurant Menu</h1>
-    <div class="menu-container" id="menu-list">
-        <p>Loading menu...</p>
     </div>
-    <div class="cart-container">
-        <h2>Your Cart</h2>
-        <div id="cart-list">
-            <p>No items in cart.</p>
         </div>
-        <p class="cart-total" id="cart-total">Total: $0.00</p>
     </div>
     <script>
-        let cart = [];
-        function fetchMenu() {
-            fetch("/menu")  // Fetch from Flask API
-                .then(response => response.json())
-                .then(data => {
-                    if (data.success) {
-                        let menuContainer = document.getElementById("menu-list");
-                        menuContainer.innerHTML = "";
-                        data.menu.forEach(item => {
-                            let menuItem = document.createElement("div");
-                            menuItem.classList.add("menu-item");
-                            menuItem.innerHTML = `
-                                <h3>${item.name}</h3>
-                                <p><strong>Category:</strong> ${item.category}</p>
-                                <p><strong>Price:</strong> $${item.price.toFixed(2)}</p>
-                                <p><strong>Ingredients:</strong> ${item.ingredients}</p>
-                                <button onclick="addToCart('${item.name}', ${item.price})">Add to Cart</button>
-                            `;
-                            menuContainer.appendChild(menuItem);
-                        });
-                    } else {
-                        document.getElementById("menu-list").innerHTML = "<p>Error loading menu.</p>";
-                    }
-                })
-                .catch(error => {
-                    console.error("Error fetching menu:", error);
-                    document.getElementById("menu-list").innerHTML = "<p>Unable to load menu.</p>";
-                });
-        }
-        function addToCart(name, price) {
-            cart.push({ name, price });
-            updateCart();
-        }
-        function updateCart() {
-            let cartContainer = document.getElementById("cart-list");
-            let totalContainer = document.getElementById("cart-total");
-            if (cart.length === 0) {
-                cartContainer.innerHTML = "<p>No items in cart.</p>";
-                totalContainer.innerText = "Total: $0.00";
-                return;
-            }
-            cartContainer.innerHTML = "";
-            let total = 0;
-            cart.forEach((item, index) => {
-                total += item.price;
-                let cartItem = document.createElement("div");
-                cartItem.classList.add("cart-item");
-                cartItem.innerHTML = `
-                    <span>${item.name} - $${item.price.toFixed(2)}</span>
-                    <button onclick="removeFromCart(${index})" style="background-color: red; padding: 4px; font-size: 12px;">Remove</button>
-                `;
-                cartContainer.appendChild(cartItem);
             });
-            totalContainer.innerText = `Total: $${total.toFixed(2)}`;
         }
-        function removeFromCart(index) {
-            cart.splice(index, 1);
-            updateCart();
         }
-        window.onload = fetchMenu;
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Biryani Hub Menu</title>
     <style>
+        /* General Styling */
         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 Buttons */
+        .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 Items */
         .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 Section */
         .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 Button */
+        .view-cart-container {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            z-index: 999;
+        }
+        .view-cart-button {
+            background-color: #007bff;
+            color: #fff;
+            padding: 10px 20px;
+            border-radius: 50px;
+            font-size: 1rem;
             font-weight: bold;
+            text-decoration: none;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .view-cart-button:hover {
+            background-color: #0056b3;
+            text-decoration: none;
         }
     </style>
 </head>
 <body>
+    <!-- Welcome Section -->
+    <div class="container" id="welcome-container">
+        <h1>Welcome to the Biryani Hub Menu</h1>
+        <div class="menu-option">
+            <button id="veg-btn" onclick="showMenu('veg')">Vegetarian Menu</button>
+            <button id="non-veg-btn" onclick="showMenu('nonVeg')">Non-Vegetarian Menu</button>
+        </div>
     </div>
+    <!-- Menu Section -->
+    <div class="container" id="menu-container" style="display: none;">
+        <h1>Menu</h1>
+        <div id="menu-items" class="row">
+            <!-- Menu items will be dynamically added here -->
         </div>
+        <button onclick="viewCart()">View Cart</button>
+    </div>
+    <!-- Cart Section -->
+    <div class="cart-container" id="cart-container">
+        <h2>Your Cart</h2>
+        <div id="cart-items"></div>
+        <button onclick="placeOrder()">Place Final Order</button>
+    </div>
+    <!-- Floating View Cart Button -->
+    <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' },
+                { name: 'Onion Pakoda', price: 10, ingredients: 'Onions, Gram Flour, Spices', description: 'Deep-fried onion fritters seasoned with herbs and spices.', imageUrl: 'https://via.placeholder.com/100' },
+                { name: 'Chilli Gobi', price: 12, ingredients: 'Cauliflower, Chili Sauce, Spices', description: 'Cauliflower florets tossed in a spicy chili sauce.', imageUrl: 'https://via.placeholder.com/100' }
+            ],
+            nonVeg: [
+                { name: 'Chicken Biryani', price: 14, ingredients: 'Chicken, Basmati Rice, Spices', description: 'Aromatic basmati rice cooked with tender chicken and spices.', imageUrl: 'https://via.placeholder.com/100' },
+                { name: 'Mutton Biryani', price: 16, ingredients: 'Mutton, Basmati Rice, Spices', description: 'Flavorful rice dish made with succulent mutton and aromatic spices.', imageUrl: 'https://via.placeholder.com/100' },
+                { name: 'Butter Chicken', price: 15, ingredients: 'Chicken, Tomato, Butter, Cream', description: 'Tender chicken cooked in a rich, creamy tomato sauce.', imageUrl: 'https://via.placeholder.com/100' }
+            ]
+        };
+        const cart = [];
+        // Function to Show Menu
+        function showMenu(type) {
+            document.getElementById('welcome-container').style.display = 'none';
+            document.getElementById('menu-container').style.display = 'block';
+            const menuContainer = document.getElementById('menu-items');
+            menuContainer.innerHTML = '';
+            menuItems[type].forEach(item => {
+                const div = document.createElement('div');
+                div.classList.add('menu-item');
+                div.innerHTML = `
+                    <div class="details">
+                        <img src="${item.imageUrl}" alt="${item.name}">
+                        <div class="text">
+                            <h3>${item.name}</h3>
+                            <p>${item.description}</p>
+                            <p><strong>Ingredients:</strong> ${item.ingredients}</p>
+                            <p><strong>Price:</strong> $${item.price}</p>
+                            <button onclick="addToCart('${item.name}')">Add to Cart</button>
+                        </div>
+                    </div>`;
+                menuContainer.appendChild(div);
             });
+        }
+        // Function to Add Items to Cart
+        function addToCart(itemName) {
+            const quantity = prompt(`How many ${itemName} would you like to add?`, 1);
+            if (quantity && !isNaN(quantity) && quantity > 0) {
+                const item = menuItems.veg.concat(menuItems.nonVeg).find(item => item.name === itemName);
+                const cartItem = { ...item, quantity: parseInt(quantity) };
+                cart.push(cartItem);
+                alert(`${quantity} of ${itemName} added to your cart.`);
+            } else {
+                alert("Please enter a valid quantity.");
+            }
         }
+        // Function to View Cart
+        function viewCart() {
+            const cartContainer = document.getElementById('cart-container');
+            const cartItemsContainer = document.getElementById('cart-items');
+            cartItemsContainer.innerHTML = '';
+            cart.forEach(cartItem => {
+                const div = document.createElement('div');
+                div.classList.add('cart-item');
+                div.innerHTML = `<span>${cartItem.name} (x${cartItem.quantity}) - $${cartItem.price * cartItem.quantity}</span>`;
+                cartItemsContainer.appendChild(div);
+            });
+            cartContainer.style.display = 'block';
         }
+        // Function to Place Order
+        function placeOrder() {
+            if (cart.length > 0) {
+                alert("Your order has been placed successfully!");
+                cart.length = 0;
+                viewCart();
+            } else {
+                alert("Your cart is empty. Please add items before placing the order.");
+            }
+        }
     </script>
 </body>
 </html>