|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Dynamic Menu</title> |
|
<style> |
|
body { |
|
font-family: Arial, sans-serif; |
|
margin: 0; |
|
background: #f8f9fa; |
|
text-align: center; |
|
} |
|
.header { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
background: #ff6b00; |
|
padding: 15px; |
|
color: white; |
|
} |
|
.search-bar { |
|
flex-grow: 1; |
|
margin: 0 10px; |
|
} |
|
.search-bar input { |
|
width: 70%; |
|
padding: 8px; |
|
border-radius: 5px; |
|
border: none; |
|
} |
|
.avatar { |
|
width: 40px; |
|
height: 40px; |
|
border-radius: 50%; |
|
background: white; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
cursor: pointer; |
|
position: relative; |
|
} |
|
.avatar-menu { |
|
display: none; |
|
position: absolute; |
|
top: 50px; |
|
right: 0; |
|
background: white; |
|
color: black; |
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); |
|
border-radius: 5px; |
|
width: 150px; |
|
text-align: left; |
|
} |
|
.avatar-menu a { |
|
display: block; |
|
padding: 10px; |
|
text-decoration: none; |
|
color: black; |
|
} |
|
.avatar-menu a:hover { |
|
background: #f0f0f0; |
|
} |
|
.avatar:hover .avatar-menu { |
|
display: block; |
|
} |
|
.container { |
|
max-width: 800px; |
|
margin: auto; |
|
background: white; |
|
padding: 20px; |
|
border-radius: 10px; |
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); |
|
margin-top: 20px; |
|
} |
|
.menu-item { |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
border-bottom: 1px solid #ddd; |
|
padding: 15px; |
|
} |
|
.menu-item img { |
|
width: 100px; |
|
height: 100px; |
|
border-radius: 10px; |
|
margin-top: 10px; |
|
} |
|
.menu-details { |
|
padding: 10px; |
|
text-align: center; |
|
} |
|
.menu-details h3 { |
|
margin: 0; |
|
font-size: 18px; |
|
} |
|
.menu-details p { |
|
margin: 5px 0; |
|
color: #666; |
|
} |
|
.add-btn { |
|
background: #28a745; |
|
color: white; |
|
border: none; |
|
padding: 10px 20px; |
|
cursor: pointer; |
|
border-radius: 5px; |
|
font-weight: bold; |
|
transition: background 0.3s; |
|
} |
|
.add-btn:hover { |
|
background: #218838; |
|
} |
|
.cart-btn { |
|
background: #28a745; |
|
color: white; |
|
border: none; |
|
padding: 10px; |
|
cursor: pointer; |
|
border-radius: 5px; |
|
font-weight: bold; |
|
margin-top: 20px; |
|
width: auto; |
|
display: block; |
|
} |
|
.cart-btn:hover { |
|
background: #218838; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div class="header"> |
|
<div class="search-bar"> |
|
<input type="text" id="search" placeholder="Search food items..." onkeyup="searchMenu()"> |
|
</div> |
|
<div class="avatar">👤 |
|
<div class="avatar-menu"> |
|
<a href="#">Profile</a> |
|
<a href="#">Rewards</a> |
|
<a href="#">My Orders</a> |
|
<a href="#" onclick="logout()">Logout</a> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="container"> |
|
<h2>Food Menu</h2> |
|
<div id="menu"></div> |
|
<button class="cart-btn">View Cart</button> |
|
</div> |
|
|
|
<script> |
|
const menuItems = [ |
|
{ name: "Margherita Pizza", price: "₹299", image: "pizza.jpg", description: "Classic Margherita with fresh basil and mozzarella." }, |
|
{ name: "Veg Burger", price: "₹149", image: "burger.jpg", description: "Crispy veggie patty with fresh lettuce and tomato." }, |
|
{ name: "Pasta Alfredo", price: "₹249", image: "pasta.jpg", description: "Creamy Alfredo sauce with penne pasta." }, |
|
{ name: "French Fries", price: "₹99", image: "fries.jpg", description: "Crispy golden French fries with ketchup." }, |
|
{ name: "Cold Coffee", price: "₹129", image: "coffee.jpg", description: "Chilled coffee with creamy froth." } |
|
]; |
|
|
|
function loadMenu() { |
|
const menuContainer = document.getElementById("menu"); |
|
menuContainer.innerHTML = ""; |
|
menuItems.forEach(item => { |
|
const menuItem = document.createElement("div"); |
|
menuItem.classList.add("menu-item"); |
|
menuItem.innerHTML = ` |
|
<button class="add-btn">ADD</button> |
|
<div class="menu-details"> |
|
<h3>${item.name}</h3> |
|
<p>${item.price}</p> |
|
<p>${item.description}</p> |
|
</div> |
|
<img src="${item.image}" alt="${item.name}"> |
|
`; |
|
menuContainer.appendChild(menuItem); |
|
}); |
|
} |
|
|
|
function logout() { |
|
alert("Logged out successfully!"); |
|
} |
|
|
|
document.addEventListener("DOMContentLoaded", loadMenu); |
|
</script> |
|
</body> |
|
</html> |
|
|
