ourworld_web/www_tf_demo
23
0
Fork 0
Code Pull Requests Activity

edit

Browse Source
This commit is contained in:
sasha-astiadi
2024-11-14 06:17:39 +01:00
parent 6c3d462f06
commit bccc56ee8e
16 changed files with 97 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
templates/shortcodes/grid_stats.html
View File

@@ -1,9 +1,12 @@
<section class="px-2 py-24 bg-center lg:py-54">
<section class="px-2 py-24 bg-transparent lg:py-54">
<div class="mx-auto max-w-3xl sm:text-center">
<div class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80" aria-hidden="true">
<div class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
</div>
<h2 class="text-xl text-center font-normal tracking-wide text-indigo-600">LIVE AND OPERATIONAL</h2>
<p class="mt-4 text-center text-pretty text-4xl font-semibold tracking-tight text-gray-900 sm:text-balance sm:text-5xl">Proven by a Global Community</p>
<p class="mt-6 text-lg text-center font-light text-gray-600">With ThreeFold, individuals, organizations, communities, countries, and network states deploy their own sovereign infrastructure. The ThreeFold Grid has been live and operational since 2017. Version 3.14 is live on Mainnet</p>
<p class="mt-6 text-lg text-center font-light text-gray-700">With ThreeFold, individuals, organizations, communities, countries, and network states deploy their own sovereign infrastructure. The ThreeFold Grid has been live and operational since 2017. Version 3.14 is live on Mainnet</p>
</div>
<div class="relative mx-auto mt-10">
<div class="text-center rounded lg:px-6 mx-auto">
@@ -11,43 +14,46 @@
<!-- 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. 1 petabyte equals roughly 1 million gigabytes.</span>
<img class="mx-auto p-4 fade-image" src="images/V3-08.png" width="130" alt="">
<img class="mx-auto p-4 fade-image" src="images/V3-081.png" width="130" alt="">
<div id="capacity" class="leading-none font-extrabold text-xl">19.10 PB</div>
<span class="block text-md mt-1 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 fade-image" src="images/V3-11.png" width="130" alt="">
<img class="mx-auto p-4 fade-image" src="images/V3-112.png" width="130" alt="">
<div id="cores" class="leading-none font-extrabold text-xl">46,934</div>
<span class="block text-md mt-2 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 fade-image" src="images/V3-09.png" width="130" alt="">
<img class="mx-auto p-4 fade-image" src="images/V3-091.png" width="130" alt="">
<div id="nodes" class="leading-none font-extrabold text-xl">1596</div>
<span class="block text-md mt-2 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 fade-image" src="images/V3-10.png" width="130" alt="">
<img class="mx-auto p-4 fade-image" src="images/V3-102.png" width="130" alt="">
<div id="countries" class="leading-none font-extrabold text-xl">41</div>
<span class="block text-md mt-2 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 fade-image" src="images/farm.png" width="130" alt="">
<img class="mx-auto p-4 fade-image" src="images/v3-131.png" width="130" alt="">
<div id="farms" class="leading-none font-extrabold text-xl">900+</div>
<span class="block text-md mt-2 font-normal capitalize">Farms</span>
</div>
</div>
<div class="mt-12 flex items-center justify-center gap-x-6 mb-24">
<a href="#" class="rounded-xl bg-indigo-600 px-8 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Explore Grid Capacity</a>
<a href="#" class="rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Explore Grid Capacity</a>
<a href="#" class="text-sm/6 font-semibold text-gray-900">Learn more <span aria-hidden="true">→</span></a>
</div>
<div class="absolute inset-x-0 -bottom-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-bottom-80" aria-hidden="true">
<div class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
</div>
</div>
</div>
</section>
@@ -127,7 +133,7 @@
@keyframes fade {
0%, 100% {
opacity: 0.5;
opacity: 0.7;
}
50% {
opacity: 1;