mirror of
https://github.com/nathanp/crypto-price-widget.git
synced 2025-11-06 03:08:55 -05:00
121 lines
4.4 KiB
HTML
121 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Latest Crypto Prices</title>
|
|
<link href="css/app.css" rel="stylesheet">
|
|
<!--<link href="css/animate.css" rel="stylesheet">-->
|
|
<!--<link href="https://fonts.googleapis.com/css?family=Heebo:100,400" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">-->
|
|
</head>
|
|
|
|
<body>
|
|
<header style="-webkit-app-region: drag" class="titlebar">
|
|
<div class="controls">
|
|
<button id="min-btn"></button>
|
|
<button id="close-btn"></button>
|
|
</div><!-- .controls -->
|
|
<div class="tabs">
|
|
<button id="main-btn" href="#main"><img src="images/icons8-Home-64.png"></button>
|
|
<button id="portfolio-btn" href="#portfolio"><img src="images/icons8-Rebalance Portfolio-100.png"></button>
|
|
<button id="settings-btn" href="#settings"><img src="images/icons8-Settings.png"></button>
|
|
</div><!-- .tabs -->
|
|
</header>
|
|
|
|
<div id="main" class="panel active">
|
|
<ul id="prices" class="coin-list">
|
|
</ul>
|
|
</div><!-- #main -->
|
|
|
|
<div id="settings" class="panel">
|
|
<h3>Choose Your Coins</h3>
|
|
|
|
<div id="coinsearch">
|
|
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Type here to filter list">
|
|
<button type="button" id="saveCoins">Save</button>
|
|
<ul id="coinlist">
|
|
</ul>
|
|
</div><!-- #coinsearch -->
|
|
|
|
<h3>Choose Your Base Currency</h3>
|
|
<label class="custom-select">
|
|
<select id="base" onchange="setBase()">
|
|
<option value="BTC">BTC</option>
|
|
<option value="USD">USD</option>
|
|
<!-- 20 most traded currencies - https://en.wikipedia.org/wiki/Template:Most_traded_currencies -->
|
|
<option value="AUD">AUD</option>
|
|
<option value="BRL">BRL</option>
|
|
<option value="CAD">CAD</option>
|
|
<option value="CNY">CNY</option>
|
|
<option value="EUR">EUR</option>
|
|
<option value="GBP">GBP</option>
|
|
<option value="HKD">HKD</option>
|
|
<option value="INR">INR</option>
|
|
<option value="JPY">JPY</option>
|
|
<option value="KRW">KRW</option>
|
|
<option value="MXN">MXN</option>
|
|
<option value="NOK">NOK</option>
|
|
<option value="NZD">NZD</option>
|
|
<option value="RUB">RUB</option>
|
|
<option value="SEK">SEK</option>
|
|
<option value="SGD">SGD</option>
|
|
<option value="TRY">TRY</option>
|
|
<option value="ZAR">ZAR</option>
|
|
</select>
|
|
</label>
|
|
|
|
<div class="checkbox-wrapper">
|
|
<input id="pin-to-top" class="checkbox-styled" type="checkbox" name="pin-to-top">
|
|
<label class="checkbox-styled-label">
|
|
Window always on top?
|
|
<div></div>
|
|
</label>
|
|
</div>
|
|
|
|
|
|
<h3>Tip Jar</h3>
|
|
<ul id="tips">
|
|
<li>BTC: 17iENfaJkEpxGXW7mgdFh9hGMZV65R2zVL</li>
|
|
<li>ETH: 0x68b99868700b33A248de4A62a038a9e3b03DCA21</li>
|
|
<li>LTC: La8eCVjzLq8zrJV3LgyU6WtnyQnjs76LFY</li>
|
|
<li>DOGE: DFHBdwUbcvGezfgHHbWmH8eLWjAjUhFSZ2</li>
|
|
</ul>
|
|
|
|
<div class="creds">
|
|
<div>Icons made by <a href="https://www.flaticon.com/authors/madebyoliver" title="Madebyoliver">Madebyoliver</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>
|
|
</div>
|
|
</div><!-- #settings -->
|
|
|
|
<div id="portfolio" class="panel">
|
|
<div class="chart">
|
|
|
|
</div>
|
|
|
|
<ul id="portfolio-list" class="coin-list">
|
|
|
|
</ul>
|
|
|
|
<button type="button" id="saveQuantities">Save</button>
|
|
|
|
<div id="portfolio-total-value">Total Value: <span class="value"></span></div>
|
|
|
|
<div class="chart-container" style="position: relative; height:40vh; width:94vw">
|
|
<canvas id="portfolioChart" width="360" height="360"></canvas>
|
|
</div>
|
|
|
|
<!-- show what % each coin is of portfolio -->
|
|
|
|
<!-- Enter avg. purchase price for each coin -->
|
|
<!-- See % gain/loss -->
|
|
</div><!-- #portfolio -->
|
|
|
|
</body>
|
|
|
|
<script>
|
|
// You can also require other files to run in this process
|
|
require('./renderer.js')
|
|
</script>
|
|
<script src="js/app_common.js"></script>
|
|
<script src="js/html.sortable.min.js"></script>
|
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
|
|
</html> |