-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
327 lines (287 loc) · 22.9 KB
/
Copy pathindex.html
File metadata and controls
327 lines (287 loc) · 22.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BergerGo - Food Shop.</title>
<link rel="icon" type="image/x-icon" href="./assets/loading_berger_logo.png">
<!-- google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
rel="stylesheet"
/>
<!-- index css -->
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="mobile-screen">
<div class="mobile-left-btns"></div>
<div class="mobile-right-btns"></div>
<!-- camera -->
<div class="camera">
<div class="parts"></div>
</div>
<!-- main screen all page under this -->
<main>
<!-- loading page -->
<div class="loading_page">
<div class="logo_loading-container">
<div class="logo">BergerGo</div>
<img
src="./assets/loading_berger_logo.png"
alt="bergergo"
class="logo_berger"
/>
</div>
</div>
<!-- home page -->
<div class="home_page">
<div class="header">
<div class="header-logo">
<span>
<h4>BergerGo</h4>
<p>Order your favourite food</p>
</span>
<img src="./assets/user.png" alt="profile" class="profile" />
</div>
<div class="header-search">
<div class="search_bar">
<svg
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.451 11.5125H11.6821L11.4096 11.2503C12.3964 10.1081 12.9388 8.64975 12.9376 7.14156C12.9376 5.89285 12.5666 4.67218 11.8714 3.63391C11.1763 2.59564 10.1883 1.7864 9.03232 1.30854C7.87636 0.830677 6.60436 0.705647 5.3772 0.949259C4.15003 1.19287 3.02281 1.79419 2.13807 2.67716C1.25333 3.56014 0.650814 4.68512 0.406716 5.90984C0.162617 7.13456 0.287897 8.40402 0.766714 9.55768C1.24553 10.7113 2.05638 11.6974 3.09672 12.3911C4.13706 13.0849 5.36017 13.4552 6.61138 13.4552C8.17834 13.4552 9.61877 12.8821 10.7283 11.9302L10.9911 12.2022V12.9695L15.8574 17.8164L17.3076 16.3692L12.451 11.5125ZM6.61138 11.5125C4.18795 11.5125 2.23169 9.56017 2.23169 7.14156C2.23169 4.72296 4.18795 2.7706 6.61138 2.7706C9.03481 2.7706 10.9911 4.72296 10.9911 7.14156C10.9911 9.56017 9.03481 11.5125 6.61138 11.5125Z"
fill="#757575"
/>
</svg>
<input type="search" placeholder="Type Your Burger" />
</div>
<div class="header_settings">
<span class="setting_icon">
<svg
width="33"
height="32"
viewBox="0 0 33 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<rect
x="0.473389"
y="0.210144"
width="31.6787"
height="31.6787"
rx="13.0342"
fill="url(#pattern0_13_42)"
/>
<defs>
<pattern
id="pattern0_13_42"
patternContentUnits="objectBoundingBox"
width="1"
height="1"
>
<use
xlink:href="#image0_13_42"
transform="scale(0.005)"
/>
</pattern>
<image
id="image0_13_42"
width="200"
height="200"
xlink:href="data:image/png;base64,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"
/>
</defs>
</svg>
</span>
</div>
</div>
</div>
<!-- end header -->
<div class="filters">
<span class="tab active">All</span>
<span class="tab">Combos</span>
<span class="tab">Sliders</span>
<span class="tab">Classic</span>
<span class="tab">Cheese</span>
</div>
<!-- end filters -->
<div class="food_container" id="food_container">
</div>
<!-- food container -->
<div class="footer">
<ul>
<li class="home">
<svg
width="32"
height="32"
viewBox="0 0 32 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M26.9999 13.3333C26.9999 13.1145 26.9568 12.8977 26.873 12.6955C26.7893 12.4933 26.6665 12.3096 26.5117 12.1548C26.357 12.0001 26.1732 11.8773 25.971 11.7935C25.7688 11.7098 25.5521 11.6667 25.3332 11.6667C25.1144 11.6667 24.8976 11.7098 24.6954 11.7935C24.4932 11.8773 24.3095 12.0001 24.1547 12.1548C24 12.3096 23.8772 12.4933 23.7934 12.6955C23.7097 12.8977 23.6666 13.1145 23.6666 13.3333H26.9999ZM8.33323 13.3333C8.33323 12.8913 8.15763 12.4674 7.84507 12.1548C7.53251 11.8423 7.10859 11.6667 6.66656 11.6667C6.22453 11.6667 5.80061 11.8423 5.48805 12.1548C5.17549 12.4674 4.99989 12.8913 4.99989 13.3333H8.33323ZM26.8212 17.1787C27.1338 17.4913 27.5578 17.6669 27.9999 17.6669C28.442 17.6669 28.866 17.4913 29.1786 17.1787C29.4912 16.8661 29.6668 16.4421 29.6668 16C29.6668 15.5579 29.4912 15.1339 29.1786 14.8213L26.8212 17.1787ZM15.9999 4L17.1786 2.82133C17.0238 2.66652 16.84 2.54372 16.6378 2.45993C16.4356 2.37615 16.2188 2.33302 15.9999 2.33302C15.781 2.33302 15.5642 2.37615 15.362 2.45993C15.1597 2.54372 14.976 2.66652 14.8212 2.82133L15.9999 4ZM2.82123 14.8213C2.50863 15.1339 2.33301 15.5579 2.33301 16C2.33301 16.4421 2.50863 16.8661 2.82123 17.1787C3.13383 17.4913 3.55781 17.6669 3.99989 17.6669C4.44198 17.6669 4.86596 17.4913 5.17856 17.1787L2.82123 14.8213ZM9.33323 29.6667H22.6666V26.3333H9.33323V29.6667ZM26.9999 25.3333V13.3333H23.6666V25.3333H26.9999ZM8.33323 25.3333V13.3333H4.99989V25.3333H8.33323ZM29.1786 14.8213L17.1786 2.82133L14.8212 5.17867L26.8212 17.1787L29.1786 14.8213ZM14.8212 2.82133L2.82123 14.8213L5.17856 17.1787L17.1786 5.17867L14.8212 2.82133ZM22.6666 29.6667C23.8158 29.6667 24.918 29.2101 25.7307 28.3975C26.5433 27.5848 26.9999 26.4826 26.9999 25.3333H23.6666C23.6666 25.5985 23.5612 25.8529 23.3737 26.0404C23.1861 26.228 22.9318 26.3333 22.6666 26.3333V29.6667ZM9.33323 26.3333C9.06801 26.3333 8.81366 26.228 8.62612 26.0404C8.43858 25.8529 8.33323 25.5985 8.33323 25.3333H4.99989C4.99989 26.4826 5.45644 27.5848 6.2691 28.3975C7.08176 29.2101 8.18396 29.6667 9.33323 29.6667V26.3333Z"
fill="#FAF5F5"
/>
</svg>
</li>
<li class="profile">
<svg
width="32"
height="32"
viewBox="0 0 32 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15.9999 5.33334C17.4144 5.33334 18.771 5.89524 19.7712 6.89543C20.7713 7.89563 21.3333 9.25218 21.3333 10.6667C21.3333 12.0812 20.7713 13.4377 19.7712 14.4379C18.771 15.4381 17.4144 16 15.9999 16C14.5854 16 13.2289 15.4381 12.2287 14.4379C11.2285 13.4377 10.6666 12.0812 10.6666 10.6667C10.6666 9.25218 11.2285 7.89563 12.2287 6.89543C13.2289 5.89524 14.5854 5.33334 15.9999 5.33334ZM15.9999 8C15.2927 8 14.6144 8.28095 14.1143 8.78105C13.6142 9.28115 13.3333 9.95943 13.3333 10.6667C13.3333 11.3739 13.6142 12.0522 14.1143 12.5523C14.6144 13.0524 15.2927 13.3333 15.9999 13.3333C16.7072 13.3333 17.3854 13.0524 17.8855 12.5523C18.3856 12.0522 18.6666 11.3739 18.6666 10.6667C18.6666 9.95943 18.3856 9.28115 17.8855 8.78105C17.3854 8.28095 16.7072 8 15.9999 8ZM15.9999 17.3333C19.5599 17.3333 26.6666 19.1067 26.6666 22.6667V26.6667H5.33325V22.6667C5.33325 19.1067 12.4399 17.3333 15.9999 17.3333ZM15.9999 19.8667C12.0399 19.8667 7.86659 21.8133 7.86659 22.6667V24.1333H24.1333V22.6667C24.1333 21.8133 19.9599 19.8667 15.9999 19.8667Z"
fill="#FAF5F5"
/>
</svg>
</li>
<li class="plus">
<svg
width="32"
height="32"
viewBox="0 0 32 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M23.9999 13.3333H18.6666V8C18.6666 7.29275 18.3856 6.61448 17.8855 6.11438C17.3854 5.61428 16.7072 5.33333 15.9999 5.33333C15.2927 5.33333 14.6144 5.61428 14.1143 6.11438C13.6142 6.61448 13.3333 7.29275 13.3333 8L13.4279 13.3333H7.99992C7.29267 13.3333 6.6144 13.6143 6.1143 14.1144C5.6142 14.6145 5.33325 15.2928 5.33325 16C5.33325 16.7072 5.6142 17.3855 6.1143 17.8856C6.6144 18.3857 7.29267 18.6667 7.99992 18.6667L13.4279 18.572L13.3333 24C13.3333 24.7072 13.6142 25.3855 14.1143 25.8856C14.6144 26.3857 15.2927 26.6667 15.9999 26.6667C16.7072 26.6667 17.3854 26.3857 17.8855 25.8856C18.3856 25.3855 18.6666 24.7072 18.6666 24V18.572L23.9999 18.6667C24.7072 18.6667 25.3854 18.3857 25.8855 17.8856C26.3856 17.3855 26.6666 16.7072 26.6666 16C26.6666 15.2928 26.3856 14.6145 25.8855 14.1144C25.3854 13.6143 24.7072 13.3333 23.9999 13.3333Z"
fill="#FAF5F5"
/>
</svg>
</li>
<li class="message">
<svg
width="32"
height="32"
viewBox="0 0 32 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10.6667 12H21.3333M10.6667 17.3333H18.6667M24 5.33334C25.0609 5.33334 26.0783 5.75476 26.8284 6.50491C27.5786 7.25505 28 8.27247 28 9.33334V20C28 21.0609 27.5786 22.0783 26.8284 22.8284C26.0783 23.5786 25.0609 24 24 24H17.3333L10.6667 28V24H8C6.93913 24 5.92172 23.5786 5.17157 22.8284C4.42143 22.0783 4 21.0609 4 20V9.33334C4 8.27247 4.42143 7.25505 5.17157 6.50491C5.92172 5.75476 6.93913 5.33334 8 5.33334H24Z"
stroke="#FAF5F5"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</li>
<li class="heart">
<svg
width="32"
height="32"
viewBox="0 0 32 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10.0001 5.33333C5.95008 5.33333 2.66675 8.61666 2.66675 12.6667C2.66675 20 11.3334 26.6667 16.0001 28.2173C20.6667 26.6667 29.3334 20 29.3334 12.6667C29.3334 8.61666 26.0501 5.33333 22.0001 5.33333C19.5201 5.33333 17.3267 6.56466 16.0001 8.44933C15.3237 7.48625 14.4254 6.70027 13.381 6.15788C12.3366 5.61549 11.1769 5.33266 10.0001 5.33333Z"
stroke="#FAF5F5"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</li>
</ul>
</div>
<!-- end footer -->
</div>
<!-- food page -->
<div class="food_page" id="food_page">
</div>
<!-- payment page -->
<div class="payment_page" id="payment_page">
<div class="page_back">
<span class="back_arrow" id="back_arrow">
<svg
width="18"
height="12"
viewBox="0 0 18 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.24023 11.5547C5.93086 11.6883 5.57227 11.625 5.32617 11.3929L0.263672 6.6117C0.0949219 6.45349 0 6.23201 0 5.99998C0 5.76795 0.0949219 5.54646 0.263672 5.38826L5.32617 0.607009C5.57227 0.374977 5.93086 0.311696 6.24023 0.44529C6.54961 0.578884 6.75 0.884743 6.75 1.21873V3.74998H16.875C17.4973 3.74998 18 4.25271 18 4.87498V7.12498C18 7.74724 17.4973 8.24998 16.875 8.24998H6.75V10.7812C6.75 11.1187 6.54961 11.4211 6.24023 11.5547Z"
fill="#757575"
/>
</svg>
</span>
<span class="search_icon">
<svg
width="18"
height="17"
viewBox="0 0 18 17"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.1658 10.6846H11.3969L11.1244 10.4223C12.1113 9.28012 12.6536 7.82181 12.6524 6.31362C12.6524 5.06491 12.2814 3.84423 11.5863 2.80596C10.8912 1.76769 9.90313 0.958462 8.74717 0.480599C7.5912 0.00273559 6.31921 -0.122295 5.09204 0.121317C3.86487 0.36493 2.73765 0.966244 1.85291 1.84922C0.968172 2.73219 0.365658 3.85717 0.121559 5.0819C-0.122539 6.30662 0.00274105 7.57608 0.481558 8.72974C0.960375 9.8834 1.77122 10.8695 2.81157 11.5632C3.85191 12.257 5.07502 12.6272 6.32623 12.6272C7.89318 12.6272 9.33362 12.0542 10.4431 11.1023L10.7059 11.3742V12.1416L15.5722 16.9885L17.0224 15.5412L12.1658 10.6846ZM6.32623 10.6846C3.9028 10.6846 1.94653 8.73223 1.94653 6.31362C1.94653 3.89502 3.9028 1.94266 6.32623 1.94266C8.74966 1.94266 10.7059 3.89502 10.7059 6.31362C10.7059 8.73223 8.74966 10.6846 6.32623 10.6846Z"
fill="#757575"
/>
</svg>
</span>
</div>
<div class="order_summary_container">
<p><b>Order Summary</b></p>
<ul>
<li><p class="">Order</p> <p class="order_price" id="order_price">₹ 16.75</p></li>
<li><p class="">Taxes</p> <p class="order_taxes_price" id="order_taxes_price">₹ 01.65</p></li>
<li><p class="">Delivery fees</p> <p class="order_delivery_fees" id="order_delivery_fees">₹ 01.75</p></li>
<hr>
<li class="total"><p class=""><b>Total:</b></p> <p class="total_price" id="total_price"><b>₹ 20.15</b></p></li>
<li class="delivery_time"><p class="">Expected delivery time:</p> <p class="">15 - 20 mins</p></li>
</ul>
</div>
<div class="payment_method_container">
<p><b>Payment methods</b></p>
<div class="payment_method_card">
<img src="./assets/png-transparent-card-master-onli (1) 1.png" alt="card">
<span>
<p class="card"><b>Credit card</b></p>
<p>5105 **** **** 0505</p>
</span>
</div>
<div class="payment_method_card payment_method_card_secondery">
<img src="./assets/payment_method_card_visa-512 1.png" alt="card">
<span>
<p class="card"><b>Debit card</b></p>
<p>5105 **** **** 0505</p>
</span>
</div>
</div>
<div class="future_payment_checkbox">
<input type="checkbox" name="" id="" checked>
<p>Save card details for future payments</p>
</div>
<div class="pay_now_container">
<span>
<p class="price_text">Total Price</p>
<p class="price">₹ 20.15</p>
</span>
<button>Pay Now</button>
</div>
</div>
</main>
</div>
<!-- end mobile screen -->
<div class="coming-soon">
Please open on a desktop. Currently, not available on mobile.
</div>
</body>
<!-- food entries -->
<script type="module" src="./food_entries.js" defer></script>
<!-- index.js -->
<script type="module" src="./index.js" defer></script>
</html>