| @ -170,7 +170,7 @@ | |||||
| </div> | </div> | ||||
| <div class="collapse navbar-collapse" id="myNavbar"> | <div class="collapse navbar-collapse" id="myNavbar"> | ||||
| <ul class="nav navbar-nav navbar-right"> | <ul class="nav navbar-nav navbar-right"> | ||||
| <li><a href="#about">About</a></li> | |||||
| <li><a href="#espace">About</a></li> | |||||
| <li><a href="index.php">Explorer</a></li> | <li><a href="index.php">Explorer</a></li> | ||||
| <li><a href="blog.php">Blog</a></li> | <li><a href="blog.php">Blog</a></li> | ||||
| </ul> | </ul> | ||||
| @ -178,11 +178,10 @@ | |||||
| </div> | </div> | ||||
| </nav> | </nav> | ||||
| <div id="explorer" class="container-fluid" style="padding-bottom:10px"> | |||||
| <div id="espace" class="container-fluid" style="padding-bottom:10px"> | |||||
| <div class="row"> | <div class="row"> | ||||
| <div class="col-sm-12 text-left"> | <div class="col-sm-12 text-left"> | ||||
| <br>BTC adress : <a href="https://www.blockchain.com/btc/address/15V7XfBX2Xn5uKpK3VuVngDg44TSKLtTSh">15V7XfBX2Xn5uKpK3VuVngDg44TSKLtTSh</a> | |||||
| <br><div id="BTC_CHANGE"> ₿ - $ - €</div> | |||||
| <br><br> | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| @ -190,46 +189,78 @@ | |||||
| <div id="about" class="container-fluid bg-grey" style="padding-top:5px;padding-bottom:5px"> | <div id="about" class="container-fluid bg-grey" style="padding-top:5px;padding-bottom:5px"> | ||||
| <div class="row" style="margin-top:0px"> | <div class="row" style="margin-top:0px"> | ||||
| <div class="col-sm-8" style="margin-top:0px"> | <div class="col-sm-8" style="margin-top:0px"> | ||||
| <h4 style="margin-top:0px">This site is a hobby.<br>It's also a testing place where i can do <a href="blog.php">things</a> that are impossible at work.</h4> | |||||
| <p class="text-justify">I like <b>surfing</b> and sailing on the ocean. But during longs winter nights, computing is fun. I'm interested into <b>cryptocurrencies</b>, computationnal art, datavisualisation. I know that <b>42</b> is the answer to <b>the Life, Universe and Everything Else</b>. As <b>Eto Demerzel</b> said to me, the <b>Seldon's Plan</b> will save the Galaxy. My favorites books are the <b>House of leaves</b>, the <b>Necronomicron</b> and the <b>DarkHold</b>. I also know that <b>great power comes with great responsibility</b>. I'm still in <b>the search of Captain Zero</b>, because <b>the Truth is out there</b>.</p> | |||||
| <p class="text-justify">.I'm also really astonished by <b>Universal Numbers</b>, aka Disjunctives Sequences. Thinking that a single number can contain every others, that's a great <b>mystery</b>. So I'm trying to write the <a href="page.php?id=00190327">Chronicles</a> of these numbers (in french)</p> | |||||
| <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> | ||||
| <div class="col-sm-4 hidden-xs"> | |||||
| <!-- | |||||
| <div style="background-image:url(images/topisto_vert_tr.png);background-repeat: no-repeat;background-position:center top;background-size: 100% auto;"> | |||||
| <img id="gargoyle" src="images/logo.php" alt="avatar dragon gargoyle" width="100%; height: auto" style="opacity:0.4"></img> | |||||
| </div> | |||||
| --> | |||||
| <img id="gargoyle" class="simple-parallax" src="images/logo.php" alt="avatar dragon gargoyle" width="100%; height: auto" style="margin-top:-100px"></img> | |||||
| <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> | ||||
| </div> | </div> | ||||
| <div id="contact" class="container-fluid"> | |||||
| <div class="row slideanim"> | |||||
| <div class="col-sm-4"> | |||||
| Bookmarks : <br> | |||||
| <a href="/bookmarks" target="_blank">my Web Garden</a><br> | |||||
| <a href="https://inconvergent.net/" target="_blank">Inconvergent</a><br> | |||||
| <a href="http://www.datasketch.es/" target="_blank">Data Sketches</a><br> | |||||
| <a href="https://bit101.github.io/lab/dailies/170310.html" target="_blank">bit101-github</a><br> | |||||
| <a href="http://www.imdb.com/title/tt1508021/" target="_blank">being captain zero</a><br> | |||||
| <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">Customize your 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 class="col-sm-4"> | |||||
| <p>Contact me :</p> | |||||
| <p><span class="glyphicon glyphicon-map-marker"></span> Shambala</p> | |||||
| <p><span class="glyphicon glyphicon-globe"></span> Employer : Mutiny</p> | |||||
| <p><span class="glyphicon glyphicon-phone"></span> +33 4 8 15 16 23 42</p> | |||||
| <p> | |||||
| <span class="glyphicon glyphicon-envelope"></span> | |||||
| <!--Place the code below where you want the link to be displayed--> | |||||
| <span id="obf"><script>document.getElementById("obf").innerHTML="<n uers=\"znvygb:nyoreg.frnaquvyf@gbcvfgb.arg?fhowrpg=pbagnpg\" gnetrg=\"_oynax\">nyoreg.frnaquvyf@gbcvfgb.arg</n>".replace(/[a-zA-Z]/g,function(c){return String.fromCharCode((c<="Z"?90:122)>=(c=c.charCodeAt(0)+13)?c:c-26);});</script> | |||||
| <noscript><span style="unicode-bidi:bidi-override;direction:rtl;">ten.otsipot@slihdnaes.trebla</span></noscript></span> | |||||
| </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> | </p> | ||||
| </div> | </div> | ||||
| <div class="col-sm-4"> | |||||
| BTC adresss : <br> | |||||
| <a href="https://www.blockchain.com/btc/address/15V7XfBX2Xn5uKpK3VuVngDg44TSKLtTSh">15V7XfBX2Xn5uKpK3VuVngDg44TSKLtTSh</a> | |||||
| <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> | </div> | ||||
| </div> | </div> | ||||
| @ -1,4 +1,4 @@ | |||||
| var flag_20180225_animation = tru e; | |||||
| var flag_20180225_animation = fals e; | |||||
| function switch_20180225_animation() | function switch_20180225_animation() | ||||
| { | { | ||||
| btn = document.getElementById('20180225_control_btn'); | btn = document.getElementById('20180225_control_btn'); | ||||
| @ -12,17 +12,19 @@ function switch_20180225_animation() | |||||
| ctrl.className = "glyphicon glyphicon-pause"; | ctrl.className = "glyphicon glyphicon-pause"; | ||||
| } | } | ||||
| flag_20180225_animation = ! flag_20180225_animation; | flag_20180225_animation = ! flag_20180225_animation; | ||||
| if (flag_20180225_animation) Fluid.draw(); | |||||
| if (flag_20180225_animation) | |||||
| { | |||||
| Fluid.initialize(); | |||||
| Fluid.draw(); | |||||
| } | |||||
| } | } | ||||
| function init_20180225_animation() | function init_20180225_animation() | ||||
| { | { | ||||
| ctrl = document.getElementById('20180225_control_icon'); | ctrl = document.getElementById('20180225_control_icon'); | ||||
| ctrl.title = "PAUSE"; | |||||
| ctrl.className = "glyphicon glyphicon-pause"; | |||||
| flag_20180225_animation = true; | |||||
| Fluid.initialize(); | |||||
| setTimeout(switch_20180225_animation, 60000); | |||||
| ctrl.title = "PLAY"; | |||||
| ctrl.className = "glyphicon glyphicon-play"; | |||||
| flag_20180225_animation = false; | |||||
| } | } | ||||
| function init_2018025(leblock) | function init_2018025(leblock) | ||||
| @ -19,17 +19,19 @@ | |||||
| <script src="js/console.js" defer></script> | <script src="js/console.js" defer></script> | ||||
| <script src="js/lastblock.js" defer></script> | <script src="js/lastblock.js" defer></script> | ||||
| <script src="js/blockexplorer.js" defer></script> | |||||
| <!-- | |||||
| -- From https://highlightjs.org | |||||
| --> | |||||
| <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/atom-one-dark.min.css"> | |||||
| <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script> | |||||
| <script>hljs.initHighlightingOnLoad();</script> | |||||
| <script> | |||||
| <script src="js/simpleParallax.js"></script> | |||||
| <script> | |||||
| $(document).ready(function(){ | $(document).ready(function(){ | ||||
| setInterval(changeGargoyle,10000); | |||||
| getMyAdressInfos(); | |||||
| setParallax(); | |||||
| $('#myNavbar').on('show.bs.collapse', function () { | $('#myNavbar').on('show.bs.collapse', function () { | ||||
| $('#logo_topisto').css({'height' : '30px','width' : '30px'}); | $('#logo_topisto').css({'height' : '30px','width' : '30px'}); | ||||
| $('#titre_topisto').css({'font-size' : '30px'}); | $('#titre_topisto').css({'font-size' : '30px'}); | ||||
| @ -40,7 +42,7 @@ | |||||
| }); | }); | ||||
| // Add smooth scrolling to all links in navbar + footer link | // Add smooth scrolling to all links in navbar + footer link | ||||
| $(".navbar a, footer a[href='#myPage']").on('click', function(event) { | |||||
| $("footer a[href='#myPage']").on('click', function(event) { | |||||
| // Make sure this.hash has a value before overriding default behavior | // Make sure this.hash has a value before overriding default behavior | ||||
| if (this.hash !== "") { | if (this.hash !== "") { | ||||
| // Prevent default anchor click behavior | // Prevent default anchor click behavior | ||||
| @ -65,13 +67,89 @@ | |||||
| var pos = $(this).offset().top; | var pos = $(this).offset().top; | ||||
| var winTop = $(window).scrollTop(); | var winTop = $(window).scrollTop(); | ||||
| if (pos < winTop + 600) { | if (pos < winTop + 600) { | ||||
| blockchainExplorer.ajouterPreviousBlock(); | |||||
| $(this).addClass("slide"); | $(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> | </script> | ||||
| </head> | </head> | ||||
| @ -94,12 +172,40 @@ | |||||
| <ul class="nav navbar-nav navbar-right"> | <ul class="nav navbar-nav navbar-right"> | ||||
| <li><a href="about.php">About</a></li> | <li><a href="about.php">About</a></li> | ||||
| <li><a href="index.php">Explorer</a></li> | <li><a href="index.php">Explorer</a></li> | ||||
| <li><a href="#blog">Blog</a></li> | |||||
| <li><a href="#explorer">Blog</a></li> | |||||
| </ul> | </ul> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </nav> | </nav> | ||||
| <div id="explorer" class="container-fluid" style="padding-bottom:10px"> | |||||
| <div class="row"> | |||||
| <div class="col-sm-12 text-left"> | |||||
| <br> | |||||
| <br>BTC adress : <a href="https://www.blockchain.com/btc/address/15V7XfBX2Xn5uKpK3VuVngDg44TSKLtTSh">15V7XfBX2Xn5uKpK3VuVngDg44TSKLtTSh</a> | |||||
| <br><div id="BTC_CHANGE"> ₿ - $ - €</div> | |||||
| </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">This site is a hobby.<br>It's also a testing place where I can do things that are impossible at work.</h4> | |||||
| <p class="text-justify">I like <b>surfing</b> and sailing on the ocean. But during longs winter nights, computing is fun. I'm interested into <b>cryptocurrencies</b>, computationnal art, datavisualisation. I know that <b>42</b> is the answer to <b>the Life, Universe and Everything Else</b>. As <b>Eto Demerzel</b> said to me, the <b>Seldon's Plan</b> will save the Galaxy. My favorites books are the <b>House of leaves</b>, the <b>Necronomicron</b> and the <b>DarkHold</b>. I also know that <b>great power comes with great responsibility</b>. I'm still in <b>the search of Captain Zero</b>, because <b>the Truth is out there</b>.</p> | |||||
| <p class="text-justify">.I'm also really astonished by <b>Universal Numbers</b>, aka Disjunctives Sequences. Thinking that a single number can contain every others, that's a great <b>mystery</b>. So I'm trying to write the <a href="page.php?id=00190327">Chronicles</a> of these numbers (in french)</p> | |||||
| </div> | |||||
| <div class="col-sm-4 hidden-xs"> | |||||
| <!-- | |||||
| <div style="background-image:url(images/topisto_vert_tr.png);background-repeat: no-repeat;background-position:center top;background-size: 100% auto;"> | |||||
| <img id="gargoyle" src="images/logo.php" alt="avatar dragon gargoyle" width="100%; height: auto" style="opacity:0.4"></img> | |||||
| </div> | |||||
| --> | |||||
| <img id="gargoyle" class="simple-parallax" src="images/logo.php" alt="avatar dragon gargoyle" width="100%; height: auto" style="margin-top:-100px"></img> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| <div id="blog" class="container-fluid bg-white" style="padding-top:50px;align:right"> | <div id="blog" class="container-fluid bg-white" style="padding-top:50px;align:right"> | ||||
| <div class="row"> | <div class="row"> | ||||
| <div class="col-sm-12 text-right"> </div> | <div class="col-sm-12 text-right"> </div> | ||||
| @ -137,6 +243,35 @@ foreach (glob("articles/20*/header.html") as $filename) { | |||||
| echo $liste; | echo $liste; | ||||
| ?> | ?> | ||||
| <div id="contact" class="container-fluid"> | |||||
| <div class="row slideanim"> | |||||
| <div class="col-sm-4"> | |||||
| Bookmarks : <br> | |||||
| <a href="/bookmarks" target="_blank">my Web Garden</a><br> | |||||
| <a href="https://inconvergent.net/" target="_blank">Inconvergent</a><br> | |||||
| <a href="http://www.datasketch.es/" target="_blank">Data Sketches</a><br> | |||||
| <a href="https://bit101.github.io/lab/dailies/170310.html" target="_blank">bit101-github</a><br> | |||||
| <a href="http://www.imdb.com/title/tt1508021/" target="_blank">being captain zero</a><br> | |||||
| </div> | |||||
| <div class="col-sm-4"> | |||||
| <p>Contact me :</p> | |||||
| <p><span class="glyphicon glyphicon-map-marker"></span> Shambala</p> | |||||
| <p><span class="glyphicon glyphicon-globe"></span> Employer : Mutiny</p> | |||||
| <p><span class="glyphicon glyphicon-phone"></span> +33 4 8 15 16 23 42</p> | |||||
| <p> | |||||
| <span class="glyphicon glyphicon-envelope"></span> | |||||
| <!--Place the code below where you want the link to be displayed--> | |||||
| <span id="obf"><script>document.getElementById("obf").innerHTML="<n uers=\"znvygb:nyoreg.frnaquvyf@gbcvfgb.arg?fhowrpg=pbagnpg\" gnetrg=\"_oynax\">nyoreg.frnaquvyf@gbcvfgb.arg</n>".replace(/[a-zA-Z]/g,function(c){return String.fromCharCode((c<="Z"?90:122)>=(c=c.charCodeAt(0)+13)?c:c-26);});</script> | |||||
| <noscript><span style="unicode-bidi:bidi-override;direction:rtl;">ten.otsipot@slihdnaes.trebla</span></noscript></span> | |||||
| </p> | |||||
| </div> | |||||
| <div class="col-sm-4"> | |||||
| BTC adresss : <br> | |||||
| <a href="https://www.blockchain.com/btc/address/15V7XfBX2Xn5uKpK3VuVngDg44TSKLtTSh">15V7XfBX2Xn5uKpK3VuVngDg44TSKLtTSh</a> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| <footer class="container-fluid bg-grey text-center"> | <footer class="container-fluid bg-grey text-center"> | ||||
| <a href="#myPage" title="To Top"> | <a href="#myPage" title="To Top"> | ||||
| <span class="glyphicon glyphicon-chevron-up"></span> | <span class="glyphicon glyphicon-chevron-up"></span> | ||||
| @ -1,243 +0,0 @@ | |||||
| <!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:72px;;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: 60px;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="#about">About</a></li> | |||||
| <li><a href="index.php">Explorer</a></li> | |||||
| <li><a href="blog.php">Blog</a></li> | |||||
| </ul> | |||||
| </div> | |||||
| </div> | |||||
| </nav> | |||||
| <div id="explorer" class="container-fluid" style="padding-bottom:10px"> | |||||
| <div class="row"> | |||||
| <div class="col-sm-12 text-left"> | |||||
| <br>BTC adress : <a href="https://www.blockchain.com/btc/address/15V7XfBX2Xn5uKpK3VuVngDg44TSKLtTSh">15V7XfBX2Xn5uKpK3VuVngDg44TSKLtTSh</a> | |||||
| <br><div id="BTC_CHANGE"> ₿ - $ - €</div> | |||||
| </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">This site is a hobby.<br>It's also a testing place where i can do <a href="blog.php">things</a> that are impossible at work.</h4> | |||||
| <p class="text-justify">I like <b>surfing</b> and sailing on the ocean. But during longs winter nights, computing is fun. I'm interested into <b>cryptocurrencies</b>, computationnal art, datavisualisation. I know that <b>42</b> is the answer to <b>the Life, Universe and Everything Else</b>. As <b>Eto Demerzel</b> said to me, the <b>Seldon's Plan</b> will save the Galaxy. My favorites books are the <b>House of leaves</b>, the <b>Necronomicron</b> and the <b>DarkHold</b>. I also know that <b>great power comes with great responsibility</b>. I'm still in <b>the search of Captain Zero</b>, because <b>the Truth is out there</b>.</p> | |||||
| <p class="text-justify">.I'm also really astonished by <b>Universal Numbers</b>, aka Disjunctives Sequences. Thinking that a single number can contain every others, that's a great <b>mystery</b>. So I'm trying to write the <a href="page.php?id=00190327">Chronicles</a> of these numbers (in french)</p> | |||||
| </div> | |||||
| <div class="col-sm-4 hidden-xs"> | |||||
| <!-- | |||||
| <div style="background-image:url(images/topisto_vert_tr.png);background-repeat: no-repeat;background-position:center top;background-size: 100% auto;"> | |||||
| <img id="gargoyle" src="images/logo.php" alt="avatar dragon gargoyle" width="100%; height: auto" style="opacity:0.4"></img> | |||||
| </div> | |||||
| --> | |||||
| <img id="gargoyle" class="simple-parallax" src="images/logo.php" alt="avatar dragon gargoyle" width="100%; height: auto" style="margin-top:-100px"></img> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| <div id="contact" class="container-fluid"> | |||||
| <div class="row slideanim"> | |||||
| <div class="col-sm-4"> | |||||
| Bookmarks : <br> | |||||
| <a href="/bookmarks" target="_blank">my Web Garden</a><br> | |||||
| <a href="https://inconvergent.net/" target="_blank">Inconvergent</a><br> | |||||
| <a href="http://www.datasketch.es/" target="_blank">Data Sketches</a><br> | |||||
| <a href="https://bit101.github.io/lab/dailies/170310.html" target="_blank">bit101-github</a><br> | |||||
| <a href="http://www.imdb.com/title/tt1508021/" target="_blank">being captain zero</a><br> | |||||
| </div> | |||||
| <div class="col-sm-4"> | |||||
| <p>Contact me :</p> | |||||
| <p><span class="glyphicon glyphicon-map-marker"></span> Shambala</p> | |||||
| <p><span class="glyphicon glyphicon-globe"></span> Employer : Mutiny</p> | |||||
| <p><span class="glyphicon glyphicon-phone"></span> +33 4 8 15 16 23 42</p> | |||||
| <p> | |||||
| <span class="glyphicon glyphicon-envelope"></span> | |||||
| <!--Place the code below where you want the link to be displayed--> | |||||
| <span id="obf"><script>document.getElementById("obf").innerHTML="<n uers=\"znvygb:nyoreg.frnaquvyf@gbcvfgb.arg?fhowrpg=pbagnpg\" gnetrg=\"_oynax\">nyoreg.frnaquvyf@gbcvfgb.arg</n>".replace(/[a-zA-Z]/g,function(c){return String.fromCharCode((c<="Z"?90:122)>=(c=c.charCodeAt(0)+13)?c:c-26);});</script> | |||||
| <noscript><span style="unicode-bidi:bidi-override;direction:rtl;">ten.otsipot@slihdnaes.trebla</span></noscript></span> | |||||
| </p> | |||||
| </div> | |||||
| <div class="col-sm-4"> | |||||
| BTC adresss : <br> | |||||
| <a href="https://www.blockchain.com/btc/address/15V7XfBX2Xn5uKpK3VuVngDg44TSKLtTSh">15V7XfBX2Xn5uKpK3VuVngDg44TSKLtTSh</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> | |||||