Hugging Face's logo

Spaces:
Rammohan0504
/
BiryaniHubflask37-1
Sleeping

App Files Community
Rammohan0504 commited on
Commit
da6247a
·
verified ·
1 Parent(s): 368bf06

Update templates/order_history.html

Browse files
Files changed (1) hide show
  1. templates/order_history.html +35 -136
templates/order_history.html CHANGED
@@ -4,13 +4,12 @@
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Order History</title>
7
- <!-- Bootstrap CSS -->
8
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
9
  <style>
10
  body {
11
  font-family: 'Arial', sans-serif;
12
- background-color: #fdf4e3; /* Light cream background */
13
- color: #333333; /* Dark gray text */
14
  margin: 0;
15
  padding: 0;
16
  }
@@ -18,53 +17,20 @@
18
  max-width: 900px;
19
  margin: 40px auto;
20
  padding: 20px;
21
- background-color: #ffffff; /* White card background */
22
  border-radius: 15px;
23
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
24
- border: 1px solid #ffe5b4; /* Light orange border */
25
  }
26
  .order-item {
27
- display: flex;
28
- justify-content: space-between;
29
- background-color: #fffcf5; /* Light beige background for items */
30
  border-radius: 8px;
31
  padding: 10px;
32
  margin-bottom: 10px;
33
- border: 1px solid #ffe5b4; /* Light orange border */
34
- }
35
- .order-item img {
36
- width: 70px;
37
- height: 70px;
38
- object-fit: cover;
39
- border-radius: 5px;
40
- }
41
- .order-item-details {
42
- flex: 1;
43
- margin-left: 15px;
44
  }
45
- .order-item-title {
46
- font-size: 1.2rem;
47
- font-weight: bold;
48
- color: #c04e01; /* Warm orange color for the title */
49
- }
50
- .order-item-price {
51
- font-size: 1.1rem;
52
- font-weight: bold;
53
- color: #2b9348; /* Green for the price */
54
- }
55
- .reorder-button {
56
- padding: 8px 15px;
57
- background-color: #ff5722;
58
- color: #ffffff;
59
- border: none;
60
- border-radius: 25px;
61
- font-size: 1rem;
62
- font-weight: bold;
63
- cursor: pointer;
64
- transition: background-color 0.3s ease;
65
- }
66
- .reorder-button:hover {
67
- background-color: #e64a19;
68
  }
69
  footer {
70
  background-color: #333333;
@@ -73,21 +39,22 @@
73
  padding: 15px 10px;
74
  margin-top: 20px;
75
  }
76
- .show-more-btn {
 
 
 
 
 
 
77
  background-color: #ff5722;
78
  color: #ffffff;
79
- padding: 8px 16px;
80
  border-radius: 25px;
81
- cursor: pointer;
82
  }
83
- .show-more-btn:hover {
84
  background-color: #e64a19;
85
  }
86
- .nav-buttons {
87
- display: flex;
88
- justify-content: space-between;
89
- margin-top: 20px;
90
- }
91
  </style>
92
  </head>
93
  <body>
@@ -98,102 +65,34 @@
98
 
99
  {% if orders %}
100
  <div id="order-list">
101
- {% for order in orders[:5] %}
102
- <h5>Order on: {{ order.CreatedDate }}</h5>
103
- {% for line in order.Order_Details__c.split('\n') %}
104
- {% set item_parts = line.split('|') %}
105
-
106
- <!-- Extract image URL from the Order_Details string -->
107
- {% set image_url = item_parts[4].strip().split('Image: ')[-1] %}
108
-
109
- <div class="order-item">
110
- <img src="{{ image_url }}" alt="{{ item_parts[0].strip() }}"
111
- onerror="this.src='/static/placeholder.jpg';">
112
-
113
- <div class="order-item-details">
114
- <div class="order-item-title">{{ item_parts[0].strip() }}</div>
115
- <div><small class="text-muted">Quantity: {{ item_parts[1].strip() }}</small></div>
116
- <div><small class="text-muted">Add-Ons: {{ item_parts[2].strip() }}</small></div>
117
- </div>
118
- <button class="reorder-button"
119
- onclick="addToCart('{{ item_parts[0].strip() }}')"
120
- id="{{ item_parts[0].strip() }}"
121
- data-price="{{ item_parts[3].strip().replace('Price:', '') }}"
122
- data-image="{{ image_url }}"
123
- data-category="Main Course"
124
- data-section="Reordered Items">
125
- Reorder
126
- </button>
127
- </div>
128
- {% endfor %}
129
  {% endfor %}
130
  </div>
131
-
132
- <!-- Show More / Show Less -->
133
- <button id="show-more" class="show-more-btn" onclick="toggleOrders()">Show More</button>
134
-
135
  {% else %}
136
  <p class="text-center">No order history available.</p>
137
  {% endif %}
138
 
139
  <!-- Navigation Buttons -->
140
  <div class="nav-buttons">
141
- <a href="/menu" class="reorder-button">Back to Menu</a>
142
- <a href="/cart" class="reorder-button">Go to Cart</a>
143
  </div>
144
  </div>
145
  </div>
146
 
147
- <script>
148
- // Function to toggle showing more orders
149
- function toggleOrders() {
150
- const orderList = document.getElementById("order-list");
151
- const showMoreBtn = document.getElementById("show-more");
152
-
153
- // Show all orders
154
- if (orderList.children.length === 5) {
155
- // Add more orders dynamically (can be done by modifying backend response, or manually here)
156
- {% for order in orders[5:] %}
157
- {% for line in order.Order_Details__c.split('\n') %}
158
- {% set item_parts = line.split('|') %}
159
-
160
- <!-- Extract image URL from the Order_Details string -->
161
- {% set image_url = item_parts[4].strip().split('Image: ')[-1] %}
162
-
163
- const newOrderItem = document.createElement("div");
164
- newOrderItem.classList.add("order-item");
165
- newOrderItem.innerHTML = `
166
- <img src="{{ image_url }}" alt="{{ item_parts[0].strip() }}"
167
- onerror="this.src='/static/placeholder.jpg';">
168
- <div class="order-item-details">
169
- <div class="order-item-title">{{ item_parts[0].strip() }}</div>
170
- <div><small class="text-muted">Quantity: {{ item_parts[1].strip() }}</small></div>
171
- <div><small class="text-muted">Add-Ons: {{ item_parts[2].strip() }}</small></div>
172
- </div>
173
- <button class="reorder-button"
174
- onclick="addToCart('{{ item_parts[0].strip() }}')"
175
- id="{{ item_parts[0].strip() }}"
176
- data-price="{{ item_parts[3].strip().replace('Price:', '') }}"
177
- data-image="{{ image_url }}"
178
- data-category="Main Course"
179
- data-section="Reordered Items">
180
- Reorder
181
- </button>
182
- `;
183
- orderList.appendChild(newOrderItem);
184
- {% endfor %}
185
- {% endfor %}
186
- showMoreBtn.innerText = "Show Less"; // Change button text to "Show Less"
187
- } else {
188
- // Show only 5 orders initially
189
- const allOrderItems = orderList.children;
190
- while (allOrderItems.length > 5) {
191
- orderList.removeChild(allOrderItems[5]); // Remove extra orders
192
- }
193
- showMoreBtn.innerText = "Show More"; // Change button text back to "Show More"
194
- }
195
- }
196
- </script>
197
-
198
  </body>
199
  </html>
 
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Order History</title>
 
7
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
8
  <style>
9
  body {
10
  font-family: 'Arial', sans-serif;
11
+ background-color: #fdf4e3;
12
+ color: #333333;
13
  margin: 0;
14
  padding: 0;
15
  }
 
17
  max-width: 900px;
18
  margin: 40px auto;
19
  padding: 20px;
20
+ background-color: #ffffff;
21
  border-radius: 15px;
22
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
23
+ border: 1px solid #ffe5b4;
24
  }
25
  .order-item {
26
+ background-color: #fffcf5;
 
 
27
  border-radius: 8px;
28
  padding: 10px;
29
  margin-bottom: 10px;
30
+ border: 1px solid #ffe5b4;
 
 
 
 
 
 
 
 
 
 
31
  }
32
+ .order-details {
33
+ font-size: 0.9rem;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
34
  }
35
  footer {
36
  background-color: #333333;
 
39
  padding: 15px 10px;
40
  margin-top: 20px;
41
  }
42
+ .nav-buttons {
43
+ display: flex;
44
+ justify-content: space-between;
45
+ margin-top: 20px;
46
+ }
47
+ .nav-button {
48
+ padding: 10px 20px;
49
  background-color: #ff5722;
50
  color: #ffffff;
51
+ text-decoration: none;
52
  border-radius: 25px;
53
+ font-size: 1rem;
54
  }
55
+ .nav-button:hover {
56
  background-color: #e64a19;
57
  }
 
 
 
 
 
58
  </style>
59
  </head>
60
  <body>
 
65
 
66
  {% if orders %}
67
  <div id="order-list">
68
+ {% for order in orders %}
69
+ <div class="order-item">
70
+ <div><strong>Order Time:</strong> {{ order.CreatedDate }}</div>
71
+ <ul class="order-details">
72
+ {% for line in order.Order_Details__c.split('\n') %}
73
+ {% set item_parts = line.split('|') %}
74
+ <li>
75
+ <strong>Item:</strong> {{ item_parts[0].strip() }}<br>
76
+ <strong>Price:</strong> {{ item_parts[3].strip().replace('Price:', '') }}<br>
77
+ <strong>Add-Ons:</strong> {{ item_parts[2].strip() }}<br>
78
+ <strong>Instructions:</strong> {{ item_parts[5].strip() }}
79
+ </li>
80
+ {% endfor %}
81
+ </ul>
82
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
83
  {% endfor %}
84
  </div>
 
 
 
 
85
  {% else %}
86
  <p class="text-center">No order history available.</p>
87
  {% endif %}
88
 
89
  <!-- Navigation Buttons -->
90
  <div class="nav-buttons">
91
+ <a href="/menu" class="nav-button">Back to Menu</a>
92
+ <a href="/cart" class="nav-button">Go to Cart</a>
93
  </div>
94
  </div>
95
  </div>
96
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
97
  </body>
98
  </html>