voicemenuspe

Running

App Files Files Community

lokesh341 commited on 10 days ago

Commit

1090047

verified ·

1 Parent(s): 316469c

Update templates/menu_page.html

Browse files

Files changed (1) hide show

templates/menu_page.html +301 -157

templates/menu_page.html CHANGED Viewed

@@ -1,209 +1,353 @@
 <!DOCTYPE html>
 <html lang="en">
 <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;
     }
     .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;
     }
-</style>
 </head>
 <body>
-<!-- Page 1: Welcome and Category Selection -->
-<div id="page1" class="menu-container">
-    <h1>Welcome to Biryani Hub menu</h1>
     <h3 id="category-title">Please select a category:</h3>
     <button id="main-course-btn">Main Course</button>
     <button id="appetizer-btn">Appetizers</button>
-</div>
-<!-- Page 2: Main Course Menu -->
-<div id="main-course-page" class="menu-container" style="display: none;">
     <h1>Main Course Menu</h1>
     <div id="main-course-items"></div>
-    <button id="back-to-category-btn">Back to Category Selection</button>
-</div>
-<!-- Page 3: Appetizers Menu -->
-<div id="appetizer-page" class="menu-container" style="display: none;">
     <h1>Appetizers Menu</h1>
     <div id="appetizer-items"></div>
-    <button id="back-to-category-btn2">Back to Category Selection</button>
-</div>
-<script>
-// Sample menu data
-const menuData = {
-    'Main Course': [
         { name: "Chicken Biryani", price: 250 },
         { name: "Veg Biryani", price: 200 },
         { name: "Mutton Biryani", price: 300 }
-    ],
-    'Appetizers': [
         { name: "Paneer Tikka", price: 180 },
         { name: "Chicken Wings", price: 220 }
-    ]
-};
-// Selectors for pages and buttons
-const categoryButtons = document.getElementById('page1');
-const mainCoursePage = document.getElementById('main-course-page');
-const appetizerPage = document.getElementById('appetizer-page');
-const backToCategoryBtns = document.querySelectorAll('[id^="back-to-category-btn"]');
-// 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";
     });
-});
-// Function to populate menu items based on category
-function displayMenuItems(category) {
-    const menuContainer = category === 'Main Course' ? document.getElementById('main-course-items') : document.getElementById('appetizer-items');
-    menuContainer.innerHTML = '';
-    if (menuData[category]) {
         menuData[category].forEach(item => {
-            const itemElement = document.createElement('div');
-            itemElement.classList.add('menu-item');
-            itemElement.innerHTML = `
-                <div class="details">
-                    <h3>${item.name}</h3>
-                    <p class="price">Price: ₹${item.price}</p>
-                </div>
-                <button class="order-btn" onclick="addToCart('${item.name}', 1)">Order</button>
-            `;
-            menuContainer.appendChild(itemElement);
         });
     }
-}
-// Function to add an item to the cart
-let cart = [];
-function addToCart(itemName, quantity) {
-    const item = findItem(itemName);
-    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";
-recognition.interimResults = false;
-function speak(text) {
-    const msg = new SpeechSynthesisUtterance(text);
-    window.speechSynthesis.speak(msg);
-}
-window.onload = function() {
-    // Sample menu data for Main Course and Appetizers
-    menuData = {
-        'Main Course': [
-            { name: "Chicken Biryani", price: 250 },
-            { name: "Veg Biryani", price: 200 },
-            { name: "Mutton Biryani", price: 300 }
-        ],
-        'Appetizers': [
-            { name: "Paneer Tikka", price: 180 },
-            { name: "Chicken Wings", price: 220 }
-        ]
-    };
-    // 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();
         if (categoryCommand.includes("main course")) {
-            displayMenuItems('Main Course');
-            mainCoursePage.style.display = "block";
-            categoryButtons.style.display = "none";
         } else if (categoryCommand.includes("appetizers")) {
-            displayMenuItems('Appetizers');
-            appetizerPage.style.display = "block";
-            categoryButtons.style.display = "none";
         } else {
-            speak("Sorry, I couldn't understand that. Please say 'Main Course' or 'Appetizers'.");
         }
     };
-};
-</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>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;
     }
+    /* Additional styling for pages */
+    input, textarea {
+      width: 100%;
+      padding: 8px;
+      margin: 5px 0 15px;
+      border-radius: 4px;
+      border: 1px solid #ccc;
     }
+  </style>
 </head>
 <body>
+  <!-- Page 1: Category Selection -->
+  <div id="page1" class="menu-container">
+    <h1>Welcome to Biryani Hub Menu</h1>
     <h3 id="category-title">Please select a category:</h3>
     <button id="main-course-btn">Main Course</button>
     <button id="appetizer-btn">Appetizers</button>
+  </div>
+  <!-- Page 2: Main Course Menu -->
+  <div id="main-course-page" class="menu-container" style="display: none;">
     <h1>Main Course Menu</h1>
     <div id="main-course-items"></div>
+    <button id="back-to-category-btn" class="order-btn">Back to Category Selection</button>
+    <button id="view-cart-btn1" class="order-btn">View Cart</button>
+  </div>
+  <!-- Page 3: Appetizers Menu -->
+  <div id="appetizer-page" class="menu-container" style="display: none;">
     <h1>Appetizers Menu</h1>
     <div id="appetizer-items"></div>
+    <button id="back-to-category-btn2" class="order-btn">Back to Category Selection</button>
+    <button id="view-cart-btn2" class="order-btn">View Cart</button>
+  </div>
+  <!-- Page 4: Cart Summary -->
+  <div id="cart-page" class="menu-container" style="display: none;">
+    <h1>Your Cart</h1>
+    <div id="cart-items"></div>
+    <h3 id="cart-total"></h3>
+    <button id="back-to-menu-btn" class="order-btn">Back to Menu</button>
+    <button id="proceed-order-btn" class="order-btn">Place Order</button>
+  </div>
+  <!-- Page 5: Place Order -->
+  <div id="order-page" class="menu-container" style="display: none;">
+    <h1>Place Your Order</h1>
+    <form id="order-form">
+      <label for="customer-name">Name:</label>
+      <input type="text" id="customer-name" required />
+      <label for="customer-email">Email:</label>
+      <input type="email" id="customer-email" required />
+      <label for="customer-phone">Phone:</label>
+      <input type="tel" id="customer-phone" required />
+      <label for="customer-address">Address:</label>
+      <textarea id="customer-address" required></textarea>
+      <button type="submit" class="order-btn">Submit Order</button>
+    </form>
+    <button id="back-to-cart-btn" class="order-btn">Back to Cart</button>
+  </div>
+  <script>
+    // Sample menu data
+    const menuData = {
+      'Main Course': [
         { name: "Chicken Biryani", price: 250 },
         { name: "Veg Biryani", price: 200 },
         { name: "Mutton Biryani", price: 300 }
+      ],
+      'Appetizers': [
         { name: "Paneer Tikka", price: 180 },
         { name: "Chicken Wings", price: 220 }
+      ]
+    };
+    // Initialize cart as an empty array
+    let cart = [];
+    // Select page elements
+    const categoryPage = document.getElementById('page1');
+    const mainCoursePage = document.getElementById('main-course-page');
+    const appetizerPage = document.getElementById('appetizer-page');
+    const cartPage = document.getElementById('cart-page');
+    const orderPage = document.getElementById('order-page');
+    // Category selection event listeners
+    document.getElementById("main-course-btn").addEventListener("click", () => {
+      categoryPage.style.display = "none";
+      mainCoursePage.style.display = "block";
+      displayMenuItems('Main Course');
+    });
+    document.getElementById("appetizer-btn").addEventListener("click", () => {
+      categoryPage.style.display = "none";
+      appetizerPage.style.display = "block";
+      displayMenuItems('Appetizers');
+    });
+    // Back to category selection buttons
+    document.getElementById("back-to-category-btn").addEventListener("click", () => {
+      mainCoursePage.style.display = "none";
+      categoryPage.style.display = "block";
+    });
+    document.getElementById("back-to-category-btn2").addEventListener("click", () => {
+      appetizerPage.style.display = "none";
+      categoryPage.style.display = "block";
+    });
+    // View Cart buttons
+    document.getElementById("view-cart-btn1").addEventListener("click", () => {
+      mainCoursePage.style.display = "none";
+      cartPage.style.display = "block";
+      displayCartItems();
+    });
+    document.getElementById("view-cart-btn2").addEventListener("click", () => {
+      appetizerPage.style.display = "none";
+      cartPage.style.display = "block";
+      displayCartItems();
+    });
+    // Navigation from Cart page
+    document.getElementById("back-to-menu-btn").addEventListener("click", () => {
+      cartPage.style.display = "none";
+      categoryPage.style.display = "block";
+    });
+    document.getElementById("proceed-order-btn").addEventListener("click", () => {
+      cartPage.style.display = "none";
+      orderPage.style.display = "block";
     });
+    // Navigation from Order page back to Cart
+    document.getElementById("back-to-cart-btn").addEventListener("click", () => {
+      orderPage.style.display = "none";
+      cartPage.style.display = "block";
+      displayCartItems();
+    });
+    // Function to populate menu items based on category
+    function displayMenuItems(category) {
+      const menuContainer = category === 'Main Course' ? document.getElementById('main-course-items') : document.getElementById('appetizer-items');
+      menuContainer.innerHTML = '';
+      if (menuData[category]) {
         menuData[category].forEach(item => {
+          const itemElement = document.createElement('div');
+          itemElement.classList.add('menu-item');
+          itemElement.innerHTML = `
+            <div class="details">
+              <h3>${item.name}</h3>
+              <p class="price">Price: ₹${item.price}</p>
+            </div>
+            <button class="order-btn" onclick="addToCart('${item.name}', 1)">Order</button>
+          `;
+          menuContainer.appendChild(itemElement);
         });
+      }
+    }
+    // Function to add an item to the cart
+    function addToCart(itemName, quantity) {
+      const item = findItem(itemName);
+      if (item) {
+        // Check if item already exists in the cart and update quantity
+        const cartItem = cart.find(ci => ci.name.toLowerCase() === itemName.toLowerCase());
+        if (cartItem) {
+          cartItem.quantity += quantity;
+        } else {
+          cart.push({ name: item.name, price: item.price, quantity: quantity });
+        }
+        alert(item.name + " added to cart!");
+      }
+    }
+    // Function to find item in the menu (checks both categories)
+    function findItem(itemName) {
+      let item = menuData['Main Course'].find(item => item.name.toLowerCase() === itemName.toLowerCase());
+      if (!item) {
+        item = menuData['Appetizers'].find(item => item.name.toLowerCase() === itemName.toLowerCase());
+      }
+      return item;
     }
+    // Function to display cart items
+    function displayCartItems() {
+      const cartItemsContainer = document.getElementById('cart-items');
+      cartItemsContainer.innerHTML = '';
+      let total = 0;
+      if (cart.length === 0) {
+        cartItemsContainer.innerHTML = "<p>Your cart is empty.</p>";
+      } else {
+        cart.forEach(item => {
+          const itemDiv = document.createElement('div');
+          itemDiv.classList.add('menu-item');
+          itemDiv.innerHTML = `
+            <div class="details">
+              <h3>${item.name}</h3>
+              <p>Price: ₹${item.price} x ${item.quantity}</p>
+            </div>
+          `;
+          cartItemsContainer.appendChild(itemDiv);
+          total += item.price * item.quantity;
+        });
+      }
+      document.getElementById('cart-total').innerText = "Total: ₹" + total;
+    }
+    // Voice greeting for menu categories
+    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);
+    }
+    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();
         if (categoryCommand.includes("main course")) {
+          displayMenuItems('Main Course');
+          mainCoursePage.style.display = "block";
+          categoryPage.style.display = "none";
         } else if (categoryCommand.includes("appetizers")) {
+          displayMenuItems('Appetizers');
+          appetizerPage.style.display = "block";
+          categoryPage.style.display = "none";
         } else {
+          speak("Sorry, I couldn't understand that. Please say 'Main Course' or 'Appetizers'.");
         }
+      };
     };
+    // Handle Order Form Submission and Salesforce integration
+    document.getElementById("order-form").addEventListener("submit", function(e) {
+      e.preventDefault();
+      // Gather customer details from form inputs
+      const customerName = document.getElementById("customer-name").value;
+      const customerEmail = document.getElementById("customer-email").value;
+      const customerPhone = document.getElementById("customer-phone").value;
+      const customerAddress = document.getElementById("customer-address").value;
+      // Calculate total amount
+      let total = 0;
+      cart.forEach(item => {
+        total += item.price * item.quantity;
+      });
+      // Prepare the order details
+      const orderDetails = {
+        customerName,
+        customerEmail,
+        customerPhone,
+        customerAddress,
+        items: cart,
+        totalAmount: total
+      };
+      // Example Salesforce integration
+      // Replace the URL below with your actual Salesforce endpoint and configure authentication as needed.
+      fetch('https://your-salesforce-endpoint.com/api/orders', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+          // Add any required authentication headers here.
+        },
+        body: JSON.stringify(orderDetails)
+      })
+      .then(response => response.json())
+      .then(data => {
+        alert("Order placed successfully! Order ID: " + data.orderId);
+        // Clear the cart after successful order placement
+        cart = [];
+        // Navigate back to the category selection page
+        orderPage.style.display = "none";
+        categoryPage.style.display = "block";
+      })
+      .catch(error => {
+        console.error("Error placing order:", error);
+        alert("There was an error placing your order. Please try again.");
+      });
+    });
+  </script>
 </body>
 </html>