voicemenuspe

Running

App Files Files Community

lokesh341 commited on 17 days ago

Commit

e68e6b9

verified ·

1 Parent(s): 8fdce7e

Update templates/menu_page.html

Browse files

Files changed (1) hide show

templates/menu_page.html +32 -77

templates/menu_page.html CHANGED Viewed

@@ -1,74 +1,44 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Menu - Biryani Hub</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: #fff;
-            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: #333;
-            margin-bottom: 30px;
-        }
-        .menu-item {
-            border-bottom: 1px solid #eee;
-            padding: 15px 0;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        .order-btn {
-            display: none; /* Hide the button since ordering is voice-controlled */
-        }
     </style>
 </head>
 <body>
     <div class="menu-container">
         <h1>Welcome to the Menu</h1>
-        {% for item in menu_items %}
-        <div class="menu-item" data-item="{{ item.name | lower }}">
-            <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 %}
     </div>
     <script>
-        const menuItems = Array.from(document.querySelectorAll(".menu-item")).map(item => ({
-            name: item.dataset.item,
-            element: item
-        }));
         const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
-        recognition.lang = "en-US";
         recognition.interimResults = false;
         function speak(text, callback) {
@@ -78,42 +48,27 @@
         }
         function readMenuItems() {
-            let menuText = "Here is the menu. ";
-            menuItems.forEach(item => {
-                menuText += `${item.name}. `;
-            });
-            menuText += "Please say the name of the item you would like to order.";
             speak(menuText, startListening);
         }
-        function startListening() {
-            recognition.start();
-        }
         recognition.onresult = (event) => {
             const command = event.results[0][0].transcript.toLowerCase();
-            console.log("User said:", command);
-            const matchedItem = menuItems.find(item => command.includes(item.name));
             if (matchedItem) {
                 speak(`You have ordered ${matchedItem.name}. Your order has been placed.`);
-                console.log(`Order placed for: ${matchedItem.name}`);
             } else {
-                speak("Item not found. Please try again.");
-                startListening();
             }
         };
-        recognition.onerror = (event) => {
-            console.error("Speech recognition error:", event.error);
-            speak("Sorry, I couldn't understand that. Please try again.");
-        };
-        // Automatically read the menu and start listening when the page loads
-        window.onload = function () {
-            readMenuItems();
-        };
     </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Menu - Biryani Hub</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: #fff; border-radius: 8px; margin-top: 20px; }
+        h1 { text-align: center; font-size: 2.5rem; color: #333; }
+        .menu-item { margin-bottom: 20px; padding: 10px; border: 1px solid #ddd; border-radius: 5px; }
+        .menu-item img { width: 100px; height: 100px; border-radius: 8px; margin-right: 10px; }
+        .details { display: flex; align-items: center; }
+        .text { margin-left: 10px; }
     </style>
 </head>
 <body>
     <div class="menu-container">
         <h1>Welcome to the Menu</h1>
+        <div id="menu-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.' },
+            { name: 'Onion Pakoda', price: 10, ingredients: 'Onions, Gram Flour, Spices', description: 'Deep-fried onion fritters seasoned with herbs and spices.' },
+            { name: 'Chilli Gobi', price: 12, ingredients: 'Cauliflower, Chili Sauce, Spices', description: 'Cauliflower florets tossed in a spicy chili sauce.' },
+            { name: 'Chicken Biryani', price: 14, ingredients: 'Chicken, Basmati Rice, Spices', description: 'Aromatic basmati rice cooked with tender chicken and spices.' },
+            { name: 'Mutton Biryani', price: 16, ingredients: 'Mutton, Basmati Rice, Spices', description: 'Flavorful rice dish made with succulent mutton and aromatic spices.' }
+        ];
+        const menuContainer = document.getElementById('menu-items');
+        menuItems.forEach(item => {
+            const div = document.createElement('div');
+            div.classList.add('menu-item');
+            div.innerHTML = `<div class="details"><img src="https://via.placeholder.com/100" 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);
+        });
         const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
+        recognition.lang = 'en-US';
         recognition.interimResults = false;
         function speak(text, callback) {
         }
         function readMenuItems() {
+            let menuText = 'Here is the menu. ';
+            menuItems.forEach(item => { menuText += `${item.name}, `; });
+            menuText += 'Please say the name of the item you would like to order.';
             speak(menuText, startListening);
         }
+        function startListening() { recognition.start(); }
         recognition.onresult = (event) => {
             const command = event.results[0][0].transcript.toLowerCase();
+            const matchedItem = menuItems.find(item => command.includes(item.name.toLowerCase()));
             if (matchedItem) {
                 speak(`You have ordered ${matchedItem.name}. Your order has been placed.`);
             } else {
+                speak('Item not found. Please try again.', startListening);
             }
         };
+        recognition.onerror = () => { speak('Sorry, I could not understand. Please try again.'); };
+        window.onload = readMenuItems;
     </script>
 </body>
 </html>