-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
273 lines (263 loc) · 13.1 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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Financial Projections</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="css/main.css">
<script src="https://kit.fontawesome.com/6cef40e88b.js"></script>
</head>
<body class="container">
<main class="content-box">
<form class="m-2">
<section id="intro-tab">
<h2><i class="fas fa-home"></i> Welcome</h2>
<p>This tool has been designed to help you project your current finances and determine where you will be
at the end of a specified time period.</p>
<p>In order to do this a number of user inputs are required. Namely, current savings and debt, regular
income and outgoings, and, a start and end date.</p>
<p>For example, a user wants to understand what the impact on their savings will be over a 3 year period
if they reduce
their TV and Internet Bill by 23/month.
<ul>
<li>The user populates the form with the following data:</li>
<ol>
<li>Personal Data, selecting the goal to 'Increase Savings'</li>
<li>Current Assets and Liabilities (i.e. account balances)</li>
<li>Income(s) with frequency (e.g. monthly)</li>
<li>Outgoing(s) with frequency (e.g. weekly) - including the TV and Internet bill at the
current price</li>
<li>Submits the data and is presented with a visual representation of their net worth
over time</li>
</ol>
<br>
<li>To then determine the impact of this change in outgoings, the user then does the following:
</li>
<ol start="6">
<li>Clicks the 'Previous' button until they reach the 'Regular Outgoing(s)' tabs</li>
<li>Updates the 'TV and Internet' bill to the new price</li>
<li>Submits the data again and is now presented with their net worth over time</li>
<li>Comparing the outputted values to those outputted at Step 5 gives the impact of
reducing this bill</li>
</ol>
</ul>
</p>
<p>To get started please click next and input the requested data. Should you require additional input
fields, you can add and remove as necessary on the relevant input pages.</p>
</section>
<section id="general-tab" class="hide">
<h2><i class="fas fa-user-circle"></i> Personal Details</h2>
<div class="form-row">
<p>Please input your contact details, and, select a start and end date for the forecasting period.
</p>
</div>
<div class="form-row">
<div class="form-group col-12 col-md-6">
<label for="first-name">First Name</label>
<input type="text" name="first-name" class="form-control form-control-sm" id="first-name"
placeholder="First Name">
</div>
<div class="form-group col-12 col-md-6">
<label for="last-name">Last Name</label>
<input type="text" name="last-name" class="form-control form-control-sm" id="last-name"
placeholder="Last Name">
</div>
</div>
<div class="form-row">
<div class="form-group col-12 col-md-6">
<label for="first-name">Email Address</label>
<input type="text" name="email" class="form-control form-control-sm" id="email"
placeholder="Email Address">
</div>
</div>
<div class="form-row">
<div class="form-group col-12 col-md-6">
<label for="start-date">Start Date</label>
<input type="text" name="start-date" class="form-control form-control-sm datepicker"
id="start-date" readonly="readonly">
</div>
<div class="form-group col-12 col-md-6">
<label for="end-date">End Date</label>
<input type="text" name="end-date"
class="form-control form-control-sm datepicker" id="end-date"
readonly="readonly">
</div>
</div>
</section>
<section id="financials">
<section id="account-tab" class="hide">
<h2><i class="fas fa-credit-card"></i> Accounts</h2>
<div class="form-row">
<p>Please enter all of your opening balances (e.g. for accounts, loans, credit cards, etc.) that
you are including as part of the forecasting. Please ensure they align with the start date
you have selected.</p>
</div>
<div id="account-fields-1" class="form-row">
<div class="form-group col-12 col-lg-4">
<label for="account-description-1">Description</label>
<input type="text" name="account-description-1" class="form-control form-control-sm"
id="account-description-1" placeholder="Description">
</div>
<div class="form-group col-12 col-md-5 col-lg-3">
<label for="account-amount-1">Amount</label>
<input type="text" name="account-amount-1" class="form-control form-control-sm col"
id="account-amount-1" placeholder="Account balance">
</div>
<div class="form-group col-12 col-md-5 col-lg-4">
<label for="account-type-1">Description</label>
<select class="custom-select custom-select-sm" name="account-type-1"
id="account-type-1">
<option value="">Type of account</option>
<option value="asset">Asset (e.g. Savings)</option>
<option value="liability">Liability (e.g. Debt)</option>
</select>
</div>
<div class="form-group col-4 col-md-2 col-lg-1 add-remove-btns text-md-right">
<div class="d-none d-md-block"><br></div>
<a href="#">
<i class="fas fa-plus mr-2"></i>
</a>
<a href="#">
<i class="far fa-trash-alt"></i>
</a>
</div>
<div class="input-end"></div>
</div>
</section>
<section id="income-tab" class="hide">
<h2><i class="fas fa-piggy-bank"></i> Regular Income</h2>
<div class="form-row">
<p>Please enter any regular income transactions you have, inputting the
actual (or estimated) amount and how often each takes place.</p>
<p><strong>Please note:</strong> all one-off transactions will take place 14 days after the
start date. All recurring transactions will take place as per the frequency selected - the
start date will act as time zero.</p>
</div>
<div id="income-fields-1" class="form-row mt-3 mt-md-0">
<div class="form-group col-12 col-md-4 col-lg-5">
<label for="income-description-1">Description</label>
<input type="text" name="income-description-1" class="form-control form-control-sm"
id="income-description-1" placeholder="Description">
</div>
<div class="form-group col-12 col-md-2 col-lg-3">
<label for="income-amount-1">Amount</label>
<input type="text" name="income-amount-1" class="form-control form-control-sm col"
id="income-amount-1" placeholder="Income amount">
</div>
<div class="form-group col-12 col-md-4 col-lg-3">
<label for="income-frequency-1">Frequency</label>
<select class="custom-select custom-select-sm" name="income-frequency-1"
id="income-frequency-1">
<option value="">How often does this take place</option>
<option value="once">One off</option>
<option value="7">Every 1 week</option>
<option value="14">Every 2 weeks</option>
<option value="28">Every 4 weeks</option>
<option value="30">Every 1 month</option>
<option value="60">Every 2 months</option>
</select>
</div>
<div class="form-group col-4 col-md-2 col-lg-1 add-remove-btns text-md-right">
<div class="d-none d-md-block"><br></div>
<a href="#">
<i class="fas fa-plus mr-2"></i>
</a>
<a href="#">
<i class="far fa-trash-alt"></i>
</a>
</div>
<div class="input-end"></div>
</div>
</section>
<section id="outgoing-tab" class="hide">
<h2><i class="fas fa-shopping-basket"></i> Regular Outgoing(s)</h2>
<div class="form-row">
<p>Please enter any regular outgoing transactions you have, inputting the
actual (or estimated) amount and how often each takes place.</p>
<p><strong>Please note:</strong> all one-off transactions will take place 14 days after the
start date. All recurring transactions will take place as per the frequency selected - the
start date will act as time zero.</p>
</div>
<div id="outgoing-fields-1" class="form-row mt-3 mt-md-0">
<div class="form-group col-12 col-md-7">
<label for="outgoing-description-1">Description</label>
<input type="text" name="outgoing-description-1" class="form-control form-control-sm"
id="outgoing-description-1" placeholder="Description">
</div>
<div class="form-group col-md-5">
<label for="outgoing-amount-1">Amount</label>
<input type="text" name="outgoing-amount-1" class="form-control form-control-sm"
id="outgoing-amount-1" placeholder="Outgoing amount">
</div>
<div class="form-group col-12 col-md-5">
<label for="outgoing-frequency-1">Frequency</label>
<select class="custom-select custom-select-sm" name="outgoing-frequency-1"
id="outgoing-frequency-1">
<option value="">How often does this take place</option>
<option value="once">One off</option>
<option value="7">Every 1 week</option>
<option value="14">Every 2 weeks</option>
<option value="28">Every 4 weeks</option>
<option value="30">Every 1 month</option>
<option value="60">Every 2 months</option>
</select>
</div>
<div class="form-group col-12 col-md-5">
<label for="outgoing-type-1">Type</label>
<select class="custom-select custom-select-sm" name="outgoing-type-1"
id="outgoing-type-1">
<option value="">Type of outgoing transaction</option>
<option value="bill">Bill</option>
<option value="loan">Loan</option>
<option value="cc">Credit Card</option>
<option value="rent">Rent/Mortgage</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-group col-4 col-md-2 add-remove-btns text-md-right">
<div class="d-none d-md-block"><br></div>
<a href="#">
<i class="fas fa-plus mr-2"></i>
</a>
<a href="#">
<i class="far fa-trash-alt"></i>
</a>
</div>
<div class="input-end"></div>
</div>
</section>
</section>
<section id="summary-tab" class="hide">
<h2><i class="fas fa-piggy-bank"></i> Your Net Worth</h2>
<div class="form-row">
<p class="summary-txt"></p>
</div>
<div id="netWorthChart"></div>
</section>
<section id="error-messages" class="hide"></section>
<section id="navigation">
<div class="form-group">
<button type="button" class="btn btn-primary hide" id="prev-btn">Previous</button>
<button type="button" class="btn btn-primary" id="next-btn">Next</button>
<button type="submit" class="btn btn-primary hide" id="submit-btn">Submit</button>
</div>
</section>
<section id="progress-indicator"></section>
</form>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.12.0/d3.min.js"
integrity="sha256-+9Mf3cAVmxxudDsr1XwXUeRZFtvdWVYdq5/vcgiYyNU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.9.1/d3-tip.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- include user scripts -->
<script src="js/form.js"></script>
<script src="js/data.js"></script>
<script src="js/charts.js"></script>
<script src="js/main.js"></script>
</body>
</html>