Update app.py

app.py

@@ -46,9 +46,7 @@ def display_dishes(category):
                 <h3 style='margin: 10px 0; font-size: 18px;'>{dish['name']}</h3>
                 <p style='margin: 5px 0; font-size: 14px; color: #555;'>{dish['description']}</p>
                 <p style='margin: 10px 0; font-size: 16px; font-weight: bold;'>Price: {dish['price']}</p>
-                <button style='padding: 10px 20px; background-color: #28a745; color: white; border: none; 
-                               border-radius: 5px; cursor: pointer;'
-                        onclick="showPopup('{dish['name']}', '{dish['description']}', '{dish['price']}', '{dish['image']}')">
+                <button onclick="addItemToCart('{dish['name']}')" style='padding: 10px 20px; background-color: #28a745; color: white; border: none; border-radius: 5px; cursor: pointer;'>
                     Add to Cart
                 </button>
             </div>
@@ -56,72 +54,37 @@ def display_dishes(category):
     html_content += "</div>"
     return html_content
 
-# JavaScript for handling the popup
+# JavaScript for Popup Handling
 popup_js = """
 <script>
-    async function showPopup(name, description, price, image) {
-        const popup = document.getElementById("custom-popup");
-        const overlay = document.getElementById("overlay");
-        popup.innerHTML = `
-            <button onclick="closePopup()" style="position: absolute; top: 10px; right: 10px; background: none; border: none; font-size: 20px; cursor: pointer;">&times;</button>
-            <img src="${image}" alt="${name}" style="width: 100%; height: 200px; object-fit: cover; border-radius: 10px; margin-bottom: 10px;">
-            <h3>${name}</h3>
-            <p>${description}</p>
-            <p style="font-weight: bold;">Price: ${price}</p>
-            <button id="add-to-cart-button" style="padding: 10px 20px; background-color: #28a745; color: white; border: none; border-radius: 5px; cursor: pointer;">
-                Add to Cart
-            </button>
-        `;
-        popup.style.display = "block";
-        overlay.style.display = "block";
-
-        document.getElementById("add-to-cart-button").onclick = async function () {
-            try {
-                const response = await fetch("/add_to_cart", {
-                    method: "POST",
-                    headers: { "Content-Type": "application/json" },
-                    body: JSON.stringify({ item_name: name })
-                });
-
-                const result = await response.json();
-
-                if (result.status === "success") {
-                    alert(result.message);  // Show success message
-                } else {
-                    alert("Error adding item to cart: " + result.message);
-                }
-            } catch (error) {
-                console.error("Error:", error);
-                alert("Something went wrong while adding the item.");
+    async function addItemToCart(itemName) {
+        try {
+            const response = await fetch("/add_to_cart", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ item_name: itemName })
+            });
+            const result = await response.json();
+
+            if (result.status === "success") {
+                alert(result.message); // Show success message
+            } else {
+                alert("Error: " + result.message); // Show error message
             }
-
-            closePopup();
-        };
-    }
-
-    function closePopup() {
-        document.getElementById("custom-popup").style.display = "none";
-        document.getElementById("overlay").style.display = "none";
+        } catch (error) {
+            console.error("Error:", error);
+            alert("Something went wrong!");
+        }
     }
 </script>
 """
 
-# HTML structure for the popup
-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: 400px; max-width: 90%; background: white; padding: 20px; border-radius: 10px; box-shadow: 0px 4px 6px rgba(0,0,0,0.1); display: none; z-index: 1000; position: relative;">
-</div>
-"""
-
-
 # Main Gradio app
 with gr.Blocks() as demo:
-    gr.HTML(popup_html)  # Add popup container
-    gr.HTML(popup_js)    # Add popup JavaScript
-
     gr.HTML("<h1 style='text-align: center;'>🍛 Welcome to the Biryani Hub 🍛</h1>")
+    gr.HTML(popup_js)  # Add JavaScript for handling interactions
 
+    # Tabs for Menu and Cart
     with gr.Tabs():
         # Menu Tab
         with gr.Tab("Menu"):
@@ -154,4 +117,5 @@ with gr.Blocks() as demo:
                 outputs=cart_display
             )
 
+# Launch Gradio app
 demo.launch()