Update app.py

app.py

@@ -79,38 +79,6 @@ def filter_menu(preference):
     return html_content
 # Preserving your JavaScript for modal and cart functionality (Your original JavaScript logic)
 modal_and_cart_js = """
-<style>
-  /* Floating Cart Button */
-  #view-cart-btn {
-    position: fixed;
-    bottom: 20px; /* Default to bottom for mobile */
-    right: 20px;
-    background-color: #007bff;
-    color: white;
-    border: none;
-    padding: 15px 20px;
-    border-radius: 50px;
-    font-size: 16px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    cursor: pointer;
-    z-index: 1000;
-  }
-
-  @media (min-width: 768px) {
-    #view-cart-btn {
-      top: 20px; /* Move to top for larger screens (laptop/desktop) */
-      bottom: unset; /* Remove bottom positioning */
-    }
-  }
-</style>
-
-<script>
-  function openCart() {
-    // Trigger the click event to show the cart
-    document.querySelector('[data-testid="view-cart"]').click();
-  }
-</script>
-
 <style>
   .cart-container {
     width: 90%; /* Ensure it fits the screen */
@@ -316,6 +284,23 @@ button {
         alert("Your final order has been submitted!");
     }
 </script>
+<script>
+    // Function to scroll to the top of the page
+    function scrollToTop() {
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+
+    // Add a click listener to the "View Cart" button
+    document.addEventListener("DOMContentLoaded", function() {
+        const viewCartButton = document.querySelector("button:contains('View Cart')");
+        if (viewCartButton) {
+            viewCartButton.addEventListener("click", function() {
+                scrollToTop();
+            });
+        }
+    });
+</script>
+
 """
 # Authentication and Navigation Logic
 def authenticate_user(email, password):
@@ -374,26 +359,7 @@ def app():
             menu_output = gr.HTML(value=filter_menu("All"))
 
             # Button to navigate to Cart Page
-            
-            # Floating "View Cart" button (HTML for dynamic positioning)
-            view_cart_floating_button = gr.HTML(
-                """
-                <button id="view-cart-btn" onclick="openCart()">View Cart</button>
-                <script>
-                    function openCart() {
-                        // Simulate a click event to navigate to the cart
-                        const cartButton = document.querySelector('[data-testid="view-cart-button"]');
-                        if (cartButton) {
-                            cartButton.click();
-                        } else {
-                            alert("Cart navigation button not found!");
-                        }
-                    }
-                </script>
-                """
-            )
-            # Add the "data-testid" attribute to the Gradio Button for proper referencing
-            view_cart_navigation_button = gr.Button("View Cart", elem_id="view-cart-button", visible=False)
+            view_cart_button = gr.Button("View Cart")
 
             # Modal window
             modal_window = gr.HTML("""
@@ -475,9 +441,9 @@ def app():
             outputs=[login_section, signup_section],
         )
         # Navigate to Cart Page
-        view_cart_navigation_button.click(
-             lambda: (gr.update(visible=False), gr.update(visible=True)),
-             outputs=[menu_section, cart_section],
+        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(