Update templates/order.html

templates/order.html

@@ -9,48 +9,54 @@
     <style>
         body {
             font-family: 'Arial', sans-serif;
-            background-color: #f0f2f5; /* Light background */
+            background-color: #f7f9fc; /* Light blue-gray background */
         }
         .order-container {
             max-width: 768px;
             margin: 40px auto;
             padding: 20px;
-            background-color: #ffffff; /* Card background */
+            background-color: #ffffff; /* White card background */
             border-radius: 15px;
             box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Subtle shadow */
         }
         .order-title {
-            font-size: 1.8rem;
+            font-size: 2rem;
             font-weight: bold;
-            color: #007bff; /* Blue heading color */
+            color: #007bff; /* Bright blue */
             text-align: center;
             margin-bottom: 20px;
         }
         .section-title {
-            font-size: 1.2rem;
+            font-size: 1.5rem;
             font-weight: bold;
-            color: #333333; /* Dark text for titles */
+            color: #333333; /* Dark gray */
             margin-bottom: 10px;
         }
-        .order-item {
-            background-color: #f8f9fa; /* Light gray background for rows */
-            padding: 10px 15px;
+        .order-details {
+            background-color: #f8f9fa; /* Light gray for the order details section */
             border-radius: 8px;
-            margin-bottom: 8px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
+            padding: 15px;
+            font-size: 1rem;
+            line-height: 1.8;
+            color: #555555; /* Medium gray text */
+        }
+        .order-item {
+            margin-bottom: 10px;
+        }
+        .highlight {
+            color: #ff5722; /* Bright orange for key details */
+            font-weight: bold;
         }
         .order-summary {
             margin-top: 20px;
             font-size: 1.2rem;
             font-weight: bold;
             text-align: right;
-            color: #333333; /* Dark text */
+            color: #333333; /* Dark gray */
         }
         .total-price {
-            font-size: 1.5rem;
-            color: #28a745; /* Green for total price */
+            font-size: 1.8rem;
+            color: #28a745; /* Bright green for total price */
         }
     </style>
 </head>
@@ -60,11 +66,15 @@
             <h2 class="order-title">Your Order Summary</h2>
 
             <!-- Items Section -->
-            <div class="section">
+            <div>
                 <h3 class="section-title">Order Details:</h3>
                 {% if order %}
-                <div>
-                    <pre style="white-space: pre-wrap;">{{ order.Order_Details__c }}</pre>
+                <div class="order-details">
+                    {% for line in order.Order_Details__c.split('\n') %}
+                    <div class="order-item">
+                        {{ line | safe }}
+                    </div>
+                    {% endfor %}
                 </div>
                 {% else %}
                 <p>No order details available.</p>