Spaces:
Sleeping
Sleeping
File size: 2,677 Bytes
f7356a1 cd2c91d 7547860 ce5c734 e748187 1ea5871 26c2135 ce5c734 1ea5871 26c2135 1ea5871 26c2135 1ea5871 26c2135 1ea5871 ce5c734 26c2135 1ea5871 26c2135 ce5c734 1ea5871 26c2135 a11265e 26c2135 a11265e e748187 7547860 8fdce7e ce5c734 26c2135 5a9b054 ce5c734 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 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Restaurant Menu</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f8f9fa;
text-align: center;
margin: 0;
padding: 20px;
}
h1 {
color: #ff5722;
}
.menu-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 20px;
}
.menu-item {
background: white;
padding: 15px;
margin: 10px;
border-radius: 8px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
width: 300px;
text-align: left;
}
.menu-item h3 {
margin: 0;
color: #333;
}
.menu-item p {
margin: 5px 0;
color: #555;
}
</style>
</head>
<body>
<h1>Menu</h1>
<div class="menu-container" id="menu-list">
<p>Loading menu...</p>
</div>
<script>
function fetchMenu() {
fetch("/menu") // Fetch from Flask API
.then(response => response.json())
.then(data => {
if (data.success) {
let menuContainer = document.getElementById("menu-list");
menuContainer.innerHTML = ""; // Clear existing content
data.menu.forEach(item => {
let menuItem = document.createElement("div");
menuItem.classList.add("menu-item");
menuItem.innerHTML = `
<h3>${item.name}</h3>
<p><strong>Category:</strong> ${item.category}</p>
<p><strong>Price:</strong> $${item.price}</p>
<p><strong>Ingredients:</strong> ${item.ingredients}</p>
`;
menuContainer.appendChild(menuItem);
});
} else {
document.getElementById("menu-list").innerHTML = "<p>Error loading menu.</p>";
}
})
.catch(error => {
console.error("Error fetching menu:", error);
document.getElementById("menu-list").innerHTML = "<p>Unable to load menu.</p>";
});
}
window.onload = fetchMenu;
</script>
</body>
</html>
|