Update components/popup_card.py

components/popup_card.py

@@ -1,26 +1,10 @@
-def generate_popup_card(name, model_path):
-    """
-    Generates an HTML popup card dynamically for the selected menu item with proper close functionality.
-    """
-    html_content = f"""
-    <div id="overlay" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); z-index: 9999; display: flex; justify-content: center; align-items: center;">
-        <div style="border: 1px solid #ddd; padding: 20px; border-radius: 10px; background-color: #fff; width: 350px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);">
-            <h2 style="text-align: center; color: #333; margin-bottom: 10px;">{name}</h2>
-            <model-viewer src="{model_path}" alt="3D Model of {name}" camera-controls auto-rotate style="width: 100%; margin-bottom: 10px;"></model-viewer>
-            <label for="instructions" style="display: block; margin-bottom: 5px; font-weight: bold;">Special Instructions:</label>
-            <textarea id="instructions" placeholder="Add any requests here..." style="width: 100%; margin-bottom: 10px; padding: 5px; border: 1px solid #ccc; border-radius: 5px;"></textarea>
-            <label for="quantity" style="display: block; font-weight: bold; margin-bottom: 5px;">Quantity:</label>
-            <input type="number" id="quantity" min="1" max="10" value="1" style="width: 100%; margin-bottom: 10px; padding: 5px; border: 1px solid #ccc; border-radius: 5px;">
-            <div style="text-align: center;">
-                <button style="padding: 10px 20px; background-color: #008cba; color: white; border: none; border-radius: 5px; cursor: pointer;">Add to Cart</button>
-                <button id="closeButton" style="padding: 10px 20px; background-color: #ccc; color: black; border: none; border-radius: 5px; margin-left: 10px; cursor: pointer;">Close</button>
-            </div>
-        </div>
-    </div>
-    <script>
-        document.getElementById('closeButton').onclick = function() {{
-            document.getElementById('overlay').style.display = 'none';
-        }};
-    </script>
-    """
-    return html_content
+import gradio as gr
+
+def show_popup_card(dish_name, image_path, portion_size):
+    with gr.Modal():
+        gr.Markdown(f"### {dish_name}")
+        gr.Image(image_path, elem_id="popup_image")
+        gr.Markdown(f"#### Portion Size: {portion_size}")
+        gr.TextArea(label="Add custom preferences", lines=4, placeholder="E.g., Less Spicy, No Onions")
+        gr.Slider(1, 5, step=1, label="Select Portion Size")
+        gr.Button("Add to Cart")