voicemenu143

Sleeping

App Files Files Community

lokesh341 commited on 10 days ago

Commit

a64ad00

verified ·

1 Parent(s): 13b2891

Update templates/menu_page.html

Browse files

Files changed (1) hide show

templates/menu_page.html +200 -171

templates/menu_page.html CHANGED Viewed

@@ -1,180 +1,209 @@
 <!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: #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;
-    }
-    /* Additional styling for pages */
-    input, textarea {
-      width: 100%;
-      padding: 8px;
-      margin: 5px 0 15px;
-      border-radius: 4px;
-      border: 1px solid #ccc;
-    }
-    /* Login styling */
-    .login-container {
-      text-align: center;
-      margin-top: 50px;
-    }
-    .login-container input {
-      width: 300px;
-      margin-bottom: 20px;
-    }
-  </style>
 </head>
 <body>
-  <!-- Login Page -->
-  <div id="login-page" class="login-container">
-    <h1>Biryani Hub - Login</h1>
-    <form id="login-form">
-      <input type="email" id="login-email" placeholder="Enter your email" required />
-      <input type="tel" id="login-phone" placeholder="Enter your phone number" required />
-      <button type="submit" class="order-btn">Login</button>
-    </form>
-  </div>
-  <!-- Menu Page -->
-  <div id="menu-page" class="menu-container" style="display: none;">
-    <h1>Welcome to Biryani Hub Menu</h1>
-    <h3>Please select a category:</h3>
-    <button id="main-course-btn">Main Course</button>
-    <button id="appetizer-btn">Appetizers</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 }
-      ]
-    };
-    // User info storage
-    let userEmail = "";
-    let userPhone = "";
-    // Select page elements
-    const loginPage = document.getElementById('login-page');
-    const menuPage = document.getElementById('menu-page');
-    // Login form submission
-    document.getElementById('login-form').addEventListener('submit', function(e) {
-      e.preventDefault();
-      // Get login input values
-      userEmail = document.getElementById('login-email').value;
-      userPhone = document.getElementById('login-phone').value;
-      // Simple validation (you can expand this)
-      if (userEmail && userPhone) {
-        console.log(`Login successful! Email: ${userEmail}, Phone: ${userPhone}`);
-        // Show menu page after successful login
-        loginPage.style.display = 'none';
-        menuPage.style.display = 'block';
-      } else {
-        alert("Please provide both email and phone number.");
-      }
-    });
-    // Menu page logic
-    document.getElementById("main-course-btn").addEventListener("click", () => {
-      displayMenuItems('Main Course');
-    });
-    document.getElementById("appetizer-btn").addEventListener("click", () => {
-      displayMenuItems('Appetizers');
-    });
-    // Function to display menu items based on category
-    function displayMenuItems(category) {
-      const menuContainer = document.createElement('div');
-      menuContainer.classList.add('menu-items');
-      const selectedCategoryData = menuData[category];
-      selectedCategoryData.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}', ${item.price}, 1)">Add to Cart</button>
-        `;
-        menuContainer.appendChild(itemElement);
-      });
-      menuPage.appendChild(menuContainer);
-    }
-    // Function to add an item to the cart
-    function addToCart(name, price, quantity) {
-      alert(`${name} added to cart!`);
-      // Logic to add item to cart
-    }
-  </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Biryani Hub</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #f8f8f8;
+            margin: 0;
+            padding: 0;
+        }
+        .menu-container, .cart-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;
+        }
+        button {
+            padding: 10px 20px;
+            background-color: orange;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 2.2rem;
+            margin: 10px 0;
+        }
+        button:hover {
+            background-color: #FF7F00;
+        }
+        .menu-item, .cart-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;
+        }
+    </style>
 </head>
 <body>
+    <!-- Page 1: Welcome Page -->
+    <div class="menu-container" id="welcome-page">
+        <h1>Welcome to Biryani Hub Menu</h1>
+        <h3>Please choose a category:</h3>
+        <button id="main-course-btn">Main Course</button>
+        <button id="appetizer-btn">Appetizers</button>
+    </div>
+    <!-- Page 2: Menu Page -->
+    <div class="menu-container" id="menu-page" style="display: none;">
+        <h1 id="menu-title"></h1>
+        <div id="menu-items"></div>
+        <button class="order-btn" onclick="goToCart()">Go to Cart</button>
+    </div>
+    <!-- Page 3: Cart Page -->
+    <div class="cart-container" id="cart-page" style="display: none;">
+        <h1>Your Cart</h1>
+        <div id="cart-items"></div>
+        <button class="order-btn" onclick="placeOrder()">Place Order</button>
+    </div>
+    <script>
+        // Speech synthesis setup
+        const synth = window.speechSynthesis;
+        const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
+        recognition.lang = "en-US";
+        recognition.interimResults = false;
+        function speak(text) {
+            const msg = new SpeechSynthesisUtterance(text);
+            synth.speak(msg);
+        }
+        // Automatically speak out the options on page load
+        window.onload = function() {
+            speak("Welcome to Biryani Hub! We have the following categories: Main Course and Appetizers. Please say 'Main Course' or 'Appetizers' to select a category.");
+            recognition.start();
+        };
+        // Listen for voice commands
+        recognition.onresult = (event) => {
+            const categoryCommand = event.results[0][0].transcript.toLowerCase();
+            if (categoryCommand.includes("main course")) {
+                window.location.href = '/menu?category=Main%20Course';
+            } else if (categoryCommand.includes("appetizers")) {
+                window.location.href = '/menu?category=Appetizers';
+            } else {
+                speak("Sorry, I didn't understand that. Please say 'Main Course' or 'Appetizers'.");
+            }
+        };
+        // 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 }
+            ]
+        };
+        let cart = [];
+        // Show the menu based on category selection
+        const urlParams = new URLSearchParams(window.location.search);
+        const category = urlParams.get('category') || 'Main Course';
+        document.getElementById("menu-title").textContent = category + " Menu";
+        const menuItemsContainer = document.getElementById("menu-items");
+        menuData[category].forEach(item => {
+            const itemDiv = document.createElement('div');
+            itemDiv.classList.add('menu-item');
+            itemDiv.innerHTML = `
+                <div>
+                    <h3>${item.name}</h3>
+                    <p>Price: ₹${item.price}</p>
+                </div>
+                <button class="order-btn" onclick="addToCart('${item.name}', ${item.price})">Add to Cart</button>
+            `;
+            menuItemsContainer.appendChild(itemDiv);
+        });
+        // Add items to the cart
+        function addToCart(name, price) {
+            cart.push({ name, price });
+            alert(`${name} added to cart!`);
+        }
+        // Navigate to the cart page
+        function goToCart() {
+            document.getElementById("welcome-page").style.display = "none";
+            document.getElementById("menu-page").style.display = "none";
+            document.getElementById("cart-page").style.display = "block";
+            populateCart();
+        }
+        // Populate the cart with items
+        function populateCart() {
+            const cartItemsContainer = document.getElementById("cart-items");
+            if (cart.length === 0) {
+                cartItemsContainer.innerHTML = "<p>Your cart is empty.</p>";
+            } else {
+                cart.forEach(item => {
+                    const itemDiv = document.createElement("div");
+                    itemDiv.classList.add("cart-item");
+                    itemDiv.innerHTML = `
+                        <div>
+                            <h3>${item.name}</h3>
+                            <p>Price: ₹${item.price}</p>
+                        </div>
+                    `;
+                    cartItemsContainer.appendChild(itemDiv);
+                });
+            }
+        }
+        // Place the order (dummy function)
+        function placeOrder() {
+            const orderData = {
+                items: cart.map(item => ({
+                    name: item.name,
+                    price: item.price,
+                    quantity: 1
+                }))
+            };
+            fetch("/order", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json"
+                },
+                body: JSON.stringify(orderData)
+            })
+            .then(response => response.json())
+            .then(data => alert(data.message))
+            .catch(error => alert("There was an error placing your order"));
+        }
+    </script>
 </body>
 </html>