Hugging Face's logo

Spaces:
Subbu1304
/
subbuok
Sleeping

App Files Community
nagasurendra commited on
Commit
0a0846a
·
verified ·
1 Parent(s): 2f983d7

Update templates/order_history.html

Browse files
Files changed (1) hide show
  1. templates/order_history.html +146 -28
templates/order_history.html CHANGED
@@ -5,38 +5,156 @@
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Order History</title>
7
  <style>
8
- body { font-family: Arial, sans-serif; margin: 20px; }
9
- h2 { text-align: center; }
10
- table { width: 100%; border-collapse: collapse; margin-top: 20px; }
11
- th, td { border: 1px solid black; padding: 8px; text-align: left; }
12
- th { background-color: #f2f2f2; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
13
  </style>
14
  </head>
15
  <body>
16
- <h2>Order History</h2>
17
- {% if orders %}
18
- <table>
19
- <tr>
20
- <th>Date</th>
21
- <th>Order Details</th>
22
- <th>Total Amount</th>
23
- <th>Discount</th>
24
- <th>Total Bill</th>
25
- <th>Status</th>
26
- </tr>
27
  {% for order in orders %}
28
- <tr>
29
- <td>{{ order['CreatedDate'][:10] }}</td>
30
- <td>{{ order['Order_Details__c'] }}</td>
31
- <td>${{ order['Total_Amount__c'] }}</td>
32
- <td>${{ order['Discount__c'] }}</td>
33
- <td>${{ order['Total_Bill__c'] }}</td>
34
- <td>{{ order['Order_Status__c'] }}</td>
35
- </tr>
 
 
 
 
 
36
  {% endfor %}
37
- </table>
38
- {% else %}
39
- <p>No past orders found.</p>
40
- {% endif %}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
41
  </body>
42
  </html>
 
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Order History</title>
7
  <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ background-color: #f8f9fa;
11
+ margin: 0;
12
+ padding: 0;
13
+ text-align: center;
14
+ }
15
+
16
+ .container {
17
+ max-width: 600px;
18
+ margin: 40px auto;
19
+ background: white;
20
+ padding: 20px;
21
+ border-radius: 10px;
22
+ box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
23
+ }
24
+
25
+ h2 {
26
+ color: #007bff;
27
+ margin-bottom: 15px;
28
+ }
29
+
30
+ .back-button {
31
+ display: block;
32
+ margin: 10px auto 20px;
33
+ background-color: #007bff;
34
+ color: white;
35
+ padding: 10px 15px;
36
+ border: none;
37
+ border-radius: 5px;
38
+ font-size: 16px;
39
+ cursor: pointer;
40
+ text-decoration: none;
41
+ width: 50%;
42
+ }
43
+
44
+ .back-button:hover {
45
+ background-color: #0056b3;
46
+ }
47
+
48
+ .order-card {
49
+ background: #fff;
50
+ padding: 15px;
51
+ margin: 10px 0;
52
+ border-radius: 8px;
53
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
54
+ text-align: left;
55
+ }
56
+
57
+ .order-card p {
58
+ margin: 5px 0;
59
+ font-size: 14px;
60
+ }
61
+
62
+ .order-status {
63
+ font-weight: bold;
64
+ padding: 5px 10px;
65
+ border-radius: 5px;
66
+ display: inline-block;
67
+ }
68
+
69
+ .status-pending {
70
+ background-color: #ffc107;
71
+ color: #fff;
72
+ }
73
+
74
+ .status-completed {
75
+ background-color: #28a745;
76
+ color: #fff;
77
+ }
78
+
79
+ .status-cancelled {
80
+ background-color: #dc3545;
81
+ color: #fff;
82
+ }
83
+
84
+ .show-more-btn {
85
+ background-color: #007bff;
86
+ color: white;
87
+ padding: 8px 15px;
88
+ border: none;
89
+ border-radius: 5px;
90
+ font-size: 14px;
91
+ cursor: pointer;
92
+ margin-top: 10px;
93
+ display: block;
94
+ width: 50%;
95
+ margin-left: auto;
96
+ margin-right: auto;
97
+ }
98
+
99
+ .show-more-btn:hover {
100
+ background-color: #0056b3;
101
+ }
102
+
103
  </style>
104
  </head>
105
  <body>
106
+
107
+ <div class="container">
108
+ <h2>Order History</h2>
109
+
110
+ <!-- Back to Menu Button -->
111
+ <a href="{{ url_for('menu') }}" class="back-button">Back to Menu</a>
112
+
113
+ {% if orders %}
 
 
 
114
  {% for order in orders %}
115
+ <div class="order-card {% if loop.index > 3 %}hidden{% endif %}">
116
+ <p><strong>Date:</strong> {{ order['CreatedDate'][:10] }}</p>
117
+ <p><strong>Order:</strong> {{ order['Order_Details__c'] }}</p>
118
+ <p><strong>Total Amount:</strong> ${{ order['Total_Amount__c'] }}</p>
119
+ <p><strong>Discount:</strong> ${{ order['Discount__c'] }}</p>
120
+ <p><strong>Total Bill:</strong> ${{ order['Total_Bill__c'] }}</p>
121
+ <p class="order-status
122
+ {% if order['Order_Status__c'] == 'Pending' %}status-pending
123
+ {% elif order['Order_Status__c'] == 'Completed' %}status-completed
124
+ {% elif order['Order_Status__c'] == 'Cancelled' %}status-cancelled{% endif %}">
125
+ {{ order['Order_Status__c'] }}
126
+ </p>
127
+ </div>
128
  {% endfor %}
129
+
130
+ <!-- Show More / Show Less Button -->
131
+ {% if orders|length > 3 %}
132
+ <button class="show-more-btn" onclick="toggleOrders()">Show More</button>
133
+ {% endif %}
134
+ {% else %}
135
+ <p>No past orders found.</p>
136
+ {% endif %}
137
+ </div>
138
+
139
+ <script>
140
+ function toggleOrders() {
141
+ let hiddenOrders = document.querySelectorAll(".order-card.hidden");
142
+ let button = document.querySelector(".show-more-btn");
143
+
144
+ if (hiddenOrders[0].style.display === "none" || hiddenOrders[0].style.display === "") {
145
+ hiddenOrders.forEach(order => order.style.display = "block");
146
+ button.textContent = "Show Less";
147
+ } else {
148
+ hiddenOrders.forEach(order => order.style.display = "none");
149
+ button.textContent = "Show More";
150
+ }
151
+ }
152
+
153
+ // Initially hide extra orders
154
+ document.addEventListener("DOMContentLoaded", () => {
155
+ document.querySelectorAll(".order-card.hidden").forEach(order => order.style.display = "none");
156
+ });
157
+ </script>
158
+
159
  </body>
160
  </html>