voicemenu143

Sleeping

App Files Files Community

lokesh341 commited on 10 days ago

Commit

0606c39

verified ·

1 Parent(s): 65e0c40

Update templates/menu_page.html

Browse files

Files changed (1) hide show

templates/menu_page.html +76 -107

templates/menu_page.html CHANGED Viewed

@@ -59,22 +59,7 @@
     #appetizer-btn:hover {
       background-color: #ff7f00;
     }
-    /* Cart page styling */
-    .cart-page {
-      background-color: #4169E1;
-      padding: 20px;
-      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-      margin-top: 50px;
-      border-radius: 8px;
-    }
-    .cart-total {
-      font-size: 1.5rem;
-      font-weight: bold;
-      margin-top: 10px;
-    }
     input, textarea {
       width: 100%;
       padding: 8px;
@@ -82,27 +67,37 @@
       border-radius: 4px;
       border: 1px solid #ccc;
     }
   </style>
 </head>
 <body>
-  <!-- Page 1: 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: Cart Summary -->
-  <div id="cart-page" class="cart-page" style="display: none;">
-    <h1>Your Cart</h1>
-    <div id="cart-items"></div>
-    <h3 id="cart-total"></h3>
-    <button id="back-to-menu-btn" class="order-btn">Back to Menu</button>
-    <button id="place-order-btn" class="order-btn">Place Order</button>
-  </div>
   <script>
     // Sample menu data
     const menuData = {
@@ -117,94 +112,68 @@
       ]
     };
-    // Initialize cart as an empty array
-    let cart = [];
-    const categoryPage = document.getElementById('page1');
-    const cartPage = document.getElementById('cart-page');
-    // Function to add items to the cart
-    function addToCart(itemName, quantity) {
-      const item = findItem(itemName);
-      if (item) {
-        const cartItem = cart.find(ci => ci.name.toLowerCase() === itemName.toLowerCase());
-        if (cartItem) {
-          cartItem.quantity += quantity;
-        } else {
-          cart.push({ name: item.name, price: item.price, quantity: quantity });
-        }
-        alert(item.name + " added to cart!");
-      }
-    }
-    // Function to find item in the menu
-    function findItem(itemName) {
-      let item = menuData['Main Course'].find(item => item.name.toLowerCase() === itemName.toLowerCase());
-      if (!item) {
-        item = menuData['Appetizers'].find(item => item.name.toLowerCase() === itemName.toLowerCase());
-      }
-      return item;
-    }
-    // Function to display cart items
-    function displayCartItems() {
-      const cartItemsContainer = document.getElementById('cart-items');
-      cartItemsContainer.innerHTML = '';
-      let total = 0;
-      if (cart.length === 0) {
-        cartItemsContainer.innerHTML = "<p>Your cart is empty.</p>";
       } else {
-        cart.forEach(item => {
-          const itemDiv = document.createElement('div');
-          itemDiv.classList.add('menu-item');
-          itemDiv.innerHTML = `
-            <div class="details">
-              <h3>${item.name}</h3>
-              <p>Price: ₹${item.price} x ${item.quantity}</p>
-            </div>
-          `;
-          cartItemsContainer.appendChild(itemDiv);
-          total += item.price * item.quantity;
-        });
       }
-      document.getElementById('cart-total').innerText = "Total: ₹" + total;
-    }
-    // Function to handle order placement and sending data to Salesforce
-    document.getElementById("place-order-btn").addEventListener("click", function() {
-      // Assume login info is already available (email and phone number)
-      const loginEmail = "[email protected]";  // Replace with actual login email
-      const loginPhone = "1234567890";  // Replace with actual login phone
-      let total = 0;
-      cart.forEach(item => total += item.price * item.quantity);
-      const orderDetails = {
-        customerEmail: loginEmail,
-        customerPhone: loginPhone,
-        items: cart,
-        totalAmount: total
-      };
-      // Send the order details to Salesforce via API
-      fetch('/place-order', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify(orderDetails)
-      })
-      .then(response => response.json())
-      .then(data => {
-        alert("Order placed successfully! Order ID: " + data.orderId);
-        cart = []; // Clear the cart after successful order
-        cartPage.style.display = "none";
-        categoryPage.style.display = "block";
-      })
-      .catch(error => {
-        console.error("Error placing order:", error);
-        alert("There was an error placing your order. Please try again.");
       });
-    });
   </script>
 </body>

     #appetizer-btn:hover {
       background-color: #ff7f00;
     }
+    /* Additional styling for pages */
     input, textarea {
       width: 100%;
       padding: 8px;
       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 = {
       ]
     };
+    // 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>