nft phase 2

about.php

@@ -172,6 +172,7 @@
       <ul class="nav navbar-nav navbar-right">
         <li><a href="#espace">About</a></li>
         <li><a href="index.php">Explorer</a></li>
+        <li><a href="nft.php">NFT</a></li>
         <li><a href="blog.php">Blog</a></li>
       </ul>
     </div>
@@ -217,7 +218,7 @@
 <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 own TOPISTO !</h4>
+      <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.

blog.php

@@ -172,6 +172,7 @@
       <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="nft.php">NFT</a></li>
         <li><a href="#explorer">Blog</a></li>
       </ul>
     </div>

index.php

@@ -83,6 +83,7 @@
       <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>

js/blockexplorer.js

@@ -64,7 +64,7 @@ blockchainExplorer = function(){
     return ladateStr;
   }
 
-  function _addInfoForBlock(block)
+  function _addInfoForBlock(block, p_div_label)
   {
     var contenu = '';
     var downloadingImage = new Image();
@@ -77,15 +77,19 @@ blockchainExplorer = function(){
     blockName = _getblockNameFromHash(block.hash);
     if (block.hash == _liste_blocks['TOP']) {
       blockName = 'LAST BLOCK';
-      if (_mode == 1) div_label = 'LAST';
+      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_'+block.height+'" style="color:black;height:220px">';
+    contenu += '<div id="img_'+div_label+'" 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>';
@@ -102,7 +106,7 @@ blockchainExplorer = function(){
     $('#info_'+div_label).html(contenu);
 
     downloadingImage.onload = function(){
-      var div0 = document.getElementById('img_'+block.height);
+      var div0 = document.getElementById('img_'+div_label);
       div0.style.backgroundImage = "url(" + this.src + ")";
       div0.style.backgroundRepeat = "no-repeat";
       div0.style.backgroundPosition = "center";
@@ -292,7 +296,6 @@ blockchainExplorer = function(){
     _liste_blocks = [];
     _liste_blocks['LENGTH'] = 0;
 
-    $(document).scrollTop( $("#explorer").offset().top );
     $('#blockchain').html('');
 
     if (block_name != 'LAST') block_hash_url += '?block_hash='+_getblocHashFromName(block_name);
@@ -329,10 +332,13 @@ blockchainExplorer = function(){
     // Init the selector
     var select = $('#blockSelector');
 
-    $.each(_liste_blocks, function (key, bloc) {
+    if (select !== null) {
+      select.append(new Option('LAST', 'LAST'));
+      $.each(_known_blocks, function (key, bloc) {
         select.append(new Option(bloc.name, bloc.name));
       });
     }
+  }
 
   function _init(mode, infos)
   {
@@ -350,6 +356,7 @@ blockchainExplorer = function(){
           if (parseInt(a.height) > parseInt(b.height)) return -1;
           return 0;
         });
+        _initBlockSelector();
         return true;
       });
     }
@@ -372,12 +379,89 @@ 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];
+
+        _addDivForBlock(_cur_methode);        
+
+        _addInfoForBlock(data, _cur_methode);
+      }
+    });
+
+    return true;
+  }
+
+  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,
+
     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>
+
+    var lastScroll = 0;
+
     $(document).ready(function(){
-
+      // Mask navigator scrollbar
-      setInterval(changeGargoyle,10000);
+      // Doesn't work : can't scroll anymore
-
+      //$("body").css('overflow', 'hidden');
-      getMyAdressInfos();
-
-      setParallax();
 
       $('#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(){
+        if ( window.scrollY > (2200+lastScroll))
-          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)
+            lastScroll = window.scrollY;
-        {
+            if ($('#blockSelector').val() == 'FULL')
-          preloadImages(gargoyles, function(){
+              blockchainExplorer.addBottomBlock();
-            topistoConsole.log("All Gargoyles are loaded");
-          });
-        } else {
-          r = Math.floor(Math.random() * gargoyles.length);
-          $("#gargoyle").attr("src", gargoyles[r].src);         
         }
+      });
+
+      showInfos();
+
+    });
+
+    function showInfos()
+    {
+      lastScroll = 0;
+      blockchainExplorer.init(0, false);
     }
 
-    /*
+    function toggleInfos()
-     * 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';
+      blockchainExplorer.toggleInfos();
-      $.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()
+    function selectBlock() 
     {
-      var image = document.getElementsByClassName('simple-parallax');
+      lastScroll = 0;
-      new simpleParallax(image,{
+      if ($('#blockSelector').val() == 'FULL')
-            scale: 1.5,
+        blockchainExplorer.init(0, false);
-            overflow: true,
+      else 
-            orientation: 'down'
+        blockchainExplorer.initOneBlock($('#blockSelector').val());
-      });
     }
-
   </script>
 
 </head>
@@ -170,83 +91,30 @@
     </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">
+    <div class="col-sm-12 text-right">
-      <br>BTC adress : <a href="https://www.blockchain.com/btc/address/15V7XfBX2Xn5uKpK3VuVngDg44TSKLtTSh">15V7XfBX2Xn5uKpK3VuVngDg44TSKLtTSh</a>
+      <br>
-      <br><div id="BTC_CHANGE">&nbsp; &#8383 - &nbsp; $ - &nbsp; €</div>
+      <select id="blockSelector" onchange="selectBlock()">
+        <option value='FULL'>Full Blockchain</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 ! Coming soon ...
     </div>
   </div>
 </div>
 
-<div id="about" class="container-fluid bg-grey" style="padding-top:5px;padding-bottom:5px">
+<div id="blockchain" style="position:absolute;top:210px;width:100%"></div>
-  <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>
-
-<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>