ourworld_web/www_threefold_io
23
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

main page

Browse Source
This commit is contained in:
sasha-astiadi
2024-11-15 20:37:08 +01:00
parent 9560aaa2c5
commit a26682116d
29 changed files with 487 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
build.sh
View File

@@ -1,32 +1,34 @@
echo "Starting build..."
SOURCE=${BASH_SOURCE[0]}
DIR_OF_THIS_SCRIPT="$( dirname "$SOURCE" )"
ABS_DIR_OF_SCRIPT="$( realpath $DIR_OF_THIS_SCRIPT )"
# TODO: Check if current version is latest to avoid redundant installation
if [[ -f "tailwindcss" ]]
then
echo "Tailwind installed"
else
# rm tailwindcss
# checks os and architecture for correct release
# https://stackoverflow.com/a/8597411
echo "Installing & building tailwind..."
ASSET="tailwindcss"
if [[ "$OSTYPE" == "linux-gnu"* ]]; then
ASSET="$ASSET-linux"
elif [[ "$OSTYPE" == "darwin"* ]]; then
ASSET="$ASSET-macos"
fi
if [[ "$(uname -m)" == "x86_64"* ]]; then
ASSET="$ASSET-x64"
elif [[ "$(uname -m)" == "arm64"* ]]; then
ASSET="$ASSET-arm64"
fi
curl -sLO "https://github.com/tailwindlabs/tailwindcss/releases/latest/download/${ASSET}"
chmod +x $ASSET
mv $ASSET tailwindcss
rm tailwindcss
fi
# checks os and architecture for correct release
# https://stackoverflow.com/a/8597411
echo "Installing & building tailwind..."
ASSET="tailwindcss"
if [[ "$OSTYPE" == "linux-gnu"* ]]; then
ASSET="$ASSET-linux"
elif [[ "$OSTYPE" == "darwin"* ]]; then
ASSET="$ASSET-macos"
fi
if [[ "$(uname -m)" == "x86_64"* ]]; then
ASSET="$ASSET-x64"
elif [[ "$(uname -m)" == "arm64"* ]]; then
ASSET="$ASSET-arm64"
fi
curl -sLO "https://github.com/tailwindlabs/tailwindcss/releases/latest/download/${ASSET}"
chmod +x $ASSET
mv $ASSET tailwindcss
# initialized and configures tailwind if not configured
@@ -41,6 +43,6 @@ fi
echo "Compiling tailwindcss and building zola project..."
rm -rf public static/css
./tailwindcss -i css/index.css -o ./static/css/index.css --minify
zola build
zola --root $ABS_DIR_OF_SCRIPT build

2
content/_index.md
View File

@@ -17,7 +17,7 @@ extra:
<br/>
<br/>
![Image](images/black_threefold_header.png#mx-auto#medium)
![Image](images/white_threefold_header.png#mx-auto#medium)
<br/>

2
content/footer/_index.md
View File

@@ -4,7 +4,7 @@ description: ""
insert_anchor_links: "left"
template: "partials/footer.html"
extra:
logoPath: "images/black_threefold.png"
logoPath: "images/white_threefold.png"
socialLinks: { Github: "https://github.com/threefoldfoundation", Github2: "https://github.com/threefoldtech", Twitter: "https://twitter.com/threefold_io", Telegram: "https://t.me/threefoldnews" }
---

11
content/header/index.md
View File

@@ -3,15 +3,12 @@ title: "Header"
insert_anchor_links: "left"
template: "partials/header.html"
extra:
logoPath: "images/black_threefold.png"
button_Path: "/images/gettft_node_2.png"
logoPath: "images/white_threefold.png"
---
- [About]("/about")
- [Technology]("/technology")
- [Host]("/host")
- [Deploy]("/deploy")
- [Utilization]("/utilization")
- [Why]("/about")
- [Product]("/product")
- Info

52
css/index.css
View File

@@ -10,19 +10,35 @@
@import "tailwindcss/utilities";
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
/* Custom CSS for header partial */
.backdrop-blur {
-webkit-backdrop-filter: blur(40px);
}
* {
font-family: "Lato", sans-serif;
font-family: "Inter", sans-serif;
}
.bg-semi-white {
background-color: rgba(255, 255, 255, 0.75);
}
.bg-dark-gradient {
background: rgb(15,15,15);
background: radial-gradient(circle, rgba(15,15,15,1) 0%, rgb(24, 24, 24) 50%, rgba(15,15,15,1) 100%);
}
.bg-black1 {
background-color: rgba(15,15,15,1);
}
.bg-transparent {
background-color: transparent;
}
/* Custom css allowing image styling in markdown */
img[src*="#mx-auto"] {
margin: auto;
@@ -239,12 +255,12 @@ background-color:#5596f5 !important;
h1 {
@apply text-4xl lg:text-6xl font-normal;
color: #2b2b2b;
font-family: "Lato", sans-serif !important;
font-family: "Inter", sans-serif !important;
}
h2 {
@apply text-3xl lg:text-4xl my-4 font-normal leading-none;
color: #2b2b2b;
font-family: "Lato", sans-serif !important;
font-family: "Inter", sans-serif !important;
}
h2 strong {
@apply font-semibold;
@@ -252,28 +268,28 @@ background-color:#5596f5 !important;
h3 {
@apply text-2xl lg:text-3xl my-4 font-extralight;
color: #2b2b2b;
font-family: "Lato", sans-serif !important;
font-family: "Inter", sans-serif !important;
}
h3 strong {
@apply font-normal;
}
h4 {
@apply text-xl lg:text-2xl font-normal tracking-wider;
font-family: "Lato", sans-serif !important;
font-family: "Inter", sans-serif !important;
}
h5 {
@apply text-lg my-1 tracking-normal font-semibold;
font-family: "Lato", sans-serif !important;
@apply text-lg my-1 tracking-normal font-medium;
font-family: "Inter", sans-serif !important;
}
h6 {
@apply text-md not-italic font-normal my-1;
font-family: "Lato", sans-serif !important;
font-family: "Inter", sans-serif !important;
}
p {
@apply text-lg;
color: #3d3d3d;
font-family: "Lato", sans-serif !important;
font-family: "Inter", sans-serif !important;
}
blockquote {
@apply border-l-4 border-gray-400 mx-2 my-2 p-2;
@@ -320,20 +336,20 @@ background-color:#5596f5 !important;
.article h2{
font-size: 2.25rem;
font-family: "Lato", sans-serif;
font-family: "Inter", sans-serif;
line-height: 1.5;
font-weight: 700;
color:#333;
}
.article h1{
font-family: "Lato", sans-serif;
font-family: "Inter", sans-serif;
}
}
.article p{
font-size: 1.125rem;
font-family: "Lato", sans-serif;
font-family: "Inter", sans-serif;
line-height: 1.7;
color:#333
}
@@ -348,7 +364,7 @@ background-color:#5596f5 !important;
.article li{
font-size: 1.125rem;
font-family: "Lato", sans-serif;
font-family: "Inter", sans-serif;
line-height: 1.7;
color:#333
}
@@ -359,7 +375,7 @@ background-color:#5596f5 !important;
}
.main-title {
font-family: "Lato", sans-serif;
font-family: "Inter", sans-serif;
}
@@ -391,7 +407,7 @@ a {
}
header {
font-family: "Lato", sans-serif;
font-family: "Inter", sans-serif;
}
.nav_btn {
@@ -535,15 +551,15 @@ header {
}
.my-test{
font-family: "Lato", sans-serif;
font-family: "Inter", sans-serif;
}
.post-content-text .my-test {
font-family: "Lato", sans-serif;
font-family: "Inter", sans-serif;
line-height: 1.7;
}
.post-content-text h2 {
font-family: "Lato", sans-serif;
font-family: "Inter", sans-serif;
line-height: 1.5;
font-size: 2.25rem;
font-weight: 700;

15
css/layout.css
View File

@@ -38,11 +38,11 @@ code {
@apply text-gray-500;
}
.text-blue-dark {
/*.text-blue-dark {
/* for dark mode
@apply text-blue-200;
*/
}
}*/
.text-shadow-titles {
text-shadow: 4px 4px 2px #000;
@@ -85,7 +85,7 @@ a:active {
}
h5 a {
@apply text-gray-900 font-normal;
@apply text-gray-200 font-normal;
}
/*
@@ -381,7 +381,7 @@ blockquote {
}
& ol li {
margin-bottom: 0.5rem;
font-size: $pokey;
font-size: 75%;
}
& li p {
font-size: 100%;
@@ -464,3 +464,8 @@ footer {
width: 40%;
}
}
.bg-dark {
background: rgb(15,15,15);
background: radial-gradient(circle, rgba(15,15,15,1) 0%, rgb(24, 24, 24) 50%, rgba(15,15,15,1) 100%);
}

55
start.sh
View File

@@ -1,48 +1,25 @@
set +ex
# Check if tailwindcss is already installed
if command -v tailwindcss &> /dev/null; then
echo "tailwindcss is already installed."
else
# checks OS and architecture for correct release
echo "Installing & building tailwind..."
ASSET="tailwindcss"
if [[ "$OSTYPE" == "linux-gnu"* ]]; then
ASSET="$ASSET-linux"
elif [[ "$OSTYPE" == "darwin"* ]]; then
ASSET="$ASSET-macos"
fi
if [[ "$(uname -m)" == "x86_64"* ]]; then
ASSET="$ASSET-x64"
elif [[ "$(uname -m)" == "arm64"* ]]; then
ASSET="$ASSET-arm64"
fi
pushd /tmp
curl -sLO "https://github.com/tailwindlabs/tailwindcss/releases/latest/download/${ASSET}"
chmod +x $ASSET
mv $ASSET /usr/local/bin/tailwindcss
popd
# builds if executable isn't foound
if [[ ! -f "tailwindcss" ]]
then
sh build.sh
fi
source ./env.sh
# initialized and configures tailwind if not configured
if [ ! -f "tailwind.config.js" ]
if [[ ! -f "tailwind.config.js" ]]
then
./tailwindcss init
sed -i '' "s| content: \\[\\],| content: \\['./templates/**/*.html'\\],|g" tailwind.config.js
fi
# compiles tailwind css & launches locally
# rm -rf public static/css
# ./tailwindcss -i css/index.css -o ./static/css/index.css --watch
# zola serve &
# compiles tailwind css for prod & builds project
# ./tailwindcss -i css/index.css -o ./static/css/index.css --minify
# zola build
# # kills zola and tw bg processes on interrupt
# trap 'kill $(jobs -p); exit 1' INT
# wait
rm -rf public static/css
tailwindcss -i css/index.css -o ./static/css/index.css --minify
zola build -o ~/Documents/web/$NAME/
open ~/Documents/web/$NAME/index.html
./tailwindcss -i css/index.css -o ./static/css/index.css --watch & zola serve &
# compiles tailwind css for prod & builds project
./tailwindcss -i css/index.css -o ./static/css/index.css --minify
zola build
# kills zola and tw bg processes on interrupt
trap 'kill $(jobs -p); exit 1' INT
wait

BIN
static/images/banner.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

BIN
static/images/banner2.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.5 KiB

BIN
static/images/getanode.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

BIN
static/images/gettft_node_21.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
static/images/map2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 61 KiB

BIN
static/images/map_white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 104 KiB

BIN
static/images/tf_dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
static/images/tf_dark_2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
static/images/white_threefold.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 88 KiB

30
tailwind.config.js
View File

@@ -4,6 +4,27 @@ module.exports = {
content: [
'./templates/**/*.html'
],
safelist: [
{
pattern: /(-|)(ml|mr)-(4|8|12|16|20|24|28)/,
variants: [
'sm', 'md', 'lg',
'first', 'first:sm', 'first:md', 'first:lg',
'last', 'last:sm', 'last:md', 'last:lg'
],
},
{
pattern: /(pt|pb)-(0)/,
variants: [
'!', 'lg',
'first', 'first:sm', 'first:md', 'first:lg',
'last', 'last:sm', 'last:md', 'last:lg'
],
},
{
pattern: /bg-teal-(50|100|200|300|400|500|600|700|800|900)/, // Added teal color safelist
}
],
darkMode: false,
important: true,
theme: {
@@ -59,8 +80,13 @@ module.exports = {
from: { transform: 'translateX(0)' },
to: { transform: 'translateX(-100%)' },
}
}
},
fontFamily: {
sans: ['Inter', 'sans-serif'],
},
},
},
plugins: [], // if we add forms, do it here
plugins: [
require('@tailwindcss/aspect-ratio'),
], // if we add forms, do it here
}

15
templates/_default/base.html
View File

@@ -3,7 +3,7 @@
{% include "partials/head.html" %}
{% include "partials/header.html" %}
<body>
<body class="">
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-N7PNMFH" height="0" width="0"
@@ -42,14 +42,21 @@
<!-- End Twitter universal website tag code -->
{% include "partials/header.html" %}
<div id="content" class="px-4 lg:px-0 pt-12 overflow-hidden">
<div id="content" class="px-4 lg:px-0 pt-12 overflow-hidden bg-dark-gradient">
{% block content %}{% endblock %}
</div>
<div class="px-4 md:px-8">
<div class="px-4 md:px-8 overflow-hidden bg-dark-gradient">
{% include "partials/footer.html" %}
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.4/flowbite.min.js"></script>
<script type="text/javascript" src="{{ get_url(path='js/custom.js')}}"></script>
</body>
</html>
</html>
<style>
.bg-dark-gradient {
background: rgb(15,15,15);
background: radial-gradient(circle, rgba(15,15,15,1) 0%, rgb(24, 24, 24) 50%, rgba(15,15,15,1) 100%);
}
</style>

11
templates/index.html
View File

@@ -1,9 +1,10 @@
{% extends "_default/base.html" %}
{% block content %}
<!-- home page template, has a banner and rows of page summaries -->
<div>
{% set page = get_page(path="home/index.md") %}
{{page.content | safe}}
</div>
{% include "partials/home/hero.html" %}
{% include "partials/home/banner.html" %}
{% include "partials/home/grid_stats.html" %}
{% include "partials/home/features.html" %}
{% include "partials/home/cta.html" %}
{% endblock content %}

66
templates/partials/footer.html
View File

@@ -1,45 +1,35 @@
<!--
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
Read the documentation to get started: https://tailwindui.com/documentation
-->
{%- set section = get_section(path="footer/_index.md") %}
{%- set logoPath = section.extra.logoPath %}
<html>
<head /><body>
<div class="mt-20 border-t border-gray-200"></div>
<footer class="bg-white">
<div class="max-w-screen-2xl mx-auto py-12 px-4 sm:px-6">
<div class="xl:flex xl:gap-4">
<div class="space-y-8 lg:max-w-sm xl:max-w-sm lg:mr-8 lg:mb-8 xl:col-span-1">
<img class="w-16 h-auto sm:w-15" src="{{ get_url(path=logoPath)}}" alt="ThreeFold Logo" />
<p class="text-gray-500 text-base leading-6 ">
{{section.description}}
</p>
{% include "partials/socialLinks.html" %}
</div>
<head />
<body>
<div class="mt-20 border-t border-gray-700"></div>
<footer class="bg-transparent">
<div class="max-w-screen-2xl mx-auto py-12 px-4 sm:px-6">
<div class="xl:flex xl:gap-4">
<div class="space-y-8 lg:max-w-sm xl:max-w-sm lg:mr-8 lg:mb-8 xl:col-span-1">
<img class="w-16 h-auto sm:w-15" src="{{ get_url(path=logoPath)}}" alt="ThreeFold Logo" />
<p class="text-gray-200 text-base font-light leading-6">
{{section.description}}
</p>
{% include "partials/socialLinks.html" %}
</div>
<div class="mt-6 lg:mt-0 w-full px-8 sm:px-12 md:px-16 lg:px-20 footer-cust">
{{ section.content | safe }}
</div>
</div>
<div class="mt-6 mx-auto border-t border-gray-200 pt-8">
<p data-v-14efe4a7="" class="text-base leading-6 text-gray-400 text-center">
© <span id="year"></span> ThreeFold, All rights reserved.
<a target="_blank" href="https://library.threefold.me/info/legal/#/legal__terms_conditions_websites" class="leading-6 text-gray-500 hover:text-gray-900">Terms &amp; Conditions |
</a><a target="_blank" href="https://library.threefold.me/info/legal/#/legal__privacypolicy" class="leading-6 text-gray-500 hover:text-gray-900">Privacy Policy |
</a><a href="/tfLabs" class="leading-6 text-gray-500 hover:text-gray-900">ThreeFold Labs IT</a></p>
</div>
</div>
</div>
<div class="mt-6 lg:mt-0 w-full px-8 sm:px-12 md:px-16 lg:px-20 footer-cust">
{{ section.content | safe }}
</div>
</div>
<div class="mt-6 mx-auto border-t border-gray-700 pt-8">
<p data-v-14efe4a7="" class="text-base leading-6 text-gray-400 text-center">
© <span id="year"></span> ThreeFold, All rights reserved.
<a target="_blank" href="https://library.threefold.me/info/legal/#/legal__terms_conditions_websites" class="leading-6 text-gray-500 hover:text-gray-300">Terms &amp; Conditions |</a>
<a target="_blank" href="https://library.threefold.me/info/legal/#/legal__privacypolicy" class="leading-6 text-gray-500 hover:text-gray-300">Privacy Policy |</a>
<a href="/tfLabs" class="leading-6 text-gray-500 hover:text-gray-300">ThreeFold Labs IT</a>
</p>
</div>
</div>
</footer>
</body>
</html>
</body>
</html>

48
templates/partials/header.html
View File

@@ -2,12 +2,12 @@
{% set header_items = section.content | safe | split(pat="<li>") %}
<header id="header-container">
<div class="z-20 bg-white fixed w-full top-0">
<div class="relative z-50 shadow">
<div class="mx-auto flex z-50 shadow justify-between items-center px-6 sm:px-4 md:px-6 py-2 lg:px-5 lg:justify-start space-x-10 sm:space-x-4 ">
<div class="z-20 bg-black2 fixed w-full top-0">
<div class="relative z-50">
<div class="mx-auto flex z-50 justify-between items-center px-6 sm:px-4 md:px-6 py-2 lg:px-5 lg:justify-start space-x-10 sm:space-x-4 ">
<div>
<a href="{{get_url(path='/')}}" class="flex">
<img class="w-16 h-auto sm:w-15" style="max-width: none;" src="{{ get_url(path=section.extra.logoPath)}}" alt="ThreeFold Logo" />
<img class="w-12 h-auto sm:w-15" style="max-width: none;" src="{{ get_url(path=section.extra.logoPath)}}" alt="ThreeFold Logo" />
</a>
</div>
<div class="-mr-2 -my-2 lg:hidden">
@@ -36,25 +36,25 @@
{% set current = get_url(path=link_path[1]) ~ "/" %}
{% if header_label is containing("http") %}
{% if header_label is not containing("threefold") %}
<a href="{{link_path[1]}}" target="_blank" class="text-lg py-3 leading-6 font-medium text-gray-900 hover:text-gray-500 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
<a href="{{link_path[1]}}" target="_blank" class="text-lg py-3 leading-6 font-light text-pretty tracking-wide text-white hover:text-gray-200 focus:outline-none focus:text-gray-200 transition ease-in-out duration-150">
{{link_label}}
</a>
{% endif %}
{% elif current_url and current == current_url %}
<a href="{{ get_url(path=link_path[1])}}" class="text-lg py-3 leading-6 font-normal active hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
<a href="{{ get_url(path=link_path[1])}}" class="text-lg py-3 leading-6 font-light text-pretty tracking-wide text-white hover:text-gray-200 focus:outline-none focus:text-gray-200 transition ease-in-out duration-150">
{{link_label}}
</a>
{% else %}
<a href="{{ get_url(path=link_path[1])}}" class="text-lg py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
<a href="{{ get_url(path=link_path[1])}}" class="text-lg py-3 leading-6 font-normal text-white hover:text-gray-200 focus:outline-none focus:text-gray-200 transition ease-in-out duration-150">
{{link_label}}
</a>
{% endif %}
{% else %}
<div class="relative">
{% set button_id = header_label ~ "-menu-btn" | slugify %}
<button type="button" id="{{button_id}}" class="nav_btn py-3 text-gray-900 group inline-flex items-center space-x-2 text-lg leading-6 font-normal hover:text-gray-500 focus:outline-none transition ease-in-out duration-150">
<button type="button" id="{{button_id}}" class="nav_btn py-3 text-white group inline-flex items-center space-x-2 text-lg leading-6 font-normal hover:text-gray-200 focus:outline-none transition ease-in-out duration-150">
<span>{{ header_label }}</span>
<div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
<div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#ffffff"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
</button>
</div>
@@ -67,7 +67,7 @@
<div class="inline-flex">
{# <ul class="list-none inline-flex mt-5 mr-4 mx-auto">
<li class="ml-4">
<a href="https://t.me/threefoldnews" target="_blank" class="text-black">
<a href="https://t.me/threefoldnews" target="_blank" class="text-white">
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
@@ -87,7 +87,7 @@
<a
href="javascript:;"
onclick="ml_account('webforms', '3562741', 'n7q9l7', 'show')"
class="text-black"
class="text-white"
>
<svg
aria-hidden="true"
@@ -107,17 +107,8 @@
</a>
</li>
</ul> #}
{# <a href="/getnode"><button class="px-6 green">Get Node</button></a> #}
<div class="rounded-full border-2 mt-1 border-gray-400">
<a href="/getnode" class="mt-2">
<img
src="{{ get_url(path=section.extra.button_Path) }}"
class="mr-5"
style="max-width: none;"
alt=""
/>
<a href="/getnode" class=" rounded-2xl bg-white px-4 py-1 text-sm font-semibold text-black shadow-sm hover:bg-gray-300 hover:text-gray-800">Get 3Nodes
</a>
</div>
</div>
</div>
</div>
@@ -132,7 +123,7 @@
<nav>
<div id="{{menu_id}}" class="nav_menu mt-0 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 z-50 absolute inset-x-0 transform shadow-lg lg:backdrop-blur xl:backdrop-blur transition duration-200 ease-in opacity-0 -translate-y-1 hidden">
<div class="bg-white lg:bg-semi-white md:bg-semi-white xl:bg-semi-white">
<div class="bg-black">
<div id="menu" class="mx-8 lg:mx-10 xl:mx-10 px-6 sm:p-6 md:p-8">
{{header_menu | safe }}
</div>
@@ -176,13 +167,13 @@
</a>
{% endif %}
{% else %}
<a href="{{ get_url(path=link_path[1])}}" class="text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
<a href="{{ get_url(path=link_path[1])}}" class="text-lg px-8 py-3 leading-6 font-normal text-white hover:text-white focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
{{link_label}}
</a>
{% endif %}
{% else %}
{% set button_id = header_label ~ "-mobile-menu-btn" | slugify %}
<button type="button" id="{{button_id}}" class="flex flex px-8 py-3 items-start text-left text-gray-900 group inline-flex space-x-2 text-lg leading-6 font-normal hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
<button type="button" id="{{button_id}}" class=" px-8 py-3 items-start text-left text-white group inline-flex space-x-2 text-lg leading-6 font-normal hover:text-gray-200 focus:outline-none focus:text-white transition ease-in-out duration-150">
{{ header_label }}
<div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
</button>
@@ -207,14 +198,7 @@
</div> #}
<div class="rounded-full border-2 mt-4 mx-8 border-gray-400">
<a href="/getnode" class="mt-2">
<img
src="/images/gettft_node_2.png"
class="mr-5"
style="max-width: none;"
alt=""
/>
</a>
<a href="/getnode" class="mt-2 rounded-md bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Get Node</a>
</div>
</nav>
</div>

86
templates/partials/header_custom.html Normal file
View File

@@ -0,0 +1,86 @@
<header id="header-container" class="bg-inherit">
<div class="z-10 bg-dark1 w-screen">
<div class="relative z-50">
<div class="mx-auto flex z-50 bg-transparent justify-between items-center pl-6 pr-2 md:pl-0 md:pr-0 lg:py-5 sm:px-8 md:px-12 py-2 lg:px-20 lg:justify-start lg:space-x-20">
<div>
<a href="/" class="flex">
<img src="images/tf_dark.png" alt="ODFZ Logo" />
</a>
</div>
<div class="-mr-2 -my-2 lg:hidden">
<button id="hamburger-btn" class="menu-mobile inline-flex items-center justify-center p-2 rounded-md text-white hover:text-gray-200 hover:bg-gray-800 focus:outline-none transition duration-150 ease-in-out my-2">
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<button id="close-hamburger-btn" class="menu-mobile hidden inline-flex items-center justify-center p-2 rounded-md text-white hover:text-gray-500 hover:bg-gray-700 focus:outline-none transition duration-150 ease-in-out my-2">
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="hidden lg:flex-1 lg:flex lg:items-center lg:justify-end lg:space-x-12">
<nav class="flex space-x-10">
{% for header_item in header_items %}
{% if not loop.first %}
{% set header_arr = header_item | split(pat="</li>") %}
{% set header_label = header_arr[0] %}
{% if '<a' in header_label %}
{% set link_label = header_label | striptags %}
{% set link_path = header_label | split(pat="%22") | safe%}
{% set current = get_url(path=link_path[1]) ~ "/" %}
{% if header_label is containing("http") %}
{% if header_label is not containing("threefold") %}
<a href="{{link_path[1]}}" target="_blank" class="text-lg py-3 leading-6 font-medium text-gray-900 hover:text-gray-500 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
{{link_label}}
</a>
{% endif %}
{% elif current_url and current == current_url %}
<a href="{{ get_url(path=link_path[1])}}" class="text-lg py-3 leading-6 font-normal active hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
{{link_label}}
</a>
{% else %}
<a href="{{ get_url(path=link_path[1])}}" class="text-lg py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
{{link_label}}
</a>
{% endif %}
{% else %}
<div class="relative">
{% set button_id = header_label ~ "-menu-btn" | slugify %}
<button type="button" id="{{button_id}}" class="nav_btn py-3 text-gray-900 group inline-flex items-center space-x-2 text-lg leading-6 font-normal hover:text-gray-500 focus:outline-none transition ease-in-out duration-150">
<span>{{ header_label }}</span>
<div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
</button>
</div>
{% endif %}
{% endif %}
{% endfor %}
</nav>
</div>
</div>
</div>
{% for header_item in header_items %}
{% set header_parts = header_item | split(pat="</li>") %}
{% set header_label = header_parts[0] %}
{% set header_menu = header_parts[1] %}
{% set menu_id = header_label ~ "-menu" | slugify %}
<nav>
<div id="{{menu_id}}" class="mt-16 z-30 absolute inset-x-0 transform lg:backdrop-blur transition duration-200 ease-in opacity-0 -translate-y-1 hidden">
<div class="bg-gray-800 lg:bg-gray-900">
<div class="mx-8 lg:mx-20 px-6 py-4 text-white">
{{ header_menu | safe }}
</div>
</div>
</div>
</nav>
{% endfor %}
</div>
</header>
<style>
.bg-dark1 {
background: rgba(15,15,15,1);
}
</style>

9
templates/partials/home/banner.html Normal file
View File

@@ -0,0 +1,9 @@
<div class="bg-transparent py-24 flex justify-center items-center">
<div class="mx-auto max-w-7xl px-4 lg:px-6">
<img
class="object-contain w-full lg:w-[100%] max-w-[100%]"
src="images/banner2.gif"
alt="TF">
</div>
</div>

15
templates/partials/home/cta.html Normal file
View File

@@ -0,0 +1,15 @@
<div class="bg-transparent">
<div class="mx-auto rounded-2xl bg-white/5 max-w-7xl px-6 py-24 lg:flex lg:items-center lg:justify-between lg:px-8">
<h2 class="lg:text-balance sm:text-center px-8 font-normal tracking-tight text-white lg:text-5xl text-3xl fade-in">
Build the <br>Internet of Tomorrow, <br>Today.
</h2>
<div class="mt-10 flex items-center gap-x-6 lg:mt-0 lg:shrink-0 flex-wrap justify-center lg:justify-start">
<a href="#" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-2 mb-4 lg:mb-0">
Talk to an Expert
</a>
<a href="#" class="fade-in rounded-2xl bg-transparent px-4 py-2.5 text-sm font-semibold text-white hover:text-gray-200 mb-4 lg:mb-0">
Dive Deeper <span aria-hidden="true">→</span>
</a>
</div>
</div>
</div>

76
templates/partials/home/features.html Normal file
View File

@@ -0,0 +1,76 @@
<div class="bg-transparent">
<div class="mx-auto grid max-w-2xl grid-cols-1 items-center gap-x-16 gap-y-16 px-8 pt-12 mt-12 pb-24 lg:max-w-7xl lg:grid-cols-2 lg:px-8">
<div class="max-w-2xl px-16 pb-12">
<h2 class="fade-in text-balance lg:text-4xl text-2xl leading-snug font-normal tracking-tight text-white sm:text-5xl">Why ThreeFold is Leading the Next Gen of Cloud & Network Technology
</h2>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">ThreeFold is not a protocol. We’ve developed foundational technology that runs directly on bare metal (the hardware).</p>
<p class="mx-auto mt-4 mb-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">ThreeFold is likely the only active project with a truly scalable solution addressing the Internet and Cloud’s core components: <b>Data, Cloud, and Network</b>.</p>
<a href="#" class="fade-in lg:text-xl text-base tracking-normal font-medium pt-6 text-white hover:text-gray-400 blinking-effect">Discover Products <span aria-hidden="true">→</span></a>
</div>
<div class="lg:px-16 fade-in"> <!-- Added padding to the right side for more spacing -->
<dl class="grid grid-cols-1 mx-auto gap-x-8 sm:grid-cols-2 gap-y-10">
<div class="">
<dt class="font-medium text-gray-200">Unbreakable Data</dt>
</div>
<div class="">
<dd class="font-light text-gray-400 text-sm mb-4">Data cannot be compromised and always remains private, owned by you. A scalable system, to the planetary level. Can be distributed and stored in ways which are at least 10x more efficient and orders of magnitude more secure and reliable.</dd>
</div>
<div class="pt-4">
<dt class="font-medium text-gray-200">Autonomous Cloud</dt>
</div>
<div class="">
<dd class="font-light text-gray-400 text-sm mb-4">Self-healing and self-driving cloud based on an efficient and secure operating system runs directly on the hardware. Can run any Web 2, Web 3, or AI workload at the edge of the Internet, with more scalability and reliability.</dd>
</div>
<div class="pt-4">
<dt class="font-medium text-gray-200">P2P Network</dt>
</div>
<div class="">
<dd class="font-light text-gray-400 text-sm mb-4">End-to-end encrypted overlay network, always looking for the shortest possible path between participants. Logical Internet address securely linked to a private key. Unlimited scale and performance optimizations.</dd>
</div>
</dl>
</div>
</div>
</div>
<style>
/* Define the slow blinking animation */
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* Apply the fade-in animation to elements with the 'fade-in' class */
.fade-in {
animation: fadeIn 4s ease-in-out forwards; /* Adjust the duration (2s) to make it slower or faster */
}
/* Optional: Delay the animation for a more staggered effect */
h2 {
animation-delay: 0.5s; /* Delay for header */
}
p {
animation-delay: 1s; /* Delay for paragraphs */
}
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0.4;
}
100% {
opacity: 1;
}
}
/* Apply the blinking animation to the link */
.blinking-effect {
animation: blink 3s infinite; /* Adjust the speed here (1.5s for slow blinking) */
}
</style>

69
templates/partials/home/grid_stats.html Normal file
View File

@@ -0,0 +1,69 @@
<div class="bg-transparent relative isolate overflow-hidden py-24 mb-12">
<img src="images/map_white.png" alt="" class="fade-in absolute inset-0 -z-10 size-full object-cover">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:max-w-none">
<div class="text-center">
<h2 class="fade-in text-balance text-4xl font-normal tracking-tight text-white sm:text-5xl">Proven by a Global Community</h2>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">With ThreeFold, individuals, organizations, communities, countries, and network states deploy their own sovereign infrastructure. The ThreeFold Grid has been live and operational since 2017.</p>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">Version 3.14 is live on Mainnet.</p>
</div>
<dl class="mt-16 grid grid-cols-1 gap-2 overflow-hidden rounded-2xl text-center sm:grid-cols-2 lg:grid-cols-4">
<div class="fade-in flex flex-col bg-white/5 p-8">
<dt class="text-sm/6 font-light text-gray-300">CAPACITY</dt>
<dd class="order-first text-3xl font-semibold tracking-tight text-white">19,10 PB</dd>
</div>
<div class="fade-in flex flex-col bg-white/5 p-8">
<dt class="text-sm/6 font-light text-gray-300">CORES</dt>
<dd class="order-first text-3xl font-semibold tracking-tight text-white">46,934</dd>
</div>
<div class="fade-in flex flex-col bg-white/5 p-8">
<dt class="text-sm/6 font-semibold text-gray-300">NODES</dt>
<dd class="order-first text-3xl font-semibold tracking-tight text-white">1596</dd>
</div>
<div class="fade-in flex flex-col bg-white/5 p-8">
<dt class="text-sm/6 font-semibold text-gray-300">FARMS</dt>
<dd class="order-first text-3xl font-semibold tracking-tight text-white">900+</dd>
</div>
</dl>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
// Initialize the countUp for each of the numbers
new CountUp('capacity', 0, 1910, 0, 2.5).start();
new CountUp('cores', 0, 46934, 0, 2.5).start();
new CountUp('nodes', 0, 1596, 0, 2.5).start();
new CountUp('countries', 0, 40, 0, 2.5).start();
new CountUp('farms', 0, 900, 0, 2.5).start();
});
</script>
<style>
/* Define the fade-in animation */
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* Apply the fade-in animation to elements with the 'fade-in' class */
.fade-in {
animation: fadeIn 4s ease-in-out forwards; /* Adjust the duration (2s) to make it slower or faster */
}
/* Optional: Delay the animation for a more staggered effect */
h2 {
animation-delay: 0.5s; /* Delay for header */
}
p {
animation-delay: 1s; /* Delay for paragraphs */
}
</style>

40
templates/partials/home/hero.html Normal file
View File

@@ -0,0 +1,40 @@
<div class="relative isolate overflow-hidden bg-transparent">
<div class="px-6 lg:pt-32 mt-12 pt-24 lg:pb-24 pb-12 sm:px-6 lg:px-8">
<div class="mx-auto max-w-4xl text-center">
<h2 class="text-balance font-normal tracking-tight text-white lg:text-6xl text-3xl fade-in">A Self-Healing Data, Network and Cloud Platform</h2>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">Imagine a system built to scale to a planetary level, seamlessly compatible with AI, Cloud, Web2, Web3, and Edge IT workloads. A system that is resilient to unforeseen events, provides 100% uptime, and enables any machine and human to communicate over the shortest, most direct path possible.</p>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">That's <span class="font-semibold">ThreeFold.</span></p>
<div class="mt-12 flex items-center justify-center gap-x-6">
<a href="#" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-2">Get started</a>
<a href="#" class=" fade-in text-sm/6 font-semibold text-white hover:text-gray-400">Learn more <span aria-hidden="true">→</span></a>
</div>
</div>
</div>
</div>
<style>
/* Define the fade-in animation */
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* Apply the fade-in animation to elements with the 'fade-in' class */
.fade-in {
animation: fadeIn 4s ease-in-out forwards; /* Adjust the duration (2s) to make it slower or faster */
}
/* Optional: Delay the animation for a more staggered effect */
h2 {
animation-delay: 0.5s; /* Delay for header */
}
p {
animation-delay: 1s; /* Delay for paragraphs */
}
</style>

2
templates/shortcodes/grid_stats.html
View File

@@ -1,5 +1,5 @@
{% set styles = "background-image: url('images/V3.png');" %}
<section class="px-2 h-auto bg-center lg:py-28 p-12 bg-cover bg-no-repeat" style="{{styles}}">
<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 }}

18
templates/static/css/index.css
View File

@@ -806,7 +806,7 @@ h5,
.h5,
h6,
.h6{
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
line-height: 1.25;
letter-spacing: -0.025em;
}
@@ -1395,14 +1395,14 @@ button{
.article h2{
font-size: 2.25rem;
font-family: Lato,sans-serif!important;
font-family: Inter,sans-serif!important;
line-height: 1.5;
font-weight: 700;
color:#333;
}
.article h1{
font-family: Lato,sans-serif!important;
font-family: Inter,sans-serif!important;
}
:root {
@@ -2269,6 +2269,10 @@ details[open] > summary::after {
width: 3rem !important;
}
.w-13{
width: 4rem !important;
}
.w-64{
width: 16rem !important;
}
@@ -3442,7 +3446,7 @@ details[open] > summary::after {
}
* {
font-family: "Lato", sans-serif;
font-family: "Inter", sans-serif;
}
.bg-semi-white {
@@ -3540,7 +3544,7 @@ h1 {
.article p{
font-size: 1.125rem;
font-family: Lato,sans-serif!important;
font-family: Inter,sans-serif!important;
line-height: 1.7;
color:#333
}
@@ -3558,7 +3562,7 @@ h1 {
}
.main-title {
font-family: Lato,sans-serif!important;
font-family: Inter,sans-serif!important;
}
button:hover :is(:where(a)) {
@@ -3725,7 +3729,7 @@ header {
}
.post-content-text h2 {
font-family: Lato,sans-serif!important;
font-family: Inter,sans-serif!important;
line-height: 1.5;
font-size: 2.25rem;
font-weight: 700;