Spaces:
Sleeping
Sleeping
File size: 3,206 Bytes
f7356a1 cd2c91d 7547860 86b7bfb e748187 1ea5871 86b7bfb 4539c80 1ea5871 4539c80 86b7bfb 4539c80 1ea5871 4539c80 1ea5871 86b7bfb 4539c80 7a88679 4539c80 7a88679 4539c80 86b7bfb 4539c80 86b7bfb 4539c80 7a88679 e748187 7547860 8fdce7e 4539c80 7a88679 ce5c734 4539c80 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 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 |
<!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>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f8f8f8;
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;
}
.menu-item button {
background-color: #ff5722;
color: white;
border: none;
padding: 8px;
cursor: pointer;
width: 100%;
border-radius: 5px;
}
.menu-item button:hover {
background-color: #e64a19;
}
</style>
</head>
<body>
<h1>Restaurant Menu</h1>
<div class="menu-container" id="menu-list">
<p>Loading menu...</p>
</div>
<script>
function fetchMenu() {
fetch("/menu") // Fetching menu from Flask API
.then(response => response.json())
.then(data => {
if (data.success) {
let menuContainer = document.getElementById("menu-list");
menuContainer.innerHTML = "";
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>
<button onclick="addToCart('${item.name}', ${item.price})">Add to Cart</button>
`;
menuContainer.appendChild(menuItem);
});
} else {
document.getElementById("menu-list").innerHTML = "<p>Error fetching menu.</p>";
}
})
.catch(error => {
console.error("Error fetching menu:", error);
document.getElementById("menu-list").innerHTML = "<p>Unable to load menu.</p>";
});
}
function addToCart(name, price) {
alert(`${name} added to cart!`);
}
window.onload = fetchMenu;
</script>
</body>
</html>
|