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

Update appearance

Browse Source
This commit is contained in:
Hao Tran
2025-03-20 07:19:41 -04:00
parent f41473c1ac
commit 38eba055ec
4 changed files with 194 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
assets/calculator.js
View File

@ -402,8 +402,6 @@ function calculator() {
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,7 +412,7 @@ 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;
@ -461,27 +459,27 @@ 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("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'

171
assets/style.css
View File

@ -37,27 +37,68 @@ form {
:root {
--width: 900px;
--font-family: Verdana, sans-serif;
--font-family: Verdana, Arial, sans-serif;
--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);
--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);
--ui-100: rgb(40, 39, 38);
--ui-200: rgb(52, 51, 49);
--highlight-accent: rgb(63, 150, 231);
--highlight-earned: rgb(75, 182, 65);
--highlight-unearned: rgb(221, 82, 70);
}
@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 {
@ -76,12 +117,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 +144,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 +167,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 +182,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 */
@ -179,27 +206,23 @@ input[type="number"] {
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;
}
@ -211,25 +234,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
----------------------------------------------------------------------------- */
@ -247,7 +269,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;
@ -267,12 +289,35 @@ main {
.flex-4 {
order: 4;
flex-grow: 2;
text-align: center;
}
footer {
margin-bottom: 4rem;
padding-top: 12px;
border-top: 1px dashed var(--ui-100);
border-top: 1px solid var(--ui-100);
font-size: .875em;
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();