Update app.py

app.py

@@ -28,15 +28,15 @@ def filter_menu(preference):
     html_content = ""
     for _, item in filtered_data.iterrows():
         html_content += f"""
-        <div class="menu-card">
-            <div class="menu-card-details">
-                <h3>{item['Dish Name']}</h3>
-                <p>${item['Price ($)']}</p>
-                <p>{item['Description']}</p>
+        <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 class="menu-card-actions">
-                <img src="{item['Image URL']}" alt="{item['Dish Name']}" class="menu-card-image">
-                <button onclick="openModal('{item['Dish Name']}', '{item['Image URL']}', '{item['Description']}', '{item['Price ($)']}')" class="add-button">Add</button>
+            <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;" onclick="openModal('{item['Dish Name']}', '{item['Image URL']}', '{item['Description']}', '{item['Price ($)']}')">Add</button>
             </div>
         </div>
         """
@@ -44,7 +44,7 @@ def filter_menu(preference):
 
 # Gradio app definition
 def app():
-    with gr.Blocks(css="style.css") as demo:
+    with gr.Blocks() as demo:
         gr.Markdown("## Dynamic Menu with Preferences")
 
         # Radio button for selecting preference
@@ -57,37 +57,40 @@ def app():
         # Output area for menu items
         menu_output = gr.HTML(value=filter_menu("All"))
 
-        # Modal window (hidden by default)
+        # Modal window
         modal_window = gr.HTML("""
-        <div id="modal" class="modal">
-            <div class="modal-content">
-                <span class="close-button" onclick="closeModal()">&times;</span>
-                <img id="modal-image" class="modal-image" />
-                <h2 id="modal-name"></h2>
-                <p id="modal-description"></p>
-                <p id="modal-price"></p>
-                <label for="spice-level">Choose Spice Level:</label>
-                <select id="spice-level">
-                    <option value="Mild">Mild</option>
-                    <option value="Medium">Medium</option>
-                    <option value="Spicy">Spicy</option>
-                </select>
-                <label for="quantity">Quantity:</label>
-                <input type="number" id="quantity" value="1" min="1" />
-                <textarea id="special-instructions" placeholder="Add special instructions here..."></textarea>
-                <button class="modal-add-button">Add to Cart</button>
+        <div id="modal" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50%; background: white; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); padding: 20px; z-index: 1000;">
+            <div style="text-align: right;">
+                <button onclick="closeModal()" style="background: none; border: none; font-size: 18px; cursor: pointer;">&times;</button>
             </div>
+            <img id="modal-image" style="width: 100%; height: auto; border-radius: 8px; margin-bottom: 20px;" />
+            <h2 id="modal-name"></h2>
+            <p id="modal-description"></p>
+            <p id="modal-price"></p>
+            <label for="spice-level">Choose Spice Level:</label>
+            <select id="spice-level">
+                <option value="Mild">Mild</option>
+                <option value="Medium">Medium</option>
+                <option value="Spicy">Spicy</option>
+            </select>
+            <br><br>
+            <label for="quantity">Quantity:</label>
+            <input type="number" id="quantity" value="1" min="1" style="width: 50px;" />
+            <br><br>
+            <textarea id="special-instructions" placeholder="Add special instructions here..." style="width: 100%; height: 60px;"></textarea>
+            <br><br>
+            <button style="background-color: #28a745; color: white; border: none; padding: 10px 20px; font-size: 14px; border-radius: 5px; cursor: pointer;">Add to Cart</button>
         </div>
         <script>
             function openModal(name, image, description, price) {
-                document.getElementById("modal").style.display = "block";
-                document.getElementById("modal-image").src = image;
-                document.getElementById("modal-name").innerText = name;
-                document.getElementById("modal-description").innerText = description;
-                document.getElementById("modal-price").innerText = price;
+                document.getElementById('modal').style.display = 'block';
+                document.getElementById('modal-image').src = image;
+                document.getElementById('modal-name').innerText = name;
+                document.getElementById('modal-description').innerText = description;
+                document.getElementById('modal-price').innerText = price;
             }
             function closeModal() {
-                document.getElementById("modal").style.display = "none";
+                document.getElementById('modal').style.display = 'none';
             }
         </script>
         """)
@@ -96,12 +99,9 @@ def app():
         selected_preference.change(filter_menu, inputs=[selected_preference], outputs=[menu_output])
 
         # Layout
-        with gr.Row():
-            selected_preference
-        with gr.Row():
-            menu_output
-        with gr.Row():
-            modal_window
+        gr.Row([selected_preference])
+        gr.Row(menu_output)
+        gr.Row(modal_window)
 
     return demo