Update app.py

app.py

@@ -125,7 +125,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: 10000;">
+    <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>
@@ -150,35 +150,25 @@ def modal_js():
     modal_script = """
     <script>
         let cart = [];
-        function openCartModal() {
-            const cartModal = document.getElementById('cart-modal');
-            const cartItemsContainer = document.getElementById('cart-items');
-            
-            // Empty the current cart content and update with the latest cart items
-            cartItemsContainer.innerHTML = "";
-            
-            // Loop through the cart and add it to the modal
-            cart.forEach((item, index) => {
-                const extrasList = item.extras.map(extra => `${extra.name} (+$${extra.price.toFixed(2)})`).join(', ');
-                cartItemsContainer.innerHTML += `
-                    <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>
-                        <button onclick="removeFromCart(${index})" style="color: red;">Remove</button>
-                    </div>
-                `;
-            });
 
-            // Ensure modal is visible
-            cartModal.style.display = 'block';
-            cartModal.style.zIndex = 10000; // Ensure it's above other elements
+        function openModal(name, image2, description, price) {
+            const modal = document.getElementById('modal');
+            modal.style.display = 'block';
+            modal.style.position = 'fixed';
+            modal.style.width = window.innerWidth <= 768 ? '90%' : '30%';
+            modal.style.top = `${event.clientY}px`;
+            modal.style.left = '50%';
+            modal.style.transform = 'translate(-50%, -50%)';
+            document.getElementById('modal-image').src = image2;
+            document.getElementById('modal-name').innerText = name;
+            document.getElementById('modal-description').innerText = description;
+            document.getElementById('modal-price').innerText = price;
+            document.getElementById('quantity').value = 1;
+            document.getElementById('special-instructions').value = '';
         }
 
         function closeModal() {
-            document.getElementById('cart-modal').style.display = 'none';
+            document.getElementById('modal').style.display = 'none';
         }
 
         function addToCart() {
@@ -192,31 +182,44 @@ def modal_js():
             }));
             const extrasCost = extras.reduce((total, extra) => total + extra.price, 0);
             const totalCost = (price + extrasCost) * quantity;
-            
-            // Push the item to the cart
             cart.push({ name, price, quantity, extras, instructions, totalCost });
-            
-            // Update the cart button text with the number of items
             updateCartButton();
-            
-            // Close the modal after adding the item
             closeModal();
         }
 
         function updateCartButton() {
-            // Update both buttons to show the number of items in the cart
             const cartButton = document.getElementById('cart-button');
-            const cartButtonTop = document.getElementById('cart-button-top');
-            
             cartButton.innerText = `View Cart (${cart.length} items)`;
-            cartButtonTop.innerText = `View Cart (${cart.length} items)`;
+        }
+
+        function openCartModal() {
+            const cartModal = document.getElementById('cart-modal');
+            const cartItemsContainer = document.getElementById('cart-items');
+            cartItemsContainer.innerHTML = "";
+            cart.forEach((item, index) => {
+                const extrasList = item.extras.map(extra => `${extra.name} (+$${extra.price.toFixed(2)})`).join(', ');
+                cartItemsContainer.innerHTML += `
+                    <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>
+                        <button onclick="removeFromCart(${index})" style="color: red;">Remove</button>
+                    </div>
+                `;
+            });
+            cartModal.style.display = 'block';
+        }
+
+        function closeCartModal() {
+            document.getElementById('cart-modal').style.display = 'none';
         }
 
         function removeFromCart(index) {
-            // Remove an item from the cart and update the cart button
             cart.splice(index, 1);
             updateCartButton();
-            openCartModal(); // Refresh the cart modal after removing an item
+            openCartModal();
         }
 
         function proceedToCheckout() {
@@ -253,8 +256,12 @@ with gr.Blocks() as app:
         with gr.Column():
             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; bottom: 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-button-top' 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-button' style='position: fixed; bottom: 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><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())