prepare to nft

4 роки тому · 404a4fd2c9
--- a/about.php
+++ b/about.php
@ -170,7 +170,7 @@
    </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="#espace">About</a></li>
        <li><a href="index.php">Explorer</a></li>
        <li><a href="blog.php">Blog</a></li>
      </ul>
@ -178,11 +178,10 @@
  </div>
 </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="col-sm-12 text-left">
      <br>BTC adress : <a href="https://www.blockchain.com/btc/address/15V7XfBX2Xn5uKpK3VuVngDg44TSKLtTSh">15V7XfBX2Xn5uKpK3VuVngDg44TSKLtTSh</a>
      <br><div id="BTC_CHANGE">&nbsp; &#8383 - &nbsp; $ - &nbsp; €</div>
      <br><br>
    </div>
  </div>
 </div>
@ -190,46 +189,78 @@
 <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>
      <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">
        <!--
        <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 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 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>
    </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>
--- a/articles/20180225/header.js
+++ b/articles/20180225/header.js
@ -1,4 +1,4 @@
 var flag_20180225_animation = 
tru
e;
 var flag_20180225_animation = 
fals
e;
 function switch_20180225_animation()
 {
  btn = document.getElementById('20180225_control_btn');
@ -12,17 +12,19 @@ function switch_20180225_animation()
    ctrl.className = "glyphicon glyphicon-pause";
  }
  flag_20180225_animation = ! flag_20180225_animation;
  if (flag_20180225_animation) Fluid.draw();
  if (flag_20180225_animation) 
  {
    Fluid.initialize();
    Fluid.draw();
  }
 }

 function init_20180225_animation()
 {
  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)
--- a/blog.php
+++ b/blog.php
@ -19,17 +19,19 @@

  <script src="js/console.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(){

      setInterval(changeGargoyle,10000);

      getMyAdressInfos();

      setParallax();

      $('#myNavbar').on('show.bs.collapse', function () {
        $('#logo_topisto').css({'height' : '30px','width' : '30px'});
        $('#titre_topisto').css({'font-size' : '30px'});
@ -40,7 +42,7 @@
      });

      // 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
        if (this.hash !== "") {
          // Prevent default anchor click behavior
@ -65,13 +67,89 @@
          var pos = $(this).offset().top;
          var winTop = $(window).scrollTop();
          if (pos < winTop + 600) {
            blockchainExplorer.ajouterPreviousBlock();
            $(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 + ' &#8383';
        $.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>
@ -94,12 +172,40 @@
      <ul class="nav navbar-nav navbar-right">
        <li><a href="about.php">About</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>
    </div>
  </div>
 </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">&nbsp; &#8383 - &nbsp; $ - &nbsp; €</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 class="row">
    <div class="col-sm-12 text-right">&nbsp;</div>
@ -137,6 +243,35 @@ foreach (glob("articles/20*/header.html") as $filename) {
 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">
  <a href="#myPage" title="To Top">
    <span class="glyphicon glyphicon-chevron-up"></span>
--- a/images/twitter_bot.png
+++ b/images/twitter_bot.png
--- a/images/what.png
+++ b/images/what.png
--- a/wtf.php
+++ b/wtf.php
@ -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 + ' &#8383';
        $.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">&nbsp; &#8383 - &nbsp; $ - &nbsp; €</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>