Update templates/menu_page.html

templates/menu_page.html

@@ -24,7 +24,6 @@
             margin-top: 50px;
         }
 
-        /* Heading Style */
         h1 {
             text-align: center;
             font-size: 2.5rem;
@@ -32,7 +31,6 @@
             margin-bottom: 30px;
         }
 
-        /* Menu Item Styles */
         .menu-item {
             border-bottom: 1px solid #eee;
             padding: 15px 0;
@@ -41,31 +39,6 @@
             align-items: center;
         }
 
-        .menu-item:last-child {
-            border-bottom: none;
-        }
-
-        .menu-item .details {
-            flex-grow: 1;
-        }
-
-        .menu-item .details h3 {
-            margin: 0;
-            font-size: 1.6rem;
-            color: #333;
-        }
-
-        .menu-item .details p {
-            margin: 5px 0;
-            color: #666;
-        }
-
-        .menu-item .details .price {
-            font-weight: bold;
-            color: #e91e63;
-        }
-
-        /* Order Button Style */
         .order-btn {
             padding: 10px 20px;
             background-color: #4CAF50;
@@ -73,17 +46,26 @@
             border: none;
             border-radius: 5px;
             cursor: pointer;
-            font-size: 1rem;
-            transition: background-color 0.3s ease;
         }
 
         .order-btn:hover {
             background-color: #45a049;
         }
 
-        /* Add space between items */
-        .menu-item:not(:last-child) {
-            margin-bottom: 20px;
+        #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>
@@ -91,7 +73,7 @@
 
     <div class="menu-container">
         <h1>Welcome to the Menu</h1>
-        
+
         {% for item in menu_items %}
         <div class="menu-item">
             <div class="details">
@@ -103,7 +85,44 @@
             <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.");
+        };
+    </script>
+
 </body>
 </html>