Hugging Face's logo

Spaces:
Subbu1304
/
BiryaniHubflaskhema4geetha
Sleeping

App Files Community
BiryaniHubflaskhema4geetha / templates /menu.html
Subbu1304's picture
Subbu1304
Update templates/menu.html
e800a6f verified
raw
history blame contribute delete
20.5 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
<style>
/* Add your styles for buttons and hover effects */
.addbutton .btn {
background-color: #28a745; /* Green background color */
color: white; /* White text color */
padding: 10px 20px; /* Add padding to the button */
font-size: 16px; /* Increase font size */
font-weight: bold; /* Make text bold */
border-radius: 5px; /* Rounded corners */
border: none; /* Remove border */
transition: background-color 0.3s ease; /* Smooth transition for hover effect */
margin-left: 13px; /* Margin for positioning */
}
.addbutton .btn:hover {
background-color: #218838; /* Darker green background on hover */
}
.customisable-text {
color: #28a745; /* Same color as the "ADD" button */
font-size: 12px; /* Same font size as the "ADD" button */
margin-left: 5px;
margin-top: 1px;
}
/* video #################################### */
.menu-image, .menu-video {
height: 200px; /* Fixed height */
width: 100%; /* Full width of the card */
object-fit: cover; /* Ensure the image/video covers the area */
border-radius: 15px 15px 0 0; /* Rounded top corners */
}
/* Hover effect for images */
.menu-card:hover .menu-image {
transform: scale(1.1); /* Slight zoom effect */
transition: transform 0.3s ease-in-out;
}
/* Hover effect for videos */
.menu-card:hover .menu-video {
opacity: 1;
transition: opacity 0.5s ease-in-out;
}
/* video #################################### */
.menu-card {
max-width: 350px;
border-radius: 15px;
overflow: hidden;
background-color: #fff;
margin: auto;
display: flex;
flex-direction: column;
}
.card-title {
font-size: 1.2rem;
font-weight: bold;
margin: 10px 0;
}
.card-text {
font-size: 1rem;
color: #6c757d;
}
.view-cart-container {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 999;
}
.view-cart-button {
background-color: #0FAA39; /* Updated View Cart button background color */
color: #fff;
padding: 10px 20px;
border-radius: 30px;
font-size: 1rem;
font-weight: bold;
text-decoration: none;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
}
.view-cart-button:hover {
background-color: #109835; /* Slightly darker shade for hover effect */
text-decoration: none;
}
</style>
</head>
<body>
<div class="fixed-top-bar">
<!-- Avatar and Dropdown -->
<div class="avatar-dropdown-container">
<div class="avatar-icon">
<span>{{ first_letter }}</span> <!-- Display the first letter of the customer's name -->
</div>
<div class="dropdown-menu">
<a href="{{ url_for('user_details.customer_details') }}" class="dropdown-item">View Profile</a>
<a href="{{ url_for('orderhistory.order_history') }}" class="dropdown-item">Order History</a>
<a href="{{ url_for('logout') }}" class="dropdown-item">Logout</a>
</div>
</div>
<!-- Search Bar Section -->
<div class="search-bar-container">
<input type="text" id="searchBar" class="form-control" placeholder="Search items or sections..." onkeyup="filterMenu()">
<i class="bi bi-search search-icon"></i> <!-- Search icon inside the input -->
</div>
</div>
<!-- Category Filter with Custom Radio Buttons -->
<form method="get" action="/menu" class="text-center mb-4">
<label class="form-label fw-bold">Select a Category:</label>
<div class="form-check form-check-inline">
{% for category in categories %}
<input type="radio" id="category-{{ category }}" name="category" value="{{ category }}" class="custom-radio"
{% if selected_category == category %}checked{% endif %} onchange="this.form.submit()">
<label class="form-check-label" for="category-{{ category }}">{{ category }}</label>
{% endfor %}
</div>
<div class="form-check">
<input type="radio" id="category-CustomizedDish" name="category" value="Customized Dish" class="custom-radio"
{% if selected_category == "Customized Dish" %}checked{% endif %} onchange="this.form.submit()">
<label class="form-check-label" for="category-CustomizedDish">Customized Dish</label>
</div>
</form>
<!-- Menu Sections -->
<div class="container mt-4">
{% if selected_category == "Customized Dish" %}
<!-- Custom Dish Creation Form -->
<div id="custom-dish-form" class="mt-4">
<h3>Create Your Custom Dish</h3>
<form method="POST" action="/customdish/generate_custom_dish">
<div class="mb-3">
<label for="custom-dish-name" class="form-label">Dish Name</label>
<input type="text" class="form-control" id="custom-dish-name" name="name" required>
</div>
<div class="mb-3">
<label for="custom-dish-description" class="form-label">Dish Description</label>
<textarea class="form-control" id="custom-dish-description" name="description" required></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
{% else %}
<!-- Display Menu Items -->
{% for section, items in ordered_menu.items() %}
<h3>{{ section }}</h3>
<div class="row">
{% for item in items %}
<div class="col-md-6 mb-4">
<div class="card menu-card">
{% if item.Video %}
<!-- Display Video -->
<video class="menu-video" muted loop preload="auto" poster="{{ item.Video__c }}">
<source src="{{ item.Video__c }}" type="video/mp4">
</video>
{% else %}
<!-- Display Image -->
<img src="{{ item.Image1__c }}" class="menu-image" alt="{{ item.Name }}" onerror="this.src='/static/placeholder.jpg';" loading="lazy">
{% endif %}
<div class="addbutton">
<div class="card-body d-flex align-items-center justify-content-between">
<div>
<h5 class="card-title">{{ item.Name }}</h5>
<p class="card-text">${{ item.Price__c }}</p>
</div>
<div class="d-flex flex-column align-items-center justify-content-center">
<button class="btn btn-primary"
data-bs-toggle="modal" data-bs-target="#itemModal"
onclick="showItemDetails('{{ item.Name }}', '{{ item.Price__c }}', '{{ item.Image2__c }}', '{{ item.Description__c }}', '{{ item.Section__c }}', '{{ selected_category }}')">
ADD
</button>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{% endfor %}
{% endif %}
</div>
<!-- View Cart Button -->
<div class="view-cart-container">
<a href="{{ url_for('cart.cart') }}" class="view-cart-button">
View Cart
</a>
</div>
<!-- Modal for Item Details -->
<!-- Add the modal as per your existing code here -->
<script>
// Function to filter the menu by search bar input (if needed)
function showItemDetails(name, price, image, description, section, selectedCategory) {
document.getElementById('modal-name').innerText = name;
document.getElementById('modal-price').innerText = `$${price}`;
document.getElementById('modal-img').src = image || '/static/placeholder.jpg';
document.getElementById('modal-description').innerText = description || 'No description available.';
document.getElementById('addons-list').innerHTML = 'Loading customization options...';
document.getElementById('modal-instructions').value = '';
const modalSectionEl = document.getElementById('modal-section');
modalSectionEl.setAttribute('data-section', section);
modalSectionEl.setAttribute('data-category', selectedCategory);
// Set the default quantity to 1
document.getElementById('quantityInput').value = 1;
// Fetch customization options based on the section
fetch(`/api/addons?item_name=${encodeURIComponent(name)}&item_section=${encodeURIComponent(section)}`)
.then(response => response.json())
.then(data => {
const addonsList = document.getElementById('addons-list');
addonsList.innerHTML = ''; // Clear previous content
if (!data.success || !data.addons || data.addons.length === 0) {
addonsList.innerHTML = '<p>No customization options available.</p>';
return;
}
// Display customization options inside styled divs
data.addons.forEach(addon => {
const sectionDiv = document.createElement('div');
sectionDiv.classList.add('addon-section'); // Add styling class
// Add section title
const title = document.createElement('h6');
title.innerText = addon.name;
sectionDiv.appendChild(title);
// Create options list
const optionsContainer = document.createElement('div');
addon.options.forEach((option, index) => {
const optionId = `addon-${addon.name.replace(/\s+/g, '')}-${index}`;
const listItem = document.createElement('div');
listItem.classList.add('form-check');
listItem.innerHTML = `
<input type="checkbox" class="form-check-input addon-option" id="${optionId}" value="${option}"
data-name="${option}" data-group="${addon.name}" data-price="${addon.extra_charge ? addon.extra_charge_amount : 0}">
<label class="form-check-label" for="${optionId}">
${option} ${addon.extra_charge ? `($${addon.extra_charge_amount})` : ''}
</label>
`;
optionsContainer.appendChild(listItem);
});
sectionDiv.appendChild(optionsContainer);
addonsList.appendChild(sectionDiv);
});
})
.catch(err => {
console.error('Error fetching add-ons:', err);
document.getElementById('addons-list').innerHTML = '<p>Error loading customization options.</p>';
});
}
// Ensure the video plays when hovering over the container
// document.querySelectorAll('.menu-item').forEach((item) => {
// const video = item.querySelector('.menu-video');
// // const image = item.querySelector('.menu-image');
// item.addEventListener('mouseenter', () => {
// if (video) {
// video.play(); // Play video on hover
// }
// });
// item.addEventListener('mouseleave', () => {
// if (video) {
// video.pause(); // Pause video when hover ends
// video.currentTime = 0; // Reset video to the start
// }
// });
// });
// Handle single-select/deselect logic for checkbox groups in all modals
document.addEventListener('click', function(event) {
if (event.target.classList.contains('addon-option')) {
handleAddonClick(event.target);
}
});
// Handle checkbox selection logic
function handleAddonClick(checkbox) {
const groupName = checkbox.getAttribute('data-group');
const isMultiSelectGroup = ["Extra Toppings", "Choose Raita/Sides","Select Dip/Sauce","Extra Add-ons","Make it a Combo","Beverages","Sauces"].includes(groupName);
// If it's not multi-select, uncheck all other checkboxes in the same group
if (!isMultiSelectGroup) {
const checkboxes = document.querySelectorAll(`.addon-option[data-group="${groupName}"]`);
checkboxes.forEach(otherCheckbox => {
if (otherCheckbox !== checkbox) {
otherCheckbox.checked = false;
}
});
}
}
function filterMenu() {
let input = document.getElementById('searchBar').value.toLowerCase(); // Get the value from search bar
let sections = document.querySelectorAll('h3'); // Select section headers
let items = document.querySelectorAll('.menu-card'); // Select all items
let matchedSections = new Set(); // Store matched sections
// Hide all items initially
items.forEach(item => {
let itemName = item.querySelector('.card-title').innerText.toLowerCase(); // Get item name
let itemSection = item.closest('.row').previousElementSibling.innerText.toLowerCase(); // Get section name
// If the search matches item name or section, show the item
if (itemName.includes(input) || (itemSection && itemSection.includes(input))) {
item.style.display = 'block'; // Show item if it matches search
matchedSections.add(item.closest('.row')); // Add section to matched list
} else {
item.style.display = 'none'; // Hide item if not matched
}
});
// Show or hide sections based on matched items
sections.forEach(section => {
let sectionRow = section.nextElementSibling; // The row containing items
if (matchedSections.has(sectionRow)) {
section.style.display = 'block'; // Show section header
sectionRow.style.display = 'flex'; // Show section items
} else {
section.style.display = 'none'; // Hide section header
sectionRow.style.display = 'none'; // Hide section items
}
});
}
function addToCartFromModal() {
const itemName = document.getElementById('modal-name').innerText;
let itemPrice = parseFloat(document.getElementById('modal-price').innerText.replace('$', ''));
// Validate item price
if (isNaN(itemPrice)) {
alert('Invalid price for the item. Please check the item details.');
return;
}
const itemImage = document.getElementById('modal-img').src;
console.log(itemName, itemPrice, itemImage); // Log values for debugging
const modalSectionEl = document.getElementById('modal-section');
const section = modalSectionEl.getAttribute('data-section');
const selectedCategory = modalSectionEl.getAttribute('data-category');
if (!itemName || !itemPrice || !section || !itemImage) {
console.error('Missing data for cart item:', { itemName, itemPrice, section, itemImage});
return;
}
// Collect selected add-ons
let selectedAddOns = Array.from(
document.querySelectorAll('#addons-list input[type="checkbox"]:checked')
).map(addon => ({
name: addon.getAttribute('data-name') || 'Default Name', // Fallback Name
price: parseFloat(addon.getAttribute('data-price') || 0)
}));
// Get the selected quantity
const quantity = parseInt(document.getElementById('quantityInput').value) || 1; // Default to 1 if invalid
const instructions = document.getElementById('modal-instructions').value;
// Prepare data for the cart
const cartPayload = {
itemName: itemName,
itemPrice: itemPrice,
itemImage: itemImage,
section: section,
category: selectedCategory,
addons: selectedAddOns,
instructions: instructions,
quantity: quantity // Include the quantity
};
// Send the cart data to the server
fetch('/cart/add', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(cartPayload)
})
.then(response => response.json())
.then(data => {
if (data.success) {
alert('Item added to cart successfully!');
updateCartUI(data.cart); // Update cart UI after adding an item
const modal = document.getElementById('itemModal');
const modalInstance = bootstrap.Modal.getInstance(modal);
modalInstance.hide();
} else {
alert(data.error || 'Failed to add item to cart.');
}
})
.catch(err => {
console.error('Error adding item to cart:', err);
alert('An error occurred while adding the item to the cart.');
});
}
function updateCartUI(cart) {
if (!Array.isArray(cart)) {
console.error('Invalid cart data:', cart);
return;
}
const cartIcon = document.getElementById('cart-icon');
cartIcon.innerText = cart.length; // Assuming cart is an array of items
}
function updateCartDisplay(cart) {
if (!Array.isArray(cart)) {
console.error('Invalid cart data:', cart);
return;
}
// Optional: Update quantity on the cart page
const cartCountElement = document.getElementById('cart-count');
cartCountElement.innerText = cart.reduce((total, item)=> total+item.quantity,0); // Update cart item count //Sum of all quantities
// Optionally, show a small success notification that the item was added
const successNotification = document.createElement('div');
successNotification.classList.add('success-notification');
successNotification.innerText = 'Item added to cart!';
document.body.appendChild(successNotification);
setTimeout(() => {
successNotification.remove(); // Remove success notification after a few seconds
}, 2000);
}
document.addEventListener('DOMContentLoaded', function () {
// Get references to the quantity buttons and the input field
const decreaseBtn = document.getElementById('decreaseQuantity');
const increaseBtn = document.getElementById('increaseQuantity');
const quantityInput = document.getElementById('quantityInput');
// Add event listener to decrease button
decreaseBtn.addEventListener('click', function () {
let currentQuantity = parseInt(quantityInput.value);
if (currentQuantity > 1) {
currentQuantity--;
quantityInput.value = currentQuantity;
}
});
// Add event listener to increase button
increaseBtn.addEventListener('click', function () {
let currentQuantity = parseInt(quantityInput.value);
currentQuantity++;
quantityInput.value = currentQuantity;
});
});
// Add other modal functionality, item details, and cart handling as needed
</script>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>