Update app.py

app.py

@@ -24,16 +24,12 @@ def filter_menu(preference):
     html_content = ""
     for _, item in filtered_data.iterrows():
         html_content += f"""
-        <div style="display: flex; align-items: center; border: 1px solid #ddd; border-radius: 8px; padding: 15px; margin-bottom: 10px; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);">
-            <div style="flex: 1; margin-right: 15px;">
-                <h3 style="margin: 0; font-size: 18px;">{item['Dish Name']}</h3>
-                <p style="margin: 5px 0; font-size: 16px; color: #888;">${item['Price ($)']}</p>
-                <p style="margin: 5px 0; font-size: 14px; color: #555;">{item['Description']}</p>
-            </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 value="{item['Dish Name']}" style="background-color: #28a745; color: white; border: none; padding: 8px 15px; font-size: 14px; border-radius: 5px; cursor: pointer;">View Details</button>
-            </div>
+        <div class="menu-item">
+            <img src="{item['Image URL']}" alt="{item['Dish Name']}">
+            <h3>{item['Dish Name']}</h3>
+            <p>{item['Description']}</p>
+            <p><strong>${item['Price ($)']}</strong></p>
+            <button value="{item['Dish Name']}" onclick="showModal('{item['Dish Name']}')">Add</button>
         </div>
         """
     return html_content
@@ -44,18 +40,18 @@ def render_dish_details(dish_name):
     try:
         dish = menu_data[menu_data["Dish Name"] == dish_name].iloc[0]
         return (
-            dish["Image URL"],  # Image
-            dish_name,          # Dish name
-            dish["Description"],# Description
-            f"${dish['Price ($)']}"  # Price
+            dish["Image URL"],
+            dish_name,
+            dish["Description"],
+            f"${dish['Price ($)']}"
         )
     except IndexError:
         raise ValueError(f"Dish '{dish_name}' not found!")
 
 # Main Gradio app
 def app():
-    with gr.Blocks() as demo:
-        gr.Markdown("## Menu with Suggestions")
+    with gr.Blocks(css="style.css") as demo:
+        gr.Markdown("## Dynamic Menu with Modal Window")
 
         # Menu page
         preference_selector = gr.Radio(
@@ -66,7 +62,7 @@ def app():
         menu_output = gr.HTML(value=filter_menu("All"))
 
         # Modal window (hidden by default)
-        modal_window = gr.Column(visible=False)
+        modal_window = gr.Column(visible=False, elem_classes=["popup"])
         modal_image = gr.Image(label="Dish Image")
         modal_name = gr.Markdown()
         modal_description = gr.Markdown()