Hugging Face's logo

Spaces:
Rammohan0504
/
BiryaniHubflask19
Sleeping

App Files Community
Rammohan0504 commited on
Commit
13e27b3
·
verified ·
1 Parent(s): 6cbff24

Update templates/order_history.html

Browse files
Files changed (1) hide show
  1. templates/order_history.html +60 -13
templates/order_history.html CHANGED
@@ -24,13 +24,31 @@
24
 
25
  h2 {
26
  color: #007bff;
27
- margin-bottom: 20px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
28
  }
29
 
30
  .order-card {
31
  background: #fff;
32
  padding: 15px;
33
- margin: 15px 0;
34
  border-radius: 8px;
35
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
36
  text-align: left;
@@ -63,32 +81,38 @@
63
  color: #fff;
64
  }
65
 
66
- .back-button {
67
- display: block;
68
- margin-top: 20px;
69
  background-color: #007bff;
70
  color: white;
71
- padding: 10px 15px;
72
  border: none;
73
  border-radius: 5px;
74
- font-size: 16px;
75
  cursor: pointer;
76
- text-decoration: none;
 
 
 
 
77
  }
78
 
79
- .back-button:hover {
80
  background-color: #0056b3;
81
  }
 
82
  </style>
83
  </head>
84
  <body>
85
 
86
  <div class="container">
87
- <h2>Your Order History</h2>
 
 
 
88
 
89
  {% if orders %}
90
  {% for order in orders %}
91
- <div class="order-card">
92
  <p><strong>Date:</strong> {{ order['CreatedDate'][:10] }}</p>
93
  <p><strong>Order:</strong> {{ order['Order_Details__c'] }}</p>
94
  <p><strong>Total Amount:</strong> ${{ order['Total_Amount__c'] }}</p>
@@ -102,12 +126,35 @@
102
  </p>
103
  </div>
104
  {% endfor %}
 
 
 
 
 
105
  {% else %}
106
  <p>No past orders found.</p>
107
  {% endif %}
108
-
109
- <a href="{{ url_for('menu') }}" class="back-button">Back to Menu</a>
110
  </div>
111
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
112
  </body>
113
  </html>
 
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;
 
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>
 
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>