voicemenu1433

Sleeping

App Files Files Community

lokesh341 commited on 16 days ago

Commit

be1601b

verified ·

1 Parent(s): 934ceb8

Update templates/menu_page.html

Browse files

Files changed (1) hide show

templates/menu_page.html +68 -86

templates/menu_page.html CHANGED Viewed

@@ -7,44 +7,17 @@
     <!-- Bootstrap CSS -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
     <style>
-        body {
-            font-family: Arial, sans-serif;
-            background-color: #f8f9fa;
-            margin: 0;
-            padding: 0;
-        }
-        .container {
-            max-width: 900px;
-        }
-        .menu-card {
-            max-width: 350px;
-            border-radius: 15px;
-            overflow: hidden;
-            background-color: #fff;
-            margin: auto;
-        }
-        .menu-image {
-            height: 200px;
-            width: 100%;
-            object-fit: cover;
-            border-radius: 15px 15px 0 0;
-        }
-        .card-title {
-            font-size: 1.2rem;
-            font-weight: bold;
-        }
-        .card-text {
-            font-size: 1rem;
-            color: #6c757d;
-        }
-        .btn-primary {
-            font-size: 0.9rem;
-            border-radius: 20px;
-            width: 100px;
-        }
-        .filter-container {
-            margin-bottom: 15px;
-        }
         .view-cart-container {
             position: fixed;
             bottom: 20px;
@@ -71,88 +44,74 @@
     </style>
 </head>
 <body>
-    <div class="d-flex justify-content-between align-items-center p-3" style="background-color: #007bff; color: white;">
-        <div>
-            <h6>Referral Code: <span id="referral-code">{{ referral_code }}</span></h6>
-        </div>
-        <div>
-            <button onclick="window.location.href='{{ url_for('order_history') }}'" class="btn btn-light" style="color: #007bff; font-weight: bold;">
-                Order History
-            </button>
-        </div>
-        <div>
-            <button onclick="window.location.href='{{ url_for('logout') }}'" class="btn btn-light" style="color: #007bff; font-weight: bold;">
-                Logout
-            </button>
-        </div>
-        <div>
-            <h6>Reward Points: <span id="reward-points">{{ reward_points }}</span></h6>
-        </div>
-    </div>
-    <div class="container mt-4">
-        <h1 class="text-center">Menu</h1>
         <!-- Buttons to select vegetarian or non-vegetarian menu -->
-        <div class="text-center mb-4">
-            <button class="btn btn-success" onclick="showMenu('veg')">Vegetarian Menu</button>
-            <button class="btn btn-danger" onclick="showMenu('nonVeg')">Non-Vegetarian Menu</button>
         </div>
-        <!-- Menu Items -->
-        <div id="menu-items" class="row">
-            <!-- Dynamically populated menu items will appear here -->
-        </div>
     </div>
     <!-- View Cart Button -->
     <div class="view-cart-container">
-        <a href="/cart" class="view-cart-button">
             View Cart
         </a>
     </div>
     <script>
-        // Sample data for the menus
         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: 'Vegetable Biryani', price: 15, ingredients: 'Rice, Mixed Vegetables, Spices', description: 'Aromatic rice cooked with seasonal vegetables and spices.', imageUrl: 'https://via.placeholder.com/100' }
             ],
             nonVeg: [
-                { name: 'Chicken Biryani', price: 14, ingredients: 'Chicken, Rice, Spices', description: 'Aromatic rice cooked with tender chicken and 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' },
-                { name: 'Mutton Biryani', price: 16, ingredients: 'Mutton, Rice, Spices', description: 'Flavorful rice dish made with succulent mutton and aromatic spices.', imageUrl: 'https://via.placeholder.com/100' }
             ]
         };
         const cart = [];
-        // Function to display menu based on user's choice (veg or non-veg)
         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('col-md-4', 'mb-4');
-                div.innerHTML = `
-                    <div class="card menu-card">
-                        <img src="${item.imageUrl}" class="card-img-top menu-image" alt="${item.name}">
-                        <div class="card-body">
-                            <h5 class="card-title">${item.name}</h5>
-                            <p class="card-text">${item.description}</p>
-                            <p class="card-text">Price: $${item.price}</p>
-                            <button class="btn btn-primary" onclick="addToCart('${item.name}')">Add to Cart</button>
-                        </div>
-                    </div>
-                `;
                 menuContainer.appendChild(div);
             });
         }
-        // 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) {
@@ -164,7 +123,30 @@
                 alert("Please enter a valid quantity.");
             }
         }
-    </script>
 </body>
 </html>

     <!-- Bootstrap CSS -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/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-container {
             position: fixed;
             bottom: 20px;
     </style>
 </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>
+    <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>
     <!-- View Cart Button -->
     <div class="view-cart-container">
+        <a href="javascript:void(0);" class="view-cart-button" 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' },
                 { 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' },
+                { name: 'Paneer Butter Masala', price: 13, ingredients: 'Paneer, Tomato, Butter, Spices', description: 'Soft paneer cubes in a creamy, flavorful gravy.', imageUrl: 'https://via.placeholder.com/100' },
+                { name: 'Aloo Gobi', price: 10, ingredients: 'Potatoes, Cauliflower, Spices', description: 'A traditional Indian curry with potatoes and cauliflower.', imageUrl: 'https://via.placeholder.com/100' },
+                { name: 'Vegetable Biryani', price: 15, ingredients: 'Basmati Rice, Mixed Vegetables, Spices', description: 'Aromatic rice cooked with seasonal vegetables and spices.', 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' },
+                { name: 'Chicken Tikka', price: 12, ingredients: 'Chicken, Yogurt, Spices', description: 'Grilled chicken marinated in yogurt and spices.', imageUrl: 'https://via.placeholder.com/100' },
+                { name: 'Prawn Masala', price: 20, ingredients: 'Prawns, Spices, Tomatoes', description: 'Juicy prawns cooked in a flavorful, spicy masala.', imageUrl: 'https://via.placeholder.com/100' }
             ]
         };
         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');
+                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 addToCart(itemName) {
             const quantity = prompt(`How many ${itemName} would you like to add?`, 1);
             if (quantity && !isNaN(quantity) && quantity > 0) {
                 alert("Please enter a valid quantity.");
             }
         }
+        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 placeOrder() {
+            if (cart.length > 0) {
+                alert("Your order has been placed successfully!");
+                cart.length = 0; // Clear the cart after placing the order
+                viewCart(); // Optionally, update cart view
+            } else {
+                alert("Your cart is empty. Please add items before placing the order.");
+            }
+        }
+    </script>
 </body>
 </html>