voicemenuwithregisterandloginnnwithmenuuuu

Sleeping

App Files Files Community

lokesh341 commited on 13 days ago

Commit

b0082be

verified ·

1 Parent(s): 8f3a5d1

Update templates/menu_page.html

Browse files

Files changed (1) hide show

templates/menu_page.html +126 -30

templates/menu_page.html CHANGED Viewed

@@ -14,7 +14,6 @@
         }
         h1 {
             color: #ff5722;
-            margin-bottom: 30px;
         }
         .menu-container {
             display: flex;
@@ -52,38 +51,57 @@
             background-color: #e64a19;
         }
         .cart-container {
-            position: fixed;
-            bottom: 20px;
-            right: 20px;
-            z-index: 999;
         }
-        .cart-button {
             background-color: #007bff;
             color: white;
-            padding: 10px 20px;
-            border-radius: 50px;
-            font-size: 1rem;
-            font-weight: bold;
-            text-decoration: none;
-            display: flex;
-            align-items: center;
-            justify-content: center;
         }
-        .cart-button:hover {
             background-color: #0056b3;
-            text-decoration: none;
         }
     </style>
 </head>
 <body>
     <h1>Restaurant Menu</h1>
     <!-- Menu Display -->
-    <div class="menu-container">
         {% for item in menu %}
-        <div class="menu-item">
             <h3>{{ item.name }}</h3>
-            <img src="{{ url_for('static', filename='images/' + item.image_url) }}" alt="{{ item.name }}" style="width: 100px; height: 100px; border-radius: 8px;">
             <p><strong>Category:</strong> {{ item.category }}</p>
             <p><strong>Price:</strong> ${{ item.price }}</p>
             <p><strong>Ingredients:</strong> {{ item.ingredients }}</p>
@@ -92,24 +110,102 @@
         {% endfor %}
     </div>
-    <!-- Cart Button -->
-    <div class="cart-container">
-        <a href="/cart" class="cart-button">View Cart</a>
     </div>
     <script>
         let cart = [];
-        // Add items to cart
         function addToCart(name, price) {
-            cart.push({ name, price });
-            alert(name + " added to cart!");
         }
-        // View cart function (you can further expand it based on cart items)
         function viewCart() {
-            console.log(cart); // Display cart items in the browser console for now
         }
     </script>
 </body>
-</html>

         }
         h1 {
             color: #ff5722;
         }
         .menu-container {
             display: flex;
             background-color: #e64a19;
         }
         .cart-container {
+            margin-top: 20px;
+            padding: 15px;
+            background-color: white;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            width: 50%;
+            margin-left: auto;
+            margin-right: auto;
+            display: none;
+        }
+        .cart-item {
+            display: flex;
+            justify-content: space-between;
+            padding: 5px;
+            border-bottom: 1px solid #ddd;
+        }
+        .cart-item:last-child {
+            border-bottom: none;
         }
+        .filter-buttons {
+            margin: 15px;
+        }
+        .filter-buttons button {
+            margin: 5px;
+            padding: 10px;
+            border: none;
+            cursor: pointer;
+            border-radius: 5px;
             background-color: #007bff;
             color: white;
         }
+        .filter-buttons button:hover {
             background-color: #0056b3;
         }
     </style>
 </head>
 <body>
     <h1>Restaurant Menu</h1>
+    <!-- Filter Buttons -->
+    <div class="filter-buttons">
+        <button onclick="filterMenu('Veg')">Vegetarian</button>
+        <button onclick="filterMenu('Non-Veg')">Non-Vegetarian</button>
+    </div>
     <!-- Menu Display -->
+    <div class="menu-container" id="menu-list">
         {% for item in menu %}
+        <div class="menu-item" data-category="{{ item.category }}">
             <h3>{{ item.name }}</h3>
             <p><strong>Category:</strong> {{ item.category }}</p>
             <p><strong>Price:</strong> ${{ item.price }}</p>
             <p><strong>Ingredients:</strong> {{ item.ingredients }}</p>
         {% endfor %}
     </div>
+    <!-- Cart Section -->
+    <div class="cart-container" id="cart-container">
+        <h2>Your Cart</h2>
+        <div id="cart-items"></div>
+        <button onclick="checkout()">Checkout</button>
     </div>
+    <!-- View Cart Button -->
+    <button onclick="viewCart()">View Cart</button>
     <script>
         let cart = [];
+        // ✅ Speech Synthesis - Welcome message
+        function speak(text, callback) {
+            const msg = new SpeechSynthesisUtterance(text);
+            msg.onend = callback;
+            window.speechSynthesis.speak(msg);
+        }
+        // ✅ Ask user Veg or Non-Veg
+        function askMenuType() {
+            speak("Welcome to Biryani Hub Menu. Would you like to see Vegetarian or Non-Vegetarian options?", function() {
+                startListening();
+            });
+        }
+        // ✅ Speech Recognition (User says Veg or Non-Veg)
+        function startListening() {
+            const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
+            recognition.lang = "en-US";
+            recognition.start();
+            recognition.onresult = function(event) {
+                const command = event.results[0][0].transcript.toLowerCase();
+                if (command.includes("vegetarian") || command.includes("veg")) {
+                    filterMenu("Veg");
+                } else if (command.includes("non-vegetarian") || command.includes("non veg")) {
+                    filterMenu("Non-Veg");
+                } else {
+                    speak("Sorry, I didn't understand. Please say Vegetarian or Non-Vegetarian.", function() {
+                        startListening();
+                    });
+                }
+            };
+        }
+        // ✅ Function to filter menu by category and speak items
+        function filterMenu(type) {
+            const allItems = document.querySelectorAll('.menu-item');
+            let availableItems = [];
+            allItems.forEach(item => {
+                const category = item.dataset.category.toLowerCase();
+                if (type === "Veg" && (category.includes("veg") || category.includes("paneer") || category.includes("channa"))) {
+                    item.style.display = "block";
+                    availableItems.push(item.querySelector('h3').innerText);
+                } else if (type === "Non-Veg" && (category.includes("chicken") || category.includes("mutton") || category.includes("fish") || category.includes("prawn"))) {
+                    item.style.display = "block";
+                    availableItems.push(item.querySelector('h3').innerText);
+                } else {
+                    item.style.display = "none";
+                }
+            });
+            speak("Here are the available items: " + availableItems.join(", "));
+        }
+        // ✅ Function to add items to cart
         function addToCart(name, price) {
+            const existingItem = cart.find(item => item.name === name);
+            if (existingItem) {
+                existingItem.quantity += 1;
+            } else {
+                cart.push({ name, price, quantity: 1 });
+            }
+            speak(name + " added to cart!");
         }
+        // ✅ Function to view 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 checkout
+        function checkout() {
+            if (cart.length > 0) {
+                speak("Your order has been placed successfully!");
+                cart = [];
+                viewCart();
+            } else {
+                speak("Your cart is empty. Please add items before placing the order.");
+            }
         }
+        // ✅ Welcome Message on Page Load
+        window.onload = askMenuType;
     </script>
 </body>
+</html>