Spaces:
Sleeping
Sleeping
File size: 2,600 Bytes
93316a5 |
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 |
<!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>
<link rel="stylesheet" href="/static/styles.css">
<script>
// Function to handle pop-up
function openPopup(dishName) {
fetch("/menu_item", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ dish_name: dishName }),
})
.then(response => response.json())
.then(data => {
if (data.error) {
alert(data.error);
} else {
const popup = document.getElementById("popup");
popup.innerHTML = `
<h2>${data["Dish Name"]}</h2>
<img src="${data["Image URL"]}" alt="${data["Dish Name"]}">
<p><strong>Description:</strong> ${data["Description"]}</p>
<p><strong>Ingredients:</strong> ${data["Ingredients"]}</p>
<p><strong>Allergen Info:</strong> ${data["Allergen Info"]}</p>
<p><strong>Recommended Items:</strong> ${data["Recommended Items"]}</p>
<p><strong>Spice Levels:</strong> ${data["Spice Levels"]}</p>
<button onclick="closePopup()">Close</button>
`;
popup.style.display = "block";
}
});
}
// Function to close the pop-up
function closePopup() {
document.getElementById("popup").style.display = "none";
}
</script>
</head>
<body>
<h1>Dynamic Menu</h1>
<div id="menu-container">
{% for category, items in menu.items() %}
<div class="menu-category">
<h2>{{ category }}</h2>
<div class="menu-items">
{% for item in items %}
<div class="menu-item">
<img src="{{ item['Image URL'] }}" alt="{{ item['Dish Name'] }}">
<h3>{{ item['Dish Name'] }}</h3>
<p>${{ item['Price'] }}</p>
<button onclick="openPopup('{{ item['Dish Name'] }}')">Add</button>
</div>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
<!-- Pop-Up Modal -->
<div id="popup" class="popup"></div>
</body>
</html>
|