Hugging Face's logo

Spaces:
Subbu1304
/
subbuok
Sleeping

App Files Community
lokeshloki143 commited on
Commit
f120af0
·
verified ·
1 Parent(s): f54d6b3

Update templates/order_history.html

Browse files
Files changed (1) hide show
  1. templates/order_history.html +59 -35
templates/order_history.html CHANGED
@@ -1,3 +1,4 @@
 
1
  <html lang="en">
2
  <head>
3
  <meta charset="UTF-8">
@@ -17,28 +18,52 @@
17
  margin: 0;
18
  padding: 0;
19
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
20
  /* Light Orange Background for the back-side */
21
  .background {
22
  padding: 8vw 0;
23
  position: relative;
24
  }
25
- /* Green Back Button styling */
26
- .back-button {
27
- position: absolute;
28
- top: 15px;
29
- left: 15px;
30
- display: inline-block;
31
- background-color: green; /* Green color */
32
- color: white;
33
- padding: 10px 20px;
34
- text-decoration: none;
35
- font-weight: bold;
36
- border-radius: 4px;
37
- z-index: 10; /* Ensure it stays above other content */
38
- }
39
- .back-button:hover {
40
- background-color: darkgreen; /* Darker green color on hover */
41
- }
42
  /* Container */
43
  .container {
44
  width: 85%; /* Decreased width for smaller template size */
@@ -105,13 +130,6 @@
105
  color: #333;
106
  margin-top: 15px;
107
  }
108
- .order-heading {
109
- font-size: 16px;
110
- font-weight: bold;
111
- color: #ff7f00;
112
- margin-bottom: 15px;
113
- text-align: center;
114
- }
115
  .show-more-btn {
116
  background-color: #ff7f00;
117
  color: white;
@@ -142,28 +160,34 @@
142
  font-size: 10px;
143
  }
144
  .order-heading {
145
- font-size: 14px;
146
  }
147
  .show-more-btn {
148
  padding: 6px 12px;
149
  }
150
  .back-button {
151
- top: 10px;
152
- left: 10px;
153
- padding: 8px 16px;
154
  }
155
  }
156
  </style>
157
  </head>
158
  <body>
159
 
 
 
 
 
 
 
 
 
 
 
 
160
  <!-- Background container with light orange -->
161
  <div class="background">
162
- <a href="{{ url_for('menu.menu') }}" class="back-button"><i class="fa fa-arrow-left"></i></a>
163
-
164
  <div class="container">
165
- <div class="order-heading">Order History</div>
166
-
167
  <!-- Loop through the orders (first 3) -->
168
  {% for order in orders[:3] %}
169
  <div class="order-item">
@@ -176,7 +200,7 @@
176
  </div>
177
 
178
  <div class="order-price">
179
- <p>Total: ₹{{ order.Total_Bill__c }}</p>
180
  </div>
181
 
182
  <div class="order-status {% if order.order_status == 'Pending' %}pending{% else %}completed{% endif %}">
@@ -198,7 +222,7 @@
198
  </div>
199
 
200
  <div class="order-price">
201
- <p>Total: ₹{{ order.Total_Bill__c }}</p>
202
  </div>
203
 
204
  <div class="order-status {% if order.order_status == 'Pending' %}pending{% else %}completed{% endif %}">
@@ -238,4 +262,4 @@
238
  </script>
239
 
240
  </body>
241
- </html>
 
1
+ <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
 
18
  margin: 0;
19
  padding: 0;
20
  }
21
+ /* Top orange bar */
22
+ .top-bar {
23
+ background-color: #FF6F3C;
24
+ width: 100%;
25
+ padding: 10px 15px;
26
+ display: flex;
27
+ align-items: center;
28
+ box-sizing: border-box;
29
+ }
30
+ .back-link {
31
+ display: flex;
32
+ align-items: center;
33
+ text-decoration: none;
34
+ }
35
+ .back-arrow {
36
+ font-size: 1.8rem;
37
+ color: #000; /* Dark black */
38
+ font-weight: bold;
39
+ }
40
+ .back-label {
41
+ margin-left: 10px;
42
+ color: white;
43
+ font-weight: bold;
44
+ font-size: 1rem;
45
+ }
46
+ h1 {
47
+ color: #1C1C1C;
48
+ font-size: 1.2rem;
49
+ margin: 30px 0 15px; /* Default margin for larger screens */
50
+ text-align: center;
51
+ }
52
+ /* Title Styling: Dark Black, Centered, and Larger Size */
53
+ .order-heading {
54
+ color: #000; /* Dark black color */
55
+ font-size: 2.5rem; /* Larger font size for desktop */
56
+ font-weight: bold;
57
+ text-align: center;
58
+ margin-top: 30px; /* Spacing from the top */
59
+ }
60
+
61
  /* Light Orange Background for the back-side */
62
  .background {
63
  padding: 8vw 0;
64
  position: relative;
65
  }
66
+
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
67
  /* Container */
68
  .container {
69
  width: 85%; /* Decreased width for smaller template size */
 
130
  color: #333;
131
  margin-top: 15px;
132
  }
 
 
 
 
 
 
 
133
  .show-more-btn {
134
  background-color: #ff7f00;
135
  color: white;
 
160
  font-size: 10px;
161
  }
162
  .order-heading {
163
+ font-size: 1.8rem; /* Smaller font size for mobile */
164
  }
165
  .show-more-btn {
166
  padding: 6px 12px;
167
  }
168
  .back-button {
169
+ padding: 6px 12px; /* Smaller padding for the button in mobile view */
170
+ font-size: 0.9rem; /* Smaller font size for mobile */
 
171
  }
172
  }
173
  </style>
174
  </head>
175
  <body>
176
 
177
+ <!-- Top Orange Label Bar -->
178
+ <div class="top-bar">
179
+ <a href="/menu" class="back-link">
180
+ <span class="back-arrow">&#10216;</span>
181
+ <span class="back-label">Back to Menu</span>
182
+ </a>
183
+ </div>
184
+
185
+ <!-- Order History Title (centered and dark black) -->
186
+ <div class="order-heading">Order History</div>
187
+
188
  <!-- Background container with light orange -->
189
  <div class="background">
 
 
190
  <div class="container">
 
 
191
  <!-- Loop through the orders (first 3) -->
192
  {% for order in orders[:3] %}
193
  <div class="order-item">
 
200
  </div>
201
 
202
  <div class="order-price">
203
+ <p>Total: ${{ order.Total_Bill__c }}</p>
204
  </div>
205
 
206
  <div class="order-status {% if order.order_status == 'Pending' %}pending{% else %}completed{% endif %}">
 
222
  </div>
223
 
224
  <div class="order-price">
225
+ <p>Total: ${{ order.Total_Bill__c }}</p>
226
  </div>
227
 
228
  <div class="order-status {% if order.order_status == 'Pending' %}pending{% else %}completed{% endif %}">
 
262
  </script>
263
 
264
  </body>
265
+ </html>