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>