voicemenuspe

Running

App Files Files Community

lokesh341 commited on 12 days ago

Commit

c065c92

verified ·

1 Parent(s): 24a1541

Update templates/menu_page.html

Browse files

Files changed (1) hide show

templates/menu_page.html +123 -21

templates/menu_page.html CHANGED Viewed

@@ -3,16 +3,14 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Menu - Biryani Hub</title>
     <style>
-        /* General Body Styling */
         body {
             font-family: Arial, sans-serif;
             background-color: #f8f8f8;
             margin: 0;
             padding: 0;
         }
-        /* Container for the menu */
         .menu-container {
             max-width: 1200px;
             margin: 0 auto;
@@ -67,54 +65,158 @@
     <div class="menu-container">
         <h1>Welcome to the Menu</h1>
-        {% for item in menu_items %}
-        <div class="menu-item">
-            <div class="details">
-                <h3>{{ item.name }}</h3>
-                <p><strong>Ingredients:</strong> {{ item.ingredients }}</p>
-                <p><strong>Category:</strong> {{ item.category }}</p>
-                <p class="price">Price: ${{ item.price }}</p>
-            </div>
-            <button class="order-btn">Order</button>
         </div>
-        {% endfor %}
-        <!-- Button for triggering voice recognition -->
         <button id="listen-btn">Say "Order" to order an item</button>
     </div>
     <script>
         const listenButton = document.getElementById("listen-btn");
         const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
         recognition.lang = "en-US";
         recognition.interimResults = false;
         function speak(text) {
             const msg = new SpeechSynthesisUtterance(text);
             window.speechSynthesis.speak(msg);
         }
         listenButton.addEventListener("click", () => {
-            speak("Please say the item you want to order.");
-            recognition.start();
         });
         recognition.onresult = (event) => {
             const command = event.results[0][0].transcript.toLowerCase();
             console.log("User said:", command);
             // Add logic to recognize specific items or trigger actions based on the command
             if (command.includes("order")) {
-                // For example, navigate or process an order (customize as needed)
-                speak("Your order has been placed.");
             }
         };
         recognition.onerror = (event) => {
             console.error("Speech recognition error:", event.error);
             speak("Sorry, I couldn't understand that. Please try again.");
         };
-        // Voice reading of menu items on page load
         window.onload = function() {
-            const menuItems = document.querySelectorAll('.menu-item h3');
             let itemsText = "The menu includes: ";
             menuItems.forEach(item => {
-                itemsText += item.textContent + ", ";
             });
             speak(itemsText); // Speak all the item names
         }

 <head>
     <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;
         }
         .menu-container {
             max-width: 1200px;
             margin: 0 auto;
     <div class="menu-container">
         <h1>Welcome to the Menu</h1>
+        <!-- Dynamic Menu Item List -->
+        <div id="menu-items">
+            <!-- Menu items will be populated here from the backend -->
         </div>
         <button id="listen-btn">Say "Order" to order an item</button>
+        <div id="cart-summary" style="display:none;">
+            <h2>Your Cart:</h2>
+            <div id="cart-details"></div>
+            <button id="place-order-btn">Place Final Order</button>
+        </div>
     </div>
     <script>
         const listenButton = document.getElementById("listen-btn");
+        const placeOrderButton = document.getElementById("place-order-btn");
+        const cartSummary = document.getElementById("cart-summary");
+        const cartDetails = document.getElementById("cart-details");
+        let isListening = false;
+        let cart = [];  // Global cart variable to store items
         const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
         recognition.lang = "en-US";
         recognition.interimResults = false;
+        // Function to speak text
         function speak(text) {
             const msg = new SpeechSynthesisUtterance(text);
             window.speechSynthesis.speak(msg);
         }
         listenButton.addEventListener("click", () => {
+            if (!isListening) {
+                isListening = true;
+                speak("Please say the item you want to order.");
+                recognition.start();
+            }
         });
         recognition.onresult = (event) => {
             const command = event.results[0][0].transcript.toLowerCase();
             console.log("User said:", command);
             // Add logic to recognize specific items or trigger actions based on the command
             if (command.includes("order")) {
+                // Process ordering logic here (e.g., find item in menu and add to cart)
+                processOrder();
+            } else if (command.includes("cart details")) {
+                showCartDetails();
+            } else {
+                speak("Sorry, I couldn't understand that. Please try again.");
             }
         };
         recognition.onerror = (event) => {
             console.error("Speech recognition error:", event.error);
             speak("Sorry, I couldn't understand that. Please try again.");
         };
+        // Function to process order
+        function processOrder() {
+            speak("Which item would you like to order?");
+            recognition.start();
+            recognition.onresult = (event) => {
+                const itemName = event.results[0][0].transcript.toLowerCase();
+                const item = findItem(itemName);
+                if (item) {
+                    speak(`You selected ${item.name}. How many would you like?`);
+                    recognition.start();
+                    recognition.onresult = (event) => {
+                        const quantity = parseInt(event.results[0][0].transcript);
+                        if (quantity) {
+                            addToCart(item, quantity);
+                            speak(`${quantity} ${item.name} added to your cart.`);
+                            askMoreItems();
+                        } else {
+                            speak("Please say a valid quantity.");
+                        }
+                    };
+                } else {
+                    speak("Sorry, I couldn't find that item. Please try again.");
+                }
+            };
+        }
+        // Function to ask if the user wants to order more items
+        function askMoreItems() {
+            speak("Would you like to order more items?");
+            recognition.start();
+            recognition.onresult = (event) => {
+                const response = event.results[0][0].transcript.toLowerCase();
+                if (response.includes("yes")) {
+                    processOrder();
+                } else {
+                    showCartDetails();
+                }
+            };
+        }
+        // Function to show cart details
+        function showCartDetails() {
+            if (cart.length > 0) {
+                let cartHtml = "";
+                cart.forEach(item => {
+                    cartHtml += `<p>${item.quantity} x ${item.name} - ₹${item.price * item.quantity}</p>`;
+                });
+                cartDetails.innerHTML = cartHtml;
+                cartSummary.style.display = "block";
+                speak(`Your cart contains ${cart.length} items.`);
+            } else {
+                speak("Your cart is empty.");
+            }
+        }
+        // Function to add an item to the cart
+        function addToCart(item, quantity) {
+            cart.push({ name: item.name, price: item.price, quantity: quantity });
+        }
+        // Function to find item in the menu
+        function findItem(itemName) {
+            const menu = [
+                { name: "Chicken Biryani", price: 250 },
+                { name: "Veg Biryani", price: 200 },
+                { name: "Mutton Biryani", price: 300 }
+            ];
+            return menu.find(item => item.name.toLowerCase() === itemName.toLowerCase());
+        }
+        // Function to populate the menu dynamically and speak it on load
         window.onload = function() {
+            const menuItems = [
+                { name: "Chicken Biryani", price: 250 },
+                { name: "Veg Biryani", price: 200 },
+                { name: "Mutton Biryani", price: 300 }
+            ];
+            let menuContent = "";
+            menuItems.forEach(item => {
+                menuContent += `
+                    <div class="menu-item">
+                        <div class="details">
+                            <h3>${item.name}</h3>
+                            <p class="price">Price: ₹${item.price}</p>
+                        </div>
+                        <button class="order-btn" onclick="addToCart(${item.name}, 1)">Order</button>
+                    </div>
+                `;
+            });
+            document.getElementById('menu-items').innerHTML = menuContent;
+            // Voice reading of menu items
             let itemsText = "The menu includes: ";
             menuItems.forEach(item => {
+                itemsText += item.name + ", ";
             });
             speak(itemsText); // Speak all the item names
         }