Update templates/order_history.html (#7)

- Update templates/order_history.html (a65bc046551cdd00c2d778b6b118422c1ead468f)


Co-authored-by: Rammohan <Rammohan0504@users.noreply.huggingface.co>

templates/order_history.html

@@ -10,151 +10,202 @@
             background-color: #f8f9fa;
             margin: 0;
             padding: 0;
-            text-align: center;
         }
 
         .container {
-            max-width: 600px;
-            margin: 40px auto;
-            background: white;
+            width: 70%;
+            margin: 30px auto;
             padding: 20px;
-            border-radius: 10px;
-            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+            background-color: #fdf4e3;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+            border-radius: 8px;
         }
 
-        h2 {
-            color: #007bff;
-            margin-bottom: 15px;
+        .order-item {
+            padding: 10px;
+            border: 2px solid #ffe5b4;
+            margin-bottom: 20px;
+          border-radius:5px;
         }
 
-        .back-button {
-            display: block;
-            margin: 10px auto 20px;
-            background-color: #007bff;
-            color: white;
-            padding: 10px 15px;
-            border: none;
-            border-radius: 5px;
+        .order-details {
             font-size: 16px;
-            cursor: pointer;
-            text-decoration: none;
-            width: 50%;
+            font-weight: bold;
+            color: #f57c00;
         }
 
-        .back-button:hover {
-            background-color: #0056b3;
+        .order-details p {
+            margin: 5px 0;
+        }
+
+        .order-date-time {
+            font-size: 14px;
+            color: gray;
         }
 
-        .order-card {
-            background: #fff;
-            padding: 15px;
+        .order-price {
+            font-size: 16px;
+            font-weight: bold;
+            color: #ff7f00;
             margin: 10px 0;
-            border-radius: 8px;
-            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
-            text-align: left;
         }
 
-        .order-card p {
-            margin: 5px 0;
-            font-size: 14px;
+        .order-buttons {
+            margin-top: 10px;
+        }
+
+        .reorder-btn, .rate-order-btn {
+            background-color: #ff7f00;
+            color: white;
+            border: none;
+            padding: 8px 16px;
+            margin-right: 10px;
+            cursor: pointer;
+            border-radius: 4px;
         }
 
-        .order-status {
+        .reorder-btn:hover, .rate-order-btn:hover {
+            background-color: #f55b00;
+        }
+
+        .total-price {
+            font-size: 18px;
             font-weight: bold;
-            padding: 5px 10px;
-            border-radius: 5px;
-            display: inline-block;
+            color: #333;
+            margin-top: 20px;
+        }
+
+        .order-heading {
+            font-size: 20px;
+            font-weight: bold;
+            color: #f57c00;            
+            margin-bottom: 20px;
+            text-align:center;
         }
 
-        .status-pending {
-            background-color: #ffc107;
-            color: #fff;
+        .back-button {
+            display: inline-block;
+            background-color: green;
+            color: white;
+            padding: 10px 20px;
+            text-decoration: none;
+            font-weight: bold;
+            border-radius: 4px;
+            margin-bottom: 20px;
         }
 
-        .status-completed {
-            background-color: #28a745;
-            color: #fff;
+        .back-button:hover {
+            background-color: darkgreen;
         }
 
-        .status-cancelled {
-            background-color: #dc3545;
-            color: #fff;
+        /* Hide additional orders by default */
+        .more-orders {
+            display: none;
         }
 
+        /* Style for the Show More/Show Less button */
         .show-more-btn {
-            background-color: #007bff;
+            background-color: #ff7f00;
             color: white;
-            padding: 8px 15px;
+            padding: 10px 20px;
             border: none;
-            border-radius: 5px;
-            font-size: 14px;
             cursor: pointer;
-            margin-top: 10px;
-            display: block;
-            width: 50%;
-            margin-left: auto;
-            margin-right: auto;
+            border-radius: 4px;
+            margin-top: 20px;
         }
 
         .show-more-btn:hover {
-            background-color: #0056b3;
+            background-color: #f55b00;
         }
 
+      @media (max-width: 768px) {
+    .order-details, .order-price, .order-date-time {
+        font-size: 14px;
+    }
+    .order-heading {
+        font-size: 18px;
+    }
+}
     </style>
 </head>
 <body>
 
-    <div class="container">
-        <h2>Order History</h2>
-
-        <!-- Back to Menu Button -->
-        <a href="{{ url_for('menu') }}" class="back-button">Back to Menu</a>
-
-        {% if orders %}
-            {% for order in orders %}
-            <div class="order-card {% if loop.index > 3 %}hidden{% endif %}">
-                <p><strong>Date:</strong> {{ order['CreatedDate'][:10] }}</p>
-                <p><strong>Order:</strong> {{ order['Order_Details__c'] }}</p>
-                <p><strong>Total Amount:</strong> ${{ order['Total_Amount__c'] }}</p>
-                <p><strong>Discount:</strong> ${{ order['Discount__c'] }}</p>
-                <p><strong>Total Bill:</strong> ${{ order['Total_Bill__c'] }}</p>
-                <p class="order-status 
-                    {% if order['Order_Status__c'] == 'Pending' %}status-pending
-                    {% elif order['Order_Status__c'] == 'Completed' %}status-completed
-                    {% elif order['Order_Status__c'] == 'Cancelled' %}status-cancelled{% endif %}">
-                    {{ order['Order_Status__c'] }}
-                </p>
-            </div>
-            {% endfor %}
-            
-            <!-- Show More / Show Less Button -->
-            {% if orders|length > 3 %}
-                <button class="show-more-btn" onclick="toggleOrders()">Show More</button>
-            {% endif %}
-        {% else %}
-            <p>No past orders found.</p>
-        {% endif %}
+<a href="{{ url_for('menu') }}" class="back-button">Back to Menu</a>
+
+<div class="container">
+    <div class="order-heading">Order History</div>
+    
+    <!-- Loop through the orders (first 3) -->
+    {% for order in orders[:3] %}
+    <div class="order-item">
+        <!-- Order details: item names and quantities -->
+        <div class="order-details">
+            <p>{{ order.formatted_items }}</p>
+        </div>
+
+        <!-- Order date and time -->
+        <div class="order-date-time">
+          <p>{{ order.formatted_date }}</p>        
+        </div>
+
+        <!-- Total price -->
+        <div class="order-price">
+            <p>Total: ₹{{ order.Total_Bill__c }}</p>
+        </div>
     </div>
+    {% endfor %}
+
+    <!-- Loop through the remaining orders (hidden initially) -->
+    <div class="more-orders" id="more-orders">
+        {% for order in orders[3:] %}
+        <div class="order-item">
+            <!-- Order details: item names and quantities -->
+            <div class="order-details">
+                <p>{{ order.formatted_items }}</p>
+            </div>
 
-    <script>
-        function toggleOrders() {
-            let hiddenOrders = document.querySelectorAll(".order-card.hidden");
-            let button = document.querySelector(".show-more-btn");
+            <!-- Order date and time -->
+            <div class="order-date-time">
+              <p>Order Placed:{{ order.formatted_date }}</p>            
+            </div>
 
-            if (hiddenOrders[0].style.display === "none" || hiddenOrders[0].style.display === "") {
-                hiddenOrders.forEach(order => order.style.display = "block");
-                button.textContent = "Show Less";
-            } else {
-                hiddenOrders.forEach(order => order.style.display = "none");
-                button.textContent = "Show More";
-            }
-        }
+            <!-- Total price -->
+            <div class="order-price">
+                <p>Total: ₹{{ order.Total_Bill__c }}</p>
+            </div>
+        </div>
+        {% endfor %}
+    </div>
 
-        // Initially hide extra orders
-        document.addEventListener("DOMContentLoaded", () => {
-            document.querySelectorAll(".order-card.hidden").forEach(order => order.style.display = "none");
-        });
-    </script>
+    <!-- Show More button -->
+    {% if orders|length > 3 %}
+    <button class="show-more-btn" onclick="toggleOrders()">Show More</button>
+    {% endif %}
+
+    <!-- If no orders exist -->
+    {% if not orders %}
+    <div class="no-orders">
+        <p>No orders found.</p>
+    </div>
+    {% endif %}
+</div>
+
+<script>
+  // Function to toggle between Show More and Show Less
+  function toggleOrders() {
+    const moreOrders = document.getElementById("more-orders");
+    const button = document.querySelector(".show-more-btn");
+
+    if (moreOrders.style.display === "none") {
+      moreOrders.style.display = "block";
+      button.innerHTML = "Show Less";  // Change button text
+    } else {
+      moreOrders.style.display = "none";
+      button.innerHTML = "Show More";  // Change button text back
+    }
+  }
+</script>
 
 </body>
 </html>
+