|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<title>TOPISTO</title>
|
|
|
<meta charset="utf-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
|
|
|
|
|
|
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
|
|
|
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
|
|
|
<link href="https://fonts.googleapis.com/css?family=Bangers" rel="stylesheet" type="text/css">
|
|
|
|
|
|
<link href="css/topisto.css" rel="stylesheet" type="text/css">
|
|
|
<link href="css/fonts.css" rel="stylesheet" type="text/css">
|
|
|
|
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
|
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
|
|
|
|
|
|
<script src="js/console.js" defer></script>
|
|
|
<script src="js/lastblock.js" defer></script>
|
|
|
<script src="js/blockexplorer.js" defer></script>
|
|
|
|
|
|
<script src="js/simpleParallax.js"></script>
|
|
|
|
|
|
<script>
|
|
|
$(document).ready(function(){
|
|
|
|
|
|
setInterval(changeGargoyle,10000);
|
|
|
|
|
|
getMyAdressInfos();
|
|
|
|
|
|
setParallax();
|
|
|
|
|
|
$('#myNavbar').on('show.bs.collapse', function () {
|
|
|
$('#logo_topisto').css({'height' : '30px','width' : '30px'});
|
|
|
$('#titre_topisto').css({'font-size' : '30px'});
|
|
|
});
|
|
|
$('#myNavbar').on('hidden.bs.collapse', function () {
|
|
|
$('#logo_topisto').css({'height' : '72px','width' : '72px'});
|
|
|
$('#titre_topisto').css({'font-size' : '60px'});
|
|
|
});
|
|
|
|
|
|
// Add smooth scrolling to all links in navbar + footer link
|
|
|
$("footer a[href='#myPage']").on('click', function(event) {
|
|
|
// Make sure this.hash has a value before overriding default behavior
|
|
|
if (this.hash !== "") {
|
|
|
// Prevent default anchor click behavior
|
|
|
event.preventDefault();
|
|
|
|
|
|
// Store hash
|
|
|
var hash = this.hash;
|
|
|
|
|
|
// Using jQuery's animate() method to add smooth page scroll
|
|
|
// The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
|
|
|
$('html, body').animate({
|
|
|
scrollTop: $(hash).offset().top
|
|
|
}, 900, function(){
|
|
|
// Add hash (#) to URL when done scrolling (default click behavior)
|
|
|
window.location.hash = hash;
|
|
|
});
|
|
|
} // End if
|
|
|
});
|
|
|
|
|
|
$(window).scroll(function() {
|
|
|
$(".slideanim").each(function(){
|
|
|
var pos = $(this).offset().top;
|
|
|
var winTop = $(window).scrollTop();
|
|
|
if (pos < winTop + 600) {
|
|
|
$(this).addClass("slide");
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
});
|
|
|
|
|
|
|
|
|
/*
|
|
|
*
|
|
|
* Pré-charger les images
|
|
|
*
|
|
|
*/
|
|
|
var preloadImages = function (imgs, callback) {
|
|
|
var img;
|
|
|
var remaining = 26;
|
|
|
for (var i = 0; i < 26; i++) {
|
|
|
img = new Image;
|
|
|
img.onload = function () {
|
|
|
--remaining;
|
|
|
if (remaining <= 0) {
|
|
|
callback();
|
|
|
}
|
|
|
if (i == 0)
|
|
|
$("#gargoyle").attr("src", this.src)
|
|
|
};
|
|
|
d = new Date();
|
|
|
img.src = "images/logo.php?rank="+i+"&ts="+d.getTime();
|
|
|
imgs.push(img);
|
|
|
}
|
|
|
};
|
|
|
|
|
|
/*
|
|
|
* Faire varier l'image de la gargouille
|
|
|
*
|
|
|
*/
|
|
|
var gargoyles = [];
|
|
|
function changeGargoyle()
|
|
|
{
|
|
|
if (gargoyles.length == 0)
|
|
|
{
|
|
|
preloadImages(gargoyles, function(){
|
|
|
topistoConsole.log("All Gargoyles are loaded");
|
|
|
});
|
|
|
} else {
|
|
|
r = Math.floor(Math.random() * gargoyles.length);
|
|
|
$("#gargoyle").attr("src", gargoyles[r].src);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* Récupéer les taux de change actuels
|
|
|
* https://blockchain.info/ticker?cors=true
|
|
|
*
|
|
|
* Récupéer la balance de mon adresse
|
|
|
* https://blockchain.info/q/addressbalance/15V7XfBX2Xn5uKpK3VuVngDg44TSKLtTSh?cors=true
|
|
|
*
|
|
|
* Calculer et afficher la balance en EUR et USD
|
|
|
*
|
|
|
*/
|
|
|
function getMyAdressInfos()
|
|
|
{
|
|
|
var balance_url = 'https://blockchain.info/q/addressbalance/15V7XfBX2Xn5uKpK3VuVngDg44TSKLtTSh?cors=true';
|
|
|
$.get( balance_url, function( data ) {
|
|
|
var balance = data/100000000;
|
|
|
var btc_change = 'balance : ' + balance + ' ₿';
|
|
|
$.getJSON( 'https://blockchain.info/ticker?cors=true', function( data ) {
|
|
|
btc_change += ' / '+ Math.round(data.USD['15m']*balance) + ' $';
|
|
|
btc_change += ' / '+ Math.round(data.EUR['15m']*balance) + ' €';
|
|
|
$('#BTC_CHANGE').html(btc_change);
|
|
|
});
|
|
|
});
|
|
|
}
|
|
|
|
|
|
function setParallax()
|
|
|
{
|
|
|
var image = document.getElementsByClassName('simple-parallax');
|
|
|
new simpleParallax(image,{
|
|
|
scale: 1.5,
|
|
|
overflow: true,
|
|
|
orientation: 'down'
|
|
|
});
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</head>
|
|
|
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
|
|
|
|
|
|
<nav class="navbar navbar-default navbar-fixed-top">
|
|
|
<div class="container">
|
|
|
<div class="navbar-header">
|
|
|
<button type="button" class="navbar-toggle bg-grey" data-toggle="collapse" data-target="#myNavbar">
|
|
|
<span class="icon-bar"></span>
|
|
|
<span class="icon-bar"></span>
|
|
|
<span class="icon-bar"></span>
|
|
|
</button>
|
|
|
<a class="navbar-brand" href="index.php">
|
|
|
<img id="logo_topisto" src="images/topisto_vert.png" style="border-radius:6px;display:inline-block;height:8vh;;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)">
|
|
|
<span id="titre_topisto" style="vertical-align:text-bottom;display:inline-block;color:black;font-family: Bangers, sans-serif;font-size: 8vh;text-shadow: 2px 2px #ffffff">TOPISTO</span>
|
|
|
</a>
|
|
|
</div>
|
|
|
<div class="collapse navbar-collapse" id="myNavbar">
|
|
|
<ul class="nav navbar-nav navbar-right">
|
|
|
<li><a href="#espace">About</a></li>
|
|
|
<li><a href="index.php">Explorer</a></li>
|
|
|
<li><a href="nft.php">NFT</a></li>
|
|
|
<li><a href="blog.php">Blog</a></li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
</nav>
|
|
|
|
|
|
<div id="espace" class="container-fluid" style="padding-bottom:10px">
|
|
|
<div class="row">
|
|
|
<div class="col-sm-12 text-left">
|
|
|
<br><br>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div id="about" class="container-fluid bg-grey" style="padding-top:5px;padding-bottom:5px">
|
|
|
<div class="row" style="margin-top:0px">
|
|
|
<div class="col-sm-8" style="margin-top:0px">
|
|
|
<h4 style="margin-top:0px">What is a TOPISTO ?</h4>
|
|
|
<p class="text-justify">
|
|
|
This is <a href="https://en.wikipedia.org/wiki/Generative_art" target="_blank">generative art</a>.
|
|
|
Each <i>TOPISTO</i> represents a block of the Bitcoin blockchain and is automatically generated by an algorithm.
|
|
|
It use the Bitcoin Blockchain as a source of random for drawing pictures.
|
|
|
To secure the transactions, each block have a hash, a cryptographic key that seals the block and will never change.
|
|
|
Nobody can predict the hash of the next block of the blockchain.
|
|
|
So nobody can know what the next picture will look like.
|
|
|
</p>
|
|
|
<p class="text-justify">
|
|
|
Each picture have 3 parts.
|
|
|
The top strip represents the hash of the block.
|
|
|
It contains information like the height or the name the block.
|
|
|
The middle strip is the drawing.
|
|
|
Method, colors, thickness ... Everything depends on the transaction within the block.
|
|
|
The bottom strip represents the revert hash of the previous block.
|
|
|
So, like in the blockchain, each TOPISTO is chained to the previous one.
|
|
|
</p>
|
|
|
</div>
|
|
|
<div class="col-sm-4 hidden-xs text-center">
|
|
|
<img id="WHAT" src="images/what.png" alt="WHAT block" height="350px"></img>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div id="about" class="container-fluid bg-white" style="padding-top:5px;padding-bottom:5px">
|
|
|
<div class="row" style="margin-top:0px">
|
|
|
<div class="col-sm-8" style="margin-top:0px">
|
|
|
<h4 style="margin-top:0px">Get your own TOPISTO !</h4>
|
|
|
<p class="text-justify">
|
|
|
Some blocks are special blocks.
|
|
|
The first block in History is at height 0, it is called the <b>GENESIS</b> block.
|
|
|
So special blocks have a name.
|
|
|
Block at height 42, is "<b>THE_ANSWER</b>", because 42 is the answer to everything !
|
|
|
Each 210000 blocks, the reward is divide by 2, so those are <b>HALVING</b> blocks.
|
|
|
The fisrt real BTC transaction was to buy 2 pizzas, this transaction is in the block 57035 which is named <b>PIZZA</b> block.
|
|
|
The COVID19 pandemic kill some friend, so there is a <b>RIP_STEEVE</b> block.
|
|
|
</p>
|
|
|
<p class="text-justify">
|
|
|
Just like me, you will be able to name a block and put it in History as an NFT.
|
|
|
This is not yet implemented, but it will be on <a href="nft.php">this page</a>.
|
|
|
Buying a TOPISTO is a way for you to help me
|
|
|
</p>
|
|
|
</div>
|
|
|
<div class="col-sm-4 hidden-xs text-center">
|
|
|
<img id="SPECIAL" src="images/block_image.php?hash=000000000019d6689c085ae165831e934ff763ae46a2a6c172b3f1b60a8ce26f" alt="SPECIAL block" height="200px"></img>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div id="about" class="container-fluid bg-grey" style="padding-top:5px;padding-bottom:5px">
|
|
|
<div class="row" style="margin-top:0px">
|
|
|
<div class="col-sm-8" style="margin-top:0px">
|
|
|
<h4 style="margin-top:0px">R. Topisto is a Twitter Bot</h4>
|
|
|
<p class="text-justify">
|
|
|
I also create a bot (@r_topisto) that tweet the LAST TOPISTO almost every hour.
|
|
|
It is doing that since march 2017.
|
|
|
Sometimes lucky people mined block without any tranaction in it.
|
|
|
They only get the reward without waiting transactions to put in the block.
|
|
|
You can follow those events via my main twitter, @topisto_42
|
|
|
</p>
|
|
|
</div>
|
|
|
<div class="col-sm-4 hidden-xs text-center">
|
|
|
<img id="LAST" src="images/twitter_bot.png" alt="TWITTER BOT" height="200px"></img>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div id="contact" class="container-fluid">
|
|
|
<div class="row slideanim">
|
|
|
<div class="col-sm-12 text-left">
|
|
|
<a href="wtf.php">About this site</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<footer class="container-fluid bg-grey text-center">
|
|
|
<a href="#myPage" title="To Top">
|
|
|
<span class="glyphicon glyphicon-chevron-up"></span>
|
|
|
</a>
|
|
|
</footer>
|
|
|
</body>
|
|
|
</html>
|
