Update app.py

app.py

@@ -95,16 +95,10 @@ extras = [
 # JavaScript for popup modal
 popup_js = """
 <script>
-    function showPopup(name, description, price, image, element) {
+    function showPopup(name, description, price, image) {
         const popup = document.getElementById("custom-popup");
         const overlay = document.getElementById("overlay");
-
-        // Get the bounding rectangle of the clicked element
-        const rect = element.getBoundingClientRect();
-        const offsetX = 10; // Offset for better alignment
-        const offsetY = 10;
-
-        popup.innerHTML = `
+        popup.innerHTML = 
             <img src="${image}" alt="${name}" style="width: 200px; height: auto; border-radius: 10px; margin-bottom: 10px;">
             <h3 style="margin-top: 10px;">${name}</h3>
             <p>${description}</p>
@@ -112,31 +106,25 @@ popup_js = """
             
             <h4 style="margin-top: 20px;">Choose a Spice Level</h4>
             <div style="display: flex; flex-wrap: wrap; gap: 10px;">
-                ${["American Mild", "American Medium", "American Spicy", "Indian Mild", "Indian Medium", "Indian Spicy", "Indian Very Spicy"].map(spice => `
+                ${["American Mild", "American Medium", "American Spicy", "Indian Mild", "Indian Medium", "Indian Spicy", "Indian Very Spicy"].map(spice => 
                     <label style="margin-right: 10px;">
                         <input type="radio" name="spice" value="${spice}"> ${spice}
                     </label>
-                `).join("")}
+                ).join("")}
             </div>
             
             <h4 style="margin-top: 20px;">Choose Extras</h4>
             <div style="display: flex; flex-wrap: wrap; gap: 10px;">
-                ${["Extra Raitha 4oz + $1.00", "Extra Raitha 8oz + $2.00", "Extra Onion + $1.00", "Extra Onion & Lemon + $2.00"].map(extra => `
+                ${["Extra Raitha 4oz + $1.00", "Extra Raitha 8oz + $2.00", "Extra Onion + $1.00", "Extra Onion & Lemon + $2.00"].map(extra => 
                     <label style="margin-right: 10px;">
                         <input type="checkbox" name="extras" value="${extra}"> ${extra}
                     </label>
-                `).join("")}
+                ).join("")}
             </div>
             
             <button onclick="closePopup()" style="margin-top: 20px; padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer;">Add to Cart</button>
             <button onclick="closePopup()" style="margin-top: 20px; margin-left: 10px; padding: 10px 20px; background-color: #28a745; color: white; border: none; border-radius: 5px; cursor: pointer;">Close</button>
-        `;
-
-        // Set popup position based on the clicked element
-        popup.style.position = "absolute";
-        popup.style.top = `${rect.top + window.scrollY + offsetY}px`;
-        popup.style.left = `${rect.left + window.scrollX + offsetX}px`;
-
+        ;
         popup.style.display = "block";
         overlay.style.display = "block";
     }
@@ -148,20 +136,19 @@ popup_js = """
         overlay.style.display = "none";
     }
 </script>
-
 """
 
 # HTML for popup modal
 popup_html = """
 <div id="overlay" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: none; z-index: 999;"></div>
 <div id="custom-popup" 
-     style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70%; max-width: 600px; background: white; padding: 20px; border-radius: 10px; box-shadow: 0px 4px 6px rgba(0,0,0,0.1); display: none; z-index: 1000; text-align: center;">
+     style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50%; max-width: 400px; background: white; padding: 20px; border-radius: 10px; box-shadow: 0px 4px 6px rgba(0,0,0,0.1); display: none; z-index: 1000; text-align: center;">
 </div>
 """
 
 # Generate dish cards
 def display_dishes(category):
-    html_content = "<div style='display: flex; flex-direction: column; min-height:50vh; gap: 20px; width: 80%; margin: 0 auto;'>"
+    html_content = "<div style='display: flex; flex-direction: column; gap: 20px; width: 80%; margin: 0 auto;'>"
     for dish in menu_data:
         if category == "ALL" or dish["category"] == category:
             html_content += f"""
@@ -173,8 +160,10 @@ def display_dishes(category):
                 </div>
                 <div style='flex: 1; text-align: center;'>
                     <img src='{dish['image']}' alt='{dish['name']}' style='width: 120px; height: 80px; object-fit: cover; border-radius: 10px;'>
-                    <button onclick="showPopup('{dish['name']}', '{dish['description']}', '{dish['price']}', '{dish['image']}', this)" 
-                    style="margin-top: 10px; padding: 10px 20px; background-color: #28a745; color: white; border: none; border-radius: 5px; cursor: pointer;">Add</button>
+                    <button onclick="showPopup('{dish['name']}', '{dish['description']}', '{dish['price']}', '{dish['image']}')" 
+                            style='margin-top: 10px; padding: 10px 20px; background-color: #28a745; color: white; border: none; border-radius: 5px; cursor: pointer;'>
+                        Add
+                    </button>
                 </div>
             </div>
             """