voicemenu143

Sleeping

App Files Files Community

lokesh341 commited on 11 days ago

Commit

4caeded

verified ·

1 Parent(s): 14f0913

Update templates/menu_page.html

Browse files

Files changed (1) hide show

templates/menu_page.html +192 -134

templates/menu_page.html CHANGED Viewed

@@ -5,147 +5,205 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Biryani Hub Menu</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: #4169E1;
-            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: #87CEFA;
-            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;
-        }
-        #main-course-btn, #appetizer-btn {
-            padding: 10px 20px;
-            background-color: orange;
-            color: white;
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
-            font-size: 2.2rem;
-            margin: 10px 0;
-        }
-        #main-course-btn:hover, #appetizer-btn:hover {
-            background-color: #FF7F00;
-        }
-        #cart-summary {
-            display: none;
-        }
-    </style>
 </head>
 <body>
-    <!-- Page 1: Welcome and Category Selection -->
-    <div id="page1" class="menu-container">
-        <h1>Welcome to Biryani Hub menu</h1>
-        <h3 id="category-title">Please select a category:</h3>
-        <button id="main-course-btn">Main Course</button>
-        <button id="appetizer-btn">Appetizers</button>
-    </div>
-    <!-- Page 2: Main Course Menu -->
-    <div id="main-course-page" class="menu-container" style="display: none;">
-        <h1>Main Course Menu</h1>
-        <div id="main-course-items"></div>
-        <button id="back-to-category-btn">Back to Category Selection</button>
-    </div>
-    <!-- Page 3: Appetizers Menu -->
-    <div id="appetizer-page" class="menu-container" style="display: none;">
-        <h1>Appetizers Menu</h1>
-        <div id="appetizer-items"></div>
-        <button id="back-to-category-btn2">Back to Category Selection</button>
-    </div>
-    <script>
-        // Sample menu data
-        const menuData = {
-            'Main Course': [
-                { name: "Chicken Biryani", price: 250 },
-                { name: "Veg Biryani", price: 200 },
-                { name: "Mutton Biryani", price: 300 }
-            ],
-            'Appetizers': [
-                { name: "Paneer Tikka", price: 180 },
-                { name: "Chicken Wings", price: 220 }
-            ]
-        };
-        // Selectors for pages and buttons
-        const categoryButtons = document.getElementById('page1');
-        const mainCoursePage = document.getElementById('main-course-page');
-        const appetizerPage = document.getElementById('appetizer-page');
-        const backToCategoryBtns = document.querySelectorAll('[id^="back-to-category-btn"]');
-        // Event listeners for buttons to navigate between pages
-        document.getElementById("main-course-btn").addEventListener("click", () => {
-            categoryButtons.style.display = "none";
-            mainCoursePage.style.display = "block";
-            displayMenuItems('Main Course');
-        });
-        document.getElementById("appetizer-btn").addEventListener("click", () => {
-            categoryButtons.style.display = "none";
-            appetizerPage.style.display = "block";
-            displayMenuItems('Appetizers');
-        });
-        backToCategoryBtns.forEach(button => {
-            button.addEventListener("click", () => {
-                mainCoursePage.style.display = "none";
-                appetizerPage.style.display = "none";
-                categoryButtons.style.display = "block";
-            });
         });
-        // Function to populate menu items based on category
-        function displayMenuItems(category) {
-            const menuContainer = category === 'Main Course' ? document.getElementById('main-course-items') : document.getElementById('appetizer-items');
-            menuContainer.innerHTML = '';
-            if (menuData[category]) {
-                menuData[category].forEach(item => {
-                    const itemElement = document.createElement('div');
-                    itemElement.classList.add('menu-item');
-                    itemElement.innerHTML = `
-                        <div class="details">
-                            <h3>${item.name}</h3>
-                            <p class="price">Price: ₹${item.price}</p>
-                        </div>
-                        <button class="order-btn">Order</button>
-                    `;
-                    menuContainer.appendChild(itemElement);
-                });
-            }
         }
-    </script>
 </body>
 </html>

     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Biryani Hub Menu</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: #4169E1;
+        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: #87CEFA;
+        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;
+    }
+    #main-course-btn, #appetizer-btn {
+        padding: 10px 20px;
+        background-color: orange;
+        color: white;
+        border: none;
+        border-radius: 5px;
+        cursor: pointer;
+        font-size: 2.2rem;
+        margin: 10px 0;
+    }
+    #main-course-btn:hover, #appetizer-btn:hover {
+        background-color: #FF7F00;
+    }
+    #cart-summary {
+        display: none;
+    }
+</style>
 </head>
 <body>
+<!-- Page 1: Welcome and Category Selection -->
+<div id="page1" class="menu-container">
+    <h1>Welcome to Biryani Hub menu</h1>
+    <h3 id="category-title">Please select a category:</h3>
+    <button id="main-course-btn">Main Course</button>
+    <button id="appetizer-btn">Appetizers</button>
+</div>
+<!-- Page 2: Main Course Menu -->
+<div id="main-course-page" class="menu-container" style="display: none;">
+    <h1>Main Course Menu</h1>
+    <div id="main-course-items"></div>
+    <button id="back-to-category-btn">Back to Category Selection</button>
+</div>
+<!-- Page 3: Appetizers Menu -->
+<div id="appetizer-page" class="menu-container" style="display: none;">
+    <h1>Appetizers Menu</h1>
+    <div id="appetizer-items"></div>
+    <button id="back-to-category-btn2">Back to Category Selection</button>
+</div>
+<script>
+// Sample menu data
+const menuData = {
+    'Main Course': [
+        { name: "Chicken Biryani", price: 250 },
+        { name: "Veg Biryani", price: 200 },
+        { name: "Mutton Biryani", price: 300 }
+    ],
+    'Appetizers': [
+        { name: "Paneer Tikka", price: 180 },
+        { name: "Chicken Wings", price: 220 }
+    ]
+};
+// Selectors for pages and buttons
+const categoryButtons = document.getElementById('page1');
+const mainCoursePage = document.getElementById('main-course-page');
+const appetizerPage = document.getElementById('appetizer-page');
+const backToCategoryBtns = document.querySelectorAll('[id^="back-to-category-btn"]');
+// Event listeners for buttons to navigate between pages
+document.getElementById("main-course-btn").addEventListener("click", () => {
+    categoryButtons.style.display = "none";
+    mainCoursePage.style.display = "block";
+    displayMenuItems('Main Course');
+});
+document.getElementById("appetizer-btn").addEventListener("click", () => {
+    categoryButtons.style.display = "none";
+    appetizerPage.style.display = "block";
+    displayMenuItems('Appetizers');
+});
+backToCategoryBtns.forEach(button => {
+    button.addEventListener("click", () => {
+        mainCoursePage.style.display = "none";
+        appetizerPage.style.display = "none";
+        categoryButtons.style.display = "block";
+    });
+});
+// Function to populate menu items based on category
+function displayMenuItems(category) {
+    const menuContainer = category === 'Main Course' ? document.getElementById('main-course-items') : document.getElementById('appetizer-items');
+    menuContainer.innerHTML = '';
+    if (menuData[category]) {
+        menuData[category].forEach(item => {
+            const itemElement = document.createElement('div');
+            itemElement.classList.add('menu-item');
+            itemElement.innerHTML = `
+                <div class="details">
+                    <h3>${item.name}</h3>
+                    <p class="price">Price: ₹${item.price}</p>
+                </div>
+                <button class="order-btn" onclick="addToCart('${item.name}', 1)">Order</button>
+            `;
+            menuContainer.appendChild(itemElement);
         });
+    }
+}
+// Function to add an item to the cart
+let cart = [];
+function addToCart(itemName, quantity) {
+    const item = findItem(itemName);
+    cart.push({ name: item.name, price: item.price, quantity: quantity });
+}
+// Function to find item in the menu
+function findItem(itemName) {
+    const menu = menuData['Main Course']; // Default category to check first
+    return menu.find(item => item.name.toLowerCase() === itemName.toLowerCase());
+}
+// Voice greeting for menu categories
+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);
+}
+window.onload = function() {
+    // Sample menu data for Main Course and Appetizers
+    menuData = {
+        'Main Course': [
+            { name: "Chicken Biryani", price: 250 },
+            { name: "Veg Biryani", price: 200 },
+            { name: "Mutton Biryani", price: 300 }
+        ],
+        'Appetizers': [
+            { name: "Paneer Tikka", price: 180 },
+            { name: "Chicken Wings", price: 220 }
+        ]
+    };
+    // Automatically greet the user and prompt for category selection
+    speak("Welcome to Biryani Hub! We have the following categories: Main Course and Appetizers. Please say 'Main Course' or 'Appetizers' to select a category.");
+    // Automatically trigger voice recognition for category selection
+    recognition.start();
+    recognition.onresult = (event) => {
+        const categoryCommand = event.results[0][0].transcript.toLowerCase();
+        if (categoryCommand.includes("main course")) {
+            displayMenuItems('Main Course');
+            mainCoursePage.style.display = "block";
+            categoryButtons.style.display = "none";
+        } else if (categoryCommand.includes("appetizers")) {
+            displayMenuItems('Appetizers');
+            appetizerPage.style.display = "block";
+            categoryButtons.style.display = "none";
+        } else {
+            speak("Sorry, I couldn't understand that. Please say 'Main Course' or 'Appetizers'.");
         }
+    };
+};
+</script>
 </body>
 </html>