Hugging Face's logo

Spaces:
lokeshloki143
/
lokesh143
Sleeping

App Files Community
lokeshloki143 commited on
Commit
c7bbbc6
·
verified ·
1 Parent(s): 4ac92cb

Update templates/order.html

Browse files
Files changed (1) hide show
  1. templates/order.html +145 -211
templates/order.html CHANGED
@@ -1,223 +1,157 @@
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/bootstrap@5.3.0-alpha1/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="{{ url_for('combined_summary.combined_summary') }}" class="back-link">
161
- <span class="back-arrow">⟨</span>
162
- <span class="back-label">Summary </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">
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>
 
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 Receipt</title>
7
+ <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
8
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
9
+ <style>
10
+ body {
11
+ font-family: Arial, sans-serif;
12
+ background-color: #fdf4e3;
13
+ color: #333;
14
+ }
15
+ .top-bar {
16
+ background-color: #FF6F3C;
17
+ padding: 10px 15px;
18
+ display: flex;
19
+ align-items: center;
20
+ }
21
+ .back-link {
22
+ display: flex;
23
+ align-items: center;
24
+ text-decoration: none;
25
+ }
26
+ .back-arrow {
27
+ font-size: 1.8rem;
28
+ color: #000;
29
+ font-weight: bold;
30
+ }
31
+ .back-label {
32
+ margin-left: 10px;
33
+ color: white;
34
+ font-weight: bold;
35
+ font-size: 1rem;
36
+ }
37
+ .order-heading {
38
+ color: #000;
39
+ font-size: 2.5rem;
40
+ font-weight: bold;
41
+ text-align: center;
42
+ margin-top: 30px;
43
+ }
44
+ .order-container {
45
+ max-width: 768px;
46
+ margin: 20px auto;
47
+ padding: 15px;
48
+ background-color: #FFFFFF;
49
+ border-radius: 10px;
50
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
51
+ }
52
+ .order-details {
53
+ padding: 20px;
54
+ background-color: #fff;
55
+ border-radius: 12px;
56
+ border: 2px solid #fdf4e3;
57
+ }
58
+ .order-item {
59
+ display: flex;
60
+ justify-content: space-between;
61
+ padding: 10px 0;
62
+ border-bottom: 1px solid #f0f0f0;
63
+ }
64
+ .order-item-details {
65
+ flex: 1;
66
+ }
67
+ .order-item-details small {
68
+ display: block;
69
+ color: #666;
70
+ }
71
+ .order-item-price {
72
+ font-weight: bold;
73
+ color: #2e7d32;
74
+ }
75
+ .bill-details {
76
+ display: grid;
77
+ grid-template-columns: 1fr 1fr;
78
+ grid-gap: 10px;
79
+ margin-top: 20px;
80
+ }
81
+ .bill-details .label {
82
+ font-weight: 600;
83
+ font-size: 1rem;
84
+ }
85
+ .bill-details .amount {
86
+ text-align: right;
87
+ font-weight: 600;
88
+ font-size: 1rem;
89
+ color: #2e7d32;
90
+ }
91
+ .dotted-line {
92
+ border-bottom: 2px dotted #ccc;
93
+ margin: 15px 0;
94
+ }
95
+ footer {
96
+ background-color: #333333;
97
+ color: #ffffff;
98
+ text-align: center;
99
+ padding: 15px 10px;
100
+ margin-top: 20px;
101
+ }
102
+ footer p {
103
+ margin: 0;
104
+ font-size: 1rem;
105
+ }
106
+ footer p span {
107
+ color: #ffcc00;
108
+ font-weight: bold;
109
+ }
110
+ </style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
111
  </head>
112
  <body>
113
+ <div class="top-bar">
114
+ <a href="/menu" class="back-link">
115
+ <span class="back-arrow">⟨</span>
116
+ <span class="back-label">Back to Menu</span>
117
+ </a>
118
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
119
 
120
+ <div class="order-heading">Your Order Receipt</div>
121
+
122
+ <div class="container">
123
+ <div class="order-container">
124
+ <div class="order-details">
125
+ <h5>Order #{{ order_id }}</h5>
126
+ {% if order %}
127
+ {% for line in order.Order_Details__c.split('\n') %}
128
+ {% set item_parts = line.split('|') %}
129
+ <div class="order-item">
130
+ <div class="order-item-details">
131
+ <strong>{{ item_parts[0].strip() }}</strong>
132
+ <small>Add-ons: {{ item_parts[1].strip().replace('Add-Ons:', '') or 'None' }}</small>
133
+ <small>Instructions: {{ item_parts[2].strip().replace('Instructions:', '') or 'None' }}</small>
134
+ </div>
135
+ <div class="order-item-price">{{ item_parts[3].strip().replace('Price:', '') }}</div>
136
+ </div>
137
+ {% endfor %}
138
+ {% else %}
139
+ <p>No order details available.</p>
140
+ {% endif %}
141
+ <div class="bill-details">
142
+ <div class="label">Subtotal</div>
143
+ <div class="amount">${{ "%.2f"|format(order.Total_Amount__c) }}</div>
144
+ <div class="label">Discount</div>
145
+ <div class="amount">-${{ "%.2f"|format(order.Discount__c) }}</div>
146
+ <div class="label">Total</div>
147
+ <div class="amount">${{ "%.2f"|format(order.Total_Bill__c) }}</div>
148
+ </div>
149
  </div>
 
 
 
 
 
 
 
 
 
 
150
  </div>
 
 
 
 
151
  </div>
 
152
 
153
+ <footer>
154
+ <p>Thanks for choosing to dine with us! <span>We look forward to serving you again.</span></p>
155
+ </footer>
 
156
  </body>
157
  </html>