-
Notifications
You must be signed in to change notification settings - Fork 28
/
index.php
202 lines (183 loc) · 8.5 KB
/
index.php
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="favicon.ico">
<title>Cryptocurrency Dashboard</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/custom.css" rel="stylesheet">
<!-- Open iconic icons -->
<link href="icons/open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet">
</head>
<body class="bg-dark">
<!-- Start of menu -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark bg-super-dark">
<a class="navbar-brand" href="#">Crypto Currency Dashboard</a>
<button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
</ul>
<form id="search-form" class="form-inline mt-2 mt-md-0">
<input id="search-term" class="form-control mr-sm-2 bg-dark text-muted" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-primary my-2 my-sm-0 cu-po" type="submit">Search</button>
</form>
</div>
</nav>
<!-- End of menu -->
<div class="container-fluid">
<div class="row">
<!-- Start of side nav coins menu -->
<nav class="col-md-2 d-none d-sm-block sidebar sidebar-left">
<ul id="coins-menu" class="nav nav-pills flex-column mb-5"></ul>
</nav>
<!-- End of side nav coins menu -->
<!-- Start of main content -->
<main class="col-md-8 m-sm-auto text-center px-0" role="main">
<!-- Start of title -->
<div class="col-lg-12 bg-gradient w-100 py-5 px-0">
<h2 id="coin-title"></h2>
</div>
<!-- End of title -->
<!-- Start of stats -->
<div class="card-deck m-3">
<div id="rank" class="card text-white bg-dark py-4 border-primary">
<div class="card-body">
<h5 class="card-title">Coin Rank</h5>
<h3><span class="oi oi-signal mb-3 mt-2"></span></h3>
<h5 class="card-text number-comma"></h5>
</div>
</div>
<div id="price-usd" class="card text-white bg-dark py-4 border-primary">
<div class="card-body">
<h5 class="card-title">Price</h5>
<h3><span class="oi oi-dollar mb-3 mt-2"></span></h3>
<h5 class="card-text number-comma"></h5>
</div>
</div>
<div id="symbol" class="card text-white bg-dark py-4 border-primary">
<div class="card-body">
<h5 class="card-title">Symbol</h5>
<h3><span class="oi oi-info mb-3 mt-2"></span></h3>
<h5 class="card-text number-comma"></h5>
</div>
</div>
</div>
<div class="card-deck m-3">
<div id="market-cap-usd" class="card text-white bg-dark py-4 border-primary">
<div class="card-body">
<h5 class="card-title">Market Cap</h5>
<h3><span class="oi oi-pie-chart mb-3 mt-2"></span></h3>
<h5 class="card-text number-comma"></h5>
</div>
</div>
<div id="24h-volume-usd" class="card text-white bg-dark py-4 border-primary">
<div class="card-body">
<h5 class="card-title">24 Hour Volume</h5>
<h3><span class="oi oi-clock mb-3 mt-2"></span></h3>
<h5 class="card-text number-comma"></h5>
</div>
</div>
<div id="last-updated" class="card text-white bg-dark py-4 border-primary">
<div class="card-body">
<h5 class="card-title">Last Updated</h5>
<h3><span class="oi oi-arrow-top mb-3 mt-2"></span></h3>
<h5 class="card-text"></h5>
</div>
</div>
</div>
<div class="card-deck m-3">
<div id="change-hour" class="card text-white bg-dark py-4 border-primary">
<div class="card-body">
<h5 class="card-title">Change (1 Hour)</h5>
<h3><span class="oi oi-arrow-top mb-3 mt-2"></span></h3>
<h5 class="card-text"></h5>
</div>
</div>
<div id="change-day" class="card text-white bg-dark py-4 border-primary">
<div class="card-body">
<h5 class="card-title">Change (1 Day)</h5>
<h3><span class="oi oi-arrow-top mb-3 mt-2"></span></h3>
<h5 class="card-text"></h5>
</div>
</div>
<div id="change-week" class="card text-white bg-dark py-4 border-primary">
<div class="card-body">
<h5 class="card-title">Change (1 Week)</h5>
<h3><span class="oi oi-arrow-top mb-3 mt-2"></span></h3>
<h5 class="card-text"></h5>
</div>
</div>
</div>
<!-- End of stats -->
<input id="current-coin" type="hidden" value="">
</main>
<!-- End of main content -->
<!-- Start of side nav tweets menu -->
<nav class="col-md-2 d-none d-sm-block sidebar sidebar-right">
<ul class="nav nav-pills nav-fill" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#tweets-popular-tab" role="tab">Popular Tweets</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tweets-recent-tab" role="tab">Recent Tweets</a>
</li>
</ul>
<!-- Start of tab panes -->
<div class="tab-content">
<!-- Start of popular tweets -->
<div class="tab-pane active" id="tweets-popular-tab" role="tabpanel"><div id="tweets-popular" class="mb-5 text-muted"></div></div>
<!-- End of popular tweets -->
<!-- Start of recent tweets -->
<div class="tab-pane" id="tweets-recent-tab" role="tabpanel"><div id="tweets-recent" class="mb-5 text-muted"></div></div>
<!-- End of recent tweets -->
</div>
<!-- End of tab panes -->
</nav>
<!-- End of side nav tweets menu -->
</div>
</div>
<!-- Start of footer -->
<ul class="nav justify-content-center fixed-bottom text-muted bg-super-dark">
<li class="nav-item">
<a class="nav-link footer-donate cu-po" data-coin-id="bitcoin" data-toggle="modal" data-target="#donateModal">Donate BTC</a>
</li>
<li class="nav-item">
<a class="nav-link footer-donate cu-po" data-coin-id="ethereum" data-toggle="modal" data-target="#donateModal">Donate ETH</a>
</li>
<li class="nav-item">
<a class="nav-link footer-donate cu-po" data-coin-id="litecoin" data-toggle="modal" data-target="#donateModal">Donate LTC</a>
</li>
</ul>
<!-- End of footer -->
<!-- Start of donate Modal -->
<div class="modal fade" id="donateModal" tabindex="-1" role="dialog" aria-labelledby="donateModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header justify-content-center text-center">
<h5 class="modal-title" id="donateModalLabel">Like my work? Send a small donation.</h5>
</div>
<div class="modal-body modal-body-donate justify-content-center text-center">
<img id="donate-qr" class="my-3" src="">
<div id="donate-address" class="mb-2"></div>
</div>
<div class="modal-footer justify-content-center text-center">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End of donate modal -->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/custom.js"></script>
<!-- Source code https://github.com/christ0ph3r/cryptocurrency-dashboard/ -->
</body>
</html>