voicemenuspe

Running

File size: 8,066 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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: #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>

        <!-- Dynamic Menu Item List -->
        <div id="menu-items">
            <!-- Menu items will be populated here from the backend -->
        </div>

        <button id="listen-btn">Say "Order" to order an item</button>
        <div id="cart-summary" style="display:none;">
            <h2>Your Cart:</h2>
            <div id="cart-details"></div>
            <button id="place-order-btn">Place Final Order</button>
        </div>
    </div>

    <script>
        const listenButton = document.getElementById("listen-btn");
        const placeOrderButton = document.getElementById("place-order-btn");
        const cartSummary = document.getElementById("cart-summary");
        const cartDetails = document.getElementById("cart-details");
        let isListening = false;
        let cart = [];  // Global cart variable to store items
        const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
        recognition.lang = "en-US";
        recognition.interimResults = false;

        // Function to speak text
        function speak(text) {
            const msg = new SpeechSynthesisUtterance(text);
            window.speechSynthesis.speak(msg);
        }

        listenButton.addEventListener("click", () => {
            if (!isListening) {
                isListening = true;
                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")) {
                // Process ordering logic here (e.g., find item in menu and add to cart)
                processOrder();
            } else if (command.includes("cart details")) {
                showCartDetails();
            } else {
                speak("Sorry, I couldn't understand that. Please try again.");
            }
        };

        recognition.onerror = (event) => {
            console.error("Speech recognition error:", event.error);
            speak("Sorry, I couldn't understand that. Please try again.");
        };

        // Function to process order
        function processOrder() {
            speak("Which item would you like to order?");
            recognition.start();
            recognition.onresult = (event) => {
                const itemName = event.results[0][0].transcript.toLowerCase();
                const item = findItem(itemName);
                if (item) {
                    speak(`You selected ${item.name}. How many would you like?`);
                    recognition.start();
                    recognition.onresult = (event) => {
                        const quantity = parseInt(event.results[0][0].transcript);
                        if (quantity) {
                            addToCart(item, quantity);
                            speak(`${quantity} ${item.name} added to your cart.`);
                            askMoreItems();
                        } else {
                            speak("Please say a valid quantity.");
                        }
                    };
                } else {
                    speak("Sorry, I couldn't find that item. Please try again.");
                }
            };
        }

        // Function to ask if the user wants to order more items
        function askMoreItems() {
            speak("Would you like to order more items?");
            recognition.start();
            recognition.onresult = (event) => {
                const response = event.results[0][0].transcript.toLowerCase();
                if (response.includes("yes")) {
                    processOrder();
                } else {
                    showCartDetails();
                }
            };
        }

        // Function to show cart details
        function showCartDetails() {
            if (cart.length > 0) {
                let cartHtml = "";
                cart.forEach(item => {
                    cartHtml += `<p>${item.quantity} x ${item.name} - ₹${item.price * item.quantity}</p>`;
                });
                cartDetails.innerHTML = cartHtml;
                cartSummary.style.display = "block";
                speak(`Your cart contains ${cart.length} items.`);
            } else {
                speak("Your cart is empty.");
            }
        }

        // Function to add an item to the cart
        function addToCart(item, quantity) {
            cart.push({ name: item.name, price: item.price, quantity: quantity });
        }

        // Function to find item in the menu
        function findItem(itemName) {
            const menu = [
                { name: "Chicken Biryani", price: 250 },
                { name: "Veg Biryani", price: 200 },
                { name: "Mutton Biryani", price: 300 }
            ];
            return menu.find(item => item.name.toLowerCase() === itemName.toLowerCase());
        }

        // Function to populate the menu dynamically and speak it on load
        window.onload = function() {
            const menuItems = [
                { name: "Chicken Biryani", price: 250 },
                { name: "Veg Biryani", price: 200 },
                { name: "Mutton Biryani", price: 300 }
            ];
            let menuContent = "";
            menuItems.forEach(item => {
                menuContent += `
                    <div class="menu-item">
                        <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>
                    </div>
                `;
            });
            document.getElementById('menu-items').innerHTML = menuContent;

            // Voice reading of menu items
            let itemsText = "The menu includes: ";
            menuItems.forEach(item => {
                itemsText += item.name + ", ";
            });
            speak(itemsText); // Speak all the item names
        }
    </script>

</body>
</html>