Update templates/order.html

templates/order.html

@@ -9,44 +9,57 @@
     <style>
         body {
             font-family: 'Arial', sans-serif;
-            background-color: #f7f9fc; /* Light blue-gray background */
+            background-color: #fdf4e3; /* Light cream background */
+            color: #333333; /* Dark gray text */
+            margin: 0;
+            padding: 0;
         }
+
         .order-container {
             max-width: 768px;
             margin: 40px auto;
             padding: 20px;
             background-color: #ffffff; /* White card background */
             border-radius: 15px;
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Subtle shadow */
+            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); /* Subtle shadow for modern look */
+            border: 1px solid #ffe5b4; /* Light orange border */
         }
+
         .order-title {
             font-size: 2rem;
             font-weight: bold;
-            color: #007bff; /* Bright blue */
+            color: #c04e01; /* Warm orange color for the title */
             text-align: center;
             margin-bottom: 20px;
         }
+
         .section-title {
             font-size: 1.5rem;
             font-weight: bold;
-            color: #333333; /* Dark gray */
+            color: #555555; /* Slightly lighter dark gray */
             margin-bottom: 10px;
         }
+
         .order-details {
-            background-color: #f8f9fa; /* Light gray for the order details section */
-            border-radius: 8px;
+            background-color: #fff5e1; /* Soft beige for the details section */
+            border-radius: 10px;
             padding: 15px;
             font-size: 1rem;
             line-height: 1.8;
-            color: #555555; /* Medium gray text */
+            color: #4a4a4a; /* Medium gray text for readability */
         }
+
         .order-item {
             margin-bottom: 10px;
+            padding: 10px;
+            background-color: #fffcf5; /* Slightly lighter beige for individual items */
+            border-radius: 8px;
+            border: 1px solid #ffe5b4; /* Light orange border for separation */
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
         }
-        .highlight {
-            color: #ff5722; /* Bright orange for key details */
-            font-weight: bold;
-        }
+
         .order-summary {
             margin-top: 20px;
             font-size: 1.2rem;
@@ -54,9 +67,33 @@
             text-align: right;
             color: #333333; /* Dark gray */
         }
+
         .total-price {
             font-size: 1.8rem;
-            color: #28a745; /* Bright green for total price */
+            color: #2b9348; /* Green for the total price */
+        }
+
+        /* Responsive Design */
+        @media (max-width: 768px) {
+            .order-container {
+                padding: 15px;
+            }
+
+            .order-title {
+                font-size: 1.6rem;
+            }
+
+            .section-title {
+                font-size: 1.3rem;
+            }
+
+            .order-details {
+                font-size: 0.9rem;
+            }
+
+            .total-price {
+                font-size: 1.5rem;
+            }
         }
     </style>
 </head>
@@ -72,7 +109,7 @@
                 <div class="order-details">
                     {% for line in order.Order_Details__c.split('\n') %}
                     <div class="order-item">
-                        {{ line | safe }}
+                        <span>{{ line | safe }}</span>
                     </div>
                     {% endfor %}
                 </div>