ourworld_web/www_aibox
21
0
Fork 0
Code Pull Requests Activity

cleanup

Browse Source
This commit is contained in:
despiegk
2025-02-23 13:29:14 +00:00
parent 75c5930590
commit c853bc0027
24 changed files with 20 additions and 1226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
templates/shortcodes/grid_stats.html
View File

@@ -1,162 +0,0 @@
{% set styles = "background-image: url('images/V3.png');" %}
<section class="px-2 h-auto bg-center lg:py-40 p-12 bg-cover bg-no-repeat" style="{{styles}}">
<div class="relative mx-auto">
<div class="text-center rounded lg:px-6 mt-10 lg:mt-0 mx-auto">
{{body | markdown | safe }}
<div class="items my-10 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.</span>
<img
class="mx-auto p-4"
src="images/V3-08.png"
width="130"
alt=""
>
<div id="capacity" class="leading-none font-extrabold text-xl"></div>
<span class="block text-md mt-4 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"
src="images/V3-11.png"
width="130"
alt=""
>
<div id="cores" class="leading-none font-extrabold text-xl"></div>
<span class="block text-md mt-4 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"
src="images/V3-09.png"
width="130"
alt=""
>
<div id="nodes" class="leading-none font-extrabold text-xl"></div>
<span class="block text-md mt-4 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"
src="images/V3-10.png"
width="130"
alt=""
>
<div id="countries" class="leading-none font-extrabold text-xl"></div>
<span class="block text-md mt-4 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"
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-4 font-normal capitalize">farms</span>
</div>
</div>
<button class="my-8 blue_b">
<a href="https://dashboard.grid.tf/#/tf-grid/node-statistics/" target="_blank">
Explore Grid Capacity
</a>
</button>
{# <button class="my-8">
<a href="/host" target="_self">
Become a Cloud Provider
</a>
</button> #}
</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;
/* 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;
}
}
</style>

209
templates/shortcodes/jobs.html
View File

@@ -1,209 +0,0 @@
<div class="container-fluid sm:pxi-0 mx-auto py-5 overflow-visible">
<div class="bg-white">
<div class="max-w-screen-xl mx-auto py-10 px-4 sm:px-6 lg:px-8">
<div class="
mt-12
space-y-4
sm:mt-8
sm:space-y-0
sm:grid sm:grid-cols-2
sm:gap-6
lg:max-w-4xl
lg:mx-auto
xl:max-w-none
xl:mx-0
xl:grid-cols-3
">
<div class="
border border-gray-200
rounded-lg
shadow-sm
divide-y divide-gray-200
">
<div class="p-6">
<h2 class="
text-xl
leading-8
font-extrabold
text-gray-900
">
ThreeFold Grid Operations Lead
</h2>
<p class="mb-8 text-gray-600 leading-relaxed">
The ThreeFold Grid will eventually connect millions of nodes. You'll be in charge of finding
the best ways to operate such a network.
</p>
<button class="
inline-block
bg-white
text-lg
learn-button
lg:px-12
px-6
py-1
mr-5
my-4
border-2
shadow
border-black
">
<a href="/careers/grid-operations-manager">See Position</a>
</button>
</div>
</div>
<div class="
border border-gray-200
rounded-lg
shadow-sm
divide-y divide-gray-200
">
<div class="p-6">
<h2 class="
text-xl
leading-8
font-extrabold
text-gray-900
">
ThreeFold Grid Developer Lead
</h2>
<p class="mb-8 text-gray-600 leading-relaxed">
Take ownership of the ongoing development and documentation of the tech components that
constitute the ThreeFold Grid.
</p>
<button class="
inline-block
bg-white
text-lg
learn-button
lg:px-12
px-6
py-1
mr-5
my-4
border-2
shadow
border-black
">
<a href="/careers/grid-development-manager">See Position</a>
</button>
</div>
</div>
<div class="
border border-gray-200
rounded-lg
shadow-sm
divide-y divide-gray-200
">
<div class="p-6">
<h2 class="
text-xl
leading-8
font-extrabold
text-gray-900
">
Master Technical Architect
</h2>
<p class="mb-8 text-gray-600 leading-relaxed">
Take the lead on the architectural design of the Digital Twin tech and ecosystem defining a
new paradigm for the tech industry.
</p>
<button class="
inline-block
bg-white
text-lg
learn-button
lg:px-12
px-6
py-1
mr-5
my-4
border-2
shadow
border-black
">
<a href="/careers/master-architect-dt">See Position</a>
</button>
</div>
</div>
<div class="
border border-gray-200
rounded-lg
shadow-sm
divide-y divide-gray-200
">
<div class="p-6">
<h2 class="
text-xl
leading-8
font-extrabold
text-gray-900
">
Quality Assurance Engineer
</h2>
<p class="mb-8 text-gray-600 leading-relaxed">
ThreeFold is developing infrastructures and products like never before. Join the testing
team and ensure optimum tech releases.
</p>
<button class="
inline-block
bg-white
text-lg
learn-button
lg:px-12
px-6
py-1
mr-5
my-4
border-2
shadow
border-black
">
<a href="/careers/qa-engineer">See Position</a>
</button>
</div>
</div>
<div class="
border border-gray-200
rounded-lg
shadow-sm
divide-y divide-gray-200
">
<div class="p-6">
<h2 class="
text-xl
leading-8
font-extrabold
text-gray-900
">
Senior Developer
</h2>
<p class="mb-8 text-gray-600 leading-relaxed">
Join the core developer team working on our operating system Zero-OS, Digital Twin,
blockchain layers or other products we are building.
</p>
<button class="
inline-block
bg-white
text-lg
learn-button
lg:px-12
px-6
py-1
mr-5
my-4
border-2
shadow
border-black
">
<a href="/careers/senior-developer">See Position</a>
</button>
</div>
</div>
</div>
</div>
</div>
</div>

115
templates/shortcodes/tabs_tech.html
View File

@@ -1,115 +0,0 @@
<div class="container mx-auto mb-0 md:mb-24 mt-0 md:mt-4">
<div class="mb-4">
<div class="grid grid-cols-3 gap-2 mx-2 px-0 lg:px-2 font-medium text-center text-gray-500 sm:flex" id="default-styled-tab" data-tabs-toggle="#default-styled-tab-content" data-tabs-active-classes="text-purple-600 hover:text-purple-600 border-purple-600" data-tabs-inactive-classes="text-gray-500 hover:text-gray-600 border-gray-100 hover:border-gray-300" id="default-styled-tab" data-tabs-toggle="#default-styled-tab-content" data-tabs-active-classes="text-purple-600 hover:text-purple-600 border-purple-600 data-tabs-inactive-classes="text-gray-500 hover:text-gray-600 border-gray-100 hover:border-gray-300" role="tablist">
<div class="w-full md:w-1/3 mx-0 md:mx-2 list-none focus-within:z-10" role="presentation">
<button class="px-2 py-4 w-full md:text-lg text-sm text-gray-900 bg-gray-100 border-r border-gray-200 rounded-s-lg focus:ring-2 focus:ring-blue-400 active focus:outline-none id="profile-styled-tab" data-tabs-target="#styled-profile" id="profile-styled-tab" data-tabs-target="#styled-profile" type="button" role="tab" aria-controls="profile" aria-selected="false">
Quantum Safe Storage<br><span class="font-semibold">FUNGISTOR</span></button>
</div>
<div class="w-full md:w-1/3 mx-0 md:mx-2 list-none focus-within:z-10" role="presentation">
<button class="px-2 py-4 w-full md:text-lg text-sm text-gray-900 bg-gray-100 border-r border-gray-200 rounded-s-lg focus:ring-2 focus:ring-blue-400 active focus:outline-none id="dashboard-styled-tab" data-tabs-target="#styled-dashboard" type="button" role="tab" aria-controls="dashboard" aria-selected="false">Autonomous Cloud<br><span class="font-semibold">ZERO-OS</span></button>
</div>
<div class="w-full md:w-1/3 md:mx-2 list-none focus-within:z-10" role="presentation">
<button class="px-2 py-4 w-full md:text-lg text-sm text-gray-900 bg-gray-100 border-r border-gray-200 rounded-s-lg focus:ring-2 focus:ring-blue-400 active focus:outline-none id="settings-styled-tab" data-tabs-target="#styled-settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Peer-to-Peer Network<br><span class="font-semibold">MYCELIUM</span></button>
</div>
</div>
</div>
<div id="default-styled-tab-content">
<div class="relative hidden p-4 rounded-lg bg-gray-50" id="styled-profile" role="tabpanel" aria-labelledby="profile-tab">
<div class="flex flex-wrap justify-center items-center">
<div class="w-full p-2 md:p-8">
<h4 class="blue my-0 md:my-4 font-semibold">FungiStor: A Quantum Safe Storage System</h4>
<p>The Quantum-Safe Storage System is a decentralized, globally distributed data storage system.</p>
<br>
<p>
The benefits are incredible: Up to 10x more efficient (power and usage of hardware). Super reliable, data can not be lost or corrupted. Safe, private and scalable.</p>
<br>
<p>
Sovereign, data is close to you in the country of your choice. Truly peer-to-peer, by everyone for everyone.</p>
<div class="flex flex-wrap items-center my-6">
<p class="font-semibold">ULTRA RELIABLE AND SCALABLE </p>
<p class="mx-4 font-semibold"> | </p>
<p class="font-semibold"> HACKER PROOF AND SECURE</p>
<p class="mx-4 font-semibold"> | </p>
<p class="font-semibold">LOW OVERHEAD AND SELF-HEALING</p>
</div>
</div>
{# <div class="w-full md:w-1/2">
<img class="relative md:absolute bottom-0 right-0" src="/images/tech_page_3node.png" alt="" />
</div> #}
</div>
</div>
<div class="relative hidden p-4 rounded-lg bg-gray-50" id="styled-dashboard" role="tabpanel" aria-labelledby="dashboard-tab">
<div class="flex flex-wrap justify-center items-center">
<div class="w-full p-2 md:p-8">
<h4 class="blue my-0 md:my-4 font-semibold">The Cloud Layer based on Zero-OS, a new Operating System</h4>
<p>Zero-OS is a bare-metal, stateless, and efficient operating system designed to host AI, Web2, and Web3 workloads in a more decentralized manner, without compromising on security, control, and monitoring.</p>
<p></p>
<br>
<p>
Zero-OS is compatible with nearly all computer hardware and is run directly on the hardware.</p>
<br>
<p>
It enables anyone to become a cloud service provider without needing cloud expertise. <br>
<br>The operating system functions fully autonomously, requiring no interventions.</p>
<div class="flex flex-wrap items-center my-6">
<p class="font-semibold">SELF HEALING</p>
<p class="mx-4 font-semibold"> | </p>
<p class="font-semibold">AUTONOMOUS</p>
<p class="mx-4 font-semibold"> | </p>
<p class="font-semibold">DEVELOPED FROM THE LINUX KERNEL</p>
</div>
</div>
{# <div class="w-full md:w-1/2">
<img class="relative md:absolute bottom-0 right-0" src="/images/tech_page_zero_os.png" alt="" />
</div> #}
</div>
</div>
<div class="relative hidden p-4 rounded-lg bg-gray-50" id="styled-settings" role="tabpanel" aria-labelledby="settings-tab">
<div class="flex flex-wrap justify-center items-center">
<div class="w-full p-2 md:p-8">
<h4 class="green_text my-0 md:my-4 font-semibold">Mycelium: A Quantum Safe Storage Network</h4>
<p>Mycelium is the culmination of a decade-long quest for a more efficient network system, enabling faster and more reliable communication between machines and people.</p>
<br>
<p>Our goal was to create a network that can identify and utilize the fastest and most direct paths between participants, remain operational even in challenging conditions (such as fiber cuts), and secure all traffic.</p>
<br>
<p>
With Mycelium, data travels the most efficient routes, leveraging any available internet connection, including peer-to-peer networks like mesh wireless.
All traffic is end-to-end encrypted, effectively preventing man-in-the-middle attacks.
Each machine or user is identified by a unique cryptographic key which is linked to your ThreeFold Internet Address, ensuring that only authorized participants can access the network.
</p>
<div class="flex flex-wrap items-center my-6">
<p class="font-semibold uppercase">End-to-end encrypted</p>
<p class="mx-4 font-semibold"> | </p>
<p class="font-semibold uppercase"> shortest path route </p>
<p class="mx-4 font-semibold"> | </p>
<p class="font-semibold uppercase"> unbreakable </p>
</div>
</div>
{# <div class="w-full md:w-1/2">
<img class="relative md:absolute bottom-0 right-0" src="/images/tech_page_qsfs.png" alt="" />
</div> #}
</div>
</div>
</div>
</div>

404
templates/shortcodes/team_sec.html
View File

@@ -1,404 +0,0 @@
<div class="lg:py-24 flex flex-col my-6 p-auto lg:px-20">
<h2 class="flex py-2 mx-auto font-normal lg:text-6xl">
The Team
</h2>
<div class="lg:max-w-4xl lg:text-xl text-lg text-center mb-8 mx-auto leading-relaxed">
Spread across the world, our team has
built some of the world’s best Internet storage and cloud automation technologies since the ‘90s. With a strong
vision for the future, we’re now on a mission to create a peer-to-peer Internet that can host all of humanity’s
digital workloads via smart contract, removing all forms of centralization from global IT systems.
</div>
<div class="flex overflow-x-scroll pb-10 scrollable">
<div class="flex flex-nowrap ml-10 mt-10">
<div class="inline-block px-3">
<div class="
box
max-w-xs
overflow-hidden
rounded-full
shadow-md
hover:shadow-xl
transition-shadow
duration-300
ease-in-out
">
<a href="/people/kristof-de-spiegeleer/" title="Kristof De Spiegeleer">
<img src="/images/people/kristof_de_spiegeleer.jpeg" class="rounded-full mx-auto mt-3" alt="Kristof De Spiegeleer">
</a>
</div>
</div>
<div class="inline-block px-3">
<div class="
box
max-w-xs
overflow-hidden
rounded-full
shadow-md
hover:shadow-xl
transition-shadow
duration-300
ease-in-out
">
<a href="/people/adnan-fatayerji/" title="Adnan Fatayerji">
<img src="/images/people/adnan_fatayerji.jpg" class="rounded-full mx-auto mt-3" alt="Adnan Fatayerji">
</a>
</div>
</div>
<div class="inline-block px-3">
<div class="
box
max-w-xs
overflow-hidden
rounded-full
shadow-md
hover:shadow-xl
transition-shadow
duration-300
ease-in-out
">
<a href="/people/sabrina-sadik/" title="Sabrina Sadik">
<img src="/images/people/sabrina_sadik.jpg" class="rounded-full mx-auto mt-3" alt="Sabrina Sadik">
</a>
</div>
</div>
<div class="inline-block px-3">
<div class="
box
max-w-xs
overflow-hidden
rounded-full
shadow-md
hover:shadow-xl
transition-shadow
duration-300
ease-in-out
">
<a href="/people/sacha-obeegadoo/" title="Sacha obeegadoo">
<img src="/images/people/sacha_obeegadoo.jpg" class="rounded-full mx-auto mt-3" alt="Sacha obeegadoo">
</a>
</div>
</div>
<div class="inline-block px-3">
<div class="
box
max-w-xs
overflow-hidden
rounded-full
shadow-md
hover:shadow-xl
transition-shadow
duration-300
ease-in-out
">
<a href="/people/jan-de-landtsheer/" title="Jan De Landtsheer">
<img src="/images/people/jan_de_landtsheer.jpeg" class="rounded-full mx-auto mt-3" alt="Jan De Landtsheer">
</a>
</div>
</div>
<div class="inline-block px-3">
<div class="
box
max-w-xs
overflow-hidden
rounded-full
shadow-md
hover:shadow-xl
transition-shadow
duration-300
ease-in-out
">
<a href="/people/reem-khamis/" title="Reem Khamis">
<img src="/images/people/reem_khamis.jpg" class="rounded-full mx-auto mt-3" alt="Reem Khamis">
</a>
</div>
</div>
<div class="inline-block px-3">
<div class="
box
max-w-xs
overflow-hidden
rounded-full
shadow-md
hover:shadow-xl
transition-shadow
duration-300
ease-in-out
">
<a href="/people/ahmed-thabet/" title="Ahmed Thabet">
<img src="/images/people/ahmed_thabet.jpg" class="rounded-full mx-auto mt-3" alt="Ahmed Thabet">
</a>
</div>
</div>
<div class="inline-block px-3">
<div class="
box
max-w-xs
overflow-hidden
rounded-full
shadow-md
hover:shadow-xl
transition-shadow
duration-300
ease-in-out
">
<a href="/people/florian-fournier/" title="Florian Fournier">
<img src="/images/people/florian_fournier.jpeg" class="rounded-full mx-auto mt-3" alt="Florian Fournier">
</a>
</div>
</div>
<div class="inline-block px-3">
<div class="
box
max-w-xs
overflow-hidden
rounded-full
shadow-md
hover:shadow-xl
transition-shadow
duration-300
ease-in-out
">
<a href="/people/ewald-weizenbauer/" title="Ewald Weizenbauer">
<img src="/images/people/ewald_weizenbauer.jpg" class="rounded-full mx-auto mt-3" alt="Ewald Weizenbauer">
</a>
</div>
</div>
<div class="inline-block px-3">
<div class="
box
max-w-xs
overflow-hidden
rounded-full
shadow-md
hover:shadow-xl
transition-shadow
duration-300
ease-in-out
">
<a href="/people/owen-kemp/" title="Owen Kemp">
<img src="/images/people/owen_kemp.jpeg" class="rounded-full mx-auto mt-3" alt="Owen Kemp">
</a>
</div>
</div>
<div class="inline-block px-3">
<div class="
box
max-w-xs
overflow-hidden
rounded-full
shadow-md
hover:shadow-xl
transition-shadow
duration-300
ease-in-out
">
<a href="/people/peter-van-der-henst/" title="Peter van der Henst">
<img src="/images/people/peter_van_der_henst.png" class="rounded-full mx-auto mt-3" alt="Peter van der Henst">
</a>
</div>
</div>
<div class="inline-block px-3">
<div class="
box
max-w-xs
overflow-hidden
rounded-full
shadow-md
hover:shadow-xl
transition-shadow
duration-300
ease-in-out
">
<a href="/people/alexandre-hannelas/" title="alexandre_hannelas">
<img src="/images/people/alexandre_hannelas.jpeg" class="rounded-full mx-auto mt-3" alt="alexandre_hannelas">
</a>
</div>
</div>
<div class="inline-block px-3">
<div class="
box
max-w-xs
overflow-hidden
rounded-full
shadow-md
hover:shadow-xl
transition-shadow
duration-300
ease-in-out
">
<a href="/people/karoline-zizka/" title="Karoline Zizka">
<img src="/images/people/karoline_zizka.jpeg" class="rounded-full mx-auto mt-3" alt="Karoline Zizka">
</a>
</div>
</div>
<div class="inline-block px-3">
<div class="
box
max-w-xs
overflow-hidden
rounded-full
shadow-md
hover:shadow-xl
transition-shadow
duration-300
ease-in-out
">
<a href="/people/lee-smet/" title="Lee Smet">
<img src="/images/people/lee_smet.png" class="rounded-full mx-auto mt-3" alt="Lee Smet">
</a>
</div>
</div>
<div class="inline-block px-3">
<div class="
box
max-w-xs
overflow-hidden
rounded-full
shadow-md
hover:shadow-xl
transition-shadow
duration-300
ease-in-out
">
<a href="/people/maxime-daniel/" title="Maxime Daniel">
<img src="/images/people/maxime_daniel.png" class="rounded-full mx-auto mt-3" alt="Maxime Daniel">
</a>
</div>
</div>
<div class="inline-block px-3">
<div class="
box
max-w-xs
overflow-hidden
rounded-full
shadow-md
hover:shadow-xl
transition-shadow
duration-300
ease-in-out
">
<a href="/people/pierre-van-hoorebeke/" title="Pierre van Hoorebeke">
<img src="/images/people/pierre_van_hoorebeke.jpg" class="rounded-full mx-auto mt-3" alt="Pierre van Hoorebeke">
</a>
</div>
</div>
<div class="inline-block px-3">
<div class="
box
max-w-xs
overflow-hidden
rounded-full
shadow-md
hover:shadow-xl
transition-shadow
duration-300
ease-in-out
">
<a href="/people/sam-taggart/" title="Sam Taggart">
<img src="/images/people/sam_taggart.jpg" class="rounded-full mx-auto mt-3" alt="Sam Taggart">
</a>
</div>
</div>
<div class="inline-block px-3">
<div class="
box
max-w-xs
overflow-hidden
rounded-full
shadow-md
hover:shadow-xl
transition-shadow
duration-300
ease-in-out
">
<a href="/people/scott-yeager/" title="Scott Yeager">
<img src="/images/people/scott_yeager.jpg" class="rounded-full mx-auto mt-3" alt="Scott Yeager">
</a>
</div>
</div>
{#
<div class="inline-block px-3">
<div class="
box
max-w-xs
overflow-hidden
rounded-full
shadow-md
hover:shadow-xl
transition-shadow
duration-300
ease-in-out
">
<a href="/people/gloria-anne/" title="Gloria Anne">
<img src="images/people/gloria_anne.png" class="rounded-full mx-auto mt-3" alt="Gloria Anne">
</a>
</div>
</div>
#}
<div class="inline-block px-3">
<div class="
box
max-w-xs
overflow-hidden
rounded-full
shadow-md
hover:shadow-xl
transition-shadow
duration-300
ease-in-out
">
<a href="/people/sasha-astiadi/" title="Sasha Astiadi">
<img src="/images/people/sasha_astiadi.png" class="rounded-full mx-auto mt-3" alt="Sasha Astiadi">
</a>
</div>
</div>
</div>
</div>
</div>
<style>
.scrollable::-webkit-scrollbar {
width: 8px;
}
.scrollable::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 20px;
}
.scrollable::-webkit-scrollbar-thumb {
background: linear-gradient(45deg, #70dfc9, #ee7bf7);
border-radius: 20px;
}
/* #70dfc9, #ee7bf7 */
.box {
position: relative;
height: 130px;
width: 130px;
}
.box::before {
content: "";
position: absolute;
top: 5px;
left: 0;
right: 0;
bottom: 0;
border-radius: 50%;
padding: 10px;
background: linear-gradient(45deg, #70dfc9, #ee7bf7);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: destination-out;
mask-composite: exclude;
}
.box img {
filter: grayscale(100%);
height: 110px;
width: 110px;
}
.box img:hover {
filter: grayscale(0);
}
</style>

15
templates/shortcodes/tft_header.html
View File

@@ -1,15 +0,0 @@
{% block content %}
<div
class="relative lg:pb-24 pb-10 flex flex-col sm:grid sm:grid-cols-2 sm:gap-10 xl:flex xl:flex-row md:py-2 lg:py-2 lg:items-center text-center mx-auto justify-center">
<a class="center pb-4 lg:pb-0" href="https://coinmarketcap.com/currencies/threefold/" target="_blank">
{% set link = page.permalink ~ "cointelegraph_logo.png"%}
<img class="logo_size mx-auto" src="{{link}}" alt="cointelegraph">
</a>
<a class="center" href="https://www.coingecko.com/en/coins/threefold-token" target="_blank">
{% set link = page.permalink ~ "coin_logo.png"%}
<img class="logo_size mx-auto" src="{{link}}" alt="CoinGecko">
</a>
</div>
{% endblock content %}

26
templates/shortcodes/tft_links.html
View File

@@ -1,26 +0,0 @@
{% block content %}
<div class="quicklinks text-center">
<a class="center" href="https://gettft.com/gettft/" rel="some text" target="_blank">
{% set link = page.permalink ~ "get_tft_button.png"%}
<img class="py-2 mr-2 my-2 px-5 border-2 border-black" src="{{link}}" alt="gettft">
</a>
<a class="center"
href="https://www.manual.grid.tf/documentation/threefold_token/buy_sell_tft/tft_lobstr/tft_lobstr_short_guide.html"
target="_blank">
{% set link = page.permalink ~ "stellar_logo.png"%}
<img class="py-2 mr-2 my-2 px-5 border-2 border-black" src="{{link}}" alt="stellar">
</a>
<a class="center"
href="https://pancakeswap.finance/swap?exactField=output&exactAmount=100&outputCurrency=0x8f0FB159380176D324542b3a7933F0C2Fd0c2bbf&inputCurrency=0xe9e7cea3dedca5984780bafc599bd69add087d56?use=v2"
target="_blank">
{% set link = page.permalink ~ "pancack_button.png"%}
<img class="py-2 mr-2 my-2 px-5 border-2 border-black" src="{{link}}" alt="pancakeswap">
</a>
<a class="center" href="https://app.1inch.io/#/56/swap/BNB/TFT" target="_blank">
{% set link = page.permalink ~ "iinch_button.png"%}
<img class="py-2 my-2 mr-2 px-5 border-2 border-black" src="{{link}}" alt="1inch">
</a>
</div>
{% endblock content %}