Update app.py

app.py

@@ -73,22 +73,25 @@ def filter_menu(preference):
             filtered_data.append(item)
     return filtered_data
 
-# Render Menu as HTML
+# Render Menu as HTML with Add Button
 def render_menu_html(menu_data):
-    html_content = '<div style="display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;">'
+    html_content = '<div style="display: flex; flex-direction: column; gap: 20px; align-items: center;">'
     for item in menu_data:
         html_content += f"""
-        <div style="border: 1px solid #ddd; border-radius: 10px; padding: 15px; width: 200px; text-align: center; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
-            <img src="{item.get('Image2__c', '')}" alt="{item['Name']}" style="width: 150px; height: 150px; object-fit: cover; border-radius: 10px;">
-            <h3>{item['Name']}</h3>
-            <p>${item['Price__c']}</p>
-            <button style="background-color: green; color: white; border: none; padding: 10px; border-radius: 5px; cursor: pointer;" onclick="showPopup('{item['Name']}', '{item['Price__c']}', '{item['Description__c']}', '{item.get('Image2__c', '')}')">Add</button>
+        <div class=\"menu-card\" style=\"display: flex; flex-direction: row; gap: 20px; border: 1px solid #ddd; border-radius: 10px; padding: 15px; width: 80%; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); align-items: center;\">
+            <img src="{item.get('Image2__c', '')}" alt="{item['Name']}" style=\"width: 150px; height: 150px; object-fit: cover; border-radius: 10px;\">
+            <div style=\"flex-grow: 1;\">
+                <h3 style=\"margin: 0; font-size: 1.5em;\">{item['Name']}</h3>
+                <p style=\"margin: 5px 0; font-size: 1.2em; color: green;\">${item['Price__c']}</p>
+                <p style=\"margin: 5px 0; font-size: 1em; color: #555;\">{item['Description__c']}</p>
+            </div>
+            <button onclick=\"showPopup('{item['Name']}', '{item['Description__c']}', '{item['Price__c']}', '{item.get('Image2__c', '')}')\" style=\"background-color: green; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer;\">Add</button>
         </div>
         """
     html_content += '</div>'
     return html_content
 
-# Add to Cart
+# Add Item to Cart
 def add_to_cart(name, price, quantity, addons, instructions):
     global cart
     item = {
@@ -101,25 +104,25 @@ def add_to_cart(name, price, quantity, addons, instructions):
     cart.append(item)
     return render_cart_html()
 
-# Render Cart
+# Render Cart as HTML
 def render_cart_html():
     global cart
     if not cart:
         return "<p>Your cart is empty.</p>"
-    html = '<div>'
-    for i, item in enumerate(cart):
-        html += f"""
-        <div style="border: 1px solid #ddd; padding: 10px; margin: 10px;">
-            <h4>{item['name']}</h4>
+    html_content = '<div style="display: flex; flex-direction: column; gap: 20px; align-items: center;">'
+    for index, item in enumerate(cart):
+        html_content += f"""
+        <div class=\"cart-item\" style=\"display: flex; flex-direction: column; gap: 10px; border: 1px solid #ddd; border-radius: 10px; padding: 15px; width: 80%; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\">
+            <h3>{item['name']}</h3>
             <p>Price: ${item['price']}</p>
             <p>Quantity: {item['quantity']}</p>
-            <p>Addons: {', '.join(item['addons']) if item['addons'] else 'None'}</p>
+            <p>Add-ons: {', '.join(item['addons']) if item['addons'] else 'None'}</p>
             <p>Instructions: {item['instructions']}</p>
-            <button style="background-color: red; color: white; border: none; padding: 5px 10px; border-radius: 5px; cursor: pointer;" onclick="removeFromCart({i})">Remove</button>
+            <button onclick=\"removeFromCart({index})\" style=\"background-color: red; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer;\">Remove</button>
         </div>
         """
-    html += '</div>'
-    return html
+    html_content += '</div>'
+    return html_content
 
 # Remove Item from Cart
 def remove_from_cart(index):
@@ -128,63 +131,178 @@ def remove_from_cart(index):
         cart.pop(index)
     return render_cart_html()
 
-# Popup Functionality (JavaScript)
+# Add CSS for Styling
+menu_styles = """
+<style>
+    .menu-card:hover {
+        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+    }
+    .popup {
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background-color: white;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+        border-radius: 10px;
+        width: 400px;
+        padding: 20px;
+        display: none;
+        z-index: 1000;
+    }
+    .popup img {
+        width: 100%;
+        border-radius: 10px;
+    }
+    .popup-content {
+        margin-top: 15px;
+    }
+    .popup-close {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        background: none;
+        border: none;
+        font-size: 1.5em;
+        cursor: pointer;
+    }
+    .popup-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.5);
+        display: none;
+        z-index: 999;
+    }
+    .addon-container {
+        margin-top: 15px;
+    }
+    .addon-container label {
+        margin-right: 10px;
+    }
+    .addon-container input {
+        margin-right: 5px;
+    }
+    .quantity-container {
+        margin-top: 15px;
+    }
+    .instruction-container {
+        margin-top: 15px;
+    }
+</style>
+"""
+
+# JavaScript for Popup Functionality
 menu_script = """
 <script>
-function showPopup(name, price, description, image) {
-    const popup = document.getElementById('popup');
-    const overlay = document.getElementById('popup-overlay');
-    document.getElementById('popup-title').innerText = name;
-    document.getElementById('popup-price').innerText = `$${price}`;
-    document.getElementById('popup-description').innerText = description;
-    document.getElementById('popup-image').src = image;
-    popup.style.display = 'block';
-    overlay.style.display = 'block';
-}
-
-function closePopup() {
-    const popup = document.getElementById('popup');
-    const overlay = document.getElementById('popup-overlay');
-    popup.style.display = 'none';
-    overlay.style.display = 'none';
-}
-
-function removeFromCart(index) {
-    GradioAPI.call("remove_from_cart", index).then(function(html) {
-        document.getElementById('cart-content').innerHTML = html;
-    });
-}
+    function showPopup(name, description, price, image) {
+        const popup = document.getElementById('popup');
+        const overlay = document.getElementById('popup-overlay');
+        document.getElementById('popup-title').innerText = name;
+        document.getElementById('popup-description').innerText = description;
+        document.getElementById('popup-price').innerText = `$${price}`;
+        document.getElementById('popup-image').src = image;
+        popup.style.display = 'block';
+        overlay.style.display = 'block';
+    }
+
+    function closePopup() {
+        const popup = document.getElementById('popup');
+        const overlay = document.getElementById('popup-overlay');
+        popup.style.display = 'none';
+        overlay.style.display = 'none';
+    }
+
+    function removeFromCart(index) {
+        GradioAPI.call("remove_from_cart", index).then(function(html) {
+            document.getElementById('cart-content').innerHTML = html;
+        });
+    }
 </script>
 """
 
 # Gradio App
 with gr.Blocks() as app:
-    gr.Markdown("# Welcome to the Dynamic Food Ordering System")
-
-    # Include JavaScript for Popup
-    gr.HTML(menu_script)
+    gr.HTML(menu_styles)  # Add the CSS
+    gr.HTML(menu_script)  # Add the JavaScript
 
     # Popup HTML
     gr.HTML("""
-    <div id='popup-overlay' style='display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1000;' onclick='closePopup()'></div>
-    <div id='popup' style='display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 20px; border-radius: 10px; z-index: 1001; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); width: 400px;'>
-        <button style='float: right; background: none; border: none; font-size: 1.5em; cursor: pointer;' onclick='closePopup()'>&times;</button>
-        <img id='popup-image' src='' alt='Item Image' style='width: 100%; border-radius: 10px;'>
-        <h3 id='popup-title'></h3>
-        <p id='popup-price' style='color: green; font-size: 1.2em;'></p>
-        <p id='popup-description'></p>
-        <label>Quantity: <input type='number' id='popup-quantity' min='1' value='1'></label>
-        <textarea id='popup-instructions' placeholder='Special instructions...' rows='3' style='width: 100%; margin-top: 10px;'></textarea>
-        <button style='background-color: green; color: white; padding: 10px; border: none; border-radius: 5px; margin-top: 10px; cursor: pointer;' onclick='addToCart()'>Add to Cart</button>
+    <div id='popup-overlay' class='popup-overlay' onclick='closePopup()'></div>
+    <div id='popup' class='popup'>
+        <button class='popup-close' onclick='closePopup()'>&times;</button>
+        <img id='popup-image' src='' alt='Item Image'>
+        <div class='popup-content'>
+            <h3 id='popup-title'></h3>
+            <p id='popup-description'></p>
+            <p id='popup-price' style='color: green; font-size: 1.2em;'></p>
+
+            <h4>Add-ons:</h4>
+            <div class='addon-container'>
+                <label><input type='checkbox' value='Thums Up + $2'> Thums Up + $2</label>
+                <label><input type='checkbox' value='Sprite + $2'> Sprite + $2</label>
+                <label><input type='checkbox' value='Extra Raitha + $1'> Extra Raitha + $1</label>
+                <label><input type='checkbox' value='Extra Salan + $2'> Extra Salan + $2</label>
+                <label><input type='checkbox' value='Extra Onion & Lemon + $2'> Extra Onion & Lemon + $2</label>
+                <label><input type='checkbox' value='Chilli Chicken + $14'> Chilli Chicken + $14</label>
+                <label><input type='checkbox' value='Veg Manchurian + $12'> Veg Manchurian + $12</label>
+            </div>
+
+            <div class='quantity-container'>
+                <label>Quantity: <input type='number' id='popup-quantity' min='1' value='1'></label>
+            </div>
+
+            <div class='instruction-container'>
+                <label>Special Instructions:</label>
+                <textarea id='popup-instructions' placeholder='Add your special instructions here...' rows='3' style='width: 100%;'></textarea>
+            </div>
+
+            <button onclick="addToCart()" style='margin-top: 15px; background-color: green; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer;'>Add to Cart</button>
+        </div>
     </div>
     """)
 
     with gr.Row():
-        preference = gr.Radio(choices=["All", "Veg", "Non-Veg"], value="All", label="Menu Filter")
-        menu_display = gr.HTML()
-        preference.change(fn=lambda x: render_menu_html(filter_menu(x)), inputs=preference, outputs=menu_display)
+        gr.HTML("<h1 style='text-align: center;'>Welcome to Biryani Hub</h1>")
 
-    with gr.Row():
-        cart_display = gr.HTML()
+    with gr.Row(visible=True) as login_page:
+        login_email = gr.Textbox(label="Email")
+        login_password = gr.Textbox(label="Password", type="password")
+        login_button = gr.Button("Login")
+        login_status = gr.Textbox(label="Status", interactive=False)
+
+    with gr.Row(visible=False) as signup_page:
+        signup_name = gr.Textbox(label="Name")
+        signup_email = gr.Textbox(label="Email")
+        signup_phone = gr.Textbox(label="Phone")
+        signup_password = gr.Textbox(label="Password", type="password")
+        submit_signup = gr.Button("Signup")
+        signup_status = gr.Textbox(label="Status", interactive=False)
+        to_login_button = gr.Button("Go to Login")
+
+    with gr.Row(visible=False) as menu_page:
+        preference = gr.Radio(choices=["All", "Veg", "Non-Veg"], label="Choose a Preference", value="All")
+        menu_output = gr.HTML()
+        preference.change(lambda p: render_menu_html(filter_menu(p)), inputs=preference, outputs=menu_output)
+
+    with gr.Row(visible=False) as cart_page:
+        cart_content = gr.HTML()
+
+    def handle_login(email, password):
+        status, user = login(email, password)
+        if status == "Login successful!":
+            return gr.update(visible=False), gr.update(visible=True), gr.update(value=""), status
+        else:
+            return gr.update(), gr.update(), gr.update(), status
+
+    def handle_signup(name, email, phone, password):
+        status = signup(name, email, phone, password)
+        return status
+
+    login_button.click(handle_login, [login_email, login_password], [login_page, menu_page, login_status])
+    submit_signup.click(handle_signup, [signup_name, signup_email, signup_phone, signup_password], signup_status)
+    to_login_button.click(lambda: (gr.update(visible=True), gr.update(visible=False)), None, [login_page, signup_page])
 
     app.launch()