Update templates/cart.html (#5)

- Update templates/cart.html (b410bbdfd8674e82a4f5adddb494868bfbc48ba5)


Co-authored-by: lokesh surya sai sirigineedi <[email protected]>

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,8 +52,9 @@
     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 */
@@ -49,12 +66,9 @@
     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 */
@@ -65,8 +79,9 @@
     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 */
@@ -79,7 +94,6 @@
     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 */
@@ -89,7 +103,6 @@
     border: 1px solid #ffcc80;        /* Light orange border around images */
     margin: 0;                         /* Ensure no extra space around the image */
 }
-
         
         .cart-item img:hover {
             transform: scale(1.05);
@@ -100,19 +113,19 @@
         }
         
         .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;
@@ -164,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 {
@@ -257,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;
@@ -284,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;
@@ -308,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 */
@@ -363,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>
@@ -496,13 +528,11 @@
             } 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',
@@ -518,12 +548,10 @@
                     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);
@@ -532,7 +560,6 @@
                         console.error(`Parent cart item element not found for item: ${itemName}`);
                     }
                     location.reload();
-
                     // Recalculate subtotal dynamically
                     
                 } else {
@@ -551,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)}`;
@@ -573,9 +596,6 @@
                 document.getElementById("totalBillText").innerText = `$${subtotal.toFixed(2)}`;
             }
         }
-
-
-
        
         function proceedToOrder() {
             let couponDropdown = document.getElementById('couponDropdown');
@@ -592,12 +612,10 @@
                     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',
@@ -615,9 +633,6 @@
             })
             .catch(err => console.error('Error during checkout:', err));
         }
-
-
-
         function calculateSubtotal() {
             let subtotal = 0;
             document.querySelectorAll('.cart-item').forEach(item => {
@@ -626,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;
@@ -735,11 +749,9 @@
             })
             .catch(err => console.error('Error adding item:', err));
         }
-
-
         
         
     </script>
 
 </body>
-</html>
+</html>