Update templates/menu_page.html
Browse files- templates/menu_page.html +45 -42
templates/menu_page.html
CHANGED
@@ -1,4 +1,6 @@
|
|
1 |
-
|
|
|
|
|
2 |
<html lang="en">
|
3 |
<head>
|
4 |
<meta charset="UTF-8">
|
@@ -87,16 +89,14 @@
|
|
87 |
</head>
|
88 |
<body>
|
89 |
|
90 |
-
<!-- Welcome Page -->
|
91 |
<div class="container" id="welcome-container">
|
92 |
<h1>Welcome to the Biryani Hub Menu</h1>
|
93 |
<div class="menu-option">
|
94 |
-
<button onclick="showMenu('veg')">Vegetarian Menu</button>
|
95 |
-
<button onclick="showMenu('nonVeg')">Non-Vegetarian Menu</button>
|
96 |
</div>
|
97 |
</div>
|
98 |
|
99 |
-
<!-- Menu Page -->
|
100 |
<div class="container" id="menu-container" style="display: none;">
|
101 |
<h1>Menu</h1>
|
102 |
<div id="menu-items" class="row">
|
@@ -105,7 +105,6 @@
|
|
105 |
<button onclick="viewCart()">View Cart</button>
|
106 |
</div>
|
107 |
|
108 |
-
<!-- Cart Page -->
|
109 |
<div class="cart-container" id="cart-container">
|
110 |
<h2>Your Cart</h2>
|
111 |
<div id="cart-items"></div>
|
@@ -135,6 +134,19 @@
|
|
135 |
|
136 |
const cart = [];
|
137 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
138 |
// Function to show the menu based on selected type (veg or non-veg)
|
139 |
function showMenu(type) {
|
140 |
// Hide the welcome screen and show the menu
|
@@ -168,9 +180,9 @@
|
|
168 |
const item = menuItems.veg.concat(menuItems.nonVeg).find(item => item.name === itemName);
|
169 |
const cartItem = { ...item, quantity: parseInt(quantity) };
|
170 |
cart.push(cartItem);
|
171 |
-
|
172 |
} else {
|
173 |
-
|
174 |
}
|
175 |
}
|
176 |
|
@@ -186,60 +198,51 @@
|
|
186 |
cartItemsContainer.appendChild(div);
|
187 |
});
|
188 |
cartContainer.style.display = 'block';
|
189 |
-
speakCartItems(); // Speak out the items in the cart
|
190 |
}
|
191 |
|
192 |
// Function to place the final order
|
193 |
function placeOrder() {
|
194 |
if (cart.length > 0) {
|
195 |
-
|
196 |
cart.length = 0; // Clear the cart after placing the order
|
197 |
viewCart(); // Optionally, update cart view
|
198 |
} else {
|
199 |
-
|
200 |
}
|
201 |
}
|
202 |
|
203 |
-
//
|
204 |
-
function
|
205 |
-
|
206 |
-
cart.forEach(item => {
|
207 |
-
cartText += `${item.quantity} of ${item.name}, `;
|
208 |
-
});
|
209 |
-
speak(cartText, () => {});
|
210 |
}
|
211 |
|
212 |
-
//
|
213 |
-
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
|
214 |
-
recognition.lang = 'en-US';
|
215 |
-
recognition.interimResults = false;
|
216 |
-
recognition.maxAlternatives = 1;
|
217 |
-
|
218 |
recognition.onresult = (event) => {
|
219 |
const command = event.results[0][0].transcript.toLowerCase();
|
220 |
-
if (command.includes('
|
221 |
-
|
222 |
-
|
223 |
-
|
224 |
-
|
225 |
-
|
226 |
-
} else if (command.includes('chicken biryani')) {
|
227 |
-
addToCart('Chicken Biryani');
|
228 |
-
} else if (command.includes('mutton biryani')) {
|
229 |
-
addToCart('Mutton Biryani');
|
230 |
-
} else if (command.includes('butter chicken')) {
|
231 |
-
addToCart('Butter Chicken');
|
232 |
-
} else if (command.includes('view cart')) {
|
233 |
-
viewCart();
|
234 |
} else {
|
235 |
-
|
|
|
|
|
236 |
}
|
237 |
};
|
238 |
|
239 |
-
|
240 |
-
|
241 |
-
recognition.start();
|
242 |
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
243 |
</script>
|
244 |
|
245 |
</body>
|
|
|
1 |
+
|
2 |
+
|
3 |
+
<!DOCTYPE html>
|
4 |
<html lang="en">
|
5 |
<head>
|
6 |
<meta charset="UTF-8">
|
|
|
89 |
</head>
|
90 |
<body>
|
91 |
|
|
|
92 |
<div class="container" id="welcome-container">
|
93 |
<h1>Welcome to the Biryani Hub Menu</h1>
|
94 |
<div class="menu-option">
|
95 |
+
<button id="veg-btn" onclick="showMenu('veg')">Vegetarian Menu</button>
|
96 |
+
<button id="non-veg-btn" onclick="showMenu('nonVeg')">Non-Vegetarian Menu</button>
|
97 |
</div>
|
98 |
</div>
|
99 |
|
|
|
100 |
<div class="container" id="menu-container" style="display: none;">
|
101 |
<h1>Menu</h1>
|
102 |
<div id="menu-items" class="row">
|
|
|
105 |
<button onclick="viewCart()">View Cart</button>
|
106 |
</div>
|
107 |
|
|
|
108 |
<div class="cart-container" id="cart-container">
|
109 |
<h2>Your Cart</h2>
|
110 |
<div id="cart-items"></div>
|
|
|
134 |
|
135 |
const cart = [];
|
136 |
|
137 |
+
// Speech Synthesis and Speech Recognition
|
138 |
+
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
|
139 |
+
recognition.lang = 'en-US';
|
140 |
+
recognition.interimResults = false;
|
141 |
+
recognition.maxAlternatives = 1;
|
142 |
+
|
143 |
+
// Function to speak text
|
144 |
+
function speak(text, callback) {
|
145 |
+
const msg = new SpeechSynthesisUtterance(text);
|
146 |
+
msg.onend = callback;
|
147 |
+
window.speechSynthesis.speak(msg);
|
148 |
+
}
|
149 |
+
|
150 |
// Function to show the menu based on selected type (veg or non-veg)
|
151 |
function showMenu(type) {
|
152 |
// Hide the welcome screen and show the menu
|
|
|
180 |
const item = menuItems.veg.concat(menuItems.nonVeg).find(item => item.name === itemName);
|
181 |
const cartItem = { ...item, quantity: parseInt(quantity) };
|
182 |
cart.push(cartItem);
|
183 |
+
speak(`${quantity} of ${itemName} added to your cart.`, () => {});
|
184 |
} else {
|
185 |
+
speak("Please enter a valid quantity.", () => {});
|
186 |
}
|
187 |
}
|
188 |
|
|
|
198 |
cartItemsContainer.appendChild(div);
|
199 |
});
|
200 |
cartContainer.style.display = 'block';
|
|
|
201 |
}
|
202 |
|
203 |
// Function to place the final order
|
204 |
function placeOrder() {
|
205 |
if (cart.length > 0) {
|
206 |
+
speak("Your order has been placed successfully!", () => {});
|
207 |
cart.length = 0; // Clear the cart after placing the order
|
208 |
viewCart(); // Optionally, update cart view
|
209 |
} else {
|
210 |
+
speak("Your cart is empty. Please add items before placing the order.", () => {});
|
211 |
}
|
212 |
}
|
213 |
|
214 |
+
// Function to start voice recognition
|
215 |
+
function startVoiceRecognition() {
|
216 |
+
recognition.start();
|
|
|
|
|
|
|
|
|
217 |
}
|
218 |
|
219 |
+
// Speech recognition logic
|
|
|
|
|
|
|
|
|
|
|
220 |
recognition.onresult = (event) => {
|
221 |
const command = event.results[0][0].transcript.toLowerCase();
|
222 |
+
if (command.includes('vegetarian')) {
|
223 |
+
showMenu('veg');
|
224 |
+
speak("Here are the vegetarian items.", () => {});
|
225 |
+
} else if (command.includes('non-vegetarian')) {
|
226 |
+
showMenu('nonVeg');
|
227 |
+
speak("Here are the non-vegetarian items.", () => {});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
228 |
} else {
|
229 |
+
speak("Please say vegetarian or non-vegetarian.", () => {
|
230 |
+
recognition.start();
|
231 |
+
});
|
232 |
}
|
233 |
};
|
234 |
|
235 |
+
recognition.onerror = (event) => {
|
236 |
+
console.error("Speech recognition error:", event.error);
|
237 |
+
speak("Sorry, I couldn't understand that. Please try again.", () => recognition.start());
|
238 |
};
|
239 |
+
|
240 |
+
// Welcome message and voice prompt when the page loads
|
241 |
+
window.onload = () => {
|
242 |
+
speak("Welcome to the Biryani Hub menu. Please say vegetarian or non-vegetarian to choose your menu.", () => {
|
243 |
+
startVoiceRecognition();
|
244 |
+
});
|
245 |
+
}
|
246 |
</script>
|
247 |
|
248 |
</body>
|