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

Edit colour themes

Browse Source
This commit is contained in:
Hao Tran 2025-03-21 01:05:21 -04:00
parent 38eba055ec
commit de3071891d
3 changed files with 102 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
assets/calculator.js
View File

@ -394,8 +394,8 @@ 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;
@ -481,27 +481,27 @@ function calculator() {
document.getElementById("earnedEB").className = 'green'; document.getElementById("earnedEB").className = 'green';
document.getElementById("unearnedEB").className = 'red'; 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 percentEO = '-'
var earnedEO = 'ERROR' var earnedEO = '-'
var unearnedEO = 'ERROR' var unearnedEO = '-'
var percentCyber = 'ERROR' var percentCyber = '-'
var earnedCyber = 'ERROR' var earnedCyber = '-'
var unearnedCyber = 'ERROR' var unearnedCyber = '-'
var percentLEI = 'ERROR' var percentLEI = '-'
var earnedLEI = 'ERROR' var earnedLEI = '-'
var unearnedLEI = 'ERROR' var unearnedLEI = '-'
var percentCGL = 'ERROR' var percentCGL = '-'
var earnedCGL = 'ERROR' var earnedCGL = '-'
var unearnedCGL = 'ERROR' var unearnedCGL = '-'
var percentProperty = 'ERROR' var percentProperty = '-'
var earnedProperty = 'ERROR' var earnedProperty = '-'
var unearnedProperty = 'ERROR' var unearnedProperty = '-'
var percentEB = 'ERROR' var percentEB = '-'
var earnedEB = 'ERROR' var earnedEB = '-'
var unearnedEB = 'ERROR' 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';

121
assets/style.css
View File

@ -42,63 +42,87 @@ form {
} }
:root.light { :root.light {
--bg-100:rgb(255, 252, 240); --bg-100:rgb(250, 250, 250);
--bg-200: rgb(242, 240, 229); --bg-200: rgb(220, 220, 220);
--text-100: rgb(16, 15, 15); --text-100: rgb(20, 20, 20);
--text-200: rgb(111, 110, 105); --text-200: rgb(100, 100, 100);
--ui-100: rgb(183, 181, 172); --ui-100: rgb(180, 180, 180);
--ui-200: rgb(111, 110, 105); --ui-200: rgb(80, 80, 80);
--highlight-accent: rgb(32, 94, 170); --highlight-accent: rgb(30, 80, 200);
--highlight-earned: rgb(41, 119, 11); --highlight-earned: rgb(40, 120, 20);
--highlight-unearned: rgb(200, 52, 41); --highlight-unearned: rgb(180, 20, 40);
} }
:root.dark { :root.dark {
--bg-100:rgb(16, 15, 15); --bg-100:rgb(15, 15, 15);
--bg-200: rgb(28, 27, 26); --bg-200: rgb(20, 20, 20);
--text-100: rgb(206, 205, 195); --text-100: rgb(210, 210, 210);
--text-200: rgb(135, 133, 128); --text-200: rgb(100, 100, 100);
--ui-100: rgb(40, 39, 38); --ui-100: rgb(32, 32, 32);
--ui-200: rgb(52, 51, 49); --ui-200: rgb(96, 96, 96);
--highlight-accent: rgb(63, 150, 231); --highlight-accent: rgb(50, 120, 230);
--highlight-earned: rgb(75, 182, 65); --highlight-earned: rgb(75, 185, 70);
--highlight-unearned: rgb(221, 82, 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 { :root.slate {
--bg-100:rgb(20, 26, 38); --bg-100:rgb(20, 26, 38);
--bg-200: rgb(25, 31, 44); --bg-200: rgb(25, 31, 44);
--text-100: rgb(242, 242, 242); --text-100: rgb(240, 240, 240);
--text-200: rgb(138, 138, 138); --text-200: rgb(115, 115, 133);
--ui-100: rgb(35, 48, 75); --ui-100: rgb(35, 48, 75);
--ui-200: rgb(26, 36, 58); --ui-200: rgb(23, 102, 138);
--highlight-accent: rgb(27, 183, 255); --highlight-accent: rgb(216, 183, 39);
--highlight-earned: rgb(0, 255, 170); --highlight-earned: rgb(6, 211, 143);
--highlight-unearned: rgb(243, 76, 64); --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 { :root.forest {
--bg-100:rgb(20, 26, 38); --bg-100:#081c15;
--bg-200: rgb(25, 31, 44); --bg-200: #0b241b;
--text-100: rgb(242, 242, 242); --text-100: #cad2c5;
--text-200: rgb(138, 138, 138); --text-200: #2c5e3b;
--ui-100: rgb(35, 48, 75); --ui-100: #113a29;
--ui-200: rgb(26, 36, 58); --ui-200: #4a7a65;
--highlight-accent: rgb(27, 183, 255); --highlight-accent: #e9d947;
--highlight-earned: rgb(54, 211, 35); --highlight-earned: #4daf15;
--highlight-unearned: rgb(217, 96, 26); --highlight-unearned: rgb(207, 95, 20);
}
: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 {
@ -293,10 +317,11 @@ main {
} }
footer { footer {
margin-top: 4rem;
margin-bottom: 4rem; margin-bottom: 4rem;
padding-top: 12px; padding-top: 2rem;
border-top: 1px solid var(--ui-100); border-top: 1px solid var(--ui-100);
font-size: .875em; font-size: .75em;
color: var(--text-200); color: var(--text-200);
} }
@ -315,7 +340,7 @@ select {
float: right; float: right;
margin-right: 1em; margin-right: 1em;
padding: 4px 8px; padding: 4px 8px;
border: 1px solid var(--ui-100); border: 1px solid var(--ui-200);
border-radius: .25em; border-radius: .25em;
background-color: var(--bg-200); background-color: var(--bg-200);
color: var(--text-200); color: var(--text-200);

9
index.html
View File

@ -159,15 +159,18 @@
<select name="theme-select" id="theme-select"> <select name="theme-select" id="theme-select">
<option value="light">Light</option> <option value="light">Light</option>
<option value="dark">Dark</option> <option value="dark">Dark</option>
<option value="slate">Slate</option>
<option value="forest">Forest</option>
<option value="summer">Summer</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> </select>
<ul> <ul>
<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>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. As such, there may be rounding discrepancies.</li>
<li>This calculator is intended for informational use only and does not constitute advice. </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> </ul>
</footer> </footer>