voicemenuspe

Running

App Files Files Community

lokesh341 commited on 10 days ago

Commit

143f64e

verified ·

1 Parent(s): 0fe3729

Update templates/menu_page.html

Browse files

Files changed (1) hide show

templates/menu_page.html +127 -156

templates/menu_page.html CHANGED Viewed

@@ -5,62 +5,75 @@
     <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, #place-order-summary {
-            display: none;
-        }
-    </style>
 </head>
 <body>
@@ -70,7 +83,7 @@
     <h3 id="category-title">Please select a category:</h3>
     <button id="main-course-btn">Main Course</button>
     <button id="appetizer-btn">Appetizers</button>
-    <button id="view-cart-btn">View Cart</button> <!-- View Cart button -->
 </div>
 <!-- Page 2: Main Course Menu -->
@@ -78,7 +91,7 @@
     <h1>Main Course Menu</h1>
     <div id="main-course-items"></div>
     <button id="back-to-category-btn">Back to Category Selection</button>
-    <button id="view-cart-btn2">View Cart</button> <!-- View Cart button -->
 </div>
 <!-- Page 3: Appetizers Menu -->
@@ -86,7 +99,7 @@
     <h1>Appetizers Menu</h1>
     <div id="appetizer-items"></div>
     <button id="back-to-category-btn2">Back to Category Selection</button>
-    <button id="view-cart-btn3">View Cart</button> <!-- View Cart button -->
 </div>
 <!-- Page 4: View Cart -->
@@ -94,15 +107,7 @@
     <h1>Your Cart</h1>
     <div id="cart-details"></div>
     <button id="place-order-btn">Place Final Order</button>
-    <button id="back-to-menu-btn">Back to Menu</button>
-</div>
-<!-- Page 5: Place Order -->
-<div id="place-order-page" class="menu-container" style="display: none;">
-    <h1>Place Your Order</h1>
-    <div id="place-order-summary"></div>
-    <button id="confirm-order-btn">Confirm Order</button>
-    <button id="back-to-cart-btn">Back to Cart</button>
 </div>
 <script>
@@ -124,17 +129,55 @@ const categoryButtons = document.getElementById('page1');
 const mainCoursePage = document.getElementById('main-course-page');
 const appetizerPage = document.getElementById('appetizer-page');
 const viewCartPage = document.getElementById('view-cart-page');
-const placeOrderPage = document.getElementById('place-order-page');
 const backToCategoryBtns = document.querySelectorAll('[id^="back-to-category-btn"]');
-const backToMenuBtns = document.querySelectorAll('[id^="back-to-menu-btn"]');
-const cartDetails = document.getElementById("cart-details");
-const placeOrderSummary = document.getElementById("place-order-summary");
-// Global cart variable to store items
-let cart = [];
-let menuData = {};
-// Function to display menu items based on category
 function displayMenuItems(category) {
     const menuContainer = category === 'Main Course' ? document.getElementById('main-course-items') : document.getElementById('appetizer-items');
     menuContainer.innerHTML = '';
@@ -160,88 +203,12 @@ function addToCart(itemName, quantity) {
     cart.push({ name: item.name, price: item.price, quantity: quantity });
 }
-// Function to display 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;
-        viewCartPage.style.display = "block";
-        speak(`Your cart contains ${cart.length} items.`);
-    } else {
-        speak("Your cart is empty.");
-    }
 }
-// Function to place the order
-function showPlaceOrder() {
-    if (cart.length > 0) {
-        let summaryHtml = "";
-        cart.forEach(item => {
-            summaryHtml += `<p>${item.quantity} x ${item.name} - ₹${item.price * item.quantity}</p>`;
-        });
-        placeOrderSummary.innerHTML = summaryHtml;
-        placeOrderPage.style.display = "block";
-    } else {
-        speak("Your cart is empty. Please add items to the cart first.");
-    }
-}
-// Event listeners for page navigation
-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";
-    });
-});
-backToMenuBtns.forEach(button => {
-    button.addEventListener("click", () => {
-        viewCartPage.style.display = "none";
-        placeOrderPage.style.display = "none";
-        categoryButtons.style.display = "block";
-    });
-});
-// Buttons for View Cart and Place Order
-document.getElementById("view-cart-btn").addEventListener("click", () => {
-    showCartDetails();
-    mainCoursePage.style.display = "none";
-    appetizerPage.style.display = "none";
-});
-document.getElementById("view-cart-btn2").addEventListener("click", () => {
-    showCartDetails();
-    mainCoursePage.style.display = "none";
-    appetizerPage.style.display = "none";
-});
-document.getElementById("place-order-btn").addEventListener("click", () => {
-    showPlaceOrder();
-    viewCartPage.style.display = "none";
-});
-document.getElementById("confirm-order-btn").addEventListener("click", () => {
-    speak("Your order has been placed successfully. Thank you for visiting Biryani Hub.");
-    placeOrderPage.style.display = "none";
-    categoryButtons.style.display = "block";
-});
 // Voice greeting for menu categories
 const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
 recognition.lang = "en-US";
@@ -252,6 +219,7 @@ function speak(text) {
 }
 window.onload = function() {
     menuData = {
         'Main Course': [
             { name: "Chicken Biryani", price: 250 },
@@ -264,7 +232,10 @@ window.onload = function() {
         ]
     };
     speak("Welcome to Biryani Hub! We have the following categories: Main Course and Appetizers. Please say 'Main Course' or 'Appetizers' to select a category.");
     recognition.start();
     recognition.onresult = (event) => {
         const categoryCommand = event.results[0][0].transcript.toLowerCase();

     <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;
+    }
+    #view-cart-btn {
+        padding: 10px 20px;
+        background-color: #4CAF50;
+        color: white;
+        border: none;
+        border-radius: 5px;
+        cursor: pointer;
+        font-size: 1.2rem;
+        margin-top: 20px;
+    }
+    #view-cart-btn:hover {
+        background-color: #45a049;
+    }
+</style>
 </head>
 <body>
     <h3 id="category-title">Please select a category:</h3>
     <button id="main-course-btn">Main Course</button>
     <button id="appetizer-btn">Appetizers</button>
+    <button id="view-cart-btn" onclick="viewCart()">View Cart</button>
 </div>
 <!-- Page 2: Main Course Menu -->
     <h1>Main Course Menu</h1>
     <div id="main-course-items"></div>
     <button id="back-to-category-btn">Back to Category Selection</button>
+    <button id="view-cart-btn" onclick="viewCart()">View Cart</button>
 </div>
 <!-- Page 3: Appetizers Menu -->
     <h1>Appetizers Menu</h1>
     <div id="appetizer-items"></div>
     <button id="back-to-category-btn2">Back to Category Selection</button>
+    <button id="view-cart-btn" onclick="viewCart()">View Cart</button>
 </div>
 <!-- Page 4: View Cart -->
     <h1>Your Cart</h1>
     <div id="cart-details"></div>
     <button id="place-order-btn">Place Final Order</button>
+    <button id="back-to-category-btn3" onclick="backToCategory()">Back to Category Selection</button>
 </div>
 <script>
 const mainCoursePage = document.getElementById('main-course-page');
 const appetizerPage = document.getElementById('appetizer-page');
 const viewCartPage = document.getElementById('view-cart-page');
 const backToCategoryBtns = document.querySelectorAll('[id^="back-to-category-btn"]');
+let cart = [];  // Global cart variable to store items
+let menuData = {};  // Will store menu items based on categories
+// 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";
+    });
+});
+// Show Cart page
+function viewCart() {
+    viewCartPage.style.display = "block";
+    categoryButtons.style.display = "none";
+    mainCoursePage.style.display = "none";
+    appetizerPage.style.display = "none";
+    displayCartDetails();
+}
+// Show Cart Details on the View Cart Page
+function displayCartDetails() {
+    const cartDetails = document.getElementById("cart-details");
+    if (cart.length > 0) {
+        let cartHtml = "";
+        cart.forEach(item => {
+            cartHtml += `<p>${item.quantity} x ${item.name} - ₹${item.price * item.quantity}</p>`;
+        });
+        cartDetails.innerHTML = cartHtml;
+    } else {
+        cartDetails.innerHTML = "<p>Your cart is empty.</p>";
+    }
+}
+// Function to populate the menu based on selected category
 function displayMenuItems(category) {
     const menuContainer = category === 'Main Course' ? document.getElementById('main-course-items') : document.getElementById('appetizer-items');
     menuContainer.innerHTML = '';
     cart.push({ name: item.name, price: item.price, quantity: quantity });
 }
+// 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());
 }
 // Voice greeting for menu categories
 const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
 recognition.lang = "en-US";
 }
 window.onload = function() {
+    // Sample menu data for Main Course and Appetizers
     menuData = {
         'Main Course': [
             { name: "Chicken Biryani", price: 250 },
         ]
     };
+    // Automatically greet the user and prompt for category selection
     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();