voicemenu143

Sleeping

App Files Files Community

lokesh341 commited on 11 days ago

Commit

14f0913

verified ·

1 Parent(s): c326a0e

Update templates/menu_page.html

Browse files

Files changed (1) hide show

templates/menu_page.html +115 -198

templates/menu_page.html CHANGED Viewed

@@ -5,149 +5,132 @@
     <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;
-        padding: 20px;
-        background-color: #4169E1;
-        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-        border-radius: 8px;
-        margin-top: 50px;
-    }
-    h1 {
-        text-align: center;
-        font-size: 2.5rem;
-        color: #87CEFA;
-        margin-bottom: 30px;
-    }
-    .menu-item {
-        border-bottom: 1px solid #eee;
-        padding: 15px 0;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-    }
-    .order-btn {
-        padding: 10px 20px;
-        background-color: #4CAF50; /* Default green color */
-        color: white;
-        border: none;
-        border-radius: 5px;
-        cursor: pointer;
-    }
-    .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;
-        cursor: pointer;
-        font-size: 2.2rem;
-        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');
@@ -157,78 +140,12 @@
                             <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>
 </body>
 </html>

     <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;
+            padding: 20px;
+            background-color: #4169E1;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            border-radius: 8px;
+            margin-top: 50px;
+        }
+        h1 {
+            text-align: center;
+            font-size: 2.5rem;
+            color: #87CEFA;
+            margin-bottom: 30px;
+        }
+        .menu-item {
+            border-bottom: 1px solid #eee;
+            padding: 15px 0;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .order-btn {
+            padding: 10px 20px;
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+        .order-btn:hover {
+            background-color: #45a049;
+        }
+        #main-course-btn, #appetizer-btn {
+            padding: 10px 20px;
+            background-color: orange;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 2.2rem;
+            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');
                             <h3>${item.name}</h3>
                             <p class="price">Price: ₹${item.price}</p>
                         </div>
+                        <button class="order-btn">Order</button>
                     `;
                     menuContainer.appendChild(itemElement);
                 });
             }
         }
     </script>
 </body>
 </html>