From 2d9198b2686ae493b3d4a62094c40b7858dfbf42 Mon Sep 17 00:00:00 2001
From: ehab-hassan <hassane@codescalers.com>
Date: Tue, 26 Nov 2024 12:48:17 +0200
Subject: [PATCH] fix grid status to be dynamic

---
 templates/partials/home/grid_stats.html | 67 +++++++++++++++++++++----
 1 file changed, 58 insertions(+), 9 deletions(-)

diff --git a/templates/partials/home/grid_stats.html b/templates/partials/home/grid_stats.html
index 84f839760..e46c3eba4 100644
--- a/templates/partials/home/grid_stats.html
+++ b/templates/partials/home/grid_stats.html
@@ -7,22 +7,30 @@
           <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">With ThreeFold, individuals, organizations, communities, countries, and network states have the potential to deploy their own sovereign infrastructure. Our Proof of Concept Network with 56,000 vCPUs is operational for years.</p>
           <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Version 3.15 is live on Mainnet.</p>
         </div>
-        <dl class="mt-16 grid grid-cols-1 gap-2 overflow-hidden rounded-2xl text-center sm:grid-cols-2 lg:grid-cols-4">
-            <div class="fade-in flex flex-col bg-white/5 p-8">
+        <dl class="items mt-16 grid grid-cols-1 gap-2 overflow-hidden rounded-2xl text-center sm:grid-cols-2 lg:grid-cols-4">
+            <!-- capacity -->
+          <div class="tooltip fade-in flex flex-col bg-white/5 p-8">
+              <span class="tooltiptext">The total amount of storage (SSD, HDD, & RAM) on the grid. 1 petabyte equals roughly 1 million gigabytes.</span>
               <dt class="text-sm/6 font-light text-gray-300">CAPACITY</dt>
-              <dd class="order-first text-3xl font-semibold tracking-tight text-white">24.73 PB</dd>
+              <dd id="capacity" class="order-first text-3xl font-semibold tracking-tight text-white"></dd>
             </div>
-            <div class="fade-in flex flex-col bg-white/5 p-8">
+            <!-- cores -->
+            <div class="tooltip fade-in flex flex-col bg-white/5 p-8">
+              <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-gray-300">CORES</dt>
-              <dd class="order-first text-3xl font-semibold tracking-tight text-white">56,114</dd>
+              <dd id="cores" class="order-first text-3xl font-semibold tracking-tight text-white"></dd>
             </div>
-            <div class="fade-in flex flex-col bg-white/5 p-8">
+            <!-- Nodes -->
+            <div class="tooltip fade-in flex flex-col bg-white/5 p-8">
+              <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-gray-300">NODES</dt>
-              <dd class="order-first text-3xl font-semibold tracking-tight text-white">2053</dd>
+              <dd id="nodes" class="order-first text-3xl font-semibold tracking-tight text-white"></dd>
             </div>
-            <div class="fade-in flex flex-col bg-white/5 p-8">
+            <!-- countries -->
+            <div class="tooltip fade-in flex flex-col bg-white/5 p-8">
+              <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-gray-300">COUNTRIES</dt>
-              <dd class="order-first text-3xl font-semibold tracking-tight text-white">52</dd>
+              <dd id="countries" class="order-first text-3xl font-semibold tracking-tight text-white"></dd>
             </div>
           </dl>
       </div>
@@ -71,5 +79,46 @@
     p {
       animation-delay: 1s; /* Delay for paragraphs */
     }
+
+    /* 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: 12px;
+  visibility: hidden;
+  width: 250px;
+  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: 4px;
+  /* 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>
   
\ No newline at end of file