voicemenu143

Sleeping

App Files Files Community

lokesh341 commited on 10 days ago

Commit

087584b

verified ·

1 Parent(s): a64ad00

Update templates/menu_page.html

Browse files

Files changed (1) hide show

templates/menu_page.html +180 -156

templates/menu_page.html CHANGED Viewed

@@ -3,205 +3,229 @@
 <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>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Menu Page</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <style>
+        /* Basic Styles */
         body {
             font-family: Arial, sans-serif;
+            background-color: #f4f4f4;
             margin: 0;
             padding: 0;
         }
+        header {
+            background-color: #333;
+            color: white;
+            padding: 15px;
+            text-align: center;
+        }
+        .menu-container {
+            margin: 20px;
+        }
+        .menu-category {
+            margin-bottom: 20px;
         }
+        .menu-category h2 {
             text-align: center;
+            font-size: 24px;
         }
+        .menu-item {
+            background-color: white;
+            padding: 10px;
+            margin-bottom: 10px;
+            border-radius: 5px;
+            box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .menu-item h3 {
+            margin: 0;
+            font-size: 20px;
+        }
+        .menu-item p {
+            margin: 0;
+            font-size: 16px;
+            color: #888;
+        }
+        .menu-item button {
+            padding: 8px 12px;
+            background-color: #28a745;
             color: white;
             border: none;
             border-radius: 5px;
             cursor: pointer;
         }
+        .menu-item button:hover {
+            background-color: #218838;
         }
+        .cart-button {
+            padding: 12px 20px;
+            background-color: #007bff;
             color: white;
             border: none;
             border-radius: 5px;
+            text-align: center;
+            font-size: 18px;
             cursor: pointer;
+            width: 100%;
         }
+        .cart-button:hover {
+            background-color: #0056b3;
+        }
+        .cart-icon {
+            margin-right: 8px;
+        }
+        footer {
+            text-align: center;
+            padding: 10px;
+            background-color: #333;
+            color: white;
+            position: fixed;
+            width: 100%;
+            bottom: 0;
+        }
+        .cart-summary {
+            display: flex;
+            justify-content: space-between;
+            margin-top: 20px;
+        }
+        .cart-summary span {
+            font-size: 18px;
+            font-weight: bold;
+        }
+        .cart-summary button {
+            background-color: #28a745;
         }
     </style>
 </head>
 <body>
+    <!-- Header -->
+    <header>
+        <h1>Welcome to Our Restaurant</h1>
+    </header>
+    <!-- Menu Content -->
+    <div class="menu-container">
+        {% for category, items in menu_data.items() %}
+            <div class="menu-category">
+                <h2>{{ category }}</h2>
+                {% for item in items %}
+                    <div class="menu-item">
+                        <div>
+                            <h3>{{ item.name }}</h3>
+                            <p>Price: ₹{{ item.price }}</p>
+                        </div>
+                        <button onclick="addToCart('{{ item.name }}', {{ item.price }})">Add to Cart</button>
+                    </div>
+                {% endfor %}
+            </div>
+        {% endfor %}
     </div>
+    <!-- Cart Button -->
+    <div class="menu-category">
+        <button class="cart-button" onclick="showCart()">
+            <i class="fas fa-shopping-cart cart-icon"></i> View Cart
+        </button>
     </div>
+    <!-- Cart Summary (hidden initially) -->
+    <div id="cart-summary" class="order-summary" style="display:none;">
+        <h3>Your Cart</h3>
+        <ul id="cart-items-list">
+            <!-- Cart items will be dynamically listed here -->
+        </ul>
+        <div class="cart-summary">
+            <span>Total: ₹<span id="total-price">0</span></span>
+            <button onclick="placeOrder()">Place Order</button>
+        </div>
     </div>
+    <!-- Footer -->
+    <footer>
+        <p>Restaurant &copy; 2025</p>
+    </footer>
+    <!-- JavaScript -->
+    <script>
         let cart = [];
+        // Add item to cart
+        function addToCart(itemName, itemPrice) {
+            cart.push({ name: itemName, price: itemPrice });
+            alert(`${itemName} added to cart!`);
+        }
+        // Show cart and order summary
+        function showCart() {
             if (cart.length === 0) {
+                alert("Your cart is empty!");
+                return;
             }
+            // Update cart items list
+            const cartItemsList = document.getElementById('cart-items-list');
+            cartItemsList.innerHTML = '';
+            let totalPrice = 0;
+            cart.forEach(item => {
+                const li = document.createElement('li');
+                li.innerHTML = `${item.name} - ₹${item.price}`;
+                cartItemsList.appendChild(li);
+                totalPrice += item.price;
+            });
+            // Update total price
+            document.getElementById('total-price').textContent = totalPrice;
+            // Show cart summary
+            document.getElementById('cart-summary').style.display = 'block';
         }
+        // Place the order
         function placeOrder() {
+            if (cart.length === 0) {
+                alert("Your cart is empty, cannot place the order.");
+                return;
+            }
+            // Send the order to the backend (POST request)
+            fetch('/order', {
+                method: 'POST',
                 headers: {
+                    'Content-Type': 'application/json',
                 },
+                body: JSON.stringify({ cart: cart })
             })
             .then(response => response.json())
+            .then(data => {
+                alert(data.message);
+                cart = [];  // Clear cart after placing the order
+                document.getElementById('cart-summary').style.display = 'none';  // Hide cart summary
+            })
+            .catch(error => {
+                console.error('Error:', error);
+                alert('Error placing order');
+            });
         }
     </script>