Update app.py

app.py

@@ -285,26 +285,6 @@ button {
     }
 </script>
 """
-# Authentication and Navigation Logic
-def authenticate_user(email, password):
-    if check_credentials(email, password):
-        return gr.update(visible=False), gr.update(visible=True), ""
-    else:
-        return gr.update(visible=True), gr.update(visible=False), "Invalid email or password. Try again."
-
-def navigate_to_signup():
-    return gr.update(visible=False), gr.update(visible=True)
-
-def create_account(name, phone, email, password):
-    if save_user(name, phone, email, password):
-        return "Account created successfully! You can now log in.", gr.update(visible=True), gr.update(visible=False)
-    else:
-        return "Email already exists. Try logging in.", gr.update(visible=False), gr.update(visible=True)
-
-def navigate_to_login():
-    return gr.update(visible=True), gr.update(visible=False)
-
-# Gradio App
 def app():
     with gr.Blocks() as demo:
         # Login Page
@@ -337,16 +317,12 @@ def app():
                 value="All",
                 label="Choose a Preference",
             )
-            empty_div = gr.HTML('<div style="height: 20px;"></div>')
-
-            # Output area for menu items
             menu_output = gr.HTML(value=filter_menu("All"))
 
-            # Button to navigate to Cart Page
+            # Button to open cart modal
             view_cart_button = gr.Button("View Cart")
-            empty_div = gr.HTML('<div style="height: 300px;"></div>')
 
-            # Modal window
+            # Original Modal window for items
             modal_window = gr.HTML("""
                 <div id="modal" style="display: none; position: fixed; background: white; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); padding: 20px; z-index: 1000;">
                     <div style="text-align: right;">
@@ -377,16 +353,53 @@ def app():
                     <button style="background-color: #28a745; color: white; border: none; padding: 10px 20px; font-size: 14px; border-radius: 5px; cursor: pointer;" onclick="addToCart()">Add to Cart</button>
                 </div>
                 """)
-            # Update menu dynamically based on preference
-            selected_preference.change(filter_menu, inputs=[selected_preference], outputs=[menu_output])
 
-            # Layout
+            # Modal window for cart
+            modal_cart = gr.HTML(
+                """
+                <div id="cart-modal" style="display: none; position: fixed; bottom: 0; left: 0; width: 100%; background: white; z-index: 1000; border-top: 2px solid #ccc; box-shadow: 0 -2px 5px rgba(0,0,0,0.1); transition: height 0.3s ease;">
+                    <div style="padding: 10px; display: flex; justify-content: space-between; align-items: center;">
+                        <span style="font-size: 18px; font-weight: bold;">Your Cart</span>
+                        <button id="close-cart" onclick="toggleCartModal(false)" style="background: none; border: none; font-size: 20px; cursor: pointer;">&times;</button>
+                    </div>
+                    <div id="cart-details" style="padding: 10px; max-height: 300px; overflow-y: auto;">
+                        <div id="cart-content">Your cart is empty.</div>
+                        <div id="final-order" style="margin-top: 20px;"></div>
+                    </div>
+                </div>
+                """,
+                visible=True,
+            )
+
+            # JavaScript for toggling the modal window
+            modal_js = gr.HTML(
+                """
+                <script>
+                    function toggleCartModal(show) {
+                        const cartModal = document.getElementById('cart-modal');
+                        cartModal.style.display = show ? 'block' : 'none';
+                        cartModal.style.height = show ? '70%' : '50px';
+                    }
+
+                    document.getElementById('view-cart-button').onclick = function() {
+                        toggleCartModal(true);
+                    };
+
+                    document.getElementById('close-cart').onclick = function() {
+                        toggleCartModal(false);
+                    };
+                </script>
+                """
+            )
+
             gr.Row([selected_preference])
             gr.Row(menu_output)
+            gr.Row(view_cart_button)
             gr.Row(modal_window)
-            gr.HTML(modal_and_cart_js)
+            gr.Row(modal_cart)
+            gr.Row(modal_js)
 
-         # Cart & Final Order Page
+        # Cart & Final Order Page (Still accessible through navigation but modal preferred)
         with gr.Column(visible=False) as cart_section:
             gr.Markdown("### Cart & Final Order Page")
 
@@ -403,34 +416,33 @@ def app():
             gr.Row(final_order_output)
 
         # Button Bindings
-        # Login Button
         login_button.click(
             lambda email, password: (gr.update(visible=False), gr.update(visible=True), "") if check_credentials(email, password) else (gr.update(), gr.update(), "Invalid email or password."),
             inputs=[login_email, login_password],
             outputs=[login_section, menu_section, login_error],
         )
-        # Signup Button
+
         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],
         )
-        # Navigate to Signup Page
+
         go_to_signup.click(
             lambda: (gr.update(visible=False), gr.update(visible=True)),
             outputs=[login_section, signup_section],
         )
-        # Navigate Back to Login Page
+
         go_to_login.click(
             lambda: (gr.update(visible=True), gr.update(visible=False)),
             outputs=[login_section, signup_section],
         )
-        # Navigate to Cart Page
+
         view_cart_button.click(
             lambda: (gr.update(visible=False), gr.update(visible=True)),
             outputs=[menu_section, cart_section],
         )
-        # Navigate Back to Menu Page
+
         back_to_menu_button.click(
             lambda: (gr.update(visible=True), gr.update(visible=False)),
             outputs=[menu_section, cart_section],