From 6c80a0f7f447958929cd4aa6f69c8cc0f7cae2e5 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Wed, 26 Feb 2025 02:03:31 +0800
Subject: [PATCH] grid ststs

---
 templates/partials/about/grid_stats.html | 133 +++++++++++++++++++
 templates/shortcodes/grid_stats.html     | 162 +++++++++++++++++++++++
 2 files changed, 295 insertions(+)
 create mode 100644 templates/partials/about/grid_stats.html
 create mode 100644 templates/shortcodes/grid_stats.html

diff --git a/templates/partials/about/grid_stats.html b/templates/partials/about/grid_stats.html
new file mode 100644
index 0000000..6c5df40
--- /dev/null
+++ b/templates/partials/about/grid_stats.html
@@ -0,0 +1,133 @@
+<div class="bg-transparent relative isolate overflow-hidden">
+    <div class="mx-auto max-w-7xl px-6 lg:px-8">
+      <div class="mx-auto max-w-2xl lg:max-w-none">
+        <dl class="items grid grid-cols-1 gap-2 overflow-hidden rounded-2xl text-center sm:grid-cols-2 lg:grid-cols-4">
+            <!-- ssd -->
+          <div class="fade-in flex flex-col justify-center items-center bg-transparent p-3">
+            <div class="tooltip rounded-[1.5rem] ring-1  ring-black/5 py-6 shadow-md shadow-black/5">
+              <span class="tooltiptext">The total amount of storage (SSD, HDD, & RAM) on the grid.</span>
+              <dt class="text-sm/6 font-light text-black">SSD CAPACITY</dt>
+              <dd id="ssd" class="order-first text-3xl font-semibold tracking-tight text-black"></dd>
+            </div>
+          </div>
+            <!-- cores -->
+            <div class="fade-in flex flex-col bg-transparent p-4">
+              <div class="tooltip rounded-[1.5rem] ring-1  ring-black/5 py-6 shadow-md shadow-black/5">
+              <span class="tooltiptext">The total number of Central Processing Unit cores (compute power) available on the grid.</span>
+              <dt class="text-sm/6 font-light text-black">CORES</dt>
+              <dd id="cores" class="order-first text-3xl font-semibold tracking-tight text-black"></dd>
+            </div>
+            </div>
+            <!-- Nodes -->
+            <div class="fade-in flex flex-col bg-transparent p-4">
+              <div class="tooltip rounded-[1.5rem] ring-1  ring-black/5 py-6 shadow-md shadow-black/5">
+              <span class="tooltiptext">The total number of nodes on the grid. A node is a computer server 100% dedicated to the network.</span>
+              <dt class="text-sm/6 font-light text-black">NODES</dt>
+              <dd id="nodes" class="order-first text-3xl font-semibold tracking-tight text-black"></dd>
+            </div>
+            </div>
+            <!-- countries -->
+            <div class="fade-in flex flex-col bg-transparent p-4">
+              <div class="tooltip rounded-[1.5rem] ring-1  ring-black/5 py-6 shadow-md shadow-black/5">
+              <span class="tooltiptext">The total number of countries where at least one node is connected and operational.</span>
+              <dt class="text-sm/6 font-light text-black">COUNTRIES</dt>
+              <dd id="countries" class="order-first text-3xl font-semibold tracking-tight text-black"></dd>
+            </div>
+            </div>
+          </dl>
+      </div>
+    </div>
+    <div class="mt-10 flex items-center justify-center gap-x-8">
+      <a href="https://threefold.io"
+      target="_blank"
+        class="fade-in rounded-2xl bg-black px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:text-gray-800 hover:bg-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">
+        Visit  ThreeFold</a>
+      <a href="https://dashboard.grid.tf/#/tf-grid/node-statistics/" target="_blank"  class="fade-in text-base font-semibold text-black hover:text-gray-800 ">Explore Grid Capacity<span
+          aria-hidden="true">→</span></a>
+    </div>
+  </div>
+  
+  <script>
+    document.addEventListener('DOMContentLoaded', function () {
+      // Initialize the countUp for each of the numbers
+      new CountUp('ssd', 0, 1910, 0, 2.5).start();
+      new CountUp('cores', 0, 46934, 0, 2.5).start();
+      new CountUp('nodes', 0, 1596, 0, 2.5).start();
+      new CountUp('countries', 0, 40, 0, 2.5).start();
+      new CountUp('farms', 0, 900, 0, 2.5).start();
+    });
+  </script>
+  
+
+<style>
+    /* Define the fade-in animation */
+    @keyframes fadeIn {
+      0% {
+        opacity: 0;
+      }
+      100% {
+        opacity: 1;
+      }
+    }
+  
+    /* Apply the fade-in animation to elements with the 'fade-in' class */
+    .fade-in {
+      animation: fadeIn 4s ease-in-out forwards; /* Adjust the duration (2s) to make it slower or faster */
+    }
+  
+    /* Optional: Delay the animation for a more staggered effect */
+    h2 {
+      animation-delay: 0.5s; /* Delay for header */
+    }
+  
+    p {
+      animation-delay: 1s; /* Delay for paragraphs */
+    }
+
+    /* Tooltip container */
+
+.tooltip {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  background-color:white;
+}
+
+/* Tooltip text */
+.tooltip .tooltiptext {
+  font-size: 12px;
+  visibility: hidden;
+  background-color: rgb(26 26 26 / 90%);
+  color: #fff;
+  text-align: center;
+  padding: 5px 10px;
+  border-radius: 4px;
+ 
+  /* Position the tooltip text - see examples below! */
+  position: absolute;
+  z-index: 1;
+  bottom: -7px;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+  /* right: -60px; */
+}
+
+/* Show the tooltip text when you mouse over the tooltip container */
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+}
+
+@media (max-width: 480px) {
+    .tooltip .tooltiptext {
+        position: absolute;
+  z-index: 1;
+  bottom: -7px !important;
+  right: 0px !important;
+  top: 0px !important;
+  left: 0px !important;
+    }
+
+}
+  </style>
+  
\ No newline at end of file
diff --git a/templates/shortcodes/grid_stats.html b/templates/shortcodes/grid_stats.html
new file mode 100644
index 0000000..413dde9
--- /dev/null
+++ b/templates/shortcodes/grid_stats.html
@@ -0,0 +1,162 @@
+{% set styles = "background-image: url('images/V3.png');" %}
+<section class="px-2 h-auto bg-center lg:py-40 p-12 bg-cover bg-no-repeat" style="{{styles}}">
+    <div class="relative mx-auto">
+        <div class="text-center rounded lg:px-6 mt-10 lg:mt-0 mx-auto">
+            {{body | markdown | safe }}
+            <div class="items my-10 block lg:flex lg:flex-wrap justify-center items-center animate-pulse">
+                <!-- capacity -->
+                <div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
+                    <span class="tooltiptext">The total amount of storage (SSD, HDD, & RAM) on the grid.</span>
+                    <img
+                        class="mx-auto p-4"
+                        src="images/V3-08.png"
+                        width="130"
+                        alt=""
+                    >
+                    <div id="capacity" class="leading-none font-extrabold text-xl"></div>
+                    <span class="block text-md mt-4 font-normal capitalize">capacity</span>
+                </div>
+                <!-- cores -->
+                <div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
+                    <span class="tooltiptext">The total number of Central Processing Unit cores (compute power) available on the grid.</span>
+                    <img
+                        class="mx-auto p-4"
+                        src="images/V3-11.png"
+                        width="130"
+                        alt=""
+                    >
+                    <div id="cores" class="leading-none font-extrabold text-xl"></div>
+                    <span class="block text-md mt-4 font-normal capitalize">cores</span>
+                </div>
+                <!-- Nodes -->
+                <div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
+                    <span class="tooltiptext">The total number of nodes on the grid. A node is a computer server 100% dedicated to the network.</span>
+                    <img
+                        class="mx-auto p-4"
+                        src="images/V3-09.png"
+                        width="130"
+                        alt=""
+                    >
+                    <div id="nodes" class="leading-none font-extrabold text-xl"></div>
+                    <span class="block text-md mt-4 font-normal capitalize">nodes</span>
+                </div>
+                <!-- countries -->
+                <div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
+                    <span class="tooltiptext">The total number of countries where at least one node is connected and operational.</span>
+                    <img
+                        class="mx-auto p-4"
+                        src="images/V3-10.png"
+                        width="130"
+                        alt=""
+                    >
+                    <div id="countries" class="leading-none font-extrabold text-xl"></div>
+                    <span class="block text-md mt-4 font-normal capitalize">countries</span>
+                </div>
+                 <!-- farms -->
+                <div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
+                    <span class="tooltiptext">The total number of farms on the grid. A farm is one or more nodes operated by the same entity / entities.</span>
+                    <img
+                        class="mx-auto p-4"
+                        src="images/farm.png"
+                        width="130"
+                        alt=""
+                    >
+                    <div id="farms" class="leading-none font-extrabold text-xl">900+</div>
+                    <span class="block text-md mt-4 font-normal capitalize">farms</span>
+                </div>
+            </div>
+            <button class="my-8 blue_b">
+                <a href="https://dashboard.grid.tf/#/tf-grid/node-statistics/" target="_blank">
+                    Explore Grid Capacity
+                </a>
+            </button>
+            {# <button class="my-8">
+                <a href="/host" target="_self">
+                    Become a Cloud Provider
+                </a>
+            </button> #}
+        </div>
+    </div>
+</section>
+<style>
+    dd {
+        display: inline-block;
+        margin: auto;
+        border-radius: 50%;
+        line-height: 100px;
+    }
+
+    .bg-green {
+        background-color: #70dfc9;
+    }
+
+    .bg-pink {
+        background-color: #ea1ff7;
+    }
+
+    .blue_b{
+  
+        background-color:#2E83FF !important;
+        color: #fff !important;
+    
+      }
+      .blue_b a{
+         color: #fff !important;
+      }
+    
+    .blue_b:hover {
+      background-color:#5596f5 !important;
+    }
+
+ 
+
+/* Tooltip container */
+.tooltip {
+  position: relative;
+  display: inline-block;
+  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
+}
+
+/* Tooltip text */
+.tooltip .tooltiptext {
+  font-size: 14px;
+  visibility: hidden;
+  width: 250px;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  padding: 5px 10px;
+  border-radius: 4px;
+ 
+  /* Position the tooltip text - see examples below! */
+  position: absolute;
+  z-index: 1;
+  bottom: -50px;
+  right: -60px;
+}
+
+/* Show the tooltip text when you mouse over the tooltip container */
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+}
+
+@media (max-width: 480px) {
+    .tooltip .tooltiptext {
+        position: absolute;
+  z-index: 1;
+  bottom: -50px;
+  right: 0px !important;
+    }
+
+}
+
+
+</style>
+
+
+
+ 
+  
+
+    
+