Update app.py

app.py

@@ -341,10 +341,24 @@ def app():
             # Output area for menu items
             menu_output = gr.HTML(value=filter_menu("All"))
 
-            # Button to navigate to Cart Page
-            view_cart_button = gr.Button("View Cart")
+            # 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>
+            ''')
 
-            # Modal window
+            # Modal window for item customization
             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;">
@@ -374,32 +388,100 @@ def app():
                     <!-- Add to Cart Button -->
                     <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 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>
+            ''')
 
-            # Layout
+            selected_preference.change(filter_menu, inputs=[selected_preference], outputs=[menu_output])
             gr.Row([selected_preference])
             gr.Row(menu_output)
             gr.Row(modal_window)
-            gr.HTML(modal_and_cart_js)
+            gr.Row(view_cart_button)
+            gr.Row(cart_modal)
 
-         # Cart & Final Order Page
-        with gr.Column(visible=False) as cart_section:
-            gr.Markdown("### Cart & Final Order Page")
+            # Add JavaScript for modal behavior
+            gr.HTML('''
+                <script>
+                    function openCartModal() {
+                        document.getElementById('cart-modal').style.display = 'block';
+                    }
 
-            # Floating cart display
-            cart_output = gr.HTML(value="Your cart is empty.", elem_id="floating-cart")
+                    function closeCartModal() {
+                        document.getElementById('cart-modal').style.display = 'none';
+                    }
 
-            # Final order display
-            final_order_output = gr.HTML(value="", elem_id="final-order")
+                    // Dynamically update the cart content
+                    function updateCartContent(htmlContent) {
+                        document.getElementById('cart-content').innerHTML = htmlContent;
+                    }
 
-            # 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)
+                    // Update the cart display dynamically
+                    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>
+            ''')
 
+        # Cart & Final Order Page (Not needed as the cart is shown in the modal now)
+        
         # Button Bindings
         # Login Button
         login_button.click(
@@ -423,18 +505,42 @@ def app():
             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],
-        )
 
     return demo
 
 if __name__ == "__main__":
     app().launch()
+
+
+
+            # 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;">
+                        <button onclick="closeModal()" style="background: none; border: none; font-size: 18px; cursor: pointer;">&times;</button>
+                    </div>
+                    <img id="modal-image" style="width: 100%; height: auto; border-radius: 8px; margin-bottom: 20px;" />
+                    <h2 id="modal-name"></h2>
+                    <p id="modal-description"></p>
+                    <p id="modal-price"></p>
+                    <!-- Biryani Extras -->
+                    <label for="biryani-extras">Extras :</label>
+                    <div id="biryani-extras-options" style="display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0;">
+                        <label><input type="checkbox" name="biryani-extra" value="Thums up" /> Thums up + $2.00</label>
+                        <label><input type="checkbox" name="biryani-extra" value="Sprite" /> Sprite + $2.00</label>
+                        <label><input type="checkbox" name="biryani-extra" value="Extra Raitha" /> Extra Raitha  + $1.00</label>
+                        <label><input type="checkbox" name="biryani-extra" value="Extra Salan" /> Extra Salan  + $2.00</label>
+                        <label><input type="checkbox" name="biryani-extra" value="Extra Onion & Lemon" /> Extra Onion & Lemon + $2.00</label>
+                        <label><input type="checkbox" name="biryani-extra" value="Chilli Chicken" /> Chilli Chicken + $14.00</label>
+                        <label><input type="checkbox" name="biryani-extra" value="Veg Manchurian" /> Veg Manchurian + $12.00</label>
+                    </div>
+                    <!-- Quantity and Special Instructions -->
+                    <label for="quantity">Quantity:</label>
+                    <input type="number" id="quantity" value="1" min="1" style="width: 50px;" />
+                    <br><br>
+                    <textarea id="special-instructions" placeholder="Add special instructions here..." style="width: 100%; height: 60px;"></textarea>
+                    <br><br>
+                    <!-- Add to Cart Button -->
+                    <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>
+