Update app.py

app.py

@@ -129,35 +129,32 @@ modal_and_cart_js = """
     };
     let finalized = false;
     function openModal(name, image, description, price) {
+        if (finalized) {
+            alert("You cannot add more items after finalizing your order.");
+            return;
+        }
         const modal = document.getElementById('modal');
-        const buttonRect = event.target.getBoundingClientRect();
-
+        modal.style.display = 'block';
+        modal.style.position = 'fixed';
         if (window.innerWidth <= 768) {
             modal.style.width = '90%';
         } else {
             modal.style.width = '30%';
         }
-
-        const modalTop = window.scrollY + buttonRect.top + buttonRect.height + 20;
-        const modalLeft = window.scrollX + buttonRect.left + buttonRect.width / 2 - modal.offsetWidth / 2;
-
-        modal.style.display = 'block';
-        modal.style.position = 'absolute';
-        modal.style.top = `${modalTop}px`;
-        modal.style.left = `${modalLeft}px`;
-
-        document.getElementById('modal-name').innerText = name;
+        const currentTop = parseInt(window.getComputedStyle(modal).top, 10);
+        const newTop = currentTop + 15;
+        modal.style.top = `${newTop}px`;
+        modal.style.left = '50%';
+        modal.style.transform = 'translate(-50%, -50%)';
         document.getElementById('modal-image').src = image;
+        document.getElementById('modal-name').innerText = name;
         document.getElementById('modal-description').innerText = description;
-        document.getElementById('modal-price').innerText = `$${price}`;
+        document.getElementById('modal-price').innerText = price;
+        const extrasInputs = document.querySelectorAll('input[name="biryani-extra"]');
+        extrasInputs.forEach(input => input.checked = false);
+        document.getElementById('quantity').value = 1;
+        document.getElementById('special-instructions').value = '';
     }
-
-    function closeModal() {
-        document.getElementById('modal').style.display = 'none';
-    }
-</script>
-    
-
     function closeModal() {
         document.getElementById('modal').style.display = 'none';
     }
@@ -216,7 +213,6 @@ modal_and_cart_js = """
     cartHTML += `<button style='margin-top: 10px; background-color: #007bff; color: white; border: none; padding: 10px; border-radius: 5px; width: 100%; cursor: pointer;' onclick='submitCart()'>Submit</button>`;
     document.getElementById('floating-cart').innerHTML = cartHTML;
 }
-
     function updateItemQuantity(index, newQuantity) {
         const quantity = parseInt(newQuantity) || 1;
         cart[index].quantity = quantity;
@@ -326,8 +322,8 @@ def app():
 
             # Modal window
             modal_window = gr.HTML("""
-                    <div id="modal" style="display: none; position: absolute; 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;">
+                <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>
                     <img id="modal-image" style="width: 100%; height: auto; border-radius: 8px; margin-bottom: 20px;" />