change font-size header 2

.gitignore

@@ -0,0 +1 @@
+livrer.sh

about.php

@@ -164,25 +164,25 @@
         <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>
+        <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="#about">About</a></li>
+        <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="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 +190,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">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 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>

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)

articles/20220712/01/content.html

@@ -0,0 +1,162 @@
+<style>
+  blockquote {
+    font-size: 14px !important;
+    font-style: italic !important;
+  }
+
+  h5 {
+    font-size: 17px !important;
+    text-decoration: underline !important;
+    padding-top: 15px;
+  }
+</style>
+
+<div class="container-fluid bg-grey">
+    <div class="row">
+      <div class="col-sm-12">
+        <br><p>ARTICLE</p>
+        <h2>Des cas d'usages des technos crypto pour l'&Eacute;tat</h2>
+        <h4>Cas d’usage n°1 : une gestion des identités.</h4>
+          <p class="text-justify">
+            Nous commencerons par attirer l’attention sur un avantage peu mis en avant de l’usage d’adresses BTC comme identités.<br/>
+            <ul>
+              <li><a href="#technologie">La technologie</a></li>
+              <li><a href="#usage">L'usage</a></li>
+            </ul>
+          </p>  
+          <a id="technologie"></a>
+          <h5>La technologie</h5>
+          <p class="text-justify">
+          Dans un réseau cryptographique, chacun est identifié par un couple de clé publique / clé privée.<br/>
+          
+          <br/>
+          La clé privée doit rester secrète et la clé publique à vocation à être communiquée aux interlocuteurs du réseau.<br/>
+          
+          <br/>
+          Il est évidemment impossible de déduire la clé privée à partir de la clé publique.<br/>
+          
+          Les clés sont en fait des très grands nombres mathématiques, peu faciles à manipuler.<br/>
+          
+          L’adresse est une représentation (un peu) plus simple de la clé publique.<br/>
+          <br/>
+           
+          Le schéma est donc le suivant : <b>clé privée</b> => <b>clé publique</b> <=> <b>adresse</b><br/>
+          <br/>
+          
+          Il suffit de connaître l’adresse d’une personne pour accéder à la balance comptable de son compte.<br/>
+          
+          On est alors également en capacité d’envoyer des fonds sur cette adresse.<br/>
+          
+          Il suffit de connaître la clé privée d’une adresse pour être capable de dépenser les fonds qu’elle possède.<br/>
+          
+          <br/>
+          Le registre des transactions (la blockchain) est publique.<br/>
+          
+          Chaque transaction est un échange de fonds entre (au moins) deux adresses publiques.<br/>
+          
+          La traçabilité est donc totale.<br/>
+          
+          <br/>
+          Les portes monnaies cryptographiques sont en fait des trousseaux de clés.<br/>
+          
+          En simplifiant à l’extrême, un porte monnaie n’a besoin de retenir qu’une seule information : la clé privée.<br/>
+          
+          Cette information étant ultra sensible, elle doit faire l’objet d’une sécurisation absolue.<br/>
+          
+          Il faut en assurer la confidentialité ainsi que la sauvegarde, ce qui peut se révéler contradictoire.<br/>
+          
+          <br/> 
+          Mais rien n’empêche un même porte monnaie de contenir plusieurs couples de clés.<br/>
+          
+          L’utilisateur possède alors plusieurs identités sur le réseau puisqu’il utilise plusieurs adresses publiques.<br/>
+          
+          Techniquement, il est très facile de créer un couple de clés.<br/>
+          
+          Chacun peut donc en théorie posséder des milliers d’adresses, sa fortune est alors composée de la somme des balances de chacune des adresses.<br/>
+          
+          Mais nous avons vu que la sécurité d’une identité repose sur la connaissance de sa clé privée.<br/>
+          
+          Lorsqu’on se met à utiliser des milliers d’adresses, tout l’enjeu réside donc dans la gestion des milliers de clés privées.<br/>
+          
+          Cela peut rapidement devenir laborieux …<br/>
+          
+          <br/>
+          Heureusement, les trousseaux de clés modernes utilisent un système d’héritage entre les adresses.<br/>
+          
+          Grâce aux suggestions des BIP 32, 43 et 44, on peut dériver une adresse d’une autre adresse.<br/>
+          
+          Une relation mathématique lie l’adresse mère à son adresse fille.<br/>
+          
+          Mais il est impossible de remonter de l’adresse fille vers son adresse mère.<br/>
+          
+          Du point de vue du réseau, ces deux adresses sont complètement indépendantes.<br/>
+          
+          Seul le trousseau peut faire la relation entre les deux adresses.<br/>
+          
+          Et il est impossible pour le réseau de savoir que deux adresses sont sœurs.<br/>
+          
+          En fait, il est possible de déduire un grand nombre de filles à partir d’une mère, de l’ordre de deux milliards.<br/>
+                    
+          Mieux encore, chaque fille peut elle-même être la mère d’autres adresses, et ce sur une profondeur illimitée.<br/>
+          
+          Ainsi donc, un trousseau n’a à sécuriser qu’une seule information : la clé privée de l’adresse racine.<br/>
+          
+          Toutes les autres clés peuvent en être déduites …<br/>
+          </p>
+          
+          <a id="usage"></a>
+          <h5>L'usage</h5>
+          <p class="text-justify">
+          On peut donc concevoir qu’un &Eacute;tat puisse distribuer des adresses certifiées par ses soins à ses citoyens.<br/>
+          
+          Chacun dispose donc d’une adresse publique, certifiée par l’&Eacute;tat.<br/>
+          
+          Mais à partir de celle-ci, chacun est libre de décliner cette adresse en autant de filles qu’il le souhaite.<br/>
+          
+          Même dans les relations avec les services de l’&Eacute;tat, il peut choisir de décliner une nouvelle identité à chaque fois :<br/>
+          
+          Une identité pour la CAF, une autre pour la Sécu, les impôts, etc.<br/>
+          
+          De même dans ses relations privées ou commerciales :<br/>
+          
+          Une identité vis-à-vis de la banque, une autre vis-à-vis d’un réseau social, du boulanger, etc.<br/>
+          
+          <br/>
+          Je pense qu’à ce stade, le lecteur aura compris l’idée générale de ce cas d’usage.<br/>
+          
+          Le principe de respect de la vie privée devient compatible avec la nécessaire traçabilité des transactions.<br/>
+          
+          <br/>
+          On pourrait par exemple imaginer une blockchain parallèle à celle hébergeant les transactions, utilisant les mêmes adresses que le réseau mais dont le token aurait pour seul objet de signifier la validité d’une adresse. Une adresse y ayant un solde positif, même d’un Satoshi, serait d’une adresse valide.<br/>
+          <br/>
+          L’&Eacute;tat certifie une identité en envoyant un jeton sur l’adresse de cette personne. Chacun peut ensuite émettre et révoquer ses propres adresses filles. Chacun peut vérifier la validité d’une adresse, la blockchain en question étant publique. Eventuellement, l’&Eacute;tat révoque l’identité certifiée de l’individu au moment de son décès (selon des modalités à définir). <br/>
+          <br/>
+          Pour garantir la confidentialité, cette blockchain pourrait être du type Monero ou ZCash dont la technologie permet de masquer l’origine des fonds présents sur une adresse. Ainsi on ne pourrait pas non plus déduire la filiation des adresses en traçant les échanges de tokens<br/>
+          <br/>
+          Enfin, le type des transactions y serait particulier dans le sens où pour envoyer un token à une adresse, il faudrait<br/>
+          - Soit en être le propriétaire, c'est à dire détenir sa clé privée<br/>
+          - Soit partager un secret avec elle, pour sceller la transaction, ce qui implique un échange "offline"<br/>
+          <br/>
+          Cela laisse des options quant à la certification des adresses par l'&Eacute;tat.<br/>
+          - Soit les adresses certifiées sont des filles de celles de l'&Eacute;tat, dans ce cas ce dernier a un contrôle total de toutes les adresses.<br/>
+          Cela lui permet de révoquer une identité et toutes ses filles, au moment du décès de la personne par exemple.<br/>
+          - Soit le script de transaction fait une exception qui permet aux adresses de l'&Eacute;tat de verser des tokens sur une adresse dont il n'est pas propriétaire.<br/>
+          On notera que ces deux types de solution peuvent cohabiter dans uen même blockchain.<br/>
+          <br/>
+          Il y a donc sans doute matière à satisfaire les plus libertaires d'entre-vous, qui auront également noté que dans ce système, rien n'empêche d'échanger des fonds sur la blockchain principale sur des adresses non certifiées par la deuxième blockchain.
+          Chacun reste libre ...<br/> 
+          <br/>
+          Autre avantage de ce système, si l'&Eacute;tat donne une quantité fixe de tokens, plus l'utilisateur crée d'identités plus il "affaiblit" son identité principale puisque la balance de son wallet diminue.
+          On peut donc avoir plus ou moins confiance dans une identité en fonction de la quantité de tokens dont elle dispose.
+          <br/><br/>
+          Je m’arrête là pour ce premier cas d’usage.<br/>
+          La discussion est ouverte, les bases de l'identité sont posées, on peut passer à la suite.<br/>
+          
+          Rendez-vous pour le second cas d'usage ...<br/>
+        </p>  
+      </div>
+</div>
+<a id="lafin"></a>
+
+          
+

articles/20220712/header.html

@@ -0,0 +1,31 @@
+<div class="container-fluid bg-grey">
+  <div class="row">
+    <div class="col-sm-4">
+      <br><img id="logo_ARTICLE" src="images/block_image.php" width="100%; height: auto"></img>
+      <br><p>ARTICLE</p>
+    </div>
+    <div class="col-sm-8">
+      <h2>Cas d'usages des technos crypto pour l'&Eacute;tat</h2>
+      <p class="text-justify">
+        Récemment, <a href="http://www2.assemblee-nationale.fr/deputes/fiche/OMC_PA721568">le député Pierre PERSON</a> nous invitait à "bousculer" l’administration sur ces sujets en proposant à la personne publique des modèles qui permettent d’améliorer le fonctionnement de nos services publics et le fonctionnement de notre société en général.
+        Je me lance donc dans une modeste contribution, en proposant quelques cas d’usages.
+        Spontannément, j'ai 4 cas d'usage qui me viennent en tête.
+        <ul>
+          <li>
+            <a href="page.php?id=20190308/01">Une gestion des identités, conciliant traçabilité et confidentialité</a>.<br/>
+          </li>
+          <li>
+            Une crypto monnaie d'Etat.<br/>
+          </li>
+          <li>
+            Des transactions multisignatures pour fluidifier l’organisation ordonnateur/payeur.<br/>
+          </li>
+          <li>
+            Des smartcontracts pour les marchés publics.<br/>
+          </li>
+        </ul>
+      </p>
+      <br/><br/>
+    </div>
+  </div>
+</div>

articles/20220712/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <meta chartset="UTF-8">
+    <title>Creative Coding</title>
+    <meta name="description" content="This is an example of a meta description.">
+    <link rel="stylesheet" type="text/css" href="theme.css">
+  </head>
+  <body>
+    <canvas id="canvas1"></canvas>
+    <script src="script.js"></script>
+  </body>
+</html>

articles/20220712/script.js

@@ -0,0 +1,208 @@
+
+const mouse = {
+    x: 0,
+    y: 0,
+};
+  
+window.addEventListener('mousemove', function(e){
+    mouse.x = e.x;
+    mouse.y = e.y;
+});
+
+let canvas;
+let ctx;
+let flowfield;
+let flowfieldAnimation = null;
+
+function startFlowfieldAnimation() {
+    if (flowfieldAnimation != null) cancelAnimationFrame(flowfieldAnimation);
+
+    // canvas.width = window.innerWidth;
+    // canvas.height = window.innerHeight;
+
+    canvas.width = 300;
+    canvas.height = 400;
+
+    flowfield = new FlowfieldEffect(ctx, canvas.width, canvas.height);
+    flowfield.animate(0);
+}
+
+window.addEventListener('resize', function(e){
+    // startFlowfieldAnimation();
+});
+  
+window.onload = function(){
+  canvas = document.getElementById('canvas1');
+  ctx = canvas.getContext('2d');
+
+  startFlowfieldAnimation();
+}
+
+class FlowfieldEffect {
+  #ctx;
+  #width;
+  #height;
+  #count;
+  #radius;
+
+  constructor(ctx, width, height, gradient) {
+      this.#ctx = ctx;
+      this.#ctx.lineWidth = 0.3;
+      this.#width = width;
+      this.#height = height;
+      this.gradient;
+      this.#createGradient();
+      this.#ctx.strokeStyle = this.gradient;
+
+      this.#radius = 1.9; // 1.9
+      this.vr = 0.03;
+      this.cellSize = 10;
+
+      this.interval = 1000/60;
+      this.timer = 0;
+      this.lastTime = 0;
+
+      this.a = Math.random() * 4 - 2;
+      this.b = Math.random() * 4 - 2;
+      this.c = Math.random() * 4 - 2;
+      this.d = Math.random() * 4 - 2;
+  }
+
+  #createGradient(){
+      this.gradient = this.#ctx.createLinearGradient(0, 0,this.#width, this.#height);
+      this.gradient.addColorStop("0.1","#ff5c33");
+      this.gradient.addColorStop("0.2", "#ff66b3");
+      this.gradient.addColorStop("0.4", "#ccccff");
+      this.gradient.addColorStop("0.6", "#b3ffff");
+      this.gradient.addColorStop("0.8", "#80ff80");
+      this.gradient.addColorStop("0.9", "#ffff33");
+  }
+
+  #getValue(x, y){
+      return (Math.cos(mouse.y/3 * x * 0.00005) + Math.sin(mouse.x/3 * y * 0.00005)) * this.#radius;
+  }
+
+  #drawLine(x1,y1,x2,y2) {
+    this.#ctx.beginPath();
+    this.#ctx.moveTo(x1,y1);
+    this.#ctx.lineTo(x2,y2);
+    this.#ctx.stroke();
+  }
+
+  #draw(angle,x,y){
+      let positionX = x;
+      let positionY = y;
+      let dx = mouse.x - positionX;
+      let dy = mouse.y - positionY;
+      let distance = (dx * dx + dy * dy);
+      let length = distance > 150000 ? distance : 150000;
+      if (length > 900000) length = 900000;
+      this.#drawLine(positionX,positionY, positionX+Math.cos(angle) * length/10000, positionY+Math.sin(angle) * length/10000);
+  }
+
+  cliffordAttractor(x, y, a, b, c, d) {
+    // clifford attractor
+    // http://paulbourke.net/fractals/clifford/
+    
+    // scale down x and y
+    let scale = 0.005;
+    let x0 = (x - this.#width / 2) * scale;
+    let y0 = (y - this.#height / 2)  * scale;
+  
+    // attactor gives new x, y for old one. 
+    let x1 = Math.sin(a * y0) + c * Math.cos(a * x0);
+    let y1 = Math.sin(b * x0) + d * Math.cos(b * y0);
+  
+    // find angle from old to new. that's the value.
+    return Math.atan2(y1 - y0, x1 - x0);
+  }
+
+  // http://paulbourke.net/fractals/henonmap/
+  henonAttractor(x,y,a,b){
+    let scale = 100000;
+    let x0 = x*scale;
+    let y0 = y*scale;
+    let x1 = 1 + y - a*x*x;
+    let y1 = b*x;
+
+    return Math.atan2(y1 - y0, x1 - x0);
+  }
+
+    // http://paulbourke.net/fractals/henonmap/
+  thornFractal(x,y,a,b){
+    let scale = 1;
+    let c1 = a; 0.102
+    let c2 = b; -0.04
+    let x0 = x*scale;
+    let y0 = y*scale;
+    let x1 = x0/Math.cos(y0)+c1;
+    let y1 = y0/Math.sin(x0)+c2;
+  
+    return Math.atan2(y1 - y0, x1 - x0);
+  }
+
+  getValue(x,y){
+      //return (x + y) * 0.01 * Math.PI * 2;
+      //return (x + y) * 0.001 * Math.PI * 2;
+      //return (Math.sin(x * 0.01) + Math.sin(y * 0.0001)) * Math.PI * 2;
+      return this.cliffordAttractor(x,y,this.cellSize,this.b,this.c,this.d);
+      //return this.henonAttractor(x, y, this.a, this.b);
+      //return this.thornFractal(x, y, this.a, this.b);
+  }
+
+  drawMethod0() {
+    let rayon = this.cellSize / 2;
+
+    for (let y = 0; y < this.#height; y += this.cellSize){
+        for (let x = 0; x < this.#width; x += this.cellSize){
+            let angle = this.getValue(x,y);
+
+            let x0 = x + rayon;
+            let y0 = y + rayon;
+
+            let x1 = x0 + Math.cos(angle)*rayon;
+            let y1 = y0 + Math.sin(angle)*rayon;
+
+            let x2 = x0 + Math.cos(angle+Math.PI)*rayon*2;
+            let y2 = y0 + Math.sin(angle+Math.PI)*rayon*2;
+
+            this.#drawLine(x1, y1, x2, y2);
+        }
+    }
+  }
+
+  drawMethod1() {
+    this.#radius += this.vr;
+    if (this.#radius > 5  || this.#radius < -5) this.vr *= -1
+    for (let y = 0; y < this.#height; y += this.cellSize){
+        for (let x = 0; x < this.#width; x += this.cellSize){
+            const angle = this.#getValue(x, y);
+            this.#draw(angle,x,y);
+        }
+    }
+  }
+
+  animate(timeStamp){
+    let deltaTime = timeStamp - this.lastTime;
+    this.lastTime = timeStamp;
+
+    this.drawMethod = this.drawMethod0;
+
+    this.a = Math.random() * 4 - 2;
+    this.b = Math.random() * 4 - 2;
+    this.c = Math.random() * 4 - 2;
+    this.d = Math.random() * 4 - 2;
+
+    if (this.timer > this.interval){
+        this.#ctx.clearRect(0, 0, this.#width, this.#height);
+
+        this.drawMethod();
+
+        this.timer = 0;
+    } else {
+        this.timer += deltaTime;
+    }
+
+    flowfieldAnimation = requestAnimationFrame(this.animate.bind(this));
+  }
+}

articles/20220712/theme.css

@@ -0,0 +1,12 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+canvas {
+  position: absolute;
+  background: black;
+  top: 0;
+  left: 0;
+}

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>
@@ -86,20 +164,49 @@
         <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>
+        <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="about.php">About</a></li>
         <li><a href="index.php">Explorer</a></li>
-        <li><a href="#blog">Blog</a></li>
+        <li><a href="nft.php">NFT</a></li>
+        <li><a href="#explorer">Blog</a></li>
       </ul>
     </div>
   </div>
 </nav>
 
+<div id="explorer" class="container-fluid" style="padding-bottom:10px;padding-right:0px;">
+  <div class="row" style="font-size: 1.5vh;">
+    <div class="col-sm-12 text-left">
+      <br>
+      <br>BTC address : <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>King in Yellow</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 +244,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>

css/topisto.css

@@ -18,6 +18,10 @@
       margin-bottom: 30px;
   }  
 
+  .row {
+      margin-left: -40px;
+  }
+
   .btn-topisto {
     width: 60px !important;
   }

data/getBlockInfo.php

@@ -45,7 +45,13 @@ if (isset($_REQUEST['block_hash']))
 	header('Content-Type: application/json');
 }
 
-$message = '{"hash":"'.$the_block->hash.'", "block_index":"'.$the_block->block_index.'", "time":"'.$the_block->time.'", "height":"'.$the_block->height.'", "topisto_outputs":"'.$the_block->topisto_outputs.'", "prev":"'.$the_block->prev_block.'", "topisto_inputs":"'.$the_block->topisto_inputs.'", "topisto_fees":"'.$the_block->topisto_fees.'", "topisto_reward":"'.$the_block->topisto_reward.'", "nonce":"'.$the_block->nonce.'", "n_tx":"'.$the_block->n_tx.'"}';
+// ---
+// --- Récupérer la liste des images existantes pour ce bloc
+// --- 
+$img_liste = glob(DATA_PATH.'/*/'.$the_block->hash.'.png');
+$json_img_liste = json_encode($img_liste);
+
+$message = '{"hash":"'.$the_block->hash.'", "block_index":"'.$the_block->block_index.'", "time":"'.$the_block->time.'", "height":"'.$the_block->height.'", "topisto_outputs":"'.$the_block->topisto_outputs.'", "prev":"'.$the_block->prev_block.'", "topisto_inputs":"'.$the_block->topisto_inputs.'", "topisto_fees":"'.$the_block->topisto_fees.'", "topisto_reward":"'.$the_block->topisto_reward.'", "nonce":"'.$the_block->nonce.'", "n_tx":"'.$the_block->n_tx.'", "img_list":'.$json_img_liste.'}';
 
 if ($_REQUEST['FULL'] == 'OK') $message = json_encode($the_block);
 

data/getEmptyBlocksList.php

@@ -0,0 +1,48 @@
+<?php
+
+// ---
+// --- La config globale
+// ---
+chdir('/opt/TOPISTO/apps');
+require_once '/opt/TOPISTO/apps/global/inc/config.php';
+
+// ---
+// --- External dependances
+// ---
+require TOPISTO_PATH.'/ressources/vendor/autoload.php';
+
+// ---
+// --- Internal dependances
+// ---
+require_once APP_PATH.'/blockchain/inc/block.php';
+
+function cmp_emptyblocks($a, $b)
+{
+    if ($a[1] == $b[1]) {
+        return 0;
+    }
+    return ($a[1] < $b[1]) ? 1 : -1;
+}
+
+header('Content-Type: application/json');
+
+$emptyblocks_list = [];
+$filename=DATA_PATH."/emptybot/list.txt";
+if (file_exists($filename))
+{
+    $file = fopen(DATA_PATH."/emptybot/list.txt","r");
+    while(!feof($file))
+    {
+        $ligne=fgets($file);
+        $tableau=explode(' ', $ligne);
+        if ($tableau[1] != null)
+            $emptyblocks_list[] = [ $tableau[1], $tableau[2] ];
+    }
+    fclose($file);
+}
+
+usort($emptyblocks_list, "cmp_emptyblocks");
+
+die(json_encode($emptyblocks_list));
+
+?>

explorer.php

@@ -79,9 +79,9 @@
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>                        
       </button>
-      <a class="navbar-brand" href="..">
-        <img id="logo_topisto" src="images/topisto_vert.png" style="border-radius:6px;display:inline-block;visibility: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 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 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">

index.php

@@ -75,14 +75,15 @@
         <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>
+        <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="about.php">About</a></li>
         <li><a href="#explorer">Explorer</a></li>
+        <li><a href="nft.php">NFT</a></li>
         <li><a href="blog.php">Blog</a></li>
       </ul>
     </div>
@@ -97,6 +98,7 @@
       <br><select id="mode_selector" onchange="showInfos()">
         <option value=0>Full Blockchain Explorer</option>
         <option value=1>My special Blocks list</option>
+        <option value=2>Empty Blocks list</option>
       </select>
       <br>
       <label>show block infos&nbsp;</label><input id="mode_checkbox" type="checkbox" onchange="toggleInfos()">

js/blockexplorer.js

@@ -2,10 +2,11 @@ blockchainExplorer = function(){
 
   // Init array
   var _known_blocks   = null;
-  var _liste_blocks   = null;
+  var _empty_blocks   = null;
+  var _liste_blocks   = [];
   var _classes        = ['bg-grey-even','bg-grey-odd'];
   var _cur_class      = 0;
-  var _cur_methode    = '
hasard
';
+  var _cur_methode    = '
nonce
';
   var _mode           = 1;
   var _infos          = false;
   var _flag_nav        = true;
@@ -64,7 +65,7 @@ blockchainExplorer = function(){
     return ladateStr;
   }
 
-  function _addInfoForBlock(block
)
+  function _addInfoForBlock(block
, p_div_label
)
   {
     var contenu = '';
     var downloadingImage = new Image();
@@ -76,16 +77,23 @@ blockchainExplorer = function(){
 
     blockName = _getblockNameFromHash(block.hash);
     if (block.hash == _liste_blocks['TOP']) {
-      blockName = 'LAST BLOCK';
-      if (_mode == 1) div_label = 'LAST';
+      if (_mode != 2)
+      {
+        blockName = 'LAST BLOCK';
+        if (_mode == 1) 
+          div_label = 'LAST';
+      }
     }
     if (blockName == '') blockName = 'block';
     else blockName = '<b>'+blockName+'</b>';
 
+    if (p_div_label != null)
+      div_label = p_div_label;
+
     visibility='hidden';
     if (_infos) visibility='visible';
 
-    contenu += '<div id="img_'+
b
l
ock.height
+'" style="color:black;height:220px">';
+    contenu += '<div id="img_'+
div_la
b
e
l
+'" style="color:black;height:220px">';
     contenu += '      <table class="block_infos" width="100%" align="center" height="220px" style="margin-top:3px;visibility:'+visibility+';background:rgba(255,255,255,0.7)">';
     contenu += '        <tr><td>'+blockName+'</td><td align="right"><b>'+block.height+'</b></td></tr>';
     contenu += '        <tr><td>timestamp&nbsp;&nbsp;&nbsp;</td><td align="right"><b>'+_formatDate(block.time)+'</b></td></tr>';
@@ -101,8 +109,10 @@ blockchainExplorer = function(){
 
     $('#info_'+div_label).html(contenu);
 
+    if (_mode == 2) _cur_methode = 'emptybot';
+
     downloadingImage.onload = function(){
-      var div0 = document.getElementById('img_'+block.height);
+      var div0 = document.getElementById('img_'+
div_la
b
e
l
);
       div0.style.backgroundImage = "url(" + this.src + ")";
       div0.style.backgroundRepeat = "no-repeat";
       div0.style.backgroundPosition = "center";
@@ -259,7 +269,15 @@ blockchainExplorer = function(){
               }
               //_liste_blocks['BOTTOM'] = _known_blocks[_liste_blocks['LENGTH']-1].hash;
               break;
-      }
+          case 2:
+              // En mode "Blocks Vides", on prend le prochain de la liste
+              _liste_blocks['BOTTOM'] = _empty_blocks[0][0];
+              for(i = 0; i < _empty_blocks.length; i++){ 
+                if (data.height == _empty_blocks[i][1])
+                  _liste_blocks['BOTTOM'] = _empty_blocks[i+1][0];
+              }
+              break;
+        }
 
       if (data.height > 0)
         if (_liste_blocks['LENGTH'] % 15)
@@ -292,9 +310,11 @@ blockchainExplorer = function(){
     _liste_blocks = [];
     _liste_blocks['LENGTH'] = 0;
 
-    $(document).scrollTop( $("#explorer").offset().top );
     $('#blockchain').html('');
 
+    // Mode "Empty Blocks"
+    if (_mode == 2) block_hash_url += '?block_hash='+_empty_blocks[0][0];
+    else
     if (block_name != 'LAST') block_hash_url += '?block_hash='+_getblocHashFromName(block_name);
 
     $.getJSON(block_hash_url, function( data ) {
@@ -326,12 +346,36 @@ blockchainExplorer = function(){
 
   function _initBlockSelector()
   {
-    // Init the selector
-    var select = $('#blockSelector');
-      
-    $.each(_liste_blocks, function (key, bloc) {
-      select.append(new Option(bloc.name, bloc.name));
-    });
+    if (_known_blocks == null)
+    {
+      $.getJSON('data/getKnownBlocksList.php', function( data ) {
+        // Init the selector
+        var select = $('#blockSelector');
+
+        _known_blocks = data;
+        _known_blocks.sort(function(a,b){
+          // sort desc ...
+          if (parseInt(a.height) < parseInt(b.height)) return 1;
+          if (parseInt(a.height) > parseInt(b.height)) return -1;
+          return 0;
+        });
+
+        if (select !== null) {
+          $.each(_known_blocks, function (key, bloc) {
+            select.append(new Option(bloc.name, bloc.name));
+          });
+        }
+        
+        return true;
+      });
+    }
+    if (_empty_blocks == null)
+    {
+      $.getJSON('data/getEmptyBlocksList.php', function( data ) {
+        _empty_blocks = data;
+        return true;
+      });
+    }
   }
 
   function _init(mode, infos)
@@ -350,10 +394,18 @@ blockchainExplorer = function(){
           if (parseInt(a.height) > parseInt(b.height)) return -1;
           return 0;
         });
+        _initBlockSelector();
         return true;
       });
     }
 
+    if (_empty_blocks == null)
+    {
+      $.getJSON('data/getEmptyBlocksList.php', function( data ) {
+        _empty_blocks = data;
+        return true;
+      });
+    }
     return _initBlockchain('LAST');
   }
 
@@ -372,12 +424,100 @@ blockchainExplorer = function(){
     return _liste_blocks['LENGTH'];
   }
 
+  function _initOneBlock(block_name)
+  {
+    var block_hash_url = 'data/getBlockInfo.php';
+
+    $('#blockchain').html('');
+
+    if (block_name != 'LAST') block_hash_url += '?block_hash='+_getblocHashFromName(block_name);
+
+    $.getJSON(block_hash_url, function( data ) {
+      allMethod = [
+        'circle',
+        'circle_line',
+        'circles',
+        'circle_spline',
+        'circles_spline',
+        'line',
+        'linegradient',
+        'linehashed',
+        'linehashedtx',
+        'mondrian',
+        'peigne',
+        'peignealpha',
+        'spirale',
+        'splinelineblack',
+        'splinelineblackalpha',
+        'splinelinegradient',
+        'splinelinegradientalpha',
+        'treemap2',
+        'tylerhobbs',
+        'veraMolnar'
+      ];
+  
+      for(i=0;i<allMethod.length;i++)
+      {
+        _cur_methode = allMethod[i];
+
+        if (data.img_list.includes('/opt/TOPISTO/data/'+_cur_methode+'/'+data.hash+'.png'))
+        {
+          _addDivForBlock(_cur_methode);        
+
+          _addInfoForBlock(data, _cur_methode);
+        }
+      }
+    });
+
+    return true;
+  }
+
+  function _initEmptyBlocks()
+  {
+    _init(2,false);
+  }
+
+  function _showBlockAllMethod(blockname)
+  {
+    allMethod = [
+      'circle',
+      'circle_line',
+      'circles',
+      'circle_spline',
+      'circles_spline',
+      'line',
+      'linegradient',
+      'linehashed',
+      'linehashedtx',
+      'mondrian',
+      'peigne',
+      'peignealpha',
+      'spirale',
+      'splinelineblack',
+      'splinelineblackalpha',
+      'splinelinegradient',
+      'splinelinegradientalpha',
+      'treemap2',
+      'tylerhobbs',
+      'veraMolnar'
+    ];
+
+    block_hash = _getblocHashFromName(blockname);
+    
+    return true;
+  }
+
   return {
 
     addTopBlock: _addTopBlock,
     addBottomBlock: _addBottomBlock,
     getblocHashFromName: _getblocHashFromName,
 
+    initOneBlock : _initOneBlock,
+    initBlockSelector : _initBlockSelector,
+
+    initEmptyBlocks : _initEmptyBlocks,
+
     toggleInfos: _toggleInfos,
     getLength: _getLength,
 

nft.php

@@ -21,16 +21,14 @@
   <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);
+    var lastScroll = 0;
 
-      getMyAdressInfos();
-
-      setParallax();
+    $(document).ready(function(){
+      // Mask navigator scrollbar
+      // Doesn't work : can't scroll anymore
+      //$("body").css('overflow', 'hidden');
 
       $('#myNavbar').on('show.bs.collapse', function () {
         $('#logo_topisto').css({'height' : '30px','width' : '30px'});
@@ -41,115 +39,38 @@
         $('#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");
-          }
-        });
+        if ( window.scrollY > (2200+lastScroll))
+        {
+            lastScroll = window.scrollY;
+            if ($('#blockSelector').val() == 'EMPTY')
+              blockchainExplorer.addBottomBlock();
+        }
       });
-    });
 
+      blockchainExplorer.initBlockSelector();
+      selectBlock();
+
+    });
 
-    /*
-     *
-     * 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()
+    function showInfos()
     {
-        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);         
-        }
+      selectBlock();
     }
 
-    /*
-     * 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() 
+    function toggleInfos()
     {
-      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);
-        });
-      });
+      blockchainExplorer.toggleInfos();
     }
 
-   function setParallax()
-   {
-      var image = document.getElementsByClassName('simple-parallax');
-      new simpleParallax(image,{
-            scale: 1.5,
-            overflow: true,
-            orientation: 'down'
-      });
-   }
-
+    function selectBlock() 
+    {
+      lastScroll = 0;
+      if ($('#blockSelector').val() != 'EMPTY')
+        blockchainExplorer.initOneBlock($('#blockSelector').val());
+      else
+        blockchainExplorer.initEmptyBlocks();
+    }
   </script>
 
 </head>
@@ -164,89 +85,38 @@
         <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>
+        <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="#about">About</a></li>
+        <li><a href="about.php">About</a></li>
         <li><a href="index.php">Explorer</a></li>
+        <li><a href="#nft">NFT</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 id="nft" class="container-fluid bg-grey navbar-fixed-top" 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 class="col-sm-12 text-right">
+      <br>
+      <select id="blockSelector" onchange="selectBlock()">
+        <option value='LAST'>LAST</option>
+        <option value='EMPTY'>EMPTY BLOCKS</option>
+      </select>
+      <br>
+      <label>show block infos&nbsp;</label><input id="mode_checkbox" type="checkbox" onchange="toggleInfos()">
+      <br>Sorry buy NFT is not yet avalaible !
+      <br>Coming soon ...
     </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">
-      <p class="text-justify">
-        <br><b>Sorry ! </b>
-      </p>
-      <p class="text-justify">
-	    This function is not yet avalaible ...
-      </p>
-      <p class="text-justify">
-    	But thank you to have clicked on the previous link, it helps me to know if there is a demand.  
-      </p>
-      <p class="text-justify">
-	    If you want to support the project, you can donate to the BTC address listed above ...
-      </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>
+<div id="blockchain" style="position:absolute;top:210px;width:100%"></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>