Update app.py

app.py

@@ -129,43 +129,40 @@ modal_and_cart_js = """
     };
     let finalized = false;
     function openModal(name, image, description, price) {
-       if (finalized) {
+        if (finalized) {
             alert("You cannot add more items after finalizing your order.");
             return;
         }
+
         const modal = document.getElementById('modal');
         const buttonRect = event.target.getBoundingClientRect(); // Get button position
 
-        // Adjust modal width based on screen size
-        if (window.innerWidth <= 768) { // For phone screens
-            modal.style.width = '90%';
-        }
-        else { // For larger screens (laptops)
-            modal.style.width = '30%';
-        }
+        // Set modal width based on device size
+        if (window.innerWidth <= 768) {
+            modal.style.width = '90%'; // For mobile devices
+            } else {
+                modal.style.width = '30%'; // For laptops and larger screens
+              }
 
         const modalWidth = modal.offsetWidth;
         const modalHeight = modal.offsetHeight;
 
-        // Calculate the modal's position dynamically
+        // Dynamically calculate modal position
         const modalTop = window.scrollY + buttonRect.top + buttonRect.height / 2 - modalHeight / 2;
         const modalLeft = window.scrollX + buttonRect.left + buttonRect.width / 2 - modalWidth / 2;
 
-        // Set modal position
+        // Apply positioning styles
         modal.style.display = 'block';
-        modal.style.position = 'absolute'; // Use absolute to position it dynamically
         modal.style.top = `${modalTop}px`;
         modal.style.left = `${modalLeft}px`;
 
-        // Update modal content
+        // Populate modal content
         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}`;
 
-        // Reset extras and input fields
-        const extrasInputs = document.querySelectorAll('input[name="biryani-extra"]');
-        extrasInputs.forEach(input => input.checked = false);
+        // Reset inputs
         document.getElementById('quantity').value = 1;
         document.getElementById('special-instructions').value = '';
     }
@@ -338,7 +335,7 @@ def app():
 
             # Modal window
             modal_window = gr.HTML("""
-                <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 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;">
                         <button onclick="closeModal()" style="background: none; border: none; font-size: 18px; cursor: pointer;">&times;</button>
                     </div>