File size: 3,404 Bytes
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 8c3b9dc 4539c80 8c3b9dc 4539c80 8c3b9dc 4539c80 377d6a5 4539c80 377d6a5 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 104 105 |
<!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>
// ✅ Fetch Menu from Flask API
function fetchMenu() {
fetch("/menu") // Calls Flask API
.then(response => response.json()) // Convert response to JSON
.then(data => {
if (data.success) {
let menuContainer = document.getElementById("menu-list");
menuContainer.innerHTML = ""; // Clear previous 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>
<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 to Add Items to Cart (Just a simple alert for now)
function addToCart(name, price) {
alert(`${name} added to cart!`);
}
// ✅ Display Menu on Page Load
window.onload = fetchMenu;
</script>
</body>
</html>
|