voicemenu1433

Sleeping

File size: 12,109 Bytes

<!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>