Update app.py

app.py

@@ -63,24 +63,24 @@ modal_and_cart_js = """
         modal.style.display = 'block';
         modal.style.position = 'absolute';
 
+        // Get button position and adjust modal location
         const buttonRect = event.target.getBoundingClientRect();
-        modal.style.top = `${window.scrollY + buttonRect.top}px`;
-        modal.style.left = `${window.scrollX + buttonRect.left}px`;
-
-        if (window.innerWidth <= 768) {
-            modal.style.width = '90%';
-            modal.style.left = '50%';
-            modal.style.transform = 'translateX(-50%)';
-        } else {
-            modal.style.width = '30%';
-            modal.style.transform = 'none';
-        }
+        const isSmallScreen = window.innerWidth <= 768;
+
+        modal.style.top = `${window.scrollY + buttonRect.top + (isSmallScreen ? 20 : 0)}px`;
+        modal.style.left = isSmallScreen
+            ? "50%"
+            : `${window.scrollX + buttonRect.left}px`;
+        modal.style.transform = isSmallScreen ? "translateX(-50%)" : "none";
+        modal.style.width = isSmallScreen ? "90%" : "30%";
 
+        // Update modal content
         document.getElementById('modal-image').src = image;
         document.getElementById('modal-name').innerText = name;
         document.getElementById('modal-description').innerText = description;
         document.getElementById('modal-price').innerText = price;
 
+        // Reset extras and quantity
         const extrasInputs = document.querySelectorAll('input[name="biryani-extra"]');
         extrasInputs.forEach(input => input.checked = false);
         document.getElementById('quantity').value = 1;
@@ -91,94 +91,38 @@ modal_and_cart_js = """
         document.getElementById('modal').style.display = 'none';
     }
 
-    // Update the cart display dynamically
+    // Functions for cart management (retained)
+    function addToCart() {
+        const name = document.getElementById('modal-name').innerText;
+        const price = parseFloat(document.getElementById('modal-price').innerText.replace('$', ''));
+        const quantity = parseInt(document.getElementById('quantity').value) || 1;
+        const instructions = document.getElementById('special-instructions').value;
+        const extras = Array.from(document.querySelectorAll('input[name="biryani-extra"]:checked')).map(extra => extra.value);
+        const extrasCost = extras.reduce((sum, extra) => sum + (extrasPrices[extra] || 0), 0);
+        const itemTotal = (price + extrasCost) * quantity;
+        const cartItem = { name, price, quantity, instructions, extras, itemTotal };
+        cart.push(cartItem);
+        alert(`${name} added to cart!`);
+        updateCartDisplay();
+        closeModal();
+    }
+
     function updateCartDisplay() {
         let totalBill = 0;
         let cartHTML = "<div class='cart-container'>";
         cart.forEach((item, index) => {
             totalBill += item.itemTotal;
-            const extras = item.extras.map((extra, i) => {
-                const extraQuantity = item.extrasQuantities ? item.extrasQuantities[i] || 1 : 1;
-                const extraTotal = extrasPrices[extra] * extraQuantity;
-                totalBill += extraTotal;
-                return `<div class='cart-item'>
-                            <span>${extra}</span>
-                            <span>Price: $${extrasPrices[extra].toFixed(2)}</span>
-                            <div class='quantity-container'>
-                                <label for='extra-quantity-${index}-${i}'>Quantity:</label>
-                                <input type='number' id='extra-quantity-${index}-${i}' value='${extraQuantity}' min='1' style='width: 50px;' onchange='updateExtraQuantity(${index}, ${i}, this.value)' />
-                            </div>
-                            <span>Total: $${extraTotal.toFixed(2)}</span>
-                            <input type='checkbox' id='extra-remove-${index}-${i}' onclick='removeExtra(${index}, ${i})'> Remove
-                        </div>`;
-            }).join('');
             cartHTML += `<div class='cart-item'>
                             <span>${item.name}</span>
                             <span>Item Price: $${item.price.toFixed(2)}</span>
-                            <div class='quantity-container'>
-                                <label for='item-quantity-${index}'>Quantity:</label>
-                                <input type='number' id='item-quantity-${index}' value='${item.quantity}' min='1' style='width: 50px;' onchange='updateItemQuantity(${index}, this.value)' />
-                            </div>
-                            <span>Total: $${(item.price * item.quantity).toFixed(2)}</span>
-                            <input type='checkbox' id='item-remove-${index}' onclick='removeItem(${index})'> Remove
-                        </div>
-                        ${extras}
-                        <div class='cart-item'><strong>Instructions:</strong> ${item.instructions || "None"}</div>`;
+                            <span>Quantity: ${item.quantity}</span>
+                            <span>Total: $${item.itemTotal.toFixed(2)}</span>
+                            <div><strong>Instructions:</strong> ${item.instructions || "None"}</div>
+                        </div>`;
         });
         cartHTML += `</div><p class='cart-total'>Total Bill: $${totalBill.toFixed(2)}</p>`;
-        cartHTML += `<button style='margin-top: 10px; background-color: #007bff; color: white; border: none; padding: 10px; border-radius: 5px; width: 100%; cursor: pointer;' onclick='submitCart()'>Submit</button>`;
         document.getElementById('floating-cart').innerHTML = cartHTML;
     }
-
-    // Additional functions for cart management (unchanged from your original code)
-    function updateItemQuantity(index, newQuantity) {
-        const quantity = parseInt(newQuantity) || 1;
-        cart[index].quantity = quantity;
-        cart[index].itemTotal = cart[index].price * quantity;
-        updateCartDisplay();
-    }
-
-    function updateExtraQuantity(cartIndex, extraIndex, newQuantity) {
-        const quantity = parseInt(newQuantity) || 1;
-        cart[cartIndex].extrasQuantities = cart[cartIndex].extrasQuantities || [];
-        cart[cartIndex].extrasQuantities[extraIndex] = quantity;
-        updateCartDisplay();
-    }
-
-    function removeExtra(cartIndex, extraIndex) {
-        cart[cartIndex].extras.splice(extraIndex, 1);
-        if (cart[cartIndex].extrasQuantities) {
-            cart[cartIndex].extrasQuantities.splice(extraIndex, 1);
-        }
-        updateCartDisplay();
-    }
-
-    function removeItem(index) {
-        cart.splice(index, 1);
-        updateCartDisplay();
-    }
-
-    function submitCart() {
-        let finalOrderHTML = "<h3>Final Order:</h3><ul>";
-        let totalBill = 0;
-        cart.forEach(item => {
-            totalBill += item.itemTotal;
-            const extras = item.extras.map((extra, i) => {
-                const extraQuantity = item.extrasQuantities ? item.extrasQuantities[i] || 1 : 1;
-                const extraTotal = extrasPrices[extra] * extraQuantity;
-                totalBill += extraTotal;
-                return `${extra} (x${extraQuantity}) - $${extraTotal.toFixed(2)}`;
-            }).join(', ');
-            finalOrderHTML += `<li>
-                ${item.name} (x${item.quantity}) - $${item.itemTotal.toFixed(2)}
-                <br>Extras: ${extras}
-                <br>Instructions: ${item.instructions || "None"}
-            </li>`;
-        });
-        finalOrderHTML += `</ul><p><strong>Total Bill: $${totalBill.toFixed(2)}</strong></p>`;
-        document.getElementById('final-order').innerHTML = finalOrderHTML;
-        alert("Your final order has been submitted!");
-    }
 </script>
 """
 
@@ -197,7 +141,7 @@ def app():
         cart_output = gr.HTML(value="Your cart is empty.", elem_id="floating-cart")
         final_order_output = gr.HTML(value="", elem_id="final-order")
 
-        # Modal window preserved as requested
+        # Modal window retained as requested
         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;">