voicemenu1433

Sleeping

File size: 9,826 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;
        }
        .container {
            max-width: 1200px;
            margin: 50px auto;
            text-align: center;
        }
        h1 {
            font-size: 2.5rem;
            color: #333;
        }
        .menu-option button {
            font-size: 1.2rem;
            padding: 10px 20px;
            margin: 20px;
            cursor: pointer;
            border: none;
            border-radius: 5px;
            background-color: #007bff;
            color: white;
        }
        .menu-option button:hover {
            background-color: #0056b3;
        }
        .menu-item {
            display: inline-block;
            width: 30%;
            margin: 10px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: #fff;
        }
        .menu-item img {
            width: 100px;
            height: 100px;
            border-radius: 8px;
            margin-bottom: 10px;
        }
        .cart-container {
            margin-top: 30px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: #eaf3e1;
            display: none;
        }
        .cart-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }
        .view-cart-container {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 999;
        }
        .view-cart-button {
            background-color: #007bff;
            color: #fff;
            padding: 10px 20px;
            border-radius: 50px;
            font-size: 1rem;
            font-weight: bold;
            text-decoration: none;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .view-cart-button:hover {
            background-color: #0056b3;
            text-decoration: none;
        }
    </style>
</head>
<body>

    <div class="container" id="welcome-container">
        <h1>Welcome to the Biryani Hub Menu</h1>
        <div class="menu-option">
            <button id="veg-btn" onclick="showMenu('veg')">Vegetarian Menu</button>
            <button id="non-veg-btn" onclick="showMenu('nonVeg')">Non-Vegetarian Menu</button>
        </div>
    </div>

    <div class="container" id="menu-container" style="display: none;">
        <h1>Menu</h1>
        <div id="menu-items" class="row">
            <!-- Dynamically populated menu items will appear here -->
        </div>
        <button onclick="viewCart()">View Cart</button>
    </div>

    <div class="cart-container" id="cart-container">
        <h2>Your Cart</h2>
        <div id="cart-items"></div>
        <button onclick="placeOrder()">Place Final Order</button>
    </div>

    <div class="view-cart-container">
        <a href="javascript:void(0);" class="view-cart-button" onclick="viewCart()">
            View Cart
        </a>
    </div>

    <script>
        // Menu data
        const menuItems = {
            veg: [
                { name: 'Samosa', price: 9, ingredients: 'Potatoes, Peas, Flour, Spices', description: 'Crispy fried pastry filled with spiced potatoes and peas.', imageUrl: 'https://via.placeholder.com/100' },
                { name: 'Onion Pakoda', price: 10, ingredients: 'Onions, Gram Flour, Spices', description: 'Deep-fried onion fritters seasoned with herbs and spices.', imageUrl: 'https://via.placeholder.com/100' },
                { name: 'Chilli Gobi', price: 12, ingredients: 'Cauliflower, Chili Sauce, Spices', description: 'Cauliflower florets tossed in a spicy chili sauce.', imageUrl: 'https://via.placeholder.com/100' }
            ],
            nonVeg: [
                { name: 'Chicken Biryani', price: 14, ingredients: 'Chicken, Basmati Rice, Spices', description: 'Aromatic basmati rice cooked with tender chicken and spices.', imageUrl: 'https://via.placeholder.com/100' },
                { name: 'Mutton Biryani', price: 16, ingredients: 'Mutton, Basmati Rice, Spices', description: 'Flavorful rice dish made with succulent mutton and aromatic spices.', imageUrl: 'https://via.placeholder.com/100' },
                { name: 'Butter Chicken', price: 15, ingredients: 'Chicken, Tomato, Butter, Cream', description: 'Tender chicken cooked in a rich, creamy tomato sauce.', imageUrl: 'https://via.placeholder.com/100' }
            ]
        };

        const cart = [];

        // Speech Synthesis and Speech Recognition
        const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
        recognition.lang = 'en-US';
        recognition.interimResults = false;
        recognition.maxAlternatives = 1;

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

        // Function to show the menu based on selected type (veg or non-veg)
        function showMenu(type) {
            // Hide the welcome screen and show the menu
            document.getElementById('welcome-container').style.display = 'none';
            document.getElementById('menu-container').style.display = 'block';

            const menuContainer = document.getElementById('menu-items');
            menuContainer.innerHTML = ''; // Clear previous menu items

            menuItems[type].forEach(item => {
                const div = document.createElement('div');
                div.classList.add('menu-item');
                div.innerHTML = `<div class="details">
                                    <img src="${item.imageUrl}" alt="${item.name}">
                                    <div class="text">
                                        <h3>${item.name}</h3>
                                        <p>${item.description}</p>
                                        <p><strong>Ingredients:</strong> ${item.ingredients}</p>
                                        <p><strong>Price:</strong> $${item.price}</p>
                                        <button onclick="addToCart('${item.name}')">Add to Cart</button>
                                    </div>
                                  </div>`;
                menuContainer.appendChild(div);
            });
        }

        // Function to add items to the cart
        function addToCart(itemName) {
            const quantity = prompt(`How many ${itemName} would you like to add?`, 1);
            if (quantity && !isNaN(quantity) && quantity > 0) {
                const item = menuItems.veg.concat(menuItems.nonVeg).find(item => item.name === itemName);
                const cartItem = { ...item, quantity: parseInt(quantity) };
                cart.push(cartItem);
                speak(`${quantity} of ${itemName} added to your cart.`, () => {});
            } else {
                speak("Please enter a valid quantity.", () => {});
            }
        }

        // Function to view the cart
        function viewCart() {
            const cartContainer = document.getElementById('cart-container');
            const cartItemsContainer = document.getElementById('cart-items');
            cartItemsContainer.innerHTML = '';
            cart.forEach(cartItem => {
                const div = document.createElement('div');
                div.classList.add('cart-item');
                div.innerHTML = `<span>${cartItem.name} (x${cartItem.quantity}) - $${cartItem.price * cartItem.quantity}</span>`;
                cartItemsContainer.appendChild(div);
            });
            cartContainer.style.display = 'block';
        }

        // Function to place the final order
        function placeOrder() {
            if (cart.length > 0) {
                speak("Your order has been placed successfully!", () => {});
                cart.length = 0; // Clear the cart after placing the order
                viewCart(); // Optionally, update cart view
            } else {
                speak("Your cart is empty. Please add items before placing the order.", () => {});
            }
        }

        // Function to start voice recognition
        function startVoiceRecognition() {
            recognition.start();
        }

        // Speech recognition logic
        recognition.onresult = (event) => {
            const command = event.results[0][0].transcript.toLowerCase();
            if (command.includes('vegetarian')) {
                showMenu('veg');
                speak("Here are the vegetarian items.", () => {});
            } else if (command.includes('non-vegetarian')) {
                showMenu('nonVeg');
                speak("Here are the non-vegetarian items.", () => {});
            } else {
                speak("Please say vegetarian or non-vegetarian.", () => {
                    recognition.start();
                });
            }
        };

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

        // Welcome message and voice prompt when the page loads
        window.onload = () => {
            speak("Welcome to the Biryani Hub menu. Please say vegetarian or non-vegetarian to choose your menu.", () => {
                startVoiceRecognition();
            });
        }
    </script>

</body>
</html>