Update templates/cart.html

templates/cart.html

@@ -10,23 +10,39 @@
       
       body {
             font-family: Arial, sans-serif;
-            background-color: #f3f4f6;
+            background-color:  #fdf4e3; /* Updated background color */
             color: #333;
         }
         .cart-container {
             max-width: 768px;
             margin: 20px auto;
             padding: 15px;
-            background-color: #fdf4e3;
+            background-color: #FFFFFF;
             border-radius: 10px;
+            
             box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
         }
        .cart-container2 {
-         background-color: #fdf4e3;
+         background-color:#FFFFFF;
        }
-       
-        
-        .cart-item {
+       /* 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 {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
@@ -36,19 +52,23 @@
     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.5rem; /* Adjust the size of the trash icon */
+    font-size: 1.2rem; /* Slightly decrease 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: -40px; /* Move the button 10px upwards */
+    top: -35px; /* 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 */
@@ -59,53 +79,53 @@
     outline: none; /* Remove the outline */
     background-color: transparent; /* Keep background transparent after clicking */
 }
+ /* Green Color for Prices */
 .text-primary {
-    color: #000 !important; /* Ensure the price is black */
+    color: #2e7d32; /* Green color for the prices */
     text-align: right; /* Center-align the price */
+    font-weight: bold; /* Make the price text bold */
     white-space: nowrap; /* Prevent price text from wrapping */
 }
-/* Default for larger screens like desktops */
+/* For the image container */
 .image-wrapper {
     width: 80px;                     /* Width of the image container */
-    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 */
+    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 */
 }
-
-/* 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: 400;
+            font-weight: bold; /* Make the title text bold */
         }
         
         .checkout-button {
-           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 */
+    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 */
        }
         .add-back-button {
             padding: 6px 20px;
@@ -157,7 +177,16 @@
     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 {
@@ -250,15 +279,15 @@
 .total-bill .amount {
     text-align: right;
     font-size: 1.1rem;
-    color: #000; /* Changed from green to black */
+    color: #2e7d32; /* Green for Total Bill Price */
 }
 /* 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: #0FAA39;
-    color: #fff;
+    background-color:  #ff5722;
+    color:  #ffffff;
     padding: 12px;
     border-radius: 8px;
     border: none;
@@ -277,6 +306,7 @@
     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;
@@ -301,6 +331,7 @@
     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 */
@@ -356,7 +387,15 @@
     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>
@@ -480,54 +519,55 @@
 
     <script>
         // Example function to handle the increase/decrease button clicks
-      function updateQuantity(action, itemName, customerEmail) {
-    let quantityInput = document.querySelector(`input[data-item-name="${itemName}"]`);
-    let quantity = parseInt(quantityInput.value);
-
-    // Update quantity based on action
-    if (action === 'increase') {
-        quantity++;
-    } 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', {  // Correct URL (prefixed by '/cart')
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ email: customerEmail, item_name: itemName, quantity: quantity })
-    })
-    .then(response => response.json())
-    .then(data => {
-        if (data.success) {
-            quantityInput.value = quantity;
-            let itemElement = quantityInput.closest(".cart-item"); // Locate the parent cart item
-            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);
-                }
-                // Update add-ons price if needed (optional)
-                if (addonsPriceElement && data.addons_price !== undefined) {
-                    addonsPriceElement.innerText = data.addons_price.toFixed(2);
-                }
+        function updateQuantity(action, itemName, customerEmail) {
+            let quantityInput = document.querySelector(`input[data-item-name="${itemName}"]`);
+            let quantity = parseInt(quantityInput.value);
+            // Update quantity based on action
+            if (action === 'increase') {
+                quantity++;
+            } else if (action === 'decrease' && quantity > 1) {
+                quantity--;
+            }
+            // Validate quantity
+            if (isNaN(quantity) || quantity < 1) {
+                alert("Invalid quantity!");
+                return;
             }
-            location.reload(); // Recalculate subtotal dynamically
-        } else {
-            alert("Error updating quantity: " + data.error);
+            // Send updated quantity to the server
+            fetch('/cart/update_quantity', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ email: customerEmail, item_name: itemName, quantity: quantity })
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    // Update the item price and quantity in the UI
+                    quantityInput.value = quantity;
+                    let itemElement = quantityInput.closest(".cart-item"); // Locate the parent cart item
+                    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);
+                        }
+                    } else {
+                        console.error(`Parent cart item element not found for item: ${itemName}`);
+                    }
+                    location.reload();
+                    // Recalculate subtotal dynamically
+                    
+                } else {
+                    alert("Error updating quantity: " + data.error);
+                }
+            })
+            .catch(err => console.error("Error:", err));
         }
-    })
-    .catch(err => console.error("Error:", err));
-}
-
         function toggleCouponDropdown() {
             let couponDropdown = document.getElementById('couponDropdown');
     
@@ -538,19 +578,15 @@
                 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)}`;
@@ -560,51 +596,43 @@
                 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
+            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));
         }
-    })
-    .catch(err => console.error('Error during checkout:', err));
-}
-
-
-
         function calculateSubtotal() {
             let subtotal = 0;
             document.querySelectorAll('.cart-item').forEach(item => {
@@ -613,7 +641,6 @@
                 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;
@@ -636,22 +663,23 @@
             .catch(err => console.error('Error adding suggestion:', err));
         }
         function removeItemFromCart(itemName) {
-    fetch(`/cart/remove/${encodeURIComponent(itemName)}`, {  // Correct URL (prefixed by '/cart')
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' }
-    })
-    .then(response => response.json())
-    .then(data => {
-        if (data.success) {
-            alert(data.message);
-            location.reload(); // Reload the page to update the cart
-        } else {
-            alert(data.message);
+            fetch(`/cart/remove/${encodeURIComponent(itemName)}`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    alert(data.message);
+                    location.reload(); // Reload the page to update the cart
+                } else {
+                    alert(data.message);
+                }
+            })
+            .catch(err => console.error('Error removing item:', err));
         }
-    })
-    .catch(err => console.error('Error removing item:', err));
-}
-
         function addToCart(itemName, customerEmail) {
             fetch(`/cart/add_item`, {
                 method: "POST",
@@ -721,11 +749,9 @@
             })
             .catch(err => console.error('Error adding item:', err));
         }
-
-
         
         
     </script>
 
 </body>
-</html>
+</html>