Update app.py

app.py

@@ -80,12 +80,12 @@ def display_dishes(category):
             <div style='flex: 1; margin-right: 20px;'>
                 <h4 style='font-size: 18px; color: #444; margin: 0;'>{dish['name']}</h4>
                 <p style='font-size: 14px; color: #666; margin: 5px 0;'>{dish['description']}</p>
-                <button onclick="addToCart('{dish['name']}')" 
-                        style="padding: 5px 10px; background-color: #28a745; color: white; border: none; 
-                               border-radius: 5px; cursor: pointer;">Add</button>
             </div>
             <img src='{dish['image']}' alt='{dish['name']}' 
-                 style='width: 120px; height: 80px; object-fit: cover; border-radius: 10px;'>
+                 style='width: 120px; height: 80px; object-fit: cover; border-radius: 10px; margin-right: 10px;'>
+            <button onclick="showPopup('{dish['image']}', '{dish['name']}', '{dish['description']}')" 
+                    style="padding: 5px 10px; background-color: #28a745; color: white; border: none; 
+                           border-radius: 5px; cursor: pointer; align-self: flex-end;">Add</button>
         </div>
         """
     html_content += "</div>"
@@ -104,10 +104,10 @@ with gr.Blocks() as demo:
     # Dish display
     dish_display = gr.HTML(value=display_dishes("ALL"))
 
-    # JavaScript for managing the pop-up and "Add" button
+    # JavaScript for managing the pop-up
     gr.HTML("""
-        <div id="popup" style="display: none; position: fixed; left: 50%; justify-content: center; align-items: center; 
-                              transform: translate(-50%, 100%) background-color: white; padding: 20px; border-radius: 10px; 
+        <div id="popup" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); 
+                              background-color: white; padding: 20px; border-radius: 10px; 
                               box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); z-index: 1000; text-align: center; width: 300px;">
             <img id="popup-image" src="" alt="" style="width: 100%; height: auto; border-radius: 10px;">
             <h2 id="popup-title" style="margin-top: 20px; color: #444;"></h2>
@@ -124,10 +124,8 @@ with gr.Blocks() as demo:
                 document.getElementById('popup-title').textContent = title;
                 document.getElementById('popup-description').textContent = description;
 
-                // Adjust the popup to always appear at the top of the viewport
-                const popup = document.getElementById('popup');
-                popup.style.top = window.pageYOffset + 'px';
-                popup.style.display = 'block';
+                // Display the popup
+                document.getElementById('popup').style.display = 'block';
             }
             function closePopup() {
                 document.getElementById('popup').style.display = 'none';
@@ -152,4 +150,4 @@ with gr.Blocks() as demo:
         outputs=dish_display
     )
 
-demo.launch()
+demo.launch()