ourworld_web/www_aibox
21
0
Fork 0
Code Pull Requests Activity

update link name

Browse Source
This commit is contained in:
Ehab Hassan
2025-03-05 23:37:35 +02:00
parent 9b2b39c983
commit a1a8ac8993
11 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
templates/partials/farmer/about1.html Normal file
View File

@@ -0,0 +1,48 @@
<div class="relative isolate overflow-hidden bg-transparent">
<div class="px-6 mt-12 lg:pt-16 pt-12 pb-12 sm:px-6 lg:px-8">
<div class="mx-auto max-w-3xl text-center">
<h2 class="text-balance font-normal tracking-tight text-black lg:text-6xl text-4xl fade-in">Powered by ThreeFold</h2>
<p class="mx-auto mt-12 text-pretty lg:text-xl text-lg font-light text-gray-900 fade-in"><span class="font-semibold">AIBOX</span> is a project by ThreeFold, a team with over 10 years of experience
building decentralized internet infrastructure.
</p>
<p class="mx-auto mt-4 text-pretty lg:text-xl text-lg font-light text-gray-900 fade-in">ThreeFold empowers individuals and organizations to share compute, storage,
and network resources on the ThreeFold Grid—creating a truly decentralized and autonomous internet.
</p>
<p class="mx-auto mt-4 text-pretty lg:text-xl text-lg font-light text-gray-900 fade-in">Today, our <span class="font-semibold">Proof-of-Concept Network</span> is live globally, running on <span class="font-semibold">v3.15.0</span> technology.
</p>
<div class="mt-10 flex items-center gap-x-6 flex-wrap justify-center">
<a href="https://threefold.io/" target="_blank" class="fade-in rounded-2xl bg-black px-4 py-2.5 text-sm lg:text-md font-semibold text-white shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 mb-4 lg:mb-0">
Visit ThreeFold
</a>
<a href="https://dashboard.grid.tf/" target="_blank" class="text-sm/6 font-semibold text-gray-900">Explore Grid Capacity <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>

41
templates/partials/farmer/about2.html Normal file
View File

@@ -0,0 +1,41 @@
<div class="relative isolate overflow-hidden bg-transparent">
<div class="px-6 pt-0 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-black lg:text-5xl text-4xl fade-in">We believe AI Needs to be Decentralized</h2>
<p class="mx-auto mt-12 text-pretty lg:text-xl text-lg font-light text-gray-900 fade-in">We are at the dawn of AI, a transformative force that will redefine how we live, work, and interact with technology. AI presents an incredible opportunity for humanity, however, as AI systems become more powerful, their control sits in the hands of a few corporations, raising serious concerns around privacy, bias, accessibility, and so on.
</p>
<p class="mx-auto mt-4 text-pretty lg:text-xl text-lg font-light text-gray-900 fade-in">Further, centralized cloud providers are bottlenecks, as AI compute demand is outpacing supply and training AI models is too expensive.
</p>
<p class="mx-auto mt-4 text-pretty lg:text-xl text-lg font-light text-gray-900 fade-in">We must not repeat mistakes of the past. Without decentralization, AI will remain controlled by a few corporations—limiting accessibility, innovation, and independence. To ensure AI benefits everyone, we must advocate for decentralized, open-source AI models that are transparent, ethical, and community-driven. And this can only happen on an infrastructure like ThreeFold.
</p>
</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>

60
templates/partials/farmer/cta.html Normal file
View File

@@ -0,0 +1,60 @@
<div class="bg-transparent py-12 lg:pt-24 mb-10 pb-24">
<div class="mx-auto ring-1 shadow-2xl ring-black/5 py-12 rounded-2xl bg-white/5 max-w-7xl px-6 lg:flex lg:items-center lg:justify-between lg:px-20">
<h2 id="blinking4" class="lg:text-balance text-left items-start lg:text-[4rem] text-[2rem] font-normal tracking-tight text-black fade-in">
Own Your AI. <br>Pre-Order<br>Now.
</h2>
<div class="mt-10 flex items-center 0 gap-x-6 lg:mt-0 lg:shrink-0 flex-wrap justify-center lg:justify-start">
<a href="/signup" target="_blank" onclick="window.open(this.href, '_blank'); return false;" class="fade-in rounded-2xl bg-black px-4 py-2.5 text-sm lg:text-md font-semibold text-white shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 mb-4 lg:mb-0">
Pre-order Now
</a>
<a href="https://threefold.info/aibox/docs/" target="_blank" class="text-sm/6 font-semibold text-gray-900">Learn more <span aria-hidden="true">→</span></a>
</div>
</div>
</div>
</div>
<style>
/* Initial state: elements are invisible */
.fade-in {
opacity: 0;
transition: opacity 1s ease-out;
}
/* State when element is in view */
.fade-in.visible {
opacity: 1;
}
</style>
<script>
// Get all the elements that need to be faded in
document.addEventListener('DOMContentLoaded', function() {
const h2 = document.getElementById("blinking4");
setInterval(() => {
h2.style.opacity = (h2.style.opacity == "1") ? "0.3" : "1";
}, 1000); // Blinks every 2 seconds
// Target all elements with the 'fade-in' class
const fadeInElements = document.querySelectorAll('.fade-in');
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// Add 'visible' class to the element when it's in view
entry.target.classList.add('visible');
observer.unobserve(entry.target); // Stop observing after it fades in
}
});
}, {
threshold: 0.1 // Trigger when 10% of the element is in view
});
fadeInElements.forEach(element => {
observer.observe(element);
});
});
</script>

75
templates/partials/farmer/farmers.html Normal file
View File

@@ -0,0 +1,75 @@
<div class="bg-transparent lg:pt-24 pt-12 pb-12">
<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-black capitalize">How it works</h2>
<p class="text-left my-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-800 fade-in">
Regardless of technical expertise, anyone can deploy AIBOX (servers) from their homes or offices, and participate in a decentralized alternative to corporate-owned data centers – while earning rewards for their contributions. We call this process “farming.”
</p>
</div>
<section class="pb-12 lg:pb-24 bg-transparent">
<div class="max-w-6xl mx-4 lg:mx-12 xl:mx-auto">
<div class="mx-auto max-w-2xl 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-gray-50 ring-1 ring-black/5 py-6 shadow-md shadow-black/5">
<dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-black">
1. HOST A NODE
</dt>
<dd class="mt-4 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light text-gray-800 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-gray-50 ring-1 ring-black/5 py-6 shadow-md shadow-black/5">
<dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-black">
2. OFFER CAPACITY
</dt>
<dd class="mt-4 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light text-gray-800 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-gray-50 ring-1 ring-black/5 py-6 shadow-md shadow-black/5">
<dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-black">
3. EARN REWARDS
</dt>
<dd class="mt-4 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light text-gray-800 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">
</p>
</dd>
</div>
</div>
<div class="fade-in-box my-16 mx-auto text-center lg:flex lg:justify-center">
<img class="h-auto object-cover" src="/images/aibox_farming1.png" alt="AIBox Specifications">
</div>
<div class="fade-in-box mt-16 mx-auto text-center lg:flex lg:justify-center">
<img class="h-auto object-cover" src="/images/aibox_farming2.png" alt="AIBox Specifications">
</div>
</div>
</dl>
</div>
</div>
</section>
<style>
/* Fade-in animation for the grid items */
.fade-in-box {
opacity: 0;
animation: fadeIn 0.6s ease-in-out forwards;
margin-top: 2.5rem;
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
</style>

133
templates/partials/farmer/grid_stats.html Normal file
View File

@@ -0,0 +1,133 @@
<div class="bg-transparent relative isolate overflow-hidden">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:max-w-none">
<dl class="items 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-transparent p-3">
<div class="tooltip rounded-[1.5rem] ring-1 bg-gray-50 ring-black/5 py-6 shadow-md shadow-black/5">
<span class="tooltiptext">The total amount of storage (SSD, HDD, & RAM) on the grid.</span>
<dt class="text-sm/6 font-light text-black">SSD CAPACITY</dt>
<dd id="ssd" class="order-first text-3xl font-semibold tracking-tight text-black"></dd>
</div>
</div>
<!-- cores -->
<div class="fade-in flex flex-col bg-transparent p-4">
<div class="tooltip rounded-[1.5rem] ring-1 bg-gray-50 ring-black/5 py-6 shadow-md shadow-black/5">
<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-black">CORES</dt>
<dd id="cores" class="order-first text-3xl font-semibold tracking-tight text-black"></dd>
</div>
</div>
<!-- Nodes -->
<div class="fade-in flex flex-col bg-transparent p-4">
<div class="tooltip rounded-[1.5rem] ring-1 bg-gray-50 ring-black/5 py-6 shadow-md shadow-black/5">
<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-black">NODES</dt>
<dd id="nodes" class="order-first text-3xl font-semibold tracking-tight text-black"></dd>
</div>
</div>
<!-- countries -->
<div class="fade-in flex flex-col bg-transparent p-4">
<div class="tooltip rounded-[1.5rem] ring-1 bg-gray-50 ring-black/5 py-6 shadow-md shadow-black/5">
<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-black">COUNTRIES</dt>
<dd id="countries" class="order-first text-3xl font-semibold tracking-tight text-black"></dd>
</div>
</div>
</dl>
</div>
</div><div class="mt-12 lg:mt-16 flex flex-col lg:flex-row items-center justify-center gap-x-8">
<a href="https://threefold.io"
target="_blank"
class="fade-in rounded-2xl bg-black px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:text-gray-800 hover:bg-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">
Visit ThreeFold</a>
<a href="https://dashboard.grid.tf/#/tf-grid/node-statistics/" target="_blank" class="fade-in text-base font-semibold text-black hover:text-gray-800 lg:mt-0 mt-8">Explore Grid Capacity<span
aria-hidden="true">→</span></a>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
// Initialize the countUp for each of the numbers
new CountUp('ssd', 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 */
}
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
width: 100%;
background-color:white;
}
/* Tooltip text */
.tooltip .tooltiptext {
font-size: 12px;
visibility: hidden;
background-color: rgb(26 26 26 / 90%);
color: #fff;
text-align: center;
padding: 5px 10px;
border-radius: 4px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
bottom: -7px;
top: 0px;
left: 0px;
right: 0px;
/* right: -60px; */
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
@media (max-width: 480px) {
.tooltip .tooltiptext {
position: absolute;
z-index: 1;
bottom: -7px !important;
right: 0px !important;
top: 0px !important;
left: 0px !important;
}
}
</style>

69
templates/partials/farmer/hero_section.html Normal file
View File

@@ -0,0 +1,69 @@
<div class="fade-in lg:h-screen flex justify-center items-center">
<div class="isolate">
<div class="mx-auto text-center max-w-7xl px-6 lg:px-8 py-12">
<!-- Image Section -->
<div class="fade-in-image mx-auto text-center lg:flex lg:justify-center">
<img class="h-auto object-cover rounded-xl" src="/images/aibox_farming.png" alt="AIBox Specifications">
</div>
<div class="mx-auto lg:mx-0 lg:flex-auto">
<!-- Typing Text -->
<h1 id="typing-text2" class="mt-6 fade-in font-normal tracking-tight text-black lg:text-[5rem] text-[2.5rem]">
</h1>
</div>
</div>
</div>
</div>
<!-- Styles -->
<style>
/* Fade-in for Text & Image */
.fade-in-item, .fade-in-image {
opacity: 0;
transform: translateY(10px);
transition: opacity 1s ease-out, transform 1s ease-out;
}
.fade-in-item.show, .fade-in-image.show {
opacity: 1;
transform: translateY(0);
}
</style>
<!-- Script -->
<script>
document.addEventListener("DOMContentLoaded", function () {
/*** Typing Effect ***/
const text = "Own Your AI GPU & Share Capacity";
const textElement = document.getElementById("typing-text2");
let index = 0;
function typeText() {
if (index < text.length) {
textElement.textContent += text.charAt(index);
index++;
setTimeout(typeText, 100);
}
}
/*** Fade-in Items One by One ***/
const items = document.querySelectorAll(".fade-in-item");
const image = document.querySelector(".fade-in-image");
let itemIndex = 0;
function showNextItem() {
if (itemIndex < items.length) {
items[itemIndex].classList.add("show");
itemIndex++;
setTimeout(showNextItem, 300); // Faster fade-in
} else {
image.classList.add("show");
}
}
/*** Initialize Everything ***/
typeText();
setTimeout(showNextItem, 1500); // Delay to ensure text is typed first
});
</script>