Update templates/cart.html

templates/cart.html

@@ -11,7 +11,46 @@
       body {
             font-family: Arial, sans-serif;
             background-color:  #fdf4e3; /* Updated background color */
-            color: #333;
+               color: #333;
+      }
+/* Top orange bar */
+    .top-bar {
+      background-color: #FF6F3C;
+      width: 100%;
+      padding: 10px 15px;
+      display: flex;
+      align-items: center;
+      box-sizing: border-box;
+    }
+    .back-link {
+      display: flex;
+      align-items: center;
+      text-decoration: none;
+    }
+    .back-arrow {
+      font-size: 1.8rem;
+      color: #000; /* Dark black */
+      font-weight: bold;
+    }
+    .back-label {
+      margin-left: 10px;
+      color: white;
+      font-weight: bold;
+      font-size: 1rem;
+    }
+    h1 {
+      color: #1C1C1C;
+      font-size: 1.2rem;
+      margin: 30px 0 15px; /* Default margin for larger screens */
+      text-align: center;
+    }
+        /* Title Styling: Dark Black, Centered, and Larger Size */
+        .order-heading {
+            color: #000; /* Dark black color */
+            font-size: 2.5rem; /* Larger font size for desktop */
+            font-weight: bold;
+            text-align: center;
+            margin-top: 30px; /* Spacing from the top */
         }
         .cart-container {
             max-width: 768px;
@@ -24,37 +63,26 @@
         }
        .cart-container2 {
          background-color:#FFFFFF;
-       }
-       /* 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 */
+          display: flex;
+            flex-direction: column;
+            padding: 10px;
+       
+      
         }
-      .cart-item {
+    .cart-item {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     border: 1px solid transparent; /* Set the border to transparent */
-    padding: 30px 15px 15px; 
-    background-color: #fff;/* Padding for the content */
+    padding: 30px 15px 15px;
+    background-color: #fff; /* Padding for the content */
     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 */
+    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 */
@@ -79,6 +107,7 @@
     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 */
@@ -96,9 +125,9 @@
 }
 /* For the image */
 .cart-item img {
-    width: 100%;                      /* Set the width to 70px */
-    height: 100%;                     /* Set the height to 70px */
-    object-fit: contain;                /* Ensure the image covers the container without stretching */
+    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 */
@@ -112,19 +141,19 @@
             font-weight: bold; /* Make the title text bold */
         }
         
-        .checkout-button {
-    background-color: #ff5722;  /* Full Orange color */
+    .checkout-button {
+    background-color:  #A52A2A;  
     color: #ffffff;  /* White text */
     padding: 12px;
     border-radius: 8px;
     border: none;
     width: 100%;
-    font-size: 1.2rem;
+    font-size: 1rem;
     cursor: pointer;
     transition: background-color 0.3s, color 0.3s;
 }
 .checkout-button:hover {
-    background-color: #ff5722;  /* Full Orange color on hover */
+    background-color: #A52A2A;  
     color: #ffffff;  /* White text on hover */
        }
         .add-back-button {
@@ -286,14 +315,14 @@
     margin-bottom: 80px; /* Create space below the content when dropdown is visible */
 }
 .checkout-button {
-    background-color:  #ff5722;
+    background-color:  #A52A2A;
     color:  #ffffff;
     padding: 12px;
     border-radius: 8px;
     border: none;
     height: 44px;
     width: 100%;
-    font-size: 1.2rem;
+    font-size: 1rem;
     cursor: pointer;
     transition: background-color 0.3s, color 0.3s;
     display: flex;
@@ -395,45 +424,54 @@
     color: #FF5722;  /* Orange color */
     font-weight: bold;  /* Make it bold */
 }
-    
+
+
+   <body> 
     </style>
 </head>
-<body>
+<!-- Top Orange Label Bar -->
+  <div class="top-bar">
+    <a href="/menu" class="back-link">
+      <span class="back-arrow">&#10216;</span>
+      <span class="back-label">Back to Menu</span>
+    </a>
+  </div>
+<!-- Order History Title (centered and dark black) -->
+<div class="order-heading">Your Cart</div>
+
+
     <div class="container">
         <div class="cart-container">
             <div style="text-align: right;">
-                <a href="/menu" style="text-decoration: none; font-size: 1.5rem; color: #007bff;">&times;</a>
-            </div>
-
-             <h4 class="mb-4 fw-bold">Your Cart</h4>
+                </div>
+           
 
-            <!-- Cart Items -->
-            <div class="cart-container2">
-                {% for item in cart_items %}
-                    <div class="cart-item">
-                        <div class="image-wrapper">
-                            <img src="{{ item.Image1__c }}" alt="{{ item.Name }}" onerror="this.src='/static/placeholder.jpg';">
-                        </div>
-                        <div class="cart-item-details">
-                            <div class="cart-item-title">
-                                {{ item.Name }}
-                            </div> 
-                            <div class="cart-item-addons">
-                                <small class="text-muted">Add-ons: {{ item.Add_Ons__c }}</small>
-                            </div>
-                            <div class="cart-item-instructions">
-                                <small class="text-muted">Instructions: {{ item.Instructions__c or "None" }}</small>
-                            </div>
-                            <div class="cart-item-quantity mt-2">
-                                <button onclick="updateQuantity('decrease', '{{ item.Name }}', '{{ customer_email }}')">-</button>
-                                <input type="text" value="{{ item.Quantity__c|int }}" readonly data-item-name="{{ item.Name }}">
-                                <button onclick="updateQuantity('increase', '{{ item.Name }}', '{{ customer_email }}')">+</button>
-                            </div>
-                        </div>
-                        <div class="cart-item-actions">
+           <div class="cart-container2">
+    {% for item in cart_items %}
+        <div class="cart-item">
+            <div class="image-wrapper">
+                <img src="{{ item.Image1__c }}" alt="{{ item.Name }}" onerror="this.src='/static/placeholder.jpg';">
+            </div>
+            <div class="cart-item-details">
+                <div class="cart-item-title">
+                    {{ item.Name }}
+                </div> 
+                <div class="cart-item-addons">
+                    <small class="text-muted">Add-ons: {{ item.Add_Ons__c }}</small>
+                </div>
+                <div class="cart-item-instructions">
+                    <small class="text-muted">Instructions: {{ item.Instructions__c or "None" }}</small>
+                </div>
+                <div class="cart-item-quantity mt-2">
+                    <button onclick="updateQuantity('decrease', '{{ item.Name }}', '{{ customer_email }}')">-</button>
+                    <input type="text" value="{{ item.Quantity__c|int }}" readonly data-item-name="{{ item.Name }}">
+                    <button onclick="updateQuantity('increase', '{{ item.Name }}', '{{ customer_email }}')">+</button>
+                </div>
+            </div>
+                <div class="cart-item-actions">
                             <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
 
-                            <!-- Delete Button with Trash Icon and onclick handler -->
+            <!-- Delete Button with Trash Icon and onclick handler -->
                             <button type="button" class="btn btn-light text-dark remove-btn" onclick="removeItemFromCart('{{ item.Name }}')">
                                 <i class="bi bi-trash"></i>
                             </button>
@@ -449,6 +487,7 @@
                 {% endfor %}
             </div>
 
+
             <!-- Suggestions Section -->
             {% if suggestions %}
             <div class="suggestion-section">
@@ -617,7 +656,7 @@
                 selectedCoupon = null;  // Treat it as no coupon selected
             }
             // Send the selected coupon to the backend for processing
-            fetch('/cart/checkout', {
+            fetch('/checkout', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({ selectedCoupon: selectedCoupon })
@@ -755,3 +794,4 @@
 
 </body>
 </html>
+