Update app.py

app.py

@@ -24,15 +24,15 @@ def filter_menu(preference):
     html_content = ""
     for _, item in filtered_data.iterrows():
         html_content += f"""
-        <div style=\"display: flex; align-items: center; border: 1px solid #ddd; border-radius: 8px; padding: 15px; margin-bottom: 10px; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);\">
-            <div style=\"flex: 1; margin-right: 15px;\">
-                <h3 style=\"margin: 0; font-size: 18px;\">{item['Dish Name']}</h3>
-                <p style=\"margin: 5px 0; font-size: 16px; color: #888;\">${item['Price ($)']}</p>
-                <p style=\"margin: 5px 0; font-size: 14px; color: #555;\">{item['Description']}</p>
+        <div style="display: flex; align-items: center; border: 1px solid #ddd; border-radius: 8px; padding: 15px; margin-bottom: 10px; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);">
+            <div style="flex: 1; margin-right: 15px;">
+                <h3 style="margin: 0; font-size: 18px;">{item['Dish Name']}</h3>
+                <p style="margin: 5px 0; font-size: 16px; color: #888;">${item['Price ($)']}</p>
+                <p style="margin: 5px 0; font-size: 14px; color: #555;">{item['Description']}</p>
             </div>
-            <div style=\"flex-shrink: 0; text-align: center;\">
-                <img src=\"{item['Image URL']}\" alt=\"{item['Dish Name']}\" style=\"width: 100px; height: 100px; border-radius: 8px; object-fit: cover; margin-bottom: 10px;\">
-                <button style=\"background-color: #28a745; color: white; border: none; padding: 8px 15px; font-size: 14px; border-radius: 5px; cursor: pointer;\" onclick=\"openModal('{item['Dish Name']}', '{item['Image URL']}', '{item['Description']}', '{item['Price ($)']}')\">Add</button>
+            <div style="flex-shrink: 0; text-align: center;">
+                <img src="{item['Image URL']}" alt="{item['Dish Name']}" style="width: 100px; height: 100px; border-radius: 8px; object-fit: cover; margin-bottom: 10px;">
+                <button style="background-color: #28a745; color: white; border: none; padding: 8px 15px; font-size: 14px; border-radius: 5px; cursor: pointer;" onclick="openModal('{item['Dish Name']}', '{item['Image URL']}', '{item['Description']}', '{item['Price ($)']}')">Add</button>
             </div>
         </div>
         """
@@ -40,6 +40,43 @@ def filter_menu(preference):
 
 # JavaScript for modal and cart behavior
 modal_and_cart_js = """
+<style>
+  .cart-container {
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    padding: 15px;
+    margin-bottom: 15px;
+    background-color: #f9f9f9;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+  .cart-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid #ddd;
+    padding: 10px 0;
+  }
+  .cart-item:last-child {
+    border-bottom: none;
+  }
+  .cart-item span {
+    font-size: 16px;
+    margin-right: 10px;
+  }
+  .cart-item .quantity-container {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+  }
+  .cart-total {
+    font-size: 18px;
+    font-weight: bold;
+    text-align: right;
+    margin-top: 10px;
+  }
+</style>
 <script>
     let cart = [];
     const extrasPrices = {
@@ -62,10 +99,8 @@ modal_and_cart_js = """
         modal.style.display = 'block';
         modal.style.position = 'fixed';
         if (window.innerWidth <= 768) {
-            // For mobile devices
             modal.style.width = '90%';
         } else {
-            // For laptops or larger screens
             modal.style.width = '30%';
         }
         modal.style.top = '15%';
@@ -75,7 +110,6 @@ modal_and_cart_js = """
         document.getElementById('modal-name').innerText = name;
         document.getElementById('modal-description').innerText = description;
         document.getElementById('modal-price').innerText = price;
-        // Reset extras
         const extrasInputs = document.querySelectorAll('input[name="biryani-extra"]');
         extrasInputs.forEach(input => input.checked = false);
         document.getElementById('quantity').value = 1;
@@ -107,48 +141,39 @@ modal_and_cart_js = """
 
     function updateCartDisplay() {
         let totalBill = 0;
-        let cartHTML = "<h3>Your Cart:</h3><ul style='list-style: none; padding: 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 `<li>
-                            <div style='display: flex; justify-content: space-between; align-items: center;'>
-                                <span>${extra}</span>
-                                <span>Price: $${extrasPrices[extra].toFixed(2)}</span>
-                                <div>
-                                    <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
+                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>
-                        </li>`;
+                            <span>Total: $${extraTotal.toFixed(2)}</span>
+                            <input type='checkbox' id='extra-remove-${index}-${i}' onclick='removeExtra(${index}, ${i})'> Remove
+                        </div>`;
             }).join('');
 
-            cartHTML += `<li style='border-bottom: 1px solid #ddd; margin-bottom: 10px;'>
-                            <div style='display: flex; justify-content: space-between; align-items: center;'>
-                                <span>${item.name}</span>
-                                <span>Item Price: $${item.price.toFixed(2)}</span>
-                                <div>
-                                    <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
+            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>
-                            <div style='margin-left: 20px;'>
-                                <h4>Extras:</h4>
-                                <ul style='list-style: none; padding: 0;'>${extras}</ul>
-                            </div>
-                            <div style='margin-left: 20px;'>
-                                <strong>Instructions:</strong> ${item.instructions || "None"}
-                            </div>
-                        </li>`;
+                            <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>`;
         });
-        cartHTML += `</ul><p><strong>Total Bill: $${totalBill.toFixed(2)}</strong></p>`;
+        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;
     }
@@ -176,8 +201,8 @@ modal_and_cart_js = """
     }
 
     function removeItem(index) {
-        cart.splice(index, 1); // Remove the item from the cart array
-        updateCartDisplay(); // Re-render the cart display
+        cart.splice(index, 1);
+        updateCartDisplay();
     }
 
     function submitCart() {