Update app.py

app.py

@@ -143,6 +143,22 @@ def create_modal_window():
         <textarea id="special-instructions" placeholder="Add your special instructions here..." style="width: 100%; height: 60px;"></textarea>
         <button style="background-color: #28a745; color: white; border: none; padding: 10px 20px; font-size: 14px; border-radius: 5px; cursor: pointer;" onclick="addToCart()">Add to Cart</button>
     </div>
+    <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>
+            <div id="order-summary" style="margin-top: 20px;">
+                <h2>Final Order Summary:</h2>
+                <div id="final-order-summary"></div>
+                <p><strong>Total Bill: $<span id="total-bill"></span></strong></p>
+            </div>
+            <button style="background: #ff5722; color: white; padding: 10px 20px; border-radius: 5px; border: none; cursor: pointer;" onclick="proceedToCheckout()">Proceed to Checkout</button>
+        </div>
+    </div>
     """
     return modal_html
 
@@ -248,13 +264,15 @@ def modal_js():
                 ${item.name} (x${item.quantity}) - $${item.totalCost.toFixed(2)}
                 Extras: ${item.extras.map(extra => extra.name).join(', ') || 'None'}
                 Instructions: ${item.instructions || 'None'}
-            `).join('\n');
+            `).join('<br>');
 
-            // Show an alert with the cart summary
-            alert(`Proceeding to checkout...\n\nCart Summary:\n\n${cartSummary}\n\nTotal Cost: $${totalCartCost.toFixed(2)}`);
-         }
+            // Insert the summary into the modal
+            document.getElementById('final-order-summary').innerHTML = cartSummary;
+            document.getElementById('total-bill').innerText = totalCartCost.toFixed(2);
 
-       
+            // Show the cart modal with the summary
+            openCartModal();
+        }
         // Reset all selected add-ons when opening a new item modal
         function resetAddOns() {
             const checkboxes = document.querySelectorAll('input[name="biryani-extra"]');
@@ -292,7 +310,7 @@ 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 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("<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><div id='order-summary'><h2>Final Order Summary:</h2><div id='final-order-summary'></div><p><strong>Total Bill: $<span id='total-bill'></span></strong></p></div><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())