Update templates/order.html

templates/order.html

@@ -4,13 +4,12 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Order Summary</title>
-    <!-- Bootstrap CSS -->
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <style>
         body {
             font-family: 'Arial', sans-serif;
-            background-color: #fdf4e3; /* Light cream background */
-            color: #333333; /* Dark gray text */
+            background-color: #fdf4e3;
+            color: #333333;
             margin: 0;
             padding: 0;
             display: flex;
@@ -22,17 +21,17 @@
             max-width: 768px;
             margin: 40px auto;
             padding: 20px;
-            background-color: #ffffff; /* White card background */
+            background-color: #ffffff;
             border-radius: 15px;
-            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); /* Subtle shadow for modern look */
-            border: 1px solid #ffe5b4; /* Light orange border */
+            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
+            border: 1px solid #ffe5b4;
             flex-grow: 1;
         }
 
         .order-title {
             font-size: 2rem;
             font-weight: bold;
-            color: #c04e01; /* Warm orange color for the title */
+            color: #c04e01;
             text-align: center;
             margin-bottom: 20px;
         }
@@ -40,25 +39,25 @@
         .section-title {
             font-size: 1.5rem;
             font-weight: bold;
-            color: #555555; /* Slightly lighter dark gray */
+            color: #555555;
             margin-bottom: 10px;
         }
 
         .order-details {
-            background-color: #fff5e1; /* Soft beige for the details section */
+            background-color: #fff5e1;
             border-radius: 10px;
             padding: 15px;
             font-size: 1rem;
             line-height: 1.8;
-            color: #4a4a4a; /* Medium gray text for readability */
+            color: #4a4a4a;
         }
 
         .order-item {
             margin-bottom: 10px;
             padding: 10px;
-            background-color: #fffcf5; /* Slightly lighter beige for individual items */
+            background-color: #fffcf5;
             border-radius: 8px;
-            border: 1px solid #ffe5b4; /* Light orange border for separation */
+            border: 1px solid #ffe5b4;
             display: flex;
             justify-content: space-between;
             align-items: center;
@@ -69,38 +68,38 @@
             font-size: 1.2rem;
             font-weight: bold;
             text-align: right;
-            color: #333333; /* Dark gray */
+            color: #333333;
         }
 
         .total-price {
             font-size: 1.8rem;
-            color: #2b9348; /* Green for the total price */
+            color: #2b9348;
         }
 
         .back-to-menu {
             display: block;
             margin: 30px auto 10px auto;
             padding: 10px 20px;
-            background-color: #ff5722; /* Bright orange button */
-            color: #ffffff; /* White text */
+            background-color: #ff5722;
+            color: #ffffff;
             border: none;
             border-radius: 25px;
             font-size: 1rem;
             font-weight: bold;
             text-align: center;
             text-decoration: none;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle button shadow */
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
             transition: background-color 0.3s ease;
         }
 
         .back-to-menu:hover {
-            background-color: #e64a19; /* Darker orange on hover */
+            background-color: #e64a19;
             text-decoration: none;
         }
 
         footer {
-            background-color: #333333; /* Dark gray background */
-            color: #ffffff; /* White text */
+            background-color: #333333;
+            color: #ffffff;
             text-align: center;
             padding: 15px 10px;
             margin-top: auto;
@@ -112,7 +111,7 @@
         }
 
         footer p span {
-            color: #ffcc00; /* Golden highlight for the message */
+            color: #ffcc00;
             font-weight: bold;
         }
     </style>
@@ -141,8 +140,8 @@
             <!-- Total Section -->
             {% if order %}
             <div class="order-summary mt-4">
-                <span>Total: </span>
-                <span class="total-price">${{ order.Total_Amount__c }}</span>
+                <span>Total (after discount): </span>
+                <span class="total-price">${{ final_total }}</span>  <!-- Final total with discount -->
             </div>
             {% endif %}