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"
# 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.
# 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.
feed_filename = "atom.xml"
#feed_filename = "atom.xml"
# The number of articles to include in the feed. All items are included if
# this limit is not set (the default).
@@ -51,8 +51,8 @@ external_links_no_referrer = true
# For example, `...` into `…`, `"quote"` into `“curly”` etc
smart_punctuation = true
[build]
not_found = "404.md"
#[build]
#not_found = "404.md"
[[taxonomies]]
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');
/* Default Light Mode */
body {
background-color: #ffffff;
color: #000000;
}
/* Dark Mode */
body.dark-mode {
background-color: #121212;
color: #ffffff;
}
.dashboard:hover {
background: #74ddc3 !important;
@@ -263,12 +276,10 @@ background-color:#5596f5 !important;
@layer components {
h1 {
@apply text-4xl lg:text-6xl font-normal;
color: #ffffff;
font-family: "Inter", sans-serif !important;
}
h2 {
@apply text-3xl lg:text-4xl my-4 font-normal leading-none;
color: #ffffff;
font-family: "Inter", sans-serif !important;
}
h2 strong {
@@ -276,7 +287,6 @@ background-color:#5596f5 !important;
}
h3 {
@apply text-2xl lg:text-3xl my-4 font-extralight;
color: #ffffff;
font-family: "Inter", sans-serif !important;
}
h3 strong {
@@ -290,7 +300,6 @@ background-color:#5596f5 !important;
h5 {
@apply text-lg my-1 tracking-normal font-medium;
font-family: "Inter", sans-serif !important;
color: #fff !important
}
h6 {
@apply text-md not-italic font-normal my-1;
@@ -298,7 +307,6 @@ background-color:#5596f5 !important;
}
p {
@apply text-lg;
color: #3d3d3d;
font-family: "Inter", sans-serif !important;
}
blockquote {
@@ -492,7 +500,6 @@ header {
.banner h2,
.header h1 {
margin: auto;
color: #fff;
position: relative;
transition: 0.3s;
z-index: 1;
@@ -500,7 +507,6 @@ header {
}
.header h1 {
color: #000;
transition: none;
}

26
static/js/custom.js
View File

@@ -191,3 +191,29 @@ function formatStatsData(stats) {
readingTime();
getStats();
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/header.html" %}
<body class="bg-dark-gradient">
<body class="">
<!-- Google Tag Manager (noscript) -->
<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>
</li>
</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>
</div>
</div>

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

@@ -1,7 +1,7 @@
<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-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">
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>
@@ -10,33 +10,33 @@
<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">
<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">
<dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-white">
<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">
1. HOST A NODE
</dt>
<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>
</dd>
</div>
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
<dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-white">
<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">
2. OFFER CAPACITY
</dt>
<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>
</dd>
</div>
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
<dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-white">
<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">
3. EARN REWARDS
</dt>
<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 class="mt-6">
@@ -54,6 +54,11 @@
</section>
<style>
.double_bg {
background-color: rgb(100 100 100 / 0.2);
}
/* Fade-in animation for the grid items */
.fade-in-box {
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-2xl lg:max-w-none">
<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>
<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 text-gray-200 fade-in">Version 3.15 is live on Mainnet.</p>
<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 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">Version 3.15 is live on Mainnet.</p>
</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">
<!-- 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">
<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>
<dd id="ssd" class="order-first text-3xl font-semibold tracking-tight text-white"></dd>
<dt class="text-sm/6 font-light">SSD CAPACITY</dt>
<dd id="ssd" class="order-first text-3xl font-semibold tracking-tight"></dd>
</div>
</div>
<!-- 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">
<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>
<dd id="cores" class="order-first text-3xl font-semibold tracking-tight text-white"></dd>
<dt class="text-sm/6 font-light">CORES</dt>
<dd id="cores" class="order-first text-3xl font-semibold tracking-tight"></dd>
</div>
</div>
<!-- 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">
<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>
<dd id="nodes" class="order-first text-3xl font-semibold tracking-tight text-white"></dd>
<dt class="text-sm/6 font-light">NODES</dt>
<dd id="nodes" class="order-first text-3xl font-semibold tracking-tight"></dd>
</div>
</div>
<!-- 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">
<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>
<dd id="countries" class="order-first text-3xl font-semibold tracking-tight text-white"></dd>
<dt class="text-sm/6 font-light">COUNTRIES</dt>
<dd id="countries" class="order-first text-3xl font-semibold tracking-tight"></dd>
</div>
</div>
</dl>
</div>
<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 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>
@@ -73,6 +73,9 @@
opacity: 1;
}
}
.double_bg {
background-color: rgb(100 100 100 / 0.2);}
/* Apply the fade-in animation to elements with the 'fade-in' class */
.fade-in {

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

@@ -1,15 +1,15 @@
<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-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-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>
<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 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 fade-in">That's <span class="font-semibold">ThreeFold's</span></p>
<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>
<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="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="/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 hover:text-green ">Read TF Docs<span aria-hidden="true">→</span></a>
</div>
</div>
</div>