initial commit
This commit is contained in:
87
templates/shortcodes/grid_stats.html
Normal file
87
templates/shortcodes/grid_stats.html
Normal file
@@ -0,0 +1,87 @@
|
||||
{% set styles = "background-image: url('images/grid_map.png');" %}
|
||||
{% set data = load_data(url="https://explorer.threefold.io/api/stats", required=false, format="json") %}
|
||||
{% set capacity = data.hru + data.sru / 1000 %}
|
||||
{% set nodes = data.onlinenodes %}
|
||||
{% set countries = data.countries %}
|
||||
{% set cores = data.cru %}
|
||||
|
||||
<section class="px-2 h-auto bg-center bg-cover bg-no-repeat" style="{{styles}}">
|
||||
<div class="flex flex-wrap lg:p-12 text-center -mx-auto">
|
||||
<div class="text-center rounded lg:px-6 mt-10 lg:mt-0 mx-auto">
|
||||
{{body | markdown | safe }}
|
||||
|
||||
<div class="my-10 grid lg:grid-cols-3 lg:gap-8">
|
||||
<div class="..."></div>
|
||||
|
||||
<!-- capacity -->
|
||||
<div class="leading-none font-extrabold text-5xl">
|
||||
{{ capacity / 1000000 | round(precision=2) }}PB
|
||||
<span class="block text-3xl uppercase">capacity</span>
|
||||
</div>
|
||||
<div class="..."></div>
|
||||
|
||||
<!-- Nodes -->
|
||||
<div class="
|
||||
mx-auto
|
||||
rounded-full
|
||||
h-32
|
||||
w-32
|
||||
lg:h-60 lg:w-60
|
||||
inline-flex
|
||||
items-center
|
||||
justify-center
|
||||
bg-green
|
||||
my-4
|
||||
">
|
||||
<div class="leading-none font-extrabold md:text-6xl">
|
||||
{{ nodes }}
|
||||
<span class="block md:text-2xl uppercase">nodes</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden md:block"></div>
|
||||
|
||||
<!-- countries -->
|
||||
<div class="
|
||||
mx-auto
|
||||
rounded-full
|
||||
h-32
|
||||
w-32
|
||||
lg:h-60 lg:w-60
|
||||
inline-flex
|
||||
items-center
|
||||
justify-center
|
||||
bg-pink
|
||||
">
|
||||
<div class="leading-none font-extrabold md:text-6xl">
|
||||
{{ countries }}
|
||||
<span class="block md:text-2xl uppercase">countries</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="..."></div>
|
||||
|
||||
<!-- cores -->
|
||||
<div class="leading-none font-extrabold text-5xl">
|
||||
{{ cores | num_format }}
|
||||
<span class="block text-2xl uppercase">cores</span>
|
||||
</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;
|
||||
}
|
||||
</style>
|
Reference in New Issue
Block a user