Update app.py

app.py

@@ -95,11 +95,17 @@ extras = [
 # JavaScript for popup modal
 popup_js = """
 <script>
-    function showPopup(name, description, price, image) {
+    function showPopup(name, description, price, image, element) {
         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 = `
-            <img src="${image}" alt="${name}" style="width: 100%; height: 200px; align-item:center; border-radius: 10px; margin-bottom: 10px;">
+            <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>
             <p style="font-weight: bold;">Price: ${price}</p>
@@ -125,6 +131,12 @@ popup_js = """
             <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";
     }
@@ -136,6 +148,7 @@ popup_js = """
         overlay.style.display = "none";
     }
 </script>
+
 """
 
 # HTML for popup modal
@@ -160,10 +173,8 @@ 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']}')" 
-                            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']}', this)" 
+                    style="margin-top: 10px; padding: 10px 20px; background-color: #28a745; color: white; border: none; border-radius: 5px; cursor: pointer;">Add</button>
                 </div>
             </div>
             """