forked from hero/www_hero_project
edit
This commit is contained in:
sasha-astiadi
parent
0176ba951a
commit
a61a0df908
@ -7,5 +7,5 @@ draft: false
|
||||
sort_by: weight
|
||||
weight: 1
|
||||
extra:
|
||||
logo_path: images/logo.svg
|
||||
logo_path: images/logo.png
|
||||
---
|
||||
|
||||
@ -4,7 +4,7 @@ description: ""
|
||||
insert_anchor_links: "left"
|
||||
template: "partials/footer.html"
|
||||
extra:
|
||||
logoPath: "images/logo.svg"
|
||||
logoPath: "images/logo.png"
|
||||
socialLinks: { Github: "https://github.com/ourworldfreezone", Twitter: "https://twitter.com/threefold_io", Telegram: "https://t.me/threefoldnews" }
|
||||
---
|
||||
|
||||
|
||||
BIN
content/home/img/hero2.png
Normal file
BIN
content/home/img/hero2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
@ -9,75 +9,93 @@ weight: 1
|
||||
|
||||
<!-- section 1 (header) -->
|
||||
|
||||
{% row(style="left" margin="narrow" reverse="rightreserve" padding="top") %}
|
||||
|
||||
<div class="px-2 md:px-8 lg:px-14">
|
||||
{% row(style="left" margin="hero" padding="top") %}
|
||||
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
|
||||
# Become the Hero of your own digital world.
|
||||
### Start owning your data and digital life.
|
||||
|
||||
<p>With Hero, we can build a conscious collective intelligence together.</p>
|
||||
|
||||
|
||||
|||
|
||||
|
||||
# Start Owning Your Data <br>and Digital Life
|
||||
### With **Hero**, We Can Build a Conscious Collective Intelligence Together.
|
||||
|
||||
|
||||
<p>Meet <b>Hero</b>: your unique digital avatar, streamlining your online presence by eliminating the need for duplicate identities across platforms.</p>
|
||||
|
||||
<br>
|
||||
|
||||
<button onclick="yourlink">
|
||||
Learn More
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
|||
|
||||
|
||||
|
||||
|
||||
{% end %}
|
||||
|
||||
|
||||
<!-- section 6 in the news -->
|
||||
|
||||
{% row(style="center" padding="top") %}
|
||||
|
||||
[](yourlink)
|
||||
|
||||
|||
|
||||
|
||||
[](yourlink)
|
||||
|
||||
|||
|
||||
|
||||
[](yourlink)
|
||||
|
||||
|||
|
||||
|
||||
[](yourlink)
|
||||
|
||||
|||
|
||||
|
||||
[](yourlink)
|
||||
|
||||
{% end %}
|
||||
|
||||
|
||||
|
||||
<!-- section 2 WHAT -->
|
||||
|
||||
{% row(style="left" margin="hero" padding="bottom") %}
|
||||
|
||||
|
||||
{% row(style="right" margin="hero" reverse="rightreserve" padding="bottom") %}
|
||||
|
||||
|||
|
||||
|
||||
## Everyone can be a Hero
|
||||
## Everyone Can be a Hero
|
||||
|
||||
<p>Hero is your own personal intelligent digital identity that fosters a collective intelligence and empower everyone to enhance our digital existence with unfettered access to essential tools for learning, participating, and thriving within the Mycelium Network.</p>
|
||||
### Discover how Hero empowers <br>everyone to become digital pioneers.
|
||||
|
||||
<p><b>Heroes</b> were designed with technologies<br> that promote universal accessibility,<br> freedom, equality, and personal growth for all.</p>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="border-t border-gray-200 dark:border-gray-700">
|
||||
</div>
|
||||
<div class="border-t border-gray-200 dark:border-gray-700 ml-auto w-3/4"></div>
|
||||
|
||||
|
||||
<br>
|
||||
|
||||
<ul>
|
||||
<li>◉ Unified Digital Identity</li>
|
||||
<li>◉ Enhanced Privacy and Security</li>
|
||||
<li>◉ Seamless Integration and Accessibility</li>
|
||||
<li>◉ Customizable and Extensible Experiences</li>
|
||||
<li>Decentralized Identity (DID) for <b>Digital Sovereignty</b> ✓</li>
|
||||
<li>Blockchain Encryption for <b>Enhanced Security</b> ✓</li>
|
||||
<li>dApps Interoperability for <b>Global Scalability</b> ✓</li>
|
||||
<li>Community Governance Model for <b>True Equality</b> ✓</li>
|
||||
</ul>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="border-t border-gray-200 dark:border-gray-700">
|
||||
</div>
|
||||
<a href onclick="hero.md"><h5>→ <u>Learn More about Hero</u></h5></a>
|
||||
|
||||
|||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<br>
|
||||
|
||||
<a href="/hero.md"><p class="link2"><b>→ Learn More About Hero</b></p></a>
|
||||
|
||||
{% end %}
|
||||
|
||||
@ -86,14 +104,15 @@ weight: 1
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- section 3 (myc) -->
|
||||
|
||||
<div class="container mx-auto">
|
||||
|
||||
{% row(style="center" margin="withContainer" padding="none") %}
|
||||
|
||||
## Our Alter Ego within the Mycelium Network
|
||||
|
||||
## Hero: The Digital Identity Within the Mycelium Network
|
||||
### Your Gateway to True Decentralized Internet
|
||||
|
||||
|
||||
{% end %}
|
||||
@ -101,7 +120,7 @@ weight: 1
|
||||
|
||||
{% row(style="center" margin="hero" padding="bottom") %}
|
||||
|
||||
<p>Discover how Mycelium Network is revolutionizing internet access with a decentralized, community-powered approach. We aim to empower individuals worldwide by enabling them to own and manage internet resources collectively.</p>
|
||||
<p>Discover how <b>Mycelium Network</b> is revolutionizing internet access with a community-powered connectivity approach. We aim to empower individuals worldwide by enabling them to own and manage internet resources collectively.</p>
|
||||
|
||||
<br>
|
||||
|
||||
@ -121,11 +140,11 @@ weight: 1
|
||||
|||
|
||||
|
||||
## Powered by Mycelium Nodes
|
||||
### h3 h3 h3 h3
|
||||
### The Fundamental Building Blocks of Decentralized Internet
|
||||
|
||||
<p>Mycelium Network and Heroes exist thanks to a vast network of cloud capacity deployed by ‘Farmers’- who deploy Mycelium Nodes in supporting locations worldwide.</p>
|
||||
<p><b>Mycelium Network</b> and <b>Heroes</b> exist thanks to a vast network of cloud capacity deployed by ‘<b>Farmers</b>’- who deploy Mycelium Nodes in supporting locations worldwide.</p>
|
||||
|
||||
br>
|
||||
<br>
|
||||
|
||||
<div class="border-t border-gray-200 dark:border-gray-700">
|
||||
</div>
|
||||
@ -134,9 +153,9 @@ br>
|
||||
<br>
|
||||
|
||||
<ul>
|
||||
<li>◉ Decentralized and globally distributed.</li>
|
||||
<li>◉ Fully Autonomous Operations</li>
|
||||
<li>◉ Peer-to-Peer Technologies</li>
|
||||
<li>✓ Decentralized and globally distributed.</li>
|
||||
<li>✓ Fully Autonomous Operations</li>
|
||||
<li>✓ Peer-to-Peer Technologies</li>
|
||||
</ul>
|
||||
|
||||
<br>
|
||||
@ -150,7 +169,7 @@ br>
|
||||
|
||||
<br>
|
||||
|
||||
<a href="/hero.md"><p class="link2"><b>→ Learn More About Mycelium Nodes</b></p></a>
|
||||
<a href onclick="hero.md"><h5>→ <u>Learn More about Mycelium Nodes</u></h5></a>
|
||||
|
||||
{% end %}
|
||||
|
||||
@ -165,40 +184,41 @@ br>
|
||||
{% row(style="center" margin="hero" padding="bottom") %}
|
||||
|
||||
## Join The Movement
|
||||
### A New Era of Digital Sovereignty
|
||||
|
||||
<p>Hero invites you to your new sovereign digital life with 3 easy steps</p>
|
||||
<p>Embark on a journey towards digital sovereignty with Hero, where you take a full control of your online identity and data, starting with these 3 easy steps:</p>
|
||||
|
||||
{% end %}
|
||||
|
||||
{% row(style="center" margin="narrow" padding="bottom") %}
|
||||
|
||||
<div class="mx-4 my-4">
|
||||
<div class="border border-gray-300 rounded-lg mx-4 my-4 pt-5 pb-6 px-6 py-6 shadow-md">
|
||||
|
||||
|
||||
|
||||
|
||||
#### Get A Node & Earn
|
||||
<p>Get a Mycelium Node and add capacity to the Mycelium Network.</p>
|
||||
#### __Get A Node & Earn__
|
||||
<p>Get a Mycelium Node and add capacity to the <b>Mycelium Network</b>.</p>
|
||||
|
||||
</div>
|
||||
|
||||
|||
|
||||
|
||||
<div class="mx-4 my-4">
|
||||
<div class="border border-gray-300 rounded-lg mx-4 my-4 pt-5 pb-6 px-6 py-6 shadow-md">
|
||||
|
||||
|
||||
|
||||
|
||||
#### Get Your Hero
|
||||
<p>Register and reserve your own Hero - your sovereign digital identity.<p>
|
||||
#### __Activate Your Hero__
|
||||
<p>Reserve and activate your own <b>Hero</b> - your sovereign digital identity.<p>
|
||||
</div>
|
||||
|
||||
|||
|
||||
|
||||
<div class="mx-4 my-4">
|
||||
<div class="border border-gray-300 rounded-lg mx-4 my-4 pt-5 pb-6 px-6 py-6 shadow-md">
|
||||
|
||||
|
||||
|
||||
|
||||
#### Acquire INCA Token
|
||||
<p>Purchase INCA - The digital currency of the Mycelium Network.</p>
|
||||
#### __Acquire INCA Tokens__
|
||||
<p>Purchase INCA Tokens- The digital currency of the <b>Mycelium Network</b>.</p>
|
||||
|
||||
</div>
|
||||
|
||||
@ -217,7 +237,7 @@ br>
|
||||
|
||||
## Hero Xperiences
|
||||
|
||||
<p>Dive into a world of fully decentralized and completely secure applications on the Mycelium Network, built to empower and enable our Heroes with innovative digital Xperiences.</p>
|
||||
<p>Dive into a world of fully decentralized and completely secure applications on the <b>Mycelium Network</b>, built to empower and enable our Heroes with innovative digital Xperiences.</p>
|
||||
|
||||
<br>
|
||||
|
||||
@ -240,34 +260,11 @@ br>
|
||||
|
||||
<br>
|
||||
|
||||
<a href="/hero.md"><p class="link2"><b>→ Explore Hero Xperiences</b></p></a>
|
||||
<a href onclick="hero.md"><h5>→ <u>Explore Hero Xperiences</u></h5></a>
|
||||
|
||||
{% end %}
|
||||
|
||||
<br><br>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- section 6 in the news -->
|
||||
|
||||
{% row(style="center" padding="bottom") %}
|
||||
|
||||
[](yourlink)
|
||||
|
||||
|||
|
||||
|
||||
[](yourlink)
|
||||
|
||||
|||
|
||||
|
||||
[](yourlink)
|
||||
|
||||
|||
|
||||
|
||||
[](yourlink)
|
||||
|
||||
{% end %}
|
||||
<div class="border-t border-gray-200 dark:border-gray-700">
|
||||
</div>
|
||||
|
||||
@ -41,26 +41,28 @@ img[src*="#fill"] { width: 100%; height: 100%; }
|
||||
img[src*="#tft_img"] { width: 150px; margin: 8px; }
|
||||
img[src*="#icon"] { width: 65px; margin: 4px; }
|
||||
img[src*="#fig"] { width: 150px; }
|
||||
img[src*="#3col"] { width: 100px; margin-left: auto; margin-right: auto; }
|
||||
.logo_size { width: 200px; }
|
||||
|
||||
/* Layer components */
|
||||
@layer components {
|
||||
h1 { @apply text-xl lg:text-4xl xl:text-5xl font-bold leading-4 my-4; font-family: "Reddit Sans", sans-serif; font-weight: 900; line-height: 1em; }
|
||||
h1 { @apply text-xl lg:text-4xl xl:text-7xl font-bold leading-4 my-4; font-family: "Reddit Sans", sans-serif; font-weight: 900; line-height: 1em; }
|
||||
h1 strong { @apply font-extrabold; }
|
||||
h2 { @apply text-xl md:text-2xl lg:text-4xl font-bold leading-4 my-4; font-family: "Reddit Sans", sans-serif; line-height: 1; font-weight: 600; }
|
||||
h2 strong { @apply font-medium; }
|
||||
h3 { @apply text-xl lg:text-2xl font-normal my-4; color: #4207ab; font-family: "Reddit Sans", sans-serif; font-weight: 400; }
|
||||
h3 strong { @apply font-medium; font-weight: 400; }
|
||||
h4 { @apply text-xl lg:text-2xl font-normal my-4; color: #4207ab; font-family: "Reddit Sans", sans-serif; font-weight: 400; }
|
||||
h5 { @apply text-xl lg:text-xl font-normal; font-family: "Reddit Sans", sans-serif; font-weight: 400; }
|
||||
h4 { @apply text-xl lg:text-xl font-normal my-4; color: #4207ab; font-family: "Reddit Sans", sans-serif; font-weight: 400; }
|
||||
h5 { @apply text-xl lg:text-xl font-normal; font-family: "Reddit Sans", sans-serif; font-weight: 400; color: #4207ab !important; }
|
||||
h6 { @apply text-lg not-italic font-normal my-1; font-family: "Reddit Sans", sans-serif; font-weight: 400; }
|
||||
p { @apply text-base lg:text-lg leading-tight tracking-normal font-normal my-0; font-family: "Reddit Sans", sans-serif; font-weight: 300; letter-spacing: 0.05em; }
|
||||
p { @apply text-base lg:text-lg leading-tight tracking-normal font-normal my-0; font-family: "Reddit Sans", sans-serif; font-weight: 400; letter-spacing: 0.05em; }
|
||||
blockquote { @apply border-l-4 border-gray-400 mx-2 my-2 p-2; font-family: "Reddit Sans", sans-serif; font-weight: 300; }
|
||||
li { @apply text-lg lg:text-xl font-normal my-2; font-family: "Reddit Sans", sans-serif; font-weight: 200; }
|
||||
li { @apply text-sm lg:text-sm font-light my-2; font-family: "Reddit Sans", sans-serif; font-weight: 200; }
|
||||
li li { @apply text-sm lg:text-sm font-light;font-family: "Reddit Sans", sans-serif; font-weight: 200; }
|
||||
button { @apply inline-block text-base lg:text-lg px-8 py-1 my-3 border-2 shadow;font-family: "Reddit Sans", sans-serif; font-weight: 400; }
|
||||
article h2 { @apply text-xl lg:text-3xl font-medium; font-family: "Reddit Sans", sans-serif; font-weight: 500; }
|
||||
article p, li { @apply text-base lg:text-lg;font-family: "Reddit Sans", sans-serif; font-weight: 300; }
|
||||
article p, { @apply text-base lg:text-lg; font-family: "Reddit Sans", sans-serif; font-weight: 400; }
|
||||
li { @apply text-sm lg:text-base; font-family: "Reddit Sans", sans-serif; font-weight: 300; }
|
||||
}
|
||||
|
||||
|
||||
@ -77,14 +79,13 @@ header .customize { background-color: transparent; position: absolute; }
|
||||
footer .customize { color: #fff; background-color: #4207ab; display: flex; flex-direction: column; align-items: center; padding-top: 24px; padding-bottom: 24px; }
|
||||
footer .customize img { width: 60px; }
|
||||
header .customize div { box-shadow: none; text-transform: uppercase; font-weight: 700 !important; }
|
||||
.link2 { color: #4207ab; font-weight: 600;}
|
||||
|
||||
/* Header styles */
|
||||
button { background: transparent; color: black; border-radius: 2px; border: 2px solid black; box-shadow: none; }
|
||||
button { background: transparent; color: black; border-radius: 2px; border: 1px solid black; box-shadow: none; }
|
||||
a { border: none; }
|
||||
header { font-family: "Reddit Sans"; }
|
||||
.nav_btn { margin: 0 !important; padding: 0 !important; border: none !important; box-shadow: none !important; }
|
||||
|
||||
.link2 { margin: 0 !important; padding: 0 !important; border: none !important; box-shadow: none !important; color: #4207ab !important; font-weight: 600 !important; border: 0px !important; }
|
||||
|
||||
|
||||
|
||||
@ -110,6 +111,6 @@ header { font-family: "Reddit Sans"; }
|
||||
.header:hover .back { transform: none; }
|
||||
|
||||
/* Responsive styles */
|
||||
@media (max-width: 768px) { /* h2 { font-size: 4rem; } */ }
|
||||
@media (max-width: 640px) { .banner h2 { font: 600 7vw/10vw; } .header h1 { font-size: 35px; } .banner h2 svg { font-size: 30px; } }
|
||||
@media (max-width: 768px) { /* h2 { font-size: 4rem; } */ .flex-col-reverse { flex-direction: column-reverse; } }
|
||||
@media (max-width: 640px) { .banner h2 { font: 600 7vw/10vw; } .header h1 { font-size: 20px; } .banner h2 svg { font-size: 30px; } }
|
||||
@media (max-width: 480px) { .banner, .header { padding: 80px 0; } footer { text-align: center; } /* h2 { font-size: 3rem; } */ }
|
||||
|
||||
@ -7,7 +7,7 @@ main {
|
||||
h1, .h1 { font-size: 2.5rem; font-weight: 900; }
|
||||
h2, .h2 { font-size: 2rem; font-weight: 700; }
|
||||
h3, .h3 { font-weight: 400; color: #4207ab; }
|
||||
h4, .h4 { font-size: 1.5rem; }
|
||||
h4, .h4 { font-size: 1.3rem; }
|
||||
h5, .h5 { font-size: 1.25rem; font-style: normal; }
|
||||
h6, .h6 { font-size: 1rem; }
|
||||
|
||||
@ -29,7 +29,7 @@ a:active { color: #2b6cb0; }
|
||||
nav h4 a { border: 0; color: #000; }
|
||||
nav h4 a:hover { border: 0; color: #4299e1; }
|
||||
nav h4 a:focus, nav h4 a:active { border: 0; color: #000; }
|
||||
h5 a { color: #4a5568; }
|
||||
h5 a { color: #4207ab; }
|
||||
|
||||
/* Text and paragraph styles */
|
||||
pre, code { font-feature-settings: normal; }
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# Your Website
|
||||
|
||||
|
||||
|
||||
|
||||
## About
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 16 KiB |
@ -11,4 +11,10 @@
|
||||
{% include "partials/footer.html" %}
|
||||
<script type="text/javascript" src="{{ get_url(path='js/custom.js')}}"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
<style>
|
||||
body {
|
||||
--tw-bg-opacity: 1;
|
||||
background: rgb(255,255,255);
|
||||
background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(208,198,255,0.25) 15%, rgba(255,255,255,0.2) 30%, rgba(208,198,255,0.25) 45%, rgba(255,255,255,0.2) 75%, rgba(255,255,255,0.2) 95%); }
|
||||
</style>
|
||||
@ -2,8 +2,9 @@
|
||||
{% block content %}
|
||||
|
||||
<!-- home page template, has a banner and rows of page summaries -->
|
||||
<div class="">
|
||||
<div class>
|
||||
{% set page = get_page(path="home/index.md") %}
|
||||
{{page.content | safe}}
|
||||
</div>
|
||||
{% include "partials/faq.html" %}
|
||||
{% endblock content %}
|
||||
88
templates/partials/faq.html
Normal file
88
templates/partials/faq.html
Normal file
@ -0,0 +1,88 @@
|
||||
|
||||
<!-- Start block -->
|
||||
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<sections>
|
||||
<div class="max-w-screen-xl px-4 pb-8 mx-auto lg:pb-16">
|
||||
<h2 class="mb-4 text-3xl font-bold tracking-tight text-gray-900 lg:mb-8 lg:text-3xl dark:text-white">Frequently Asked Questions</h2>
|
||||
|
||||
<!-- Start block -->
|
||||
<div class="max-w-screen-sm mx-auto divide-y shadow shadow-purple-600 ">
|
||||
<div class="py-5">
|
||||
<details class="group px-4 pb-8">
|
||||
<summary class="flex justify-between items-center font-medium cursor-pointer list-none">
|
||||
<p> What is Hero and how does it work within the Mycelium network?</p>
|
||||
<span class="transition group-open:rotate-180">
|
||||
<svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg></span>
|
||||
</summary>
|
||||
<p class="mt-3 group-open:animate-fadeIn ">
|
||||
Hero is your personalized digital identity within the Mycelium network. It serves as your unique avatar, enabling you to securely interact with various applications and services while maintaining control over your data. The Mycelium network provides the decentralized infrastructure that powers Hero, ensuring a secure and private digital experience.
|
||||
Check out this guide to learn how to get started and start using Hero on Mycelium Network.
|
||||
</p>
|
||||
</details>
|
||||
</div>
|
||||
<div class="py-5">
|
||||
<details class="group px-4 pb-8">
|
||||
<summary class="flex justify-between items-center font-medium cursor-pointer list-none ">
|
||||
<p>How does the Mycelium network enhance security for Hero users?</p>
|
||||
<span class="transition group-open:rotate-180">
|
||||
<svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<p class="mt-3 group-open:animate-fadeIn">
|
||||
The Mycelium network enhances security for Hero users by leveraging a decentralized infrastructure. This means there’s no single point of failure or centralized control, reducing the risk of data breaches and ensuring that users have full control over their information.
|
||||
</p>
|
||||
</details>
|
||||
</div>
|
||||
<div class="py-5">
|
||||
<details class="group px-4 pb-8">
|
||||
<summary class="flex justify-between items-center font-medium cursor-pointer list-none ">
|
||||
<p>What kinds of experiences can I build on the Mycelium network using Hero??</p>
|
||||
<span class="transition group-open:rotate-180">
|
||||
<svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<p class="mt-3 group-open:animate-fadeIn">
|
||||
The Mycelium network offers a flexible platform for developing a wide range of digital experiences using Hero, including secure file sharing, communication tools, financial services, and collaborative workspaces. You can also develop custom applications and services tailored to your needs, leveraging the scalability and security of the network.
|
||||
</p>
|
||||
</details>
|
||||
</div>
|
||||
<div class="py-5">
|
||||
<details class="group px-4 pb-8">
|
||||
<summary class="flex justify-between items-center font-medium cursor-pointer list-none">
|
||||
<p>How does the Mycelium network promote equal opportunities for users?</p>
|
||||
<span class="transition group-open:rotate-180">
|
||||
<svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<p class="mt-3 group-open:animate-fadeIn">
|
||||
The Mycelium network is built on the principles of inclusivity and equality, providing equal access to its decentralized infrastructure. This ensures that all users, regardless of their background or location, have the opportunity to participate, earn, and contribute to the network, thereby fostering a community that values diversity and equal opportunity. Learn more about these technologies: Mycelium Project Manual
|
||||
</p>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<br><br>
|
||||
<!-- End block -->
|
||||
|
||||
<script>
|
||||
// ...
|
||||
// extend: {
|
||||
// keyframes: {
|
||||
// fadeIn: {
|
||||
// "0%": { opacity: 0 },
|
||||
// "100%": { opacity: 100 },
|
||||
// },
|
||||
// },
|
||||
// animation: {
|
||||
// fadeIn: "fadeIn 0.2s ease-in-out forwards",
|
||||
// },
|
||||
// },
|
||||
// ...
|
||||
</script>
|
||||
|
||||
@ -1,78 +0,0 @@
|
||||
{% 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>
|
||||
@ -57,14 +57,13 @@ Parameters:
|
||||
<!-- reverse col at mobile -->
|
||||
|
||||
|
||||
{% if reverse %}
|
||||
{% if "rightreserve" in reverse %}
|
||||
{% set row_class = "flex flex-col-reverse md:flex-row items-center mx-0" %}
|
||||
{% elif "leftreserve" in reverse %}
|
||||
{% set row_class = "flex flex-col md:flex-row items-center mx-8" %}
|
||||
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% if reverse %}
|
||||
{% if "rightreserve" in reverse %}
|
||||
{% set row_class = "flex flex-col-reverse md:flex-row items-center mx-0" %}
|
||||
{% elif "leftreserve" in reverse %}
|
||||
{% set row_class = "flex flex-col md:flex-row items-center mx-8" %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
|
||||
<!-- Padding -->
|
||||
|
||||
Loading…
Reference in New Issue
Block a user