Spaces:
Sleeping
Sleeping
File size: 7,909 Bytes
f7356a1 cd2c91d 7547860 86b7bfb e748187 86b7bfb 1ea5871 86b7bfb 1ea5871 86b7bfb 1ea5871 86b7bfb 1ea5871 86b7bfb 1ea5871 86b7bfb 1ea5871 86b7bfb 1ea5871 86b7bfb 7a88679 86b7bfb 7a88679 86b7bfb 7a88679 86b7bfb 7a88679 86b7bfb 7a88679 86b7bfb 7a88679 86b7bfb 7a88679 86b7bfb 7a88679 e748187 7547860 8fdce7e 86b7bfb 5a9b054 ce5c734 86b7bfb 7a88679 86b7bfb 7a88679 ce5c734 86b7bfb 7a88679 86b7bfb 7a88679 86b7bfb 7a88679 86b7bfb 7a88679 86b7bfb 7a88679 86b7bfb ce5c734 86b7bfb 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 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 |
<!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>
/* General Styling */
body {
font-family: Arial, sans-serif;
background-color: #f8f8f8;
margin: 0;
padding: 0;
}
.container {
max-width: 1200px;
margin: 50px auto;
text-align: center;
}
h1 {
font-size: 2.5rem;
color: #333;
}
/* Menu Buttons */
.menu-option button {
font-size: 1.2rem;
padding: 10px 20px;
margin: 20px;
cursor: pointer;
border: none;
border-radius: 5px;
background-color: #007bff;
color: white;
}
.menu-option button:hover {
background-color: #0056b3;
}
/* Menu Items */
.menu-item {
display: inline-block;
width: 30%;
margin: 10px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
background-color: #fff;
}
.menu-item img {
width: 100px;
height: 100px;
border-radius: 8px;
margin-bottom: 10px;
}
/* Cart Section */
.cart-container {
margin-top: 30px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
background-color: #eaf3e1;
display: none;
}
.cart-item {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
/* View Cart Button */
.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;
display: flex;
align-items: center;
justify-content: center;
}
.view-cart-button:hover {
background-color: #0056b3;
text-decoration: none;
}
</style>
</head>
<body>
<!-- Welcome Section -->
<div class="container" id="welcome-container">
<h1>Welcome to the Biryani Hub Menu</h1>
<div class="menu-option">
<button id="veg-btn" onclick="showMenu('veg')">Vegetarian Menu</button>
<button id="non-veg-btn" onclick="showMenu('nonVeg')">Non-Vegetarian Menu</button>
</div>
</div>
<!-- Menu Section -->
<div class="container" id="menu-container" style="display: none;">
<h1>Menu</h1>
<div id="menu-items" class="row">
<!-- Menu items will be dynamically added here -->
</div>
<button onclick="viewCart()">View Cart</button>
</div>
<!-- Cart Section -->
<div class="cart-container" id="cart-container">
<h2>Your Cart</h2>
<div id="cart-items"></div>
<button onclick="placeOrder()">Place Final Order</button>
</div>
<!-- Floating View Cart Button -->
<div class="view-cart-container">
<a href="javascript:void(0);" class="view-cart-button" onclick="viewCart()">View Cart</a>
</div>
<script>
// Menu Data
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: 'Chilli Gobi', price: 12, ingredients: 'Cauliflower, Chili Sauce, Spices', description: 'Cauliflower florets tossed in a spicy chili sauce.', imageUrl: 'https://via.placeholder.com/100' }
],
nonVeg: [
{ name: 'Chicken Biryani', price: 14, ingredients: 'Chicken, Basmati Rice, Spices', description: 'Aromatic basmati rice cooked with tender chicken and spices.', imageUrl: 'https://via.placeholder.com/100' },
{ name: 'Mutton Biryani', price: 16, ingredients: 'Mutton, Basmati Rice, Spices', description: 'Flavorful rice dish made with succulent mutton and aromatic 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' }
]
};
const cart = [];
// Function to Show Menu
function showMenu(type) {
document.getElementById('welcome-container').style.display = 'none';
document.getElementById('menu-container').style.display = 'block';
const menuContainer = document.getElementById('menu-items');
menuContainer.innerHTML = '';
menuItems[type].forEach(item => {
const div = document.createElement('div');
div.classList.add('menu-item');
div.innerHTML = `
<div class="details">
<img src="${item.imageUrl}" alt="${item.name}">
<div class="text">
<h3>${item.name}</h3>
<p>${item.description}</p>
<p><strong>Ingredients:</strong> ${item.ingredients}</p>
<p><strong>Price:</strong> $${item.price}</p>
<button onclick="addToCart('${item.name}')">Add to Cart</button>
</div>
</div>`;
menuContainer.appendChild(div);
});
}
// Function to Add Items to 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.");
}
}
// Function to View Cart
function viewCart() {
const cartContainer = document.getElementById('cart-container');
const cartItemsContainer = document.getElementById('cart-items');
cartItemsContainer.innerHTML = '';
cart.forEach(cartItem => {
const div = document.createElement('div');
div.classList.add('cart-item');
div.innerHTML = `<span>${cartItem.name} (x${cartItem.quantity}) - $${cartItem.price * cartItem.quantity}</span>`;
cartItemsContainer.appendChild(div);
});
cartContainer.style.display = 'block';
}
// Function to Place Order
function placeOrder() {
if (cart.length > 0) {
alert("Your order has been placed successfully!");
cart.length = 0;
viewCart();
} else {
alert("Your cart is empty. Please add items before placing the order.");
}
}
</script>
</body>
</html>
|