Compare commits
6 Commits
5f6e99185c
...
main
Author | SHA1 | Date | |
---|---|---|---|
8ed204eace | |||
85669bb430 | |||
de3071891d | |||
38eba055ec | |||
f41473c1ac | |||
58b4eab0be |
@ -374,6 +374,7 @@ function calculator() {
|
||||
var cancelDate = document.getElementById("cancelDate").value;
|
||||
var totalPremium = document.getElementById("totalPremium").value;
|
||||
var breakDO = document.getElementById("breakDO").value || 0;
|
||||
var breakEPL = document.getElementById("breakEPL").value || 0;
|
||||
var breakEO = document.getElementById("breakEO").value || 0;
|
||||
var breakCyber = document.getElementById("breakCyber").value || 0;
|
||||
var breakLEI = document.getElementById("breakLEI").value || 0;
|
||||
@ -394,16 +395,14 @@ function calculator() {
|
||||
if(document.getElementById('calcProRata').checked) {
|
||||
var earnedFactor = Math.round(((forceDays / termDays) + Number.EPSILON)*1000)/1000;
|
||||
var unearnedFactor = Math.round(((remainingDays / termDays) + Number.EPSILON)*1000)/1000;
|
||||
document.getElementById("earnedFactor").className = 'blue';
|
||||
document.getElementById("unearnedFactor").className = 'blue';
|
||||
document.getElementById("earnedFactor").className = 'normal';
|
||||
document.getElementById("unearnedFactor").className = 'normal';
|
||||
// calculate short rate
|
||||
}else if(document.getElementById('calcShortRate').checked) {
|
||||
const searchDate = forceDays;
|
||||
const shortRateFactor = shortRate[searchDate];
|
||||
var earnedFactor = shortRateFactor;
|
||||
var unearnedFactor = Math.round(((1 - shortRateFactor) + Number.EPSILON)*1000)/1000;
|
||||
document.getElementById("earnedFactor").className = 'blue';
|
||||
document.getElementById("unearnedFactor").className = 'blue';
|
||||
}else {
|
||||
var earnedFactor = 'ERROR'
|
||||
var unearnedFactor = 'ERROR'
|
||||
@ -414,10 +413,10 @@ function calculator() {
|
||||
var earnedPremium = Math.round(((totalPremium * earnedFactor) + Number.EPSILON)*100)/100;
|
||||
var unearnedPremium = Math.round(((totalPremium * unearnedFactor) + Number.EPSILON)*100)/100;
|
||||
document.getElementById("earnedPremium").className = 'green';
|
||||
document.getElementById("unearnedPremium").className = 'orange';
|
||||
document.getElementById("unearnedPremium").className = 'red';
|
||||
|
||||
// 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
|
||||
var calcMatch = calcBreak-totalPremium;
|
||||
if(totalPremium<calcBreak && totalPremium > 1) {
|
||||
@ -443,6 +442,9 @@ function calculator() {
|
||||
var percentDO = Math.round((((breakDO / totalPremium) * 100) + 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 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 earnedEO = Math.round(((breakEO * earnedFactor) + 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 earnedEB = Math.round(((breakEB * earnedFactor) + 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("unearnedDO").className = 'orange';
|
||||
document.getElementById("percentEO").className = 'blue';
|
||||
document.getElementById("unearnedDO").className = 'red';
|
||||
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("unearnedEO").className = 'orange';
|
||||
document.getElementById("percentCyber").className = 'blue';
|
||||
document.getElementById("unearnedEO").className = 'red';
|
||||
document.getElementById("percentCyber").className = 'normal';
|
||||
document.getElementById("earnedCyber").className = 'green';
|
||||
document.getElementById("unearnedCyber").className = 'orange';
|
||||
document.getElementById("percentLEI").className = 'blue';
|
||||
document.getElementById("unearnedCyber").className = 'red';
|
||||
document.getElementById("percentLEI").className = 'normal';
|
||||
document.getElementById("earnedLEI").className = 'green';
|
||||
document.getElementById("unearnedLEI").className = 'orange';
|
||||
document.getElementById("percentCGL").className = 'blue';
|
||||
document.getElementById("unearnedLEI").className = 'red';
|
||||
document.getElementById("percentCGL").className = 'normal';
|
||||
document.getElementById("earnedCGL").className = 'green';
|
||||
document.getElementById("unearnedCGL").className = 'orange';
|
||||
document.getElementById("percentProperty").className = 'blue';
|
||||
document.getElementById("unearnedCGL").className = 'red';
|
||||
document.getElementById("percentProperty").className = 'normal';
|
||||
document.getElementById("earnedProperty").className = 'green';
|
||||
document.getElementById("unearnedProperty").className = 'orange';
|
||||
document.getElementById("percentEB").className = 'blue';
|
||||
document.getElementById("unearnedProperty").className = 'red';
|
||||
document.getElementById("percentEB").className = 'normal';
|
||||
document.getElementById("earnedEB").className = 'green';
|
||||
document.getElementById("unearnedEB").className = 'orange';
|
||||
document.getElementById("unearnedEB").className = 'red';
|
||||
}else {
|
||||
var percentDO = 'ERROR'
|
||||
var earnedDO = 'ERROR'
|
||||
var unearnedDO = 'ERROR'
|
||||
var percentEO = 'ERROR'
|
||||
var earnedEO = 'ERROR'
|
||||
var unearnedEO = 'ERROR'
|
||||
var percentCyber = 'ERROR'
|
||||
var earnedCyber = 'ERROR'
|
||||
var unearnedCyber = 'ERROR'
|
||||
var percentLEI = 'ERROR'
|
||||
var earnedLEI = 'ERROR'
|
||||
var unearnedLEI = 'ERROR'
|
||||
var percentCGL = 'ERROR'
|
||||
var earnedCGL = 'ERROR'
|
||||
var unearnedCGL = 'ERROR'
|
||||
var percentProperty = 'ERROR'
|
||||
var earnedProperty = 'ERROR'
|
||||
var unearnedProperty = 'ERROR'
|
||||
var percentEB = 'ERROR'
|
||||
var earnedEB = 'ERROR'
|
||||
var unearnedEB = 'ERROR'
|
||||
var percentDO = '-'
|
||||
var earnedDO = '-'
|
||||
var unearnedDO = '-'
|
||||
var percentEPL = '-'
|
||||
var earnedEPL = '-'
|
||||
var unearnedEPL = '-'
|
||||
var percentEO = '-'
|
||||
var earnedEO = '-'
|
||||
var unearnedEO = '-'
|
||||
var percentCyber = '-'
|
||||
var earnedCyber = '-'
|
||||
var unearnedCyber = '-'
|
||||
var percentLEI = '-'
|
||||
var earnedLEI = '-'
|
||||
var unearnedLEI = '-'
|
||||
var percentCGL = '-'
|
||||
var earnedCGL = '-'
|
||||
var unearnedCGL = '-'
|
||||
var percentProperty = '-'
|
||||
var earnedProperty = '-'
|
||||
var unearnedProperty = '-'
|
||||
var percentEB = '-'
|
||||
var earnedEB = '-'
|
||||
var unearnedEB = '-'
|
||||
document.getElementById("percentDO").className = 'red';
|
||||
document.getElementById("earnedDO").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("earnedEO").className = 'red';
|
||||
document.getElementById("unearnedEO").className = 'red';
|
||||
@ -540,6 +551,9 @@ function calculator() {
|
||||
document.getElementById("percentDO").innerHTML = percentDO;
|
||||
document.getElementById("earnedDO").innerHTML = earnedDO;
|
||||
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("earnedEO").innerHTML = earnedEO;
|
||||
document.getElementById("unearnedEO").innerHTML = unearnedEO;
|
||||
|
211
assets/style.css
211
assets/style.css
@ -27,7 +27,7 @@ form, input {
|
||||
|
||||
header, nav, main, article, section, aside, footer,
|
||||
blockquote, pre, img, audio, video,
|
||||
table, form {
|
||||
form {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@ -37,27 +37,92 @@ table, form {
|
||||
|
||||
:root {
|
||||
--width: 900px;
|
||||
--font-family: Verdana, sans-serif;
|
||||
--font-family: Verdana, Arial, sans-serif;
|
||||
--font-scale: 1em;
|
||||
--bg-100: rgb(16, 15, 15);
|
||||
--bg-200: rgb(28, 27, 26);
|
||||
--ui-100: rgb(40, 39, 38);
|
||||
--ui-200: rgb(52, 51, 49);
|
||||
--ui-300: rgb(64, 62, 60);
|
||||
--text-100: rgb(206, 205, 195);
|
||||
--text-200: rgb(135, 133, 128);
|
||||
--text-300: rgb(87, 86, 83);
|
||||
--blue-400: rgb(67, 133, 190);
|
||||
--cyan-400: rgb(58, 169, 159);
|
||||
--green-400: rgb(135, 154, 57);
|
||||
--orange-400: rgb(218, 112, 44);
|
||||
--purple-400: rgb(139, 126, 200);
|
||||
--red-400: rgb(209, 77, 65);
|
||||
--yellow-400: rgb(208, 162, 21);
|
||||
}
|
||||
@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 {
|
||||
@ -76,12 +141,10 @@ body {
|
||||
-- // BASIC ELEMENTS
|
||||
----------------------------------------------------------------------------- */
|
||||
|
||||
.blue { color: var(--blue-400); }
|
||||
.cyan { color: var(--cyan-400); }
|
||||
.green { color: var(--green-400); }
|
||||
.orange { color: var(--orange-400); }
|
||||
.purple { color: var(--purple-400); }
|
||||
.red { color: var(--red-400); }
|
||||
.normal { color: var(--text-100); }
|
||||
.blue { color: var(--highlight-accent); }
|
||||
.green { color: var(--highlight-earned); }
|
||||
.red { color: var(--highlight-unearned); }
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
@ -105,21 +168,16 @@ a,
|
||||
a:visited {
|
||||
color: var(--text-100);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
text-underline-offset: 2px;
|
||||
text-decoration-thickness: 1px;
|
||||
text-decoration-style: solid;
|
||||
text-decoration-color: var(--cyan-400);
|
||||
-webkit-transition: all .25s ease-in-out;
|
||||
-moz-transition: all .25s ease-in-out;
|
||||
-ms-transition: all .25s ease-in-out;
|
||||
-o-transition: all .25s ease-in-out;
|
||||
transition: all .25s ease-in-out;
|
||||
text-decoration-color: var(--highlight-accent);
|
||||
}
|
||||
a:hover {
|
||||
color: var(--cyan-400);
|
||||
color: var(--highlight-accent);
|
||||
text-decoration: underline;
|
||||
text-decoration-style: solid;
|
||||
text-decoration-color: var(--cyan-400);
|
||||
text-decoration-color: var(--highlight-accent);
|
||||
}
|
||||
|
||||
ul {
|
||||
@ -133,9 +191,9 @@ li {
|
||||
blockquote {
|
||||
margin: 1em 0;
|
||||
padding: 12px 16px;
|
||||
border: 1px dashed var(--yellow-400);
|
||||
border: 1px solid var(--ui-100);
|
||||
background-color: var(--bg-200);
|
||||
font-style: italic;
|
||||
font-size: .875em;
|
||||
}
|
||||
|
||||
/* -----------------------------------------------------------------------------
|
||||
@ -148,21 +206,14 @@ label {
|
||||
}
|
||||
|
||||
input {
|
||||
padding-left: 4px;
|
||||
border: 1px solid var(--ui-100);
|
||||
background-color: var(--bg-200);
|
||||
color: var(--purple-400);
|
||||
-webkit-transition: all .25s ease-in-out;
|
||||
-moz-transition: all .25s ease-in-out;
|
||||
-ms-transition: all .25s ease-in-out;
|
||||
-o-transition: all .25s ease-in-out;
|
||||
transition: all .25s ease-in-out;
|
||||
}
|
||||
input:hover {
|
||||
border-color: var(--ui-300);
|
||||
color: var(--highlight-accent);
|
||||
}
|
||||
input:focus {
|
||||
outline: none;
|
||||
border-color: var(--cyan-400);
|
||||
border-color: var(--ui-200);
|
||||
}
|
||||
|
||||
/* Remove up and down arrows */
|
||||
@ -175,28 +226,27 @@ input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
.calcMethod {
|
||||
margin: 1em 0;
|
||||
}
|
||||
.calcMethod span {
|
||||
margin-right: 16px;
|
||||
margin-right: 1em;
|
||||
}
|
||||
input[type="radio"] {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
margin: 0 4px 0 8px;
|
||||
}
|
||||
#calcProRata,
|
||||
#calcShortRate {
|
||||
accent-color: var(--yellow-400);
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 1em;
|
||||
padding: 8px 16px;
|
||||
margin-top: 4rem;
|
||||
padding: .75em 4em;
|
||||
border: 1px solid var(--ui-100);
|
||||
background-color: var(--bg-200);
|
||||
color: var(--text-100);
|
||||
}
|
||||
button:hover{
|
||||
border: 1px solid var(--ui-300);
|
||||
border: 1px solid var(--ui-200);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -208,25 +258,24 @@ table {
|
||||
margin: 1em 0;
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
border: 1px solid var(--ui-100);
|
||||
background-color: var(--bg-200);
|
||||
}
|
||||
tr {
|
||||
border: 1px solid var(--ui-100);
|
||||
border: 0;
|
||||
}
|
||||
th {
|
||||
padding: 2px 16px;
|
||||
border-right: 1px solid var(--ui-100);
|
||||
background-color: var(--ui-200);
|
||||
padding: 2px 0 2px 8px;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
}
|
||||
td {
|
||||
padding: 2px 16px;
|
||||
border-right: 1px solid var(--ui-100);
|
||||
padding: 2px 0 2px 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.with-border {
|
||||
padding: 2px 4px;
|
||||
border: 1px solid var(--ui-100);
|
||||
}
|
||||
|
||||
/* -----------------------------------------------------------------------------
|
||||
-- // LAYOUT
|
||||
----------------------------------------------------------------------------- */
|
||||
@ -244,7 +293,7 @@ main {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
flex-direction: row;
|
||||
gap: 64px 32px;
|
||||
gap: 4rem 2rem;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
@ -264,12 +313,36 @@ main {
|
||||
.flex-4 {
|
||||
order: 4;
|
||||
flex-grow: 2;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 4rem;
|
||||
margin-bottom: 4rem;
|
||||
padding-top: 12px;
|
||||
border-top: 1px dashed var(--ui-100);
|
||||
font-size: .875em;
|
||||
padding-top: 2rem;
|
||||
border-top: 1px solid var(--ui-100);
|
||||
font-size: .75em;
|
||||
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
15
assets/theme.js
Normal 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();
|
104
index.html
104
index.html
@ -6,7 +6,7 @@
|
||||
|
||||
<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="icon" type="image/x-icon" href="assets/favicon.ico">
|
||||
@ -18,28 +18,39 @@
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<form action="/action_page.php">
|
||||
<div class="flex-container">
|
||||
<div class="flex-1">
|
||||
<h2>Policy Details</h2>
|
||||
<label for="effectiveDate">Effective date:</label>
|
||||
<input type="date" id="effectiveDate" name="effectiveDate" onblur="calculator()" min="0" oninput="validity.valid||(value='')">
|
||||
<br>
|
||||
<label for="expiryDate">Expiry date:</label>
|
||||
<input type="date" id="expiryDate" name="expiryDate" onblur="calculator()" min="0" oninput="validity.valid||(value='')">
|
||||
<br>
|
||||
Days in policy term: <span id="termDays">-</span>
|
||||
<br><br>
|
||||
<label for="cancelDate">Cancellation date:</label>
|
||||
<input type="date" id="cancelDate" name="cancelDate" onblur="calculator()" min="0" oninput="validity.valid||(value='')">
|
||||
<br>
|
||||
Days in force: <span id="forceDays">-</span>
|
||||
<br>
|
||||
Days remaining: <span id="remainingDays">-</span>
|
||||
<br><br>
|
||||
<label for="totalPremium">Total premium:</label>
|
||||
<input type="number" id="totalPremium" name="totalPremium" onblur="calculator()" min="0" oninput="validity.valid||(value='')">
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<th><label for="effectiveDate">Effective date</label></th>
|
||||
<td><input type="date" id="effectiveDate" name="effectiveDate" onblur="calculator()" min="0" oninput="validity.valid||(value='')"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><label for="expiryDate">Expiry date:</label></th>
|
||||
<td><input type="date" id="expiryDate" name="expiryDate" onblur="calculator()" min="0" oninput="validity.valid||(value='')"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><label for="cancelDate">Cancellation date:</label></th>
|
||||
<td><input type="date" id="cancelDate" name="cancelDate" onblur="calculator()" min="0" oninput="validity.valid||(value='')"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><label for="totalPremium">Total premium:</label></th>
|
||||
<td><input type="number" id="totalPremium" name="totalPremium" onblur="calculator()" min="0" oninput="validity.valid||(value='')"></td>
|
||||
</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 class="flex-2">
|
||||
@ -58,34 +69,34 @@
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Earned</th>
|
||||
<th>Unearned</th>
|
||||
<td class="with-border"></td>
|
||||
<th class="with-border">Earned</th>
|
||||
<th class="with-border">Unearned</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Factor</td>
|
||||
<td><span id="earnedFactor">-</span></td>
|
||||
<td><span id="unearnedFactor">-</span></td>
|
||||
<th class="with-border">Factor</th>
|
||||
<td class="with-border"><span id="earnedFactor">-</span></td>
|
||||
<td class="with-border"><span id="unearnedFactor">-</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Premium</td>
|
||||
<td><span id="earnedPremium">-</span></td>
|
||||
<td><span id="unearnedPremium">-</span></td>
|
||||
<th class="with-border">Premium</th>
|
||||
<td class="with-border"><span id="earnedPremium">-</span></td>
|
||||
<td class="with-border"><span id="unearnedPremium">-</span></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="flex-3">
|
||||
<h2>Premium Breakdown</h2>
|
||||
<h2>Premium Breakdown (Optional)</h2>
|
||||
<blockquote><span id="checkMatch">Total breakdown: N/A</span></blockquote>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<th>Coverage</th>
|
||||
<th>Premium</th>
|
||||
<th>% of Total</th>
|
||||
<th>Breakdown (%)</th>
|
||||
<th>Earned Premium</th>
|
||||
<th>Unearned Premium </th>
|
||||
<th>Unearned Premium</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="breakDO">D&O</label></td>
|
||||
@ -94,6 +105,13 @@
|
||||
<td><span id="earnedDO">-</span></td>
|
||||
<td><span id="unearnedDO">-</span></td>
|
||||
</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>
|
||||
<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>
|
||||
@ -137,23 +155,33 @@
|
||||
<td><span id="unearnedEB">-</span></td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
|
||||
<div class="flex-4">
|
||||
<button onclick="calculator()">Calculate</button>
|
||||
<button onClick="calculator()">Calculate</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<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>
|
||||
<li>Created by <a href="https://haothitran.com">Hao Tran</a>.</li>
|
||||
<li>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>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>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>This calculator is intended for 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>
|
||||
</footer>
|
||||
|
||||
<script src="assets/calculator.js"></script>
|
||||
<script src="assets/theme.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
Reference in New Issue
Block a user