Hugging Face's logo

Spaces:
Swathi6
/
Biryanihub
Sleeping

App Files Community
Swathi6 commited on
Commit
fb878b0
·
verified ·
1 Parent(s): c3f7e56

Create templates/order.html

Browse files
Files changed (1) hide show
  1. templates/order.html +200 -0
templates/order.html ADDED
@@ -0,0 +1,200 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ </style>
130
+ </head>
131
+ <body>
132
+ <div class="container">
133
+ <div class="order-container">
134
+ <h4 class="mb-4 text-center yourorder">Your Order Summary</h4>
135
+
136
+ {% if order %}
137
+ {% for line in order.Order_Details__c.split('\n') %}
138
+ {% set item_parts = line.split('|') %}
139
+ <div class="cart-item">
140
+ <!-- Item Image -->
141
+ <img src="{{ item_parts[4].strip().replace('Image:', '') }}"
142
+ alt="{{ item_parts[0].strip() }}"
143
+ onerror="this.src='/static/placeholder.jpg';">
144
+
145
+ <!-- Item Details -->
146
+ <div class="cart-item-details">
147
+ <div class="cart-item-title">{{ item_parts[0].strip() }}</div> <!-- Item Name & Quantity -->
148
+
149
+
150
+ <div class="cart-item-addons">
151
+ <small class="text-muted">Add-ons: {{ item_parts[1].strip().replace('Add-Ons:', '') }}</small>
152
+ </div>
153
+
154
+ <div class="cart-item-instructions">
155
+ <small class="text-muted">Instructions: {{ item_parts[2].strip().replace('Instructions:', '') }}</small>
156
+ </div>
157
+ </div>
158
+
159
+ <!-- Price -->
160
+ <div class="cart-item-actions m">
161
+ <span style="font-size: 16px; margin-right: 13px">{{ item_parts[3].strip().replace('Price:', '') }}</span>
162
+ </div>
163
+ </div>
164
+ {% endfor %}
165
+
166
+ <!-- Total Section -->
167
+ <div class="container mt-5 cart-item">
168
+ <div class="container">
169
+ <div class="d-flex justify-content-between mb-3">
170
+ <p><strong>Sub-Total:</strong></p>
171
+ <p class="cart-item-actions" style="font-size: 16px;">${{ order.Total_Amount__c }}</p>
172
+ </div>
173
+ <div class="d-flex justify-content-between mb-3">
174
+ <p><strong>Discount:</strong></p>
175
+ <p class="cart-item-actions" style="font-size: 16px;">${{ "%.2f"|format(order.Discount__c) }}</p>
176
+ </div>
177
+ <!-- Add dotted line here -->
178
+ <div style="border-bottom: 2px dotted #000; margin-bottom: 10px;"></div>
179
+ <div class="d-flex justify-content-between mb-3">
180
+ <p><strong>Total Bill:</strong></p>
181
+ <p class="cart-item-actions" style="font-size: 16px;">${{ "%.2f"|format(order.Total_Bill__c) }}</p>
182
+ </div>
183
+ </div>
184
+ </div>
185
+
186
+ {% else %}
187
+ <p class="text-center">No order details available.</p>
188
+ {% endif %}
189
+
190
+ <!-- Back to Menu Button -->
191
+ <a href="/menu" class="back-to-menu">Back to Menu</a>
192
+ </div>
193
+ </div>
194
+
195
+ <!-- Footer -->
196
+ <footer>
197
+ <p>Thank you for dining with us! <span>We look forward to serving you again.</span></p>
198
+ </footer>
199
+ </body>
200
+ </html>