{% 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> </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> </div> </div> </div>