Update app.py

app.py

@@ -341,25 +341,10 @@ def app():
             # Output area for menu items
             menu_output = gr.HTML(value=filter_menu("All"))
 
-            # Floating "View Cart" Button
-            view_cart_button = gr.HTML('''
-                <div id="view-cart-button" style="
-                    position: fixed;
-                    bottom: 20px;
-                    right: 20px;
-                    z-index: 1000;
-                    background-color: #007bff;
-                    color: white;
-                    border-radius: 50px;
-                    padding: 10px 20px;
-                    font-size: 16px;
-                    cursor: pointer;
-                    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
-                    " onclick="openCartModal()">View Cart</div>
-                ''')
+            # Button to navigate to Cart Page
+            view_cart_button = gr.Button("View Cart")
 
-
-            # Modal window for item customization
+            # 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;">
@@ -390,100 +375,31 @@ 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>
                 """)
-
-            # Modal for Cart Details
-            cart_modal = gr.HTML('''
-                <div id="cart-modal" style="
-                    display: none;
-                    position: fixed;
-                    top: 0;
-                    left: 0;
-                    width: 100%;
-                    height: 100%;
-                    background-color: rgba(0, 0, 0, 0.5);
-                    z-index: 1100;
-                ">
-                    <div style="
-                        position: absolute;
-                        bottom: 0;
-                        left: 0;
-                        width: 100%;
-                        background: white;
-                        border-radius: 20px 20px 0 0;
-                        padding: 20px;
-                        max-height: 70%;
-                        overflow-y: auto;
-                        box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.2);
-                    ">
-                        <button onclick="closeCartModal()" style="
-                            float: right;
-                            background: none;
-                            border: none;
-                            font-size: 20px;
-                            font-weight: bold;
-                            cursor: pointer;
-                        ">&times;</button>
-                        <h3 style="margin-top: 0;">Your Cart</h3>
-                        <div id="cart-content">
-                            <!-- Cart items will be dynamically updated here -->
-                        </div>
-                    </div>
-                </div>
-            ''')
-
-
+            # Update menu dynamically based on preference
             selected_preference.change(filter_menu, inputs=[selected_preference], outputs=[menu_output])
+
+            # Layout
             gr.Row([selected_preference])
             gr.Row(menu_output)
             gr.Row(modal_window)
-            gr.Row(view_cart_button)
-            gr.Row(cart_modal)
+            gr.HTML(modal_and_cart_js)
 
-            # Add JavaScript for modal behavior
-            gr.HTML('''
-                <script>
-                    function openCartModal() {
-                        document.getElementById('cart-modal').style.display = 'block';
-                    }
+         # Cart & Final Order Page
+        with gr.Column(visible=False) as cart_section:
+            gr.Markdown("### Cart & Final Order Page")
 
-                    function closeCartModal() {
-                        document.getElementById('cart-modal').style.display = 'none';
-                    }
+            # Floating cart display
+            cart_output = gr.HTML(value="Your cart is empty.", elem_id="floating-cart")
 
-                    // Dynamically update the cart content
-                    function updateCartContent(htmlContent) {
-                        document.getElementById('cart-content').innerHTML = htmlContent;
-                    }
+            # Final order display
+            final_order_output = gr.HTML(value="", elem_id="final-order")
 
-                    // Ensure existing updateCartDisplay logic works
-                    function updateCartDisplay() {
-                    let totalBill = 0;
-                    let cartHTML = "<div>";
-                    cart.forEach((item, index) => {
-                        totalBill += item.itemTotal;
-                        cartHTML += `<div style="margin-bottom: 10px; border: 1px solid #ccc; border-radius: 5px; padding: 10px;">
-                            <strong>${item.name}</strong> (x${item.quantity}) - $${item.itemTotal.toFixed(2)}
-                            <br>Extras: ${item.extras.join(", ") || "None"}
-                            <br>Instructions: ${item.instructions || "None"}
-                        </div>`;
-                    });
-                    cartHTML += `</div><p><strong>Total Bill: $${totalBill.toFixed(2)}</strong></p>`;
-                    cartHTML += `<button onclick="submitCart()" style="
-                        background-color: #007bff;
-                        color: white;
-                        padding: 10px 20px;
-                        border: none;
-                        border-radius: 5px;
-                        font-size: 16px;
-                        cursor: pointer;
-                        ">Submit</button>`;
-                    updateCartContent(cartHTML);
-                }
-            </script>
-        ''')
+            # Button to navigate back to Menu Page
+            back_to_menu_button = gr.Button("Back to Menu")
+
+            gr.Row(cart_output)
+            gr.Row(final_order_output)
 
-        # Cart & Final Order Page (Not needed as the cart is shown in the modal now)
-        
         # Button Bindings
         # Login Button
         login_button.click(
@@ -507,9 +423,21 @@ def app():
             lambda: (gr.update(visible=True), gr.update(visible=False)),
             outputs=[login_section, signup_section],
         )
+        # Navigate to Cart Page
+        # Navigate to Cart Page
+        view_cart_button.click(
+            lambda: (gr.update(visible=False), gr.update(visible=True)),
+            outputs=[menu_section, cart_section],
+            _js="window.scrollTo({top: 0, behavior: 'smooth'})"  # Add this line for scrolling
+        )
+
+        # Navigate Back to Menu Page
+        back_to_menu_button.click(
+            lambda: (gr.update(visible=True), gr.update(visible=False)),
+            outputs=[menu_section, cart_section],
+        )
 
     return demo
 
 if __name__ == "__main__":
     app().launch()
-