ourworld_web/www_threefold_io
Archived
23
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

text light and dark at home page

Browse Source
This commit is contained in:
Ehab Hassan
2025-01-13 16:47:26 +02:00
parent f34164002c
commit 256fe586ab
8 changed files with 90 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
templates/partials/home/grid_stats.html
View File

@@ -3,51 +3,51 @@
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:max-w-none">
<div class="text-center">
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-white ">A Global Community</h2>
<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 has been 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>
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight ">A Global Community</h2>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light 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 has been operational for years.</p>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light fade-in">Version 3.15 is live on Mainnet.</p>
</div>
<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">
<!-- ssd -->
<div class="fade-in flex flex-col justify-center items-center bg-white/5 p-6">
<div class="fade-in flex flex-col justify-center items-center double_bg p-6">
<div class="tooltip">
<span class="tooltiptext">The total amount of storage (SSD, HDD, & RAM) on the grid.</span>
<dt class="text-sm/6 font-light text-gray-300">SSD CAPACITY</dt>
<dd id="ssd" class="order-first text-3xl font-semibold tracking-tight text-white"></dd>
<dt class="text-sm/6 font-light">SSD CAPACITY</dt>
<dd id="ssd" class="order-first text-3xl font-semibold tracking-tight"></dd>
</div>
</div>
<!-- cores -->
<div class="fade-in flex flex-col bg-white/5 p-6">
<div class="fade-in flex flex-col double_bg p-6">
<div class="tooltip">
<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 id="cores" class="order-first text-3xl font-semibold tracking-tight text-white"></dd>
<dt class="text-sm/6 font-light">CORES</dt>
<dd id="cores" class="order-first text-3xl font-semibold tracking-tight"></dd>
</div>
</div>
<!-- Nodes -->
<div class="fade-in flex flex-col bg-white/5 p-6">
<div class="fade-in flex flex-col double_bg p-6">
<div class="tooltip">
<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 id="nodes" class="order-first text-3xl font-semibold tracking-tight text-white"></dd>
<dt class="text-sm/6 font-light">NODES</dt>
<dd id="nodes" class="order-first text-3xl font-semibold tracking-tight"></dd>
</div>
</div>
<!-- countries -->
<div class="fade-in flex flex-col bg-white/5 p-6">
<div class="fade-in flex flex-col double_bg p-6">
<div class="tooltip">
<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 id="countries" class="order-first text-3xl font-semibold tracking-tight text-white"></dd>
<dt class="text-sm/6 font-light">COUNTRIES</dt>
<dd id="countries" class="order-first text-3xl font-semibold tracking-tight"></dd>
</div>
</div>
</dl>
</div>
<div class="max-w-4xl items-center mx-auto">
<p class="items-center text-center justify-center mt-10 text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">As we together roll out Web4 we might need millions of nodes.<br>This will establish a truly decentralized and resilient infrastructure.</p>
<p class="items-center text-center justify-center mt-10 text-pretty lg:text-xl text-lg font-light fade-in">As we together roll out Web4 we might need millions of nodes.<br>This will establish a truly decentralized and resilient infrastructure.</p>
</div>
</div>
<div class="mt-12 flex items-center justify-center gap-x-6">
<a href="https://dashboard.grid.tf/#/tf-grid/node-statistics/" target="_blank" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-green hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 mt-8">Explore Grid Capacity</a>
<a href="https://dashboard.grid.tf/#/tf-grid/node-statistics/" target="_blank" class="fade-in border-gray-500 border-2 rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-100 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 mt-8">Explore Grid Capacity</a>
</div>
</div>
@@ -73,6 +73,9 @@
opacity: 1;
}
}
.double_bg {
background-color: rgb(100 100 100 / 0.2);}
/* Apply the fade-in animation to elements with the 'fade-in' class */
.fade-in {