Update templates/order.html

templates/order.html

@@ -8,111 +8,88 @@
     <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 */
-            margin: 0;
-            padding: 0;
-            display: flex;
-            flex-direction: column;
-            min-height: 100vh;
+            font-family: Arial, sans-serif;
+            background-color: #f8f9fa;
         }
-
         .order-container {
             max-width: 768px;
-            margin: 40px auto;
-            padding: 20px;
-            background-color: #ffffff; /* White card background */
-            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 */
-            flex-grow: 1;
+            margin: 20px auto;
+            padding: 15px;
+            background-color: #fff;
+            border-radius: 10px;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
         }
-
-        .order-title {
-            font-size: 2rem;
-            font-weight: bold;
-            color: #c04e01; /* Warm orange color for the title */
-            text-align: center;
-            margin-bottom: 20px;
+        .cart-item {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            border-bottom: 1px solid #dee2e6;
+            padding: 10px 0;
         }
-
-        .section-title {
-            font-size: 1.5rem;
-            font-weight: bold;
-            color: #555555; /* Slightly lighter dark gray */
-            margin-bottom: 10px;
+        .cart-item img {
+            width: 70px;
+            height: 70px;
+            object-fit: cover;
+            border-radius: 5px;
         }
-
-        .order-details {
-            background-color: #fff5e1; /* Soft beige for the details section */
-            border-radius: 10px;
-            padding: 15px;
+        .cart-item-details {
+            flex: 1;
+            margin-left: 15px;
+        }
+        .cart-item-title {
             font-size: 1rem;
-            line-height: 1.8;
-            color: #4a4a4a; /* Medium gray text for readability */
+            font-weight: bold;
         }
-
-        .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;
+        .cart-item-addons,
+        .cart-item-instructions {
+            font-size: 0.9rem;
+            color: #6c757d;
         }
-
-        .order-summary {
-            margin-top: 20px;
+        .cart-item-actions {
             font-size: 1.2rem;
-            font-weight: bold;
+            color: #007bff;
+        }
+        .order-summary {
             text-align: right;
-            color: #333333; /* Dark gray */
+            margin-top: 15px;
         }
-
         .total-price {
-            font-size: 1.8rem;
-            color: #2b9348; /* Green for the total price */
+            font-size: 1.5rem;
+            font-weight: bold;
+            color: #28a745;
         }
-
         .back-to-menu {
             display: block;
             margin: 30px auto 10px auto;
-            padding: 10px 20px;
-            background-color: #ff5722; /* Bright orange button */
-            color: #ffffff; /* White text */
+            padding: 10px;
+            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 */
+            width: 100%;
+            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;
         }
-
         footer p {
             margin: 0;
             font-size: 1rem;
         }
-
         footer p span {
-            color: #ffcc00; /* Golden highlight for the message */
+            color: #ffcc00;
             font-weight: bold;
         }
     </style>
@@ -120,50 +97,46 @@
 <body>
     <div class="container">
         <div class="order-container">
-            <h2 class="order-title">Your Order Summary</h2>
+            <h4 class="mb-4 text-center">Your Order Summary</h4>
 
-            <!-- Items Section -->
-            <div>
-                <h3 class="section-title">Order Details:</h3>
-                {% if order %}
-                <div class="order-details">
-                    {% for line in order.Order_Details__c.split('\n') %}
-                        {% set item_parts = line.split('|') %}
-                        <div class="order-item">
-                            <img src="{{ item_parts[4].strip().replace('Image:', '') }}" 
-                                 alt="{{ item_parts[0].strip() }}" 
-                                 onerror="this.src='/static/placeholder.jpg';" 
-                                 width="60" height="60">
-                            <div>
-                                <strong>{{ item_parts[0].strip() }}</strong> <!-- Item Name & Quantity -->
-                                <p>{{ item_parts[1].strip().replace('Add-Ons:', '') }}</p> <!-- Add-Ons -->
-                                <p>{{ item_parts[2].strip().replace('Instructions:', '') }}</p> <!-- Instructions -->
-                                <p><strong>{{ item_parts[3].strip().replace('Price:', '') }}</strong></p> <!-- Price -->
+            {% if order %}
+                {% for line in order.Order_Details__c.split('\n') %}
+                    {% set item_parts = line.split('|') %}
+                    <div class="cart-item">
+                        <!-- Item Image -->
+                        <img src="{{ item_parts[4].strip().replace('Image:', '') }}" 
+                             alt="{{ item_parts[0].strip() }}" 
+                             onerror="this.src='/static/placeholder.jpg';">
+                        
+                        <!-- Item Details -->
+                        <div class="cart-item-details">
+                            <div class="cart-item-title">{{ item_parts[0].strip() }}</div> <!-- Item Name & Quantity -->
+                            
+                            <div class="cart-item-addons">
+                                <small class="text-muted">Add-ons: {{ item_parts[1].strip().replace('Add-Ons:', '') }}</small>
                             </div>
-                        </div>
-                    {% endfor %}
 
-                </div>
-                {% else %}
-                <p>No order details available.</p>
-                {% endif %}
-            </div>
+                            <div class="cart-item-instructions">
+                                <small class="text-muted">Instructions: {{ item_parts[2].strip().replace('Instructions:', '') }}</small>
+                            </div>
+                        </div>
+                        
+                        <!-- Price -->
+                        <div class="cart-item-actions">
+                            <strong>${{ item_parts[3].strip().replace('Price:', '') }}</strong>
+                        </div>
+                    </div>
+                {% endfor %}
 
-            <!-- Total Section -->
-            {% if order %}
-            <div class="order-summary mt-4">
-                <span>Total: </span>
-                <span class="total-price">${{ order.Total_Amount__c }}</span>
-                <div class="order-summary mt-4">
-                    <span>Discount: </span>
-                    <span class="total-price">${{ order.Discount__c }}</span> <!-- Display discount -->
-                </div>
+                <!-- Total Section -->
                 <div class="order-summary mt-4">
-                    <span>Total Bill: </span>
-                   <span class="total-price">${{ order.Total_Bill__c }}</span> <!-- Display total bill -->
+                    <p><strong>Total:</strong> <span class="total-price">${{ order.Total_Amount__c }}</span></p>
+                    <p><strong>Discount:</strong> <span class="total-price">${{ order.Discount__c }}</span></p>
+                    <p><strong>Total Bill:</strong> <span class="total-price">${{ order.Total_Bill__c }}</span></p>
                 </div>
 
-            </div>
+            {% else %}
+                <p class="text-center">No order details available.</p>
             {% endif %}
 
             <!-- Back to Menu Button -->