-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
147 lines (146 loc) · 9.79 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>CryptoCurrency Tracker</title>
<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="style.css" type="text/css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Coin Count</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="" id="about" data-toggle="modal" data-target="#about-dialog">About</a></li>
<!-- <li><a href="" id="export-data" data-toggle="modal" data-target="#export-dialog">Import/Export</a></li> -->
<li><a href="" id="refresh-prices">Refresh Prices</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<form id="currency-form" method="post" action="" class="form-inline">
<div id="currency-list" class="input-group">
<select id="currency-select" name="currency-select" class="form-control"></select>
<span class="input-group-btn"><button id="add-currency" type="button" class="btn btn-primary">Add Currency</button></span>
</div>
<div class="table-responsive">
<table id="currency-table" class="table">
<thead>
<tr>
<th id="th-expand"></th>
<th id="th-name">Name</th>
<th id="th-symbol">Symbol</th>
<th id="th-price">Price</th>
<th id="th-balance">Balance</th>
<th id="th-value">Value</th>
<th id="th-cost">Cost</th>
<th id="th-net">Net</th>
<th id="th-date">Date</th>
<th id="th-actions"></th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="row" colspan="5" class="text-right">Total:</td>
<td id="value-total"><span class="number"></span></td>
<td id="cost-total"><span class="number"></span></td>
<td colspan="3" id="net-total"><span class="number"></span> (<span class="percent"></span>% gain)</td>
</tr>
</tfoot>
</table>
</div>
</form>
</div>
<div id="about-dialog" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="about-header">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="about-header">About Coin Count</h4>
</div>
<div class="modal-body">
<p>Coin Count is a Javascript/HTML application to help you keep track of your cryptocurrency transactions and what your wallets are worth. Coin Count pulls data about cryptocurrencies from <a href="https://coinmarketcap.com/" target="_blank">Coin Market Cap</a>, which updates prices every five minutes.</p>
<p>Coin Count saves your data in local <a href="https://en.wikipedia.org/wiki/Web_storage" target="_blank">web storage</a>. This means your data will be saved indefinitely, but is only available in the browser in which you saved it. It will be deleted if you clear your browser data.</p>
<p>If you want to run the application locally or from a flash drive, you can download the files from <a href="https://github.com/victoriaroan/coincount">GitLab</a>. Just open the .html file in a browser.</p>
</div>
</div>
</div>
</div><!-- /about-dialog -->
<div id="export-dialog" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="export-header">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="export-header">Import/Export</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-6">
<h5>Export</h5>
<p><strong>JSON</strong> - JSON export is used to save your application data outside of your browser and import it into another browser.</p>
<p><strong>CSV</strong> - Export to CSV if you want to open your data in a spreadsheet. Each transaction will be its own row.</p>
</div>
<div class="col-sm-6">
<h5>Import</h5>
<p>Import requires a JSON file exported from the application.</p>
<input type="file" name="json-import">
</div>
</div>
</div>
</div>
</div>
</div><!-- /export-dialog -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.8/handlebars.min.js" integrity="sha256-4d88O9e7pCb/y6LHNiCfPQAutcLvYzg+TdjCYR5bMr0=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/566cca0527.js"></script>
<script src="lib/decimal.min.js" type="text/javascript"></script>
<script id="currency-template" type="text/x-handlebars-template">
<tbody id="id-{{currency_id}}" class="currency">
<tr class="header">
<th class="expand"><a href="#" class="expand" title="Collapse {{currency_name}} Transactions" aria-expanded="true"><span class="fa fa-angle-down"></span></a></th>
<th class="name" data-title="Name">{{currency_name}}</th>
<th class="symbol" data-title="Symbol">{{currency_symbol}}</th>
<th class="price" data-title="Price"><span class="number"></span></th>
<th class="balance" data-title="Balance"></th>
<th class="value" data-title="Value"><span class="number"></span></th>
<th class="cost" data-title="Cost"><span class="number"></span></th>
<th class="net" data-title="Net"><span class="number"></span> (<span class="percent"></span>% gain)</th>
<th></th>
<th class="actions text-right">
<a href="#" role="button" class="btn btn-success btn-xs add-transaction" title="Add {{currency_name}} Transaction" data-id="{{currency_id}}"><span class="fa fa-plus"></span></a>
<a href="#" role="button" class="btn btn-danger btn-xs remove" title="Remove {{currency_name}}" data-id="{{currency_id}}"><span class="fa fa-times"></span></a>
</th>
</tr>
</tbody>
</script>
<script id="transaction-template" type="text/x-handlebars-template">
<tr id="id-{{currency_id}}-{{transaction_id}}" class="transaction">
<td></td>
<td class="t-name">Transaction <span class="t-id">{{transaction_id}}</span></td>
<td colspan="2"></td>
<td class="t-amount"><input type="number" value="" class="amount-input" data-id="{{currency_id}}"></td>
<td></td>
<td class="t-cost"><input type="number" value="" class="cost-input" data-id="{{currency_id}}"></td>
<td></td>
<td class="t-date"><input type="date" class="date-input" name="date-{{transaction_id}}"></td>
<td class="actions text-right">
<a href="#" role="button" class="btn btn-default btn-xs t-remove" title="Remove Transaction {{transaction_id}}" data-id="{{transaction_id}}"><span class="fa fa-times"></span></a>
</td>
</tr>
</script>
<script src="currency.js" type="text/javascript"></script>
</body>
</html>