Hugging Face's logo

Spaces:
Swathi6
/
Demo
Runtime error

App Files Community
Demo / templates /menu_page.html
Swathi6's picture
Swathi6
Rename templates/templates/menu_page.html to templates/menu_page.html
947f9c1 verified
Raw
History Blame Contribute Delete
12.1 kB
<!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>