Update app.py

app.py

@@ -318,16 +318,16 @@ 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 open cart modal
-            view_cart_button = gr.HTML(
-                """
-                <button id="view-cart-button" style="background-color: #007bff; color: white; border: none; padding: 10px 20px; font-size: 14px; border-radius: 5px; cursor: pointer;">View Cart</button>
-                """
-            )
+            # Button to navigate to Cart Page
+            view_cart_button = gr.Button("View Cart")
+            empty_div = gr.HTML('<div style="height: 300px;"></div>')
 
-            # Original Modal window for items
+            # Modal window
             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;">
@@ -358,62 +358,16 @@ 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])
 
-            
-            # 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');
-                        if (show) {
-                            const screenHeight = window.innerHeight;
-                            cartModal.style.display = 'block';
-                            cartModal.style.height = Math.min(screenHeight * 0.7, 500) + 'px'; // Max 70% of screen or 500px
-                            cartModal.style.position = 'fixed';
-                        } else {
-                               cartModal.style.display = 'none';
-                        }
-                    }
-
-                    document.getElementById('view-cart-button').onclick = function() {
-                        toggleCartModal(true);
-                    };
-
-                    document.getElementById('close-cart').onclick = function() {
-                         toggleCartModal(false);
-                    };
-                    </script>
-
-                """
-            )
-
+            # Layout
             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 (Still accessible through navigation but modal preferred)
+         # Cart & Final Order Page
         with gr.Column(visible=False) as cart_section:
             gr.Markdown("### Cart & Final Order Page")
 
@@ -428,30 +382,47 @@ def app():
 
             gr.Row(cart_output)
             gr.Row(final_order_output)
+         # JavaScript to Scroll to Top on Page Change
+        scroll_to_top_js = gr.HTML("""
+            <script>
+                function scrollToTop() {
+                    window.scrollTo({ top: 0, behavior: 'smooth' });
+                }
+            </script>
+        """)
+
+        # Include JavaScript in the App
+        demo.add_component(scroll_to_top_js)
 
         # 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],