Compare commits
11 Commits
8b72c9df74
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 8ed204eace | |||
| 85669bb430 | |||
| de3071891d | |||
| 38eba055ec | |||
| f41473c1ac | |||
| 58b4eab0be | |||
| 5f6e99185c | |||
| d75b655bbb | |||
| 0a2b153e5a | |||
| 26ce9b5c8a | |||
| 3dadf20dbf |
9
LICENSE
Normal file
9
LICENSE
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2025 Hao Tran
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||||
575
assets/calculator.js
Normal file
575
assets/calculator.js
Normal file
@ -0,0 +1,575 @@
|
|||||||
|
const shortRate = {
|
||||||
|
1: 0.05,
|
||||||
|
2: 0.06,
|
||||||
|
3: 0.07,
|
||||||
|
4: 0.07,
|
||||||
|
5: 0.08,
|
||||||
|
6: 0.08,
|
||||||
|
7: 0.09,
|
||||||
|
8: 0.09,
|
||||||
|
9: 0.10,
|
||||||
|
10: 0.10,
|
||||||
|
11: 0.11,
|
||||||
|
12: 0.11,
|
||||||
|
13: 0.12,
|
||||||
|
14: 0.12,
|
||||||
|
15: 0.13,
|
||||||
|
16: 0.13,
|
||||||
|
17: 0.14,
|
||||||
|
18: 0.14,
|
||||||
|
19: 0.15,
|
||||||
|
20: 0.15,
|
||||||
|
21: 0.16,
|
||||||
|
22: 0.16,
|
||||||
|
23: 0.17,
|
||||||
|
24: 0.17,
|
||||||
|
25: 0.17,
|
||||||
|
26: 0.18,
|
||||||
|
27: 0.18,
|
||||||
|
28: 0.18,
|
||||||
|
29: 0.18,
|
||||||
|
30: 0.19,
|
||||||
|
31: 0.19,
|
||||||
|
32: 0.19,
|
||||||
|
33: 0.20,
|
||||||
|
34: 0.20,
|
||||||
|
35: 0.20,
|
||||||
|
36: 0.20,
|
||||||
|
37: 0.21,
|
||||||
|
38: 0.21,
|
||||||
|
39: 0.21,
|
||||||
|
40: 0.21,
|
||||||
|
41: 0.22,
|
||||||
|
42: 0.22,
|
||||||
|
43: 0.22,
|
||||||
|
44: 0.77,
|
||||||
|
45: 0.77,
|
||||||
|
46: 0.77,
|
||||||
|
47: 0.77,
|
||||||
|
48: 0.24,
|
||||||
|
49: 0.24,
|
||||||
|
50: 0.24,
|
||||||
|
51: 0.24,
|
||||||
|
52: 0.25,
|
||||||
|
53: 0.25,
|
||||||
|
54: 0.25,
|
||||||
|
55: 0.26,
|
||||||
|
56: 0.26,
|
||||||
|
57: 0.26,
|
||||||
|
58: 0.26,
|
||||||
|
59: 0.27,
|
||||||
|
60: 0.27,
|
||||||
|
61: 0.27,
|
||||||
|
62: 0.27,
|
||||||
|
63: 0.28,
|
||||||
|
64: 0.28,
|
||||||
|
65: 0.28,
|
||||||
|
66: 0.29,
|
||||||
|
67: 0.29,
|
||||||
|
68: 0.29,
|
||||||
|
69: 0.29,
|
||||||
|
70: 0.30,
|
||||||
|
71: 0.30,
|
||||||
|
72: 0.30,
|
||||||
|
73: 0.30,
|
||||||
|
74: 0.31,
|
||||||
|
75: 0.31,
|
||||||
|
76: 0.31,
|
||||||
|
77: 0.32,
|
||||||
|
78: 0.32,
|
||||||
|
79: 0.32,
|
||||||
|
80: 0.32,
|
||||||
|
81: 0.33,
|
||||||
|
82: 0.33,
|
||||||
|
83: 0.33,
|
||||||
|
84: 0.34,
|
||||||
|
85: 0.34,
|
||||||
|
86: 0.34,
|
||||||
|
87: 0.34,
|
||||||
|
88: 0.35,
|
||||||
|
89: 0.35,
|
||||||
|
90: 0.35,
|
||||||
|
91: 0.35,
|
||||||
|
92: 0.36,
|
||||||
|
93: 0.36,
|
||||||
|
94: 0.36,
|
||||||
|
95: 0.37,
|
||||||
|
96: 0.37,
|
||||||
|
97: 0.37,
|
||||||
|
98: 0.37,
|
||||||
|
99: 0.38,
|
||||||
|
100: 0.38,
|
||||||
|
101: 0.38,
|
||||||
|
102: 0.38,
|
||||||
|
103: 0.39,
|
||||||
|
104: 0.39,
|
||||||
|
105: 0.39,
|
||||||
|
106: 0.40,
|
||||||
|
107: 0.40,
|
||||||
|
108: 0.40,
|
||||||
|
109: 0.40,
|
||||||
|
110: 0.41,
|
||||||
|
111: 0.41,
|
||||||
|
112: 0.41,
|
||||||
|
113: 0.41,
|
||||||
|
114: 0.42,
|
||||||
|
115: 0.42,
|
||||||
|
116: 0.42,
|
||||||
|
117: 0.43,
|
||||||
|
118: 0.43,
|
||||||
|
119: 0.43,
|
||||||
|
120: 0.43,
|
||||||
|
121: 0.44,
|
||||||
|
122: 0.44,
|
||||||
|
123: 0.44,
|
||||||
|
124: 0.44,
|
||||||
|
125: 0.45,
|
||||||
|
126: 0.45,
|
||||||
|
127: 0.45,
|
||||||
|
128: 0.46,
|
||||||
|
129: 0.46,
|
||||||
|
130: 0.46,
|
||||||
|
131: 0.46,
|
||||||
|
132: 0.47,
|
||||||
|
133: 0.47,
|
||||||
|
134: 0.47,
|
||||||
|
135: 0.47,
|
||||||
|
136: 0.48,
|
||||||
|
137: 0.48,
|
||||||
|
138: 0.48,
|
||||||
|
139: 0.49,
|
||||||
|
140: 0.49,
|
||||||
|
141: 0.49,
|
||||||
|
142: 0.49,
|
||||||
|
143: 0.50,
|
||||||
|
144: 0.50,
|
||||||
|
145: 0.50,
|
||||||
|
146: 0.50,
|
||||||
|
147: 0.51,
|
||||||
|
148: 0.51,
|
||||||
|
149: 0.51,
|
||||||
|
150: 0.52,
|
||||||
|
151: 0.52,
|
||||||
|
152: 0.52,
|
||||||
|
153: 0.52,
|
||||||
|
154: 0.53,
|
||||||
|
155: 0.53,
|
||||||
|
156: 0.53,
|
||||||
|
157: 0.53,
|
||||||
|
158: 0.54,
|
||||||
|
159: 0.54,
|
||||||
|
160: 0.54,
|
||||||
|
161: 0.55,
|
||||||
|
162: 0.55,
|
||||||
|
163: 0.55,
|
||||||
|
164: 0.55,
|
||||||
|
165: 0.56,
|
||||||
|
166: 0.56,
|
||||||
|
167: 0.56,
|
||||||
|
168: 0.57,
|
||||||
|
169: 0.57,
|
||||||
|
170: 0.57,
|
||||||
|
171: 0.57,
|
||||||
|
172: 0.58,
|
||||||
|
173: 0.58,
|
||||||
|
174: 0.58,
|
||||||
|
175: 0.58,
|
||||||
|
176: 0.59,
|
||||||
|
177: 0.59,
|
||||||
|
178: 0.59,
|
||||||
|
179: 0.60,
|
||||||
|
180: 0.60,
|
||||||
|
181: 0.60,
|
||||||
|
182: 0.60,
|
||||||
|
183: 0.61,
|
||||||
|
184: 0.61,
|
||||||
|
185: 0.61,
|
||||||
|
186: 0.61,
|
||||||
|
187: 0.61,
|
||||||
|
188: 0.62,
|
||||||
|
189: 0.62,
|
||||||
|
190: 0.62,
|
||||||
|
191: 0.62,
|
||||||
|
192: 0.63,
|
||||||
|
193: 0.63,
|
||||||
|
194: 0.63,
|
||||||
|
195: 0.63,
|
||||||
|
196: 0.63,
|
||||||
|
197: 0.64,
|
||||||
|
198: 0.64,
|
||||||
|
199: 0.64,
|
||||||
|
200: 0.64,
|
||||||
|
201: 0.65,
|
||||||
|
202: 0.65,
|
||||||
|
203: 0.65,
|
||||||
|
204: 0.65,
|
||||||
|
205: 0.65,
|
||||||
|
206: 0.66,
|
||||||
|
207: 0.66,
|
||||||
|
208: 0.66,
|
||||||
|
209: 0.66,
|
||||||
|
210: 0.67,
|
||||||
|
211: 0.67,
|
||||||
|
212: 0.67,
|
||||||
|
213: 0.67,
|
||||||
|
214: 0.67,
|
||||||
|
215: 0.68,
|
||||||
|
216: 0.68,
|
||||||
|
217: 0.68,
|
||||||
|
218: 0.68,
|
||||||
|
219: 0.69,
|
||||||
|
220: 0.69,
|
||||||
|
221: 0.69,
|
||||||
|
222: 0.69,
|
||||||
|
223: 0.69,
|
||||||
|
224: 0.70,
|
||||||
|
225: 0.70,
|
||||||
|
226: 0.70,
|
||||||
|
227: 0.70,
|
||||||
|
228: 0.70,
|
||||||
|
229: 0.71,
|
||||||
|
230: 0.71,
|
||||||
|
231: 0.71,
|
||||||
|
232: 0.71,
|
||||||
|
233: 0.72,
|
||||||
|
234: 0.72,
|
||||||
|
235: 0.72,
|
||||||
|
236: 0.72,
|
||||||
|
237: 0.72,
|
||||||
|
238: 0.73,
|
||||||
|
239: 0.73,
|
||||||
|
240: 0.73,
|
||||||
|
241: 0.73,
|
||||||
|
242: 0.74,
|
||||||
|
243: 0.74,
|
||||||
|
244: 0.74,
|
||||||
|
245: 0.74,
|
||||||
|
246: 0.74,
|
||||||
|
247: 0.75,
|
||||||
|
248: 0.75,
|
||||||
|
249: 0.75,
|
||||||
|
250: 0.75,
|
||||||
|
251: 0.76,
|
||||||
|
252: 0.76,
|
||||||
|
253: 0.76,
|
||||||
|
254: 0.76,
|
||||||
|
255: 0.76,
|
||||||
|
256: 0.77,
|
||||||
|
257: 0.77,
|
||||||
|
258: 0.77,
|
||||||
|
259: 0.77,
|
||||||
|
260: 0.77,
|
||||||
|
261: 0.78,
|
||||||
|
262: 0.78,
|
||||||
|
263: 0.78,
|
||||||
|
264: 0.78,
|
||||||
|
265: 0.79,
|
||||||
|
266: 0.79,
|
||||||
|
267: 0.79,
|
||||||
|
268: 0.79,
|
||||||
|
269: 0.79,
|
||||||
|
270: 0.80,
|
||||||
|
271: 0.80,
|
||||||
|
272: 0.80,
|
||||||
|
273: 0.80,
|
||||||
|
274: 0.81,
|
||||||
|
275: 0.81,
|
||||||
|
276: 0.81,
|
||||||
|
277: 0.81,
|
||||||
|
278: 0.81,
|
||||||
|
279: 0.82,
|
||||||
|
280: 0.82,
|
||||||
|
281: 0.82,
|
||||||
|
282: 0.82,
|
||||||
|
283: 0.83,
|
||||||
|
284: 0.83,
|
||||||
|
285: 0.83,
|
||||||
|
286: 0.83,
|
||||||
|
287: 0.83,
|
||||||
|
288: 0.84,
|
||||||
|
289: 0.84,
|
||||||
|
290: 0.84,
|
||||||
|
291: 0.84,
|
||||||
|
292: 0.85,
|
||||||
|
293: 0.85,
|
||||||
|
294: 0.85,
|
||||||
|
295: 0.85,
|
||||||
|
296: 0.85,
|
||||||
|
297: 0.86,
|
||||||
|
298: 0.86,
|
||||||
|
299: 0.86,
|
||||||
|
300: 0.86,
|
||||||
|
301: 0.86,
|
||||||
|
302: 0.87,
|
||||||
|
303: 0.87,
|
||||||
|
304: 0.87,
|
||||||
|
305: 0.87,
|
||||||
|
306: 0.88,
|
||||||
|
307: 0.88,
|
||||||
|
308: 0.88,
|
||||||
|
309: 0.88,
|
||||||
|
310: 0.88,
|
||||||
|
311: 0.89,
|
||||||
|
312: 0.89,
|
||||||
|
313: 0.89,
|
||||||
|
314: 0.89,
|
||||||
|
315: 0.90,
|
||||||
|
316: 0.90,
|
||||||
|
317: 0.90,
|
||||||
|
318: 0.90,
|
||||||
|
319: 0.90,
|
||||||
|
320: 0.91,
|
||||||
|
321: 0.91,
|
||||||
|
322: 0.91,
|
||||||
|
323: 0.91,
|
||||||
|
324: 0.92,
|
||||||
|
325: 0.92,
|
||||||
|
326: 0.92,
|
||||||
|
327: 0.92,
|
||||||
|
328: 0.92,
|
||||||
|
329: 0.93,
|
||||||
|
330: 0.93,
|
||||||
|
331: 0.93,
|
||||||
|
332: 0.93,
|
||||||
|
333: 0.94,
|
||||||
|
334: 0.94,
|
||||||
|
335: 0.94,
|
||||||
|
336: 0.94,
|
||||||
|
337: 0.94,
|
||||||
|
338: 0.95,
|
||||||
|
339: 0.95,
|
||||||
|
340: 0.95,
|
||||||
|
341: 0.95,
|
||||||
|
342: 0.95,
|
||||||
|
343: 0.96,
|
||||||
|
344: 0.96,
|
||||||
|
345: 0.96,
|
||||||
|
346: 0.96,
|
||||||
|
347: 0.97,
|
||||||
|
348: 0.97,
|
||||||
|
349: 0.97,
|
||||||
|
350: 0.97,
|
||||||
|
351: 0.97,
|
||||||
|
352: 0.98,
|
||||||
|
353: 0.98,
|
||||||
|
354: 0.98,
|
||||||
|
355: 0.98,
|
||||||
|
356: 0.99,
|
||||||
|
357: 0.99,
|
||||||
|
358: 0.99,
|
||||||
|
360: 0.99,
|
||||||
|
359: 0.99,
|
||||||
|
361: 1.00,
|
||||||
|
362: 1.00,
|
||||||
|
363: 1.00,
|
||||||
|
364: 1.00,
|
||||||
|
365: 1.00,
|
||||||
|
366: 1.00,
|
||||||
|
};
|
||||||
|
|
||||||
|
function calculator() {
|
||||||
|
// pull from input fields
|
||||||
|
var effectiveDate = document.getElementById("effectiveDate").value;
|
||||||
|
var expiryDate = document.getElementById("expiryDate").value;
|
||||||
|
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;
|
||||||
|
var breakCGL = document.getElementById("breakCGL").value || 0;
|
||||||
|
var breakProperty = document.getElementById("breakProperty").value || 0;
|
||||||
|
var breakEB = document.getElementById("breakEB").value || 0;
|
||||||
|
|
||||||
|
// calculate dates in policy term
|
||||||
|
var policyDays = new Date(expiryDate).getTime() - new Date(effectiveDate).getTime();
|
||||||
|
var termDays = policyDays / (1000 * 60 * 60 * 24);
|
||||||
|
|
||||||
|
// calculate dates involved with cancellation
|
||||||
|
var cancelDays = new Date(cancelDate).getTime() - new Date(effectiveDate).getTime();
|
||||||
|
var forceDays = cancelDays / (1000 * 60 * 60 * 24);
|
||||||
|
var remainingDays = termDays - forceDays;
|
||||||
|
|
||||||
|
// calculate pro rata
|
||||||
|
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 = '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;
|
||||||
|
}else {
|
||||||
|
var earnedFactor = 'ERROR'
|
||||||
|
var unearnedFactor = 'ERROR'
|
||||||
|
document.getElementById("earnedFactor").className = 'red';
|
||||||
|
document.getElementById("unearnedFactor").className = 'red';
|
||||||
|
}
|
||||||
|
// calculate premiums
|
||||||
|
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 = 'red';
|
||||||
|
|
||||||
|
// calculate breakdown
|
||||||
|
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) {
|
||||||
|
var checkMatch = "❌ Total breakdown does not match total premium. It is too high by " + calcMatch + ".";
|
||||||
|
document.getElementById("checkMatch").className = 'red';
|
||||||
|
var calculateBreakdown = false;
|
||||||
|
}else if(totalPremium>calcBreak && totalPremium > 1) {
|
||||||
|
var checkMatch = "❌ Total breakdown does not match total premium. It is too low by " + calcMatch + ".";
|
||||||
|
document.getElementById("checkMatch").className = 'red';
|
||||||
|
var calculateBreakdown = false;
|
||||||
|
}else if(totalPremium > 1) {
|
||||||
|
var checkMatch = "✅ Total breakdown matches total premium!";
|
||||||
|
document.getElementById("checkMatch").className = 'green';
|
||||||
|
var calculateBreakdown = true;
|
||||||
|
}else {
|
||||||
|
var checkMatch = "⚠️ More information is required to provide premium breakdown.";
|
||||||
|
document.getElementById("checkMatch").className = 'orange';
|
||||||
|
var calculateBreakdown = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// calculate breakdowns
|
||||||
|
if(calculateBreakdown == true) {
|
||||||
|
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;
|
||||||
|
var percentCyber = Math.round((((breakCyber / totalPremium) * 100) + Number.EPSILON)*100)/100;
|
||||||
|
var earnedCyber = Math.round(((breakCyber * earnedFactor) + Number.EPSILON)*100)/100;
|
||||||
|
var unearnedCyber = Math.round(((breakCyber * unearnedFactor) + Number.EPSILON)*100)/100;
|
||||||
|
var percentLEI = Math.round((((breakLEI / totalPremium) * 100) + Number.EPSILON)*100)/100;
|
||||||
|
var earnedLEI = Math.round(((breakLEI * earnedFactor) + Number.EPSILON)*100)/100;
|
||||||
|
var unearnedLEI = Math.round(((breakLEI * unearnedFactor) + Number.EPSILON)*100)/100;
|
||||||
|
var percentCGL = Math.round((((breakCGL / totalPremium) * 100) + Number.EPSILON)*100)/100;
|
||||||
|
var earnedCGL = Math.round(((breakCGL * earnedFactor) + Number.EPSILON)*100)/100;
|
||||||
|
var unearnedCGL = Math.round(((breakCGL * unearnedFactor) + Number.EPSILON)*100)/100;
|
||||||
|
var percentProperty = Math.round((((breakProperty / totalPremium) * 100) + Number.EPSILON)*100)/100;
|
||||||
|
var earnedProperty = Math.round(((breakProperty * earnedFactor) + Number.EPSILON)*100)/100;
|
||||||
|
var unearnedProperty = Math.round(((breakProperty * unearnedFactor) + 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 unearnedEB = Math.round(((breakEB * unearnedFactor) + Number.EPSILON)*100)/100;
|
||||||
|
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';
|
||||||
|
document.getElementById("percentCyber").className = 'normal';
|
||||||
|
document.getElementById("earnedCyber").className = 'green';
|
||||||
|
document.getElementById("unearnedCyber").className = 'red';
|
||||||
|
document.getElementById("percentLEI").className = 'normal';
|
||||||
|
document.getElementById("earnedLEI").className = 'green';
|
||||||
|
document.getElementById("unearnedLEI").className = 'red';
|
||||||
|
document.getElementById("percentCGL").className = 'normal';
|
||||||
|
document.getElementById("earnedCGL").className = 'green';
|
||||||
|
document.getElementById("unearnedCGL").className = 'red';
|
||||||
|
document.getElementById("percentProperty").className = 'normal';
|
||||||
|
document.getElementById("earnedProperty").className = 'green';
|
||||||
|
document.getElementById("unearnedProperty").className = 'red';
|
||||||
|
document.getElementById("percentEB").className = 'normal';
|
||||||
|
document.getElementById("earnedEB").className = 'green';
|
||||||
|
document.getElementById("unearnedEB").className = 'red';
|
||||||
|
}else {
|
||||||
|
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';
|
||||||
|
document.getElementById("percentCyber").className = 'red';
|
||||||
|
document.getElementById("earnedCyber").className = 'red';
|
||||||
|
document.getElementById("unearnedCyber").className = 'red';
|
||||||
|
document.getElementById("percentLEI").className = 'red';
|
||||||
|
document.getElementById("earnedLEI").className = 'red';
|
||||||
|
document.getElementById("unearnedLEI").className = 'red';
|
||||||
|
document.getElementById("percentCGL").className = 'red';
|
||||||
|
document.getElementById("earnedCGL").className = 'red';
|
||||||
|
document.getElementById("unearnedCGL").className = 'red';
|
||||||
|
document.getElementById("percentProperty").className = 'red';
|
||||||
|
document.getElementById("earnedProperty").className = 'red';
|
||||||
|
document.getElementById("unearnedProperty").className = 'red';
|
||||||
|
document.getElementById("percentEB").className = 'red';
|
||||||
|
document.getElementById("earnedEB").className = 'red';
|
||||||
|
document.getElementById("unearnedEB").className = 'red';
|
||||||
|
}
|
||||||
|
|
||||||
|
// display policy terms
|
||||||
|
document.getElementById("termDays").innerHTML = termDays;
|
||||||
|
document.getElementById("forceDays").innerHTML = forceDays;
|
||||||
|
document.getElementById("remainingDays").innerHTML = remainingDays;
|
||||||
|
document.getElementById("earnedFactor").innerHTML = earnedFactor;
|
||||||
|
document.getElementById("unearnedFactor").innerHTML = unearnedFactor;
|
||||||
|
document.getElementById("earnedPremium").innerHTML = earnedPremium;
|
||||||
|
document.getElementById("unearnedPremium").innerHTML = unearnedPremium;
|
||||||
|
// display breakdown
|
||||||
|
document.getElementById("checkMatch").innerHTML = checkMatch;
|
||||||
|
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;
|
||||||
|
document.getElementById("percentCyber").innerHTML = percentCyber;
|
||||||
|
document.getElementById("earnedCyber").innerHTML = earnedCyber;
|
||||||
|
document.getElementById("unearnedCyber").innerHTML = unearnedCyber;
|
||||||
|
document.getElementById("percentLEI").innerHTML = percentLEI;
|
||||||
|
document.getElementById("earnedLEI").innerHTML = earnedLEI;
|
||||||
|
document.getElementById("unearnedLEI").innerHTML = unearnedLEI;
|
||||||
|
document.getElementById("percentCGL").innerHTML = percentCGL;
|
||||||
|
document.getElementById("earnedCGL").innerHTML = earnedCGL;
|
||||||
|
document.getElementById("unearnedCGL").innerHTML = unearnedCGL;
|
||||||
|
document.getElementById("percentProperty").innerHTML = percentProperty;
|
||||||
|
document.getElementById("earnedProperty").innerHTML = earnedProperty;
|
||||||
|
document.getElementById("unearnedProperty").innerHTML = unearnedProperty;
|
||||||
|
document.getElementById("percentEB").innerHTML = percentEB;
|
||||||
|
document.getElementById("earnedEB").innerHTML = earnedEB;
|
||||||
|
document.getElementById("unearnedEB").innerHTML = unearnedEB;
|
||||||
|
}
|
||||||
BIN
assets/favicon.ico
Normal file
BIN
assets/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 318 B |
348
assets/style.css
Normal file
348
assets/style.css
Normal file
@ -0,0 +1,348 @@
|
|||||||
|
/*------------------------------------------------------------------------------
|
||||||
|
-- // RESETS
|
||||||
|
------------------------------------------------------------------------------*/
|
||||||
|
|
||||||
|
html { box-sizing: border-box; }
|
||||||
|
|
||||||
|
*,
|
||||||
|
*:before,
|
||||||
|
*:after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body, div, span,
|
||||||
|
header, nav, main, article, section, aside, footer,
|
||||||
|
h1, h2, h3, h4, h5, h6,
|
||||||
|
p, strong, em, b, i, u, a, ul, ol, li,
|
||||||
|
blockquote, pre, code, img, audio, video,
|
||||||
|
table, caption, thead, tbody, tfoot, tr, th, td,
|
||||||
|
form, input {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background: transparent;
|
||||||
|
font-size: 100%;
|
||||||
|
font-weight: normal;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
header, nav, main, article, section, aside, footer,
|
||||||
|
blockquote, pre, img, audio, video,
|
||||||
|
form {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -----------------------------------------------------------------------------
|
||||||
|
-- // BASE
|
||||||
|
----------------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--width: 900px;
|
||||||
|
--font-family: Verdana, Arial, sans-serif;
|
||||||
|
--font-scale: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
: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 {
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 16px;
|
||||||
|
max-width: var(--width);
|
||||||
|
background-color: var(--bg-100);
|
||||||
|
font-family: var(--font-family);
|
||||||
|
font-size: var(--font-scale);
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 1.5;
|
||||||
|
color: var(--text-100);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -----------------------------------------------------------------------------
|
||||||
|
-- // BASIC ELEMENTS
|
||||||
|
----------------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
.normal { color: var(--text-100); }
|
||||||
|
.blue { color: var(--highlight-accent); }
|
||||||
|
.green { color: var(--highlight-earned); }
|
||||||
|
.red { color: var(--highlight-unearned); }
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2em;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
margin-bottom: 1em;
|
||||||
|
font-size: 1.5em;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: 1em;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
p:last-child { margin-bottom: 0; }
|
||||||
|
|
||||||
|
a,
|
||||||
|
a:visited {
|
||||||
|
color: var(--text-100);
|
||||||
|
text-decoration: underline;
|
||||||
|
text-underline-offset: 2px;
|
||||||
|
text-decoration-thickness: 1px;
|
||||||
|
text-decoration-style: solid;
|
||||||
|
text-decoration-color: var(--highlight-accent);
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: var(--highlight-accent);
|
||||||
|
text-decoration: underline;
|
||||||
|
text-decoration-style: solid;
|
||||||
|
text-decoration-color: var(--highlight-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
margin-left: 1em;
|
||||||
|
padding-left: 1em;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
list-style-type: square;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
margin: 1em 0;
|
||||||
|
padding: 12px 16px;
|
||||||
|
border: 1px solid var(--ui-100);
|
||||||
|
background-color: var(--bg-200);
|
||||||
|
font-size: .875em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -----------------------------------------------------------------------------
|
||||||
|
-- // FORM
|
||||||
|
----------------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
input,
|
||||||
|
label {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
padding-left: 4px;
|
||||||
|
border: 1px solid var(--ui-100);
|
||||||
|
background-color: var(--bg-200);
|
||||||
|
color: var(--highlight-accent);
|
||||||
|
}
|
||||||
|
input:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--ui-200);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove up and down arrows */
|
||||||
|
input::-webkit-outer-spin-button,
|
||||||
|
input::-webkit-inner-spin-button {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
input[type="number"] {
|
||||||
|
-moz-appearance: textfield;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calcMethod {
|
||||||
|
margin: 1em 0;
|
||||||
|
}
|
||||||
|
.calcMethod span {
|
||||||
|
margin-right: 1em;
|
||||||
|
}
|
||||||
|
input[type="radio"] {
|
||||||
|
height: 1em;
|
||||||
|
width: 1em;
|
||||||
|
margin: 0 4px 0 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
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-200);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -----------------------------------------------------------------------------
|
||||||
|
-- // TABLE
|
||||||
|
----------------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
table {
|
||||||
|
margin: 1em 0;
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
th {
|
||||||
|
padding: 2px 0 2px 8px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: left;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
td {
|
||||||
|
padding: 2px 0 2px 8px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.with-border {
|
||||||
|
padding: 2px 4px;
|
||||||
|
border: 1px solid var(--ui-100);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -----------------------------------------------------------------------------
|
||||||
|
-- // LAYOUT
|
||||||
|
----------------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
header {
|
||||||
|
margin-top: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
margin: 4rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-container {
|
||||||
|
display: flex;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 4rem 2rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.flex-1 {
|
||||||
|
order: 1;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
.flex-2{
|
||||||
|
order: 2;
|
||||||
|
flex-grow: 1
|
||||||
|
}
|
||||||
|
.flex-3 {
|
||||||
|
order: 3;
|
||||||
|
flex-grow: 2;
|
||||||
|
}
|
||||||
|
.flex-4 {
|
||||||
|
order: 4;
|
||||||
|
flex-grow: 2;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
margin-top: 4rem;
|
||||||
|
margin-bottom: 4rem;
|
||||||
|
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();
|
||||||
271
index.html
271
index.html
@ -3,122 +3,185 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name=""viewport" content=""width=device-width, initial-scale="1.0">
|
<meta name=""viewport" content=""width=device-width, initial-scale="1.0">
|
||||||
<title>Calculator</title>
|
|
||||||
<link rel="stylesheet" href="style.css">
|
<title>Premium Calculator</title>
|
||||||
|
|
||||||
|
<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">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<h1>Calculator</h1>
|
<h1>Premium Calculator</h1>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
|
<div class="flex-container">
|
||||||
<form action="/action_page.php">
|
<div class="flex-1">
|
||||||
<div class="flex-container">
|
<h2>Policy Details</h2>
|
||||||
<div class="flex-1">
|
<table>
|
||||||
<h2>Policy Details</h2>
|
<tr>
|
||||||
<label for="effectiveDate">Effective date:</label>
|
<th><label for="effectiveDate">Effective date</label></th>
|
||||||
<input type="date" id="effectiveDate" name="effectiveDate" onblur="calculator()" min="0" oninput="validity.valid||(value='')">
|
<td><input type="date" id="effectiveDate" name="effectiveDate" onblur="calculator()" min="0" oninput="validity.valid||(value='')"></td>
|
||||||
<br>
|
</tr>
|
||||||
<label for="expiryDate">Expiry date:</label>
|
<tr>
|
||||||
<input type="date" id="expiryDate" name="expiryDate" onblur="calculator()" min="0" oninput="validity.valid||(value='')">
|
<th><label for="expiryDate">Expiry date:</label></th>
|
||||||
<br>
|
<td><input type="date" id="expiryDate" name="expiryDate" onblur="calculator()" min="0" oninput="validity.valid||(value='')"></td>
|
||||||
Days in policy term: <span id="termDays">-</span>
|
</tr>
|
||||||
<br><br>
|
<tr>
|
||||||
<label for="cancelDate">Cancellation date</label>
|
<th><label for="cancelDate">Cancellation date:</label></th>
|
||||||
<input type="date" id="cancelDate" name="cancelDate" onblur="calculator()" min="0" oninput="validity.valid||(value='')">
|
<td><input type="date" id="cancelDate" name="cancelDate" onblur="calculator()" min="0" oninput="validity.valid||(value='')"></td>
|
||||||
<br>
|
</tr>
|
||||||
Days in force: <span id="forceDays">-</span>
|
<tr>
|
||||||
<br>
|
<th><label for="totalPremium">Total premium:</label></th>
|
||||||
Days remaining: <span id="remainingDays">-</span>
|
<td><input type="number" id="totalPremium" name="totalPremium" onblur="calculator()" min="0" oninput="validity.valid||(value='')"></td>
|
||||||
<br><br>
|
</tr>
|
||||||
Factor method:
|
<tr>
|
||||||
<input type="radio" name="calcMethod" id="calcProRata" value="Pro Rata" onclick="calculator();" /> Pro Rata
|
<th>Days in policy term:</th>
|
||||||
<input type="radio" name="calcMethod" id="calcShortRate" value="Short Rate" onclick="calculator();"/> Short Rate
|
<td><span id="termDays">-</span></td>
|
||||||
<br><br>
|
</tr>
|
||||||
Earned factor: <span id="earnedFactor">-</span>
|
<tr>
|
||||||
<br>
|
<th>Days in force:</th>
|
||||||
Unearned factor: <span id="unearnedFactor">-</span>
|
<td><span id="forceDays">-</span></td>
|
||||||
<br><br>
|
</tr>
|
||||||
<label for="totalPremium">Total premium:</label>
|
<tr>
|
||||||
<input type="number" id="totalPremium" name="totalPremium" onblur="calculator()" min="0" oninput="validity.valid||(value='')">
|
<th>Days remaining:</th>
|
||||||
<br>
|
<td><span id="remainingDays">-</span></td>
|
||||||
Earned premium: <span id="earnedPremium">-</span>
|
</tr>
|
||||||
<br>
|
</table>
|
||||||
Return premium: <span id="unearnedPremium">-</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex-2">
|
|
||||||
<h2>Breakdown</h2>
|
|
||||||
<p><span id="checkMatch">Total breakdown: N/A</span></p>
|
|
||||||
|
|
||||||
<label for="breakDO">D&O:</label>
|
|
||||||
<input type="number" id="breakDO" name="breakDO" onblur="calculator()" min="0" oninput="validity.valid||(value='')">
|
|
||||||
<br>
|
|
||||||
Earned premium: <span id="earnedDO">-</span>
|
|
||||||
<br>
|
|
||||||
Return premium: <span id="unearnedDO">-</span>
|
|
||||||
<br><br>
|
|
||||||
|
|
||||||
<label for="breakEO">E&O:</label>
|
|
||||||
<input type="number" id="breakEO" name="breakEO" onblur="calculator()" min="0" oninput="validity.valid||(value='')">
|
|
||||||
<br>
|
|
||||||
Earned premium: <span id="earnedEO">-</span>
|
|
||||||
<br>
|
|
||||||
Return premium: <span id="unearnedEO">-</span>
|
|
||||||
<br><br>
|
|
||||||
|
|
||||||
<label for="breakCyber">Cyber:</label>
|
|
||||||
<input type="number" id="breakCyber" name="breakCyber" onblur="calculator()" min="0" oninput="validity.valid||(value='')">
|
|
||||||
<br>
|
|
||||||
Earned premium: <span id="earnedCyber">-</span>
|
|
||||||
<br>
|
|
||||||
Return premium: <span id="unearnedCyber">-</span>
|
|
||||||
<br><br>
|
|
||||||
|
|
||||||
<label for="breakLEI">Legal Expense:</label>
|
|
||||||
<input type="number" id="breakLEI" name="breakLEI" onblur="calculator()" min="0" oninput="validity.valid||(value='')">
|
|
||||||
<br>
|
|
||||||
Earned premium: <span id="earnedLEI">-</span>
|
|
||||||
<br>
|
|
||||||
Return premium: <span id="unearnedLEI">-</span>
|
|
||||||
<br><br>
|
|
||||||
|
|
||||||
<label for="breakCGL">CGL:</label>
|
|
||||||
<input type="number" id="breakCGL" name="breakCGL" onblur="calculator()" min="0" oninput="validity.valid||(value='')">
|
|
||||||
<br>
|
|
||||||
Earned premium: <span id="earnedCGL">-</span>
|
|
||||||
<br>
|
|
||||||
Return premium: <span id="unearnedCGL">-</span>
|
|
||||||
<br><br>
|
|
||||||
|
|
||||||
<label for="breakProperty">Property:</label>
|
|
||||||
<input type="number" id="breakProperty" name="breakProperty" onblur="calculator()" min="0" oninput="validity.valid||(value='')">
|
|
||||||
<br>
|
|
||||||
Earned premium: <span id="earnedProperty">-</span>
|
|
||||||
<br>
|
|
||||||
Return premium: <span id="unearnedProperty">-</span>
|
|
||||||
<br><br>
|
|
||||||
|
|
||||||
<label for="breakEB">Equipment Breakdown::</label>
|
|
||||||
<input type="number" id="breakEB" name="breakEB" onblur="calculator()" min="0" oninput="validity.valid||(value='')">
|
|
||||||
<br>
|
|
||||||
Earned premium: <span id="earnedEB">-</span>
|
|
||||||
<br>
|
|
||||||
Return premium: <span id="unearnedEB">-</span>
|
|
||||||
<br><br>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</form>
|
|
||||||
|
|
||||||
<button onclick="calculator()">Calculate</button>
|
<div class="flex-2">
|
||||||
|
<h2>Factor Method</h2>
|
||||||
|
|
||||||
|
<div class="calcMethod">
|
||||||
|
<label for="calcProRata">
|
||||||
|
<input type="radio" name="calcMethod" id="calcProRata" value="Pro Rata" checked="checked" onclick="calculator();" >
|
||||||
|
<span>Pro Rata</span>
|
||||||
|
</label>
|
||||||
|
<label for="calcShortRate">
|
||||||
|
<input type="radio" name="calcMethod" id="calcShortRate" value="Short Rate" onclick="calculator();" >
|
||||||
|
<span>Short Rate</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<td class="with-border"></td>
|
||||||
|
<th class="with-border">Earned</th>
|
||||||
|
<th class="with-border">Unearned</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<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>
|
||||||
|
<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 (Optional)</h2>
|
||||||
|
<blockquote><span id="checkMatch">Total breakdown: N/A</span></blockquote>
|
||||||
|
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<th>Coverage</th>
|
||||||
|
<th>Premium</th>
|
||||||
|
<th>Breakdown (%)</th>
|
||||||
|
<th>Earned Premium</th>
|
||||||
|
<th>Unearned Premium</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><label for="breakDO">D&O</label></td>
|
||||||
|
<td><input type="number" id="breakDO" name="breakDO" onblur="calculator()" min="0" oninput="validity.valid||(value='')"></td>
|
||||||
|
<td><span id="percentDO">-</span></td>
|
||||||
|
<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>
|
||||||
|
<td><span id="percentEO">-</span></td>
|
||||||
|
<td><span id="earnedEO">-</span></td>
|
||||||
|
<td><span id="unearnedEO">-</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><label for="breakCyber">Cyber</label></td>
|
||||||
|
<td><input type="number" id="breakCyber" name="breakCyber" onblur="calculator()" min="0" oninput="validity.valid||(value='')"></td>
|
||||||
|
<td><span id="percentCyber">-</span></td>
|
||||||
|
<td><span id="earnedCyber">-</span></td>
|
||||||
|
<td><span id="unearnedCyber">-</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><label for="breakLEI">Legal Expense</label></td>
|
||||||
|
<td><input type="number" id="breakLEI" name="breakLEI" onblur="calculator()" min="0" oninput="validity.valid||(value='')"></td>
|
||||||
|
<td><span id="percentLEI">-</span></td>
|
||||||
|
<td><span id="earnedLEI">-</span></td>
|
||||||
|
<td><span id="unearnedLEI">-</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><label for="breakCGL">CGL</label></td>
|
||||||
|
<td><input type="number" id="breakCGL" name="breakCGL" onblur="calculator()" min="0" oninput="validity.valid||(value='')"></td>
|
||||||
|
<td><span id="percentCGL">-</span></td>
|
||||||
|
<td><span id="earnedCGL">-</span></td>
|
||||||
|
<td><span id="unearnedCGL">-</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><label for="breakProperty">Property</label></td>
|
||||||
|
<td><input type="number" id="breakProperty" name="breakProperty" onblur="calculator()" min="0" oninput="validity.valid||(value='')"></td>
|
||||||
|
<td><span id="percentProperty">-</span></td>
|
||||||
|
<td><span id="earnedProperty">-</span></td>
|
||||||
|
<td><span id="unearnedProperty">-</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><label for="breakEB">Equipment Breakdown</label></td>
|
||||||
|
<td><input type="number" id="breakEB" name="breakEB" onblur="calculator()" min="0" oninput="validity.valid||(value='')"></td>
|
||||||
|
<td><span id="percentEB">-</span></td>
|
||||||
|
<td><span id="earnedEB">-</span></td>
|
||||||
|
<td><span id="unearnedEB">-</span></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<div class="flex-4">
|
||||||
|
<button onClick="calculator()">Calculate</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<p>Created by <a href="https://haothitran.com">Hao Tran</a>.</p>
|
<select name="theme-select" id="theme-select">
|
||||||
<p>Note: Calculations are rounded to the nearest tenth decimal. As such, there may sometimes be issues of rounding error.</p>
|
<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>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>
|
</footer>
|
||||||
|
|
||||||
|
<script src="assets/calculator.js"></script>
|
||||||
|
<script src="assets/theme.js"></script>
|
||||||
</body>
|
</body>
|
||||||
<script src="scripts/calculator.js"></script>
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,114 +0,0 @@
|
|||||||
function calculator() {
|
|
||||||
// pull from input fields
|
|
||||||
var effectiveDate = document.getElementById("effectiveDate").value;
|
|
||||||
var expiryDate = document.getElementById("expiryDate").value;
|
|
||||||
var cancelDate = document.getElementById("cancelDate").value;
|
|
||||||
var totalPremium = document.getElementById("totalPremium").value;
|
|
||||||
var breakDO = document.getElementById("breakDO").value || 0;
|
|
||||||
var breakEO = document.getElementById("breakEO").value || 0;
|
|
||||||
var breakCyber = document.getElementById("breakCyber").value || 0;
|
|
||||||
var breakLEI = document.getElementById("breakLEI").value || 0;
|
|
||||||
var breakCGL = document.getElementById("breakCGL").value || 0;
|
|
||||||
var breakProperty = document.getElementById("breakProperty").value || 0;
|
|
||||||
var breakEB = document.getElementById("breakEB").value || 0;
|
|
||||||
|
|
||||||
// calculate dates in policy term
|
|
||||||
var policyDays = new Date(expiryDate).getTime() - new Date(effectiveDate).getTime();
|
|
||||||
var termDays = policyDays / (1000 * 60 * 60 * 24);
|
|
||||||
|
|
||||||
// calculate dates involved with cancellation
|
|
||||||
var cancelDays = new Date(cancelDate).getTime() - new Date(effectiveDate).getTime();
|
|
||||||
var forceDays = cancelDays / (1000 * 60 * 60 * 24);
|
|
||||||
var remainingDays = termDays - forceDays;
|
|
||||||
|
|
||||||
// calculate pro rata
|
|
||||||
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;
|
|
||||||
// calculate short rate
|
|
||||||
}else if(document.getElementById('calcShortRate').checked) {
|
|
||||||
var earnedFactor = Math.round(((1 - ((remainingDays / termDays ) * 0.9)) + Number.EPSILON)*1000)/1000;
|
|
||||||
var unearnedFactor = Math.round((((remainingDays / termDays) * 0.9) + Number.EPSILON)*1000)/1000;
|
|
||||||
}
|
|
||||||
|
|
||||||
// calculate premiums
|
|
||||||
var earnedPremium = Math.round(((totalPremium * earnedFactor) + Number.EPSILON)*1000)/1000;
|
|
||||||
var unearnedPremium = Math.round(((totalPremium * unearnedFactor) + Number.EPSILON)*1000)/1000;
|
|
||||||
|
|
||||||
// calculate breakdown
|
|
||||||
var calcBreak = +breakDO + +breakEO + +breakCyber + +breakLEI + +breakCGL + +breakProperty + +breakEB;
|
|
||||||
// check if breakdown matches total premium
|
|
||||||
var calcMatch = calcBreak-totalPremium;
|
|
||||||
if(totalPremium<calcBreak) {
|
|
||||||
var checkMatch = "Total breakdown is too high by " + calcMatch + ".";
|
|
||||||
document.getElementById("checkMatch").className = 'red';
|
|
||||||
var calculateBreakdown = false;
|
|
||||||
}else if(totalPremium>calcBreak) {
|
|
||||||
var checkMatch = "Total breakdown is too low by " + calcMatch + ".";
|
|
||||||
document.getElementById("checkMatch").className = 'red';
|
|
||||||
var calculateBreakdown = false;
|
|
||||||
}else {
|
|
||||||
var checkMatch = "Total breakdown matches total premium! Success!";
|
|
||||||
document.getElementById("checkMatch").className = 'green';
|
|
||||||
var calculateBreakdown = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
// calculate breakdowns
|
|
||||||
if(calculateBreakdown == true) {
|
|
||||||
var earnedDO = Math.round(((breakDO * earnedFactor) + Number.EPSILON)*1000)/1000;
|
|
||||||
var unearnedDO = Math.round(((breakDO * unearnedFactor) + Number.EPSILON)*1000)/1000;
|
|
||||||
var earnedEO = Math.round(((breakEO * earnedFactor) + Number.EPSILON)*1000)/1000;
|
|
||||||
var unearnedEO = Math.round(((breakEO * unearnedFactor) + Number.EPSILON)*1000)/1000;
|
|
||||||
var earnedCyber = Math.round(((breakCyber * earnedFactor) + Number.EPSILON)*1000)/1000;
|
|
||||||
var unearnedCyber = Math.round(((breakCyber * unearnedFactor) + Number.EPSILON)*1000)/1000;
|
|
||||||
var earnedLEI = Math.round(((breakLEI * earnedFactor) + Number.EPSILON)*1000)/1000;
|
|
||||||
var unearnedLEI = Math.round(((breakLEI * unearnedFactor) + Number.EPSILON)*1000)/1000;
|
|
||||||
var earnedCGL = Math.round(((breakCGL * earnedFactor) + Number.EPSILON)*1000)/1000;
|
|
||||||
var unearnedCGL = Math.round(((breakCGL * unearnedFactor) + Number.EPSILON)*1000)/1000;
|
|
||||||
var earnedProperty = Math.round(((breakProperty * earnedFactor) + Number.EPSILON)*1000)/1000;
|
|
||||||
var unearnedProperty = Math.round(((breakProperty * unearnedFactor) + Number.EPSILON)*1000)/1000;
|
|
||||||
var earnedEB = Math.round(((breakEB * earnedFactor) + Number.EPSILON)*1000)/1000;
|
|
||||||
var unearnedEB = Math.round(((breakEB * unearnedFactor) + Number.EPSILON)*1000)/1000;
|
|
||||||
}else {
|
|
||||||
var earnedDO = 'ERROR'
|
|
||||||
var unearnedDO = 'ERROR'
|
|
||||||
var earnedEO = 'ERROR'
|
|
||||||
var unearnedEO = 'ERROR'
|
|
||||||
var earnedCyber = 'ERROR'
|
|
||||||
var unearnedCyber = 'ERROR'
|
|
||||||
var earnedLEI = 'ERROR'
|
|
||||||
var unearnedLEI = 'ERROR'
|
|
||||||
var earnedCGL = 'ERROR'
|
|
||||||
var unearnedCGL = 'ERROR'
|
|
||||||
var earnedProperty = 'ERROR'
|
|
||||||
var unearnedProperty = 'ERROR'
|
|
||||||
var earnedEB = 'ERROR'
|
|
||||||
var unearnedEB = 'ERROR'
|
|
||||||
}
|
|
||||||
|
|
||||||
// display policy terms
|
|
||||||
document.getElementById("termDays").innerHTML = termDays;
|
|
||||||
document.getElementById("forceDays").innerHTML = forceDays;
|
|
||||||
document.getElementById("remainingDays").innerHTML = remainingDays;
|
|
||||||
document.getElementById("earnedFactor").innerHTML = earnedFactor;
|
|
||||||
document.getElementById("unearnedFactor").innerHTML = unearnedFactor;
|
|
||||||
document.getElementById("earnedPremium").innerHTML = earnedPremium;
|
|
||||||
document.getElementById("unearnedPremium").innerHTML = unearnedPremium;
|
|
||||||
// display breakdown
|
|
||||||
document.getElementById("checkMatch").innerHTML = checkMatch;
|
|
||||||
document.getElementById("earnedDO").innerHTML = earnedDO;
|
|
||||||
document.getElementById("unearnedDO").innerHTML = unearnedDO;
|
|
||||||
document.getElementById("earnedEO").innerHTML = earnedEO;
|
|
||||||
document.getElementById("unearnedEO").innerHTML = unearnedEO;
|
|
||||||
document.getElementById("earnedCyber").innerHTML = earnedCyber;
|
|
||||||
document.getElementById("unearnedCyber").innerHTML = unearnedCyber;
|
|
||||||
document.getElementById("earnedLEI").innerHTML = earnedLEI;
|
|
||||||
document.getElementById("unearnedLEI").innerHTML = unearnedLEI;
|
|
||||||
document.getElementById("earnedCGL").innerHTML = earnedCGL;
|
|
||||||
document.getElementById("unearnedCGL").innerHTML = unearnedCGL;
|
|
||||||
document.getElementById("earnedProperty").innerHTML = earnedProperty;
|
|
||||||
document.getElementById("unearnedProperty").innerHTML = unearnedProperty;
|
|
||||||
document.getElementById("earnedEB").innerHTML = earnedEB;
|
|
||||||
document.getElementById("unearnedEB").innerHTML = unearnedEB;
|
|
||||||
}
|
|
||||||
doSomething
|
|
||||||
76
style.css
76
style.css
@ -1,76 +0,0 @@
|
|||||||
:root {
|
|
||||||
--width: 900px;
|
|
||||||
--font-family: Verdana, sans-serif;
|
|
||||||
--font-scale: 1em;
|
|
||||||
--bg-100: #100F0F;
|
|
||||||
--bg-200: #1C1B1A;
|
|
||||||
--ui-100: #292726;
|
|
||||||
--ui-200: #343331;
|
|
||||||
--ui-300: #403E3C;
|
|
||||||
--text-100: #CECDC3;
|
|
||||||
|
|
||||||
|
|
||||||
--cyan-400: #3AA99F;
|
|
||||||
--green-400: #879A39;
|
|
||||||
--red-400: #D14D41;
|
|
||||||
}
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
:root {
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 0 16px;
|
|
||||||
max-width: var(--width);
|
|
||||||
background-color: var(--bg-100);
|
|
||||||
font-family: var(--font-family);
|
|
||||||
font-size: var(--font-scale);
|
|
||||||
color: var(--text-100);
|
|
||||||
}
|
|
||||||
|
|
||||||
.green { color: var(--green-400); }
|
|
||||||
.red { color: var(--red-400); }
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
button {
|
|
||||||
margin-top: 2rem;
|
|
||||||
padding: 10px;
|
|
||||||
width: 100%;
|
|
||||||
border: 1px solid var(--ui-300);
|
|
||||||
background-color: var(--green-400);
|
|
||||||
color: var(--text-100);
|
|
||||||
}
|
|
||||||
input {
|
|
||||||
border: 1px solid var(--ui-300);
|
|
||||||
background-color: var(--ui-100);
|
|
||||||
color: var(--text-100);
|
|
||||||
}
|
|
||||||
input:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: var(--cyan-400);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
header {
|
|
||||||
margin-top: 4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
main {
|
|
||||||
margin: 4rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
column-gap: 1rem;
|
|
||||||
}
|
|
||||||
.flex-1 {
|
|
||||||
order: 1;
|
|
||||||
width: 400px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex-2 {
|
|
||||||
order: 2;
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user