Spaces:
Running
Running
Update templates/menu_page.html
Browse files- templates/menu_page.html +144 -3
templates/menu_page.html
CHANGED
|
@@ -50,13 +50,57 @@
|
|
| 50 |
.menu-item button:hover {
|
| 51 |
background-color: #e64a19;
|
| 52 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 53 |
</style>
|
| 54 |
</head>
|
| 55 |
<body>
|
|
|
|
| 56 |
<h1>Restaurant Menu</h1>
|
| 57 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 58 |
{% for item in menu %}
|
| 59 |
-
<div class="menu-item">
|
| 60 |
<h3>{{ item.name }}</h3>
|
| 61 |
<p><strong>Category:</strong> {{ item.category }}</p>
|
| 62 |
<p><strong>Price:</strong> ${{ item.price }}</p>
|
|
@@ -66,11 +110,108 @@
|
|
| 66 |
{% endfor %}
|
| 67 |
</div>
|
| 68 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 69 |
<script>
|
| 70 |
-
// ✅
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 71 |
function addToCart(name, price) {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 72 |
alert(name + " added to cart!");
|
| 73 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 74 |
</script>
|
|
|
|
| 75 |
</body>
|
| 76 |
</html>
|
|
|
|
| 50 |
.menu-item button:hover {
|
| 51 |
background-color: #e64a19;
|
| 52 |
}
|
| 53 |
+
.cart-container {
|
| 54 |
+
margin-top: 20px;
|
| 55 |
+
padding: 15px;
|
| 56 |
+
background-color: white;
|
| 57 |
+
border: 1px solid #ddd;
|
| 58 |
+
border-radius: 5px;
|
| 59 |
+
width: 50%;
|
| 60 |
+
margin-left: auto;
|
| 61 |
+
margin-right: auto;
|
| 62 |
+
display: none;
|
| 63 |
+
}
|
| 64 |
+
.cart-item {
|
| 65 |
+
display: flex;
|
| 66 |
+
justify-content: space-between;
|
| 67 |
+
padding: 5px;
|
| 68 |
+
border-bottom: 1px solid #ddd;
|
| 69 |
+
}
|
| 70 |
+
.cart-item:last-child {
|
| 71 |
+
border-bottom: none;
|
| 72 |
+
}
|
| 73 |
+
.filter-buttons {
|
| 74 |
+
margin: 15px;
|
| 75 |
+
}
|
| 76 |
+
.filter-buttons button {
|
| 77 |
+
margin: 5px;
|
| 78 |
+
padding: 10px;
|
| 79 |
+
border: none;
|
| 80 |
+
cursor: pointer;
|
| 81 |
+
border-radius: 5px;
|
| 82 |
+
background-color: #007bff;
|
| 83 |
+
color: white;
|
| 84 |
+
}
|
| 85 |
+
.filter-buttons button:hover {
|
| 86 |
+
background-color: #0056b3;
|
| 87 |
+
}
|
| 88 |
</style>
|
| 89 |
</head>
|
| 90 |
<body>
|
| 91 |
+
|
| 92 |
<h1>Restaurant Menu</h1>
|
| 93 |
+
|
| 94 |
+
<!-- Buttons for filtering menu -->
|
| 95 |
+
<div class="filter-buttons">
|
| 96 |
+
<button onclick="filterMenu('veg')">Vegetarian</button>
|
| 97 |
+
<button onclick="filterMenu('non-veg')">Non-Vegetarian</button>
|
| 98 |
+
</div>
|
| 99 |
+
|
| 100 |
+
<!-- Menu Display -->
|
| 101 |
+
<div class="menu-container" id="menu-list">
|
| 102 |
{% for item in menu %}
|
| 103 |
+
<div class="menu-item" data-category="{{ item.category }}">
|
| 104 |
<h3>{{ item.name }}</h3>
|
| 105 |
<p><strong>Category:</strong> {{ item.category }}</p>
|
| 106 |
<p><strong>Price:</strong> ${{ item.price }}</p>
|
|
|
|
| 110 |
{% endfor %}
|
| 111 |
</div>
|
| 112 |
|
| 113 |
+
<!-- Cart Section -->
|
| 114 |
+
<div class="cart-container" id="cart-container">
|
| 115 |
+
<h2>Your Cart</h2>
|
| 116 |
+
<div id="cart-items"></div>
|
| 117 |
+
<button onclick="checkout()">Checkout</button>
|
| 118 |
+
</div>
|
| 119 |
+
|
| 120 |
+
<!-- View Cart Button -->
|
| 121 |
+
<button onclick="viewCart()">View Cart</button>
|
| 122 |
+
|
| 123 |
<script>
|
| 124 |
+
// ✅ Speech Synthesis - Welcome message
|
| 125 |
+
function speak(text, callback) {
|
| 126 |
+
const msg = new SpeechSynthesisUtterance(text);
|
| 127 |
+
msg.onend = callback;
|
| 128 |
+
window.speechSynthesis.speak(msg);
|
| 129 |
+
}
|
| 130 |
+
|
| 131 |
+
// ✅ Ask user Veg or Non-Veg
|
| 132 |
+
function askMenuType() {
|
| 133 |
+
speak("Welcome to Biryani Hub Menu. Would you like to see Vegetarian or Non-Vegetarian options?", function() {
|
| 134 |
+
startListening();
|
| 135 |
+
});
|
| 136 |
+
}
|
| 137 |
+
|
| 138 |
+
// ✅ Speech Recognition (User says Veg or Non-Veg)
|
| 139 |
+
function startListening() {
|
| 140 |
+
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
|
| 141 |
+
recognition.lang = "en-US";
|
| 142 |
+
recognition.start();
|
| 143 |
+
|
| 144 |
+
recognition.onresult = function(event) {
|
| 145 |
+
const command = event.results[0][0].transcript.toLowerCase();
|
| 146 |
+
if (command.includes("vegetarian") || command.includes("veg")) {
|
| 147 |
+
filterMenu("veg");
|
| 148 |
+
speak("Here are the vegetarian items.");
|
| 149 |
+
} else if (command.includes("non-vegetarian") || command.includes("non veg")) {
|
| 150 |
+
filterMenu("non-veg");
|
| 151 |
+
speak("Here are the non-vegetarian items.");
|
| 152 |
+
} else {
|
| 153 |
+
speak("Sorry, I didn't understand. Please say Vegetarian or Non-Vegetarian.", function() {
|
| 154 |
+
startListening();
|
| 155 |
+
});
|
| 156 |
+
}
|
| 157 |
+
};
|
| 158 |
+
}
|
| 159 |
+
|
| 160 |
+
// ✅ Function to filter menu by category
|
| 161 |
+
function filterMenu(type) {
|
| 162 |
+
const allItems = document.querySelectorAll('.menu-item');
|
| 163 |
+
allItems.forEach(item => {
|
| 164 |
+
if (type === "veg" && item.dataset.category.toLowerCase().includes("veg")) {
|
| 165 |
+
item.style.display = "block";
|
| 166 |
+
} else if (type === "non-veg" && item.dataset.category.toLowerCase().includes("chicken") || item.dataset.category.toLowerCase().includes("mutton") || item.dataset.category.toLowerCase().includes("fish") || item.dataset.category.toLowerCase().includes("prawn")) {
|
| 167 |
+
item.style.display = "block";
|
| 168 |
+
} else {
|
| 169 |
+
item.style.display = "none";
|
| 170 |
+
}
|
| 171 |
+
});
|
| 172 |
+
}
|
| 173 |
+
|
| 174 |
+
// ✅ Cart Functionality
|
| 175 |
+
let cart = [];
|
| 176 |
+
|
| 177 |
function addToCart(name, price) {
|
| 178 |
+
let itemIndex = cart.findIndex(item => item.name === name);
|
| 179 |
+
if (itemIndex > -1) {
|
| 180 |
+
cart[itemIndex].quantity += 1;
|
| 181 |
+
} else {
|
| 182 |
+
cart.push({ name: name, price: price, quantity: 1 });
|
| 183 |
+
}
|
| 184 |
alert(name + " added to cart!");
|
| 185 |
}
|
| 186 |
+
|
| 187 |
+
function viewCart() {
|
| 188 |
+
const cartContainer = document.getElementById("cart-container");
|
| 189 |
+
const cartItemsContainer = document.getElementById("cart-items");
|
| 190 |
+
|
| 191 |
+
cartItemsContainer.innerHTML = "";
|
| 192 |
+
cart.forEach(item => {
|
| 193 |
+
let div = document.createElement("div");
|
| 194 |
+
div.classList.add("cart-item");
|
| 195 |
+
div.innerHTML = `<span>${item.name} (x${item.quantity}) - $${item.price * item.quantity}</span>`;
|
| 196 |
+
cartItemsContainer.appendChild(div);
|
| 197 |
+
});
|
| 198 |
+
|
| 199 |
+
cartContainer.style.display = "block";
|
| 200 |
+
}
|
| 201 |
+
|
| 202 |
+
function checkout() {
|
| 203 |
+
if (cart.length > 0) {
|
| 204 |
+
alert("Your order has been placed successfully!");
|
| 205 |
+
cart = [];
|
| 206 |
+
viewCart();
|
| 207 |
+
} else {
|
| 208 |
+
alert("Your cart is empty!");
|
| 209 |
+
}
|
| 210 |
+
}
|
| 211 |
+
|
| 212 |
+
// ✅ Welcome Message on Page Load
|
| 213 |
+
window.onload = askMenuType;
|
| 214 |
</script>
|
| 215 |
+
|
| 216 |
</body>
|
| 217 |
</html>
|