|
<!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> |
|
async function loadMenu() { |
|
const response = await fetch("/get_menu"); |
|
const menuItems = await response.json(); |
|
const menuContainer = document.getElementById("menu"); |
|
menuContainer.innerHTML = ""; |
|
|
|
menuItems.forEach(item => { |
|
const menuItem = document.createElement("div"); |
|
menuItem.classList.add("menu-item"); |
|
menuItem.innerHTML = ` |
|
<img src="${item.Image1__c}" alt="${item.Name}"> |
|
<h3>${item.Name}</h3> |
|
<p>${item.Category__c} - ${item.Section__c}</p> |
|
<p>Price: ₹${item.Price__c}</p> |
|
<button class="add-btn" onclick="openModal('${item.Name}', '${item.Image2__c}', '${item.Ingredients__c}', '${item.Price__c}')">ADD</button> |
|
`; |
|
menuContainer.appendChild(menuItem); |
|
}); |
|
} |
|
|
|
function openModal(name, image, ingredients, price) { |
|
document.getElementById("modalTitle").innerText = name; |
|
document.getElementById("modalImage").src = image; |
|
document.getElementById("modalIngredients").innerText = ingredients; |
|
document.getElementById("modalPrice").innerText = "Price: ₹" + price; |
|
document.getElementById("menuModal").style.display = "block"; |
|
} |
|
|
|
document.addEventListener("DOMContentLoaded", loadMenu); |
|
</script> |
|
</body> |
|
</html> |
|
|
