-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
108 lines (93 loc) · 4.57 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self'; script-src 'self' https://cdnjs.cloudflare.com;"/>
<title>FIRE Calculator AUS</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="calculator-box">
<div class="parameters-box">
<form class="calculator" action="/post" method="POST">
<div class="parameter">
<label for="current-age">Current age:</label>
<input type="number" name="current-age" value="30" placeholder="30" min="0">
<small></small>
</div>
<div class="parameter">
<label for="retirement-age">Retirement age:</label>
<input type="number" name="retirement-age" value="65" placeholder="65" min="60">
<small></small>
</div>
<div class="parameter">
<label for="annual-spend">Annual spending in retirement:</label>
<input type="number" name="annual-spend" value="30000" placeholder="30000" min="1">
<small></small>
</div>
<div class="parameter">
<label for="current-super">Current Super value:</label>
<input type="number" name="current-super" value="40000" placeholder="0" min="0">
</div>
<div class="parameter">
<label for="monthly-contribution">Monthly contribution:</label>
<input type="number" name="monthly-contribution" value="0" placeholder="500" min="0">
</div>
<!--Replace the growth and interest rate with range input in future-->
<!--Current value of the slider will be shown to the user-->
<div class="parameter">
<label for="growth-rate">Investment growth rate:</label>
<input type="number" name="growth-rate" value="10.0" placeholder="10.0" min="-100" max="100" step="0.5">
</div>
<div class="parameter">
<label for="interest-rate">Interest rate:</label>
<input type="number" name="interest-rate" value="3.0" placeholder="3.0" min="-100" max="100" step="0.5">
</div>
<!-- Alter default values to none when live -->
<h2>Pre-Super retirement</h2>
<div class="parameter">
<label for="preSuperRetirementAge">Retirement age:</label>
<!-- Need min to be currentAge and max to be retirementAge -->
<input type="number" name="preSuperRetirementAge" value="35" placeholder="35">
<small></small>
</div>
<div class="parameter">
<label for="preSuperAnnualSpend">Annual spending in Pre-Super retirement:</label>
<input type="number" name="preSuperAnnualSpend" value="60000" placeholder="60000" min="1">
<small></small>
</div>
<!-- Should I allow the user to adjust the draw rate? -->
<!-- What if they're 1 year till retirement and they put a draw rate of 50%? -->
<!-- Put in logic to auto-adjust draw rate if doesn't make sense or -->
<!-- make it so any left over is added on after to the Super? -->
<!-- <div class="parameter">
<label for="draw-rate">Draw rate:</label>
<input type="number" name="draw-rate" value="4.0" placeholder="4.0" min="0" max="100" step="0.5">
</div> -->
<!--Replace Submit button with "Years to FIRE" when convert to React-->
<input class="submit" type="submit" value="Submit">
</form>
</div>
<div class="graph-box">
<canvas id="myChart" width="650" height="600"></canvas>
</div>
</div>
<p class="a"></p>
<p class="b"></p>
<p class="c"></p>
<p class="d"></p>
<p class="e"></p>
<p class="f"></p>
<!-- Pre-Super numbers -->
<h3>Pre-Super numbers</h3>
<p class="g"></p>
<p class="h"></p>
<!-- <p class="i">At a draw rate of: </p> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js" integrity="sha512-Lii3WMtgA0C0qmmkdCpsG0Gjr6M0ajRyQRQSbTF6BsrVh/nhZdHpVZ76iMIPvQwz1eoXC3DmAg9K51qT5/dEVg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="main.js"></script>
<noscript>Sorry this website needs Javascript to run, please turn it on and refresh the page</noscript>
</body>
</html>