Update templates/cart.html

templates/cart.html

@@ -10,39 +10,23 @@
       
       body {
             font-family: Arial, sans-serif;
-            background-color:  #fdf4e3; /* Updated background color */
+            background-color: #f3f4f6;
             color: #333;
         }
         .cart-container {
             max-width: 768px;
             margin: 20px auto;
             padding: 15px;
-            background-color: #FFFFFF;
+            background-color: #fdf4e3;
             border-radius: 10px;
-            
             box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
         }
        .cart-container2 {
-         background-color:#FFFFFF;
+         background-color: #fdf4e3;
        }
-       /* Green Back Button styling */
-        .back-button {
-            position: absolute;
-            top: 15px;
-            left: 15px;
-            display: inline-block;
-            background-color: green; /* Green color */
-            color: white;
-            padding: 10px 20px;
-            text-decoration: none;
-            font-weight: bold;
-            border-radius: 4px;
-            z-index: 10; /* Ensure it stays above other content */
-        }
-        .back-button:hover {
-            background-color: darkgreen; /* Darker green color on hover */
-        }
-      .cart-item {
+       
+        
+        .cart-item {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
@@ -52,23 +36,19 @@
     box-sizing: border-box;
     min-height: 100px;
     position: relative; /* Make the cart item a reference for the absolute positioning of the remove icon */
-    border: 1px solid   #fdf4e3;  /* light Orange border around each item */
-    border-radius: 8px;  /* Rounded corners for items */
 }
+
 .remove-btn {
     border: none; /* Remove the border around the button */
     background-color: transparent; /* Transparent background */
     cursor: pointer; /* Change cursor to pointer */
-    font-size: 1.2rem; /* Slightly decrease the size of the trash icon */
+    font-size: 1.5rem; /* Adjust the size of the trash icon */
     margin-bottom: 10px; /* Add space below the delete icon */
     transition: color 0.3s ease; /* Smooth transition for icon color */
     position: relative; /* Make it relative for movement */
-    top: -35px; /* Move the button 10px upwards */
+    top: -40px; /* Move the button 10px upwards */
     left: 50px; /* Move the button 30px to the right */
 }
-.remove-btn i {
-    color: red; /* Make the trash icon red */
-}
 /* Hover effect */
 .remove-btn:hover {
     color: black; /* Change the icon color to black on hover */
@@ -79,53 +59,53 @@
     outline: none; /* Remove the outline */
     background-color: transparent; /* Keep background transparent after clicking */
 }
- /* Green Color for Prices */
 .text-primary {
-    color: #2e7d32; /* Green color for the prices */
+    color: #000 !important; /* Ensure the price is black */
     text-align: right; /* Center-align the price */
-    font-weight: bold; /* Make the price text bold */
     white-space: nowrap; /* Prevent price text from wrapping */
 }
-/* For the image container */
+/* Default for larger screens like desktops */
 .image-wrapper {
     width: 80px;                     /* Width of the image container */
-    height: 80px !important;          /* Set the height of the container to match the image */
-    display: flex;                    /* Flex container for the image */
-    align-items: center;              /* Center image vertically */
-    justify-content: center;          /* Center image horizontally */
-}
-/* For the image */
-.cart-item img {
-    width: 70px;                      /* Set the width to 70px */
-    height: 70px;                     /* Set the height to 70px */
-    object-fit: cover;                /* Ensure the image covers the container without stretching */
-    border-radius: 5px;               /* Optional: rounded corners */
-    border: 1px solid #ffcc80;        /* Light orange border around images */
-    margin: 0;                         /* Ensure no extra space around the image */
+    height: 140px !important;         /* Height of the image container */
+    display: flex;                   /* Flex container for the image */
+    align-items: flex-start;         /* Align the image at the top */
+    justify-content: center;         /* Center image horizontally if it has space */
 }
-        
+
+/* Responsive for mobile devices */
+
+
+        .cart-item img {
+            width: 100%;                    /* Fill the image container */
+            height: auto !important;                   /* Maintain aspect ratio */
+            object-fit: contain; 
+            border-radius: 8px;            /* Optional: rounded corners */
+            transition: transform 0.3s;/* Ensure the full image is visible */
+           
+        }
         .cart-item img:hover {
             transform: scale(1.05);
         }
         .cart-item-title {
             font-size: 1.1rem;
-            font-weight: bold; /* Make the title text bold */
+            font-weight: 400;
         }
         
         .checkout-button {
-    background-color: #ff5722;  /* Full Orange color */
-    color: #ffffff;  /* White text */
-    padding: 12px;
-    border-radius: 8px;
-    border: none;
-    width: 100%;
-    font-size: 1.2rem;
-    cursor: pointer;
-    transition: background-color 0.3s, color 0.3s;
-}
-.checkout-button:hover {
-    background-color: #ff5722;  /* Full Orange color on hover */
-    color: #ffffff;  /* White text on hover */
+           background-color: #0FAA39; /* Green background */
+           color: #fff; /* White text */
+           padding: 12px;
+           border-radius: 8px;
+           border: none;
+           width: 100%;
+           font-size: 1.2rem;
+           cursor: pointer;
+           transition: background-color 0.3s, color 0.3s;
+       }
+       .checkout-button:hover {
+           background-color: #0FAA39; /* Keep the background green on hover */
+           color: #fff; /* Keep the text white on hover */
        }
         .add-back-button {
             padding: 6px 20px;
@@ -177,16 +157,7 @@
     padding: 20px;
     background-color: #fff;
     border-radius: 12px;
-    border: 2px solid  #fdf4e3;  /* light Orange border around the cart summary */
     box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
-}
-    .cart-item-instructions {
-        word-wrap: break-word; /* Ensure that long instructions text wraps to the next line */
-        white-space: normal;   /* Allow text to wrap and prevent overflow */
-        overflow: hidden;      /* Hide any overflow text */
-        max-width: 100%;       /* Ensure instructions text stays within the container's width */
-        word-break: break-word; /* Break the word when necessary */
-    
 }
 /* Coupon Section styling */
 .coupon-selection {
@@ -279,15 +250,15 @@
 .total-bill .amount {
     text-align: right;
     font-size: 1.1rem;
-    color: #2e7d32; /* Green for Total Bill Price */
+    color: #000; /* Changed from green to black */
 }
 /* Margin to add space for dropdown when visible */
 .cart-summary.has-dropdown {
     margin-bottom: 80px; /* Create space below the content when dropdown is visible */
 }
 .checkout-button {
-    background-color:  #ff5722;
-    color:  #ffffff;
+    background-color: #0FAA39;
+    color: #fff;
     padding: 12px;
     border-radius: 8px;
     border: none;
@@ -306,7 +277,6 @@
     padding: 15px;
     background-color: #fff;
     border-radius: 10px;
-    border: 2px solid  #fdf4e3;  /* light Orange border around the complete meal box */
 }
 .suggestion-items-container {
     display: flex;
@@ -331,7 +301,6 @@
     position: relative; /* For positioning the + icon */
     text-align: left; /* Align text to the left */
     overflow: visible; /* Allow the button to overflow outside */
-    border: 2px solid  #fdf4e3;  /* light Orange border around the suggestion items */
 }
 .suggestion-item:hover {
     transform: scale(1.05); /* Slight zoom effect on hover */
@@ -387,15 +356,7 @@
     align-items: flex-start; /* Align the price at the top of the cart item (like the item name) */
     margin-left: auto; /* This will push the price to the right side of the cart item */
 }
-  h4.mb-4.fw-bold {
-    text-align: center;  /* Centers the title */
-    color: #FF5722;  /* Orange color for the title */
-.cart-container h4 {
-    text-align: center;  /* This will center the title horizontally */
-    color: #FF5722;  /* Orange color */
-    font-weight: bold;  /* Make it bold */
-}
-    
+      
     </style>
 </head>
 <body>
@@ -528,11 +489,13 @@
             } else if (action === 'decrease' && quantity > 1) {
                 quantity--;
             }
+
             // Validate quantity
             if (isNaN(quantity) || quantity < 1) {
                 alert("Invalid quantity!");
                 return;
             }
+
             // Send updated quantity to the server
             fetch('/cart/update_quantity', {
                 method: 'POST',
@@ -548,10 +511,12 @@
                     if (itemElement) {
                         let basePriceElement = itemElement.querySelector(".base-price");
                         let addonsPriceElement = itemElement.querySelector(".addons-price");
+
                         // Update the base price
                         if (basePriceElement) {
                             basePriceElement.innerText = data.new_item_price.toFixed(2); // Assuming backend sends this
                         }
+
                         // Update add-ons price if needed (optional)
                         if (addonsPriceElement && data.addons_price !== undefined) {
                             addonsPriceElement.innerText = data.addons_price.toFixed(2);
@@ -560,6 +525,7 @@
                         console.error(`Parent cart item element not found for item: ${itemName}`);
                     }
                     location.reload();
+
                     // Recalculate subtotal dynamically
                     
                 } else {
@@ -578,15 +544,19 @@
                 couponDropdown.style.display = "none";
             }
         }
+
+
         function calculateDiscount() {
             let couponDropdown = document.getElementById('couponDropdown'); // Get coupon dropdown
             let selectedCoupon = couponDropdown.value.trim(); // Get the selected coupon value
             let subtotal = parseFloat("{{ subtotal }}"); // Get the subtotal (from the backend)
+
             // If a valid coupon is selected
             if (selectedCoupon && selectedCoupon.toLowerCase() !== "none") {
                 // Apply 10% discount
                 let discount = subtotal * 0.10;
                 let total = subtotal - discount;
+
                 // Update UI with discount and total bill
                 document.getElementById("discountText").innerText = `$${discount.toFixed(2)}`;
                 document.getElementById("totalBillText").innerText = `$${total.toFixed(2)}`;
@@ -596,43 +566,51 @@
                 document.getElementById("totalBillText").innerText = `$${subtotal.toFixed(2)}`;
             }
         }
+
+
+
        
         function proceedToOrder() {
-            let couponDropdown = document.getElementById('couponDropdown');
-    
-            // Initialize selectedCoupon to an empty string by default
-            let selectedCoupon = "";
-    
-            // Only proceed if couponDropdown exists
-            if (couponDropdown) {
-                // If the value is not null or undefined, strip the value
-                if (couponDropdown.value != null) {
-                    selectedCoupon = couponDropdown.value.trim();  // safely call .trim() if value is not null
-                } else {
-                    selectedCoupon = "";  // Assign empty string if value is null
-                }
-            }
-            // If no coupon is selected or the value is empty, treat it as no coupon
-            if (selectedCoupon === "" || selectedCoupon === "None" || selectedCoupon === "Null") {
-                selectedCoupon = null;  // Treat it as no coupon selected
-            }
-            // Send the selected coupon to the backend for processing
-            fetch('/checkout', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ selectedCoupon: selectedCoupon })
-            })
-            .then(response => response.json())
-            .then(data => {
-                if (data.success) {
-                    alert(data.message); // Success message
-                    window.location.href = '/order';  // Redirect to order page
-                } else {
-                    alert(data.error || data.message);  // Handle error message
-                }
-            })
-            .catch(err => console.error('Error during checkout:', err));
+    let couponDropdown = document.getElementById('couponDropdown');
+
+    // Initialize selectedCoupon to an empty string by default
+    let selectedCoupon = "";
+
+    // Only proceed if couponDropdown exists
+    if (couponDropdown) {
+        // If the value is not null or undefined, strip the value
+        if (couponDropdown.value != null) {
+            selectedCoupon = couponDropdown.value.trim();  // safely call .trim() if value is not null
+        } else {
+            selectedCoupon = "";  // Assign empty string if value is null
+        }
+    }
+
+    // If no coupon is selected or the value is empty, treat it as no coupon
+    if (selectedCoupon === "" || selectedCoupon === "None" || selectedCoupon === "Null") {
+        selectedCoupon = null;  // Treat it as no coupon selected
+    }
+
+    // Send the selected coupon to the backend for processing
+    fetch('/checkout', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ selectedCoupon: selectedCoupon })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            alert(data.message); // Success message
+            window.location.href = '/order';  // Redirect to order page
+        } else {
+            alert(data.error || data.message);  // Handle error message
         }
+    })
+    .catch(err => console.error('Error during checkout:', err));
+}
+
+
+
         function calculateSubtotal() {
             let subtotal = 0;
             document.querySelectorAll('.cart-item').forEach(item => {
@@ -641,6 +619,7 @@
                 const addonsPrice = parseFloat(item.querySelector('.addons-price').innerText.replace('$', '')) || 0; // Add-ons Price
                 subtotal += (basePrice * quantity) + addonsPrice; // Include add-ons price in subtotal
             });
+
             // Update the subtotal in the HTML
             document.querySelector('.cart-summary p').innerText = `Subtotal: $${subtotal.toFixed(2)}`;
             return subtotal;
@@ -749,9 +728,11 @@
             })
             .catch(err => console.error('Error adding item:', err));
         }
+
+
         
         
     </script>
 
 </body>
-</html>
+</html>