-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
179 lines (143 loc) · 9.57 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
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8
Copyright 2021 by Lotus.fm LLC>
<title>Lotus Chart: Cryptocurrency World Trends and Carbon Offset Guide</title>
<link rel="stylesheet" href="css/styles.css" />
<link rel="preload" href="files/intro/Slide0.png" as="image">
<link rel="preload" href="files/intro/Slide1.png" as="image">
<link rel="preload" href="files/intro/Slide2.png" as="image">
<link rel="preload" href="files/intro/Slide3.png" as="image">
</head>
<body>
<div id ="alternate"> This content is not yet available for mobile devices. Responsive and assistive versions coming soon.
<br><br><a style="color: #fff;" href="https://web.lotus.fm/mobile" target="self" onclick="openURL()">Proceed to mobile-friendly site</a>.
<script>
function openURL() {
window.open("https://web.lotus.fm/mobile", "_self");
}
</script></div>
<noscript><div id ="alternate" style="display: block;"> Javascript not enabled! Please enable Javascript on your browser to view interactive content.
<br><br><a href="https://web.lotus.fm" target="self">Proceed to main Lotus.fm site</a>.</div>
<div id="main" style="display: none;"></noscript>
<div id="main">
<div id="info"><h1>Introducing the Lotus Chart</h1></div>
<div id="intro"><img src="files/intro/Slide0.png" style="max-width:99%; text-align:center;"></div>
<div id="left">
<p style="text-align:left; margin-left:-10px;padding-top:8px; padding-left:0px; padding-bottom: 0; margin-bottom: 0;"><a href="https://web.lotus.fm" target="_blank"><img src="files/lotus_logo_glyph.png" style="width:64%;"alt="Lotus.fm LLC"></a></p>
<h3 style="margin-top:0; padding-top:16px; padding-bottom: 0px;">Growth Trends</h3>
<p style="text-align:left;">
<span style = "color:#ffca85; font-weight:bold; font-size:18px;"> > 5% </span>
<span style = "color:#e45e9d; font-weight:bold; font-size:18px;"> > 20%</span><br><br>
<a href="index_a.html" style="font-weight:bold; font-size: 15.5px; text-decoration:none;">24-Hour Price Change</a>
<br>
<a href="index_b.html">Volume Adjusted</a>
<br>
<br>
<a href="index_c.html">1-Hour Price Change</a>
<br>
<a href="index_d.html">Volume Adjusted</a>
<br>
<br>
<a href="index_e.html">7-Day Price Change</a>
<br>
<a href="index_f.html">Volume Adjusted</a>
</p>
<br>
<p style="text-align:left; padding-top:8px; padding-bottom:8px;">
The <strong>Lotus Chart</strong> is an experimental 3D user interface showing real-time trading data for <b>over 2000 cryptocurrencies</b> at one time.
<br>
<br>
We welcome your <a href="https://web.lotus.fm/contact/">feedback</a>.</p>
<br>
<p>
<a href="https://web.lotus.fm/frequently-asked-questions/" target="blank">FAQ</a> | <a href="https://www.surveymonkey.com/r/XB5MWM5" target="blank">Take Survey</a>
</p>
</div>
<div id="nowplaying"><br><br><br><br></div>
<div id="right">
<!--<p style="text-align:right; margin-right: 15px;"><a href="">Refresh</a></p>-->
<div id="nav" style="text-align; center; padding:0px 0px 15px 0px; margin-right: 40px;">
<!--<button class="icon" id="about" style="background-image: url('files/icons/info_icon.png');" alt="About this Visualization" title="About this Visualization"></button>
<button class="icon" id="toggleControls" style="background-image: url('files/icons/minimize_icon.png');" alt="Show/Hide Controls" title="Show/Hide Controls"></button>
<button class="icon" id="reload" style="background-image: url('files/icons/refresh_icon.png'); margin-left:0px; margin-right:3px;" alt="Reload Chart" title="Reload Chart"></button>-->
<a href="index_a.html" style="vertical-align: super;">Skip Intro</a> <a href="" target="_self"><img style="vertical-align: sub;" src="files/icons/refresh_icon.png"></a>
</div>
<p style="text-align; center; padding-top:10px; margin-right: 10px; ">
<button id="myBtn" style="border: none; border-radius: 18px; background-color: #00A86B; padding:10px 12px; text-align: center; margin-right: 15px; font-weight: bold; font-size:16px; width: 100%;"><a class="carbon" href="https://shareasale.com/r.cfm?b=1701593&u=2893814&m=105790&urllink=&afftrack=" style="text-decoration:none; text-align: center;" target="blank">
Carbon Offsets</a></button>
</p>
<p style="text-align:left; padding-top:5px; margin-right: 15px;"><strong>Did you know that coin transactions vary widely in their carbon footprint?</strong>
<br>
<br>
<a href="https://lotus.fm">Lotus.fm</a> has partnered with <a href="https://shareasale.com/r.cfm?b=1701593&u=2893814&m=105790&urllink=&afftrack=">Wren</a> to help traders understand and offset the global impact of our sector.
</p>
<p style="text-align: right; padding-top:2px; padding-bottom:20px;">
<button id="myBtn1" style="background-color: transparent; padding:8px 28px; text-align: center; margin-right: 15px; font-weight: bold; font-size:16px;">Learn More</button>
</p>
<h3>Reading the Lotus Chart </h3>
<p style="text-align:left; margin-right: 15px; ">
Each chart link shows a different coin position. The links that are <b>tallest and closest to the center</b> show the coins with the highest market capitalizations.
<br>
<br>
Links that are shorter and in the outer rings show lower-value coins.
<br>
<br>
<b>Hover over a chart link to see coin info.</b> Click the link to open a new window with further details.
</p>
<!-- Trigger/Open The Modal -->
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<h2>Carbon Offsets for Cryptocurrency</h2>
<p>Every trader understands the concept of <em>limits</em>: while you may not know everything about the future price of an asset, you know you can enter into a transaction for <em>at least</em> or <em>at most</em> a set amount.</p>
<p>Similarly we don't know everything about the global impact of cryptocurrency on climate change. We know that Bitcoin miners may get <i>as much as 56 percent of their energy from renewable sources</i>, although other estimates place the percentage lower. But even with more than half of mining energy coming from renewabl energy, at 395.92 KwH <b>the carbon footprint of a single Bitcoin transaction equals 704 miles</b> driven by an average passenger car, or the <b>distance from New York City to Myrtle Beach.</b> And we know that the carbon cost of Ethereum will decrease when the network completes the shift to Proof of Stake, expected within the next year.</p>
<p><a href="https://shareasale.com/r.cfm?b=1701593&u=2893814&m=105790&urllink=&afftrack=" style="color:#222;" target="blank">Wren</a> is a U.S. public benefit corporation that allows individuals and businesses to purchase carbon offsets, which they use to underwrite numerous projects that work to trap atmosperic carbon and preserve forests. Want to make an impact today? We have provided three monthly "trader profiles" for your convenience:</p>
<p><b>Casual Trader.</b> 3 Bitcoin and 3 Ethereum transactions per month. <b>1 ton of CO₂ - $18</b></p>
<p><b>Frequent Trader.</b> 5 transactions each per month for BTC, ETH, DOGE, ADA, and LTC, BCH. <b>2 tons of CO₂ - $36</b></p>
<p><b>Professional Trader.</b> 101 - 200 coin transactions per month. <b>3 tons of CO₂ - $75</b></p>
<p style="padding-top: 10px; padding-bottom:12px;">
<button id="myBtn2" style="border: solid 2px; border-radius: 20px; background-color: transparent; padding:8px 28px; text-align: center; margin-right: 15px; font-weight: bold; font-size:16px; padding-top:10px;">
<a class="carbon" href="https://www.wren.co/offset-anything" style="text-decoration:none; text-align: center;" target="blank">
Purchase Offsets</a></button>
</p>
<p>When asked what you are offsetting, use the code <b>"LOTUS CRYPTO."</b> Copy and download this helpful <a href="https://docs.google.com/spreadsheets/d/198p2Nl35vJo0AhgtpKtiM3KviipWu2bcBO3KbE-yJoo/edit?usp=sharing" style="color:#222;" target="blank">spreadsheet</a> to view our data sources and work out your own calculations.</p>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn1");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</div>
<div id="footer"><div style="text-align: left; float:left; width:48%;"> Copyright 2024 Lotus.fm LLC</div><div style="text-align: right; float: left; width:48%;">Data Source: <a href="https://coinmarketcap.com/" target="blank">CoinMarketCap</a> | <a href="https://web.lotus.fm/privacy-policy/" target="blank">Privacy Policy</a> | <a href="https://app.lotus.fm/terms-of-use/" target="blank">Terms of Use</a> </div></div>
<script>
var coin_change_time = "24h";
var volume_adj = 0;
</script>
<script src="build/three.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/intro_lotus_renderer.js"></script>
</div>
</body>
</html>