-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathindex.html
397 lines (358 loc) · 20.8 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
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
<!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>Mercury Finance</title>
<link rel="stylesheet" href="./bulma.min.css">
<link rel="stylesheet" href="./style.css">
<!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/solid.css" integrity="sha384-VGP9aw4WtGH/uPAOseYxZ+Vz/vaTb1ehm1bwx92Fm8dTrE+3boLfF1SpAtB1z7HW" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/fontawesome.css" integrity="sha384-1rquJLNOM3ijoueaaeS5m+McXPJCGdr5HcA03/VHXxcp2kX2sUrQDmFc3jR5i/C7" crossorigin="anonymous"> -->
</head>
<body>
<!-- <div class="modal is-active">
<div class="modal-background"></div>
<div class="modal-content">
<div class="log box">
<div class="columns">
<div class="column is-10 is-offset-1">
<div>
<div class="field form-item">
<label for="" class="label">Username:</label>
<input type="text" class="input"/>
</div>
</div>
<div>
<div class="field form-item">
<label for="" class="label">Password:</label>
<input type="password" class="input"/>
</div>
</div>
<div class="field form-item">
<div class="button is-success is-fullwidth">
Login
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-close"></div>
</div> -->
<!-- modal -->
<div class="navbar navy">
<div class="navbar-brand">
<div class="level">
<div class="level-item"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 512 512">
<g>
</g>
<path d="M409.241 34.038h-306.442c-37.98 0-68.741 30.771-68.741 68.721v306.462c0 37.959 30.761 68.741 68.741 68.741h306.442c37.929 0 68.7-30.781 68.7-68.741v-306.462c0-37.95-30.771-68.721-68.7-68.721zM270.101 370.903v38.676h-30.781v-36.423c-23.685-0.717-47.35-7.516-60.846-16.517l10.148-35.277c14.613 8.622 35.645 16.517 58.563 16.517 23.685 0 39.803-11.684 39.803-29.696 0-16.855-13.118-27.76-40.919-37.929-39.434-14.254-64.973-32.276-64.973-67.185 0-32.327 22.507-57.088 60.447-63.846v-36.834h30.812v34.939c23.654 0.758 39.824 6.4 51.845 12.391l-10.168 34.54c-9.022-4.117-25.529-12.718-51.077-12.718-26.245 0-35.666 13.486-35.666 26.245 0 15.381 13.517 24.034 45.476 36.803 42.046 15.79 60.815 36.055 60.815 69.468-0.010 31.928-22.19 60.078-63.478 66.846z"
fill="#ffffff" />
</svg>
<span class="is-size-4 has-text-white">
tocks
</span>
</div>
</div>
</div>
<div class="navbar-menu ">
<div class="navbar-end">
<div class="navbar-item field is-grouped">
<p class="control">
<div class=" button is-primary is-inverted is-rounded">Search </div>
</p>
<p class="control">
<div class=" button is-success is-inverted is-rounded">Login</div>
</p>
<p class="control">
<div class=" button is-primary is-inverted is-rounded">Register</div>
</p>
</div>
</div>
</div>
</div> <!-- navbar -->
<!-- test -->
<!-- LANDING PAGE
LLLLLLLLLLL AAA NNNNNNNN NNNNNNNN DDDDDDDDDDDDD
L:::::::::L A:::A N:::::::N N::::::N D::::::::::::DDD
L:::::::::L A:::::A N::::::::N N::::::N D:::::::::::::::DD
LL:::::::LL A:::::::A N:::::::::N N::::::N DDD:::::DDDDD:::::D
L:::::L A:::::::::A N::::::::::N N::::::N D:::::D D:::::D
L:::::L A:::::A:::::A N:::::::::::N N::::::N D:::::D D:::::D
L:::::L A:::::A A:::::A N:::::::N::::N N::::::N D:::::D D:::::D
L:::::L A:::::A A:::::A N::::::N N::::N N::::::N D:::::D D:::::D
L:::::L A:::::A A:::::A N::::::N N::::N:::::::N D:::::D D:::::D
L:::::L A:::::AAAAAAAAA:::::A N::::::N N:::::::::::N D:::::D D:::::D
L:::::L A:::::::::::::::::::::A N::::::N N::::::::::N D:::::D D:::::D
L:::::L LLLLLL A:::::AAAAAAAAAAAAA:::::A N::::::N N:::::::::N D:::::D D:::::D
LL:::::::LLLLLLLLL:::::L A:::::A A:::::A N::::::N N::::::::N DDD:::::DDDDD:::::D
L::::::::::::::::::::::L A:::::A A:::::A N::::::N N:::::::N D:::::::::::::::DD
L::::::::::::::::::::::L A:::::A A:::::A N::::::N N::::::N D::::::::::::DDD
LLLLLLLLLLLLLLLLLLLLLLLL AAAAAAA AAAAAAA NNNNNNNN NNNNNNN DDDDDDDDDDDDD
!-->
<div class="hero is-primary is-bold is-medium">
<div class="hero-body">
<div class="container has-text-centered">
<div class="title">
Capitalism is awesome!
</div>
<div class="subtitle">
Invest money into the economy
</div>
</div>
</div>
</div>
<div class="section">
<div class="container box">
<div class="title has-text-centered">
Ad, What's the stock market ?
</div>
<div>
Stock are a piece of paper (now electronic) that say you own a piece of a company. Usually you will buy the
stock off another person who has owned it for a while.
This affects you because you are rooting for the well being of the company. You can then vote for their
management and have a (very limited) say in how it is run.
If the company makes money and grows two things can occur a) the piece you own grows bigger and is worth more,
or b) the company may decide to give you a small portion of the earnings (called dividends). If the company
grows you may decide to sell your stock for more money in the future.
I see a lot of answers saying the price depends on the amount of money the company earns. In truth there are
many factors. Many people rely on how much the company earns to price the entire company. Other people buy or
sell simply because the stock is popular or some news came out. Some people invest just because. The actual
price rises or falls because there is a difference between the number of people buying/selling and the price
they want to pay.
</div>
</div>
</div>
<div class="section">
<div class="container">
<div class="tile is-ancestor">
<div class="tile is-parent">
<div class="tile is-child notification is-primary">
<div class="title">
But why?
</div>
<div>
As with so many other things, stock makes perfect sense if you look at a little history. Let's go back to
the 1600's. England is flexing some serious naval muscle. The Spanish and Portuguese have holdings in the
New World. France is looking at Louisiana and seeing dollar signs. It is an age of exploration, and there
is a lot of the globe that is still a mystery (at least to Europeans). Europeans are getting a taste for
foreign delights and exotic treasures. And especially new foods and spices. In fact, there is a lot of
money to be made by buying, building or renting a small armada of merchant ships and sailing to India or
the Far East, buying all of the rich spices and fabrics your ships can hold, and then bringing all that
delicious goodness back to the nascent foodies and dressmakers in Europe and selling it at a huge
mark-up.
If such a venture goes well, the profits can be vast. But mounting such a voyage is expensive. These are
big ships. They can be 50 or 100 feet long or more, and very tall. They are capable of sailing for weeks
or months, and they require a highly specialized crew, and lots of food and supplies.
Additionally, there are a lot of ways that things can go wrong. Ships sink, winds fail, cargo spoils,
crews revolt, buyers get swindled, bugs and rats infest, pirates pillage, water ruins, and storms
destroy. A successful voyage can make a fortune. But an unsuccessful voyage can ruin a wealthy family.
So, with the English reaping big rewards from their expeditions to India, the Dutch decide that it is
time for them to get in on some Asian trade. Typically back then a few rich people would get together,
and invest together on a voyage to India / Asia. They would pool their resources, start a company, buy /
rent / build / bankroll some ships, and cross their fingers. Then upon completion of the voyage, they
would liquidate the company into either greater wealth or bankruptcy.
But the Dutch decide to do things differently. They charter a single company -- the Dutch East India
Company -- and give it a 21 year monopoly to go make money and colonize in Asia. Nobody else will be
given a Dutch charter. But, rather than just limit the company to a couple of tycoons, they cut the
company up into little pieces (or "shares"), and allow anyone who can afford it to buy stock (a small
ownership stake in the company). That way, nobody has to bear the entire expense of the journey alone,
nor the catastrophe of a possible failure. And if it is successful, then everyone gets rich together.
When the ships come back, the merchandise will be sold, and some of the money will be given to the
investors (i.e. they will be given a dividend), and the rest will go into building and supplying more
ships to go back and make more money.
Additionally, they reasoned, those shares should be transferable. If somebody decides to sell their
"share" of the company, let 'em. That way, if the company seems to be doing well, then the investors can
sell their shares at a profit. Or, if the company is doing poorly, then they can sell their shares to
others at a loss, but still get something out of it. So they set up the Amsterdam Stock Exchange to
handle these and other transactions.
And: BAM. The multi-national, joint-stock company was born.
</div>
</div>
</div>
<div class="tile is-parent is-4 is-vertical">
<div class="tile is-child ">
<div class="box">
<div class="image is-16by9">
<img src="./boat.jpeg" alt="Dutch boat" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section">
<div class="container has-text-centered">
<div class="title">
Our Movie Recommendations
</div>
<div class="subtitle">
Great movies with all-star casts
</div>
</div>
</div>
<div class="section has-background-primary">
<div class="tile is-ancestor">
<div class="tile is-parent has-text-centered ">
<div class="tile is-child is-2"></div>
<div class="tile is-child is-3">
<div class="box has-background-light">
<div class="image-is-3by4">
<img src="./wolf.jpeg" alt="Wolf of Wall Street poster">
</div>
<div class="is-size-4 has-text-grey-dark">
The Wolf of Wall Street
</div>
<div class="level">
<div class="level-item">
<div class="buttons has-addons"><span class="button is-primary is-rounded"><a href="https://youtu.be/iszwuX1AK6A"
class="has-text-white">Trailer</a></span><span class="button is-primary is-rounded is-outlined"><a
href="https://www.imdb.com/title/tt0993846/" class="has-text-primary">IMDb</a></span></div>
</div>
</div>
</div>
</div>
<div class="tile is-child is-2"></div>
<div class="tile is-child is-3">
<div class="box has-background-light">
<div class="image-is-3by4">
<img src="./short.jpg" alt="The Big Short">
</div>
<div class="is-size-4 has-text-grey-darker">
The Big Short
</div>
<div class="level">
<div class="level-item">
<div class="buttons has-addons"><span class="button is-primary is-rounded"><a href="https://youtu.be/vgqG3ITMv1Q"
class="has-text-white">Trailer</a></span><span class="button is-primary is-rounded is-outlined "><a
href="https://www.imdb.com/title/tt1596363/" class="has-text-primary">IMDb</a></span></div>
</div>
</div>
</div>
</div>
<div class="tile is-child is-2"></div>
</div>
</div>
</div>
<!--
▄▄▄▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄▄▄▄▄
▐░░░░░░░░░░▌ ▐░░░░░░░░░░░▌ ▐░░░░░░░░░░░▌
▐░█▀▀▀▀▀▀▀█░▌ ▀▀▀▀█░█▀▀▀▀ ▐░█▀▀▀▀▀▀▀█░▌
▐░▌ ▐░▌ ▐░▌ ▐░▌ ▐░▌
▐░█▄▄▄▄▄▄▄█░▌ ▐░▌ ▐░▌ ▐░▌
▐░░░░░░░░░░▌ ▐░▌ ▐░▌ ▐░▌
▐░█▀▀▀▀▀▀▀█░▌ ▐░▌ ▐░▌ ▐░▌
▐░▌ ▐░▌ ▐░▌ ▐░▌ ▐░▌
▐░█▄▄▄▄▄▄▄█░▌ ▄▄▄▄█░█▄▄▄▄ ▐░█▄▄▄▄▄▄▄█░▌
▐░░░░░░░░░░▌ ▐░░░░░░░░░░░▌ ▐░░░░░░░░░░░▌
▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀
<div class="section">
<div class="container">
<div class="title">
Your stocks
</div>
<table class="table is-striped is-fullwidth">
<thead>
<th>Symbol</th>
<th>Company Name</th>
<th>Stocks</th>
<th>Price</th>
<th>Revenue</th>
<th>Decision</th>
</thead>
<tbody>
<tr>
<td>AAPL</td>
<td>Apple Inc.</td>
<td>100</td>
<td>281.88</td>
<td>+0.9</td>
<td>
<div class="button is-success is-small">Sell</div>
</td>
</tr>
<tr>
<td>AAPL</td>
<td>Apple Inc.</td>
<td>100</td>
<td>281.88</td>
<td>+0.9</td>
<td>
<div class="button is-success is-small">Sell</div>
</td>
</tr>
</tbody>
</table>
</div>
</div> OWNAGE PAGE -->
<!-- <div>
<div class="section">
<div class="level">
<div class="level-item">
<span class="is-size-1 has-text-weight-light">
Mr.Broker
</span>
</div>
</div>
</div>
<div class="section">
<div class="level">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input type="text" class="input is-primary is-medium is-rounded" />
<span class="icon is-medium is-right">
🔍
</span>
</div>
</div>
</div>
</div>
</div>
<div class="section">
<div class="level">
<div class="level-item has-text-centered">
<div>
<p class="heading">Name</p>
<p class="title">AAPL</p>
</div>
</div>
<div class="level-item has-text-centered">
<div>
<p class="heading">Company</p>
<p class="title">Apple Inc.</p>
</div>
</div>
<div class="level-item has-text-centered">
<div>
<p class="heading">Price</p>
<p class="title">218.24</p>
</div>
</div>
<div class="level-item has-text-centered">
<div>
<p class="heading">Status</p>
<p class="title">+0.83%</p>
</div>
</div>
</div>
</div>
</div> SEARCH PAGE
▄▄▄▄▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄▄▄▄▄ ▄ ▄
▐░░░░░░░░░░░▌ ▐░░░░░░░░░░░▌ ▐░░░░░░░░░░░▌ ▐░░░░░░░░░░░▌ ▐░░░░░░░░░░░▌ ▐░▌ ▐░▌
▐░█▀▀▀▀▀▀▀▀▀ ▐░█▀▀▀▀▀▀▀▀▀ ▐░█▀▀▀▀▀▀▀█░▌ ▐░█▀▀▀▀▀▀▀█░▌ ▐░█▀▀▀▀▀▀▀▀▀ ▐░▌ ▐░▌
▐░▌ ▐░▌ ▐░▌ ▐░▌ ▐░▌ ▐░▌ ▐░▌ ▐░▌ ▐░▌
▐░█▄▄▄▄▄▄▄▄▄ ▐░█▄▄▄▄▄▄▄▄▄ ▐░█▄▄▄▄▄▄▄█░▌ ▐░█▄▄▄▄▄▄▄█░▌ ▐░▌ ▐░█▄▄▄▄▄▄▄█░▌
▐░░░░░░░░░░░▌ ▐░░░░░░░░░░░▌ ▐░░░░░░░░░░░▌ ▐░░░░░░░░░░░▌ ▐░▌ ▐░░░░░░░░░░░▌
▀▀▀▀▀▀▀▀▀█░▌ ▐░█▀▀▀▀▀▀▀▀▀ ▐░█▀▀▀▀▀▀▀█░▌ ▐░█▀▀▀▀█░█▀▀ ▐░▌ ▐░█▀▀▀▀▀▀▀█░▌
▐░▌ ▐░▌ ▐░▌ ▐░▌ ▐░▌ ▐░▌ ▐░▌ ▐░▌ ▐░▌
▄▄▄▄▄▄▄▄▄█░▌ ▐░█▄▄▄▄▄▄▄▄▄ ▐░▌ ▐░▌ ▐░▌ ▐░▌ ▐░█▄▄▄▄▄▄▄▄▄ ▐░▌ ▐░▌
▐░░░░░░░░░░░▌ ▐░░░░░░░░░░░▌ ▐░▌ ▐░▌ ▐░▌ ▐░▌ ▐░░░░░░░░░░░▌ ▐░▌ ▐░▌
▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀ ▀ ▀ ▀ ▀ ▀▀▀▀▀▀▀▀▀▀▀ ▀ ▀
-->
</div>
</body>
</html>