implement network page, hide unused menus

css/common.css

@@ -15,6 +15,10 @@ a, a:hover {
   text-decoration: none
 }
 
+table {
+  border-spacing: 0
+}
+
 /* backgrounds */
 .bg-logo-1 {
   background-image: url('/image/logo-1.png');
@@ -145,11 +149,31 @@ a.c-4:hover {
   color: #fff
 }
 
+.c-5 {
+  color: #ce3e3e
+}
+
+.c-6 {
+  color: #ddab22
+}
+
+.c-7 {
+  color: #44c508
+}
+
 /* dimensions */
+.w-100-100 {
+  width: 100%
+}
+
 .w-33-100 {
   width: 33%
 }
 
+.w-50-100 {
+  width: 50%
+}
+
 .h-28 {
   height: 28px
 }
@@ -163,9 +187,11 @@ a.c-4:hover {
 }
 
 /* paddings */
+
 .mw-680 {
   max-width: 680px
 }
+
 .mw-1024 {
   max-width: 1024px
 }
@@ -175,6 +201,11 @@ a.c-4:hover {
   margin-right: auto
 }
 
+.mx-16 {
+  margin-left: 16px;
+  margin-right: 16px
+}
+
 .my-36 {
   margin-top: 36px;
   margin-bottom: 36px
@@ -190,6 +221,26 @@ a.c-4:hover {
   margin-bottom: 100px
 }
 
+.mt-100 {
+  margin-top: 100px
+}
+
+.mt-10 {
+  margin-top: 10px
+}
+
+.mt-20 {
+  margin-top: 20px
+}
+
+.mt-24 {
+  margin-top: 24px
+}
+
+.mt-48 {
+  margin-top: 48px
+}
+
 .mr-6 {
   margin-right: 6px
 }
@@ -210,16 +261,28 @@ a.c-4:hover {
   margin-bottom: 48px
 }
 
+.p-8 {
+  padding: 8px
+}
+
 .p-16 {
   padding: 16px
 }
 
+.pt-16 {
+  padding-top: 16px
+}
+
 .pb-10 {
   padding-bottom: 10px
 }
 
-.pl-26 {
+.pb-20 {
-  padding-left: 28px
+  padding-bottom: 20px
+}
+
+.pb-36 {
+  padding-bottom: 36px
 }
 
 .px-16 {
@@ -286,6 +349,17 @@ a.c-4:hover {
   border-bottom-style: solid
 }
 
+
+.bb-1-2 {
+  border-bottom-width: 1px;
+  border-bottom-style: dashed
+}
+
+.bb-2 {
+  border-bottom-width: 2px;
+  border-bottom-style: solid
+}
+
 .b-c-0 {
   border-color: #fff
 }
@@ -298,6 +372,10 @@ a.c-4:hover {
   border-color: #b9aa96
 }
 
+.b-c-6 {
+  border-color: #4A5466
+}
+
 .b-c-101 { /* branding namespace reserved from 100-199 */
   border-color: #c7ffe9
 }

index.html

@@ -20,10 +20,13 @@
         <div class="px-16">
           <span class="c-0 ml-16"><i class="bi-house-door mr-6"></i>Home</span>
           <a class="c-1 ml-16" href="/install.html"><i class="bi-download mr-6"></i>Install</a>
+          <a class="c-1 ml-16" href="/network.html"><i class="bi-server mr-6"></i>Network</a>
+          <!-- todo
           <a class="c-1 ml-16" href="#"><i class="bi-tv mr-6"></i>Features</a>
           <a class="c-1 ml-16" href="#"><i class="bi-info-circle mr-6"></i>Docs</a>
           <a class="c-1 ml-16" href="#"><i class="bi-wallet mr-6"></i>Fundation</a>
           <a class="c-1 ml-16" href="#"><i class="bi-pie-chart mr-6"></i>Statute</a>
+          -->
         </div>
       </div>
     </div>

install.html

@@ -20,10 +20,13 @@
         <div class="px-16">
           <a class="c-1 ml-16" href="/"><i class="bi-house-door mr-6"></i>Home</a>
           <span class="c-0 ml-16"><i class="bi-download mr-6"></i>Install</span>
+          <a class="c-1 ml-16" href="/network.html"><i class="bi-server mr-6"></i>Network</a>
+          <!-- todo
           <a class="c-1 ml-16" href="#"><i class="bi-tv mr-6"></i>Features</a>
           <a class="c-1 ml-16" href="#"><i class="bi-info-circle mr-6"></i>Docs</a>
           <a class="c-1 ml-16" href="#"><i class="bi-wallet mr-6"></i>Fundation</a>
           <a class="c-1 ml-16" href="#"><i class="bi-pie-chart mr-6"></i>Statute</a>
+          -->
         </div>
       </div>
     </div>

js/network.js

@@ -0,0 +1,79 @@
+
+function getCountry(answer, element) {
+
+  element.children('td:eq(3)').html('');
+
+  $(answer).each(function() {
+    $.ajax({
+      type: 'GET',
+      url: 'http://www.geoplugin.net/json.gp?ip=' + this.data,
+      dataType: 'json',
+      success: function (result) {
+        if (result.geoplugin_countryCode && result.geoplugin_countryCode != '' && result.geoplugin_countryCode != 'undefined') {
+          element.children('td:eq(3)').append(' ' + result.geoplugin_countryCode + ' ');
+        }
+      }
+    });
+  });
+}
+
+function nsLookup(host) {
+  $.ajax({
+    type: 'GET',
+    url: 'https://dns.google/resolve?name=' + host,
+    dataType: 'json',
+    success: function (result) {
+
+      if (result.Answer) {
+
+        var peers = result.Answer.length;
+
+        var element = $('tr[data-host="' + host + '"');
+
+        if (peers == 1) {
+          element.children('td:eq(0)').find('i').removeClass('c-5');
+          element.children('td:eq(0)').find('i').addClass('c-6');
+        } else if (peers > 1) {
+          element.children('td:eq(0)').find('i').removeClass('c-5');
+          element.children('td:eq(0)').find('i').addClass('c-7');
+        }
+
+        element.children('td:eq(2)').html(peers);
+
+        getCountry(result.Answer, element);
+      }
+    }
+  });
+}
+
+$( document ).ready(function() {
+
+  /*
+  nsLookup('seed.twister.net.co');
+  nsLookup('seed2.twister.net.co');
+  nsLookup('seed3.twister.net.co');
+  nsLookup('dnsseed.gombadi.com');
+  nsLookup('twisterseed.tk');
+  nsLookup('cruller.tasty.sexy');
+  nsLookup('twister-seeder.muh.freedu.ms');
+  nsLookup('twisterarmyseed.tk');
+  */
+
+
+  $('#vmap').vectorMap({
+    map: 'world_en',
+    backgroundColor: '#596374',
+    borderColor: '#fff',
+    borderOpacity: 0.25,
+    borderWidth: 1,
+    color: '#ccc',
+    enableZoom: true,
+    hoverColor: '#fff',
+    hoverOpacity: null,
+    normalizeFunction: 'linear',
+    scaleColors: ['#b6d6ff', '#005ace'],
+    selectedColor: '#fff',
+    selectedRegions: null,
+    showTooltip: true,
+  });
+});

network.html

@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>Twisterarmy - Network Status</title>
+  <link rel="stylesheet" type="text/css" href="/css/font.css" />
+  <link rel="stylesheet" type="text/css" href="/css/bi.css" />
+  <link rel="stylesheet" type="text/css" href="/css/common.css" />
+  <link rel="stylesheet" type="text/css" href="/css/mobile.css" />
+  <script src="/js/jquery.js" type="text/javascript"></script>
+  <script src="/js/jquery.vmap.js" type="text/javascript" ></script>
+  <script src="/js/jquery.vmap.world.js" type="text/javascript"></script>
+  <script src="/js/network.js" type="text/javascript"></script>
+</head>
+<body class="bg-c-1 bg-img-1 c-0">
+  <div class="bg-c-2 bg-img-2 c-1 of-hidden">
+    <div class="mw-1024 mx-auto">
+      <div class="nav float-left h-48 lh-48">
+        <div class="px-16">
+          <a class="c-1 f-size-18" href="/">Twisterarmy <i>Gateway</i></a>
+        </div>
+      </div>
+      <div class="nav bg-c-2 bg-img-2 float-right t-right h-48 lh-48">
+        <div class="px-16">
+          <a class="c-1 ml-16" href="/"><i class="bi-house-door mr-6"></i>Home</a>
+          <a class="c-1 ml-16" href="/install.html"><i class="bi-download mr-6"></i>Install</a>
+          <span class="c-0 ml-16"><i class="bi-server mr-6"></i>Network</span>
+          <!-- todo
+          <a class="c-1 ml-16" href="#"><i class="bi-tv mr-6"></i>Features</a>
+          <a class="c-1 ml-16" href="#"><i class="bi-info-circle mr-6"></i>Docs</a>
+          <a class="c-1 ml-16" href="#"><i class="bi-wallet mr-6"></i>Fundation</a>
+          <a class="c-1 ml-16" href="#"><i class="bi-pie-chart mr-6"></i>Statute</a>
+          -->
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="mw-1024 mx-auto of-hidden">
+    <div class="mx-16">
+      <h1 class="f-size-26 my-48 pb-36 pt-16 t-center f-normal bb-1-2 b-c-0">Network Status</h1>
+      <h2 class="f-size-20 mt-48 pb-10 f-normal t-center">Service Nodes</h2>
+      <div class="mx-auto mt-20 bg-c-3 b-r-3 b-c-0 b-1">
+        <table class="w-100-100">
+          <tr>
+            <th class="t-center bb-2 b-c-6 p-16">Status</th>
+            <th class="t-left pl-26 bb-2 b-c-6 p-16">DNS Seed</th>
+            <th class="t-center bb-2 b-c-6 p-16">Peers</th>
+            <th class="t-center bb-2 b-c-6 p-16">Location</th>
+          </tr>
+          <tr data-host="seed.twister.net.co">
+            <td class="t-center bb-2 b-c-6 p-8"><i class="bi-info-circle mr-6 f-size-26 p-16 c-5"></i></td>
+            <td class="t-left pl-26 bb-2 b-c-6 p-8">seed.twister.net.co</td>
+            <td class="t-center bb-2 b-c-6 p-8">0</td>
+            <td class="t-center bb-2 b-c-6 p-8">-</td>
+          </tr>
+          <tr data-host="seed2.twister.net.co">
+            <td class="t-center bb-2 b-c-6 p-8"><i class="bi-info-circle mr-6 f-size-26 p-16 c-5"></i></td>
+            <td class="t-left bb-2 b-c-6 pl-26 p-8">seed2.twister.net.co</td>
+            <td class="t-center bb-2 b-c-6 p-8">0</td>
+            <td class="t-center bb-2 b-c-6 p-8">-</td>
+          </tr>
+          <tr data-host="seed3.twister.net.co">
+            <td class="t-center bb-2 b-c-6 p-8"><i class="bi-info-circle mr-6 f-size-26 p-16 c-5"></i></td>
+            <td class="t-left bb-2 b-c-6 pl-26 p-8">seed3.twister.net.co</td>
+            <td class="t-center bb-2 b-c-6 p-8">0</td>
+            <td class="t-center bb-2 b-c-6 p-8">-</td>
+          </tr>
+          <tr data-host="dnsseed.gombadi.com">
+            <td class="t-center bb-2 b-c-6 p-8"><i class="bi-info-circle mr-6 f-size-26 p-16 c-5"></i></td>
+            <td class="t-left bb-2 b-c-6 pl-26 p-8">dnsseed.gombadi.com</td>
+            <td class="t-center bb-2 b-c-6 p-8">0</td>
+            <td class="t-center bb-2 b-c-6 p-8">-</td>
+          </tr>
+          <tr data-host="twisterseed.tk">
+            <td class="t-center bb-2 b-c-6 p-8"><i class="bi-info-circle mr-6 f-size-26 p-16 c-5"></i></td>
+            <td class="t-left bb-2 b-c-6 pl-26 p-8">twisterseed.tk</td>
+            <td class="t-center bb-2 b-c-6 p-8">0</td>
+            <td class="t-center bb-2 b-c-6 p-8">-</td>
+          </tr>
+          <tr data-host="cruller.tasty.sexy">
+            <td class="t-center bb-2 b-c-6 p-8"><i class="bi-info-circle mr-6 f-size-26 p-16 c-5"></i></td>
+            <td class="t-left bb-2 b-c-6 pl-26 p-8">cruller.tasty.sexy</td>
+            <td class="t-center bb-2 b-c-6 p-8">0</td>
+            <td class="t-center bb-2 b-c-6 p-8">-</td>
+          </tr>
+          <tr data-host="twister-seeder.muh.freedu.ms">
+            <td class="t-center bb-2 b-c-6 p-8"><i class="bi-info-circle mr-6 f-size-26 p-16 c-5"></i></td>
+            <td class="t-left bb-2 b-c-6 pl-26 p-8">twister-seeder.muh.freedu.ms</td>
+            <td class="t-center bb-2 b-c-6 p-8">0</td>
+            <td class="t-center bb-2 b-c-6 p-8">-</td>
+          </tr>
+          <tr data-host="twisterarmyseed.tk">
+            <td class="t-center p-8"><i class="bi-info-circle mr-6 f-size-26 p-16 c-5"></i></td>
+            <td class="t-left pl-26 p-8">twisterarmyseed.tk</td>
+            <td class="t-center p-8">0</td>
+            <td class="t-center p-8">-</td>
+          </tr>
+        </table>
+      </div>
+      <!--
+        <div id="vmap"></div>
+      -->
+      <div class="t-center my-36">
+        <a href="https://github.com/twisterarmy/twister-seeder" class="c-1">Become Service Node</a>
+      </div>
+    </div>
+  </div>
+</body>