-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
540 lines (519 loc) · 36.9 KB
/
index.html
File metadata and controls
540 lines (519 loc) · 36.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
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="container">
<div class="py-5 text-center">
<img class="mb-4 d-block mx-auto"
src="http://techsciblog.com/wp-content/uploads/2019/06/Selfcheckout_ICON-1.gif" alt="gif" width="300">
<svg id="logo" class="mb-2 container" width="524" height="35" viewBox="0 0 524 35" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M22.005 26.025H8.32499L5.80499 33H1.48499L12.825 1.81501H17.55L28.845 33H24.525L22.005 26.025ZM20.835 22.695L15.165 6.85501L9.49499 22.695H20.835Z"
stroke="black" stroke-width="2" mask="url(#path-1-outside-1)" />
<path d="M37.8823 29.67H48.8623V33H33.7873V1.63501H37.8823V29.67Z" stroke="black" stroke-width="2"
mask="url(#path-1-outside-1)" />
<path
d="M57.3061 4.96501V15.45H68.7361V18.825H57.3061V29.625H70.0861V33H53.2111V1.59001H70.0861V4.96501H57.3061Z"
stroke="black" stroke-width="2" mask="url(#path-1-outside-1)" />
<path
d="M89.1074 17.34L98.7374 33H94.1024L86.5874 20.76L79.4324 33H74.8874L84.4724 17.34L74.8424 1.63501H79.4324L86.9924 13.92L94.1924 1.63501H98.7824L89.1074 17.34Z"
stroke="black" stroke-width="2" mask="url(#path-1-outside-1)" />
<path d="M104.862 1.63501H109.407L105.087 11.85H102.207L104.862 1.63501Z" stroke="black"
stroke-width="2" mask="url(#path-1-outside-1)" />
<path
d="M124.02 33.315C121.95 33.315 120.09 32.955 118.44 32.235C116.82 31.485 115.545 30.465 114.615 29.175C113.685 27.855 113.205 26.34 113.175 24.63H117.54C117.69 26.1 118.29 27.345 119.34 28.365C120.42 29.355 121.98 29.85 124.02 29.85C125.97 29.85 127.5 29.37 128.61 28.41C129.75 27.42 130.32 26.16 130.32 24.63C130.32 23.43 129.99 22.455 129.33 21.705C128.67 20.955 127.845 20.385 126.855 19.995C125.865 19.605 124.53 19.185 122.85 18.735C120.78 18.195 119.115 17.655 117.855 17.115C116.625 16.575 115.56 15.735 114.66 14.595C113.79 13.425 113.355 11.865 113.355 9.91501C113.355 8.20501 113.79 6.69001 114.66 5.37001C115.53 4.05001 116.745 3.03001 118.305 2.31001C119.895 1.59001 121.71 1.23001 123.75 1.23001C126.69 1.23001 129.09 1.96501 130.95 3.43501C132.84 4.90501 133.905 6.85501 134.145 9.28501H129.645C129.495 8.08501 128.865 7.03501 127.755 6.13501C126.645 5.20501 125.175 4.74001 123.345 4.74001C121.635 4.74001 120.24 5.19001 119.16 6.09001C118.08 6.96001 117.54 8.19001 117.54 9.78001C117.54 10.92 117.855 11.85 118.485 12.57C119.145 13.29 119.94 13.845 120.87 14.235C121.83 14.595 123.165 15.015 124.875 15.495C126.945 16.065 128.61 16.635 129.87 17.205C131.13 17.745 132.21 18.6 133.11 19.77C134.01 20.91 134.46 22.47 134.46 24.45C134.46 25.98 134.055 27.42 133.245 28.77C132.435 30.12 131.235 31.215 129.645 32.055C128.055 32.895 126.18 33.315 124.02 33.315Z"
stroke="black" stroke-width="2" mask="url(#path-1-outside-1)" />
<path
d="M150.954 17.295C150.954 14.235 151.644 11.49 153.024 9.06001C154.404 6.60001 156.279 4.68001 158.649 3.30001C161.049 1.92001 163.704 1.23001 166.614 1.23001C170.034 1.23001 173.019 2.05501 175.569 3.70501C178.119 5.35501 179.979 7.69501 181.149 10.725H176.244C175.374 8.83501 174.114 7.38001 172.464 6.36001C170.844 5.34001 168.894 4.83001 166.614 4.83001C164.424 4.83001 162.459 5.34001 160.719 6.36001C158.979 7.38001 157.614 8.83501 156.624 10.725C155.634 12.585 155.139 14.775 155.139 17.295C155.139 19.785 155.634 21.975 156.624 23.865C157.614 25.725 158.979 27.165 160.719 28.185C162.459 29.205 164.424 29.715 166.614 29.715C168.894 29.715 170.844 29.22 172.464 28.23C174.114 27.21 175.374 25.755 176.244 23.865H181.149C179.979 26.865 178.119 29.19 175.569 30.84C173.019 32.46 170.034 33.27 166.614 33.27C163.704 33.27 161.049 32.595 158.649 31.245C156.279 29.865 154.404 27.96 153.024 25.53C151.644 23.1 150.954 20.355 150.954 17.295Z"
stroke="black" stroke-width="2" mask="url(#path-1-outside-1)" />
<path
d="M211.409 1.63501V33H207.314V18.78H191.339V33H187.244V1.63501H191.339V15.405H207.314V1.63501H211.409Z"
stroke="black" stroke-width="2" mask="url(#path-1-outside-1)" />
<path
d="M222.497 4.96501V15.45H233.927V18.825H222.497V29.625H235.277V33H218.402V1.59001H235.277V4.96501H222.497Z"
stroke="black" stroke-width="2" mask="url(#path-1-outside-1)" />
<path
d="M239.943 17.295C239.943 14.235 240.633 11.49 242.013 9.06001C243.393 6.60001 245.268 4.68001 247.638 3.30001C250.038 1.92001 252.693 1.23001 255.603 1.23001C259.023 1.23001 262.008 2.05501 264.558 3.70501C267.108 5.35501 268.968 7.69501 270.138 10.725H265.233C264.363 8.83501 263.103 7.38001 261.453 6.36001C259.833 5.34001 257.883 4.83001 255.603 4.83001C253.413 4.83001 251.448 5.34001 249.708 6.36001C247.968 7.38001 246.603 8.83501 245.613 10.725C244.623 12.585 244.128 14.775 244.128 17.295C244.128 19.785 244.623 21.975 245.613 23.865C246.603 25.725 247.968 27.165 249.708 28.185C251.448 29.205 253.413 29.715 255.603 29.715C257.883 29.715 259.833 29.22 261.453 28.23C263.103 27.21 264.363 25.755 265.233 23.865H270.138C268.968 26.865 267.108 29.19 264.558 30.84C262.008 32.46 259.023 33.27 255.603 33.27C252.693 33.27 250.038 32.595 247.638 31.245C245.268 29.865 243.393 27.96 242.013 25.53C240.633 23.1 239.943 20.355 239.943 17.295Z"
stroke="black" stroke-width="2" mask="url(#path-1-outside-1)" />
<path
d="M293.244 33L280.329 18.69V33H276.234V1.63501H280.329V16.17L293.289 1.63501H298.464L284.244 17.34L298.599 33H293.244Z"
stroke="black" stroke-width="2" mask="url(#path-1-outside-1)" />
<path
d="M317.392 33.315C314.482 33.315 311.827 32.64 309.427 31.29C307.027 29.91 305.122 28.005 303.712 25.575C302.332 23.115 301.642 20.355 301.642 17.295C301.642 14.235 302.332 11.49 303.712 9.06001C305.122 6.60001 307.027 4.69501 309.427 3.34501C311.827 1.96501 314.482 1.27501 317.392 1.27501C320.332 1.27501 323.002 1.96501 325.402 3.34501C327.802 4.69501 329.692 6.58501 331.072 9.01501C332.452 11.445 333.142 14.205 333.142 17.295C333.142 20.385 332.452 23.145 331.072 25.575C329.692 28.005 327.802 29.91 325.402 31.29C323.002 32.64 320.332 33.315 317.392 33.315ZM317.392 29.76C319.582 29.76 321.547 29.25 323.287 28.23C325.057 27.21 326.437 25.755 327.427 23.865C328.447 21.975 328.957 19.785 328.957 17.295C328.957 14.775 328.447 12.585 327.427 10.725C326.437 8.83501 325.072 7.38001 323.332 6.36001C321.592 5.34001 319.612 4.83001 317.392 4.83001C315.172 4.83001 313.192 5.34001 311.452 6.36001C309.712 7.38001 308.332 8.83501 307.312 10.725C306.322 12.585 305.827 14.775 305.827 17.295C305.827 19.785 306.322 21.975 307.312 23.865C308.332 25.755 309.712 27.21 311.452 28.23C313.222 29.25 315.202 29.76 317.392 29.76Z"
stroke="black" stroke-width="2" mask="url(#path-1-outside-1)" />
<path
d="M342.553 1.63501V21.48C342.553 24.27 343.228 26.34 344.578 27.69C345.958 29.04 347.863 29.715 350.293 29.715C352.693 29.715 354.568 29.04 355.918 27.69C357.298 26.34 357.988 24.27 357.988 21.48V1.63501H362.083V21.435C362.083 24.045 361.558 26.25 360.508 28.05C359.458 29.82 358.033 31.14 356.233 32.01C354.463 32.88 352.468 33.315 350.248 33.315C348.028 33.315 346.018 32.88 344.218 32.01C342.448 31.14 341.038 29.82 339.988 28.05C338.968 26.25 338.458 24.045 338.458 21.435V1.63501H342.553Z"
stroke="black" stroke-width="2" mask="url(#path-1-outside-1)" />
<path d="M388.219 1.63501V4.96501H379.669V33H375.574V4.96501H366.979V1.63501H388.219Z" stroke="black"
stroke-width="2" mask="url(#path-1-outside-1)" />
<path d="M422.987 1.63501V4.96501H409.352V15.54H420.422V18.87H409.352V33H405.257V1.63501H422.987Z"
stroke="black" stroke-width="2" mask="url(#path-1-outside-1)" />
<path
d="M442.153 33.315C439.243 33.315 436.588 32.64 434.188 31.29C431.788 29.91 429.883 28.005 428.473 25.575C427.093 23.115 426.403 20.355 426.403 17.295C426.403 14.235 427.093 11.49 428.473 9.06001C429.883 6.60001 431.788 4.69501 434.188 3.34501C436.588 1.96501 439.243 1.27501 442.153 1.27501C445.093 1.27501 447.763 1.96501 450.163 3.34501C452.563 4.69501 454.453 6.58501 455.833 9.01501C457.213 11.445 457.903 14.205 457.903 17.295C457.903 20.385 457.213 23.145 455.833 25.575C454.453 28.005 452.563 29.91 450.163 31.29C447.763 32.64 445.093 33.315 442.153 33.315ZM442.153 29.76C444.343 29.76 446.308 29.25 448.048 28.23C449.818 27.21 451.198 25.755 452.188 23.865C453.208 21.975 453.718 19.785 453.718 17.295C453.718 14.775 453.208 12.585 452.188 10.725C451.198 8.83501 449.833 7.38001 448.093 6.36001C446.353 5.34001 444.373 4.83001 442.153 4.83001C439.933 4.83001 437.953 5.34001 436.213 6.36001C434.473 7.38001 433.093 8.83501 432.073 10.725C431.083 12.585 430.588 14.775 430.588 17.295C430.588 19.785 431.083 21.975 432.073 23.865C433.093 25.755 434.473 27.21 436.213 28.23C437.983 29.25 439.963 29.76 442.153 29.76Z"
stroke="black" stroke-width="2" mask="url(#path-1-outside-1)" />
<path
d="M479.824 33L472.354 20.175H467.404V33H463.309V1.63501H473.434C475.804 1.63501 477.799 2.04001 479.419 2.85001C481.069 3.66001 482.299 4.75501 483.109 6.13501C483.919 7.51501 484.324 9.09001 484.324 10.86C484.324 13.02 483.694 14.925 482.434 16.575C481.204 18.225 479.344 19.32 476.854 19.86L484.729 33H479.824ZM467.404 16.89H473.434C475.654 16.89 477.319 16.35 478.429 15.27C479.539 14.16 480.094 12.69 480.094 10.86C480.094 9.00001 479.539 7.56001 478.429 6.54001C477.349 5.52001 475.684 5.01001 473.434 5.01001H467.404V16.89Z"
stroke="black" stroke-width="2" mask="url(#path-1-outside-1)" />
<path
d="M522.502 1.86001V33H518.407V9.78001L508.057 33H505.177L494.782 9.73501V33H490.687V1.86001H495.097L506.617 27.6L518.137 1.86001H522.502Z"
stroke="black" stroke-width="2" mask="url(#path-1-outside-1)" />
</svg>
<p class="lead">Example of a simple checkout form with Apple products.
<img class="mx-auto mb-1" src="https://www.flaticon.com/svg/static/icons/svg/37/37150.svg" alt="apple"
width="19">
</p>
</div>
<div class="form-row">
<div class="col-md-4 order-md-2 mb-4">
<h5 class="d-flex justify-content-between align-items-center mb-3 mt-3">
<span>Your cart</span>
<span class="badge badge-pill badge-primary">4</span>
</h5>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
<div>
<h6>13-inch MacBook Pro - Space Gray</h6>
<img src="https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/mbp13touch-space-select-202005?wid=800&hei=800&fmt=jpeg&qlt=80&op_usm=0.5,1.5&fit=constrain&.v=1587460552755"
alt="Mac" width="50">
<small class="ml-4 badge badge-primary badge-pill">1</small>
</div>
<span>$1,999.00</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<div>
<h6>AppleCare+ for MacBook Pro</h6>
<img src="https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/APPLECARE-plus-201508?wid=326&hei=332&fmt=png-alpha&qlt=80&.v=1495312160064"
alt="AppleCareMac" width="50">
<small class="ml-4 badge badge-primary badge-pill">1</small>
</div>
<span>$269.00</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<div>
<h6>iPhone 11 Pro Max 512GB Midnight Green</h6>
<img src="https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/iphone-11-pro-select-2019-family?wid=882&hei=1058&fmt=jpeg&qlt=80&op_usm=0.5,0.5&.v=1586586488946"
alt="Phone" width="50">
<small class="ml-4 badge badge-primary badge-pill">1</small>
</div>
<span>$1,449.00</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<div>
<h6>AppleCare+ for iPhone 11 Pro</h6>
<img src="https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/APPLECARE-plus-201508?wid=326&hei=332&fmt=png-alpha&qlt=80&.v=1495312160064"
alt="AppleCarePhone" width="50">
<small class="ml-4 badge badge-primary badge-pill">1</small>
</div>
<span>$269.00</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Tax
<span>$347.55</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<h5>Total</h5>
<span>$4,263.55</span>
</li>
</ul>
</div>
<div class="col-md-8 order-md-1">
<h1 class="col-mb-4">Billing Address</h1>
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="firstName" class="form-lable">First Name</label>
<input type="text" class="form-control" id="firstName" placeholder="John" maxlength="14"
required>
<div class="invalid-feedback">
Please enter First Name.
<div class="valid-tooltip">
Looks good!
</div>
</div>
</div>
<div class="col-md-6 mb-3">
<label for="lastName" class="form-lable">Last Name</label>
<input type="text" class="form-control" id="lastName" placeholder="Appleseed" maxlength="20"
required>
<div class="invalid-feedback">
Please enter Last Name.
<div class="valid-tooltip">
Looks good!
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="userName" class="form-lable">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="userNamehold">@</span>
</div>
<input type="text" class="form-control" id="userName" placeholder="Username"
aria-describedby="userNamehold" maxlength="30" required>
</div>
<div class="invalid-feedback">
Please enter Username.
<div class="valid-tooltip">
Looks good!
</div>
</div>
</div>
<div class="col-md-6 mb-3">
<label for="emailaddress" class="form-lable">Email Address</label>
<input type="email" class="form-control" id="emailaddress"
placeholder="John.Appleseed@example.com" required>
<div class="invalid-feedback">
Please enter Email Address.
<div class="valid-tooltip">
Looks good!
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="address" class="form-lable">Address</label>
<input type="text" class="form-control" id="address" placeholder="103 Prince St"
maxlength="30" required>
<div class="invalid-feedback">
Please enter Address.
<div class="valid-tooltip">
Looks good!
</div>
</div>
</div>
<div class="col-md-6 mb-3">
<label for="address2" class="form-lable">Apt, Suite, Building
<span class="md-5 text-muted">(Optional)</span>
</label>
<input type="text" class="form-control" id="Apt" placeholder="Apt 2F" maxlength="30">
</div>
</div>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="country" class="form-lable">Country/Region</label>
<select value="US" class="custom-select" id="Country" required>
<option value="AU">Australia</option>
<option value="CA">Canada</option>
<option value="CN">China</option>
<option value="FR">France</option>
<option value="DE">Germany</option>
<option value="IT">Italy</option>
<option value="MX">Mexico</option>
<option value="NL">Netherlands</option>
<option value="NZ">New Zealand</option>
<option value="ES">Spain</option>
<option value="SE">Sweden</option>
<option value="GB">United Kingdom</option>
<option value="US" selected="true">United States</option>
</select>
<div class="invalid-feedback">
Please select a Country.
<div class="valid-tooltip">
Looks good!
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<label for="states" class="form-lable">States</label>
<input type="text" class="form-control" id="states" placeholder="State" maxlength="30"
required>
<div class="invalid-feedback">
Please enter State.
<div class="valid-tooltip">
Looks good!
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<label for="zip" class="form-lable">Zip Code</label>
<input type="text" class="form-control" id="zip" placeholder="Zip Code" maxlength="10"
required>
<div class="invalid-feedback">
Please enter Zip code.
<div class="valid-tooltip">
Looks good!
</div>
</div>
</div>
</div>
<hr class="mb-3">
<div class="accordion" id="collapseShipping">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="shippingAddress"
data-toggle="collapse" data-target="#SameAsShippingAddress" aria-expanded="true"
aria-controls="SameAsShippingAddress" onclick="ship()" checked>
<label for="shippingAddress" class="custom-control-label">Shipping address is the same as my
billing
address</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="Saveinfo">
<label for="Saveinfo" class="custom-control-label">Save this information for next
time</label>
</div>
<hr class="mb-3">
<div class="collapse" id="SameAsShippingAddress" data-parent="#collapseShipping">
<h1 class="col-mb-4">
Shipping Address</h1>
<legend class="col-mb-3">Enter your name and address:</legend>
<div class="form-row">
<div class="col-md-6 mb-3">
<input type="text" class="form-control" id="firstNameship" placeholder="First Name"
maxlength="14" required>
<div class="invalid-feedback">
Please enter First Name.
<div class="valid-tooltip">
Looks good!
</div>
</div>
</div>
<div class="col-md-6 mb-3">
<input type="text" class="form-control" id="lastNameship" placeholder="Last Name"
maxlength="20" required>
<div class="invalid-feedback">
Please enter Last Name.
<div class="valid-tooltip">
Looks good!
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<input type="text" class="form-control" id="addressship"
placeholder="Street Address" maxlength="30" required>
<div class="invalid-feedback">
Please enter Address.
<div class="valid-tooltip">
Looks good!
</div>
</div>
</div>
<div class="col-md-6 mb-3">
<input type="text" class="form-control" id="Apt"
placeholder="Apt, Suite, Building (Optional)" maxl>
</div>
</div>
<div class="form-row">
<div class="col-md-4 mb-3">
<select value="US" class="custom-select" id="Country">
<option value="AU">Australia</option>
<option value="CA">Canada</option>
<option value="CN">China</option>
<option value="FR">France</option>
<option value="DE">Germany</option>
<option value="IT">Italy</option>
<option value="MX">Mexico</option>
<option value="NL">Netherlands</option>
<option value="NZ">New Zealand</option>
<option value="ES">Spain</option>
<option value="SE">Sweden</option>
<option value="GB">United Kingdom</option>
<option value="US" selected="true">United States</option>
</select>
<div class="invalid-feedback">
Please select a Country.
<div class="valid-tooltip">
Looks good!
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" id="statesship" placeholder="State"
maxlength="30" required>
<div class="invalid-feedback">
Please enter State.
<div class="valid-tooltip">
Looks good!
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" id="zipship" placeholder="Zip Code"
maxlength="10" required>
<div class="invalid-feedback">
Please enter Zip code.
<div class="valid-tooltip">
Looks good!
</div>
</div>
</div>
</div>
<hr class="mb-3">
</div>
</div>
<h1 class="col-mb-4 ">Payment</h1>
<div class="accordion" id="collapsePayment">
<label class="form-row">
<input type="radio" name="check" class="card-input-element d-none" id="CardPayment"
data-toggle="collapse" data-target="#Cardinfo" aria-expanded="true"
aria-controls="Cardinfo" onclick="pay()" checked>
<div class="card card-body">
<h5 class="">Credit or Debit Card</h5>
<p class="small">Apple Card, Visa, Mastercard, AMEX, Discover, UnionPay</p>
</div>
</label>
<div class="col-mb-4 mb-3 collapse show" id="Cardinfo" data-parent="#collapsePayment">
<p>Enter your card information:</p>
<div class="form-row">
<div class="col-md-6 mb-3">
<input type="text" class="form-control" id="cardName"
placeholder="Full Name Display on Card" maxlength="34" required>
<div class="invalid-feedback">
Please enter Full Name Display on Card.
<div class="valid-tooltip">
Looks good!
</div>
</div>
</div>
<div class="col-md-6 mb-3">
<input type="text" class="form-control" id="cards"
placeholder="Credit/Debit Card Number" maxlength="16" required>
<div class="invalid-feedback">
Please enter Card Number.
<div class="valid-tooltip">
Looks good!
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" id="expiration" placeholder="MM/YY"
maxlength="5" required>
<div class="invalid-feedback">
Please enter MM/YY.
<div class="valid-tooltip">
Looks good!
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" id="cvv" placeholder="CVV" maxlength="4"
required>
<div class="invalid-feedback">
Please enter CVV.
<div class="valid-tooltip">
Looks good!
</div>
</div>
</div>
</div>
</div>
<label class="form-row">
<input type="radio" name="check" class="card-input-element d-none" id="ApplePay">
<div class="card card-body" data-toggle="collapse" data-target="#collapseApplePay"
aria-expanded="false" aria-control="collapseApplePay">
<img src="https://www.apple.com/v/apple-pay/m/images/shared/hero_logo__eo41ol524ga6_large_2x.png"
alt="Apple" width="150">
</div>
<div id="collapseApplePay" aria-labelledby="ApplePay" data-parent="#collapsePayment">
</div>
</label>
<label class="form-row">
<input type="radio" name="check" class="card-input-element d-none" id="PayPal">
<div class="card card-body" data-toggle="collapse" data-target="#collapsePay"
aria-expanded="false" aria-control="collapsePay">
<img src="https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/paymentoptions-paypal-logo?hei=100&fmt=png-alpha&op_usm=0.5,0.5&qlt=80&.v=1574113296662"
alt="Pay" width="250">
</div>
<div id="collapsePay" aria-labelledby="PayPal" data-parent="#collapsePayment">
</div>
</label>
</div>
<div class="col-md-16">
<button class="btn btn-primary btn-lg btn-block mb-4" type="submit">Continue to
checkout</button>
</div>
</form>
</div>
</div>
</div>
<div class="card-footer text-muted text-center align-items-center">
© 2020 Alex Zhen
<img class="ml-4"
src="https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/country-icon-us?wid=32&hei=32&fmt=png-alpha&op_usm=0.5,0.5&qlt=80&.v=0"
alt="Lenguage" width="20">
United States
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function () {
'use strict';
window.addEventListener('load', function () {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function (form) {
form.addEventListener('submit', function (event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
<script>
function ship() {
if (document.getElementById("shippingAddress").checked === true) {
document.getElementById("firstNameship").required = false;
document.getElementById("lastNameship").required = false;
document.getElementById("addressship").required = false;
document.getElementById("statesship").required = false;
document.getElementById("zipship").required = false;
console.log("check")
}
else {
document.getElementById("firstNameship").required = true;
document.getElementById("lastNameship").required = true;
document.getElementById("addressship").required = true;
document.getElementById("statesship").required = true;
document.getElementById("zipship").required = true;
console.log("uncheck")
}
}
</script>
<script>
function pay() {
if (document.getElementById("CardPayment").checked === true) {
document.getElementById("cardName").required = false;
document.getElementById("cards").required = false;
document.getElementById("expiration").required = false;
document.getElementById("cvv").required = false;
}
else {
document.getElementById("cardName").required = true;
document.getElementById("cards").required = true;
document.getElementById("expiration").required = true;
document.getElementById("cvv").required = true;
}
}
</script>
</body>
</html>