Update templates/menu_page.html
Browse files- templates/menu_page.html +6 -34
templates/menu_page.html
CHANGED
|
@@ -12,7 +12,8 @@
|
|
| 12 |
.menu-item img { width: 100px; height: 100px; border-radius: 8px; margin-right: 10px; }
|
| 13 |
.details { display: flex; align-items: center; }
|
| 14 |
.text { margin-left: 10px; }
|
| 15 |
-
.menu-option { margin: 20px; font-size: 1.5rem; }
|
|
|
|
| 16 |
</style>
|
| 17 |
</head>
|
| 18 |
<body>
|
|
@@ -63,6 +64,7 @@
|
|
| 63 |
|
| 64 |
const menuContainer = document.getElementById('menu-items');
|
| 65 |
|
|
|
|
| 66 |
function showMenu(type) {
|
| 67 |
menuContainer.innerHTML = ''; // Clear previous menu items
|
| 68 |
const filteredItems = menuItems.filter(item => item.category === type);
|
|
@@ -75,40 +77,10 @@
|
|
| 75 |
});
|
| 76 |
}
|
| 77 |
|
| 78 |
-
|
| 79 |
-
|
| 80 |
-
recognition.interimResults = false;
|
| 81 |
|
| 82 |
-
|
| 83 |
-
const msg = new SpeechSynthesisUtterance(text);
|
| 84 |
-
msg.onend = callback;
|
| 85 |
-
window.speechSynthesis.speak(msg);
|
| 86 |
-
}
|
| 87 |
-
|
| 88 |
-
function readMenuItems() {
|
| 89 |
-
let menuText = 'Here is the menu. ';
|
| 90 |
-
menuItems.forEach(item => { menuText += `${item.name}, `; });
|
| 91 |
-
menuText += 'Please say the name of the item you would like to order.';
|
| 92 |
-
speak(menuText, startListening);
|
| 93 |
-
}
|
| 94 |
-
|
| 95 |
-
function startListening() { recognition.start(); }
|
| 96 |
-
|
| 97 |
-
recognition.onresult = (event) => {
|
| 98 |
-
const command = event.results[0][0].transcript.toLowerCase();
|
| 99 |
-
const matchedItem = menuItems.find(item => command.includes(item.name.toLowerCase()));
|
| 100 |
-
if (matchedItem) {
|
| 101 |
-
speak(`You have ordered ${matchedItem.name}. Your order has been placed.`);
|
| 102 |
-
} else {
|
| 103 |
-
speak('Item not found. Please try again.', startListening);
|
| 104 |
-
}
|
| 105 |
-
};
|
| 106 |
-
|
| 107 |
-
recognition.onerror = () => { speak('Sorry, I could not understand. Please try again.'); };
|
| 108 |
-
|
| 109 |
-
window.onload = () => {
|
| 110 |
-
speak("Welcome to Biryani Hub! Would you like to see the Veg or Non-Veg menu?", () => {});
|
| 111 |
-
};
|
| 112 |
</script>
|
| 113 |
</body>
|
| 114 |
</html>
|
|
|
|
| 12 |
.menu-item img { width: 100px; height: 100px; border-radius: 8px; margin-right: 10px; }
|
| 13 |
.details { display: flex; align-items: center; }
|
| 14 |
.text { margin-left: 10px; }
|
| 15 |
+
.menu-option { margin: 20px; font-size: 1.5rem; text-align: center; }
|
| 16 |
+
.menu-option button { font-size: 1.2rem; padding: 10px 20px; margin: 10px; cursor: pointer; }
|
| 17 |
</style>
|
| 18 |
</head>
|
| 19 |
<body>
|
|
|
|
| 64 |
|
| 65 |
const menuContainer = document.getElementById('menu-items');
|
| 66 |
|
| 67 |
+
// Function to automatically display either Veg or Non-Veg menu based on the category
|
| 68 |
function showMenu(type) {
|
| 69 |
menuContainer.innerHTML = ''; // Clear previous menu items
|
| 70 |
const filteredItems = menuItems.filter(item => item.category === type);
|
|
|
|
| 77 |
});
|
| 78 |
}
|
| 79 |
|
| 80 |
+
// Initially load Veg items automatically
|
| 81 |
+
showMenu('veg');
|
|
|
|
| 82 |
|
| 83 |
+
// Optional: Speech synthesis or interaction to ask user to choose Veg or Non-Veg
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 84 |
</script>
|
| 85 |
</body>
|
| 86 |
</html>
|