Update app.py

app.py

@@ -36,12 +36,49 @@ def filter_menu(preference):
             </div>
             <div style="flex-shrink: 0; text-align: center;">
                 <img src="{item['Image URL']}" alt="{item['Dish Name']}" style="width: 100px; height: 100px; border-radius: 8px; object-fit: cover; margin-bottom: 10px;">
-                <button style="background-color: #28a745; color: white; border: none; padding: 8px 15px; font-size: 14px; border-radius: 5px; cursor: pointer;">Add</button>
+                <button onclick="showPopup('{item['Dish Name']}')" style="background-color: #28a745; color: white; border: none; padding: 8px 15px; font-size: 14px; border-radius: 5px; cursor: pointer;">Add</button>
             </div>
         </div>
         """
     return html_content
 
+# Function to generate the popup content dynamically
+def generate_popup(item_name):
+    menu_data = load_menu()
+    item = menu_data[menu_data['Dish Name'] == item_name].iloc[0]
+    
+    # Dynamic HTML for the popup
+    popup_content = f"""
+    <div style="background-color: white; padding: 20px; border-radius: 8px; width: 80%; margin: auto; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1000;">
+        <img src="{item['Image URL']}" alt="{item_name}" style="width: 100%; border-radius: 8px; margin-bottom: 20px;">
+        <h2>{item_name}</h2>
+        <p>{item['Description']}</p>
+        <p style="font-size: 18px; color: #333;"><strong>Price:</strong> ${item['Price ($)']}</p>
+        <h3>Choose a Spice Level:</h3>
+        <div style="display: flex; gap: 10px;">
+            <label><input type="radio" name="spice" value="American Mild"> American Mild</label>
+            <label><input type="radio" name="spice" value="American Medium"> American Medium</label>
+            <label><input type="radio" name="spice" value="American Spicy"> American Spicy</label>
+            <label><input type="radio" name="spice" value="Indian Mild"> Indian Mild</label>
+            <label><input type="radio" name="spice" value="Indian Medium"> Indian Medium</label>
+            <label><input type="radio" name="spice" value="Indian Spicy"> Indian Spicy</label>
+        </div>
+        <h3>Biryani Extras:</h3>
+        <div style="display: flex; flex-wrap: wrap; gap: 10px;">
+            <label><input type="checkbox" name="extras" value="Extra Raitha 4oz"> Extra Raitha 4oz ($1)</label>
+            <label><input type="checkbox" name="extras" value="Extra Raitha 8oz"> Extra Raitha 8oz ($2)</label>
+            <label><input type="checkbox" name="extras" value="Extra Salan 4oz"> Extra Salan 4oz ($1)</label>
+            <label><input type="checkbox" name="extras" value="Extra Onion"> Extra Onion ($1)</label>
+        </div>
+        <h3>Special Instructions:</h3>
+        <textarea placeholder="Add any requests here." style="width: 100%; height: 100px;"></textarea>
+        <h3>Quantity:</h3>
+        <input type="number" value="1" min="1" style="width: 50px;">
+        <button style="background-color: purple; color: white; padding: 10px 20px; margin-top: 20px; border: none; border-radius: 5px; cursor: pointer;">Add to Bag</button>
+    </div>
+    """
+    return popup_content
+
 # Gradio app definition
 def app():
     with gr.Blocks(title="Dynamic Menu with Filters") as demo:
@@ -57,12 +94,17 @@ def app():
         # Output area for menu items
         menu_output = gr.HTML(value=filter_menu("All"))
 
+        # Popup area
+        popup_output = gr.HTML()
+
         # Define interactivity
         selected_preference.change(filter_menu, inputs=[selected_preference], outputs=[menu_output])
+        menu_output.change(generate_popup, inputs=[], outputs=[popup_output])
 
         # Layout
         gr.Row([selected_preference])
         gr.Row(menu_output)
+        gr.Row(popup_output)
 
     return demo