forked from mutatrum/hodl.camp
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
143 lines (140 loc) · 8.15 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
<!DOCTYPE html>
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-149677150-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag("js", new Date());
gtag("config", "UA-149677150-1");
</script>
<meta charset="UTF-8" />
<title>hodl.camp</title>
<link rel="stylesheet" type="text/css" href="hodl.css">
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>WebFont.load({google: {families: ["Droid Sans Mono"]}});</script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.0.6/chroma.min.js"></script>
<script src="hodl.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, minimum-scale=0, user-scalable=yes">
<meta property="og:type" content="website" />
<meta property="og:url" content="https://hodl.camp/" />
<meta property="og:title" content="hodl.camp" />
<meta property="og:description" content="profitability of a bitcoin hodl between entry and exit date" />
<meta property="og:image" content="https://hodl.camp/hodl.png" />
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:domain" value="hodl.camp" />
<meta name="twitter:title" value="hodl.camp" />
<meta name="twitter:description" value="profitability of a bitcoin hodl between entry and exit date" />
<meta name="twitter:image" content="https://hodl.camp/hodl.png" />
<meta name="twitter:url" value="https://hodl.camp/" />
<meta name="lightning" content="lnurlp:[email protected]" />
</head>
<body onload="onLoad()" onkeydown="onKeyDown(event)">
<div id="background"></div>
<div id="wrapper">
<div id="border">
<div id="background-fill"></div>
</div>
<div id="labels">
<div id="crosshair">
<div class="index x-position grid" id="x-grid"></div>
<div class="index y-position grid" id="y-grid"></div>
<img class="index x-position dot" src="line.png"></img>
<img class="index y-position dot" src="line.png"></img>
<div class="index x-position label grid-label" id="x-label"></div>
<div class="index y-position label grid-label" id="y-label"></div>
<div class="index x-position label grid-label" id="x-price"></div>
<div class="index y-position label grid-label" id="y-price"></div>
<div class="cross" id="duration"></div>
<div class="cross" id="profit"></div>
<div class="cross" id="pinned"><i class="fa fa-thumb-tack"></i></div>
</div>
<div id="hodl-line"></div>
<div id="ticks"></div>
<div id="athl"></div>
</div>
<div id="index">
<div class="entry">10000000000%</div>
<div class="entry">1000000000%</div>
<div class="entry">100000000%</div>
<div class="entry">10000000%</div>
<div class="entry">1000000%</div>
<div class="entry">100000%</div>
<div class="entry">10000%</div>
<div class="entry">1000%</div>
<div class="entry">100%</div>
<div class="entry">10%</div>
<div class="entry">0%</div>
<div class="entry">-10%</div>
<div class="entry">-20%</div>
<div class="entry">-30%</div>
<div class="entry">-40%</div>
<div class="entry">-50%</div>
<div class="entry">-60%</div>
<div class="entry">-70%</div>
<div class="entry">-80%</div>
<div class="entry">-90%</div>
<div class="entry">-100%</div>
<div id="gradient">
<canvas id="colormap" width="25" height="401"></canvas>
<div id="marker"></div>
</div>
</div>
<div id="tip"></div>
<div id="about">
hodl.camp
<a href="#" onclick="return onHelpClick(event)"><i class="fa fa-question-circle"></i></a>
<a href="#" onclick="return onChangePaletteClick(event)" title="change color map"><i class="fa fa-low-vision"></i></a><span id="palette"></span><br>
<span id="asset"></span> entry/exit profitability<br>
<span class="dropdown">
<span id="pair" class="dashed"></span> <i class="fa fa-caret-down"></i>
<span class="dropdown-content dialog-border">
<a href="#" onclick="return onPairClick(event)">BTC/USD</a><br>
<a href="#" onclick="return onPairClick(event)">BTC/XAU</a><br>
<a href="#" onclick="return onPairClick(event)">XAU/USD</a>
</span>
</span>
<a href="#" onclick="return onZoomOutClick(event)"><i class="fa fa-search-minus"></i></a>
<a href="#" onclick="return onZoomInClick(event)"><i class="fa fa-search-plus"></i></a>
<span id="scale"></span>
</div>
<div class="dialog-border" id="help">
<div id="help-close"><a href="#" onclick="return onHelpClick(event)"><i class="fa fa-times-circle"></i></a></div>
Welcome to Hodl Camp.<br>
<br>
This is an interactive graph on the profitability of <span class="dashed" title="holding">hodling</span> bitcoin. Read the <a href="bitcoin.pdf" target="_blank">whitepaper</a> here.<br>
<br>
Time flows diagonally, from the upper left corner to the bottom right corner.<br>
It starts on <span class="start-date dashed" title="Bitcoin was not traded on exchanges before this date. Earlier price history is anecdotal, such as the famous 10000 bitcoin pizzas."></span> and ends on <span class="updated-date dashed" title="Price data is updated daily."></span>.<br>
<br>
By moving the mouse or tapping the heat map, you will traverse all historical entry and exit dates. Pin the marker by clicking and move around with <strong>WASD</strong> keys.<br>
<br>
Moving vertically changes the entry date. Up is earlier, down is later.<br>
Moving horizontally changes the exit date. Left is earlier, right is later.<br>
<br>
Where the lines cross, the color shows the profitability, <span class="green">green</span> for positive and <span class="red">red</span> for negative.<br>
<br>
The <span class="green">green</span> scale is log<sub>10</sub>, the <span class="red">red</span> scale is linear.<br>
<br>
One pixel is one day. Zoom in (<a href="#" onclick="return onZoomInClick(event)"><i class="fa fa-search-plus"></i></a>) to see more detail. Zoom out (<a href="#" onclick="return onZoomOutClick(event)"><i class="fa fa-search-minus"></i></a>) to see the bigger picture.<br>
Drag or scroll to move around.<br>
<br>
Next to bitcoin denominated in U.S. dollar, it's also possible to plot the price of bitcoin denominated in <span class="dashed" title="One troy ounce gold equals 31.1034768 gram or 1.09714286 ounce">troy ounces gold</span> (XAU). This eliminates the influence of price fluctuations of U.S. dollar and instead uses a hard money: gold.</br>
<br>
Change the color map (<a href="#" onclick="return onChangePaletteClick(event)"><i class="fa fa-low-vision"></i></a><span id="palette"></span>) if <span class="green">green</span>/<span class="red">red</span> doesn't work for you.<br>
<br>
price data: <a href="https://coinmetrics.io/charts/#assets=btc" target="_blank">coin metrics <i class="fas fa-external-link-alt"></i></a> (bitcoin) and <a href="https://www.quandl.com/data/WGC/GOLD_DAILY_USD-Gold-Prices-Daily-Currency-USD" target="_blank">Quandl <i class="fas fa-external-link-alt"></i></a> (gold)<br>
color maps: <a href="http://colorbrewer2.org/" target="_blank">color brewer <i class="fas fa-external-link-alt"></i></i></a><br>
chroma.js: <a href="https://vis4.net/chromajs/" target="_blank">chroma.js <i class="fas fa-external-link-alt"></i></a><br>
contact:
<a href="https://bitcoinhackers.org/@mutatrum" target="_blank" rel="me"><i class="fab fa-mastodon"></i></a>
<a href="http://twitter.com/mutatrum" target="_blank"><i class="fab fa-twitter"></i></a>
<a href="mailto:[email protected]" target="_blank"><i class="fa fa-envelope"></i></a>
<a href="https://github.com/mutatrum/hodl.camp" target="_blank"><i class="fab fa-github"></i></a>
<a href="https://tippin.me/@mutatrum" target="_blank"><i class="fa fa-bolt"></i></a>
</div>
</div>
</body>
</html>