Update app.py

app.py

@@ -145,18 +145,17 @@ def create_modal_window():
     """
     return modal_html
 
-# JavaScript for Modal Functionality
+# JavaScript for Modal and Cart
 def modal_js():
     modal_script = """
     <script>
         let cart = [];
-
         function openModal(name, image2, description, price) {
             const modal = document.getElementById('modal');
             modal.style.display = 'block';
             modal.style.position = 'fixed';
             modal.style.width = window.innerWidth <= 768 ? '90%' : '30%';
-            modal.style.top = ${event.clientY}px;
+            modal.style.top = `${event.clientY}px`;
             modal.style.left = '50%';
             modal.style.transform = 'translate(-50%, -50%)';
             document.getElementById('modal-image').src = image2;
@@ -166,11 +165,9 @@ def modal_js():
             document.getElementById('quantity').value = 1;
             document.getElementById('special-instructions').value = '';
         }
-
         function closeModal() {
             document.getElementById('modal').style.display = 'none';
         }
-
         function addToCart() {
             const name = document.getElementById('modal-name').innerText;
             const price = parseFloat(document.getElementById('modal-price').innerText.replace('$', ''));
@@ -183,16 +180,20 @@ def modal_js():
             const extrasCost = extras.reduce((total, extra) => total + extra.price, 0);
             const totalCost = (price + extrasCost) * quantity;
             cart.push({ name, price, quantity, extras, instructions, totalCost });
-            updateCartUI();
+            updateCartButton();
             closeModal();
         }
-
-        function updateCartUI() {
-            const cartContainer = document.getElementById('cart-container');
-            cartContainer.innerHTML = "";
+        function updateCartButton() {
+            const cartButton = document.getElementById('cart-button');
+            cartButton.innerText = `View Cart (${cart.length} items)`;
+        }
+        function openCartModal() {
+            const cartModal = document.getElementById('cart-modal');
+            const cartItemsContainer = document.getElementById('cart-items');
+            cartItemsContainer.innerHTML = "";
             cart.forEach((item, index) => {
-                const extrasList = item.extras.map(extra => ${extra.name} (+$${extra.price.toFixed(2)})).join(', ');
-                cartContainer.innerHTML += 
+                const extrasList = item.extras.map(extra => `${extra.name} (+$${extra.price.toFixed(2)})`).join(', ');
+                cartItemsContainer.innerHTML += `
                     <div style="border: 1px solid #ddd; padding: 10px; margin-bottom: 10px; border-radius: 8px;">
                         <h3>${item.name}</h3>
                         <p>Quantity: ${item.quantity}</p>
@@ -201,19 +202,25 @@ def modal_js():
                         <p>Total Cost: $${item.totalCost.toFixed(2)}</p>
                         <button onclick="removeFromCart(${index})" style="color: red;">Remove</button>
                     </div>
-                ;
+                `;
             });
+            cartModal.style.display = 'block';
+        }
+        function closeCartModal() {
+            document.getElementById('cart-modal').style.display = 'none';
         }
-
         function removeFromCart(index) {
             cart.splice(index, 1);
-            updateCartUI();
+            updateCartButton();
+            openCartModal();
+        }
+        function proceedToCheckout() {
+            alert("Proceeding to checkout...");
         }
     </script>
     """
     return modal_script
 
-
 # Gradio App
 with gr.Blocks() as app:
     with gr.Row():
@@ -240,14 +247,12 @@ with gr.Blocks() as app:
     with gr.Row(visible=False) as menu_page:
         with gr.Column():
             preference = gr.Radio(choices=["All", "Veg", "Non-Veg"], label="Filter Preference", value="All")
-
-            # Duplicate View Cart at the top
-            gr.HTML("<div id='cart-container-top' style='margin-top: 10px; padding: 10px; border: 1px solid #ddd; border-radius: 8px; background-color: #f9f9f9;'>Your cart is empty.</div>")
-
             menu_output = gr.HTML()
-            gr.HTML("<div id='cart-container' style='margin-top: 20px; padding: 10px; border: 1px solid #ddd; border-radius: 8px; background-color: #f9f9f9;'>Your cart is empty.</div>")
-            gr.HTML(create_modal_window())  # Add modal window HTML
-            gr.HTML(modal_js())  # Add modal JavaScript
+            <div id='cart-button-top' style='position: fixed; top: 20px; left: 20px; background: #28a745; color: white; padding: 10px 20px; border-radius: 30px; cursor: pointer; z-index: 1000;' onclick='openCartModal()'>View Cart</div>
+            gr.HTML("<div id='cart-button' style='position: fixed; bottom: 20px; right: 20px; background: #28a745; color: white; padding: 10px 20px; border-radius: 30px; cursor: pointer; z-index: 1000;' onclick='openCartModal()'>View Cart</div>")
+            gr.HTML("<div id='cart-modal' style='display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: white; z-index: 1000; overflow-y: auto;'><div style='padding: 20px;'><div style='text-align: right;'><button onclick='closeCartModal()' style='background: none; border: none; font-size: 24px; cursor: pointer;'>&times;</button></div><h1>Your Cart</h1><div id='cart-items'></div><button style='background: #ff5722; color: white; padding: 10px 20px; border-radius: 5px; border: none; cursor: pointer;' onclick='proceedToCheckout()'>Proceed to Checkout</button></div></div>")
+            gr.HTML(create_modal_window())
+            gr.HTML(modal_js())
 
     login_button.click(
         lambda email, password: (gr.update(visible=False), gr.update(visible=True), gr.update(value=filter_menu("All")), "Login successful!")