VertiBar/examples/basic_example.html

167 lines
4.3 KiB
HTML

<html>
<head>
<title>Speed Dial</title>
<link rel="icon" href="https://pube.tk/favicon.ico" type="image/x-icon" />
<script>
/* Configuration */
var sortSubcategories = true; // Sort URLs alphabetically
var singleExpand = true; // Allow expanding one category at a time
var rounding = 8; // Cryptocurrency rounding to n-th digit
var cryptos = // List of cryptos (their IDs on CoinMarketCap) and respective values
{
'bitcoin' : 0.12345678,
'ethereum' : 0.12345678,
'monero' : 0.12345678,
};
var sites = // JSON tree structure of 'Group' : { 'Name' : 'URL' }
{
'Shopping' :
{
'eBay' : 'https://www.ebay.com/',
'Amazon' : 'https://www.amazon.com/',
},
'Search' :
{
'DuckDuckGo' : 'https://duckduckgo.com/',
'Qwant' : 'https://www.qwant.com/',
},
'Entertainment':
{
'asdf' : 'http://asdf.com/',
},
'Videos':
{
'HookTube' : 'http://hooktube.com',
}
};
</script>
<style>
body {
background-color: #151515;
color: #bbb;
font-family: Arial;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
}
a {
color: #BB7D38;
text-decoration: none;
display:block;
}
a:hover {
color: #FF8500;
}
.hidden {
display: none;
}
.navBlock {
display: inline-block;
vertical-align: middle;
}
.expandLink {
font-weight: bold;
}
.hidden > a {
color: #bbb;
}
#mainNav {
margin: auto;
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
display: none;
}
#cryptoTicker {
position: fixed;
bottom: 0;
right: 0;
display: none;
}
#cryptoTable td {
padding: 0px 15px;
text-align: center;
font-family: "Lucida Console", Monaco, monospace;
font-size: 0.6em;
}
</style>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script> <!-- Gets cached, can be replaced with Google hosted library -->
<script>
$(document).ready(function(){
// Subcategory sort
if(sortSubcategories)
{
jQuery.each(sites, function(group, values) {
unordered = this;
const ordered = {};
Object.keys(unordered).sort().forEach(function(key) {
ordered[key] = unordered[key];
});
sites[group] = ordered;
});
}
// Navigation menu
jQuery.each(sites, function(group, values) {
urlStr = "";
jQuery.each(values, function(name, url) {
urlStr += '<a href="'+url+'">'+name+'</a>';
});
if($('#mainNav').children().length) {
$('#mainNav').append(' :: ');
}
$('#mainNav').append('<div class="navBlock"><a href="#" class="expandLink">'+group+'</a><div class="hidden">'+urlStr+'</div></div>');
});
$("#mainNav").fadeIn();
// Subcategory URL expansion
$('.expandLink').bind('click', function () {
if(singleExpand && $(this).siblings().is(":hidden"))
$('.expandLink').siblings().slideUp(); // "Closes" all categories
$(this).siblings().slideToggle(200);
});
// Ticker table (Async)
var usdtotal = 0.0;
jQuery.each(cryptos, function(key, value) {
$.ajax({
url: "https://api.coinmarketcap.com/v1/ticker/"+key+"/",
async: false,
cache: true,
success: function(data) {
usdtotal += usdval = (value*parseFloat(data[0].price_usd));
$('#cryptoTable tr:last').after(
'<tr><td>'+
data[0].rank+
'</td><td><a href="https://coinmarketcap.com/currencies/'+key+'/">'+
data[0].symbol+
'</a></td><td>'+
value.toFixed(rounding)+
'</td><td>'+
parseFloat(data[0].price_usd).toFixed(2)+
'</td><td>'+
usdval.toFixed(2)+
'</tr></tr>');
}
});
});
$('#cryptoTable tr:last').after('<tr><td></td><td></td><td></td><td></td><td>'+usdtotal.toFixed(2)+'</td></tr>')
$("#cryptoTicker").fadeIn();
});
</script>
<meta name="Abhorrent_Anger" content="Speed Dail">
<meta http-equiv="Cache-control" content="public">
</head>
<body bgcolor="#151515">
<div id="cryptoTicker">
<table id="cryptoTable">
<tr><td>Rank</td><td>Ticker</td><td>Hold</td><td>USD</td><td>Hold USD</td></tr>
</table>
</div>
<div id="mainNav">
</div>
</body>
</html>