-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
836 lines (664 loc) · 77.4 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
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>Cubic Yards 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="Cubic yard calculator calculates cubic yards, feet, meters for landscape materials. Enter measurements in yards and feet and get volume conversions.">
<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="M17.5 17.5H2.5V2.5H17.5V17.5Z" fill="#E5E7EB" stroke="#9CA3AF" />
</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="M17.5 17.5H2.5V2.5H17.5V17.5Z" fill="#E5E7EB" stroke="#9CA3AF" />
</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="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, 3)">
<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, 4)">
<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, 5)">
<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, 6)">
<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="96.5" y="22.5" width="79" height="79" fill="#F5F3FF" stroke="#7C3AED" />
<path d="M134.847 16.1534C134.432 16.1534 134.055 16.0753 133.717 15.919C133.379 15.7599 133.111 15.5312 132.912 15.233C132.713 14.9318 132.614 14.5682 132.614 14.142C132.614 13.767 132.688 13.4631 132.835 13.2301C132.983 12.9943 133.18 12.8097 133.428 12.6761C133.675 12.5426 133.947 12.4432 134.246 12.3778C134.547 12.3097 134.849 12.2557 135.153 12.2159C135.551 12.1648 135.874 12.1264 136.121 12.1009C136.371 12.0724 136.553 12.0256 136.666 11.9602C136.783 11.8949 136.841 11.7812 136.841 11.6193V11.5852C136.841 11.1648 136.726 10.8381 136.496 10.6051C136.268 10.3722 135.923 10.2557 135.46 10.2557C134.98 10.2557 134.604 10.3608 134.331 10.571C134.058 10.7812 133.866 11.0057 133.756 11.2443L132.801 10.9034C132.972 10.5057 133.199 10.196 133.483 9.97443C133.77 9.75 134.082 9.59375 134.42 9.50568C134.761 9.41477 135.097 9.36932 135.426 9.36932C135.636 9.36932 135.878 9.39489 136.151 9.44602C136.426 9.49432 136.692 9.59517 136.947 9.74858C137.206 9.90199 137.42 10.1335 137.591 10.4432C137.761 10.7528 137.847 11.1676 137.847 11.6875V16H136.841V15.1136H136.79C136.722 15.2557 136.608 15.4077 136.449 15.5696C136.29 15.7315 136.078 15.8693 135.814 15.983C135.55 16.0966 135.227 16.1534 134.847 16.1534ZM135 15.25C135.398 15.25 135.733 15.1719 136.006 15.0156C136.281 14.8594 136.489 14.6577 136.628 14.4105C136.77 14.1634 136.841 13.9034 136.841 13.6307V12.7102C136.798 12.7614 136.705 12.8082 136.56 12.8509C136.418 12.8906 136.253 12.9261 136.065 12.9574C135.881 12.9858 135.7 13.0114 135.524 13.0341C135.351 13.054 135.21 13.071 135.102 13.0852C134.841 13.1193 134.597 13.1747 134.369 13.2514C134.145 13.3253 133.963 13.4375 133.824 13.5881C133.688 13.7358 133.619 13.9375 133.619 14.1932C133.619 14.5426 133.749 14.8068 134.007 14.9858C134.268 15.1619 134.599 15.25 135 15.25Z" fill="#7C3AED" />
</svg>
</div>
<div class="input-wrapper row">
<label class="input col ">
<p class="input__title">Side 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">Depth</p>
<div class="input-field row">
<input type="text" class="input-field__input imperial-system-item" id="depth_a_imperial" data-target="depth_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="depth_a" data-target="depth_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">
<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_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>
<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_b_imperial" data-target="width_b" 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_b" data-target="width_b" 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 class="input-wrapper row">
<label class="input col ">
<p class="input__title">Depth</p>
<div class="input-field row">
<input type="text" class="input-field__input imperial-system-item" id="depth_b_imperial" data-target="depth_b" 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="depth_b" data-target="depth_b" 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="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">
<rect x="79.5" y="14.5" width="113" height="79" fill="#F5F3FF" stroke="#7C3AED" />
<rect x="95.5" y="30.5" width="81" height="47" fill="#fff" stroke="#7C3AED" />
<path d="M133.847 42.1534C133.432 42.1534 133.055 42.0753 132.717 41.919C132.379 41.7599 132.111 41.5312 131.912 41.233C131.713 40.9318 131.614 40.5682 131.614 40.142C131.614 39.767 131.688 39.4631 131.835 39.2301C131.983 38.9943 132.18 38.8097 132.428 38.6761C132.675 38.5426 132.947 38.4432 133.246 38.3778C133.547 38.3097 133.849 38.2557 134.153 38.2159C134.551 38.1648 134.874 38.1264 135.121 38.1009C135.371 38.0724 135.553 38.0256 135.666 37.9602C135.783 37.8949 135.841 37.7812 135.841 37.6193V37.5852C135.841 37.1648 135.726 36.8381 135.496 36.6051C135.268 36.3722 134.923 36.2557 134.46 36.2557C133.98 36.2557 133.604 36.3608 133.331 36.571C133.058 36.7812 132.866 37.0057 132.756 37.2443L131.801 36.9034C131.972 36.5057 132.199 36.196 132.483 35.9744C132.77 35.75 133.082 35.5937 133.42 35.5057C133.761 35.4148 134.097 35.3693 134.426 35.3693C134.636 35.3693 134.878 35.3949 135.151 35.446C135.426 35.4943 135.692 35.5952 135.947 35.7486C136.206 35.902 136.42 36.1335 136.591 36.4432C136.761 36.7528 136.847 37.1676 136.847 37.6875V42H135.841V41.1136H135.79C135.722 41.2557 135.608 41.4077 135.449 41.5696C135.29 41.7315 135.078 41.8693 134.814 41.983C134.55 42.0966 134.227 42.1534 133.847 42.1534ZM134 41.25C134.398 41.25 134.733 41.1719 135.006 41.0156C135.281 40.8594 135.489 40.6577 135.628 40.4105C135.77 40.1634 135.841 39.9034 135.841 39.6307V38.7102C135.798 38.7614 135.705 38.8082 135.56 38.8509C135.418 38.8906 135.253 38.9261 135.065 38.9574C134.881 38.9858 134.7 39.0114 134.524 39.0341C134.351 39.054 134.21 39.071 134.102 39.0852C133.841 39.1193 133.597 39.1747 133.369 39.2514C133.145 39.3253 132.963 39.4375 132.824 39.5881C132.688 39.7358 132.619 39.9375 132.619 40.1932C132.619 40.5426 132.749 40.8068 133.007 40.9858C133.268 41.1619 133.599 41.25 134 41.25Z" fill="#7C3AED" />
<path d="M136.403 89L134.409 82.4545H135.466L136.881 87.4659H136.949L138.347 82.4545H139.42L140.801 87.4489H140.869L142.284 82.4545H143.341L141.347 89H140.358L138.926 83.9716H138.824L137.392 89H136.403Z" fill="#7C3AED" />
<path d="M166.057 58V49.2727H167.062V52.4943H167.148C167.222 52.3807 167.324 52.2358 167.455 52.0597C167.588 51.8807 167.778 51.7216 168.026 51.5824C168.276 51.4403 168.614 51.3693 169.04 51.3693C169.591 51.3693 170.077 51.5071 170.497 51.7827C170.918 52.0582 171.246 52.4489 171.482 52.9545C171.717 53.4602 171.835 54.0568 171.835 54.7443C171.835 55.4375 171.717 56.0384 171.482 56.5469C171.246 57.0526 170.919 57.4446 170.501 57.723C170.084 57.9986 169.602 58.1364 169.057 58.1364C168.636 58.1364 168.3 58.0668 168.047 57.9276C167.794 57.7855 167.599 57.625 167.463 57.446C167.327 57.2642 167.222 57.1136 167.148 56.9943H167.028V58H166.057ZM167.045 54.7273C167.045 55.2216 167.118 55.6577 167.263 56.0355C167.408 56.4105 167.619 56.7045 167.898 56.9176C168.176 57.1278 168.517 57.233 168.92 57.233C169.341 57.233 169.692 57.1222 169.973 56.9006C170.257 56.6761 170.47 56.375 170.612 55.9972C170.757 55.6165 170.83 55.1932 170.83 54.7273C170.83 54.267 170.759 53.8523 170.616 53.483C170.477 53.1108 170.266 52.8168 169.982 52.6009C169.7 52.3821 169.347 52.2727 168.92 52.2727C168.511 52.2727 168.168 52.3764 167.889 52.5838C167.611 52.7884 167.401 53.0753 167.259 53.4446C167.116 53.8111 167.045 54.2386 167.045 54.7273Z" fill="#7C3AED" />
<path d="M128.354 78.6464C128.158 78.4512 127.842 78.4512 127.646 78.6464L124.464 81.8284C124.269 82.0237 124.269 82.3403 124.464 82.5355C124.66 82.7308 124.976 82.7308 125.172 82.5355L128 79.7071L130.828 82.5355C131.024 82.7308 131.34 82.7308 131.536 82.5355C131.731 82.3403 131.731 82.0237 131.536 81.8284L128.354 78.6464ZM127.646 92.3536C127.842 92.5488 128.158 92.5488 128.354 92.3536L131.536 89.1716C131.731 88.9763 131.731 88.6597 131.536 88.4645C131.34 88.2692 131.024 88.2692 130.828 88.4645L128 91.2929L125.172 88.4645C124.976 88.2692 124.66 88.2692 124.464 88.4645C124.269 88.6597 124.269 88.9763 124.464 89.1716L127.646 92.3536ZM127.5 79L127.5 92L128.5 92L128.5 79L127.5 79Z" fill="#7C3AED" />
</svg>
</div>
<div class="input-wrapper row">
<label class="input col ">
<p class="input__title">Inner length (a)</p>
<div class="input-field row">
<input type="text" class="input-field__input imperial-system-item" id="inner_length_c_imperial" data-target="inner_length_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="inner_length_c" data-target="inner_length_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>
<label class="input col ">
<p class="input__title">Inner width (b)</p>
<div class="input-field row">
<input type="text" class="input-field__input imperial-system-item" id="inner_width_c_imperial" data-target="inner_width_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="inner_width_c" data-target="inner_width_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 class="input-wrapper row">
<label class="input col ">
<p class="input__title">Depth</p>
<div class="input-field row">
<input type="text" class="input-field__input imperial-system-item" id="depth_c_imperial" data-target="depth_c" 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="depth_c" data-target="depth_c" 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>
<label class="input col ">
<p class="input__title">Border width (w)</p>
<div class="input-field row">
<input type="text" class="input-field__input imperial-system-item" id="border_c_imperial" data-target="border_c" 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_c" data-target="border_c" 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="3">
<div class="calculator-content__geometry area-shape related-to-area-shape-0">
<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="calculator-content__geometry area-shape related-to-area-shape-1 related-item-hidden">
<svg width="272" height="108" viewBox="0 0 272 108" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="136" cy="54" r="39.5" fill="#F5F3FF" stroke="#7C3AED" />
<path d="M174.354 55.3536C174.549 55.1583 174.549 54.8417 174.354 54.6464L171.172 51.4645C170.976 51.2692 170.66 51.2692 170.464 51.4645C170.269 51.6597 170.269 51.9763 170.464 52.1716L173.293 55L170.464 57.8284C170.269 58.0237 170.269 58.3403 170.464 58.5355C170.66 58.7308 170.976 58.7308 171.172 58.5355L174.354 55.3536ZM158.646 54.6464C158.451 54.8417 158.451 55.1583 158.646 55.3536L161.828 58.5355C162.024 58.7308 162.34 58.7308 162.536 58.5355C162.731 58.3403 162.731 58.0237 162.536 57.8284L159.707 55L162.536 52.1716C162.731 51.9763 162.731 51.6597 162.536 51.4645C162.34 51.2692 162.024 51.2692 161.828 51.4645L158.646 54.6464ZM174 54.5H159V55.5H174V54.5Z" fill="#7C3AED" />
<circle cx="136" cy="54" r="21.5" fill="#fff" stroke="#7C3AED" />
<path d="M163.403 48L161.409 41.4545H162.466L163.881 46.4659H163.949L165.347 41.4545H166.42L167.801 46.4489H167.869L169.284 41.4545H170.341L168.347 48H167.358L165.926 42.9716H165.824L164.392 48H163.403Z" fill="#7C3AED" />
<path d="M115.576 54.5757C115.341 54.8101 115.341 55.1899 115.576 55.4243L119.394 59.2426C119.628 59.477 120.008 59.477 120.243 59.2426C120.477 59.0083 120.477 58.6284 120.243 58.3941L116.849 55L120.243 51.6059C120.477 51.3716 120.477 50.9917 120.243 50.7574C120.008 50.523 119.628 50.523 119.394 50.7574L115.576 54.5757ZM156.424 55.4243C156.659 55.19 156.659 54.8101 156.424 54.5757L152.606 50.7574C152.372 50.523 151.992 50.523 151.757 50.7574C151.523 50.9917 151.523 51.3716 151.757 51.6059L155.151 55L151.757 58.3941C151.523 58.6284 151.523 59.0083 151.757 59.2426C151.992 59.477 152.372 59.477 152.606 59.2426L156.424 55.4243ZM116 55.6L156 55.6L156 54.4L116 54.4L116 55.6Z" fill="#7C3AED" />
<path d="M134.92 68V61.4545H135.926V68H134.92ZM135.432 60.3636C135.236 60.3636 135.067 60.2969 134.925 60.1634C134.786 60.0298 134.716 59.8693 134.716 59.6818C134.716 59.4943 134.786 59.3338 134.925 59.2003C135.067 59.0668 135.236 59 135.432 59C135.628 59 135.795 59.0668 135.935 59.2003C136.077 59.3338 136.148 59.4943 136.148 59.6818C136.148 59.8693 136.077 60.0298 135.935 60.1634C135.795 60.2969 135.628 60.3636 135.432 60.3636Z" fill="#7C3AED" />
</svg>
</div>
<div class="input-wrapper row">
<label class="input col volume-calculator,concrete-calculator,tank-volume-calculator,cylinder-volume-calculator">
<p class="input__title">Area shape</p>
<div class="dropdown-wrapper">
<div class="input-field row " tabindex="0">
<select class="input-field__text" onchange="toggleRelatedInputs(this)" id="area-shape">
<option value="Circle" >
Circle
</option>
<option value="Circle border" >
Circle border
</option>
</select>
</div>
</div>
</label> </div>
<div class="input-wrapper row area-shape related-to-area-shape-0">
<label class="input col ">
<p class="input__title">Depth</p>
<div class="input-field row">
<input type="text" class="input-field__input imperial-system-item" id="depth_d_imperial" data-target="depth_d" 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="depth_d" data-target="depth_d" 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>
<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_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>
</div>
<div class="input-wrapper row area-shape related-to-area-shape-1 related-item-hidden">
<label class="input col ">
<p class="input__title">Depth</p>
<div class="input-field row">
<input type="text" class="input-field__input imperial-system-item" id="depth_d_2_imperial" data-target="depth_d_2" 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="depth_d_2" data-target="depth_d_2" 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 class="input-wrapper row area-shape related-to-area-shape-1 related-item-hidden">
<label class="input col ">
<p class="input__title">Inner diameter (i)</p>
<div class="input-field row">
<input type="text" class="input-field__input imperial-system-item" id="inner_diameter_d_imperial" data-target="inner_diameter_d" 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="inner_diameter_d" data-target="inner_diameter_d" 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>
<label class="input col ">
<p class="input__title">Border width (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="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="border_d" data-target="border_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>
</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 108" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="136" cy="40" r="39.5" fill="#F5F3FF" stroke="#7C3AED" />
<circle cx="136" cy="40" r="21.5" fill="#fff" stroke="#7C3AED" />
<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 d="M115.576 40.5757C115.341 40.8101 115.341 41.1899 115.576 41.4243L119.394 45.2426C119.628 45.477 120.008 45.477 120.243 45.2426C120.477 45.0083 120.477 44.6284 120.243 44.3941L116.849 41L120.243 37.6059C120.477 37.3716 120.477 36.9917 120.243 36.7574C120.008 36.523 119.628 36.523 119.394 36.7574L115.576 40.5757ZM156.424 41.4243C156.659 41.19 156.659 40.8101 156.424 40.5757L152.606 36.7574C152.372 36.523 151.992 36.523 151.757 36.7574C151.523 36.9917 151.523 37.3716 151.757 37.6059L155.151 41L151.757 44.3941C151.523 44.6284 151.523 45.0083 151.757 45.2426C151.992 45.477 152.372 45.477 152.606 45.2426L156.424 41.4243ZM116 41.6L156 41.6L156 40.4L116 40.4L116 41.6Z" fill="#7C3AED" />
<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 d="M134.92 54V47.4545H135.926V54H134.92ZM135.432 46.3636C135.236 46.3636 135.067 46.2969 134.925 46.1634C134.786 46.0298 134.716 45.8693 134.716 45.6818C134.716 45.4943 134.786 45.3338 134.925 45.2003C135.067 45.0668 135.236 45 135.432 45C135.628 45 135.795 45.0668 135.935 45.2003C136.077 45.3338 136.148 45.4943 136.148 45.6818C136.148 45.8693 136.077 46.0298 135.935 46.1634C135.795 46.2969 135.628 46.3636 135.432 46.3636Z" fill="#7C3AED" />
</svg>
</div>
<div class="input-wrapper row">
<label class="input col ">
<p class="input__title">Depth</p>
<div class="input-field row">
<input type="text" class="input-field__input imperial-system-item" id="depth_e_imperial" data-target="depth_e" 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="depth_e" data-target="depth_e" 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 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="outer_diameter_e_imperial" data-target="outer_diameter_e" 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="outer_diameter_e" data-target="outer_diameter_e" 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">Inner Diameter (i)</p>
<div class="input-field row">
<input type="text" class="input-field__input imperial-system-item" id="inner_diameter_e_imperial" data-target="inner_diameter_e" 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="inner_diameter_e" data-target="inner_diameter_e" 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="5">
<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">Depth</p>
<div class="input-field row">
<input type="text" class="input-field__input imperial-system-item" id="depth_f_imperial" data-target="depth_f" 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="depth_f" data-target="depth_f" 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>
<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="6">
<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">Depth</p>
<div class="input-field row">
<input type="text" class="input-field__input imperial-system-item" id="depth_g_imperial" data-target="depth_g" 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="depth_g" data-target="depth_g" 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>
<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">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 cubic yard" >
per cubic yard
</option>
<option value="per cubic foot" >
per cubic foot
</option>
<option value="per cubic meter" >
per cubic 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="calculateRectangle(this); animateElements();" data-action="calculateRectangle" 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="calculateRectangleWithBorders(this); animateElements();" data-action="calculateRectangleWithBorders" 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="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="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="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="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="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="6">
<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</th>
</tr>
</thead>
<tbody class="animate">
<tr>
<th class="semibold">Cubic Yards</th>
<td class="semibold">
<span id="result_yd">0.29834</span> yd³
</td>
</tr>
<tr>
<th>Cubic Feet</th>
<td>
<span id="result_ft">8.05511</span> ft³
</td>
</tr>
<tr>
<th>Cubic Meters</th>
<td>
<span id="result_m">0.2281</span> m³
</td>
</tr>
<tr>
<th>Price</th>
<td>
<span id="result_price">2.98337</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>