voicemenuspe

Running

App Files Files Community

lokesh341 commited on 12 days ago

Commit

24a1541

verified ·

1 Parent(s): 34a8643

Update templates/menu_page.html

Browse files

Files changed (1) hide show

templates/menu_page.html +70 -191

templates/menu_page.html CHANGED Viewed

@@ -3,241 +3,120 @@
 <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;
         }
-        .container {
             max-width: 1200px;
-            margin: 50px auto;
-            text-align: center;
         }
         h1 {
             font-size: 2.5rem;
             color: #333;
-        }
-        .menu-option button {
-            font-size: 1.2rem;
-            padding: 10px 20px;
-            margin: 20px;
-            cursor: pointer;
-            border: none;
-            border-radius: 5px;
-            background-color: #007bff;
-            color: white;
-        }
-        .menu-option button:hover {
-            background-color: #0056b3;
         }
         .menu-item {
-            display: inline-block;
-            width: 30%;
-            margin: 10px;
-            padding: 10px;
-            border: 1px solid #ddd;
-            border-radius: 5px;
-            background-color: #fff;
-        }
-        .menu-item img {
-            width: 100px;
-            height: 100px;
-            border-radius: 8px;
-            margin-bottom: 10px;
-        }
-        .cart-container {
-            margin-top: 30px;
-            padding: 10px;
-            border: 1px solid #ddd;
-            border-radius: 5px;
-            background-color: #eaf3e1;
-            display: none;
-        }
-        .cart-item {
             display: flex;
             justify-content: space-between;
-            margin-bottom: 10px;
         }
-        .view-cart-container {
-            position: fixed;
-            bottom: 20px;
-            right: 20px;
-            z-index: 999;
         }
-        .view-cart-button {
-            background-color: #007bff;
-            color: #fff;
             padding: 10px 20px;
-            border-radius: 50px;
-            font-size: 1rem;
-            font-weight: bold;
-            text-decoration: none;
-            display: flex;
-            align-items: center;
-            justify-content: center;
         }
-        .view-cart-button:hover {
-            background-color: #0056b3;
-            text-decoration: none;
         }
     </style>
 </head>
 <body>
-    <div class="container" id="welcome-container">
-        <h1>Welcome to the Biryani Hub Menu</h1>
-        <div class="menu-option">
-            <button id="veg-btn" onclick="showMenu('veg')">Vegetarian Menu</button>
-            <button id="non-veg-btn" onclick="showMenu('nonVeg')">Non-Vegetarian Menu</button>
-        </div>
-    </div>
-    <div class="container" id="menu-container" style="display: none;">
-        <h1>Menu</h1>
-        <div id="menu-items" class="row">
-            <!-- Dynamically populated menu items will appear here -->
         </div>
-        <button onclick="viewCart()">View Cart</button>
-    </div>
-    <div class="cart-container" id="cart-container">
-        <h2>Your Cart</h2>
-        <div id="cart-items"></div>
-        <button onclick="placeOrder()">Place Final Order</button>
-    </div>
-    <div class="view-cart-container">
-        <a href="javascript:void(0);" class="view-cart-button" onclick="viewCart()">
-            View Cart
-        </a>
     </div>
     <script>
-        // Menu data
-        const menuItems = {
-            veg: [
-                { name: 'Samosa', price: 9, ingredients: 'Potatoes, Peas, Flour, Spices', description: 'Crispy fried pastry filled with spiced potatoes and peas.', imageUrl: 'https://via.placeholder.com/100' },
-                { name: 'Onion Pakoda', price: 10, ingredients: 'Onions, Gram Flour, Spices', description: 'Deep-fried onion fritters seasoned with herbs and spices.', imageUrl: 'https://via.placeholder.com/100' },
-                { name: 'Chilli Gobi', price: 12, ingredients: 'Cauliflower, Chili Sauce, Spices', description: 'Cauliflower florets tossed in a spicy chili sauce.', imageUrl: 'https://via.placeholder.com/100' }
-            ],
-            nonVeg: [
-                { name: 'Chicken Biryani', price: 14, ingredients: 'Chicken, Basmati Rice, Spices', description: 'Aromatic basmati rice cooked with tender chicken and spices.', imageUrl: 'https://via.placeholder.com/100' },
-                { name: 'Mutton Biryani', price: 16, ingredients: 'Mutton, Basmati Rice, Spices', description: 'Flavorful rice dish made with succulent mutton and aromatic spices.', imageUrl: 'https://via.placeholder.com/100' },
-                { name: 'Butter Chicken', price: 15, ingredients: 'Chicken, Tomato, Butter, Cream', description: 'Tender chicken cooked in a rich, creamy tomato sauce.', imageUrl: 'https://via.placeholder.com/100' }
-            ]
-        };
-        const cart = [];
-        // Speech Synthesis and Speech Recognition
         const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
-        recognition.lang = 'en-US';
         recognition.interimResults = false;
-        recognition.maxAlternatives = 1;
-        // Function to speak text
-        function speak(text, callback) {
             const msg = new SpeechSynthesisUtterance(text);
-            msg.onend = callback;
             window.speechSynthesis.speak(msg);
         }
-        // Function to show the menu based on selected type (veg or non-veg)
-        function showMenu(type) {
-            // Hide the welcome screen and show the menu
-            document.getElementById('welcome-container').style.display = 'none';
-            document.getElementById('menu-container').style.display = 'block';
-            const menuContainer = document.getElementById('menu-items');
-            menuContainer.innerHTML = ''; // Clear previous menu items
-            menuItems[type].forEach(item => {
-                const div = document.createElement('div');
-                div.classList.add('menu-item');
-                div.innerHTML = `<div class="details">
-                                    <img src="${item.imageUrl}" 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>
-                                        <button onclick="addToCart('${item.name}')">Add to Cart</button>
-                                    </div>
-                                  </div>`;
-                menuContainer.appendChild(div);
-            });
-        }
-        // Function to add items to the cart
-        function addToCart(itemName) {
-            const quantity = prompt(`How many ${itemName} would you like to add?`, 1);
-            if (quantity && !isNaN(quantity) && quantity > 0) {
-                const item = menuItems.veg.concat(menuItems.nonVeg).find(item => item.name === itemName);
-                const cartItem = { ...item, quantity: parseInt(quantity) };
-                cart.push(cartItem);
-                speak(`${quantity} of ${itemName} added to your cart.`, () => {});
-            } else {
-                speak("Please enter a valid quantity.", () => {});
-            }
-        }
-        // Function to view the cart
-        function viewCart() {
-            const cartContainer = document.getElementById('cart-container');
-            const cartItemsContainer = document.getElementById('cart-items');
-            cartItemsContainer.innerHTML = '';
-            cart.forEach(cartItem => {
-                const div = document.createElement('div');
-                div.classList.add('cart-item');
-                div.innerHTML = `<span>${cartItem.name} (x${cartItem.quantity}) - $${cartItem.price * cartItem.quantity}</span>`;
-                cartItemsContainer.appendChild(div);
-            });
-            cartContainer.style.display = 'block';
-        }
-        // Function to place the final order
-        function placeOrder() {
-            if (cart.length > 0) {
-                speak("Your order has been placed successfully!", () => {});
-                cart.length = 0; // Clear the cart after placing the order
-                viewCart(); // Optionally, update cart view
-            } else {
-                speak("Your cart is empty. Please add items before placing the order.", () => {});
-            }
-        }
-        // Function to start voice recognition
-        function startVoiceRecognition() {
             recognition.start();
-        }
-        // Speech recognition logic
         recognition.onresult = (event) => {
             const command = event.results[0][0].transcript.toLowerCase();
-            if (command.includes('vegetarian')) {
-                showMenu('veg');
-                speak("Here are the vegetarian items.", () => {});
-            } else if (command.includes('non-vegetarian')) {
-                showMenu('nonVeg');
-                speak("Here are the non-vegetarian items.", () => {});
-            } else {
-                speak("Please say vegetarian or non-vegetarian.", () => {
-                    recognition.start();
-                });
             }
         };
         recognition.onerror = (event) => {
             console.error("Speech recognition error:", event.error);
-            speak("Sorry, I couldn't understand that. Please try again.", () => recognition.start());
         };
-        // Welcome message and voice prompt when the page loads
-        window.onload = () => {
-            speak("Welcome to the Biryani Hub menu. Please say vegetarian or non-vegetarian to choose your menu.", () => {
-                startVoiceRecognition();
             });
         }
     </script>

 <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;
+            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 {
+            padding: 10px 20px;
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
         }
+        .order-btn:hover {
+            background-color: #45a049;
+        }
+        #listen-btn {
             padding: 10px 20px;
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 1.2rem;
+            display: block;
+            margin: 30px auto;
         }
+        #listen-btn:hover {
+            background-color: #45a049;
         }
     </style>
 </head>
 <body>
+    <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
         }
     </script>