Update templates/cart.html

templates/cart.html

@@ -121,9 +121,67 @@
             margin: 0 5px;
         }
         .cart-summary {
-            text-align: right;
-            margin-top: 15px;
-        }
+    text-align: left;
+    margin-top: 15px;
+    padding: 20px;
+    background-color: #fff;
+    border-radius: 12px;
+    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
+}
+
+.bill-details {
+    display: grid;
+    grid-template-columns: 1fr 1fr; /* Two-column layout */
+    grid-gap: 10px;
+    margin-bottom: 10px;
+}
+
+.bill-details .label {
+    font-weight: 600;
+    font-size: 1rem;
+}
+
+.bill-details .amount {
+    text-align: right;
+    font-weight: 600;
+    font-size: 1rem;
+}
+
+.dotted-line {
+    border-bottom: 2px dotted #ccc;
+    margin: 15px 0;
+}
+
+.total-bill {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    font-weight: 600;
+    font-size: 1.2rem;
+    margin-top: 10px;
+}
+
+.total-bill .label {
+    font-size: 1.1rem;
+}
+
+.total-bill .amount {
+    text-align: right;
+    font-size: 1.1rem;
+    color: #0FAA39; /* Green color for total */
+}
+
+.checkout-button {
+    background-color: #0FAA39;
+    color: #fff;
+    padding: 12px;
+    border-radius: 8px;
+    border: none;
+    width: 100%;
+    font-size: 1.2rem;
+    cursor: pointer;
+    transition: background-color 0.3s, color 0.3s;
+}
+
       
         .suggestion-section {
             margin-top: 20px;
@@ -263,9 +321,22 @@
                         </select>
                     </div>
                 {% endif %}
-                <p class="fw-bold">Subtotal: ${{ subtotal }}</p>
-                <p class="fw-bold" id="discountText">Discount: $0</p>
-                <p class="fw-bold" id="totalBillText">Total Bill: ${{ subtotal }}</p>
+                <div class="bill-details">
+                    <div class="label">Cart Total</div>
+                    <div class="amount">${{ subtotal }}</div>
+
+                    <div class="label">Discount</div>
+                    <div class="amount">-${{ discount }}</div>
+
+                    
+                </div>
+
+                <div class="dotted-line"></div>
+
+                <div class="total-bill">
+                    <div class="label">To Pay</div>
+                    <div class="amount">₹{{ total_bill }}</div>
+                </div>
                 <button class="checkout-button" onclick="proceedToOrder()">Proceed to Order</button>
             </div>
         </div>