BiryaniHubflask37

Running

App Files Files Community

BiryaniHubflask37 / templates /menu.html

DSatishchandra

Update templates/menu.html

ccd432e verified 10 days ago

raw

history blame contribute delete

20.3 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">
	<style>
	body {
	font-family: Arial, sans-serif;
	background-color: #ffffff; /* Updated background color */
	margin: 0;
	padding: 0;
	}
	.container {
	max-width: 900px;
	}
	.menu-card {
	max-width: 350px;
	border-radius: 15px;
	overflow: hidden;
	background-color: #fff;
	margin: auto;
	}
	.menu-image {
	height: 200px;
	width: 100%;
	object-fit: cover;
	border-radius: 15px 15px 0 0;
	}
	.card-title {
	font-size: 1.2rem;
	font-weight: bold;
	}
	.card-text {
	font-size: 1rem;
	color: #6c757d;
	}
	.btn-primary {
	font-size: 14px;
	font-weight: bold;
	border-radius: 5px;
	width: 100px;
	background-color: #0FAA39; /* Updated button background color */
	border-color: #28a745;

	}
	.btn-primary:hover {
	background-color: #0FAA39;
	border-color: #ffffff;
	}
	.btn-primary:active,
	.btn-primary:focus {
	background-color: #4a5d68;
	border-color: #ffffff;
	box-shadow: none;
	}
	.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: 50px;
	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;
	}
	.avatar-dropdown-container {
	position: relative;
	}
	.avatar-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: #5bbfc1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 20px;
	font-weight: bold;
	}
	.dropdown-menu {
	position: absolute;
	right: 0;
	top: 100%;
	background-color: #fff;
	border-radius: 5px;
	width: 200px; /* Adjust width as needed */
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
	display: none;
	}
	.avatar-dropdown-container:hover .dropdown-menu {
	display: block;
	}
	.dropdown-menu .dropdown-item {
	padding: 10px 15px;
	text-decoration: none;
	color: #333;
	border-bottom: 1px solid #ddd;
	display: block; /* Make each item stack vertically */
	}
	.dropdown-menu .dropdown-item:last-child {
	border-bottom: none; /* Remove the bottom border from the last item */
	}
	.dropdown-menu .dropdown-item:hover {
	background-color: #f1f1f1;
	}
	.fixed-search-container {
	position: absolute;
	top: 90px; /* Move it slightly lower */
	left: 50%;
	transform: translateX(-50%);
	width: 80%;
	max-width: 600px;
	z-index: 999; /* Keep it above content */
	background-color: white;
	padding: 10px;
	border-radius: 25px;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
	}
	/* Ensure the category filter dropdown does not overlap */
	form.text-center.mb-4 {
	margin-top: 120px !important; /* Increase spacing below search bar */
	}
	/* Ensure the container has enough margin so nothing is overlapped */
	.container {
	margin-top: 180px; /* Adjust spacing based on navbar and search bar */
	}
	.fixed-top-bar {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 44px;
	z-index: 1000; /* Ensures it stays on top of other elements */
	background-color: #FF6B35; /* Updated header background */
	color: white;
	padding: 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	}

	.search-bar-container {
	margin-left: 20px;
	margin-right: 20px;
	flex: 1;
	max-width: 500px; /* Adjust the width */
	display: flex;
	justify-content: center;
	}
	.search-bar-container input {
	width: 100%;
	padding: 8px;
	font-size: 16px;
	border-radius: 20px;
	border: none;
	}


	/* Style for customization sections */
	.addon-section {
	background-color: #f8f9fa; /* Light gray background */
	border: 2px solid #ff6b35; /* Border color */
	border-radius: 8px;
	padding: 12px;
	margin-bottom: 15px; /* Spacing between sections */
	}
	/* Customization section title */
	.addon-section h6 {
	margin-bottom: 10px;
	font-size: 1.1rem;
	font-weight: bold;
	color: #333;
	}
	/* Style for add-on checkboxes */
	.addon-section .form-check {
	margin-left: 10px;
	}

	/* Category Filter with Custom Radio Buttons */
	form.text-center.mb-4 {
	display: flex;
	flex-direction: column;
	align-items: center;
	}

	.form-check {
	display: inline-block;
	margin-right: 15px;
	margin-bottom: 10px; /* Add space between buttons */
	}

	.form-check-inline {
	margin-right: 10px;
	}

	.form-check-label {
	font-size: 16px;
	margin-left: 8px; /* Space between radio button and label */
	}

	.custom-radio {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	width: 18px;
	height: 18px;
	border: 2px solid #333;
	border-radius: 50%;
	margin-right: 10px; /* Increased spacing between button and label */
	outline: none;
	cursor: pointer;
	position: relative;
	}

	.custom-radio:checked {
	background-color: #007bff;
	border-color: #007bff;
	}

	.custom-radio:checked::after {
	content: '';
	position: absolute;
	top: 4px;
	left: 4px;
	width: 8px;
	height: 8px;
	background-color: #fff;
	border-radius: 50%;
	}

	.custom-radio:hover {
	border-color: #007bff;
	}

	/* Optional: Style the labels */
	.form-check-label {
	font-size: 16px;
	margin-left: 8px; /* Space between the radio button and the label */
	}
	</style>
	</head>
	<body>

	<div class="fixed-top-bar">
	<!-- Removed Reward Points and Referral Code -->
	<div class="d-flex align-items-center">
	<a href="{{ url_for('order_history') }}" class="text-white mx-2" title="Order History">
	<i class="bi bi-clock-history fs-4"></i>
	</a>
	<a href="{{ url_for('logout') }}" class="text-white mx-2" title="Logout">
	<i class="bi bi-box-arrow-right fs-4"></i>
	</a>
	</div>
	<!-- Add Welcome Message with Customer Name -->
	<div class="d-flex align-items-center">
	<span class="text-white mr-3">Welcome, {{ user_name }}</span> <!-- Display the customer's name -->
	</div>

	<!-- Avatar and Dropdown -->
	<div class="avatar-dropdown-container">
	<div class="avatar-icon">
	<!-- Use the first letter of the user's name for the avatar -->
	<span>{{ first_letter }}</span> <!-- Display the first letter of the customer's name -->
	</div>
	<div class="dropdown-menu">
	<!-- Direct links without grouping into columns -->
	<a href="{{ url_for('customer_details') }}" class="dropdown-item">View Profile</a>
	<a href="{{ url_for('order_history') }}" class="dropdown-item">Order History</a>
	<a href="{{ url_for('logout') }}" class="dropdown-item">Logout</a>
	</div>
	</div>

	<!-- Search Bar Moved to Header Section -->
	<div class="search-bar-container">
	<input type="text" id="searchBar" class="form-control" placeholder="Search items or sections..." onkeyup="filterMenu()">
	</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 %}
	<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>

	<!-- Display text boxes for Customized Dish -->
	{% if selected_category == "Customized Dish" %}
	<div id="custom-dish-form" class="mt-4">
	<h3>Create Your Custom Dish</h3>
	<form method="POST" action="/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 %}

	<!-- Show menu items only when Customized Dish is not selected -->
	<div class="container mt-4">
	<h1 class="text-center">Menu</h1>

	<!-- Menu Sections -->
	{% 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">
	<img src="{{ item.Image1__c }}" class="card-img-top menu-image" alt="{{ item.Name }}" onerror="this.src='/static/placeholder.jpg';">
	<div class="card-body">
	<h5 class="card-title">{{ item.Name }}</h5>
	<p class="card-text">${{ item.Price__c }}</p>
	<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>
	{% endfor %}
	</div>
	{% endfor %}
	</div>
	{% endif %}

	</div>

	<!-- View Cart Button -->
	<div class="view-cart-container">
	<a href="/cart" class="view-cart-button">
	View Cart
	</a>
	</div>

	<!-- Bootstrap JS -->
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

	<!-- JavaScript -->
	<script>
	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 = '';
	// Set section and category for reference
	const modalSectionEl = document.getElementById('modal-section');
	modalSectionEl.setAttribute('data-section', section);
	modalSectionEl.setAttribute('data-category', selectedCategory);
	// 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-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>';
	});
	}

	function filterMenu() {
	let input = document.getElementById('searchBar').value.toLowerCase();
	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();
	let itemSection = item.closest('.row').previousElementSibling.innerText.toLowerCase(); // Get section name
	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;
	const itemPrice = parseFloat(document.getElementById('modal-price').innerText.replace('$', ''));
	const itemImage = document.getElementById('modal-img').src;
	const modalSectionEl = document.getElementById('modal-section');
	const section = modalSectionEl.getAttribute('data-section');
	const selectedCategory = modalSectionEl.getAttribute('data-category');
	// Collect selected add-ons
	const selectedAddOns = Array.from(
	document.querySelectorAll('#addons-list input[type="checkbox"]:checked')
	).map(addon => ({
	name: addon.getAttribute('data-name'),
	price: parseFloat(addon.getAttribute('data-price'))
	}));
	const instructions = document.getElementById('modal-instructions').value;
	if (!itemName \|\| !itemPrice) {
	alert('Failed to add item to cart. Please try again.');
	return;
	}
	const cartPayload = {
	itemName: itemName,
	itemPrice: itemPrice,
	itemImage: itemImage,
	section: section,
	category: selectedCategory,
	addons: selectedAddOns,
	instructions: instructions
	};
	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!');
	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 to round reward points to a single digit
	function roundRewardPoints() {
	let rewardPointsElement = document.getElementById('reward-points');
	let rewardPoints = parseFloat(rewardPointsElement.innerText);

	if (!isNaN(rewardPoints)) {
	rewardPointsElement.innerText = rewardPoints.toFixed(1); // Rounds to 1 decimal place
	}
	}
	// Run the function when the page loads
	window.onload = roundRewardPoints;

	</script>

	<!-- Bootstrap JS -->
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
	</body>
	</html>
	</script>
	</body>
	</html>