-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathasset_allocation.html
140 lines (121 loc) · 5.84 KB
/
asset_allocation.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="./assets/favicon.ico">
<title>Max Kaplan</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Custom CSS -->
<link href="stylesheet.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-96544641-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<!-- NAVBAR
================================================== -->
<body>
<div class="navbar-wrapper">
<nav class="navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="./index.html">Max Kaplan</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="./index.html">Home</a></li>
<li><a href="./about.html">About</a></li>
</ul>
</div>
</div>
</nav>
</div>
<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->
<div class="container marketing">
<div class="row">
<div class="col-md-4 col-md-offset-2">
<div class="col-md-10">
<h2 class="featurette-heading">Asset Allocation Simulation</h2>
<p class="justify">
This tool allows you to compare how different asset allocations
would have done over time. For now, the options of the tool are
stocks, represented by the S&P 500 on January 1st of each year,
and bonds, represented by the average yield on 10-Year Treasuries
for a given year. Neither is a perfect metric, but they're both
decent proxies.
</p>
</div>
</div>
<div class="col-md-5" style="padding-top: 25px">
<div style="border: 2px solid grey; padding: 10px">
<h3 class="center" style="margin-top: 0px">Settings</h3>
<div class="center">
<input type="checkbox" id="withDividends" checked>
<label for="withDividends">Include Dividends</label>
</div>
<h4 class="aa-input-label">Set starting amount ($)</h4>
<input type="text" placeholder="1000" id="startingAmount"/>
<button id="startingAmountButton">Set Starting Amount</button>
<h4 class="aa-input-label">Set amount to add each year ($)</h4>
<input type="text" placeholder="100" id="addAmount"/>
<button id="addAmountButton">Set Add Amount</button>
<h4 class="aa-input-label">Set date range (YYYY)</h4>
<input type="text" placeholder="1963" id="startDate"/>
<input type="text" placeholder="2018" id="endDate"/>
<button id="dateButton">Set Dates</button>
</div>
</div>
</div>
<br></br>
<div class="center">
<h4>Add New Line (%)</h4>
<input type="text" placeholder="70" id="percentStocks"/>
<button id="addLine">Add Line</button>
<button id="clear">Clear All Data</button>
</div>
<div class="col-md-10 col-md-offset-1">
<canvas id="myChart" style="padding-top: 20px;"></canvas>
</div>
</div>
<br></br>
<br></br>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="../../assets/js/vendor/holder.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script src="scripts/asset_allocation.js"></script>
</body>
</html>