Add custom URL

CNAME

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

assets/calculator.js

@@ -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,8 +395,8 @@ 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("earnedFactor").className = 'normal';
-    document.getElementById("unearnedFactor").className = 'blue';
+    document.getElementById("unearnedFactor").className = 'normal';
   // calculate short rate
   }else if(document.getElementById('calcShortRate').checked) {
     const searchDate = forceDays;
@@ -415,7 +416,7 @@ function calculator() {
   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) {
@@ -441,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;
@@ -462,6 +466,9 @@ function calculator() {
     document.getElementById("percentDO").className = 'normal';
     document.getElementById("earnedDO").className = 'green';
     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 = 'red';
@@ -481,30 +488,36 @@ function calculator() {
     document.getElementById("earnedEB").className = 'green';
     document.getElementById("unearnedEB").className = 'red';
   }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("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';
@@ -538,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;

assets/style.css

@@ -42,63 +42,87 @@ form {
 }
 
 :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 {
-  --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 {
   --bg-100:rgb(20, 26, 38); 
   --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-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 {
-  --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 {
@@ -293,10 +317,11 @@ main {
 }
 
 footer {
+  margin-top: 4rem;
   margin-bottom: 4rem;
-  padding-top: 12px;
+  padding-top: 2rem;
   border-top: 1px solid var(--ui-100);
-  font-size: .875em;
+  font-size: .75em;
   color: var(--text-200);
 }
 
@@ -315,7 +340,7 @@ select {
   float: right;
   margin-right: 1em;
   padding: 4px 8px;
-  border: 1px solid var(--ui-100);
+  border: 1px solid var(--ui-200);
   border-radius: .25em;
   background-color: var(--bg-200);
   color: var(--text-200);

index.html

@@ -105,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>
@@ -159,15 +166,18 @@
     <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>
+      <option value="slate">Slate</option>
+      <option value="tokyo">Tokyo</option>
+      <option value="solarized">Solarized</option>
+      <option value="forest">Forest</option>
     </select>
 
     <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>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>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>