Soon as NFT

about.php

@@ -209,7 +209,7 @@
   <div class="row slideanim">
     <div class="col-sm-4">
     Bookmarks : <br>
-      <a href="/bookmarks" target="_blank">my Shaarli</a><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>

articles/20211101/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/20211101/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/20211101/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/20211101/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/20211101/theme.css

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

index.php

@@ -54,7 +54,7 @@
         */
       });
 
-      blockchainExplorer.init(1);
+      blockchainExplorer.init(2);
     });
 
     var isInViewport = function (elem) {
@@ -105,21 +105,22 @@
   </div>
 </nav>
 
-<div id="explorer" class="container-fluid bg-grey" style="padding-bottom:10px">
+<div id="explorer" class="container-fluid bg-grey navbar-fixed-top" style="padding-bottom:10px">
   <div class="row">
     <div class="col-sm-12 text-right">
-      <br>
-      <select id="mode_selector" onchange="showInfos(this)">
-        <option value=0>A BTC blockchain explorer</option>
+      <br><small>An image for each block of the BTC Blockchain</small>
+      <br><a href="nft.php">Click here to buy a block as an NFT</a>
+      <br><select id="mode_selector" onchange="showInfos(this)">
+        <option value=0>Full Blockchain Explorer</option>
         <option value=1>My special Blocks list</option>
       </select>
-      <br>Scroll down to see the previous blocks<br>
-      <label>show infos&nbsp;</label><input id="mode_checkbox" type="checkbox" onchange="showInfos(this)" checked>
+      <br>
+      <label>show block infos&nbsp;</label><input id="mode_checkbox" type="checkbox" onchange="showInfos(this)">
     </div>
   </div>
 </div>
 
-<div id="blockchain"></div>
+<div id="blockchain" style="position:absolute;top:210px;width:100%"></div>
 
 <footer class="container-fluid bg-grey text-center slideanim">
   <a href="#myPage" title="To Top">

js/blockexplorer.js

@@ -50,7 +50,7 @@ blockchainExplorer = function(){
     var ladate = new Date(unixtime*1000);
     var ladateStr = "";
 
-    
ladate = _convertUTCDateToLocalDate(ladate);
+    
// 
ladate = _convertUTCDateToLocalDate(ladate);
 
     ladateStr += ladate.getFullYear();
     ladateStr += "/" +("00"+(ladate.getMonth()+1)).slice(-2);

nft.php

@@ -0,0 +1,250 @@
+<!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" 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">
+      <p class="text-justify">
+        <br><b>Sorry ! </b>
+      </p>
+      <p class="text-justify">
+	This function is not yet avalaible !
+	But thank you to have clicked on the previous link, it helps me to know if there is a demand.  
+      </p>
+      <p>
+	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>
+
+<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>