Spaces:
Sleeping
Sleeping
File size: 6,794 Bytes
7547860 5a1efb3 934ceb8 e748187 934ceb8 e748187 7547860 8fdce7e 934ceb8 5a1efb3 5d580bf 934ceb8 5d580bf 6928c0e 934ceb8 7547860 1674fe0 934ceb8 1674fe0 934ceb8 1674fe0 934ceb8 1674fe0 934ceb8 1674fe0 8e787b4 6928c0e e448584 934ceb8 d9059f7 5a1efb3 d9059f7 e448584 934ceb8 e448584 fd2f5b6 934ceb8 d9059f7 1674fe0 5a1efb3 1674fe0 5a1efb3 5d580bf 5a1efb3 5d580bf 5a1efb3 d9059f7 8fdce7e 934ceb8 7547860 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 |
<!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>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
font-family: Arial, sans-serif;
background-color: #f8f9fa;
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: 0.9rem;
border-radius: 20px;
width: 100px;
}
.filter-container {
margin-bottom: 15px;
}
.view-cart-container {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 999;
}
.view-cart-button {
background-color: #007bff;
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: #0056b3;
text-decoration: none;
}
</style>
</head>
<body>
<div class="d-flex justify-content-between align-items-center p-3" style="background-color: #007bff; color: white;">
<div>
<h6>Referral Code: <span id="referral-code">{{ referral_code }}</span></h6>
</div>
<div>
<button onclick="window.location.href='{{ url_for('order_history') }}'" class="btn btn-light" style="color: #007bff; font-weight: bold;">
Order History
</button>
</div>
<div>
<button onclick="window.location.href='{{ url_for('logout') }}'" class="btn btn-light" style="color: #007bff; font-weight: bold;">
Logout
</button>
</div>
<div>
<h6>Reward Points: <span id="reward-points">{{ reward_points }}</span></h6>
</div>
</div>
<div class="container mt-4">
<h1 class="text-center">Menu</h1>
<!-- Buttons to select vegetarian or non-vegetarian menu -->
<div class="text-center mb-4">
<button class="btn btn-success" onclick="showMenu('veg')">Vegetarian Menu</button>
<button class="btn btn-danger" onclick="showMenu('nonVeg')">Non-Vegetarian Menu</button>
</div>
<!-- Menu Items -->
<div id="menu-items" class="row">
<!-- Dynamically populated menu items will appear here -->
</div>
</div>
<!-- View Cart Button -->
<div class="view-cart-container">
<a href="/cart" class="view-cart-button">
View Cart
</a>
</div>
<script>
// Sample data for the menus
const menuItems = {
veg: [
{ name: 'Samosa', price: 9, ingredients: 'Potatoes, Peas, Flour, Spices', description: 'Crispy fried pastry filled with spiced potatoes and peas.', imageUrl: 'https://via.placeholder.com/100' },
{ name: 'Onion Pakoda', price: 10, ingredients: 'Onions, Gram Flour, Spices', description: 'Deep-fried onion fritters seasoned with herbs and spices.', imageUrl: 'https://via.placeholder.com/100' },
{ name: 'Vegetable Biryani', price: 15, ingredients: 'Rice, Mixed Vegetables, Spices', description: 'Aromatic rice cooked with seasonal vegetables and spices.', imageUrl: 'https://via.placeholder.com/100' }
],
nonVeg: [
{ name: 'Chicken Biryani', price: 14, ingredients: 'Chicken, Rice, Spices', description: 'Aromatic rice cooked with tender chicken and spices.', imageUrl: 'https://via.placeholder.com/100' },
{ name: 'Butter Chicken', price: 15, ingredients: 'Chicken, Tomato, Butter, Cream', description: 'Tender chicken cooked in a rich, creamy tomato sauce.', imageUrl: 'https://via.placeholder.com/100' },
{ name: 'Mutton Biryani', price: 16, ingredients: 'Mutton, Rice, Spices', description: 'Flavorful rice dish made with succulent mutton and aromatic spices.', imageUrl: 'https://via.placeholder.com/100' }
]
};
const cart = [];
// Function to display menu based on user's choice (veg or non-veg)
function showMenu(type) {
const menuContainer = document.getElementById('menu-items');
menuContainer.innerHTML = ''; // Clear previous menu items
menuItems[type].forEach(item => {
const div = document.createElement('div');
div.classList.add('col-md-4', 'mb-4');
div.innerHTML = `
<div class="card menu-card">
<img src="${item.imageUrl}" class="card-img-top menu-image" alt="${item.name}">
<div class="card-body">
<h5 class="card-title">${item.name}</h5>
<p class="card-text">${item.description}</p>
<p class="card-text">Price: $${item.price}</p>
<button class="btn btn-primary" onclick="addToCart('${item.name}')">Add to Cart</button>
</div>
</div>
`;
menuContainer.appendChild(div);
});
}
// Function to add items to the cart
function addToCart(itemName) {
const quantity = prompt(`How many ${itemName} would you like to add?`, 1);
if (quantity && !isNaN(quantity) && quantity > 0) {
const item = menuItems.veg.concat(menuItems.nonVeg).find(item => item.name === itemName);
const cartItem = { ...item, quantity: parseInt(quantity) };
cart.push(cartItem);
alert(`${quantity} of ${itemName} added to your cart.`);
} else {
alert("Please enter a valid quantity.");
}
}
</script>
</body>
</html>
|