Create cart_tab.py

cart_tab.py

@@ -0,0 +1,155 @@
+import gradio as gr
+
+# Initialize cart as a global variable
+cart = []
+
+# Function to add items to the cart
+def add_to_cart(item_name, spice_level, extras):
+    cart.append({
+        "item_name": item_name,
+        "spice_level": spice_level,
+        "extras": extras
+    })
+    return f"{item_name} added to cart!"
+
+# Function to display cart items
+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']} - Spice Level: {item['spice_level']} - Extras: {', '.join(item['extras'])}</li>"
+    cart_content += "</ul>"
+    return cart_content
+
+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"},
+    # Add other menu items here
+]
+
+# JavaScript for popup modal
+popup_js = """
+<script>
+    function showPopup(name, description, price, image) {
+        const popup = document.getElementById("custom-popup");
+        const overlay = document.getElementById("overlay");
+        popup.innerHTML = `
+            <img src="${image}" alt="${name}" style="width: 100%; height: 250px; border-radius: 10px; margin-bottom: 10px;">
+            <h3 style="margin-top: 10px;">${name}</h3>
+            <p>${description}</p>
+            <p style="font-weight: bold;">Price: ${price}</p>
+            <h4 style="margin-top: 20px;">Choose a Spice Level</h4>
+            <select id="spice-level" style="width: 100%; padding: 5px;">
+                <option value="American Mild">American Mild</option>
+                <option value="American Medium">American Medium</option>
+                <option value="American Spicy">American Spicy</option>
+                <option value="Indian Mild">Indian Mild</option>
+                <option value="Indian Medium">Indian Medium</option>
+                <option value="Indian Spicy">Indian Spicy</option>
+                <option value="Indian Very Spicy">Indian Very Spicy</option>
+            </select>
+            <h4 style="margin-top: 20px;">Choose Extras</h4>
+            <div>
+                <label><input type="checkbox" name="extras" value="Extra Raitha 4oz"> Extra Raitha 4oz</label><br>
+                <label><input type="checkbox" name="extras" value="Extra Raitha 8oz"> Extra Raitha 8oz</label><br>
+                <label><input type="checkbox" name="extras" value="Extra Onion"> Extra Onion</label><br>
+                <label><input type="checkbox" name="extras" value="Extra Onion & Lemon"> Extra Onion & Lemon</label><br>
+            </div>
+            <button onclick="addToCart('${name}')" style="margin-top: 20px; padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer;">Add to Cart</button>
+            <button onclick="closePopup()" style="margin-top: 20px; margin-left: 10px; padding: 10px 20px; background-color: #28a745; color: white; border: none; border-radius: 5px; cursor: pointer;">Close</button>
+        `;
+        popup.style.display = "block";
+        overlay.style.display = "block";
+    }
+
+    function closePopup() {
+        const popup = document.getElementById("custom-popup");
+        const overlay = document.getElementById("overlay");
+        popup.style.display = "none";
+        overlay.style.display = "none";
+    }
+
+    function addToCart(name) {
+        const spiceLevel = document.getElementById("spice-level").value;
+        const extras = Array.from(document.querySelectorAll("input[name='extras']:checked")).map(el => el.value);
+        google.colab.kernel.invokeFunction('notebook.add_to_cart', [name, spiceLevel, extras], {});
+        closePopup();
+    }
+</script>
+"""
+
+# HTML for popup modal
+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: 50%; max-width: 400px; background: white; padding: 20px; border-radius: 10px; box-shadow: 0px 4px 6px rgba(0,0,0,0.1); display: none; z-index: 1000; text-align: center;">
+</div>
+"""
+
+# Generate dish cards
+def display_dishes(category):
+    html_content = "<div style='display: flex; flex-direction: column; gap: 20px; width: 80%; margin: 0 auto;'>"
+    for dish in menu_data:
+        if category == "ALL" or dish["category"] == category:
+            html_content += f"""
+            <div style='display: flex; align-items: center; justify-content: space-between; padding: 20px; border: 1px solid #ddd; border-radius: 10px; background-color: #f9f9f9;'>
+                <div style='flex: 3; text-align: left;'>
+                    <h3 style='margin: 0; font-size: 20px;'>{dish['name']}</h3>
+                    <p style='margin: 5px 0; font-size: 14px; color: #555;'>{dish['description']}</p>
+                    <p style='margin: 0; font-size: 16px; font-weight: bold;'>Price: {dish['price']}</p>
+                </div>
+                <div style='flex: 1; text-align: center;'>
+                    <img src='{dish['image']}' alt='{dish['name']}' style='width: 120px; height: 80px; object-fit: cover; border-radius: 10px;'>
+                    <button onclick="showPopup('{dish['name']}', '{dish['description']}', '{dish['price']}', '{dish['image']}')" 
+                            style='margin-top: 10px; padding: 10px 20px; background-color: #28a745; color: white; border: none; border-radius: 5px; cursor: pointer;'>
+                        Add
+                    </button>
+                </div>
+            </div>
+            """
+    html_content += "</div>"
+    return html_content
+
+# Main Gradio App
+with gr.Blocks() as demo:
+    gr.HTML(popup_html)  # Add the popup container and overlay
+    gr.HTML(popup_js)    # Add the JavaScript
+
+    gr.HTML("<h1 style='text-align: center;'>🍛 Biryani Hub Menu 🍛</h1>")
+
+    with gr.Tabs():
+        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: gr.update(value=display_dishes("ALL")),
+                outputs=dish_display
+            )
+            btn_vegan.click(
+                lambda: gr.update(value=display_dishes("VEGAN")),
+                outputs=dish_display
+            )
+            btn_halal.click(
+                lambda: gr.update(value=display_dishes("HALAL")),
+                outputs=dish_display
+            )
+
+        with gr.Tab("Cart"):
+            cart_display = gr.HTML(value=display_cart())
+            gr.Button("Refresh Cart").click(
+                lambda: gr.update(value=display_cart()),
+                outputs=cart_display
+            )
+
+# Register function for JavaScript callback
+demo.add_to_cart = add_to_cart
+
+demo.launch()