voicemenuspe

Running

App Files Files Community

lokesh341 commited on 10 days ago

Commit

316469c

verified ·

1 Parent(s): 5e824a1

Update templates/menu_page.html

Browse files

Files changed (1) hide show

templates/menu_page.html +146 -153

templates/menu_page.html CHANGED Viewed

@@ -35,7 +35,7 @@
     }
     .order-btn {
         padding: 10px 20px;
-        background-color: #4CAF50; /* Default green color */
         color: white;
         border: none;
         border-radius: 5px;
@@ -44,10 +44,9 @@
     .order-btn:hover {
         background-color: #45a049;
     }
-    /* New styles for the category buttons */
     #main-course-btn, #appetizer-btn {
         padding: 10px 20px;
-        background-color: orange;  /* Change button color to orange */
         color: white;
         border: none;
         border-radius: 5px;
@@ -56,161 +55,155 @@
         margin: 10px 0;
     }
     #main-course-btn:hover, #appetizer-btn:hover {
-        background-color: #FF7F00; /* Darker orange for hover effect */
     }
     #cart-summary {
         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>

     }
     .order-btn {
         padding: 10px 20px;
+        background-color: #4CAF50;
         color: white;
         border: none;
         border-radius: 5px;
     .order-btn:hover {
         background-color: #45a049;
     }
     #main-course-btn, #appetizer-btn {
         padding: 10px 20px;
+        background-color: orange;
         color: white;
         border: none;
         border-radius: 5px;
         margin: 10px 0;
     }
     #main-course-btn:hover, #appetizer-btn:hover {
+        background-color: #FF7F00;
     }
     #cart-summary {
         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"]');
+// 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 menu items based on 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
+let cart = [];
+function addToCart(itemName, quantity) {
+    const item = findItem(itemName);
+    cart.push({ name: item.name, price: item.price, quantity: quantity });
+}
+// 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>