File size: 8,563 Bytes
7547860 5a1efb3 f8101ff e748187 be1601b a11265e e748187 7547860 8fdce7e 5a1efb3 be1601b 5d580bf be1601b 934ceb8 be1601b 934ceb8 a11265e be1601b 6928c0e a11265e 5a9b054 1674fe0 a11265e 1674fe0 be1601b a11265e 1674fe0 8e787b4 6928c0e e448584 d9059f7 e448584 be1601b e448584 fd2f5b6 d9059f7 1674fe0 5a1efb3 1674fe0 5a1efb3 5d580bf 5a1efb3 5d580bf 5a1efb3 d9059f7 934ceb8 be1601b a11265e be1601b f8101ff 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 |
<!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>
<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: #f8f8f8; margin: 0; padding: 0; }
.menu-container { max-width: 1200px; margin: 0 auto; padding: 20px; background-color: #fff; border-radius: 8px; margin-top: 20px; }
h1 { text-align: center; font-size: 2.5rem; color: #333; }
.menu-item { margin-bottom: 20px; padding: 10px; border: 1px solid #ddd; border-radius: 5px; }
.menu-item img { width: 100px; height: 100px; border-radius: 8px; margin-right: 10px; }
.details { display: flex; align-items: center; }
.text { margin-left: 10px; }
.menu-option { margin: 20px; font-size: 1.5rem; text-align: center; }
.menu-option button { font-size: 1.2rem; padding: 10px 20px; margin: 10px; cursor: pointer; }
.cart-container { margin-top: 30px; padding: 10px; border: 1px solid #ddd; border-radius: 5px; background-color: #eaf3e1; }
.cart-item { display: flex; justify-content: space-between; margin-bottom: 10px; }
.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>
<div class="menu-container">
<h1>Welcome to the Menu</h1>
<!-- Buttons to select vegetarian or non-vegetarian menu -->
<div class="menu-option">
<button onclick="showMenu('veg')">Vegetarian Menu</button>
<button onclick="showMenu('nonVeg')">Non-Vegetarian Menu</button>
</div>
<div id="menu-items"></div>
<button onclick="viewCart()">View Cart</button>
</div>
<!-- Order History Section -->
<div class="container mt-4">
<h2 class="text-center">Order History</h2>
<div id="order-history">
<!-- Order history details will be dynamically loaded here -->
</div>
</div>
<!-- Cart View -->
<div class="cart-container" id="cart-container" style="display:none;">
<h2>Your Cart</h2>
<div id="cart-items"></div>
<button onclick="placeOrder()">Place Final Order</button>
</div>
<div class="view-cart-button">
<a href="javascript:void(0);" onclick="viewCart()">
View Cart
</a>
</div>
<script>
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 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('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 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 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 placeOrder() {
if (cart.length > 0) {
alert("Your order has been placed successfully!");
cart.length = 0; // Clear the cart after placing the order
viewCart(); // Optionally, update cart view
} else {
alert("Your cart is empty. Please add items before placing the order.");
}
}
// Example Order History (You can fetch this dynamically from the backend)
const orders = [
{ date: '2023-02-20', orderDetails: 'Chicken Biryani, Butter Chicken', totalAmount: 45, status: 'Completed' },
{ date: '2023-02-19', orderDetails: 'Paneer Butter Masala, Vegetable Biryani', totalAmount: 35, status: 'Pending' },
{ date: '2023-02-18', orderDetails: 'Mutton Biryani, Chicken Shawarma', totalAmount: 60, status: 'Cancelled' }
];
// Render Order History
const orderHistoryContainer = document.getElementById('order-history');
if (orders.length > 0) {
orders.forEach(order => {
const orderCard = document.createElement('div');
orderCard.classList.add('order-card');
orderCard.innerHTML = `
<p><strong>Date:</strong> ${order.date}</p>
<p><strong>Order:</strong> ${order.orderDetails}</p>
<p><strong>Total Amount:</strong> $${order.totalAmount}</p>
<p><span class="order-status ${order.status === 'Completed' ? 'status-completed' : order.status === 'Pending' ? 'status-pending' : 'status-cancelled'}">${order.status}</span></p>
`;
orderHistoryContainer.appendChild(orderCard);
});
} else {
orderHistoryContainer.innerHTML = '<p>No past orders found.</p>';
}
</script>
</body>
</html>
|