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

text light and dark at home page

Browse Source
This commit is contained in:
Ehab Hassan
2025-01-13 16:47:26 +02:00
parent f34164002c
commit 256fe586ab
8 changed files with 90 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
config.toml
View File

@@ -6,12 +6,12 @@ title = "ThreeFold"
description = "Our global digital backbone" description = "Our global digital backbone"
# When set to "true", a feed is automatically generated. # When set to "true", a feed is automatically generated.
generate_feed = true #generate_feed = true
# The filename to use for the feed. Used as the template filename, too. # The filename to use for the feed. Used as the template filename, too.
# Defaults to "atom.xml", which has a built-in template that renders an Atom 1.0 feed. # Defaults to "atom.xml", which has a built-in template that renders an Atom 1.0 feed.
# There is also a built-in template "rss.xml" that renders an RSS 2.0 feed. # There is also a built-in template "rss.xml" that renders an RSS 2.0 feed.
feed_filename = "atom.xml" #feed_filename = "atom.xml"
# The number of articles to include in the feed. All items are included if # The number of articles to include in the feed. All items are included if
# this limit is not set (the default). # this limit is not set (the default).
@@ -51,8 +51,8 @@ external_links_no_referrer = true
# For example, `...` into `…`, `"quote"` into `“curly”` etc # For example, `...` into `…`, `"quote"` into `“curly”` etc
smart_punctuation = true smart_punctuation = true
[build] #[build]
not_found = "404.md" #not_found = "404.md"
[[taxonomies]] [[taxonomies]]
name = "categories" name = "categories"

20
css/index.css
View File

@@ -12,6 +12,19 @@
@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'); @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');
/* Default Light Mode */
body {
background-color: #ffffff;
color: #000000;
}
/* Dark Mode */
body.dark-mode {
background-color: #121212;
color: #ffffff;
}
.dashboard:hover { .dashboard:hover {
background: #74ddc3 !important; background: #74ddc3 !important;
@@ -263,12 +276,10 @@ background-color:#5596f5 !important;
@layer components { @layer components {
h1 { h1 {
@apply text-4xl lg:text-6xl font-normal; @apply text-4xl lg:text-6xl font-normal;
color: #ffffff;
font-family: "Inter", sans-serif !important; font-family: "Inter", sans-serif !important;
} }
h2 { h2 {
@apply text-3xl lg:text-4xl my-4 font-normal leading-none; @apply text-3xl lg:text-4xl my-4 font-normal leading-none;
color: #ffffff;
font-family: "Inter", sans-serif !important; font-family: "Inter", sans-serif !important;
} }
h2 strong { h2 strong {
@@ -276,7 +287,6 @@ background-color:#5596f5 !important;
} }
h3 { h3 {
@apply text-2xl lg:text-3xl my-4 font-extralight; @apply text-2xl lg:text-3xl my-4 font-extralight;
color: #ffffff;
font-family: "Inter", sans-serif !important; font-family: "Inter", sans-serif !important;
} }
h3 strong { h3 strong {
@@ -290,7 +300,6 @@ background-color:#5596f5 !important;
h5 { h5 {
@apply text-lg my-1 tracking-normal font-medium; @apply text-lg my-1 tracking-normal font-medium;
font-family: "Inter", sans-serif !important; font-family: "Inter", sans-serif !important;
color: #fff !important
} }
h6 { h6 {
@apply text-md not-italic font-normal my-1; @apply text-md not-italic font-normal my-1;
@@ -298,7 +307,6 @@ background-color:#5596f5 !important;
} }
p { p {
@apply text-lg; @apply text-lg;
color: #3d3d3d;
font-family: "Inter", sans-serif !important; font-family: "Inter", sans-serif !important;
} }
blockquote { blockquote {
@@ -492,7 +500,6 @@ header {
.banner h2, .banner h2,
.header h1 { .header h1 {
margin: auto; margin: auto;
color: #fff;
position: relative; position: relative;
transition: 0.3s; transition: 0.3s;
z-index: 1; z-index: 1;
@@ -500,7 +507,6 @@ header {
} }
.header h1 { .header h1 {
color: #000;
transition: none; transition: none;
} }

26
static/js/custom.js
View File

@@ -191,3 +191,29 @@ function formatStatsData(stats) {
readingTime(); readingTime();
getStats(); getStats();
document.getElementById("year").innerHTML = new Date().getFullYear(); document.getElementById("year").innerHTML = new Date().getFullYear();
// Get the toggle switch
const toggleSwitch = document.getElementById('darkModeSwitch');
// Apply the saved theme on load
document.addEventListener('DOMContentLoaded', () => {
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
document.body.classList.add('dark-mode');
toggleSwitch.checked = true;
}
});
// Toggle dark mode
toggleSwitch.addEventListener('change', () => {
if (toggleSwitch.checked) {
document.body.classList.add('dark-mode');
localStorage.setItem('theme', 'dark');
} else {
document.body.classList.remove('dark-mode');
localStorage.setItem('theme', 'light');
}
});

2
templates/_default/base.html
View File

@@ -3,7 +3,7 @@
{% include "partials/head.html" %} {% include "partials/head.html" %}
{% include "partials/header.html" %} {% include "partials/header.html" %}
<body class="bg-dark-gradient"> <body class="">
<!-- Google Tag Manager (noscript) --> <!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-N7PNMFH" height="0" width="0" <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-N7PNMFH" height="0" width="0"

5
templates/partials/header.html
View File

@@ -107,6 +107,11 @@
</a> </a>
</li> </li>
</ul> #} </ul> #}
<button class="theme-toggle">
<label clas="text-white" for="darkModeSwitch">Dark Mode:</label>
<input type="checkbox" id="darkModeSwitch">
</button>
<a href="/signup" target="_blank" class="blinking-effect dashboard rounded-2xl bg-white px-4 p-2 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green">Join the Web4 Revolution</a> <a href="/signup" target="_blank" class="blinking-effect dashboard rounded-2xl bg-white px-4 p-2 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green">Join the Web4 Revolution</a>
</div> </div>
</div> </div>

25
templates/partials/home/farmers.html
View File

@@ -1,7 +1,7 @@
<div class="bg-transparent pt-12 pb-6"> <div class="bg-transparent pt-12 pb-6">
<div class="mx-auto max-w-7xl px-6 lg:max-w-7xl lg:px-8"> <div class="mx-auto max-w-7xl px-6 lg:max-w-7xl lg:px-8">
<div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8"> <div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
<h2 class="mx-auto fade-in text-left lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-white">Powering the ThreeFold Grid Together</h2> <h2 class="mx-auto fade-in text-left lg:text-5xl text-4xl leading-snug font-normal tracking-tight">Powering the ThreeFold Grid Together</h2>
<p class="text-left my-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in"> <p class="text-left my-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">
Regardless of technical expertise, anyone can now provide data, network, and cloud resources to where they’re needed most while earning rewards for their contributions. We call this process "farming”. Regardless of technical expertise, anyone can now provide data, network, and cloud resources to where they’re needed most while earning rewards for their contributions. We call this process "farming”.
</p> </p>
@@ -10,33 +10,33 @@
<div class="max-w-6xl mx-4 md:mx-10 lg:mx-20 xl:mx-auto"> <div class="max-w-6xl mx-4 md:mx-10 lg:mx-20 xl:mx-auto">
<div class="mx-auto max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none"> <div class="mx-auto max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
<dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-8 lg:max-w-none lg:grid-cols-3"> <dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-8 lg:max-w-none lg:grid-cols-3">
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5"> <div class="fade-in-box flex flex-col p-8 rounded-2xl double_bg">
<dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-white"> <dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold">
1. HOST A NODE 1. HOST A NODE
</dt> </dt>
<dd class="mt-4 flex flex-auto flex-col"> <dd class="mt-4 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light text-gray-200 text-md">All you need to get started is a modern computer, electricity and network. Once booted with Zero OS, a computer becomes a ThreeFold Node.</p> <p class="flex-auto leading-normal font-light text-md">All you need to get started is a modern computer, electricity and network. Once booted with Zero OS, a computer becomes a ThreeFold Node.</p>
<p class="mt-6"> <p class="mt-6">
</p> </p>
</dd> </dd>
</div> </div>
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5"> <div class="fade-in-box flex flex-col p-8 rounded-2xl double_bg">
<dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-white"> <dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold">
2. OFFER CAPACITY 2. OFFER CAPACITY
</dt> </dt>
<dd class="mt-4 flex flex-auto flex-col"> <dd class="mt-4 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light text-gray-200 text-md">The capacity of the node gets verified and registered in the ThreeFold Blockchain, securing access to a decentralized autonomous cloud for users and communities.</p> <p class="flex-auto leading-normal font-light text-md">The capacity of the node gets verified and registered in the ThreeFold Blockchain, securing access to a decentralized autonomous cloud for users and communities.</p>
<p class="mt-6"> <p class="mt-6">
</p> </p>
</dd> </dd>
</div> </div>
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5"> <div class="fade-in-box flex flex-col p-8 rounded-2xl double_bg">
<dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-white"> <dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold">
3. EARN REWARDS 3. EARN REWARDS
</dt> </dt>
<dd class="mt-4 flex flex-auto flex-col"> <dd class="mt-4 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light text-gray-200 text-md">After your node is set up and verified, you’ll be rewarded for the capacity that you provide to the ThreeFold Grid. <p class="flex-auto leading-normal font-light text-md">After your node is set up and verified, you’ll be rewarded for the capacity that you provide to the ThreeFold Grid.
</p> </p>
<p class="mt-6"> <p class="mt-6">
@@ -54,6 +54,11 @@
</section> </section>
<style> <style>
.double_bg {
background-color: rgb(100 100 100 / 0.2);
}
/* Fade-in animation for the grid items */ /* Fade-in animation for the grid items */
.fade-in-box { .fade-in-box {
opacity: 0; opacity: 0;

37
templates/partials/home/grid_stats.html
View File

@@ -3,51 +3,51 @@
<div class="mx-auto max-w-7xl px-6 lg:px-8"> <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="mx-auto max-w-2xl lg:max-w-none">
<div class="text-center"> <div class="text-center">
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-white ">A Global Community</h2> <h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight ">A Global Community</h2>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">With ThreeFold, individuals, organizations, communities, countries, and network states have the potential to deploy their own sovereign infrastructure. Our proof of concept network with 56,000+ vCPUs has been operational for years.</p> <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light fade-in">With ThreeFold, individuals, organizations, communities, countries, and network states have the potential to deploy their own sovereign infrastructure. Our proof of concept network with 56,000+ vCPUs has been operational for years.</p>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">Version 3.15 is live on Mainnet.</p> <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light fade-in">Version 3.15 is live on Mainnet.</p>
</div> </div>
<dl class="items mt-16 grid grid-cols-1 gap-2 overflow-hidden rounded-2xl text-center sm:grid-cols-2 lg:grid-cols-4"> <dl class="items mt-16 grid grid-cols-1 gap-2 overflow-hidden rounded-2xl text-center sm:grid-cols-2 lg:grid-cols-4">
<!-- ssd --> <!-- ssd -->
<div class="fade-in flex flex-col justify-center items-center bg-white/5 p-6"> <div class="fade-in flex flex-col justify-center items-center double_bg p-6">
<div class="tooltip"> <div class="tooltip">
<span class="tooltiptext">The total amount of storage (SSD, HDD, & RAM) on the grid.</span> <span class="tooltiptext">The total amount of storage (SSD, HDD, & RAM) on the grid.</span>
<dt class="text-sm/6 font-light text-gray-300">SSD CAPACITY</dt> <dt class="text-sm/6 font-light">SSD CAPACITY</dt>
<dd id="ssd" class="order-first text-3xl font-semibold tracking-tight text-white"></dd> <dd id="ssd" class="order-first text-3xl font-semibold tracking-tight"></dd>
</div> </div>
</div> </div>
<!-- cores --> <!-- cores -->
<div class="fade-in flex flex-col bg-white/5 p-6"> <div class="fade-in flex flex-col double_bg p-6">
<div class="tooltip"> <div class="tooltip">
<span class="tooltiptext">The total number of Central Processing Unit cores (compute power) available on the grid.</span> <span class="tooltiptext">The total number of Central Processing Unit cores (compute power) available on the grid.</span>
<dt class="text-sm/6 font-light text-gray-300">CORES</dt> <dt class="text-sm/6 font-light">CORES</dt>
<dd id="cores" class="order-first text-3xl font-semibold tracking-tight text-white"></dd> <dd id="cores" class="order-first text-3xl font-semibold tracking-tight"></dd>
</div> </div>
</div> </div>
<!-- Nodes --> <!-- Nodes -->
<div class="fade-in flex flex-col bg-white/5 p-6"> <div class="fade-in flex flex-col double_bg p-6">
<div class="tooltip"> <div class="tooltip">
<span class="tooltiptext">The total number of nodes on the grid. A node is a computer server 100% dedicated to the network.</span> <span class="tooltiptext">The total number of nodes on the grid. A node is a computer server 100% dedicated to the network.</span>
<dt class="text-sm/6 font-light text-gray-300">NODES</dt> <dt class="text-sm/6 font-light">NODES</dt>
<dd id="nodes" class="order-first text-3xl font-semibold tracking-tight text-white"></dd> <dd id="nodes" class="order-first text-3xl font-semibold tracking-tight"></dd>
</div> </div>
</div> </div>
<!-- countries --> <!-- countries -->
<div class="fade-in flex flex-col bg-white/5 p-6"> <div class="fade-in flex flex-col double_bg p-6">
<div class="tooltip"> <div class="tooltip">
<span class="tooltiptext">The total number of countries where at least one node is connected and operational.</span> <span class="tooltiptext">The total number of countries where at least one node is connected and operational.</span>
<dt class="text-sm/6 font-light text-gray-300">COUNTRIES</dt> <dt class="text-sm/6 font-light">COUNTRIES</dt>
<dd id="countries" class="order-first text-3xl font-semibold tracking-tight text-white"></dd> <dd id="countries" class="order-first text-3xl font-semibold tracking-tight"></dd>
</div> </div>
</div> </div>
</dl> </dl>
</div> </div>
<div class="max-w-4xl items-center mx-auto"> <div class="max-w-4xl items-center mx-auto">
<p class="items-center text-center justify-center mt-10 text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">As we together roll out Web4 we might need millions of nodes.<br>This will establish a truly decentralized and resilient infrastructure.</p> <p class="items-center text-center justify-center mt-10 text-pretty lg:text-xl text-lg font-light fade-in">As we together roll out Web4 we might need millions of nodes.<br>This will establish a truly decentralized and resilient infrastructure.</p>
</div> </div>
</div> </div>
<div class="mt-12 flex items-center justify-center gap-x-6"> <div class="mt-12 flex items-center justify-center gap-x-6">
<a href="https://dashboard.grid.tf/#/tf-grid/node-statistics/" target="_blank" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-green hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 mt-8">Explore Grid Capacity</a> <a href="https://dashboard.grid.tf/#/tf-grid/node-statistics/" target="_blank" class="fade-in border-gray-500 border-2 rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-100 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 mt-8">Explore Grid Capacity</a>
</div> </div>
</div> </div>
@@ -73,6 +73,9 @@
opacity: 1; opacity: 1;
} }
} }
.double_bg {
background-color: rgb(100 100 100 / 0.2);}
/* Apply the fade-in animation to elements with the 'fade-in' class */ /* Apply the fade-in animation to elements with the 'fade-in' class */
.fade-in { .fade-in {

12
templates/partials/home/hero.html
View File

@@ -1,15 +1,15 @@
<div class="relative isolate overflow-hidden bg-transparent"> <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="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"> <div class="mx-auto max-w-4xl text-center">
<h2 class="text-balance font-normal tracking-tight text-white lg:text-6xl text-5xl fade-in">We are Building <br>a New Internet</h2> <h2 class="text-balance font-normal tracking-tight lg:text-6xl text-5xl fade-in">We are Building <br>a New Internet</h2>
<p class="mx-auto mt-8 max-w-3xl text-pretty lg:text-2xl text-xl font-light text-gray-200 fade-in">A system built to scale to a planetary level, compatible with AI, Cloud, Web2, and Web3. Capable to provide 100% uptime, it enables any machine and human to communicate over the shortest path.</p> <p class="mx-auto mt-8 max-w-3xl text-pretty lg:text-2xl text-xl font-light fade-in">A system built to scale to a planetary level, compatible with AI, Cloud, Web2, and Web3. Capable to provide 100% uptime, it enables any machine and human to communicate over the shortest path.</p>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-2xl text-xl font-light text-gray-200 fade-in">That's <span class="font-semibold">ThreeFold's</span></p> <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-2xl text-xl font-light fade-in">That's <span class="font-semibold">ThreeFold's</span></p>
<br> <br>
<h2 class="text-balance font-normal tracking-tight text-white lg:text-6xl text-6xl fade-in">Web4</h2> <h2 class="text-balance font-normal tracking-tight lg:text-6xl text-6xl fade-in">Web4</h2>
<br> <br>
<div class="mt-10 flex items-center justify-center gap-x-6"> <div class="mt-10 flex items-center justify-center gap-x-6">
<a href="/what" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">What We've Built</a> <a href="/what" class="fade-in border-gray-500 border-2 rounded-2xl px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:text-gray-800 bg-white hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">What We've Built</a>
<a href="https://docs.threefold.io/" target="_blank" class="fade-in text-base font-semibold text-white hover:text-green ">Read TF Docs<span aria-hidden="true">→</span></a> <a href="https://docs.threefold.io/" target="_blank" class="fade-in text-base font-semibold hover:text-green ">Read TF Docs<span aria-hidden="true">→</span></a>
</div> </div>
</div> </div>
</div> </div>