compound/index.html at master · edmondthui/compound · GitHub

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" />
    <link rel="icon" href="compound_favicon.png"/>
    <meta property="og:title" content="₵ompound" />
    <meta property="og:description" content="Compound is a vanilla javascript project that matches users with an index fund and generates a budget to maximize retirement savings." />
    <meta property="og:image" name="image" content="https://edmondhui.com/assets/images/compound_og_image.gif" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="./dist/main.css" />
    <title>₵ompound</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
</head>

<body>
  <div id="header">
    <a href = '/compound'>₵ompound</a>
    <div class = "social-buttons">
      <a href="https://www.linkedin.com/in/edmond-hui/" target="_blank">
        <img src="linked-in.png" alt="linkedin" class="social linkedin">
      </a>
      <a href="https://github.com/edmondthui" target="_blank">
          <img src="github.png" alt="github" class="social github">
      </a>
      <a href="https://angel.co/u/edmondthui" target="_blank">
        <img src="angellist.png" alt="angellist" class="social angellist">
      </a>
      <a href="https://edmondhui.com" target="_blank">
        <img src="portfolio.png" alt="portfolio" class="social portfolio">
      </a>
    </div>
  </div>

  <div class="parallax">
    <div class="welcome">
      <h1 class="welcome-title">Welcome to ₵ompound</h1>
      <p class="welcome-message">Did you know 56% of Americans have $5,000 or less in savings, and a third have $1,000 or less?</p>
      <button class="welcome-button">Learn how build wealth with compound interest</button>
    </div>
    <img src="desk.png" alt="Desk" id="desk">
    <img src="cash.png" alt="Cash" id="cash1">
    <img src="cash.png" alt="Cash" id="cash2">
    <img src="cash.png" alt="Cash" id="cash3">
    <img src="cash.png" alt="Cash" id="cash4">
    <img src="cash.png" alt="Cash" id="cash5">
    <img src="cash.png" alt="Cash" id="cash6">
    <img src="cash.png" alt="Cash" id="cash7">
  </div>

  <script type="text/javascript">
    let desk = document.getElementById("desk")
    window.addEventListener("scroll", ()=> {
      let value = window.scrollY;
      desk.style.top = value + "px";
    })
  </script>

<h1 class="explaination">Drag a combination of these choices to the highlighted area to get your personalized budget and be matched with a index fund.</h1>
  <div class="choices-container">
    <div>
      <h1>Age</h1>
      <div class="choices">
          <p class="draggable age" draggable="true">18-25</p>
          <p class="draggable age" draggable="true">26-30</p>
          <p class="draggable age" draggable="true">31-35</p>
          <p class="draggable age" draggable="true">36-40</p>
          <p class="draggable age" draggable="true">41-45</p>
          <p class="draggable age" draggable="true">45-50</p>
      </div>
    </div>

    <div>
      <h1>Risk Tolerance</h1>
      <div class="choices">
          <p class="draggable risk" draggable="true">Low</p>
          <p class="draggable risk" draggable="true">Medium</p>
          <p class="draggable risk" draggable="true">High</p>
          <p class="draggable risk" draggable="true">Extremely High</p>
      </div>
    </div>

    <div>
      <h1>Net Income</h1>
      <div class="choices">
          <p class="draggable income" draggable="true">$10000 - $20000</p>
          <p class="draggable income" draggable="true">$20000 - $40000</p>
          <p class="draggable income" draggable="true">$40000 - $60000</p>
          <p class="draggable income" draggable="true">$60000 - $80000</p>
          <p class="draggable income" draggable="true">$80000 - $100000</p>
          <p class="draggable income" draggable="true">$100000 - $150000</p>
          <p class="draggable income" draggable="true">$150000 - $200000</p>
          <p class="draggable income" draggable="true">$200000+</p>
      </div>
    </div>

    <div>
      <h1>Retirement Age</h1>
      <div class="choices">
        <p class="draggable retirement" draggable="true">50</p>
        <p class="draggable retirement" draggable="true">55</p>
        <p class="draggable retirement" draggable="true">60</p>
        <p class="draggable retirement" draggable="true">65</p>
        <p class="draggable retirement" draggable="true">70</p>
      </div>
    </div>

  </div>
  <div class="match-container">
    <button class="match">Match With Fund</button>
  </div>

  <div class="droppable-container">
      <div class="container age"></div>

      <div class="container risk"></div>

      <div class="container income"></div>

      <div class="container retirement"></div>
  </div>

  <div class="fund-container">
    <div class="fund-graph-info">
      <div id="fund-graph"></div>
      <div id="fund-info"></div>
    </div>

    <div class="compound-container">
      <div id="compound-interest-title"></div>
      <div id="compound-interest-graph"></div>
      <div class="budget-container">
        <div id="budget"></div>
      </div>
    </div>
  </div>

    <script src="./dist/main.js"></script>
</body>
</html>