Update app.py

app.py

@@ -1,12 +1,147 @@
 import gradio as gr
-from components.menu import render_menu
 
-def main():
-    with gr.Blocks(css="static/css/styles.css") as app:
-        gr.Markdown("# Welcome to Our Restaurant!")
-        gr.Markdown("### Explore the best Indian and Chinese food!")
-        render_menu(app)
-    app.launch()
+# Global variables for cart and menu data
+cart = []
 
-if __name__ == "__main__":
-    main()
+menu_data = [
+    {"name": "Veg Burger", "category": "VEGAN",
+     "image": "https://huggingface.co/spaces/Rammohan0504/dynamic_menu/resolve/main/images/veg_burger.jpg",
+     "description": "A delicious vegan burger with plant-based patty, lettuce, and tomato.",
+     "price": "$8.99"},
+    {"name": "Chicken Biryani", "category": "HALAL",
+     "image": "https://huggingface.co/spaces/Rammohan0504/dynamic_menu/resolve/main/images/chicken_biryani.jpg",
+     "description": "Spicy chicken biryani with aromatic basmati rice and tender chicken pieces.",
+     "price": "$12.99"},
+    {"name": "Paneer Butter Masala", "category": "VEGAN",
+     "image": "https://huggingface.co/spaces/Rammohan0504/dynamic_menu/resolve/main/images/paneer_butter_masala.jpg",
+     "description": "Paneer cooked in a rich and creamy tomato-based gravy.",
+     "price": "$10.99"}
+]
+
+# Function to add an item to the cart
+def add_to_cart(item_name):
+    cart.append({"item_name": item_name})
+    return {"data": f"{item_name} added to cart!"}
+
+# Function to display the current cart
+def display_cart():
+    if not cart:
+        return "Your cart is empty."
+    cart_content = "<h3>Your Cart:</h3><ul>"
+    for item in cart:
+        cart_content += f"<li>{item['item_name']}</li>"
+    cart_content += "</ul>"
+    return cart_content
+
+# Function to generate dish cards
+def display_dishes(category):
+    html_content = "<div style='display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;'>"
+    for dish in menu_data:
+        if category == "ALL" or dish["category"] == category:
+            html_content += f"""
+            <div style='flex: 1 1 calc(30% - 20px); display: flex; flex-direction: column; align-items: center; 
+                        justify-content: space-between; padding: 20px; border: 1px solid #ddd; border-radius: 10px; 
+                        background-color: #f9f9f9; box-shadow: 0 4px 8px rgba(0,0,0,0.1);'>
+                <img src='{dish['image']}' alt='{dish['name']}' style='width: 100%; height: 150px; object-fit: cover; border-radius: 10px;'>
+                <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']}')">
+                    Add to Cart
+                </button>
+            </div>
+            """
+    html_content += "</div>"
+    return html_content
+
+# Popup JavaScript for handling the modal
+popup_js = """
+<script>
+    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() {
+            const response = await fetch("/run/add_to_cart", {
+                method: "POST",
+                body: JSON.stringify({ name }),
+                headers: { "Content-Type": "application/json" }
+            });
+            const result = await response.json();
+            alert(result.data);  // Show success message
+            closePopup();  // Automatically close popup
+        };
+    }
+
+    function closePopup() {
+        document.getElementById("custom-popup").style.display = "none";
+        document.getElementById("overlay").style.display = "none";
+    }
+</script>
+"""
+
+# Popup HTML structure
+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>")
+
+    with gr.Tabs():
+        # Menu Tab
+        with gr.Tab("Menu"):
+            with gr.Row():
+                btn_all = gr.Button("ALL")
+                btn_vegan = gr.Button("VEGAN")
+                btn_halal = gr.Button("HALAL")
+
+            dish_display = gr.HTML(value=display_dishes("ALL"))
+
+            btn_all.click(
+                lambda: display_dishes("ALL"),
+                outputs=dish_display
+            )
+            btn_vegan.click(
+                lambda: display_dishes("VEGAN"),
+                outputs=dish_display
+            )
+            btn_halal.click(
+                lambda: display_dishes("HALAL"),
+                outputs=dish_display
+            )
+
+        # Cart Tab
+        with gr.Tab("Cart"):
+            cart_display = gr.HTML(value=display_cart())
+            refresh_cart_btn = gr.Button("Refresh Cart")
+            refresh_cart_btn.click(
+                lambda: display_cart(),
+                outputs=cart_display
+            )
+
+# Register the add_to_cart function
+demo.add_to_cart = add_to_cart
+
+demo.launch()