Update app.py

app.py

@@ -3,7 +3,7 @@ import gradio as gr
 from simple_salesforce import Salesforce
 
 # Salesforce Connection
-sf = Salesforce(username='diggavalli98@gmail.com', password='Sati@1020', security_token='sSSjyhInIsUohKpG8sHzty2q')
+sf = Salesforce(username='YOUR_USERNAME', password='YOUR_PASSWORD', security_token='YOUR_SECURITY_TOKEN')
 
 # Hash Password
 def hash_password(password):
@@ -59,14 +59,10 @@ def load_menu_from_salesforce():
 
 # Filter Menu Items
 def filter_menu(preference):
-    """
-    Filters the menu items based on the given preference.
-    Normalizes Veg_NonVeg__c values to avoid mismatch issues.
-    """
     menu_data = load_menu_from_salesforce()
     filtered_data = []
     for item in menu_data:
-        veg_nonveg = item.get("Veg_NonVeg__c", "").strip().lower()  # Normalize the field value
+        veg_nonveg = item.get("Veg_NonVeg__c", "").strip().lower()
         if preference == "All":
             filtered_data.append(item)
         elif preference == "Veg" and veg_nonveg in ["veg", "vegetarian"]:
@@ -75,23 +71,20 @@ def filter_menu(preference):
             filtered_data.append(item)
     return filtered_data
 
-# Render Menu as HTML
+# Render Menu as HTML (Row-Wise Layout)
 def render_menu_html(menu_data):
-    """
-    Renders menu items as HTML cards in a grid layout.
-    """
     if not menu_data:
         return '<div style="text-align: center; font-size: 1.2em; color: gray;">No items match your filter.</div>'
-
-    html_content = '<div style="display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; align-items: center; padding: 20px;">'
+    
+    html_content = '<div style="width: 100%; display: flex; flex-direction: column; gap: 20px; padding: 20px;">'
     for item in menu_data:
         html_content += f"""
-        <div class="menu-card">
-            <img src="{item.get('Image1__c', '')}" alt="{item['Name']}" class="menu-image">
-            <div class="menu-content">
-                <h3 class="menu-title">{item['Name']}</h3>
-                <p class="menu-price">${item['Price__c']}</p>
-                <p class="menu-description">{item['Description__c']}</p>
+        <div style="display: flex; align-items: center; gap: 20px; border: 1px solid #ddd; border-radius: 10px; padding: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
+            <img src="{item.get('Image1__c', '')}" alt="{item['Name']}" style="width: 120px; height: 120px; object-fit: cover; border-radius: 8px;">
+            <div style="flex: 1;">
+                <h3 style="margin: 0; font-size: 1.5em;">{item['Name']}</h3>
+                <p style="margin: 5px 0; color: green; font-size: 1.2em;">${item['Price__c']}</p>
+                <p style="margin: 0; font-size: 1em; color: #555;">{item['Description__c']}</p>
             </div>
         </div>
         """
@@ -102,15 +95,10 @@ def render_menu_html(menu_data):
 menu_styles = """
 <style>
     body {
-        margin: 0;
         font-family: Arial, sans-serif;
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-start;
-        align-items: center;
     }
     .header {
-        margin-top: 0;
+        margin: 0;
         padding: 20px;
         font-size: 2.5em;
         font-weight: bold;
@@ -121,66 +109,14 @@ menu_styles = """
         position: sticky;
         top: 0;
     }
-    .filter-container {
-        margin: 20px 0;
-        text-align: center;
-        width: 100%;
-    }
-    .menu-container {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 20px;
-        justify-content: center;
-        align-items: center;
-        padding: 20px;
-        width: 100%;
-    }
-    .menu-card {
-        border: 1px solid #ddd;
-        border-radius: 10px;
-        width: 300px;
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-        overflow: hidden;
-        transition: transform 0.2s, box-shadow 0.2s;
-        cursor: pointer;
-        text-align: center;
-    }
-    .menu-card:hover {
-        transform: scale(1.05);
-        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
-    }
-    .menu-image {
-        width: 100%;
-        height: 180px;
-        object-fit: cover;
-    }
-    .menu-content {
-        padding: 15px;
-    }
-    .menu-title {
-        font-size: 1.5em;
-        margin: 0;
-    }
-    .menu-price {
-        font-size: 1.2em;
-        color: green;
-        margin: 5px 0;
-    }
-    .menu-description {
-        font-size: 1em;
-        color: #555;
-    }
 </style>
 """
 
 # Gradio App
 with gr.Blocks() as app:
-    gr.HTML(menu_styles)  # Add the CSS
-
-    # Header
+    gr.HTML(menu_styles)
     gr.HTML('<div class="header">Welcome to Biryani Hub</div>')
 
-    # Login Page
     with gr.Row(visible=True) as login_page:
         with gr.Column():
             login_email = gr.Textbox(label="Email")
@@ -189,7 +125,6 @@ with gr.Blocks() as app:
             signup_button = gr.Button("Go to Signup")
             login_output = gr.Textbox(label="Status")
 
-    # Signup Page
     with gr.Row(visible=False) as signup_page:
         with gr.Column():
             signup_name = gr.Textbox(label="Name")
@@ -200,7 +135,6 @@ with gr.Blocks() as app:
             login_redirect = gr.Button("Go to Login")
             signup_output = gr.Textbox(label="Status")
 
-    # Menu Page
     with gr.Row(visible=False) as menu_page:
         preference = gr.Radio(choices=["All", "Veg", "Non-Veg"], label="Filter Preference", value="All")
         menu_output = gr.HTML()