Spaces:
Sleeping
Sleeping
File size: 4,084 Bytes
732af62 4d0a5a5 732af62 4d0a5a5 732af62 4d0a5a5 732af62 4d0a5a5 732af62 4d0a5a5 732af62 4d0a5a5 732af62 7939980 4d0a5a5 7939980 4d0a5a5 7939980 732af62 |
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 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 |
<!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>
/* General Body Styling */
body {
font-family: Arial, sans-serif;
background-color: #f8f8f8;
margin: 0;
padding: 0;
}
/* Container for the menu */
.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 {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.order-btn:hover {
background-color: #45a049;
}
#listen-btn {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1.2rem;
display: block;
margin: 30px auto;
}
#listen-btn:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="menu-container">
<h1>Welcome to the Menu</h1>
{% for item in menu_items %}
<div class="menu-item">
<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 %}
<!-- Button for triggering voice recognition -->
<button id="listen-btn">Say "Order" to order an item</button>
</div>
<script>
const listenButton = document.getElementById("listen-btn");
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
recognition.lang = "en-US";
recognition.interimResults = false;
function speak(text) {
const msg = new SpeechSynthesisUtterance(text);
window.speechSynthesis.speak(msg);
}
listenButton.addEventListener("click", () => {
speak("Please say the item you want to order.");
recognition.start();
});
recognition.onresult = (event) => {
const command = event.results[0][0].transcript.toLowerCase();
console.log("User said:", command);
// Add logic to recognize specific items or trigger actions based on the command
if (command.includes("order")) {
// For example, navigate or process an order (customize as needed)
speak("Your order has been placed.");
}
};
recognition.onerror = (event) => {
console.error("Speech recognition error:", event.error);
speak("Sorry, I couldn't understand that. Please try again.");
};
// Voice reading of menu items on page load
window.onload = function() {
const menuItems = document.querySelectorAll('.menu-item h3');
let itemsText = "The menu includes: ";
menuItems.forEach(item => {
itemsText += item.textContent + ", ";
});
speak(itemsText); // Speak all the item names
}
</script>
</body>
</html>
|