Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Order History</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| background-color: #f8f9fa; | |
| margin: 0; | |
| padding: 0; | |
| text-align: center; | |
| } | |
| .container { | |
| max-width: 600px; | |
| margin: 40px auto; | |
| background: white; | |
| padding: 20px; | |
| border-radius: 10px; | |
| box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); | |
| } | |
| h2 { | |
| color: #007bff; | |
| margin-bottom: 15px; | |
| } | |
| .back-button { | |
| display: block; | |
| margin: 10px auto 20px; | |
| background-color: #007bff; | |
| color: white; | |
| padding: 10px 15px; | |
| border: none; | |
| border-radius: 5px; | |
| font-size: 16px; | |
| cursor: pointer; | |
| text-decoration: none; | |
| width: 50%; | |
| } | |
| .back-button:hover { | |
| background-color: #0056b3; | |
| } | |
| .order-card { | |
| background: #fff; | |
| padding: 15px; | |
| 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-status { | |
| font-weight: bold; | |
| padding: 5px 10px; | |
| border-radius: 5px; | |
| display: inline-block; | |
| } | |
| .status-pending { | |
| background-color: #ffc107; | |
| color: #fff; | |
| } | |
| .status-completed { | |
| background-color: #28a745; | |
| color: #fff; | |
| } | |
| .status-cancelled { | |
| background-color: #dc3545; | |
| color: #fff; | |
| } | |
| .show-more-btn { | |
| background-color: #007bff; | |
| color: white; | |
| padding: 8px 15px; | |
| border: none; | |
| border-radius: 5px; | |
| font-size: 14px; | |
| cursor: pointer; | |
| margin-top: 10px; | |
| display: block; | |
| width: 50%; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .show-more-btn:hover { | |
| background-color: #0056b3; | |
| } | |
| </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 %} | |
| </div> | |
| <script> | |
| function toggleOrders() { | |
| let hiddenOrders = document.querySelectorAll(".order-card.hidden"); | |
| let button = document.querySelector(".show-more-btn"); | |
| 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"; | |
| } | |
| } | |
| // Initially hide extra orders | |
| document.addEventListener("DOMContentLoaded", () => { | |
| document.querySelectorAll(".order-card.hidden").forEach(order => order.style.display = "none"); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |