Spaces:
Sleeping
Sleeping
File size: 2,846 Bytes
f7356a1 cd2c91d 7547860 26c2135 cd2c91d 26c2135 cd2c91d 26c2135 cd2c91d 26c2135 cd2c91d 26c2135 cd2c91d e748187 1ea5871 26c2135 1ea5871 26c2135 1ea5871 26c2135 1ea5871 26c2135 1ea5871 26c2135 1ea5871 26c2135 1ea5871 26c2135 a11265e 26c2135 a11265e e748187 7547860 8fdce7e 26c2135 5a9b054 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 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu - Biryani Hub</title>
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
<script>
// Function to fetch menu from Flask API
function fetchMenu() {
fetch("/menu") // Use relative path to work inside Hugging Face Space
.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>
`;
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>";
});
}
// Load menu when page loads
window.onload = fetchMenu;
</script>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f8f9fa;
margin: 0;
padding: 20px;
text-align: center;
}
h1 {
color: #ff5722;
}
.menu-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 20px;
}
.menu-item {
background-color: white;
padding: 15px;
margin: 10px;
border-radius: 8px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
width: 300px;
}
.menu-item h3 {
margin: 0;
color: #333;
}
.menu-item p {
margin: 5px 0;
color: #555;
}
</style>
</head>
<body>
<h1>Restaurant Menu</h1>
<div class="menu-container" id="menu-list">
<p>Loading menu...</p>
</div>
</body>
</html>
|