forked from rdegges/cryptocompare
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
77 lines (72 loc) · 3.29 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CryptoCompare</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://bootswatch.com/simplex/bootstrap.min.css">
<link rel="stylesheet" href="/static/css/style.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="container">
<h1>Crypto Compare</h1>
<div class="row">
<div class="jumbotron col-xs-offset-2 col-xs-8">
<p>
This website indexes the top 10 cryptocurrencies by market cap (how
much the sum of all coins is collectively worth), and gives you an easy
way to compare cryptocurrency performance and rank over the last week.
</p>
</div>
</div>
<div id="app">
<table class="table table-hover">
<thead>
<tr>
<td>Rank</td>
<td>Name</td>
<td>Symbol</td>
<td>Price (USD)</td>
<td>1H</td>
<td>1D</td>
<td>1W</td>
<td>Market Cap (USD)</td>
</thead>
<tbody>
<tr v-cloak v-for="coin in coins">
<td>{{ coin.rank }}</td>
<td><img v-bind:src="getCoinImage(coin.symbol)"> {{ coin.name }}</td>
<td>{{ coin.symbol }}</td>
<td>{{ coin.price_usd | currency }}</td>
<td v-bind:style="getColor(coin.percent_change_1h)">
<span v-if="coin.percent_change_1h > 0">+</span>{{ coin.percent_change_1h }}%
</td>
<td v-bind:style="getColor(coin.percent_change_24h)">
<span v-if="coin.percent_change_24h > 0">+</span>{{ coin.percent_change_24h }}%
</td>
<td v-bind:style="getColor(coin.percent_change_7d)">
<span v-if="coin.percent_change_7d > 0">+</span>{{ coin.percent_change_7d }}%
</td>
<td>{{ coin.market_cap_usd | currency }}</td>
</tr>
</tbody>
</table>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://unpkg.com/vue"></script>
<script src="/static/js/vue2-filters.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="/static/js/app.js"></script>
</body>
</html>