KlazHTT/premium-calculator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: KlazHTT:58b4eab0be523983e7a4ba7b5118d0dd7ae2560d
Branches Tags
KlazHTT:main
...
compare: KlazHTT:38eba055ec95566b1cf01ad95a39cdd369f58e6c
Branches Tags
KlazHTT:main

2 Commits
58b4eab0be ... 38eba055ec

Author SHA1 Message Date
Hao Tran
38eba055ec Update appearance 2025-03-20 07:19:41 -04:00
Hao Tran
f41473c1ac Edit footer 2025-01-12 14:39:25 -05:00
4 changed files with 194 additions and 118 deletions
Show Stats Expand all files Collapse all files

32
assets/calculator.js
View File

@ -402,8 +402,6 @@ function calculator() {
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,7 +412,7 @@ 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 + +breakEO + +breakCyber + +breakLEI + +breakCGL + +breakProperty + +breakEB;
@ -461,27 +459,27 @@ 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("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 = 'ERROR'
var earnedDO = 'ERROR' var earnedDO = 'ERROR'

171
assets/style.css
View File

@ -37,27 +37,68 @@ form {
: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: rgb(16, 15, 15); }
:root.light {
--bg-100:rgb(255, 252, 240);
--bg-200: rgb(242, 240, 229);
--text-100: rgb(16, 15, 15);
--text-200: rgb(111, 110, 105);
--ui-100: rgb(183, 181, 172);
--ui-200: rgb(111, 110, 105);
--highlight-accent: rgb(32, 94, 170);
--highlight-earned: rgb(41, 119, 11);
--highlight-unearned: rgb(200, 52, 41);
}
:root.dark {
--bg-100:rgb(16, 15, 15);
--bg-200: rgb(28, 27, 26); --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-100: rgb(206, 205, 195);
--text-200: rgb(135, 133, 128); --text-200: rgb(135, 133, 128);
--text-300: rgb(87, 86, 83); --ui-100: rgb(40, 39, 38);
--blue-400: rgb(67, 133, 190); --ui-200: rgb(52, 51, 49);
--cyan-400: rgb(58, 169, 159); --highlight-accent: rgb(63, 150, 231);
--green-400: rgb(135, 154, 57); --highlight-earned: rgb(75, 182, 65);
--orange-400: rgb(218, 112, 44); --highlight-unearned: rgb(221, 82, 70);
--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.slate {
} --bg-100:rgb(20, 26, 38);
--bg-200: rgb(25, 31, 44);
--text-100: rgb(242, 242, 242);
--text-200: rgb(138, 138, 138);
--ui-100: rgb(35, 48, 75);
--ui-200: rgb(26, 36, 58);
--highlight-accent: rgb(27, 183, 255);
--highlight-earned: rgb(0, 255, 170);
--highlight-unearned: rgb(243, 76, 64);
}
:root.forest {
--bg-100:rgb(20, 26, 38);
--bg-200: rgb(25, 31, 44);
--text-100: rgb(242, 242, 242);
--text-200: rgb(138, 138, 138);
--ui-100: rgb(35, 48, 75);
--ui-200: rgb(26, 36, 58);
--highlight-accent: rgb(27, 183, 255);
--highlight-earned: rgb(54, 211, 35);
--highlight-unearned: rgb(217, 96, 26);
}
:root.summer {
--bg-100:rgb(255, 245, 228);
--bg-200: rgb(252, 235, 205);
--text-100: rgb(197, 111, 72);
--text-200: rgb(151, 114, 87);
--ui-100: rgb(255, 227, 225);
--ui-200: rgb(255, 209, 209);
--highlight-accent: rgb(27, 183, 255);
--highlight-earned: rgb(149, 225, 211);
--highlight-unearned: rgb(243, 129, 129);
} }
body { body {
@ -76,12 +117,10 @@ body {
-- // BASIC ELEMENTS -- // BASIC ELEMENTS
----------------------------------------------------------------------------- */ ----------------------------------------------------------------------------- */
.blue { color: var(--blue-400); } .normal { color: var(--text-100); }
.cyan { color: var(--cyan-400); } .blue { color: var(--highlight-accent); }
.green { color: var(--green-400); } .green { color: var(--highlight-earned); }
.orange { color: var(--orange-400); } .red { color: var(--highlight-unearned); }
.purple { color: var(--purple-400); }
.red { color: var(--red-400); }
h1 { h1 {
font-size: 2em; font-size: 2em;
@ -105,21 +144,16 @@ 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);
-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;
} }
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 {
@ -133,9 +167,9 @@ li {
blockquote { blockquote {
margin: 1em 0; margin: 1em 0;
padding: 12px 16px; padding: 12px 16px;
border: 1px dashed var(--yellow-400); border: 1px solid var(--ui-100);
background-color: var(--bg-200); background-color: var(--bg-200);
font-style: italic; font-size: .875em;
} }
/* ----------------------------------------------------------------------------- /* -----------------------------------------------------------------------------
@ -148,21 +182,14 @@ label {
} }
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(--purple-400); color: var(--highlight-accent);
-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);
} }
input:focus { input:focus {
outline: none; outline: none;
border-color: var(--cyan-400); border-color: var(--ui-200);
} }
/* Remove up and down arrows */ /* Remove up and down arrows */
@ -179,27 +206,23 @@ input[type="number"] {
margin: 1em 0; margin: 1em 0;
} }
.calcMethod span { .calcMethod span {
margin-right: 16px; margin-right: 1em;
} }
input[type="radio"] { input[type="radio"] {
height: 1em; height: 1em;
width: 1em; width: 1em;
margin: 0 4px 0 8px; margin: 0 4px 0 8px;
} }
#calcProRata,
#calcShortRate {
accent-color: var(--yellow-400);
}
button { button {
margin-top: 1em; margin-top: 4rem;
padding: 8px 16px; 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); color: var(--text-100);
} }
button:hover{ button:hover{
border: 1px solid var(--ui-300); border: 1px solid var(--ui-200);
cursor: pointer; cursor: pointer;
} }
@ -211,25 +234,24 @@ table {
margin: 1em 0; margin: 1em 0;
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
border: 1px solid var(--ui-100); border: 0;
background-color: var(--bg-200);
}
tr {
border: 1px solid var(--ui-100);
} }
th { th {
padding: 2px 16px; padding: 2px 0 2px 8px;
border-right: 1px solid var(--ui-100);
background-color: var(--ui-200);
font-weight: bold; font-weight: bold;
text-align: left;
vertical-align: middle; vertical-align: middle;
} }
td { td {
padding: 2px 16px; padding: 2px 0 2px 8px;
border-right: 1px solid var(--ui-100);
vertical-align: middle; vertical-align: middle;
} }
.with-border {
padding: 2px 4px;
border: 1px solid var(--ui-100);
}
/* ----------------------------------------------------------------------------- /* -----------------------------------------------------------------------------
-- // LAYOUT -- // LAYOUT
----------------------------------------------------------------------------- */ ----------------------------------------------------------------------------- */
@ -247,7 +269,7 @@ main {
margin: 0; margin: 0;
padding: 0; padding: 0;
flex-direction: row; flex-direction: row;
gap: 64px 32px; gap: 4rem 2rem;
flex-wrap: wrap; flex-wrap: wrap;
align-items: flex-start; align-items: flex-start;
justify-content: center; justify-content: center;
@ -267,12 +289,35 @@ main {
.flex-4 { .flex-4 {
order: 4; order: 4;
flex-grow: 2; flex-grow: 2;
text-align: center;
} }
footer { footer {
margin-bottom: 4rem; margin-bottom: 4rem;
padding-top: 12px; padding-top: 12px;
border-top: 1px dashed var(--ui-100); border-top: 1px solid var(--ui-100);
font-size: .875em; font-size: .875em;
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-100);
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();

94
index.html
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,28 +18,39 @@
</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">
@ -58,34 +69,34 @@
<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>
@ -137,23 +148,30 @@
<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="slate">Slate</option>
<option value="forest">Forest</option>
<option value="summer">Summer</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>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. As such, there may be rounding discrepancies.</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>
</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>