Update app.py

app.py

@@ -126,7 +126,7 @@ def create_modal_window():
         """
 
     modal_html = f"""
-    <div id="modal" style="display: none; position: fixed; background: white; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); padding: 20px; z-index: 1000; width: 80%; top: 10%; left: 50%; transform: translateX(-50%);">
+    <div id="modal" style="display: none; position: fixed; background: white; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); padding: 20px; z-index: 1000;">
         <div style="text-align: right;">
             <button onclick="closeModal()" style="background: none; border: none; font-size: 18px; cursor: pointer;">&times;</button>
         </div>
@@ -156,7 +156,7 @@ def modal_js():
             const modal = document.getElementById('modal');
             modal.style.display = 'block';
             modal.style.position = 'fixed';
-            modal.style.width = window.innerWidth <= 768 ? '90%' : '50%';
+            modal.style.width = window.innerWidth <= 768 ? '90%' : '30%';
             modal.style.top = `${event.clientY}px`;
             modal.style.left = '50%';
             modal.style.transform = 'translate(-50%, -50%)';
@@ -242,33 +242,24 @@ def modal_js():
             totalCartCost = cart.reduce((total, item) => total + item.totalCost, 0);
             totalCostElement.innerText = `Total Cart Cost: $${totalCartCost.toFixed(2)}`;
         }
-        function submitOrder() {
-            const orderDetails = cart.map(item => {
-                const extrasList = item.extras.map(extra => `${extra.name} x${extra.quantity} (+$${(extra.price * extra.quantity).toFixed(2)})`).join(', ');
+        function proceedToCheckout() {
+            const cartSummary = cart.map(item => {
+                const extrasList = item.extras.length > 0 ? item.extras.map(extra => `${extra.name} (+$${extra.price})`).join(', ') : 'None';
                 return `
-                    <div style="border: 1px solid #ddd; padding: 10px; margin-bottom: 10px; border-radius: 8px;">
-                        <h3>${item.name}</h3>
-                        <p>Quantity: ${item.quantity}</p>
-                        <p>Extras: ${extrasList || 'None'}</p>
-                        <p>Special Instructions: ${item.instructions || 'None'}</p>
-                        <p>Total Cost: $${item.totalCost.toFixed(2)}</p>
-                    </div>
+                    <div><strong>${item.name}</strong> - $${item.totalCost.toFixed(2)}<br>
+                    Quantity: ${item.quantity} | Add-ons: ${extrasList} | Instructions: ${item.instructions || 'None'}</div>
                 `;
-            }).join('');
-
-            const finalOrderPage = document.getElementById('final-order-page');
-            const orderDetailsContainer = document.getElementById('order-details');
-            orderDetailsContainer.innerHTML = orderDetails;
-
-            // Show the final order page and hide the cart page
-            finalOrderPage.style.display = 'block';
-            document.getElementById('cart-modal').style.display = 'none';
+            }).join('<hr>');
+            alert("Proceeding to checkout...\n\n" + cartSummary);
+            cart = [];  // Empty the cart after checkout
+            updateCartButton();  // Reset cart button text
+            updateCartTotalCost();  // Reset total cost
+            closeCartModal();
         }
-
-        // Go back to Menu Page from Final Order Page
-        function goBackToMenu() {
-            document.getElementById('final-order-page').style.display = 'none';
-            document.getElementById('menu-page').style.display = 'block';
+        // Reset all selected add-ons when opening a new item modal
+        function resetAddOns() {
+            const checkboxes = document.querySelectorAll('input[name="biryani-extra"]');
+            checkboxes.forEach(checkbox => checkbox.checked = false);  // Uncheck all add-ons
         }
     </script>
     """
@@ -302,17 +293,10 @@ with gr.Blocks() as app:
             preference = gr.Radio(choices=["All", "Veg", "Non-Veg"], label="Filter Preference", value="All")
             menu_output = gr.HTML()
             gr.HTML("<div id='cart-button' style='position: fixed; top: 20px; right: 20px; background: #28a745; color: white; padding: 10px 20px; border-radius: 30px; cursor: pointer; z-index: 1000;' onclick='openCartModal()'>View Cart</div>")
-            gr.HTML("<div id='cart-modal' style='display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: white; z-index: 1000; overflow-y: auto;'><div style='padding: 20px;'><div style='text-align: right;'><button onclick='closeCartModal()' style='background: none; border: none; font-size: 24px; cursor: pointer;'>&times;</button></div><h1>Your Cart</h1><div id='cart-items'></div><p id='cart-total-cost' style='font-size: 1.2em; font-weight: bold;'>Total Cart Cost: $0.00</p><button onclick='submitOrder()' style='background: #007bff; color: white; padding: 10px 20px; border-radius: 5px;'>Submit Order</button></div></div>")
+            gr.HTML("<div id='cart-modal' style='display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: white; z-index: 1000; overflow-y: auto;'><div style='padding: 20px;'><div style='text-align: right;'><button onclick='closeCartModal()' style='background: none; border: none; font-size: 24px; cursor: pointer;'>&times;</button></div><h1>Your Cart</h1><div id='cart-items'></div><p id='cart-total-cost' style='font-size: 1.2em; font-weight: bold;'>Total Cart Cost: $0.00</p><button style='background: #ff5722; color: white; padding: 10px 20px; border-radius: 5px; border: none; cursor: pointer;' onclick='proceedToCheckout()'>Proceed to Checkout</button></div></div>")
             gr.HTML(create_modal_window())
             gr.HTML(modal_js())
 
-    # Final Order Page
-    with gr.Row(visible=False) as final_order_page:
-        with gr.Column():
-            gr.HTML("<h1 style='text-align: center;'>Final Order</h1>")
-            order_details_output = gr.HTML()
-            gr.HTML("<button onclick='goBackToMenu()' style='background: #28a745; color: white; padding: 10px 20px; border-radius: 5px;'>Back to Menu</button>")
-
     login_button.click(
         lambda email, password: (gr.update(visible=False), gr.update(visible=True), gr.update(value=filter_menu("All")), "Login successful!")
         if login(email, password)[0] == "Login successful!" else (gr.update(), gr.update(), gr.update(), "Invalid email or password."),