sashaastiadi/www_mycelium
1
0
Fork 2
forked from hero/www_hero_project
Code Pull Requests Activity

edit

Browse Source
This commit is contained in:
sasha-astiadi 2024-05-04 11:52:00 +02:00
parent 0176ba951a
commit a61a0df908
13 changed files with 200 additions and 186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
content/_index.md
View File

@ -7,5 +7,5 @@ draft: false
sort_by: weight sort_by: weight
weight: 1 weight: 1
extra: extra:
logo_path: images/logo.svg logo_path: images/logo.png
--- ---

2
content/footer/_index.md
View File

@ -4,7 +4,7 @@ description: ""
insert_anchor_links: "left" insert_anchor_links: "left"
template: "partials/footer.html" template: "partials/footer.html"
extra: 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" } 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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 106 KiB

161
content/home/index.md
View File

@ -9,75 +9,93 @@ weight: 1
<!-- section 1 (header) --> <!-- section 1 (header) -->
{% row(style="left" margin="narrow" reverse="rightreserve" padding="top") %} {% row(style="left" margin="hero" padding="top") %}
<div class="px-2 md:px-8 lg:px-14">
<br>
<br> <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> ![placeholder](./img/hero2.png#mx-auto)
|||
# 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> <br>
<button onclick="yourlink"> <button onclick="yourlink">
Learn More Learn More
</button> </button>
</div>
<br>
|||
![placeholder](./img/img_header.png#mx-auto)
{% end %} {% end %}
<!-- section 6 in the news -->
{% row(style="center" padding="top") %}
[![logo1](img/brand1.png#sm)](yourlink)
|||
[![logo2](img/brand2.png#sm)](yourlink)
|||
[![logo3](img/brand3.png#sm)](yourlink)
|||
[![logo3](img/brand5.png#sm)](yourlink)
|||
[![logo4](img/brand2.png#sm)](yourlink)
{% end %}
<!-- section 2 WHAT --> <!-- section 2 WHAT -->
{% row(style="left" margin="hero" padding="bottom") %}
![placeholder](./img/img_section.png#mx-auto) {% 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> <br>
<div class="border-t border-gray-200 dark:border-gray-700"> <div class="border-t border-gray-200 dark:border-gray-700 ml-auto w-3/4"></div>
</div>
<br> <br>
<ul> <ul>
<li>◉ Unified Digital Identity</li> <li>Decentralized Identity (DID) for <b>Digital Sovereignty</b> ✓</li>
<li>◉ Enhanced Privacy and Security</li> <li>Blockchain Encryption for <b>Enhanced Security</b> ✓</li>
<li>◉ Seamless Integration and Accessibility</li> <li>dApps Interoperability for <b>Global Scalability</b> ✓</li>
<li>◉ Customizable and Extensible Experiences</li> <li>Community Governance Model for <b>True Equality</b> ✓</li>
</ul> </ul>
<br> <br>
<div class="border-t border-gray-200 dark:border-gray-700"> <a href onclick="hero.md"><h5>→ <u>Learn More about Hero</u></h5></a>
</div>
|||
![placeholder](./img/img_section.png#mx-auto)
<br>
<a href="/hero.md"><p class="link2"><b>→ Learn More About Hero</b></p></a>
{% end %} {% end %}
@ -86,14 +104,15 @@ weight: 1
<!-- section 3 (myc) --> <!-- section 3 (myc) -->
<div class="container mx-auto"> <div class="container mx-auto">
{% row(style="center" margin="withContainer" padding="none") %} {% 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
![](img/mycelium.png#mx-auto) ![](img/mycelium.png#mx-auto)
{% end %} {% end %}
@ -101,7 +120,7 @@ weight: 1
{% row(style="center" margin="hero" padding="bottom") %} {% 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> <br>
@ -121,11 +140,11 @@ weight: 1
||| |||
## Powered by Mycelium Nodes ## 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 class="border-t border-gray-200 dark:border-gray-700">
</div> </div>
@ -134,9 +153,9 @@ br>
<br> <br>
<ul> <ul>
<li>◉ Decentralized and globally distributed.</li> <li>✓ Decentralized and globally distributed.</li>
<li>◉ Fully Autonomous Operations</li> <li>✓ Fully Autonomous Operations</li>
<li>◉ Peer-to-Peer Technologies</li> <li>✓ Peer-to-Peer Technologies</li>
</ul> </ul>
<br> <br>
@ -150,7 +169,7 @@ br>
<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 %} {% end %}
@ -165,40 +184,41 @@ br>
{% row(style="center" margin="hero" padding="bottom") %} {% row(style="center" margin="hero" padding="bottom") %}
## Join The Movement ## 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 %} {% end %}
{% row(style="center" margin="narrow" padding="bottom") %} {% 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">
![Image](./img/item1.png#mx-auto) ![Image](img/item1.png#3col)
#### Get A Node & Earn #### __Get A Node & Earn__
<p>Get a Mycelium Node and add capacity to the Mycelium Network.</p> <p>Get a Mycelium Node and add capacity to the <b>Mycelium Network</b>.</p>
</div> </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">
![Image](./img/item2.png#mx-auto) ![Image](img/item1.png#3col)
#### Get Your Hero #### __Activate Your Hero__
<p>Register and reserve your own Hero - your sovereign digital identity.<p> <p>Reserve and activate your own <b>Hero</b> - your sovereign digital identity.<p>
</div> </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">
![Image](./img/item3.png#mx-auto) ![Image](img/item3.png#3col)
#### Acquire INCA Token #### __Acquire INCA Tokens__
<p>Purchase INCA - The digital currency of the Mycelium Network.</p> <p>Purchase INCA Tokens- The digital currency of the <b>Mycelium Network</b>.</p>
</div> </div>
@ -217,7 +237,7 @@ br>
## Hero Xperiences ## 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> <br>
@ -240,34 +260,11 @@ br>
<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 %} {% end %}
<br><br>
<div class="border-t border-gray-200 dark:border-gray-700">
</div>
<!-- section 6 in the news -->
{% row(style="center" padding="bottom") %}
[![logo1](img/brand1.png#small)](yourlink)
|||
[![logo2](img/brand3.png#small)](yourlink)
|||
[![logo3](img/brand5.png#small)](yourlink)
|||
[![logo4](img/brand2.png#small)](yourlink)
{% end %}

23
css/index.css
View File

@ -41,26 +41,28 @@ img[src*="#fill"] { width: 100%; height: 100%; }
img[src*="#tft_img"] { width: 150px; margin: 8px; } img[src*="#tft_img"] { width: 150px; margin: 8px; }
img[src*="#icon"] { width: 65px; margin: 4px; } img[src*="#icon"] { width: 65px; margin: 4px; }
img[src*="#fig"] { width: 150px; } img[src*="#fig"] { width: 150px; }
img[src*="#3col"] { width: 100px; margin-left: auto; margin-right: auto; }
.logo_size { width: 200px; } .logo_size { width: 200px; }
/* Layer components */ /* Layer components */
@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; } 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 { @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; } 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 { @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; } 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; } 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; } 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; } 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; } 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; } 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; } 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 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 { color: #fff; background-color: #4207ab; display: flex; flex-direction: column; align-items: center; padding-top: 24px; padding-bottom: 24px; }
footer .customize img { width: 60px; } footer .customize img { width: 60px; }
header .customize div { box-shadow: none; text-transform: uppercase; font-weight: 700 !important; } header .customize div { box-shadow: none; text-transform: uppercase; font-weight: 700 !important; }
.link2 { color: #4207ab; font-weight: 600;}
/* Header styles */ /* 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; } a { border: none; }
header { font-family: "Reddit Sans"; } header { font-family: "Reddit Sans"; }
.nav_btn { margin: 0 !important; padding: 0 !important; border: none !important; box-shadow: none !important; } .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; } .header:hover .back { transform: none; }
/* Responsive styles */ /* Responsive styles */
@media (max-width: 768px) { /* h2 { font-size: 4rem; } */ } @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: 35px; } .banner h2 svg { font-size: 30px; } } @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; } */ } @media (max-width: 480px) { .banner, .header { padding: 80px 0; } footer { text-align: center; } /* h2 { font-size: 3rem; } */ }

4
css/layout.css
View File

@ -7,7 +7,7 @@ main {
h1, .h1 { font-size: 2.5rem; font-weight: 900; } h1, .h1 { font-size: 2.5rem; font-weight: 900; }
h2, .h2 { font-size: 2rem; font-weight: 700; } h2, .h2 { font-size: 2rem; font-weight: 700; }
h3, .h3 { font-weight: 400; color: #4207ab; } 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; } h5, .h5 { font-size: 1.25rem; font-style: normal; }
h6, .h6 { font-size: 1rem; } h6, .h6 { font-size: 1rem; }
@ -29,7 +29,7 @@ a:active { color: #2b6cb0; }
nav h4 a { border: 0; color: #000; } nav h4 a { border: 0; color: #000; }
nav h4 a:hover { border: 0; color: #4299e1; } nav h4 a:hover { border: 0; color: #4299e1; }
nav h4 a:focus, nav h4 a:active { border: 0; color: #000; } nav h4 a:focus, nav h4 a:active { border: 0; color: #000; }
h5 a { color: #4a5568; } h5 a { color: #4207ab; }
/* Text and paragraph styles */ /* Text and paragraph styles */
pre, code { font-feature-settings: normal; } pre, code { font-feature-settings: normal; }

2
readme.md
View File

@ -1,6 +1,6 @@
# Your Website # Your Website
![](../static/images/logo.svg) ![](../static/images/logo.png)
## About ## About

BIN
static/images/logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 16 KiB

6
templates/_default/base.html
View File

@ -12,3 +12,9 @@
<script type="text/javascript" src="{{ get_url(path='js/custom.js')}}"></script> <script type="text/javascript" src="{{ get_url(path='js/custom.js')}}"></script>
</body> </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>

3
templates/index.html
View File

@ -2,8 +2,9 @@
{% block content %} {% block content %}
<!-- home page template, has a banner and rows of page summaries --> <!-- home page template, has a banner and rows of page summaries -->
<div class=""> <div class>
{% set page = get_page(path="home/index.md") %} {% set page = get_page(path="home/index.md") %}
{{page.content | safe}} {{page.content | safe}}
</div> </div>
{% include "partials/faq.html" %}
{% endblock content %} {% endblock content %}

88
templates/partials/faq.html Normal file
View 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>

78
templates/shortcodes/grid_stats.html
View File

@ -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>

1
templates/shortcodes/row.html
View File

@ -62,7 +62,6 @@ Parameters:
{% set row_class = "flex flex-col-reverse md:flex-row items-center mx-0" %} {% set row_class = "flex flex-col-reverse md:flex-row items-center mx-0" %}
{% elif "leftreserve" in reverse %} {% elif "leftreserve" in reverse %}
{% set row_class = "flex flex-col md:flex-row items-center mx-8" %} {% set row_class = "flex flex-col md:flex-row items-center mx-8" %}
{% endif %} {% endif %}
{% endif %} {% endif %}