Update app.py

app.py

@@ -72,7 +72,7 @@ def filter_menu(preference):
             </div>
             <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>
+                <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 2 URL']}', '{item['Description']}', '{item['Price ($)']}')">Add</button>
             </div>
         </div>
         """
@@ -87,7 +87,6 @@ modal_and_cart_js = """
     flex-direction: column;
     gap: 10px; /* Add space between cart items */
 }
-
 .cart-item {
     display: flex;
     flex-wrap: wrap; /* Wrap content to the next line if needed */
@@ -99,19 +98,16 @@ modal_and_cart_js = """
     border-radius: 5px;
     background-color: #f9f9f9;
 }
-
 .cart-item span {
     margin-right: 10px;
     flex: 1; /* Allow text to take available space */
     min-width: 50px; /* Prevent collapsing */
 }
-
 .cart-item .quantity-container {
     display: flex;
     align-items: center;
     gap: 5px;
 }
-
 .cart-item button {
     background-color: red;
     color: white;
@@ -121,13 +117,11 @@ modal_and_cart_js = """
     border-radius: 5px;
     flex-shrink: 0; /* Prevent the button from shrinking */
 }
-
 .cart-total {
     font-size: 1.2em;
     font-weight: bold;
     text-align: center;
 }
-
 button {
     margin-top: 10px;
     background-color: #007bff;
@@ -138,7 +132,6 @@ button {
     width: 100%;
     cursor: pointer;
 }
-
 @media (max-width: 768px) {
     .cart-item {
         flex-direction: column; /* Stack items on mobile */
@@ -149,7 +142,6 @@ button {
         margin-top: 5px; /* Add some space on top */
     }
 }
-
 </style>
 <script>
     let cart = [];
@@ -159,11 +151,11 @@ button {
         "Extra Raitha": 1,
         "Extra Salan": 2,
         "Extra Onion & Lemon": 2,
-        "Plain Naan": 14,
+        "Chilli Chicken": 14,
         "Veg Manchurian": 12
     };
     let finalized = false;
-    function openModal(name, image, description, price) {
+    function openModal(name, image2, description, price) {
         if (finalized) {
             alert("You cannot add more items after finalizing your order.");
             return;
@@ -180,7 +172,7 @@ button {
         }
         modal.style.left = '50%';
         modal.style.transform = 'translate(-50%, -50%)';
-        document.getElementById('modal-image').src = image;
+        document.getElementById('modal-image').src = image2;
         document.getElementById('modal-name').innerText = name;
         document.getElementById('modal-description').innerText = description;
         document.getElementById('modal-price').innerText = price;
@@ -313,7 +305,6 @@ def navigate_to_login():
     return gr.update(visible=True), gr.update(visible=False)
 
 # Gradio App
-
 def app():
     with gr.Blocks() as demo:
         # Login Page
@@ -338,22 +329,24 @@ def app():
 
         # Menu Page
         with gr.Column(visible=False) as menu_section:
-            gr.Markdown("### Menu Page")
+            gr.Markdown("### Menu Page (Accessible Only After Login)")
+
+            # Radio button for selecting preference
             selected_preference = gr.Radio(
-                choices=["All", "Vegetarian", "Halal/Non-Veg", "Guilt-Free"],
+                choices=["All", "Vegetarian", "Halal/Non-Veg", "Guilt Free"],
                 value="All",
                 label="Choose a Preference",
             )
-            menu_output = gr.HTML(value="Menu will load here dynamically")
-            cart_output = gr.HTML(value="Your cart is empty.", elem_id="floating-cart")
+            
 
-            # Ensure final_order_output is only used within cart_section
-        with gr.Column(visible=False) as cart_section:
-             gr.Markdown("### Cart Details")
-             cart_details_output = gr.HTML(value="Your cart details will appear here.")
-             submit_order_button = gr.Button("Submit Order")
+
+            # Output area for menu items
+            menu_output = gr.HTML(value=filter_menu("All"))
+            # Floating cart display
+            cart_output = gr.HTML(value="Your cart is empty.", elem_id="floating-cart")
             final_order_output = gr.HTML(value="", elem_id="final-order")
-             back_to_menu_button = gr.Button("Back to Menu")
+
+           view_cart_button = gr.Button("View Cart")
 
 
 
@@ -395,9 +388,15 @@ def app():
             gr.Row([selected_preference])
             gr.Row(menu_output)
             gr.Row(cart_output)
+            gr.Row(view_cart_button)
             gr.Row(modal_window)
             gr.Row(final_order_output)
             gr.HTML(modal_and_cart_js)
+         with gr.Column(visible=False) as cart_section:
+            gr.Markdown("### Your Cart")
+            gr.Row(cart_output)  # Displays the cart contents
+            gr.Row(final_order_output)  # Displays the final order summary
+            back_to_menu_button = gr.Button("Back to Menu")
 
         # Button Bindings
         # Button Logic
@@ -406,39 +405,26 @@ def app():
             inputs=[login_email, login_password],
             outputs=[login_section, menu_section, login_error],
         )
-
         go_to_signup.click(
             lambda: (gr.update(visible=False), gr.update(visible=True)),
             outputs=[login_section, signup_section],
         )
-
         signup_button.click(
             lambda name, phone, email, password: ("Signup successful! Please login.", gr.update(visible=True), gr.update(visible=False)) if save_user(name, phone, email, password) else ("Email already exists.", gr.update(visible=False), gr.update(visible=True)),
             inputs=[signup_name, signup_phone, signup_email, signup_password],
             outputs=[signup_message, login_section, signup_section],
         )
-
         go_to_login.click(
             lambda: (gr.update(visible=True), gr.update(visible=False)),
             outputs=[login_section, signup_section],
         )
-
-        # Navigation to Cart Page
+         # Logic for View Cart Button
         view_cart_button.click(
-            lambda: (gr.update(visible=False), gr.update(visible=True), update_cart_display()),
-            outputs=[menu_section, cart_section, cart_details_output],
-        )
-
-        # Submit Order Logic
-        submit_order_button.click(
-            lambda: generate_final_order([
-                {"name": "Biryani", "quantity": 2, "total_price": 20.00},
-                {"name": "Veg Manchurian", "quantity": 1, "total_price": 12.00},
-            ]),
-            outputs=[final_order_output],
+            lambda: (gr.update(visible=False), gr.update(visible=True)),
+            outputs=[menu_section, cart_section],
         )
 
-        # Back to Menu Page from Cart Page
+        # Logic for Back to Menu Button
         back_to_menu_button.click(
             lambda: (gr.update(visible=True), gr.update(visible=False)),
             outputs=[menu_section, cart_section],