Spaces:
Sleeping
Sleeping
File size: 2,853 Bytes
f7356a1 7547860 26c2135 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 |
<!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 the API
function fetchMenu() {
fetch("https://lokesh341-voicemenuwithregisterandloginnnwithmenuu.hf.space/menu")
.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>Price:</strong> $${item.price}</p>
<p><strong>Ingredients:</strong> ${item.ingredients}</p>
<p><strong>Category:</strong> ${item.category}</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>
|