-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
667 lines (542 loc) · 61 KB
/
index.html
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
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>Square Footage Calculator</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<meta name="description" content="Square footage calculator finds the surface area (square footage) of various shapes and calculates associated construction costs. It can be used as a room area calculator.">
<link rel="preload" href="./assets/fonts/inter-v12-latin-regular.woff2" as="font" crossorigin type="font/woff2">
<link rel="preload" href="./assets/fonts/inter-v12-latin-500.woff2" as="font" crossorigin type="font/woff2">
<link rel="preload" href="./assets/fonts/inter-v12-latin-600.woff2" as="font" crossorigin type="font/woff2">
<link rel="preload" href="./assets/fonts/inter-v12-latin-800.woff2" as="font" crossorigin type="font/woff2">
<script type="text/javascript">
window._ = document.getElementById.bind(document);
window.$ = document.querySelector.bind(document);
window.$$ = document.querySelectorAll.bind(document);
window.defaultSystem = "imperial";
localStorage.setItem("theme", "light");
</script>
<link rel="stylesheet" href="./assets/css/main.min.css" />
<script src="./assets/js/all-calculators.js" defer></script>
</head>
<body style="background-color: transparent !important; min-height: 0 !important">
<div style="width: 100%;">
<div style="width:350px;float:left;padding: 15px;">
<div class="calculator-settings">
<div class="calculator-setting" id="calculator_form">
<div class="calculator-content calculator-content--bookmarks">
<button class="tab-item tab-item--active" onclick="switchTab(event, 0)">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.5 17H0.5V3H19.5V17Z" fill="#E5E7EB" stroke="#9CA3AF"></path>
</svg>
</button>
<button class="tab-item" onclick="switchTab(event, 1)">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.5 8V7.5H14H6H5.5V8V12V12.5H6H14H14.5V12V8ZM0.5 17V3H19.5V17H0.5Z" fill="#E5E7EB" stroke="#9CA3AF"></path>
</svg>
</button>
<button class="tab-item" onclick="switchTab(event, 2)">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.5 10C0.5 4.7533 4.7533 0.5 10 0.5C15.2467 0.5 19.5 4.7533 19.5 10C19.5 15.2467 15.2467 19.5 10 19.5C4.7533 19.5 0.5 15.2467 0.5 10Z" fill="#E5E7EB" stroke="#9CA3AF"></path>
</svg>
</button>
<button class="tab-item" onclick="switchTab(event, 3)">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.5 10C5.5 11.4441 5.82269 12.6009 6.61091 13.3891C7.39913 14.1773 8.55586 14.5 10 14.5C11.4441 14.5 12.6009 14.1773 13.3891 13.3891C14.1773 12.6009 14.5 11.4441 14.5 10C14.5 8.55586 14.1773 7.39913 13.3891 6.61091C12.6009 5.82269 11.4441 5.5 10 5.5C8.55586 5.5 7.39913 5.82269 6.61091 6.61091C5.82269 7.39913 5.5 8.55586 5.5 10ZM0.5 10C0.5 4.7533 4.7533 0.5 10 0.5C15.2467 0.5 19.5 4.7533 19.5 10C19.5 15.2467 15.2467 19.5 10 19.5C4.7533 19.5 0.5 15.2467 0.5 10Z" fill="#E5E7EB" stroke="#9CA3AF"></path>
</svg>
</button>
<button class="tab-item" onclick="switchTab(event, 4)">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.842271 18.6667L10 1.87751L19.1577 18.6667H0.842271Z" fill="#E5E7EB" stroke="#9CA3AF"></path>
</svg>
</button>
<button class="tab-item" onclick="switchTab(event, 5)">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.693713 17.8333L5.36038 3.83334H14.6396L19.3063 17.8333H0.693713Z" fill="#E5E7EB" stroke="#9CA3AF"></path>
</svg>
</button>
</div>
<div class="calculator-content col tab tab--active" data-tab="0">
<div class="calculator-content__geometry">
<svg width="272" height="108" viewBox="0 0 272 108" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="73.5" y="22.5" width="113" height="79" fill="#F5F3FF" stroke="#7C3AED"></rect>
<path d="M127.847 16.1534C127.432 16.1534 127.055 16.0753 126.717 15.919C126.379 15.7599 126.111 15.5312 125.912 15.233C125.713 14.9318 125.614 14.5682 125.614 14.142C125.614 13.767 125.688 13.4631 125.835 13.2301C125.983 12.9943 126.18 12.8097 126.428 12.6761C126.675 12.5426 126.947 12.4432 127.246 12.3778C127.547 12.3097 127.849 12.2557 128.153 12.2159C128.551 12.1648 128.874 12.1264 129.121 12.1009C129.371 12.0724 129.553 12.0256 129.666 11.9602C129.783 11.8949 129.841 11.7812 129.841 11.6193V11.5852C129.841 11.1648 129.726 10.8381 129.496 10.6051C129.268 10.3722 128.923 10.2557 128.46 10.2557C127.98 10.2557 127.604 10.3608 127.331 10.571C127.058 10.7812 126.866 11.0057 126.756 11.2443L125.801 10.9034C125.972 10.5057 126.199 10.196 126.483 9.97443C126.77 9.75 127.082 9.59375 127.42 9.50568C127.761 9.41477 128.097 9.36932 128.426 9.36932C128.636 9.36932 128.878 9.39489 129.151 9.44602C129.426 9.49432 129.692 9.59517 129.947 9.74858C130.206 9.90199 130.42 10.1335 130.591 10.4432C130.761 10.7528 130.847 11.1676 130.847 11.6875V16H129.841V15.1136H129.79C129.722 15.2557 129.608 15.4077 129.449 15.5696C129.29 15.7315 129.078 15.8693 128.814 15.983C128.55 16.0966 128.227 16.1534 127.847 16.1534ZM128 15.25C128.398 15.25 128.733 15.1719 129.006 15.0156C129.281 14.8594 129.489 14.6577 129.628 14.4105C129.77 14.1634 129.841 13.9034 129.841 13.6307V12.7102C129.798 12.7614 129.705 12.8082 129.56 12.8509C129.418 12.8906 129.253 12.9261 129.065 12.9574C128.881 12.9858 128.7 13.0114 128.524 13.0341C128.351 13.054 128.21 13.071 128.102 13.0852C127.841 13.1193 127.597 13.1747 127.369 13.2514C127.145 13.3253 126.963 13.4375 126.824 13.5881C126.688 13.7358 126.619 13.9375 126.619 14.1932C126.619 14.5426 126.749 14.8068 127.007 14.9858C127.268 15.1619 127.599 15.25 128 15.25Z" fill="#7C3AED"></path>
<path d="M127.847 16.1534C127.432 16.1534 127.055 16.0753 126.717 15.919C126.379 15.7599 126.111 15.5312 125.912 15.233C125.713 14.9318 125.614 14.5682 125.614 14.142C125.614 13.767 125.688 13.4631 125.835 13.2301C125.983 12.9943 126.18 12.8097 126.428 12.6761C126.675 12.5426 126.947 12.4432 127.246 12.3778C127.547 12.3097 127.849 12.2557 128.153 12.2159C128.551 12.1648 128.874 12.1264 129.121 12.1009C129.371 12.0724 129.553 12.0256 129.666 11.9602C129.783 11.8949 129.841 11.7812 129.841 11.6193V11.5852C129.841 11.1648 129.726 10.8381 129.496 10.6051C129.268 10.3722 128.923 10.2557 128.46 10.2557C127.98 10.2557 127.604 10.3608 127.331 10.571C127.058 10.7812 126.866 11.0057 126.756 11.2443L125.801 10.9034C125.972 10.5057 126.199 10.196 126.483 9.97443C126.77 9.75 127.082 9.59375 127.42 9.50568C127.761 9.41477 128.097 9.36932 128.426 9.36932C128.636 9.36932 128.878 9.39489 129.151 9.44602C129.426 9.49432 129.692 9.59517 129.947 9.74858C130.206 9.90199 130.42 10.1335 130.591 10.4432C130.761 10.7528 130.847 11.1676 130.847 11.6875V16H129.841V15.1136H129.79C129.722 15.2557 129.608 15.4077 129.449 15.5696C129.29 15.7315 129.078 15.8693 128.814 15.983C128.55 16.0966 128.227 16.1534 127.847 16.1534ZM128 15.25C128.398 15.25 128.733 15.1719 129.006 15.0156C129.281 14.8594 129.489 14.6577 129.628 14.4105C129.77 14.1634 129.841 13.9034 129.841 13.6307V12.7102C129.798 12.7614 129.705 12.8082 129.56 12.8509C129.418 12.8906 129.253 12.9261 129.065 12.9574C128.881 12.9858 128.7 13.0114 128.524 13.0341C128.351 13.054 128.21 13.071 128.102 13.0852C127.841 13.1193 127.597 13.1747 127.369 13.2514C127.145 13.3253 126.963 13.4375 126.824 13.5881C126.688 13.7358 126.619 13.9375 126.619 14.1932C126.619 14.5426 126.749 14.8068 127.007 14.9858C127.268 15.1619 127.599 15.25 128 15.25Z" fill="#7C3AED"></path>
<path d="M192.057 66V57.2727H193.062V60.4943H193.148C193.222 60.3807 193.324 60.2358 193.455 60.0597C193.588 59.8807 193.778 59.7216 194.026 59.5824C194.276 59.4403 194.614 59.3693 195.04 59.3693C195.591 59.3693 196.077 59.5071 196.497 59.7827C196.918 60.0582 197.246 60.4489 197.482 60.9545C197.717 61.4602 197.835 62.0568 197.835 62.7443C197.835 63.4375 197.717 64.0384 197.482 64.5469C197.246 65.0526 196.919 65.4446 196.501 65.723C196.084 65.9986 195.602 66.1364 195.057 66.1364C194.636 66.1364 194.3 66.0668 194.047 65.9276C193.794 65.7855 193.599 65.625 193.463 65.446C193.327 65.2642 193.222 65.1136 193.148 64.9943H193.028V66H192.057ZM193.045 62.7273C193.045 63.2216 193.118 63.6577 193.263 64.0355C193.408 64.4105 193.619 64.7045 193.898 64.9176C194.176 65.1278 194.517 65.233 194.92 65.233C195.341 65.233 195.692 65.1222 195.973 64.9006C196.257 64.6761 196.47 64.375 196.612 63.9972C196.757 63.6165 196.83 63.1932 196.83 62.7273C196.83 62.267 196.759 61.8523 196.616 61.483C196.477 61.1108 196.266 60.8168 195.982 60.6009C195.7 60.3821 195.347 60.2727 194.92 60.2727C194.511 60.2727 194.168 60.3764 193.889 60.5838C193.611 60.7884 193.401 61.0753 193.259 61.4446C193.116 61.8111 193.045 62.2386 193.045 62.7273Z" fill="#7C3AED"></path>
</svg>
</div>
<div class="input-wrapper row">
<label class="input col ">
<p class="input__title">Length (a)</p>
<div class="input-field row">
<input type="text" class="input-field__input imperial-system-item" id="length_a_imperial" data-target="length_a" data-formula="value * 0.393701" value="19.29" onchange="sysnumconv(this)" />
<span class="input-field__hint imperial-system-item">inches</span>
<input type="text" class="input-field__input metric-system-item system-item-hidden" id="length_a" data-target="length_a" data-formula="value / 0.393701" value="49" onchange="sysnumconv(this)" />
<span class="input-field__hint metric-system-item system-item-hidden">cm</span>
</div>
</label>
</div>
<div class="input-wrapper row">
<label class="input col ">
<p class="input__title">Width (a)</p>
<div class="input-field row">
<input type="text" class="input-field__input imperial-system-item" id="width_a_imperial" data-target="width_a" data-formula="value * 0.393701" value="37.40" onchange="sysnumconv(this)" />
<span class="input-field__hint imperial-system-item">inches</span>
<input type="text" class="input-field__input metric-system-item system-item-hidden" id="width_a" data-target="width_a" data-formula="value / 0.393701" value="95" onchange="sysnumconv(this)" />
<span class="input-field__hint metric-system-item system-item-hidden">cm</span>
</div>
</label>
</div>
</div>
<div class="calculator-content col tab" data-tab="1">
<div class="calculator-content__geometry">
<svg width="272" height="108" viewBox="0 0 272 108" fill="none" xmlns="http://www.w3.org/2000/svg" data-x-show="tabs==='two'">
<rect x="73.5" y="22.5" width="113" height="79" fill="#F5F3FF" stroke="#7C3AED"></rect>
<rect x="89.5" y="38.5" width="81" height="47" fill="#fff" stroke="#7C3AED"></rect>
<path d="M127.847 16.1534C127.432 16.1534 127.055 16.0753 126.717 15.919C126.379 15.7599 126.111 15.5312 125.912 15.233C125.713 14.9318 125.614 14.5682 125.614 14.142C125.614 13.767 125.688 13.4631 125.835 13.2301C125.983 12.9943 126.18 12.8097 126.428 12.6761C126.675 12.5426 126.947 12.4432 127.246 12.3778C127.547 12.3097 127.849 12.2557 128.153 12.2159C128.551 12.1648 128.874 12.1264 129.121 12.1009C129.371 12.0724 129.553 12.0256 129.666 11.9602C129.783 11.8949 129.841 11.7812 129.841 11.6193V11.5852C129.841 11.1648 129.726 10.8381 129.496 10.6051C129.268 10.3722 128.923 10.2557 128.46 10.2557C127.98 10.2557 127.604 10.3608 127.331 10.571C127.058 10.7812 126.866 11.0057 126.756 11.2443L125.801 10.9034C125.972 10.5057 126.199 10.196 126.483 9.97443C126.77 9.75 127.082 9.59375 127.42 9.50568C127.761 9.41477 128.097 9.36932 128.426 9.36932C128.636 9.36932 128.878 9.39489 129.151 9.44602C129.426 9.49432 129.692 9.59517 129.947 9.74858C130.206 9.90199 130.42 10.1335 130.591 10.4432C130.761 10.7528 130.847 11.1676 130.847 11.6875V16H129.841V15.1136H129.79C129.722 15.2557 129.608 15.4077 129.449 15.5696C129.29 15.7315 129.078 15.8693 128.814 15.983C128.55 16.0966 128.227 16.1534 127.847 16.1534ZM128 15.25C128.398 15.25 128.733 15.1719 129.006 15.0156C129.281 14.8594 129.489 14.6577 129.628 14.4105C129.77 14.1634 129.841 13.9034 129.841 13.6307V12.7102C129.798 12.7614 129.705 12.8082 129.56 12.8509C129.418 12.8906 129.253 12.9261 129.065 12.9574C128.881 12.9858 128.7 13.0114 128.524 13.0341C128.351 13.054 128.21 13.071 128.102 13.0852C127.841 13.1193 127.597 13.1747 127.369 13.2514C127.145 13.3253 126.963 13.4375 126.824 13.5881C126.688 13.7358 126.619 13.9375 126.619 14.1932C126.619 14.5426 126.749 14.8068 127.007 14.9858C127.268 15.1619 127.599 15.25 128 15.25Z" fill="#7C3AED"></path>
<path d="M130.403 97L128.409 90.4545H129.466L130.881 95.4659H130.949L132.347 90.4545H133.42L134.801 95.4489H134.869L136.284 90.4545H137.341L135.347 97H134.358L132.926 91.9716H132.824L131.392 97H130.403Z" fill="#7C3AED"></path>
<path d="M192.057 66V57.2727H193.062V60.4943H193.148C193.222 60.3807 193.324 60.2358 193.455 60.0597C193.588 59.8807 193.778 59.7216 194.026 59.5824C194.276 59.4403 194.614 59.3693 195.04 59.3693C195.591 59.3693 196.077 59.5071 196.497 59.7827C196.918 60.0582 197.246 60.4489 197.482 60.9545C197.717 61.4602 197.835 62.0568 197.835 62.7443C197.835 63.4375 197.717 64.0384 197.482 64.5469C197.246 65.0526 196.919 65.4446 196.501 65.723C196.084 65.9986 195.602 66.1364 195.057 66.1364C194.636 66.1364 194.3 66.0668 194.047 65.9276C193.794 65.7855 193.599 65.625 193.463 65.446C193.327 65.2642 193.222 65.1136 193.148 64.9943H193.028V66H192.057ZM193.045 62.7273C193.045 63.2216 193.118 63.6577 193.263 64.0355C193.408 64.4105 193.619 64.7045 193.898 64.9176C194.176 65.1278 194.517 65.233 194.92 65.233C195.341 65.233 195.692 65.1222 195.973 64.9006C196.257 64.6761 196.47 64.375 196.612 63.9972C196.757 63.6165 196.83 63.1932 196.83 62.7273C196.83 62.267 196.759 61.8523 196.616 61.483C196.477 61.1108 196.266 60.8168 195.982 60.6009C195.7 60.3821 195.347 60.2727 194.92 60.2727C194.511 60.2727 194.168 60.3764 193.889 60.5838C193.611 60.7884 193.401 61.0753 193.259 61.4446C193.116 61.8111 193.045 62.2386 193.045 62.7273Z" fill="#7C3AED"></path>
<path d="M122.354 86.6464C122.158 86.4512 121.842 86.4512 121.646 86.6464L118.464 89.8284C118.269 90.0237 118.269 90.3403 118.464 90.5355C118.66 90.7308 118.976 90.7308 119.172 90.5355L122 87.7071L124.828 90.5355C125.024 90.7308 125.34 90.7308 125.536 90.5355C125.731 90.3403 125.731 90.0237 125.536 89.8284L122.354 86.6464ZM121.646 100.354C121.842 100.549 122.158 100.549 122.354 100.354L125.536 97.1716C125.731 96.9763 125.731 96.6597 125.536 96.4645C125.34 96.2692 125.024 96.2692 124.828 96.4645L122 99.2929L119.172 96.4645C118.976 96.2692 118.66 96.2692 118.464 96.4645C118.269 96.6597 118.269 96.9763 118.464 97.1716L121.646 100.354ZM121.5 87L121.5 100L122.5 100L122.5 87L121.5 87Z" fill="#7C3AED"></path>
</svg>
</div>
<div class="input-wrapper row">
<label class="input col ">
<p class="input__title">Length (b)</p>
<div class="input-field row">
<input type="text" class="input-field__input imperial-system-item" id="length_b_imperial" data-target="length_b" data-formula="value * 0.393701" value="19.29" onchange="sysnumconv(this)" />
<span class="input-field__hint imperial-system-item">inches</span>
<input type="text" class="input-field__input metric-system-item system-item-hidden" id="length_b" data-target="length_b" data-formula="value / 0.393701" value="49" onchange="sysnumconv(this)" />
<span class="input-field__hint metric-system-item system-item-hidden">cm</span>
</div>
</label>
</div>
<div class="input-wrapper row">
<label class="input col ">
<p class="input__title">Width (b)</p>
<div class="input-field row">
<input type="text" class="input-field__input imperial-system-item" id="width_b_imperial" data-target="width_b" data-formula="value * 0.393701" value="19.29" onchange="sysnumconv(this)" />
<span class="input-field__hint imperial-system-item">inches</span>
<input type="text" class="input-field__input metric-system-item system-item-hidden" id="width_b" data-target="width_b" data-formula="value / 0.393701" value="49" onchange="sysnumconv(this)" />
<span class="input-field__hint metric-system-item system-item-hidden">cm</span>
</div>
</label>
<label class="input col ">
<p class="input__title">Border (b)</p>
<div class="input-field row">
<input type="text" class="input-field__input imperial-system-item" id="border_b_imperial" data-target="border_b" data-formula="value * 0.393701" value="18" onchange="sysnumconv(this)" />
<span class="input-field__hint imperial-system-item">inches</span>
<input type="text" class="input-field__input metric-system-item system-item-hidden" id="border_b" data-target="border_b" data-formula="value / 0.393701" value="45" onchange="sysnumconv(this)" />
<span class="input-field__hint metric-system-item system-item-hidden">cm</span>
</div>
</label>
</div>
</div>
<div class="calculator-content col tab" data-tab="2">
<div class="calculator-content__geometry">
<svg width="272" height="108" viewBox="0 0 272 108" fill="none" xmlns="http://www.w3.org/2000/svg" data-x-show="tabs==='three'">
<circle cx="136" cy="54" r="51.5" fill="#F5F3FF" stroke="#7C3AED"></circle>
<path d="M85.5757 53.5757C85.3414 53.8101 85.3414 54.1899 85.5757 54.4243L89.3941 58.2426C89.6284 58.477 90.0083 58.477 90.2426 58.2426C90.477 58.0083 90.477 57.6284 90.2426 57.3941L86.8485 54L90.2426 50.6059C90.477 50.3716 90.477 49.9917 90.2426 49.7574C90.0083 49.523 89.6284 49.523 89.3941 49.7574L85.5757 53.5757ZM186.424 54.4243C186.659 54.1899 186.659 53.8101 186.424 53.5757L182.606 49.7574C182.372 49.523 181.992 49.523 181.757 49.7574C181.523 49.9917 181.523 50.3716 181.757 50.6059L185.151 54L181.757 57.3941C181.523 57.6284 181.523 58.0083 181.757 58.2426C181.992 58.477 182.372 58.477 182.606 58.2426L186.424 54.4243ZM86 54.6H186V53.4H86V54.6Z" fill="#7C3AED"></path>
<path d="M135.392 44.1364C134.847 44.1364 134.365 43.9986 133.947 43.723C133.53 43.4446 133.203 43.0526 132.967 42.5469C132.732 42.0384 132.614 41.4375 132.614 40.7443C132.614 40.0568 132.732 39.4602 132.967 38.9545C133.203 38.4489 133.531 38.0582 133.952 37.7827C134.372 37.5071 134.858 37.3693 135.409 37.3693C135.835 37.3693 136.172 37.4403 136.419 37.5824C136.669 37.7216 136.859 37.8807 136.99 38.0597C137.124 38.2358 137.227 38.3807 137.301 38.4943H137.386V35.2727H138.392V44H137.42V42.9943H137.301C137.227 43.1136 137.122 43.2642 136.986 43.446C136.849 43.625 136.655 43.7855 136.402 43.9276C136.149 44.0668 135.813 44.1364 135.392 44.1364ZM135.528 43.233C135.932 43.233 136.273 43.1278 136.551 42.9176C136.83 42.7045 137.041 42.4105 137.186 42.0355C137.331 41.6577 137.403 41.2216 137.403 40.7273C137.403 40.2386 137.332 39.8111 137.19 39.4446C137.048 39.0753 136.838 38.7884 136.56 38.5838C136.281 38.3764 135.938 38.2727 135.528 38.2727C135.102 38.2727 134.747 38.3821 134.463 38.6009C134.182 38.8168 133.97 39.1108 133.828 39.483C133.689 39.8523 133.619 40.267 133.619 40.7273C133.619 41.1932 133.69 41.6165 133.832 41.9972C133.977 42.375 134.19 42.6761 134.472 42.9006C134.756 43.1222 135.108 43.233 135.528 43.233Z" fill="#7C3AED"></path>
</svg>
</div>
<div class="input-wrapper row">
<label class="input col ">
<p class="input__title">Diameter (d)</p>
<div class="input-field row">
<input type="text" class="input-field__input imperial-system-item" id="diameter_c_imperial" data-target="diameter_c" data-formula="value * 0.393701" value="19.29" onchange="sysnumconv(this)" />
<span class="input-field__hint imperial-system-item">inches</span>
<input type="text" class="input-field__input metric-system-item system-item-hidden" id="diameter_c" data-target="diameter_c" data-formula="value / 0.393701" value="49" onchange="sysnumconv(this)" />
<span class="input-field__hint metric-system-item system-item-hidden">cm</span>
</div>
</label>
</div>
</div>
<div class="calculator-content col tab" data-tab="3">
<div class="calculator-content__geometry">
<svg width="272" height="108" viewBox="0 0 272 108" fill="none" xmlns="http://www.w3.org/2000/svg" data-x-show="tabs==='four'">
<circle cx="136" cy="40" r="39.5" fill="#F5F3FF" stroke="#7C3AED"></circle>
<path d="M174.354 41.3536C174.549 41.1583 174.549 40.8417 174.354 40.6464L171.172 37.4645C170.976 37.2692 170.66 37.2692 170.464 37.4645C170.269 37.6597 170.269 37.9763 170.464 38.1716L173.293 41L170.464 43.8284C170.269 44.0237 170.269 44.3403 170.464 44.5355C170.66 44.7308 170.976 44.7308 171.172 44.5355L174.354 41.3536ZM158.646 40.6464C158.451 40.8417 158.451 41.1583 158.646 41.3536L161.828 44.5355C162.024 44.7308 162.34 44.7308 162.536 44.5355C162.731 44.3403 162.731 44.0237 162.536 43.8284L159.707 41L162.536 38.1716C162.731 37.9763 162.731 37.6597 162.536 37.4645C162.34 37.2692 162.024 37.2692 161.828 37.4645L158.646 40.6464ZM174 40.5H159V41.5H174V40.5Z" fill="#7C3AED"></path>
<circle cx="136" cy="40" r="21.5" fill="#fff" stroke="#7C3AED"></circle>
<path d="M163.403 34L161.409 27.4545H162.466L163.881 32.4659H163.949L165.347 27.4545H166.42L167.801 32.4489H167.869L169.284 27.4545H170.341L168.347 34H167.358L165.926 28.9716H165.824L164.392 34H163.403Z" fill="#7C3AED"></path>
<path d="M95.5757 87.5757C95.3414 87.8101 95.3414 88.1899 95.5757 88.4243L99.3941 92.2426C99.6284 92.477 100.008 92.477 100.243 92.2426C100.477 92.0083 100.477 91.6284 100.243 91.3941L96.8485 88L100.243 84.6059C100.477 84.3716 100.477 83.9917 100.243 83.7574C100.008 83.523 99.6284 83.523 99.3941 83.7574L95.5757 87.5757ZM176.424 88.4243C176.659 88.1899 176.659 87.8101 176.424 87.5757L172.606 83.7574C172.372 83.523 171.992 83.523 171.757 83.7574C171.523 83.9917 171.523 84.3716 171.757 84.6059L175.151 88L171.757 91.3941C171.523 91.6284 171.523 92.0083 171.757 92.2426C171.992 92.477 172.372 92.477 172.606 92.2426L176.424 88.4243ZM96 88.6H176V87.4H96V88.6Z" fill="#7C3AED"></path>
<path d="M135.392 106.136C134.847 106.136 134.365 105.999 133.947 105.723C133.53 105.445 133.203 105.053 132.967 104.547C132.732 104.038 132.614 103.438 132.614 102.744C132.614 102.057 132.732 101.46 132.967 100.955C133.203 100.449 133.531 100.058 133.952 99.7827C134.372 99.5071 134.858 99.3693 135.409 99.3693C135.835 99.3693 136.172 99.4403 136.419 99.5824C136.669 99.7216 136.859 99.8807 136.99 100.06C137.124 100.236 137.227 100.381 137.301 100.494H137.386V97.2727H138.392V106H137.42V104.994H137.301C137.227 105.114 137.122 105.264 136.986 105.446C136.849 105.625 136.655 105.786 136.402 105.928C136.149 106.067 135.813 106.136 135.392 106.136ZM135.528 105.233C135.932 105.233 136.273 105.128 136.551 104.918C136.83 104.705 137.041 104.411 137.186 104.036C137.331 103.658 137.403 103.222 137.403 102.727C137.403 102.239 137.332 101.811 137.19 101.445C137.048 101.075 136.838 100.788 136.56 100.584C136.281 100.376 135.938 100.273 135.528 100.273C135.102 100.273 134.747 100.382 134.463 100.601C134.182 100.817 133.97 101.111 133.828 101.483C133.689 101.852 133.619 102.267 133.619 102.727C133.619 103.193 133.69 103.616 133.832 103.997C133.977 104.375 134.19 104.676 134.472 104.901C134.756 105.122 135.108 105.233 135.528 105.233Z" fill="#7C3AED"></path>
</svg>
</div>
<div class="input-wrapper row">
<label class="input col ">
<p class="input__title">Outer Diameter (d)</p>
<div class="input-field row">
<input type="text" class="input-field__input imperial-system-item" id="diameter_d_imperial" data-target="diameter_d" data-formula="value * 0.393701" value="19.29" onchange="sysnumconv(this)" />
<span class="input-field__hint imperial-system-item">inches</span>
<input type="text" class="input-field__input metric-system-item system-item-hidden" id="diameter_d" data-target="diameter_d" data-formula="value / 0.393701" value="49" onchange="sysnumconv(this)" />
<span class="input-field__hint metric-system-item system-item-hidden">cm</span>
</div>
</label>
<label class="input col ">
<p class="input__title">Border (w)</p>
<div class="input-field row">
<input type="text" class="input-field__input imperial-system-item" id="border_d_imperial" data-target="border_d" data-formula="value * 0.393701" value="3.93" onchange="sysnumconv(this)" />
<span class="input-field__hint imperial-system-item">inches</span>
<input type="text" class="input-field__input metric-system-item system-item-hidden" id="border_d" data-target="border_d" data-formula="value / 0.393701" value="10" onchange="sysnumconv(this)" />
<span class="input-field__hint metric-system-item system-item-hidden">cm</span>
</div>
</label>
</div>
</div>
<div class="calculator-content col tab" data-tab="4">
<div class="calculator-content__geometry">
<svg width="272" height="108" viewBox="0 0 272 111" fill="none" xmlns="http://www.w3.org/2000/svg" data-x-show="tabs==='five'">
<path d="M98.8466 52.1534C98.4318 52.1534 98.0554 52.0753 97.7173 51.919C97.3793 51.7599 97.1108 51.5312 96.9119 51.233C96.7131 50.9318 96.6136 50.5682 96.6136 50.142C96.6136 49.767 96.6875 49.4631 96.8352 49.2301C96.983 48.9943 97.1804 48.8097 97.4276 48.6761C97.6747 48.5426 97.9474 48.4432 98.2457 48.3778C98.5469 48.3097 98.8494 48.2557 99.1534 48.2159C99.5511 48.1648 99.8736 48.1264 100.121 48.1009C100.371 48.0724 100.553 48.0256 100.666 47.9602C100.783 47.8949 100.841 47.7812 100.841 47.6193V47.5852C100.841 47.1648 100.726 46.8381 100.496 46.6051C100.268 46.3722 99.9233 46.2557 99.4602 46.2557C98.9801 46.2557 98.6037 46.3608 98.331 46.571C98.0582 46.7812 97.8665 47.0057 97.7557 47.2443L96.8011 46.9034C96.9716 46.5057 97.1989 46.196 97.483 45.9744C97.7699 45.75 98.0824 45.5937 98.4205 45.5057C98.7614 45.4148 99.0966 45.3693 99.4261 45.3693C99.6364 45.3693 99.8778 45.3949 100.151 45.446C100.426 45.4943 100.692 45.5952 100.947 45.7486C101.206 45.902 101.42 46.1335 101.591 46.4432C101.761 46.7528 101.847 47.1676 101.847 47.6875V52H100.841V51.1136H100.79C100.722 51.2557 100.608 51.4077 100.449 51.5696C100.29 51.7315 100.078 51.8693 99.8139 51.983C99.5497 52.0966 99.2273 52.1534 98.8466 52.1534ZM99 51.25C99.3977 51.25 99.733 51.1719 100.006 51.0156C100.281 50.8594 100.489 50.6577 100.628 50.4105C100.77 50.1634 100.841 49.9034 100.841 49.6307V48.7102C100.798 48.7614 100.705 48.8082 100.56 48.8509C100.418 48.8906 100.253 48.9261 100.065 48.9574C99.8807 48.9858 99.7003 49.0114 99.5241 49.0341C99.3509 49.054 99.2102 49.071 99.1023 49.0852C98.8409 49.1193 98.5966 49.1747 98.3693 49.2514C98.1449 49.3253 97.9631 49.4375 97.8239 49.5881C97.6875 49.7358 97.6193 49.9375 97.6193 50.1932C97.6193 50.5426 97.7486 50.8068 98.0071 50.9858C98.2685 51.1619 98.5994 51.25 99 51.25Z" fill="#7C3AED"></path>
<path d="M169.057 52V43.2727H170.062V46.4943H170.148C170.222 46.3807 170.324 46.2358 170.455 46.0597C170.588 45.8807 170.778 45.7216 171.026 45.5824C171.276 45.4403 171.614 45.3693 172.04 45.3693C172.591 45.3693 173.077 45.5071 173.497 45.7827C173.918 46.0582 174.246 46.4489 174.482 46.9545C174.717 47.4602 174.835 48.0568 174.835 48.7443C174.835 49.4375 174.717 50.0384 174.482 50.5469C174.246 51.0526 173.919 51.4446 173.501 51.723C173.084 51.9986 172.602 52.1364 172.057 52.1364C171.636 52.1364 171.3 52.0668 171.047 51.9276C170.794 51.7855 170.599 51.625 170.463 51.446C170.327 51.2642 170.222 51.1136 170.148 50.9943H170.028V52H169.057ZM170.045 48.7273C170.045 49.2216 170.118 49.6577 170.263 50.0355C170.408 50.4105 170.619 50.7045 170.898 50.9176C171.176 51.1278 171.517 51.233 171.92 51.233C172.341 51.233 172.692 51.1222 172.973 50.9006C173.257 50.6761 173.47 50.375 173.612 49.9972C173.757 49.6165 173.83 49.1932 173.83 48.7273C173.83 48.267 173.759 47.8523 173.616 47.483C173.477 47.1108 173.266 46.8168 172.982 46.6009C172.7 46.3821 172.347 46.2727 171.92 46.2727C171.511 46.2727 171.168 46.3764 170.889 46.5838C170.611 46.7884 170.401 47.0753 170.259 47.4446C170.116 47.8111 170.045 48.2386 170.045 48.7273Z" fill="#7C3AED"></path>
<path d="M135.58 110.136C134.966 110.136 134.438 109.991 133.994 109.702C133.551 109.412 133.21 109.013 132.972 108.504C132.733 107.996 132.614 107.415 132.614 106.761C132.614 106.097 132.736 105.51 132.98 105.001C133.227 104.49 133.571 104.091 134.011 103.804C134.455 103.514 134.972 103.369 135.562 103.369C136.023 103.369 136.438 103.455 136.807 103.625C137.176 103.795 137.479 104.034 137.714 104.341C137.95 104.648 138.097 105.006 138.153 105.415H137.148C137.071 105.116 136.901 104.852 136.636 104.622C136.375 104.389 136.023 104.273 135.58 104.273C135.188 104.273 134.844 104.375 134.548 104.58C134.256 104.781 134.027 105.067 133.862 105.436C133.7 105.803 133.619 106.233 133.619 106.727C133.619 107.233 133.699 107.673 133.858 108.048C134.02 108.423 134.247 108.714 134.54 108.922C134.835 109.129 135.182 109.233 135.58 109.233C135.841 109.233 136.078 109.188 136.291 109.097C136.504 109.006 136.685 108.875 136.832 108.705C136.98 108.534 137.085 108.33 137.148 108.091H138.153C138.097 108.477 137.956 108.825 137.732 109.135C137.51 109.442 137.216 109.686 136.849 109.868C136.486 110.047 136.063 110.136 135.58 110.136Z" fill="#7C3AED"></path>
<path d="M84.8395 95.5L136 1.0498L187.161 95.5H84.8395Z" fill="#F5F3FF" stroke="#7C3AED"></path>
</svg>
</div>
<div class="input-wrapper row">
<label class="input col ">
<p class="input__title">Side a</p>
<div class="input-field row">
<input type="text" class="input-field__input imperial-system-item" id="a_imperial" data-target="a" data-formula="value * 0.393701" value="2.75" onchange="sysnumconv(this)" />
<span class="input-field__hint imperial-system-item">inches</span>
<input type="text" class="input-field__input metric-system-item system-item-hidden" id="a" data-target="a" data-formula="value / 0.393701" value="7" onchange="sysnumconv(this)" />
<span class="input-field__hint metric-system-item system-item-hidden">cm</span>
</div>
</label>
</div>
<div class="input-wrapper row">
<label class="input col ">
<p class="input__title">Side b</p>
<div class="input-field row">
<input type="text" class="input-field__input imperial-system-item" id="b_imperial" data-target="b" data-formula="value * 0.393701" value="2.35" onchange="sysnumconv(this)" />
<span class="input-field__hint imperial-system-item">inches</span>
<input type="text" class="input-field__input metric-system-item system-item-hidden" id="b" data-target="b" data-formula="value / 0.393701" value="6" onchange="sysnumconv(this)" />
<span class="input-field__hint metric-system-item system-item-hidden">cm</span>
</div>
</label>
<label class="input col ">
<p class="input__title">Side c</p>
<div class="input-field row">
<input type="text" class="input-field__input imperial-system-item" id="c_imperial" data-target="c" data-formula="value * 0.393701" value="1.96" onchange="sysnumconv(this)" />
<span class="input-field__hint imperial-system-item">inches</span>
<input type="text" class="input-field__input metric-system-item system-item-hidden" id="c" data-target="c" data-formula="value / 0.393701" value="5" onchange="sysnumconv(this)" />
<span class="input-field__hint metric-system-item system-item-hidden">cm</span>
</div>
</label>
</div>
</div>
<div class="calculator-content col tab" data-tab="5">
<div class="calculator-content__geometry">
<svg width="272" height="108" viewBox="0 0 272 120" fill="none" xmlns="http://www.w3.org/2000/svg" data-x-show="tabs==='six'">
<path d="M134.847 10.1534C134.432 10.1534 134.055 10.0753 133.717 9.91903C133.379 9.75994 133.111 9.53125 132.912 9.23295C132.713 8.93182 132.614 8.56818 132.614 8.14205C132.614 7.76705 132.688 7.46307 132.835 7.23011C132.983 6.99432 133.18 6.80966 133.428 6.67614C133.675 6.54261 133.947 6.44318 134.246 6.37784C134.547 6.30966 134.849 6.25568 135.153 6.21591C135.551 6.16477 135.874 6.12642 136.121 6.10085C136.371 6.07244 136.553 6.02557 136.666 5.96023C136.783 5.89489 136.841 5.78125 136.841 5.61932V5.58523C136.841 5.16477 136.726 4.83807 136.496 4.60511C136.268 4.37216 135.923 4.25568 135.46 4.25568C134.98 4.25568 134.604 4.3608 134.331 4.57102C134.058 4.78125 133.866 5.00568 133.756 5.24432L132.801 4.90341C132.972 4.50568 133.199 4.19602 133.483 3.97443C133.77 3.75 134.082 3.59375 134.42 3.50568C134.761 3.41477 135.097 3.36932 135.426 3.36932C135.636 3.36932 135.878 3.39489 136.151 3.44602C136.426 3.49432 136.692 3.59517 136.947 3.74858C137.206 3.90199 137.42 4.13352 137.591 4.44318C137.761 4.75284 137.847 5.16761 137.847 5.6875V10H136.841V9.11364H136.79C136.722 9.25568 136.608 9.40767 136.449 9.5696C136.29 9.73153 136.078 9.86932 135.814 9.98295C135.55 10.0966 135.227 10.1534 134.847 10.1534ZM135 9.25C135.398 9.25 135.733 9.17188 136.006 9.01562C136.281 8.85938 136.489 8.65767 136.628 8.41051C136.77 8.16335 136.841 7.90341 136.841 7.63068V6.71023C136.798 6.76136 136.705 6.80824 136.56 6.85085C136.418 6.89062 136.253 6.92614 136.065 6.95739C135.881 6.9858 135.7 7.01136 135.524 7.03409C135.351 7.05398 135.21 7.07102 135.102 7.08523C134.841 7.11932 134.597 7.17472 134.369 7.25142C134.145 7.32528 133.963 7.4375 133.824 7.58807C133.688 7.7358 133.619 7.9375 133.619 8.19318C133.619 8.54261 133.749 8.80682 134.007 8.9858C134.268 9.16193 134.599 9.25 135 9.25Z" fill="#7C3AED"></path>
<path d="M133.057 118V109.273H134.062V112.494H134.148C134.222 112.381 134.324 112.236 134.455 112.06C134.588 111.881 134.778 111.722 135.026 111.582C135.276 111.44 135.614 111.369 136.04 111.369C136.591 111.369 137.077 111.507 137.497 111.783C137.918 112.058 138.246 112.449 138.482 112.955C138.717 113.46 138.835 114.057 138.835 114.744C138.835 115.438 138.717 116.038 138.482 116.547C138.246 117.053 137.919 117.445 137.501 117.723C137.084 117.999 136.602 118.136 136.057 118.136C135.636 118.136 135.3 118.067 135.047 117.928C134.794 117.786 134.599 117.625 134.463 117.446C134.327 117.264 134.222 117.114 134.148 116.994H134.028V118H133.057ZM134.045 114.727C134.045 115.222 134.118 115.658 134.263 116.036C134.408 116.411 134.619 116.705 134.898 116.918C135.176 117.128 135.517 117.233 135.92 117.233C136.341 117.233 136.692 117.122 136.973 116.901C137.257 116.676 137.47 116.375 137.612 115.997C137.757 115.616 137.83 115.193 137.83 114.727C137.83 114.267 137.759 113.852 137.616 113.483C137.477 113.111 137.266 112.817 136.982 112.601C136.7 112.382 136.347 112.273 135.92 112.273C135.511 112.273 135.168 112.376 134.889 112.584C134.611 112.788 134.401 113.075 134.259 113.445C134.116 113.811 134.045 114.239 134.045 114.727Z" fill="#7C3AED"></path>
<path d="M76.7138 103.5L108.35 16.5H163.65L195.286 103.5H76.7138Z" fill="#F5F3FF" stroke="#7C3AED"></path>
<path d="M112.576 102.424C112.81 102.659 113.19 102.659 113.424 102.424L117.243 98.6059C117.477 98.3716 117.477 97.9917 117.243 97.7574C117.008 97.523 116.628 97.523 116.394 97.7574L113 101.151L109.606 97.7574C109.372 97.523 108.992 97.523 108.757 97.7574C108.523 97.9917 108.523 98.3716 108.757 98.6059L112.576 102.424ZM113.424 17.5757C113.19 17.3414 112.81 17.3414 112.576 17.5757L108.757 21.3941C108.523 21.6284 108.523 22.0083 108.757 22.2426C108.992 22.477 109.372 22.477 109.606 22.2426L113 18.8485L116.394 22.2426C116.628 22.477 117.008 22.477 117.243 22.2426C117.477 22.0083 117.477 21.6284 117.243 21.3941L113.424 17.5757ZM113.6 102L113.6 18L112.4 18L112.4 102L113.6 102Z" fill="#7C3AED"></path>
<path d="M118.926 60.0625V64H117.92V55.2727H118.926V58.4773H119.011C119.165 58.1392 119.395 57.8707 119.702 57.6719C120.011 57.4702 120.423 57.3693 120.938 57.3693C121.384 57.3693 121.774 57.4588 122.109 57.6378C122.445 57.8139 122.705 58.0852 122.889 58.4517C123.077 58.8153 123.17 59.2784 123.17 59.8409V64H122.165V59.9091C122.165 59.3892 122.03 58.9872 121.76 58.7031C121.493 58.4162 121.122 58.2727 120.648 58.2727C120.318 58.2727 120.023 58.3423 119.761 58.4815C119.503 58.6207 119.298 58.8239 119.148 59.0909C119 59.358 118.926 59.6818 118.926 60.0625Z" fill="#7C3AED"></path>
</svg>
</div>
<div class="input-wrapper row">
<label class="input col ">
<p class="input__title">Side a</p>
<div class="input-field row">
<input type="text" class="input-field__input imperial-system-item" id="trapezoid_a_imperial" data-target="trapezoid_a" data-formula="value * 0.393701" value="1.96" onchange="sysnumconv(this)" />
<span class="input-field__hint imperial-system-item">inches</span>
<input type="text" class="input-field__input metric-system-item system-item-hidden" id="trapezoid_a" data-target="trapezoid_a" data-formula="value / 0.393701" value="5" onchange="sysnumconv(this)" />
<span class="input-field__hint metric-system-item system-item-hidden">cm</span>
</div>
</label>
</div>
<div class="input-wrapper row">
<label class="input col ">
<p class="input__title">Side b</p>
<div class="input-field row">
<input type="text" class="input-field__input imperial-system-item" id="trapezoid_b_imperial" data-target="trapezoid_b" data-formula="value * 0.393701" value="2.35" onchange="sysnumconv(this)" />
<span class="input-field__hint imperial-system-item">inches</span>
<input type="text" class="input-field__input metric-system-item system-item-hidden" id="trapezoid_b" data-target="trapezoid_b" data-formula="value / 0.393701" value="6" onchange="sysnumconv(this)" />
<span class="input-field__hint metric-system-item system-item-hidden">cm</span>
</div>
</label>
<label class="input col ">
<p class="input__title">Height (h)</p>
<div class="input-field row">
<input type="text" class="input-field__input imperial-system-item" id="trapezoid_h_imperial" data-target="trapezoid_h" data-formula="value * 0.393701" value="2.75" onchange="sysnumconv(this)" />
<span class="input-field__hint imperial-system-item">inches</span>
<input type="text" class="input-field__input metric-system-item system-item-hidden" id="trapezoid_h" data-target="trapezoid_h" data-formula="value / 0.393701" value="7" onchange="sysnumconv(this)" />
<span class="input-field__hint metric-system-item system-item-hidden">cm</span>
</div>
</label>
</div>
</div>
<div class="calculator-content calculator-content--options calculator-content--gray col " >
<div class="calculator-content-head row">
<p class="calculator-content-head__title">Options</p>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.29289 7.29289C5.68342 6.90237 6.31658 6.90237 6.7071 7.29289L9.99999 10.5858L13.2929 7.29289C13.6834 6.90237 14.3166 6.90237 14.7071 7.29289C15.0976 7.68342 15.0976 8.31658 14.7071 8.70711L10.7071 12.7071C10.3166 13.0976 9.68341 13.0976 9.29289 12.7071L5.29289 8.70711C4.90237 8.31658 4.90237 7.68342 5.29289 7.29289Z" fill="#9CA3AF"></path>
</svg>
</div>
<div class="calculator-content-body col">
<div class="input-wrapper row">
<label class="input col ">
<p class="input__title">Units</p>
<div class="dropdown-wrapper">
<div class="input-field row " tabindex="0">
<select class="input-field__text" onchange="toggleRelatedInputs(this)" id="units">
<option value="inches (in)" >
inches (in)
</option>
<option value="feets (ft)" >
feets (ft)
</option>
<option value="yards (yd)" >
yards (yd)
</option>
<option value="millimeters (mm)" >
millimeters (mm)
</option>
<option value="centimeters (cm)" >
centimeters (cm)
</option>
<option value="meters (m)" >
meters (m)
</option>
</select>
</div>
</div>
</label></div>
<div class="input-wrapper row">
<label class="input col ">
<p class="input__title">Quantity</p>
<div class="input-field row">
<input type="text" class="input-field__input" placeholder="" id="quantity" value="1" />
</div>
</label></div>
<div class="input-wrapper row">
<label class="input col ">
<p class="input__title">Price</p>
<div class="input-field row">
<span class="input-field__hint">$</span>
<input type="text" class="input-field__input" placeholder="" id="price" value="10" />
</div>
</label> <label class="input col ">
<div class="dropdown-wrapper">
<div class="input-field row input-field--gray" tabindex="0">
<select class="input-field__text" onchange="toggleRelatedInputs(this)" id="price_per">
<option value="per square inch" >
per square inch
</option>
<option value="per square foot" >
per square foot
</option>
<option value="per square yard" >
per square yard
</option>
<option value="per square meter" >
per square meter
</option>
</select>
</div>
</div>
</label></div>
</div>
</div>
<div class="calculator-content calculator-content--gray calculator-content--footer calculator-content--small row tab tab--active" data-tab="0">
<button class="system-switcher" onclick="toggleSystem(this)" aria-label="Switch System">
<div class="system-switcher__circle"></div>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.5 9.5H10C9.44772 9.5 9 9.05228 9 8.5V2.5M4.5 2.5H3.5C2.94772 2.5 2.5 2.94772 2.5 3.5L2.5 9.5M7.5 4.5L10.5 4.5M1.5 5.5L4.5 5.5" stroke="white" stroke-width="2" stroke-linecap="round"></path>
</svg>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 3.5L2 8.5M2 8L2 5.5C2 4.39543 2.89543 3.5 4 3.5C5.10457 3.5 6 4.39543 6 5.5M6 5.5L6 8.5M6 5.5L6 8M6 5.5C6 4.39543 6.89543 3.5 8 3.5C9.10457 3.5 10 4.39543 10 5.5V8.5" stroke="white" stroke-width="2" stroke-linecap="round"></path>
</svg>
</button>
<script type="text/javascript">
$$(".imperial-system-item, .metric-system-item").forEach(function(element, index){
element.classList.remove("system-item-hidden");
});
$$((defaultSystem == "metric") ? ".imperial-system-item" : ".metric-system-item").forEach(function(element, index){
element.classList.add("system-item-hidden");
});
if(defaultSystem == "metric") $('.system-switcher').classList.add('system-switcher--active');
</script>
<button class="button button--primary ml-auto" onclick="calculateSquare(this); animateElements();" data-action="calculateSquare" id="action-button">Calculate</button>
</div>
<script type="text/javascript" src="./assets/js/calculator.js" defer></script>
<div class="calculator-content calculator-content--gray calculator-content--footer calculator-content--small row tab " data-tab="1">
<button class="system-switcher" onclick="toggleSystem(this)" aria-label="Switch System">
<div class="system-switcher__circle"></div>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.5 9.5H10C9.44772 9.5 9 9.05228 9 8.5V2.5M4.5 2.5H3.5C2.94772 2.5 2.5 2.94772 2.5 3.5L2.5 9.5M7.5 4.5L10.5 4.5M1.5 5.5L4.5 5.5" stroke="white" stroke-width="2" stroke-linecap="round"></path>
</svg>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 3.5L2 8.5M2 8L2 5.5C2 4.39543 2.89543 3.5 4 3.5C5.10457 3.5 6 4.39543 6 5.5M6 5.5L6 8.5M6 5.5L6 8M6 5.5C6 4.39543 6.89543 3.5 8 3.5C9.10457 3.5 10 4.39543 10 5.5V8.5" stroke="white" stroke-width="2" stroke-linecap="round"></path>
</svg>
</button>
<script type="text/javascript">
$$(".imperial-system-item, .metric-system-item").forEach(function(element, index){
element.classList.remove("system-item-hidden");
});
$$((defaultSystem == "metric") ? ".imperial-system-item" : ".metric-system-item").forEach(function(element, index){
element.classList.add("system-item-hidden");
});
if(defaultSystem == "metric") $('.system-switcher').classList.add('system-switcher--active');
</script>
<button class="button button--primary ml-auto" onclick="calculateSquareWithBorders(this); animateElements();" data-action="calculateSquareWithBorders" id="action-button">Calculate</button>
</div>
<div class="calculator-content calculator-content--gray calculator-content--footer calculator-content--small row tab " data-tab="2">
<button class="system-switcher" onclick="toggleSystem(this)" aria-label="Switch System">
<div class="system-switcher__circle"></div>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.5 9.5H10C9.44772 9.5 9 9.05228 9 8.5V2.5M4.5 2.5H3.5C2.94772 2.5 2.5 2.94772 2.5 3.5L2.5 9.5M7.5 4.5L10.5 4.5M1.5 5.5L4.5 5.5" stroke="white" stroke-width="2" stroke-linecap="round"></path>
</svg>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 3.5L2 8.5M2 8L2 5.5C2 4.39543 2.89543 3.5 4 3.5C5.10457 3.5 6 4.39543 6 5.5M6 5.5L6 8.5M6 5.5L6 8M6 5.5C6 4.39543 6.89543 3.5 8 3.5C9.10457 3.5 10 4.39543 10 5.5V8.5" stroke="white" stroke-width="2" stroke-linecap="round"></path>
</svg>
</button>
<script type="text/javascript">
$$(".imperial-system-item, .metric-system-item").forEach(function(element, index){
element.classList.remove("system-item-hidden");
});
$$((defaultSystem == "metric") ? ".imperial-system-item" : ".metric-system-item").forEach(function(element, index){
element.classList.add("system-item-hidden");
});
if(defaultSystem == "metric") $('.system-switcher').classList.add('system-switcher--active');
</script>
<button class="button button--primary ml-auto" onclick="calculateRoundFootage(this); animateElements();" data-action="calculateRoundFootage" id="action-button">Calculate</button>
</div>
<div class="calculator-content calculator-content--gray calculator-content--footer calculator-content--small row tab " data-tab="3">
<button class="system-switcher" onclick="toggleSystem(this)" aria-label="Switch System">
<div class="system-switcher__circle"></div>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.5 9.5H10C9.44772 9.5 9 9.05228 9 8.5V2.5M4.5 2.5H3.5C2.94772 2.5 2.5 2.94772 2.5 3.5L2.5 9.5M7.5 4.5L10.5 4.5M1.5 5.5L4.5 5.5" stroke="white" stroke-width="2" stroke-linecap="round"></path>
</svg>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 3.5L2 8.5M2 8L2 5.5C2 4.39543 2.89543 3.5 4 3.5C5.10457 3.5 6 4.39543 6 5.5M6 5.5L6 8.5M6 5.5L6 8M6 5.5C6 4.39543 6.89543 3.5 8 3.5C9.10457 3.5 10 4.39543 10 5.5V8.5" stroke="white" stroke-width="2" stroke-linecap="round"></path>
</svg>
</button>
<script type="text/javascript">
$$(".imperial-system-item, .metric-system-item").forEach(function(element, index){
element.classList.remove("system-item-hidden");
});
$$((defaultSystem == "metric") ? ".imperial-system-item" : ".metric-system-item").forEach(function(element, index){
element.classList.add("system-item-hidden");
});
if(defaultSystem == "metric") $('.system-switcher').classList.add('system-switcher--active');
</script>
<button class="button button--primary ml-auto" onclick="calculateRoundFootageWithBorders(this); animateElements();" data-action="calculateRoundFootageWithBorders" id="action-button">Calculate</button>
</div>
<div class="calculator-content calculator-content--gray calculator-content--footer calculator-content--small row tab " data-tab="4">
<button class="system-switcher" onclick="toggleSystem(this)" aria-label="Switch System">
<div class="system-switcher__circle"></div>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.5 9.5H10C9.44772 9.5 9 9.05228 9 8.5V2.5M4.5 2.5H3.5C2.94772 2.5 2.5 2.94772 2.5 3.5L2.5 9.5M7.5 4.5L10.5 4.5M1.5 5.5L4.5 5.5" stroke="white" stroke-width="2" stroke-linecap="round"></path>
</svg>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 3.5L2 8.5M2 8L2 5.5C2 4.39543 2.89543 3.5 4 3.5C5.10457 3.5 6 4.39543 6 5.5M6 5.5L6 8.5M6 5.5L6 8M6 5.5C6 4.39543 6.89543 3.5 8 3.5C9.10457 3.5 10 4.39543 10 5.5V8.5" stroke="white" stroke-width="2" stroke-linecap="round"></path>
</svg>
</button>
<script type="text/javascript">
$$(".imperial-system-item, .metric-system-item").forEach(function(element, index){
element.classList.remove("system-item-hidden");
});
$$((defaultSystem == "metric") ? ".imperial-system-item" : ".metric-system-item").forEach(function(element, index){
element.classList.add("system-item-hidden");
});
if(defaultSystem == "metric") $('.system-switcher').classList.add('system-switcher--active');
</script>
<button class="button button--primary ml-auto" onclick="calculateTriangleFootage(this); animateElements();" data-action="calculateTriangleFootage" id="action-button">Calculate</button>
</div>
<div class="calculator-content calculator-content--gray calculator-content--footer calculator-content--small row tab " data-tab="5">
<button class="system-switcher" onclick="toggleSystem(this)" aria-label="Switch System">
<div class="system-switcher__circle"></div>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.5 9.5H10C9.44772 9.5 9 9.05228 9 8.5V2.5M4.5 2.5H3.5C2.94772 2.5 2.5 2.94772 2.5 3.5L2.5 9.5M7.5 4.5L10.5 4.5M1.5 5.5L4.5 5.5" stroke="white" stroke-width="2" stroke-linecap="round"></path>
</svg>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 3.5L2 8.5M2 8L2 5.5C2 4.39543 2.89543 3.5 4 3.5C5.10457 3.5 6 4.39543 6 5.5M6 5.5L6 8.5M6 5.5L6 8M6 5.5C6 4.39543 6.89543 3.5 8 3.5C9.10457 3.5 10 4.39543 10 5.5V8.5" stroke="white" stroke-width="2" stroke-linecap="round"></path>
</svg>
</button>
<script type="text/javascript">
$$(".imperial-system-item, .metric-system-item").forEach(function(element, index){
element.classList.remove("system-item-hidden");
});
$$((defaultSystem == "metric") ? ".imperial-system-item" : ".metric-system-item").forEach(function(element, index){
element.classList.add("system-item-hidden");
});
if(defaultSystem == "metric") $('.system-switcher').classList.add('system-switcher--active');
</script>
<button class="button button--primary ml-auto" onclick="calculateTrapezoidFootage(this); animateElements();" data-action="calculateTrapezoidFootage" id="action-button">Calculate</button>
</div>
</div>
</div>
</div>
<div style="float:left;padding: 15px; overflow: scroll;">
<div class="calculator-result calculator-result--error col" id="error-box">
<div class="row">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18ZM8.70711
7.29289C8.31658 6.90237 7.68342 6.90237 7.29289 7.29289C6.90237 7.68342 6.90237 8.31658 7.29289 8.70711L8.58579 10L7.29289 11.2929C6.90237 11.6834 6.90237 12.3166 7.29289
12.7071C7.68342 13.0976 8.31658 13.0976 8.70711 12.7071L10 11.4142L11.2929 12.7071C11.6834 13.0976 12.3166 13.0976 12.7071 12.7071C13.0976 12.3166 13.0976 11.6834 12.7071
11.2929L11.4142 10L12.7071 8.70711C13.0976 8.31658 13.0976 7.68342 12.7071 7.29289C12.3166 6.90237 11.6834 6.90237 11.2929 7.29289L10 8.58579L8.70711 7.29289Z" fill="#F87171" class="dark:fill-red-200"></path>
</svg>
<p class="calculator-error__title">There was an error with your calculation.</p>
</div>
<div class="col" id="error-list"></div>
</div> <span id="calculator_result"><div class="calculator-result col">
<div class="result-table__wrapper">
<table class="result-table">
<thead class="dark">
<tr>
<th class="dark indigo" colspan="2">Result</td>
</tr>
</thead>
<tbody class="animate">
<tr>
<th class="semibold">Square Footage</th>
<td class="semibold">
<span id="result_ft">5.0106</span> ft²
</td>
</tr>
<tr>
<th>Square Inches</th>
<td>
<span id="result_in">721.52644</span> in²
</td>
</tr>
<tr>
<th>Square Yards</th>
<td>
<span id="result_yd">0.55673</span> yd²
</td>
</tr>
<tr>
<th>Square Meters</th>
<td>
<span id="result_m">0.4655</span> m²
</td>
</tr>
<tr>
<th>Acres</th>
<td>
<span id="result_acre">0.00012</span> acre
</td>
</tr>
<tr>
<th>Hectares</th>
<td>
<span id="result_ha">0.00005</span> ha
</td>
</tr>
<tr>
<th>Cost</th>
<td>$ <span id="result_price">7215.2644</span></td>
</tr>
</tbody>
</table>
</div>
</div></span>
</div>
</div>
<script async src="./assets/js/lib/math.min.js"></script>
<script defer src="./assets/js/functions.js"></script>
</body>
</html>