Compare commits

...

8 Commits

Author SHA1 Message Date
8ed204eace Add custom URL 2025-03-21 10:45:47 -04:00
85669bb430 Add EPL breakdown 2025-03-21 10:45:34 -04:00
de3071891d Edit colour themes 2025-03-21 01:05:21 -04:00
38eba055ec Update appearance 2025-03-20 07:19:41 -04:00
f41473c1ac Edit footer 2025-01-12 14:39:25 -05:00
58b4eab0be Fix spacing between elements 2025-01-12 14:27:16 -05:00
5f6e99185c Update styling 2025-01-12 14:24:13 -05:00
d75b655bbb Add license 2025-01-12 13:10:21 -05:00
6 changed files with 396 additions and 162 deletions

1
CNAME Normal file
View File

@ -0,0 +1 @@
calculator.haothitran.com

9
LICENSE Normal file
View File

@ -0,0 +1,9 @@
MIT License
Copyright (c) 2025 Hao Tran
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

View File

@ -374,6 +374,7 @@ function calculator() {
var cancelDate = document.getElementById("cancelDate").value; var cancelDate = document.getElementById("cancelDate").value;
var totalPremium = document.getElementById("totalPremium").value; var totalPremium = document.getElementById("totalPremium").value;
var breakDO = document.getElementById("breakDO").value || 0; var breakDO = document.getElementById("breakDO").value || 0;
var breakEPL = document.getElementById("breakEPL").value || 0;
var breakEO = document.getElementById("breakEO").value || 0; var breakEO = document.getElementById("breakEO").value || 0;
var breakCyber = document.getElementById("breakCyber").value || 0; var breakCyber = document.getElementById("breakCyber").value || 0;
var breakLEI = document.getElementById("breakLEI").value || 0; var breakLEI = document.getElementById("breakLEI").value || 0;
@ -394,16 +395,14 @@ function calculator() {
if(document.getElementById('calcProRata').checked) { if(document.getElementById('calcProRata').checked) {
var earnedFactor = Math.round(((forceDays / termDays) + Number.EPSILON)*1000)/1000; var earnedFactor = Math.round(((forceDays / termDays) + Number.EPSILON)*1000)/1000;
var unearnedFactor = Math.round(((remainingDays / termDays) + Number.EPSILON)*1000)/1000; var unearnedFactor = Math.round(((remainingDays / termDays) + Number.EPSILON)*1000)/1000;
document.getElementById("earnedFactor").className = 'blue'; document.getElementById("earnedFactor").className = 'normal';
document.getElementById("unearnedFactor").className = 'blue'; document.getElementById("unearnedFactor").className = 'normal';
// calculate short rate // calculate short rate
}else if(document.getElementById('calcShortRate').checked) { }else if(document.getElementById('calcShortRate').checked) {
const searchDate = forceDays; const searchDate = forceDays;
const shortRateFactor = shortRate[searchDate]; const shortRateFactor = shortRate[searchDate];
var earnedFactor = shortRateFactor; var earnedFactor = shortRateFactor;
var unearnedFactor = Math.round(((1 - shortRateFactor) + Number.EPSILON)*1000)/1000; var unearnedFactor = Math.round(((1 - shortRateFactor) + Number.EPSILON)*1000)/1000;
document.getElementById("earnedFactor").className = 'blue';
document.getElementById("unearnedFactor").className = 'blue';
}else { }else {
var earnedFactor = 'ERROR' var earnedFactor = 'ERROR'
var unearnedFactor = 'ERROR' var unearnedFactor = 'ERROR'
@ -414,10 +413,10 @@ function calculator() {
var earnedPremium = Math.round(((totalPremium * earnedFactor) + Number.EPSILON)*100)/100; var earnedPremium = Math.round(((totalPremium * earnedFactor) + Number.EPSILON)*100)/100;
var unearnedPremium = Math.round(((totalPremium * unearnedFactor) + Number.EPSILON)*100)/100; var unearnedPremium = Math.round(((totalPremium * unearnedFactor) + Number.EPSILON)*100)/100;
document.getElementById("earnedPremium").className = 'green'; document.getElementById("earnedPremium").className = 'green';
document.getElementById("unearnedPremium").className = 'orange'; document.getElementById("unearnedPremium").className = 'red';
// calculate breakdown // calculate breakdown
var calcBreak = +breakDO + +breakEO + +breakCyber + +breakLEI + +breakCGL + +breakProperty + +breakEB; var calcBreak = +breakDO + +breakEPL + +breakEO + +breakCyber + +breakLEI + +breakCGL + +breakProperty + +breakEB;
// check if breakdown matches total premium // check if breakdown matches total premium
var calcMatch = calcBreak-totalPremium; var calcMatch = calcBreak-totalPremium;
if(totalPremium<calcBreak && totalPremium > 1) { if(totalPremium<calcBreak && totalPremium > 1) {
@ -443,6 +442,9 @@ function calculator() {
var percentDO = Math.round((((breakDO / totalPremium) * 100) + Number.EPSILON)*100)/100; var percentDO = Math.round((((breakDO / totalPremium) * 100) + Number.EPSILON)*100)/100;
var earnedDO = Math.round(((breakDO * earnedFactor) + Number.EPSILON)*100)/100; var earnedDO = Math.round(((breakDO * earnedFactor) + Number.EPSILON)*100)/100;
var unearnedDO = Math.round(((breakDO * unearnedFactor) + Number.EPSILON)*100)/100; var unearnedDO = Math.round(((breakDO * unearnedFactor) + Number.EPSILON)*100)/100;
var percentEPL = Math.round((((breakEPL / totalPremium) * 100) + Number.EPSILON)*100)/100;
var earnedEPL = Math.round(((breakEPL * earnedFactor) + Number.EPSILON)*100)/100;
var unearnedEPL = Math.round(((breakEPL * unearnedFactor) + Number.EPSILON)*100)/100;
var percentEO = Math.round((((breakEO / totalPremium) * 100) + Number.EPSILON)*100)/100; var percentEO = Math.round((((breakEO / totalPremium) * 100) + Number.EPSILON)*100)/100;
var earnedEO = Math.round(((breakEO * earnedFactor) + Number.EPSILON)*100)/100; var earnedEO = Math.round(((breakEO * earnedFactor) + Number.EPSILON)*100)/100;
var unearnedEO = Math.round(((breakEO * unearnedFactor) + Number.EPSILON)*100)/100; var unearnedEO = Math.round(((breakEO * unearnedFactor) + Number.EPSILON)*100)/100;
@ -461,52 +463,61 @@ function calculator() {
var percentEB = Math.round((((breakEB / totalPremium) * 100) + Number.EPSILON)*100)/100; var percentEB = Math.round((((breakEB / totalPremium) * 100) + Number.EPSILON)*100)/100;
var earnedEB = Math.round(((breakEB * earnedFactor) + Number.EPSILON)*100)/100; var earnedEB = Math.round(((breakEB * earnedFactor) + Number.EPSILON)*100)/100;
var unearnedEB = Math.round(((breakEB * unearnedFactor) + Number.EPSILON)*100)/100; var unearnedEB = Math.round(((breakEB * unearnedFactor) + Number.EPSILON)*100)/100;
document.getElementById("percentDO").className = 'blue'; document.getElementById("percentDO").className = 'normal';
document.getElementById("earnedDO").className = 'green'; document.getElementById("earnedDO").className = 'green';
document.getElementById("unearnedDO").className = 'orange'; document.getElementById("unearnedDO").className = 'red';
document.getElementById("percentEO").className = 'blue'; document.getElementById("percentEPL").className = 'normal';
document.getElementById("earnedEPL").className = 'green';
document.getElementById("unearnedEPL").className = 'red';
document.getElementById("percentEO").className = 'normal';
document.getElementById("earnedEO").className = 'green'; document.getElementById("earnedEO").className = 'green';
document.getElementById("unearnedEO").className = 'orange'; document.getElementById("unearnedEO").className = 'red';
document.getElementById("percentCyber").className = 'blue'; document.getElementById("percentCyber").className = 'normal';
document.getElementById("earnedCyber").className = 'green'; document.getElementById("earnedCyber").className = 'green';
document.getElementById("unearnedCyber").className = 'orange'; document.getElementById("unearnedCyber").className = 'red';
document.getElementById("percentLEI").className = 'blue'; document.getElementById("percentLEI").className = 'normal';
document.getElementById("earnedLEI").className = 'green'; document.getElementById("earnedLEI").className = 'green';
document.getElementById("unearnedLEI").className = 'orange'; document.getElementById("unearnedLEI").className = 'red';
document.getElementById("percentCGL").className = 'blue'; document.getElementById("percentCGL").className = 'normal';
document.getElementById("earnedCGL").className = 'green'; document.getElementById("earnedCGL").className = 'green';
document.getElementById("unearnedCGL").className = 'orange'; document.getElementById("unearnedCGL").className = 'red';
document.getElementById("percentProperty").className = 'blue'; document.getElementById("percentProperty").className = 'normal';
document.getElementById("earnedProperty").className = 'green'; document.getElementById("earnedProperty").className = 'green';
document.getElementById("unearnedProperty").className = 'orange'; document.getElementById("unearnedProperty").className = 'red';
document.getElementById("percentEB").className = 'blue'; document.getElementById("percentEB").className = 'normal';
document.getElementById("earnedEB").className = 'green'; document.getElementById("earnedEB").className = 'green';
document.getElementById("unearnedEB").className = 'orange'; document.getElementById("unearnedEB").className = 'red';
}else { }else {
var percentDO = 'ERROR' var percentDO = '-'
var earnedDO = 'ERROR' var earnedDO = '-'
var unearnedDO = 'ERROR' var unearnedDO = '-'
var percentEO = 'ERROR' var percentEPL = '-'
var earnedEO = 'ERROR' var earnedEPL = '-'
var unearnedEO = 'ERROR' var unearnedEPL = '-'
var percentCyber = 'ERROR' var percentEO = '-'
var earnedCyber = 'ERROR' var earnedEO = '-'
var unearnedCyber = 'ERROR' var unearnedEO = '-'
var percentLEI = 'ERROR' var percentCyber = '-'
var earnedLEI = 'ERROR' var earnedCyber = '-'
var unearnedLEI = 'ERROR' var unearnedCyber = '-'
var percentCGL = 'ERROR' var percentLEI = '-'
var earnedCGL = 'ERROR' var earnedLEI = '-'
var unearnedCGL = 'ERROR' var unearnedLEI = '-'
var percentProperty = 'ERROR' var percentCGL = '-'
var earnedProperty = 'ERROR' var earnedCGL = '-'
var unearnedProperty = 'ERROR' var unearnedCGL = '-'
var percentEB = 'ERROR' var percentProperty = '-'
var earnedEB = 'ERROR' var earnedProperty = '-'
var unearnedEB = 'ERROR' var unearnedProperty = '-'
var percentEB = '-'
var earnedEB = '-'
var unearnedEB = '-'
document.getElementById("percentDO").className = 'red'; document.getElementById("percentDO").className = 'red';
document.getElementById("earnedDO").className = 'red'; document.getElementById("earnedDO").className = 'red';
document.getElementById("unearnedDO").className = 'red'; document.getElementById("unearnedDO").className = 'red';
document.getElementById("percentEPL").className = 'red';
document.getElementById("earnedEPL").className = 'red';
document.getElementById("unearnedEPL").className = 'red';
document.getElementById("percentEO").className = 'red'; document.getElementById("percentEO").className = 'red';
document.getElementById("earnedEO").className = 'red'; document.getElementById("earnedEO").className = 'red';
document.getElementById("unearnedEO").className = 'red'; document.getElementById("unearnedEO").className = 'red';
@ -540,6 +551,9 @@ function calculator() {
document.getElementById("percentDO").innerHTML = percentDO; document.getElementById("percentDO").innerHTML = percentDO;
document.getElementById("earnedDO").innerHTML = earnedDO; document.getElementById("earnedDO").innerHTML = earnedDO;
document.getElementById("unearnedDO").innerHTML = unearnedDO; document.getElementById("unearnedDO").innerHTML = unearnedDO;
document.getElementById("percentEPL").innerHTML = percentEPL;
document.getElementById("earnedEPL").innerHTML = earnedEPL;
document.getElementById("unearnedEPL").innerHTML = unearnedEPL;
document.getElementById("percentEO").innerHTML = percentEO; document.getElementById("percentEO").innerHTML = percentEO;
document.getElementById("earnedEO").innerHTML = earnedEO; document.getElementById("earnedEO").innerHTML = earnedEO;
document.getElementById("unearnedEO").innerHTML = unearnedEO; document.getElementById("unearnedEO").innerHTML = unearnedEO;

View File

@ -1,28 +1,128 @@
html, body, div, span, applet, object, iframe, /*------------------------------------------------------------------------------
-- // RESETS
------------------------------------------------------------------------------*/
html { box-sizing: border-box; }
*,
*:before,
*:after {
box-sizing: border-box;
}
html, body, div, span,
header, nav, main, article, section, aside, footer,
h1, h2, h3, h4, h5, h6,
p, strong, em, b, i, u, a, ul, ol, li,
blockquote, pre, code, img, audio, video,
table, caption, thead, tbody, tfoot, tr, th, td,
form, input {
margin: 0;
padding: 0;
background: transparent;
font-size: 100%;
font-weight: normal;
vertical-align: baseline;
}
header, nav, main, article, section, aside, footer,
blockquote, pre, img, audio, video,
form {
display: block;
}
/* -----------------------------------------------------------------------------
-- // BASE
----------------------------------------------------------------------------- */
:root { :root {
--width: 900px; --width: 900px;
--font-family: Verdana, sans-serif; --font-family: Verdana, Arial, sans-serif;
--font-scale: 1em; --font-scale: 1em;
--bg-100: #100F0F;
--bg-200: #1C1B1A;
--ui-100: #282726;
--ui-200: #343331;
--ui-300: #403E3C;
--text-100: #CECDC3;
--text-200: #878580;
--text-300: #575653;
--blue-400: #4385BE;
--cyan-400: #3AA99F;
--green-400: #879A39;
--orange-400: #DA702C;
--purple-400: #8B7EC8;
--red-400: #D14D41;
--yellow-400: #D0A215;
} }
@media (prefers-color-scheme: dark) {
:root { :root.light {
} --bg-100:rgb(250, 250, 250);
--bg-200: rgb(220, 220, 220);
--text-100: rgb(20, 20, 20);
--text-200: rgb(100, 100, 100);
--ui-100: rgb(180, 180, 180);
--ui-200: rgb(80, 80, 80);
--highlight-accent: rgb(30, 80, 200);
--highlight-earned: rgb(40, 120, 20);
--highlight-unearned: rgb(180, 20, 40);
}
:root.dark {
--bg-100:rgb(15, 15, 15);
--bg-200: rgb(20, 20, 20);
--text-100: rgb(210, 210, 210);
--text-200: rgb(100, 100, 100);
--ui-100: rgb(32, 32, 32);
--ui-200: rgb(96, 96, 96);
--highlight-accent: rgb(50, 120, 230);
--highlight-earned: rgb(75, 185, 70);
--highlight-unearned: rgb(225, 70, 70);
}
:root.summer {
--bg-100:rgb(241, 222, 188);
--bg-200: rgb(240, 225, 204);
--text-100: #FD673A;
--text-200: rgb(216, 143, 47);
--ui-100: rgb(255, 186, 68);
--ui-200: rgb(241, 112, 166);
--highlight-accent: rgb(13, 150, 186);
--highlight-earned: rgb(0, 158, 84);
--highlight-unearned: rgb(248, 84, 75);
}
:root.slate {
--bg-100:rgb(20, 26, 38);
--bg-200: rgb(25, 31, 44);
--text-100: rgb(240, 240, 240);
--text-200: rgb(115, 115, 133);
--ui-100: rgb(35, 48, 75);
--ui-200: rgb(23, 102, 138);
--highlight-accent: rgb(216, 183, 39);
--highlight-earned: rgb(6, 211, 143);
--highlight-unearned: rgb(243, 66, 53);
}
:root.tokyo {
--bg-100: #16161f;
--bg-200: #1a1b26;
--text-100: #c0caf5;
--text-200: #737da0;
--ui-100: #353d50;
--ui-200: #b98331;
--highlight-accent: #2ac3de;
--highlight-earned: #95cc5a;
--highlight-unearned: #f8627d;
}
:root.solarized {
--bg-100:rgb(0, 43, 54);
--bg-200: rgb(5, 48, 59);
--text-100: rgb(147, 161, 161);
--text-200: rgb(131, 148, 150);
--ui-100: rgb(20, 83, 99);
--ui-200: rgb(42, 161, 152);
--highlight-accent: rgb(38, 139, 210);
--highlight-earned: rgb(133, 153, 0);
--highlight-unearned: rgb(220, 50, 47);
}
:root.forest {
--bg-100:#081c15;
--bg-200: #0b241b;
--text-100: #cad2c5;
--text-200: #2c5e3b;
--ui-100: #113a29;
--ui-200: #4a7a65;
--highlight-accent: #e9d947;
--highlight-earned: #4daf15;
--highlight-unearned: rgb(207, 95, 20);
} }
body { body {
@ -32,75 +132,91 @@ body {
background-color: var(--bg-100); background-color: var(--bg-100);
font-family: var(--font-family); font-family: var(--font-family);
font-size: var(--font-scale); font-size: var(--font-scale);
font-weight: normal;
line-height: 1.5;
color: var(--text-100); color: var(--text-100);
} }
.blue { color: var(--blue-400); } /* -----------------------------------------------------------------------------
.cyan { color: var(--cyan-400); } -- // BASIC ELEMENTS
.green { color: var(--green-400); } ----------------------------------------------------------------------------- */
.orange { color: var(--orange-400); }
.purple { color: var(--purple-400); }
.red { color: var(--red-400); }
h1, h2, h3 { .normal { color: var(--text-100); }
margin: 0; .blue { color: var(--highlight-accent); }
padding: 0; .green { color: var(--highlight-earned); }
.red { color: var(--highlight-unearned); }
h1 {
font-size: 2em;
font-weight: bold;
line-height: 1;
} }
h2 { h2 {
margin: 1rem 0; margin-bottom: 1em;
font-size: 1.5em;
font-weight: bold;
line-height: 1;
} }
p {
margin-bottom: 1em;
text-align: left;
}
p:last-child { margin-bottom: 0; }
a, a,
a:visited { a:visited {
color: var(--text-100); color: var(--text-100);
text-decoration: underline; text-decoration: underline;
text-underline-offset: 3px; text-underline-offset: 2px;
text-decoration-thickness: 1px; text-decoration-thickness: 1px;
text-decoration-style: solid; text-decoration-style: solid;
text-decoration-color: var(--cyan-400); text-decoration-color: var(--highlight-accent);
} }
a:hover { a:hover {
color: var(--cyan-400); color: var(--highlight-accent);
text-decoration: underline; text-decoration: underline;
text-decoration-style: solid; text-decoration-style: solid;
text-decoration-color: var(--cyan-400); text-decoration-color: var(--highlight-accent);
} }
ul { ul {
margin: 0; margin-left: 1em;
padding: 0 0 0 1rem; padding-left: 1em;
} }
li { li {
list-style-type: square; list-style-type: square;
} }
form { blockquote {
margin: 0; margin: 1em 0;
padding: 0; padding: 12px 16px;
}
button {
margin-top: 2rem;
padding: 10px;
width: 100%;
border: 1px solid var(--ui-100); border: 1px solid var(--ui-100);
background-color: var(--bg-200); background-color: var(--bg-200);
color: var(--text-100); font-size: .875em;
} }
button:hover{
border: 1px solid var(--ui-300); /* -----------------------------------------------------------------------------
-- // FORM
----------------------------------------------------------------------------- */
input,
label {
cursor: pointer;
} }
input { input {
padding-left: 4px;
border: 1px solid var(--ui-100); border: 1px solid var(--ui-100);
background-color: var(--bg-200); background-color: var(--bg-200);
color: var(--text-100); color: var(--highlight-accent);
}
input:hover {
border-color: var(--ui-300);
} }
input:focus { input:focus {
outline: none; outline: none;
border-color: var(--cyan-400); border-color: var(--ui-200);
} }
/* Remove up and down arrows */
input::-webkit-outer-spin-button, input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { input::-webkit-inner-spin-button {
-webkit-appearance: none; -webkit-appearance: none;
@ -110,42 +226,60 @@ input[type="number"] {
-moz-appearance: textfield; -moz-appearance: textfield;
} }
blockquote { .calcMethod {
margin: 1rem 0; margin: 1em 0;
padding: 16px; }
border-top: 1px dotted var(--yellow-400); .calcMethod span {
border-right: 1px dotted var(--yellow-400); margin-right: 1em;
border-bottom: 1px dotted var(--yellow-400); }
border-left: 8px solid var(--yellow-400); input[type="radio"] {
background-color: var(--bg-200); height: 1em;
width: 1em;
margin: 0 4px 0 8px;
} }
table { button {
width: 100%; margin-top: 4rem;
border-collapse: collapse; padding: .75em 4em;
border: 1px solid var(--ui-100); border: 1px solid var(--ui-100);
background-color: var(--bg-200); background-color: var(--bg-200);
color: var(--text-100);
} }
tr { button:hover{
border: 1px solid var(--ui-100); border: 1px solid var(--ui-200);
cursor: pointer;
}
/* -----------------------------------------------------------------------------
-- // TABLE
----------------------------------------------------------------------------- */
table {
margin: 1em 0;
width: 100%;
border-collapse: collapse;
border: 0;
} }
th { th {
padding: 4px 16px; padding: 2px 0 2px 8px;
border-right: 1px solid var(--ui-100); font-weight: bold;
background-color: var(--ui-200); text-align: left;
vertical-align: middle;
} }
td { td {
padding: 4px 16px; padding: 2px 0 2px 8px;
border-right: 1px solid var(--ui-100); vertical-align: middle;
} }
tr td:nth-child(3) {
text-align: center; .with-border {
} padding: 2px 4px;
tr td:nth-child(4), border: 1px solid var(--ui-100);
tr td:nth-child(5) {
text-align: right;
} }
/* -----------------------------------------------------------------------------
-- // LAYOUT
----------------------------------------------------------------------------- */
header { header {
margin-top: 4rem; margin-top: 4rem;
} }
@ -159,7 +293,7 @@ main {
margin: 0; margin: 0;
padding: 0; padding: 0;
flex-direction: row; flex-direction: row;
gap: 2rem 1rem; gap: 4rem 2rem;
flex-wrap: wrap; flex-wrap: wrap;
align-items: flex-start; align-items: flex-start;
justify-content: center; justify-content: center;
@ -179,12 +313,36 @@ main {
.flex-4 { .flex-4 {
order: 4; order: 4;
flex-grow: 2; flex-grow: 2;
text-align: center;
} }
footer { footer {
margin-top: 4rem;
margin-bottom: 4rem; margin-bottom: 4rem;
padding-top: 2rem; padding-top: 2rem;
border-top: 1px dotted var(--ui-100); border-top: 1px solid var(--ui-100);
font-size: .875em; font-size: .75em;
color: var(--text-200); color: var(--text-200);
} }
select {
padding: 0 1em 0 0;
margin: 0;
border: none;
background-color: transparent;
font-family: inherit;
font-size: inherit;
line-height: inherit;
cursor: inherit;
}
#theme-select {
float: right;
margin-right: 1em;
padding: 4px 8px;
border: 1px solid var(--ui-200);
border-radius: .25em;
background-color: var(--bg-200);
color: var(--text-200);
cursor: pointer;
}

15
assets/theme.js Normal file
View File

@ -0,0 +1,15 @@
const setTheme = (theme) => {
document.documentElement.className = theme;
localStorage.setItem('theme', theme);
}
document.getElementById('theme-select').addEventListener('change', function() {
setTheme(this.value);
});
const getTheme = () => {
const theme = localStorage.getItem('theme');
theme && setTheme(theme);
}
getTheme();

View File

@ -6,7 +6,7 @@
<title>Premium Calculator</title> <title>Premium Calculator</title>
<meta name="description" content="Insurance premium calculator for pro-rata and short-rate calculations.?"> <meta name="description" content="Insurance premium calculator for pro-rata and short-rate calculations.">
<link rel="stylesheet" href="assets/style.css"> <link rel="stylesheet" href="assets/style.css">
<link rel="icon" type="image/x-icon" href="assets/favicon.ico"> <link rel="icon" type="image/x-icon" href="assets/favicon.ico">
@ -18,66 +18,85 @@
</header> </header>
<main> <main>
<form action="/action_page.php">
<div class="flex-container"> <div class="flex-container">
<div class="flex-1"> <div class="flex-1">
<h2>Policy Details</h2> <h2>Policy Details</h2>
<label for="effectiveDate">Effective date:</label> <table>
<input type="date" id="effectiveDate" name="effectiveDate" onblur="calculator()" min="0" oninput="validity.valid||(value='')"> <tr>
<br> <th><label for="effectiveDate">Effective date</label></th>
<label for="expiryDate">Expiry date:</label> <td><input type="date" id="effectiveDate" name="effectiveDate" onblur="calculator()" min="0" oninput="validity.valid||(value='')"></td>
<input type="date" id="expiryDate" name="expiryDate" onblur="calculator()" min="0" oninput="validity.valid||(value='')"> </tr>
<br> <tr>
Days in policy term: <span id="termDays">-</span> <th><label for="expiryDate">Expiry date:</label></th>
<br><br> <td><input type="date" id="expiryDate" name="expiryDate" onblur="calculator()" min="0" oninput="validity.valid||(value='')"></td>
<label for="cancelDate">Cancellation date:</label> </tr>
<input type="date" id="cancelDate" name="cancelDate" onblur="calculator()" min="0" oninput="validity.valid||(value='')"> <tr>
<br> <th><label for="cancelDate">Cancellation date:</label></th>
Days in force: <span id="forceDays">-</span> <td><input type="date" id="cancelDate" name="cancelDate" onblur="calculator()" min="0" oninput="validity.valid||(value='')"></td>
<br> </tr>
Days remaining: <span id="remainingDays">-</span> <tr>
<br><br> <th><label for="totalPremium">Total premium:</label></th>
<label for="totalPremium">Total premium:</label> <td><input type="number" id="totalPremium" name="totalPremium" onblur="calculator()" min="0" oninput="validity.valid||(value='')"></td>
<input type="number" id="totalPremium" name="totalPremium" onblur="calculator()" min="0" oninput="validity.valid||(value='')"> </tr>
<tr>
<th>Days in policy term:</th>
<td><span id="termDays">-</span></td>
</tr>
<tr>
<th>Days in force:</th>
<td><span id="forceDays">-</span></td>
</tr>
<tr>
<th>Days remaining:</th>
<td><span id="remainingDays">-</span></td>
</tr>
</table>
</div> </div>
<div class="flex-2"> <div class="flex-2">
<h2>Factor Method</h2> <h2>Factor Method</h2>
Factor method:
<input type="radio" name="calcMethod" id="calcProRata" value="Pro Rata" checked="checked" onclick="calculator();" /> Pro Rata <div class="calcMethod">
<input type="radio" name="calcMethod" id="calcShortRate" value="Short Rate" onclick="calculator();"/> Short Rate <label for="calcProRata">
<br><br> <input type="radio" name="calcMethod" id="calcProRata" value="Pro Rata" checked="checked" onclick="calculator();" >
<span>Pro Rata</span>
</label>
<label for="calcShortRate">
<input type="radio" name="calcMethod" id="calcShortRate" value="Short Rate" onclick="calculator();" >
<span>Short Rate</span>
</label>
</div>
<table> <table>
<tr> <tr>
<th></th> <td class="with-border"></td>
<th>Earned</th> <th class="with-border">Earned</th>
<th>Unearned</th> <th class="with-border">Unearned</th>
</tr> </tr>
<tr> <tr>
<td>Factor</td> <th class="with-border">Factor</th>
<td><span id="earnedFactor">-</span></td> <td class="with-border"><span id="earnedFactor">-</span></td>
<td><span id="unearnedFactor">-</span></td> <td class="with-border"><span id="unearnedFactor">-</span></td>
</tr> </tr>
<tr> <tr>
<td>Premium</td> <th class="with-border">Premium</th>
<td><span id="earnedPremium">-</span></td> <td class="with-border"><span id="earnedPremium">-</span></td>
<td><span id="unearnedPremium">-</span></td> <td class="with-border"><span id="unearnedPremium">-</span></td>
</tr> </tr>
</table> </table>
</div> </div>
<div class="flex-3"> <div class="flex-3">
<h2>Premium Breakdown</h2> <h2>Premium Breakdown (Optional)</h2>
<blockquote><span id="checkMatch">Total breakdown: N/A</span></blockquote> <blockquote><span id="checkMatch">Total breakdown: N/A</span></blockquote>
<table> <table>
<tr> <tr>
<th>Coverage</th> <th>Coverage</th>
<th>Premium</th> <th>Premium</th>
<th>% of Total</th> <th>Breakdown (%)</th>
<th>Earned Premium</th> <th>Earned Premium</th>
<th>Unearned Premium </th> <th>Unearned Premium</th>
</tr> </tr>
<tr> <tr>
<td><label for="breakDO">D&O</label></td> <td><label for="breakDO">D&O</label></td>
@ -86,6 +105,13 @@
<td><span id="earnedDO">-</span></td> <td><span id="earnedDO">-</span></td>
<td><span id="unearnedDO">-</span></td> <td><span id="unearnedDO">-</span></td>
</tr> </tr>
<tr>
<td><label for="breakEPL">EPL</label></td>
<td><input type="number" id="breakEPL" name="breakEPL" onblur="calculator()" min="0" oninput="validity.valid||(value='')"></td>
<td><span id="percentEPL">-</span></td>
<td><span id="earnedEPL">-</span></td>
<td><span id="unearnedEPL">-</span></td>
</tr>
<tr> <tr>
<td><label for="breakEO">E&O</label></td> <td><label for="breakEO">E&O</label></td>
<td><input type="number" id="breakEO" name="breakEO" onblur="calculator()" min="0" oninput="validity.valid||(value='')"></td> <td><input type="number" id="breakEO" name="breakEO" onblur="calculator()" min="0" oninput="validity.valid||(value='')"></td>
@ -129,22 +155,33 @@
<td><span id="unearnedEB">-</span></td> <td><span id="unearnedEB">-</span></td>
</tr> </tr>
</table> </table>
</form>
<div class="flex-4"> <div class="flex-4">
<button onclick="calculator()">Calculate</button> <button onClick="calculator()">Calculate</button>
</div> </div>
</div> </div>
</main> </main>
<footer> <footer>
<select name="theme-select" id="theme-select">
<option value="light">Light</option>
<option value="dark">Dark</option>
<option value="summer">Summer</option>
<option value="slate">Slate</option>
<option value="tokyo">Tokyo</option>
<option value="solarized">Solarized</option>
<option value="forest">Forest</option>
</select>
<ul> <ul>
<li>Created by <a href="https://haothitran.com">Hao Tran</a>.</li> <li>Made by <a href="https://haothitran.com">Hao Tran</a>. View the project repository on <a href="https://forge.haothitran.com/KlazHTT/premium-calculator">Gitea</a> or <a href="https://github.com/KlazHTT/premium-calculator">Github</a>.</li>
<li>Calculations are rounded to the nearest hundredth decimal. As such, there may sometimes be issues of rounding error.</li> <li>This calculator is intended for informational use only and does not constitute advice. </li>
<li>Although effort was made to insure the accuracy of this calculator, there is no guarantee on the accuracy of the calculations and results. This calculator is intended for personal and informational use only and does not constitute advice. </li> <li>Calculations are rounded to the nearest hundredth. As such, there may be rounding discrepancies.</li>
<li>Date format is determined by browser and/or operating system settings.</li>
</ul> </ul>
</footer> </footer>
<script src="assets/calculator.js"></script> <script src="assets/calculator.js"></script>
<script src="assets/theme.js"></script>
</body> </body>
</html> </html>