voicemenuspe

Running

App Files Files Community

lokesh341 commited on 10 days ago

Commit

5e824a1

verified ·

1 Parent(s): a728ee2

Update templates/menu_page.html

Browse files

Files changed (1) hide show

templates/menu_page.html +149 -156

templates/menu_page.html CHANGED Viewed

@@ -62,162 +62,155 @@
         display: none;
     }
 </style>
-</head>
-<body>
-<!-- Page 1: Welcome and Category Selection -->
-<div id="page1" class="menu-container">
-    <h1>Welcome to Biryani Hub menu</h1>
-    <h3 id="category-title">Please select a category:</h3>
-    <button id="main-course-btn">Main Course</button>
-    <button id="appetizer-btn">Appetizers</button>
-</div>
-<!-- Page 2: Main Course Menu -->
-<div id="main-course-page" class="menu-container" style="display: none;">
-    <h1>Main Course Menu</h1>
-    <div id="main-course-items"></div>
-    <button id="back-to-category-btn">Back to Category Selection</button>
-</div>
-<!-- Page 3: Appetizers Menu -->
-<div id="appetizer-page" class="menu-container" style="display: none;">
-    <h1>Appetizers Menu</h1>
-    <div id="appetizer-items"></div>
-    <button id="back-to-category-btn2">Back to Category Selection</button>
-</div>
-<script>
-// Sample menu data
-const menuData = {
-    'Main Course': [
-        { name: "Chicken Biryani", price: 250 },
-        { name: "Veg Biryani", price: 200 },
-        { name: "Mutton Biryani", price: 300 }
-    ],
-    'Appetizers': [
-        { name: "Paneer Tikka", price: 180 },
-        { name: "Chicken Wings", price: 220 }
-    ]
-};
-// Selectors for pages and buttons
-const categoryButtons = document.getElementById('page1');
-const mainCoursePage = document.getElementById('main-course-page');
-const appetizerPage = document.getElementById('appetizer-page');
-const backToCategoryBtns = document.querySelectorAll('[id^="back-to-category-btn"]');
-let cart = [];  // Global cart variable to store items
-let menuData = {};  // Will store menu items based on categories
-// Event listeners for buttons to navigate between pages
-document.getElementById("main-course-btn").addEventListener("click", () => {
-    categoryButtons.style.display = "none";
-    mainCoursePage.style.display = "block";
-    displayMenuItems('Main Course');
-});
-document.getElementById("appetizer-btn").addEventListener("click", () => {
-    categoryButtons.style.display = "none";
-    appetizerPage.style.display = "block";
-    displayMenuItems('Appetizers');
-});
-backToCategoryBtns.forEach(button => {
-    button.addEventListener("click", () => {
-        mainCoursePage.style.display = "none";
-        appetizerPage.style.display = "none";
-        categoryButtons.style.display = "block";
-    });
-});
-// Function to populate the menu based on selected category
-function displayMenuItems(category) {
-    const menuContainer = category === 'Main Course' ? document.getElementById('main-course-items') : document.getElementById('appetizer-items');
-    menuContainer.innerHTML = '';
-    if (menuData[category]) {
-        menuData[category].forEach(item => {
-            const itemElement = document.createElement('div');
-            itemElement.classList.add('menu-item');
-            itemElement.innerHTML = `
-                <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>
-            `;
-            menuContainer.appendChild(itemElement);
-        });
-    }
-}
-// Function to add an item to the cart
-function addToCart(itemName, quantity) {
-    const item = findItem(itemName);
-    cart.push({ name: item.name, price: item.price, quantity: quantity });
-    displayCartSummary();
-}
-// Function to show cart details
-function displayCartSummary() {
-    let cartHtml = "";
-    cart.forEach(item => {
-        cartHtml += `<p>${item.quantity} x ${item.name} - ₹${item.price * item.quantity}</p>`;
-    });
-    const cartSummary = document.getElementById("cart-summary");
-    cartSummary.innerHTML = cartHtml;
-    cartSummary.style.display = "block";
-}
-// Function to find item in the menu
-function findItem(itemName) {
-    const menu = menuData['Main Course']; // Default category to check first
-    return menu.find(item => item.name.toLowerCase() === itemName.toLowerCase());
-}
-// Voice greeting for menu categories
-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);
-}
-window.onload = function() {
-    // Sample menu data for Main Course and Appetizers
-    menuData = {
-        'Main Course': [
-            { name: "Chicken Biryani", price: 250 },
-            { name: "Veg Biryani", price: 200 },
-            { name: "Mutton Biryani", price: 300 }
-        ],
-        'Appetizers': [
-            { name: "Paneer Tikka", price: 180 },
-            { name: "Chicken Wings", price: 220 }
-        ]
-    };
-    // Automatically greet the user and prompt for category selection
-    speak("Welcome to Biryani Hub! We have the following categories: Main Course and Appetizers. Please say 'Main Course' or 'Appetizers' to select a category.");
-    // Automatically trigger voice recognition for category selection
-    recognition.start();
-    recognition.onresult = (event) => {
-        const categoryCommand = event.results[0][0].transcript.toLowerCase();
-        if (categoryCommand.includes("main course")) {
-            displayMenuItems('Main Course');
-            mainCoursePage.style.display = "block";
-            categoryButtons.style.display = "none";
-        } else if (categoryCommand.includes("appetizers")) {
-            displayMenuItems('Appetizers');
-            appetizerPage.style.display = "block";
-            categoryButtons.style.display = "none";
-        } else {
-            speak("Sorry, I couldn't understand that. Please say 'Main Course' or 'Appetizers'.");
         }
-    };
-};
-</script>
-</body>
-</html>

         display: none;
     }
 </style>
+    <div class="menu-container">
+        <h1>Welcome to Biryani Hub menu</h1>
+        <h3 id="category-title">Please select a category:</h3>
+        <!-- Buttons for selecting categories -->
+        <div id="category-buttons">
+            <button id="main-course-btn">Main Course</button>
+            <button id="appetizer-btn">Appetizers</button>
+        </div>
+        <!-- Dynamic Menu Item List -->
+        <div id="menu-items"></div>
+        <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 cartSummary = document.getElementById("cart-summary");
+        const cartDetails = document.getElementById("cart-details");
+        const categoryButtons = document.getElementById("category-buttons");
+        let cart = [];  // Global cart variable to store items
+        let menuData = {};  // Will store menu items based on categories
+        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);
+        }
+        // Start voice recognition automatically on page load
+        window.onload = function() {
+            // Sample menu data for Main Course and Appetizers
+            menuData = {
+                'Main Course': [
+                    { name: "Chicken Biryani", price: 250 },
+                    { name: "Veg Biryani", price: 200 },
+                    { name: "Mutton Biryani", price: 300 }
+                ],
+                'Appetizers': [
+                    { name: "Paneer Tikka", price: 180 },
+                    { name: "Chicken Wings", price: 220 }
+                ]
+            };
+            // Populate categories dynamically
+            document.getElementById("main-course-btn").addEventListener("click", () => {
+                displayMenuItems('Main Course');
+            });
+            document.getElementById("appetizer-btn").addEventListener("click", () => {
+                displayMenuItems('Appetizers');
+            });
+            // Voice greeting for menu categories
+            speak("Welcome to Biryani Hub! We have the following categories: Main Course and Appetizers. Please say 'Main Course' or 'Appetizers' to select a category.");
+            // Automatically trigger voice recognition for category selection
+            recognition.start();
+            recognition.onresult = (event) => {
+                const categoryCommand = event.results[0][0].transcript.toLowerCase();
+                if (categoryCommand.includes("main course")) {
+                    displayMenuItems('Main Course');
+                } else if (categoryCommand.includes("appetizers")) {
+                    displayMenuItems('Appetizers');
+                } else {
+                    speak("Sorry, I couldn't understand that. Please say 'Main Course' or 'Appetizers'.");
+                }
+            };
+        };
+        // Function to populate the menu based on selected category
+        function displayMenuItems(category) {
+            const menuContainer = document.getElementById('menu-items');
+            menuContainer.innerHTML = '';  // Clear previous menu
+            if (menuData[category]) {
+                menuData[category].forEach(item => {
+                    const itemElement = document.createElement('div');
+                    itemElement.classList.add('menu-item');
+                    itemElement.innerHTML =
+                        <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>
+                    ;
+                    menuContainer.appendChild(itemElement);
+                });
+                // Automatically prompt the user to order
+                speak("Here are the items in the selected category. Please say the item you want 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.name, 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 add an item to the cart
+        function addToCart(itemName, quantity) {
+            const item = findItem(itemName);
+            cart.push({ name: item.name, price: item.price, quantity: quantity });
+        }
+        // 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 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")) {
+                    recognition.start();
+                } else {
+                    showCartDetails();
+                }
+            };
+        }
+        // Function to find item in the menu
+        function findItem(itemName) {
+            const menu = menuData['Main Course']; // Default category to check first
+            return menu.find(item => item.name.toLowerCase() === itemName.toLowerCase());
         }
+    </script>