-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
138 lines (132 loc) · 7.26 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
<!DOCTYPE html>
<html>
<head>
<title>Trending Crypto</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" href="https://raw.githubusercontent.com/twitter/twemoji/master/assets/72x72/1f441-200d-1f5e8.png">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-deep-purple.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="/src/app.js" type="module"></script>
</head>
<body class="w3-theme-dark">
<!-- Navigation -->
<div class="w3-bar w3-black">
<a class="w3-bar-item w3-mobile">Trending Crypto</a>
</div>
<!-- Header -->
<header class="w3-container w3-padding-large" id="header">
<div class="w3-center">
<h4>Active Cryptocurrencies</h4>
<h2></h2>
<h1 id="active-cryptocurrencies" class="w3-xxxlarge"><i class="fa fa-refresh fa-spin"></i></h1>
</div>
</header>
<!-- Trending Coins -->
<div class="w3-row-padding-32">
<div class="w3-container">
<div class="w3-center">
<h2>Trending</h2>
<p w3-class="w3-large">Top-7 trending coins on CoinGecko as searched by users in the last 24 hours
(Ordered by most popular first)</p>
</div>
<div class="w3-responsive w3-card-4 w3-round">
<!-- <table class="w3-table w3-black w3-centered w3-hoverable"> -->
<table class="w3-table w3-black w3-hoverable">
<thead>
<tr class="w3-theme">
<th>Coin</th>
<th>Symbol</th>
<th>Price BTC</th>
</tr>
</thead>
<tbody>
<tr class="trending-row w3-hover-light-gray">
<td><i class="fa fa-refresh fa-spin"></i></td>
<td><i class="fa fa-refresh fa-spin"></i></td>
<td><i class="fa fa-refresh fa-spin"></i></td>
</tr>
<tr class="trending-row w3-hover-light-gray">
<td><i class="fa fa-refresh fa-spin"></i></td>
<td><i class="fa fa-refresh fa-spin"></i></td>
<td><i class="fa fa-refresh fa-spin"></i></td>
</tr>
<tr class="trending-row w3-hover-light-gray">
<td><i class="fa fa-refresh fa-spin"></i></td>
<td><i class="fa fa-refresh fa-spin"></i></td>
<td><i class="fa fa-refresh fa-spin"></i></td>
</tr>
<tr class="trending-row w3-hover-light-gray">
<td><i class="fa fa-refresh fa-spin"></i></td>
<td><i class="fa fa-refresh fa-spin"></i></td>
<td><i class="fa fa-refresh fa-spin"></i></td>
</tr>
<tr class="trending-row w3-hover-light-gray">
<td><i class="fa fa-refresh fa-spin"></i></td>
<td><i class="fa fa-refresh fa-spin"></i></td>
<td><i class="fa fa-refresh fa-spin"></i></td>
</tr>
<tr class="trending-row w3-hover-light-gray">
<td><i class="fa fa-refresh fa-spin"></i></td>
<td><i class="fa fa-refresh fa-spin"></i></td>
<td><i class="fa fa-refresh fa-spin"></i></td>
</tr>
<tr class="trending-row w3-hover-light-gray">
<td><i class="fa fa-refresh fa-spin"></i></td>
<td><i class="fa fa-refresh fa-spin"></i></td>
<td><i class="fa fa-refresh fa-spin"></i></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="w3-padding-16"></div>
<!-- Footer -->
<footer class="w3-container w3-black w3-padding-16">
<h3>Trending Crypto</h3>
<p>Powered by <a href="https://www.coingecko.com/en/api/documentation" target="_blank">CoinGecko API</a></p>
<div style="position:relative;bottom:55px;" class="w3-tooltip w3-right"></div>
<p>View the source code on <a href="https://github.com/harecs/TrendingCrypto"
class="w3-btn w3-light-gray w3-round-xxlarge w3-padding-small w3-hover-theme" target="_blank"><i
class="fa fa-github"></i> GitHub</a></p>
<hr>
<div id="disclaimer">
<button id="disclaimer-button"
class="w3-btn w3-light-gray w3-round-xxlarge w3-padding-small w3-hover-theme">⚠️ IMPORTANT
DISCLAIMER:
(click to view)</button>
<div id="disclaimer-modal" class="w3-modal">
<div class="w3-modal-content">
<header class="w3-container w3-theme">
<span id="disclaimer-close-button"
class="w3-btn w3-hover-black w3-display-topright">×</span>
<h2>⚠️ IMPORTANT DISCLAIMER</h2>
</header>
<div class="w3-container w3-theme-dark">
<p>All content provided herein our website, hyperlinked sites, associated applications,
forums,
blogs, social media accounts and other platforms (“Site”) is for your general
information
only, procured from third party sources. We make no warranties of any kind in relation
to
our content, including but not limited to accuracy and updatedness. No part of the
content
that we provide constitutes financial advice, legal advice or any other form of advice
meant
for your specific reliance for any purpose. Any use or reliance on our content is solely
at
your own risk and discretion. You should conduct your own research, review, analyse and
verify our content before relying on them. Trading is a highly risky activity that can
lead
to major losses, please therefore consult your financial advisor before making any
decision.
No content on our Site is meant to be a solicitation or offer.</p>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>