-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
712 lines (645 loc) · 48.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<!-- bootstrap icon-font -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<!-- https://getbootstrap.com/ -->
<link rel="stylesheet" href="styles.css"> <!-- self-written -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <!-- https://www.chartjs.org/ -->
<script src="script.js"></script> <!-- self-written-->
<!-- Favicon-stuff -->
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<title>Open Source Calculator</title>
<meta name="description"
content="Calculate whether switching to an Open-Source Software solution will save you money.">
</head>
<body>
<header>
<h1><strong>O</strong>pen <strong>So</strong>urce <strong>Calc</strong>ulator</h1>
<p class="subtitle">Is Switching to Open Source Optimal <strong>in Your Situation</strong>?</p>
</header>
<main>
<div class="container" id="mainContainer">
<div class="accordion accordion-flush" id="bigAccordion">
<div class="accordion-item">
<h1 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<span class="h2">Introduction</span>
</button>
</h1>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
data-bs-parent="#bigAccordion">
<div class="accordion-body">
<div class="introduction-section" id="introduction-section">
<div class="container">
<h2>What does this website do?</h2>
<p>This website lets companies calculate whether it pays for them to switch to Free
and Open-Source Software (FOSS) solutions.</p>
<p>This is done by estimating the <strong>one-time switching costs</strong> such as
employee training expenses, setup cost, and the acclimation period in which your
staff gets used to using the new software.
These costs will be added to the <strong>yearly expanses</strong> such as
licence fees and salaries payed the maintanance-programmers.</p>
<h2>How to use the calculator:</h2>
<p>Go to the next section (<b>Price Calculator</b>) and fill in the required costs
and amounts.
Then click on the button titled "Calculate Financial Results". You will be shown
the cost estimation over the next 20 years in the <b>Results</b> section.</p>
<p>It is recommended that you input values conservatively. For example, if you are
unsure whether the number of
maintanance programmers nedded for the new solution is 2 or 3, go with 3. That
way, you can be more confident in the results.</p>
<div class="row">
<div class="col-lg-6" id="shareDiv">
<h2>Sharing your results with someone else:</h2>
<p>You can share your results (see turquoise button) by either just copying
the URL or by sharing the link via email.
Make sure to double-check your data before sharing the results.</p>
</div>
<div class="col-lg-6" id="welcomeDiv">
<h2>If you got sent here via a link:</h2>
<p>The values needed for calculation already have been filled out for you.
You can double-check them in the <b>Price Calculator</b> tab. Then click
on "Calculate Financial Results" to receive your projection.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="invisible">
<div class="alert alert-success alert-dismissible fade show" role="alert" id="urlImportAlert">
<strong>URL imported.</strong> The form has been filled out accordingly.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
</div>
<div class="accordion-item">
<h1 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" id="calcSecBtn" type="button"
data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false"
aria-controls="collapseTwo">
<span class="h2" id="calcSecTitle">Price Calculator</span>
</button>
</h1>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
data-bs-parent="#bigAccordion">
<div class="accordion-body">
<div class="VS-section" id="VS-section">
<div class="container">
<div class="invisible">
<div class="alert alert-light alert-dismissible fade show" role="alert"
id="insertExampleAlert">
Click on this link to insert an example:
<button type="button" class="linkVisuals" data-bs-dismiss="alert"
onclick="insertExample();">MS Office or LibreOffice</button>
<button type="button" class="btn-close" data-bs-dismiss="alert"
aria-label="Close"></button>
</div>
</div>
<form id="calcInput" name="calcInput">
<div class="row">
<div class="col-md-6">
<div class="formSection">
<h3>Old Software</h3>
<label for="oldName" class="form-label inputFieldLabel">Product
Name</label>
<input type="text" id="oldName" class="form-control form-control-lg"
required>
<label for="oldCost" class="form-label inputFieldLabel">Price of
licence (per employee)</label>
<div class="input-group">
<input type="text" id="oldCost" class="form-control numberForm"
required><br>
<span class="input-group-text">$/€/£/¥/…¤</span>
</div>
<div class="container">
<div class="row">
<div class="form-check col-auto">
<input type="radio" name="oldCostPeriod"
class="form-check-input" id="oldYearly" value="1">
<label for="oldYearly" class="form-check-label">Yearly
fee</label>
</div>
<div class="form-check col-auto">
<input type="radio" name="oldCostPeriod"
class="form-check-input" id="oldMonthly" value="12"
checked>
<label for="oldMonthly" class="form-check-label">Monthly
fee</label>
</div>
</div>
</div>
<label for="nrCurrentProgrammers"
class="form-label inputFieldLabel">Maintanance programmers
needed</label>
<div class="input-group">
<input type="text" id="nrCurrentProgrammers"
class="form-control numberForm"
aria-describedby="nrCurrentPHelp" required>
<span class="input-group-text">x</span>
</div>
<div id="nrCurrentPHelp" class="form-text">Input the number of
programmers that are working to maintain the current solution.
</div>
</div>
</div>
<div class="col-md-6">
<div class="formSection">
<h3>New Software</h3>
<label for="newName" class="form-label inputFieldLabel">Product
Name</label>
<input type="text" id="newName" class="form-control form-control-lg"
required>
<label for="newCost" class="form-label inputFieldLabel">Price of
licence (per employee)</label>
<div class="input-group">
<input type="text" id="newCost" class="form-control numberForm"
required><br>
<span class="input-group-text">$/€/£/¥/…¤</span>
</div>
<div class="container">
<div class="row">
<div class="form-check col-auto">
<input type="radio" name="newCostPeriod"
class="form-check-input" id="newYearly" value="1">
<label for="newYearly" class="form-check-label">Yearly
fee</label>
</div>
<div class="form-check col-auto">
<input type="radio" name="newCostPeriod"
class="form-check-input" id="newMonthly" value="12"
checked>
<label for="newMonthly" class="form-check-label">Monthly
fee</label>
</div>
</div>
</div>
<label for="nrFutureProgrammers"
class="form-label inputFieldLabel">Maintanance programmers
needed</label>
<div class="input-group">
<input type="text" id="nrFutureProgrammers"
class="form-control numberForm"
aria-describedby="nrFuturePHelp" required>
<span class="input-group-text">x</span>
</div>
<div id="nrFuturePHelp" class="form-text">Input the number of
programmers that would be required to maintain the new solution.
</div>
</div>
</div>
</div>
<div class="formSection">
<h3>General Data</h3>
<div class="row justify-content-center">
<div class="col-md-12 col-lg-4">
<label for="nrEmployees" class="form-label inputFieldLabel">Number
of employees (=nr of licences)</label>
<div class="input-group">
<input type="text" id="nrEmployees"
class="form-control numberForm"
aria-describedby="nrEmployeesHelp" required>
<span class="input-group-text">x</span>
</div>
<div id="nrEmployeesHelp" class="form-text">Input the number of
employees working at your company.</div>
</div>
<div class="col-md-6 col-lg-4">
<label for="employeeCost" class="form-label inputFieldLabel">The
average salary of an employee</label>
<div class="input-group">
<input type="text" id="employeeCost"
class="form-control numberForm" aria-describedby="eCostHelp"
required>
<span class="input-group-text">$/€/£/¥/…¤</span>
</div>
<div id="eCostHelp" class="form-text">What does one employee cost
you?</div>
<div class="container">
<div class="row">
<div class="form-check col-auto">
<input type="radio" name=eCostPeriod
class="form-check-input" id="eYearly" value="1"
checked>
<label for="eYearly" class="form-check-label">Yearly
salary</label>
</div>
<div class="form-check col-auto">
<input type="radio" name=eCostPeriod
class="form-check-input" id="eMonthly" value="12">
<label for="eMonthly" class="form-check-label">Monthly
salary</label>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<label for="programmerCost" class="form-label inputFieldLabel">The
average salary of a programmer</label>
<div class="input-group">
<input type="text" id="programmerCost"
class="form-control numberForm" aria-describedby="pCostHelp"
required>
<span class="input-group-text">$/€/£/¥/…¤</span>
</div>
<div id="pCostHelp" class="form-text">What does one programmer cost
you?</div>
<div class="container">
<div class="row">
<div class="form-check col-auto">
<input type="radio" name=pCostPeriod
class="form-check-input" id="pYearly" value="1"
checked>
<label for="pYearly" class="form-check-label">Yearly
salary</label>
</div>
<div class="form-check col-auto">
<input type="radio" name=pCostPeriod
class="form-check-input" id="pMonthly" value="12">
<label for="pMonthly" class="form-check-label">Monthly
salary</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="formSection">
<h3>One-Time Cost</h3>
<div class="row">
<div class="col-lg-4">
<label for="trainingInactivity"
class="form-label inputFieldLabel">Employee-inactivity</label>
<div class="input-group">
<input type="text" id="trainingInactivity"
class="form-control numberForm"
aria-describedby="inactivityHelp" required>
<span class="input-group-text">days</span>
</div>
<div id="inactivityHelp" class="form-text">Input the number of days
you assume your employees will be <strong>completely
inactive</strong> because of training & inactivity.</div>
</div>
<div class="col-md-6 col-lg-4">
<label for="nrSetupProgrammers"
class="form-label inputFieldLabel">Setup programmers</label>
<div class="input-group">
<input type="text" id="nrSetupProgrammers"
class="form-control numberForm"
aria-describedby="setupProgrammersHelp" required>
<span class="input-group-text">x</span>
</div>
<div id="setupProgrammersHelp" class="form-text">Input the number of
programmers needed to implement the new solution.</div>
</div>
<div class="col-md-6 col-lg-4">
<label for="nrSetupMonths" class="form-label inputFieldLabel">Setup
time-period</label>
<div class="input-group">
<input type="text" id="nrSetupMonths"
class="form-control numberForm"
aria-describedby="setupTimeHelp" required>
<span class="input-group-text">months</span>
</div>
<div id="setupTimeHelp" class="form-text">Input the months will take
those programmers to implement the new solution.</div>
</div>
</div>
</div>
</form>
<button type="button" class="btn btn-success" id="calcButton"
onclick="main();">Calculate Financial Results</button>
<button type="button" class="btn btn-info" onclick='prepareToShare("1");'>Share
Website with Preinserted Values</button>
<div class="container">
<div class="row invisible bordered">
<div class="monospace col-md-10" id="linkDiv1">
<!-- Here will be the JS-generated p-tag (the URL) -->
</div>
<div class="col-md-2 align-self-center">
<button type="button" class="btn btn-info" onclick="copyUrl();">Copy
URL</button>
<a href="mailto:?body=https://osocalc.org/" class="btn btn-info"
id="mailto1">Send URL via Email</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h1 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" id="resSecBtn"
data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false"
aria-controls="collapseThree">
<span class="h2">Results</span>
</button>
</h1>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree"
data-bs-parent="#bigAccordion">
<div class="accordion-body">
<div id="notingYetCalculated" style="text-align: center;">
<p>Nothing was calculated yet. Go to the previous section to input data and receive
results.</p>
<button type="button" class="btn btn-success"
onclick="document.getElementById('calcSecBtn').click();">
Go to Price Calculator</button>
</div>
<div class="results-section invisible" id="results-section">
<div class="container">
<h2 id="resTitle">Results of Calculation:</h2>
<div class="row">
<div class="col-lg-6" id="chartDiv"></div>
<div class="col-lg-6" id="tableDiv"></div>
</div>
<div class="row justify-content-center">
<div class="col-auto">
<h3>Summary:</h3>
<table class="table">
<tbody id="summaryTableBody">
<!-- The JS-generated summary-table will show up here. -->
</tbody>
</table>
</div>
</div>
<div id="worthSwitchingDiv"></div>
<h3>Please Conisder This:</h3>
<p style="text-align: justify;">Those simply are the results of a somewhat basic
calculation.
This calculation <strong>does not</strong> include many (important!) other
aspects of switching from a commercial software solution to a FOSS solution.
In <a href="#advSecTitle">the following-section</a>, you find a few common
advantages and disadvantages of both, commercial and open-source software, to
help you decide whether to make a switch.</p>
<div style="text-align: center;">
<button type="button" class="btn btn-success"
onclick="document.getElementById('calcSecBtn').click();">
Go back to Price Calculator</button>
<button type="button" class="btn btn-info" onclick="prepareToShare('2');">Share
Website with Preinserted Values</button>
<button type="button" class="btn btn-primary"
onclick="document.getElementById('advSecBtn').click();">
See List of Pros and Cons</button>
</div>
<div class="container">
<div class="row invisible bordered">
<div class="monospace col-md-10" id="linkDiv2">
<!-- Here will be the JS-generated p-tag (the URL) -->
</div>
<div class="col-md-2 align-self-center">
<button type="button" class="btn btn-info" onclick="copyUrl();">Copy
URL</button>
<a href="mailto:?body=https://osocalc.org/" class="btn btn-info"
id="mailto2">Send URL via Email</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h1 class="accordion-header" id="headingFour">
<button class="accordion-button collapsed" type="button" id="advSecBtn"
data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false"
aria-controls="collapseFour">
<span class="h2" id="advSecTitle">Commercial vs Open-Source Software</span>
</button>
</h1>
<div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour"
data-bs-parent="#bigAccordion">
<div class="accordion-body">
<div class="advantage-section" id="advantage-section">
<div class="container">
<div class="row">
<div class="col-md">
<div class="prosAndConsSection">
<div class="row">
<h2>Commercial Software</h2>
<div class="col-xl">
<h3>Common Advantages</h3>
<ul class="pros">
<li class="aLi1 nonHoverStyle">A lot of work is done for you
</li>
<li class="aLi2 nonHoverStyle">Feature-complete</li>
<li class="aLi3 nonHoverStyle">May have better synergy with
other commercial software
<a data-bs-toggle="tooltip" title=""
data-bs-original-title="For example, MS Word synergizes very well with other Microsoft-solutions such as One-Drive.">
<img src="images/info.png" alt="Info-button"
class="infoI">
</a>
</li>
</ul>
</div>
<div class="col-xl">
<h3>Common Disadvantages</h3>
<ul class="cons">
<li class="bLi1 nonHoverStyle">High cost</li>
<li class="bLi2 nonHoverStyle">Dependance on external
factors
<a data-bs-toggle="tooltip" title=""
data-bs-original-title="For example, Microsoft may cut availibility of certain features for certain countries or certain clients.">
<img src="images/info.png" alt="Info-button"
class="infoI">
</a>
</li>
<li class="bLi3 nonHoverStyle">May or may not include
backdoors and telemetry</li>
<li class="bLi4 nonHoverStyle">May not synergize well with
software outside the proprietary ecosystem
<a data-bs-toggle="tooltip" title=""
data-bs-original-title="For example, MS Word gives users a fake warning when they open an .odt-file.">
<img src="images/info.png" alt="Info-button"
class="infoI">
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md">
<div class="prosAndConsSection">
<div class="row">
<h2>Open Source Software</h2>
<div class="col-xl">
<h3>Common Advantages</h3>
<ul class="pros">
<li class="bLi1 nonHoverStyle">Low cost</li>
<li class="bLi2 nonHoverStyle">Freedom from external factors
<a data-bs-toggle="tooltip" title=""
data-bs-original-title="The source-code will always be free and available for anyone to copy and use.">
<img src="images/info.png" alt="Info-button"
class="infoI">
</a>
</li>
<li class="bLi3 nonHoverStyle">Data security
<a data-bs-toggle="tooltip" title=""
data-bs-original-title="You can check for yourself what is happening inside the software. You're not forced to accept anyone's promises of data-security.">
<img src="images/info.png" alt="Info-button"
class="infoI">
</a>
</li>
<li class="bLi4 nonHoverStyle">May have better synergy with
other open-source software</li>
</ul>
</div>
<div class="col-xl">
<h3>Common Disadvantages</h3>
<ul class="cons">
<li class="aLi1 nonHoverStyle">Extra staff may be required
to implement or organize features</li>
<li class="aLi2 nonHoverStyle">Two free solutions may be
required to substitute for one commercial one.
<a data-bs-toggle="tooltip" title="" data-bs-html="true"
data-bs-original-title="For example, LibreOffice <u>and</u> a self-hosted cloud are required to replace MS-Office's Cloud package.">
<img src="images/info.png" alt="Info-button"
class="infoI">
</a>
</li>
<li class="aLi3 nonHoverStyle">Proprietary solutions may
refuse to accept open standards
<a data-bs-toggle="tooltip" title=""
data-bs-original-title="For example, MS Office saves .docx-files and .pptx-files in inconsistent formats, making it difficult for other Software such as LibreOffice to import their files.">
<img src="images/info.png" alt="Info-button"
class="infoI">
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="exampleSource">
<span>The examples used in this section refer to <a
href="https://www.microsoft.com/microsoft-365/business/compare-all-microsoft-365-business-products"
target="_blank">Microsoft Office</a>
and <a href="https://www.libreoffice.org/download/libreoffice-in-business/"
target="_blank">Libreoffice</a>.</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="toastContainer">
<div class="toastParent invisible">
<div class="toast bg-warning" id="errorToast" data-bs-delay="10000" role="alert"
aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<i class="bi bi-exclamation-diamond-fill toastIcon"></i>
<strong class="me-auto">Error</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body" id="errorToastBody"></div>
</div>
</div>
<div class="toastParent invisible">
<div class="toast bg-success" id="urlCopyToast" data-bs-delay="5000" role="alert"
aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<i class="bi bi-check-circle-fill toastIcon"></i>
<strong class="me-auto">URL copied</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body" style="color: white;">
Your URL was successfully copied to the clipboard.
</div>
</div>
</div>
</div>
</div>
</main>
<footer>
<div class="container">
<div class="row content-justify-center">
<div class="col align-self-center" style="text-align: center;">
<div class="bigScreenOnly">
<b>GPL-3.0 License</b><br>
</div>
<a href="https://github.com/Glitchy-Tozier/oSoCalc">GitHub <i class="bi bi-github"></i></a>
</div>
<div class="col-auto align-self-center">
<img src="images/favicon.png" alt="Logo of the website." class="footerLogo">
</div>
<div class="col align-self-center" style="text-align: center;">
<div class="bigScreenOnly">
<b>About:</b><br>
</div>
<a href="about.html">o$oCalc About</a>
</div>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc"
crossorigin="anonymous"></script>
<script>
// Check for URL parameters
const stringUrl = window.location.href;
const splitUrl = stringUrl.split("?");
const urlImportAlert = document.getElementById("urlImportAlert");
const urlImportParent = urlImportAlert.parentElement;
const insertExampleAlert = document.getElementById("insertExampleAlert");
const insertExampleParent = insertExampleAlert.parentElement;
if (splitUrl.length > 1 && splitUrl[1] !== "") { // If URL-parametest exist, use them to fill the form.
fillForm(stringUrl);
urlImportParent.classList.remove("invisible");
insertExampleAlert.remove();
main("urlImport");
} else {
const shareDiv = document.getElementById("shareDiv"); // Remove the "If you got here via link"-div.
shareDiv.classList.remove("col-lg-6");
shareDiv.classList.add("col-12");
const welcomeDiv = document.getElementById("welcomeDiv");
welcomeDiv.remove();
insertExampleParent.classList.remove("invisible");
urlImportParent.remove();
}
// Initialize the form-inputs to make "Enter" start the calculation
submitFormOnEnter("calcInput");
// Initialize all Toasts
const toastList = [].slice.call(document.querySelectorAll('.toast'));
toastList.map(toast => {
toast.addEventListener('show.bs.toast', function () { // Necessary to make the 'X' for closing the toast clickable.
toast.parentElement.classList.remove("invisible");
})
toast.addEventListener('hidden.bs.toast', function () { // Necessary for not blocking the 'X's of other toasts.
toast.parentElement.classList.add("invisible");
})
return new bootstrap.Toast(toast); // Initialize the toast.
});
// Initialize all the event-listener attributes needed for the visual pairing in the last section.
const listClasses = ["aLi1", "aLi2", "aLi3", "bLi1", "bLi2", "bLi3", "bLi4"];
for (let i = 0; i < listClasses.length; i++) {
hoverPair(listClasses[i]);
}
// Initialize all Tooltips
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});
</script>
</body>
</html>