Hugging Face's logo

Spaces:
lokeshloki143
/
BiryaniHubflaskhema
Runtime error

App Files Community
lokeshloki143 commited on
Commit
5b2f47a
·
verified ·
1 Parent(s): 57be6ba

Update templates/order.html

Browse files
Files changed (1) hide show
  1. templates/order.html +210 -197
templates/order.html CHANGED
@@ -1,210 +1,223 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Order Summary</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; /* Updated background color */
13
- color: #333333; /* Dark gray text */
14
- margin: 0;
15
- padding: 0;
16
- display: flex;
17
- flex-direction: column;
18
- min-height: 100vh;
19
- }
20
- .order-container {
21
- max-width: 768px;
22
- margin: 40px auto;
23
- padding: 20px;
24
- background-color: #ffffff; /* Set the container background to white */
25
- border-radius: 15px;
26
- box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
27
- border: 1px solid #ffffff;
28
- flex-grow: 1;
29
- }
30
- .cart-item {
31
- display: flex;
32
- justify-content: space-between;
33
- background-color: #fffcf5; /* Slightly lighter beige */
34
- border-radius: 8px;
35
- border: 1px solid #ffe5b4; /* Light orange border */
36
- padding: 10px;
37
- margin-bottom: 10px;
38
- }
39
- .cart-item img {
40
- width: 70px;
41
- height: 70px;
42
- object-fit: cover;
43
- border-radius: 5px;
44
- border: 1px solid #ffcc80; /* Light orange border around images */
45
- }
46
- .cart-item-details {
47
- flex: 1;
48
- margin-left: 15px;
49
- }
50
- .cart-item-title {
51
- font-size: 1.2rem;
52
- font-weight: bold;
53
- color: #000000; /* Change the color to black */
54
- }
55
- .cart-item-addons,
56
- .cart-item-instructions {
57
- font-size: 0.9rem;
58
- color: #000000; /* Change the color to black */
59
- }
60
- .cart-item-actions {
61
- font-size: 1.2rem;
62
- font-weight: bold;
63
- color: #2b9348;
64
- }
65
- .order-summary {
66
- text-align: right;
67
- margin-top: 15px;
68
- }
69
- .total-price {
70
- font-size: 1.5rem;
71
- font-weight: bold;
72
- color: #2b9348; /* Green for the total price */
73
- }
74
- .back-to-menu {
75
- display: block;
76
- margin: 30px auto 10px auto;
77
- padding: 10px 20px;
78
- background-color: #ff5722;
79
- color: #ffffff;
80
- border: none;
81
- border-radius: 25px;
82
- font-size: 1rem;
83
- font-weight: bold;
84
- text-align: center;
85
- text-decoration: none;
86
- width: 100%;
87
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
88
- transition: background-color 0.3s ease;
89
- }
90
- .back-to-menu:hover {
91
- background-color: #ff5722;
92
- text-decoration: none;
93
- }
94
- footer {
95
- background-color: #333333;
96
- color: #ffffff;
97
- text-align: center;
98
- padding: 15px 10px;
99
- margin-top: auto;
100
- }
101
- footer p {
102
- margin: 0;
103
- font-size: 1rem;
104
- }
105
- footer p span {
106
- color: #ffcc00;
107
- font-weight: bold;
108
- }
109
- .totsl_bill {
110
- max-width: 768px;
111
- }
112
- .yourorder {
113
- font-family: Serif;
114
- color: #ff5722; /* Orange color for "Your Order Summary" */
115
- font-size: 1.5rem; /* Adjusted for better visibility */
116
- font-weight: bold;
117
- }
118
- /* Remove any gap between Sub-Total and Discount */
119
- .d-flex {
120
- margin-bottom: 0px !important; /* Remove margin */
121
- }
122
- .d-flex:first-child {
123
- margin-top: 0px !important; /* Ensure no space above Sub-Total */
124
- }
125
- /* Remove padding and margins from the individual fields */
126
- .d-flex .cart-item-actions {
127
- margin-bottom: 0px !important; /* Remove margin between fields */
128
- }
129
  .cart-item-instructions {
130
- word-wrap: break-word; /* Ensures text wraps to the next line */
131
- white-space: normal; /* Allows text to wrap naturally */
132
- overflow-wrap: break-word; /* Breaks long words to prevent overflow */
133
- max-width: 100%; /* Ensures the text stays within the container's width */
134
- line-height: 1.5; /* Increases line height for better readability */
135
- padding: 5px 0; /* Adds some padding for better text spacing */
136
- word-break: break-word; /* Prevents words from overflowing */
137
  }
138
 
139
- </style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
140
  </head>
141
  <body>
142
- <div class="container">
143
- <div class="order-container">
144
- <h4 class="mb-4 text-center yourorder">Your Order Summary</h4>
145
-
146
- {% if order %}
147
- {% for line in order.Order_Details__c.split('\n') %}
148
- {% set item_parts = line.split('|') %}
149
- <div class="cart-item">
150
- <!-- Item Image -->
151
- <img src="{{ item_parts[4].strip().replace('Image:', '') }}"
152
- alt="{{ item_parts[0].strip() }}"
153
- onerror="this.src='/static/placeholder.jpg';">
154
-
155
- <!-- Item Details -->
156
- <div class="cart-item-details">
157
- <div class="cart-item-title">{{ item_parts[0].strip() }}</div> <!-- Item Name & Quantity -->
158
-
159
-
160
- <div class="cart-item-addons">
161
- <small class="text-muted">Add-ons: {{ item_parts[1].strip().replace('Add-Ons:', '') }}</small>
162
- </div>
163
-
164
- <div class="cart-item-instructions">
165
- <small class="text-muted">Instructions: {{ item_parts[2].strip().replace('Instructions:', '') }}</small>
166
- </div>
167
- </div>
168
-
169
- <!-- Price -->
170
- <div class="cart-item-actions m">
171
- <span style="font-size: 16px; margin-right: 13px">{{ item_parts[3].strip().replace('Price:', '') }}</span>
172
- </div>
173
- </div>
174
- {% endfor %}
175
-
176
- <!-- Total Section -->
177
- <div class="container mt-5 cart-item">
178
- <div class="container">
179
- <div class="d-flex justify-content-between mb-3">
180
- <p><strong>Sub-Total:</strong></p>
181
- <p class="cart-item-actions" style="font-size: 16px;">${{ order.Total_Amount__c }}</p>
182
- </div>
183
- <div class="d-flex justify-content-between mb-3">
184
- <p><strong>Discount:</strong></p>
185
- <p class="cart-item-actions" style="font-size: 16px;">${{ "%.2f"|format(order.Discount__c) }}</p>
186
- </div>
187
- <!-- Add dotted line here -->
188
- <div style="border-bottom: 2px dotted #000; margin-bottom: 10px;"></div>
189
- <div class="d-flex justify-content-between mb-3">
190
- <p><strong>Total Bill:</strong></p>
191
- <p class="cart-item-actions" style="font-size: 16px;">${{ "%.2f"|format(order.Total_Bill__c) }}</p>
192
- </div>
193
- </div>
194
- </div>
195
-
196
- {% else %}
197
- <p class="text-center">No order details available.</p>
198
- {% endif %}
199
-
200
- <!-- Back to Menu Button -->
201
- <a href="/menu" class="back-to-menu">Back to Menu</a>
202
  </div>
 
 
 
 
203
  </div>
 
204
 
205
- <!-- Footer -->
206
- <footer>
207
- <p>Thank you for dining with us! <span>We look forward to serving you again.</span></p>
208
- </footer>
209
  </body>
210
  </html>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Order Summary</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;
13
+ color: #333333;
14
+ margin: 0;
15
+ padding: 0;
16
+ display: flex;
17
+ flex-direction: column;
18
+ min-height: 100vh;
19
+ }
20
+
21
+ .top-bar {
22
+ background-color: #FF6F3C;
23
+ width: 100%;
24
+ padding: 10px 15px;
25
+ display: flex;
26
+ align-items: center;
27
+ box-sizing: border-box;
28
+ }
29
+
30
+ .back-link {
31
+ display: flex;
32
+ align-items: center;
33
+ text-decoration: none;
34
+ }
35
+
36
+ .back-arrow {
37
+ font-size: 1.8rem;
38
+ color: #000;
39
+ font-weight: bold;
40
+ }
41
+
42
+ .back-label {
43
+ margin-left: 10px;
44
+ color: white;
45
+ font-weight: bold;
46
+ font-size: 1rem;
47
+ }
48
+
49
+ .yourorder-title {
50
+ font-family: Serif;
51
+ color: #000000;
52
+ font-weight: bold;
53
+ text-align: center;
54
+ margin: 20px 15px 10px;
55
+ font-size: clamp(1.2rem, 5vw, 2rem); /* Responsive font size */
56
+ }
57
+
58
+ .order-container {
59
+ max-width: 768px;
60
+ margin: 40px auto;
61
+ padding: 20px;
62
+ background-color: #ffffff;
63
+ border-radius: 15px;
64
+ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
65
+ border: 1px solid #ffffff;
66
+ flex-grow: 1;
67
+ }
68
+
69
+ .cart-item {
70
+ display: flex;
71
+ justify-content: space-between;
72
+ background-color: #fffcf5;
73
+ border-radius: 8px;
74
+ border: 1px solid #ffe5b4;
75
+ padding: 10px;
76
+ margin-bottom: 10px;
77
+ }
78
+
79
+ .cart-item img {
80
+ width: 70px;
81
+ height: 70px;
82
+ object-fit: cover;
83
+ border-radius: 5px;
84
+ border: 1px solid #ffcc80;
85
+ }
86
+
87
+ .cart-item-details {
88
+ flex: 1;
89
+ margin-left: 15px;
90
+ }
91
+
92
+ .cart-item-title {
93
+ font-size: 1.2rem;
94
+ font-weight: bold;
95
+ color: #000000;
96
+ }
97
+
98
+ .cart-item-addons,
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
99
  .cart-item-instructions {
100
+ font-size: 0.9rem;
101
+ color: #000000;
102
+ word-wrap: break-word;
103
+ overflow-wrap: break-word;
104
+ white-space: normal;
105
+ line-height: 1.5;
106
+ word-break: break-all;
107
  }
108
 
109
+ .cart-item-actions {
110
+ font-size: 1.2rem;
111
+ font-weight: bold;
112
+ color: #2b9348;
113
+ }
114
+
115
+ .order-summary {
116
+ text-align: right;
117
+ margin-top: 15px;
118
+ }
119
+
120
+ .total-price {
121
+ font-size: 1.5rem;
122
+ font-weight: bold;
123
+ color: #2b9348;
124
+ }
125
+
126
+ footer {
127
+ background-color: #333333;
128
+ color: #ffffff;
129
+ text-align: center;
130
+ padding: 15px 10px;
131
+ margin-top: auto;
132
+ }
133
+
134
+ footer p {
135
+ margin: 0;
136
+ font-size: 1rem;
137
+ }
138
+
139
+ footer p span {
140
+ color: #ffcc00;
141
+ font-weight: bold;
142
+ }
143
+
144
+ .d-flex {
145
+ margin-bottom: 0px !important;
146
+ }
147
+
148
+ .d-flex:first-child {
149
+ margin-top: 0px !important;
150
+ }
151
+
152
+ .d-flex .cart-item-actions {
153
+ margin-bottom: 0px !important;
154
+ }
155
+ </style>
156
  </head>
157
  <body>
158
+ <!-- Top Orange Label Bar -->
159
+ <div class="top-bar">
160
+ <a href="/menu" class="back-link">
161
+ <span class="back-arrow">&#10216;</span>
162
+ <span class="back-label">Back to Menu</span>
163
+ </a>
164
+ </div>
165
+
166
+ <!-- Title (centered and responsive) -->
167
+ <h1 class="yourorder-title">Your Order Summary</h1>
168
+
169
+ <div class="container">
170
+ <div class="order-container">
171
+ {% if order %}
172
+ {% for line in order.Order_Details__c.split('\n') %}
173
+ {% set item_parts = line.split('|') %}
174
+ <div class="cart-item">
175
+ <img src="{{ item_parts[4].strip().replace('Image:', '') }}"
176
+ alt="{{ item_parts[0].strip() }}"
177
+ onerror="this.src='/static/placeholder.jpg';">
178
+ <div class="cart-item-details">
179
+ <div class="cart-item-title">{{ item_parts[0].strip() }}</div>
180
+ <div class="cart-item-addons">
181
+ <small class="text-muted">Add-ons: {{ item_parts[1].strip().replace('Add-Ons:', '') }}</small>
182
+ </div>
183
+ <div class="cart-item-instructions">
184
+ <small class="text-muted">Instructions: {{ item_parts[2].strip().replace('Instructions:', '') }}</small>
185
+ </div>
186
+ </div>
187
+ <div class="cart-item-actions m">
188
+ <span style="font-size: 16px; margin-right: 13px">{{ item_parts[3].strip().replace('Price:', '') }}</span>
189
+ </div>
190
+ </div>
191
+ {% endfor %}
192
+
193
+ <!-- Total Section -->
194
+ <div class="container mt-5 cart-item">
195
+ <div class="container">
196
+ <div class="d-flex justify-content-between mb-3">
197
+ <p><strong>Sub-Total:</strong></p>
198
+ <p class="cart-item-actions" style="font-size: 16px;">${{ order.Total_Amount__c }}</p>
199
+ </div>
200
+ <div class="d-flex justify-content-between mb-3">
201
+ <p><strong>Discount:</strong></p>
202
+ <p class="cart-item-actions" style="font-size: 16px;">${{ "%.2f"|format(order.Discount__c) }}</p>
203
+ </div>
204
+ <div style="border-bottom: 2px dotted #000; margin-bottom: 10px;"></div>
205
+ <div class="d-flex justify-content-between mb-3">
206
+ <p><strong>Total Bill:</strong></p>
207
+ <p class="cart-item-actions" style="font-size: 16px;">${{ "%.2f"|format(order.Total_Bill__c) }}</p>
208
+ </div>
209
+ </div>
 
 
 
 
 
 
 
 
210
  </div>
211
+
212
+ {% else %}
213
+ <p class="text-center">No order details available.</p>
214
+ {% endif %}
215
  </div>
216
+ </div>
217
 
218
+ <!-- Footer -->
219
+ <footer>
220
+ <p> Thanks for choosing to dine with us! <span>We look forward to serving you again."</span></p>
221
+ </footer>
222
  </body>
223
  </html>