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 04:37:19 +01:00
parent 49ed5bfbbc
commit 6c3d462f06
41 changed files with 384 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

218
templates/shortcodes/grid_stats.html
View File

@@ -1,78 +1,150 @@
{% set styles = "background-image: url('/images/ston_bg.png');" %}
{% set data = load_data(url="https://gridproxy.grid.tf/stats?status=up", required=false, format="json") %}
{% if data %}
{% set capacity = data.totalHru + data.totalSru / (1024 * 1024 * 1024 * 1024) %}
{% set nodes = data.nodes %}
{% set countries = data.countries %}
{% endif %}
<style>
.bg-map {
background-color: #EAE8E3;
}
</style>
<div class="bg-map pb-24">
<div class="relative max-w-7xl mx-auto">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 ">
<div class=" overflow-hidden">
<div class="px-2 py-16">
<div class="flex items-start">
<div class="flex-shrink-0">
<img src="/images/node_icon.png" width="65" alt="">
</div>
<div class="ml-5 w-0 flex-1 pt-3">
<dl>
<dd class="flex items-baseline mb-5 ">
<div class="text-6xl advance leading-8 font-extrabold text-gray-900">
{{ nodes }}
</div>
</dd>
<dt class="text-2xl leading-8 uppercase font-medium text-gray-900 truncate">
freeflow nodes <br />deployed
</dt>
</dl>
</div>
</div>
<section class="px-2 py-24 bg-center lg:py-54">
<div class="mx-auto max-w-3xl sm:text-center">
<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>
</div>
<div class="relative mx-auto mt-10">
<div class="text-center rounded lg:px-6 mx-auto">
<div class="items 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. 1 petabyte equals roughly 1 million gigabytes.</span>
<img class="mx-auto p-4 fade-image" src="images/V3-08.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="">
<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="">
<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="">
<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="">
<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=" overflow-hidden bg-no-repeat bg-center bg-contain text-center" style="{{styles}}">
<div class="px-2 py-16">
<div class="flex items-start">
<div class="ml-5 w-0 flex-1 pt-3">
<dl>
<dd class="flex items-baseline mb-5 ">
<div class="text-6xl advance leading-8 mx-auto font-extrabold text-gray-900">
{{ countries }}
</div>
</dd>
<dt class="text-2xl leading-8 uppercase font-medium text-gray-900 truncate">
countries <br />involved
</dt>
</dl>
</div>
</div>
</div>
</div>
<div class=" overflow-hidden">
<div class="px-2 py-16">
<div class="flex items-start">
<div class="flex-shrink-0">
<img src="/images/capacity_icon.png" width="65" alt="">
</div>
<div class="ml-5 w-0 flex-1 pt-3">
<dl>
<dd class="flex items-baseline mb-5 ">
<div class="text-6xl advance leading-8 font-extrabold text-gray-900">
{{ capacity | round() }}TB
</div>
</dd>
<dt class="text-2xl leading-8 uppercase font-medium text-gray-900 truncate">
capacity <br />generated
</dt>
</dl>
</div>
</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="text-sm/6 font-semibold text-gray-900">Learn more <span aria-hidden="true">→</span></a>
</div>
</div>
</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;
font-weight: 200;
/* 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;
}
}
@keyframes fade {
0%, 100% {
opacity: 0.5;
}
50% {
opacity: 1;
}
}
.fade-image {
animation: fade 3s infinite;
}
</style>