Spaces:
Sleeping
Sleeping
File size: 3,631 Bytes
7547860 8fdce7e 7547860 e748187 8fdce7e e748187 7547860 e748187 8fdce7e e748187 fd2f5b6 7547860 8fdce7e e748187 7547860 e748187 7547860 fd2f5b6 8fdce7e fd2f5b6 8fdce7e fd2f5b6 8fdce7e fd2f5b6 8fdce7e fd2f5b6 8fdce7e fd2f5b6 8fdce7e fd2f5b6 8fdce7e fd2f5b6 8fdce7e 7547860 8fdce7e 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 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 |
<!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>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f8f8f8;
margin: 0;
padding: 0;
}
.menu-container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
margin-top: 50px;
}
h1 {
text-align: center;
font-size: 2.5rem;
color: #333;
margin-bottom: 30px;
}
.menu-item {
border-bottom: 1px solid #eee;
padding: 15px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.order-btn {
display: none; /* Hide the button since ordering is voice-controlled */
}
</style>
</head>
<body>
<div class="menu-container">
<h1>Welcome to the Menu</h1>
{% for item in menu_items %}
<div class="menu-item" data-item="{{ item.name | lower }}">
<div class="details">
<h3>{{ item.name }}</h3>
<p><strong>Ingredients:</strong> {{ item.ingredients }}</p>
<p><strong>Category:</strong> {{ item.category }}</p>
<p class="price">Price: ${{ item.price }}</p>
</div>
<button class="order-btn">Order</button>
</div>
{% endfor %}
</div>
<script>
const menuItems = Array.from(document.querySelectorAll(".menu-item")).map(item => ({
name: item.dataset.item,
element: item
}));
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
recognition.lang = "en-US";
recognition.interimResults = false;
function speak(text, callback) {
const msg = new SpeechSynthesisUtterance(text);
msg.onend = callback;
window.speechSynthesis.speak(msg);
}
function readMenuItems() {
let menuText = "Here is the menu. ";
menuItems.forEach(item => {
menuText += `${item.name}. `;
});
menuText += "Please say the name of the item you would like to order.";
speak(menuText, startListening);
}
function startListening() {
recognition.start();
}
recognition.onresult = (event) => {
const command = event.results[0][0].transcript.toLowerCase();
console.log("User said:", command);
const matchedItem = menuItems.find(item => command.includes(item.name));
if (matchedItem) {
speak(`You have ordered ${matchedItem.name}. Your order has been placed.`);
console.log(`Order placed for: ${matchedItem.name}`);
} else {
speak("Item not found. Please try again.");
startListening();
}
};
recognition.onerror = (event) => {
console.error("Speech recognition error:", event.error);
speak("Sorry, I couldn't understand that. Please try again.");
};
// Automatically read the menu and start listening when the page loads
window.onload = function () {
readMenuItems();
};
</script>
</body>
</html>
|