Update app.py

app.py

@@ -93,12 +93,20 @@ extras = [
 ]
 
 # JavaScript for popup modal
+
 # JavaScript for popup modal
 popup_js = """
 <script>
     function showPopup(name, description, price, image) {
         const popup = document.getElementById("custom-popup");
         const overlay = document.getElementById("overlay");
+        const content = document.getElementById("content");
+
+        // Add blur to the background content
+        content.style.filter = "blur(5px)";
+        content.style.pointerEvents = "none"; // Disable interaction with the menu while pop-up is open
+
+        // Set up pop-up content
         popup.innerHTML = `
             <span onclick="closePopup()" style="position: absolute; top: 10px; right: 10px; font-size: 20px; font-weight: bold; cursor: pointer;">&times;</span>
             <img src="${image}" alt="${name}" style="width: 200px; height: auto; border-radius: 10px; margin-bottom: 10px;">
@@ -133,6 +141,13 @@ popup_js = """
     function closePopup() {
         const popup = document.getElementById("custom-popup");
         const overlay = document.getElementById("overlay");
+        const content = document.getElementById("content");
+
+        // Remove blur and enable interaction with the menu
+        content.style.filter = "none";
+        content.style.pointerEvents = "auto";
+
+        // Hide pop-up and overlay
         popup.style.display = "none";
         overlay.style.display = "none";
     }
@@ -149,7 +164,7 @@ popup_html = """
 
 # Generate dish cards
 def display_dishes(category):
-    html_content = "<div style='display: flex; flex-direction: column; gap: 20px; width: 80%; margin: 0 auto;'>"
+    html_content = "<div id='content' 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"""