voicemenuspe

Running

App Files Files Community

lokesh341 commited on 16 days ago

Commit

6928c0e

verified ·

1 Parent(s): c99469e

Update templates/menu_page.html

Browse files

Files changed (1) hide show

templates/menu_page.html +45 -35

templates/menu_page.html CHANGED Viewed

@@ -14,17 +14,24 @@
         .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; }
     </style>
 </head>
 <body>
     <div class="menu-container">
         <h1>Welcome to the Menu</h1>
         <div id="menu-items"></div>
     </div>
     <script>
         const menuItems = [
-            // Vegetarian Items
             { 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', category: 'veg' },
             { 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', category: 'veg' },
             { 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', category: 'veg' },
@@ -59,57 +66,60 @@
         ];
         const menuContainer = document.getElementById('menu-items');
-        // Function to automatically display either Veg or Non-Veg menu based on the category
-        function showMenu(type) {
             menuContainer.innerHTML = ''; // Clear previous menu items
-            const filteredItems = menuItems.filter(item => item.category === type);
-            filteredItems.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></div></div>`;
                 menuContainer.appendChild(div);
             });
         }
-        // Function to ask user whether they want Veg or Non-Veg items
-        function askForMenuChoice() {
-            const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
-            recognition.lang = 'en-US';
-            recognition.interimResults = false;
-            recognition.onresult = (event) => {
-                const command = event.results[0][0].transcript.toLowerCase();
-                if (command.includes('veg')) {
-                    showMenu('veg');
-                    speak('Here are the Veg items.');
-                } else if (command.includes('non-veg')) {
-                    showMenu('non-veg');
-                    speak('Here are the Non-Veg items.');
-                } else {
-                    speak('Please say Veg or Non-Veg to choose the menu.');
-                    recognition.start();
-                }
-            };
-            recognition.onerror = () => { speak('Sorry, I could not understand. Please try again.'); };
-            speak('Would you like to see the Veg or Non-Veg menu?', () => {
-                recognition.start();
             });
         }
-        // Speech synthesis function
-        function speak(text, callback) {
             const msg = new SpeechSynthesisUtterance(text);
-            msg.onend = callback;
             window.speechSynthesis.speak(msg);
         }
-        window.onload = askForMenuChoice; // Automatically ask for menu choice when page loads
     </script>
 </body>
 </html>

         .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; }
     </style>
 </head>
 <body>
     <div class="menu-container">
         <h1>Welcome to the Menu</h1>
         <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>
     </div>
     <script>
         const menuItems = [
             { 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', category: 'veg' },
             { 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', category: 'veg' },
             { 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', category: 'veg' },
         ];
         const menuContainer = document.getElementById('menu-items');
+        const cart = [];
+        // Function to automatically display the menu
+        function showMenu() {
             menuContainer.innerHTML = ''; // Clear previous menu items
+            menuItems.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>
+                                        <p><strong>Quantity:</strong> <input type="number" id="quantity-${item.name}" value="1" min="1" /></p>
+                                        <button 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 = document.getElementById(`quantity-${itemName}`).value;
+            const item = menuItems.find(item => item.name === itemName);
+            const cartItem = { ...item, quantity: parseInt(quantity) };
+            cart.push(cartItem);
+            speak(`Added ${quantity} of ${itemName} to the cart.`);
+        }
+        // Function to view the 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 for speech synthesis
+        function speak(text) {
             const msg = new SpeechSynthesisUtterance(text);
             window.speechSynthesis.speak(msg);
         }
+        window.onload = showMenu;
     </script>
 </body>
 </html>