ourworld_web/www_aibox
23
0
Fork 0
Code Pull Requests Activity

Initial commit

Browse Source
This commit is contained in:
ourworld_web
2025-02-12 06:59:33 +00:00
commit 648680d0ae
406 changed files with 15597 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
templates/partials/action/action.html Normal file
View File

@@ -0,0 +1,90 @@
<div class="relative isolate overflow-hidden bg-transparent text-white pt-12 pb-24">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="relative grid lg:grid-cols-12 lg:gap-8">
<!-- Left Content -->
<div class="lg:col-span-7">
<div class="mx-auto max-w-2xl lg:mx-0">
<h1 class="fade-in text-balance text-4xl font-normal tracking-tight text-white lg:text-5xl">When 3 Becomes 4</h1>
<p class="fade-in mt-6 text-lg lg:text-xl font-light text-white">
The internet is a trillion-dollar industry, and we believe it should be built and owned by everyone—an internet created by all, for all. <br><br>
Web4 represents the natural evolution of the internet, enabling humans and machines to collaborate in creating a new form of intelligence that respects both the planet and the people.<br><br>
For over a decade, ThreeFold has been dedicated to realizing this vision. Now is time for our next chapter.</span>
</p>
</div>
</div>
<!-- Right Blockquote -->
<div class="lg:col-span-5">
<figure class=" mt-6 pl-8">
<blockquote class=" text-2xl text-white fade-in font-semibold ">
<p class="lg:text-2xl text-xl leading-normal text-white font-semibold">We believe actions are more important than words. <br><br>
This page is in black & white, to let YOU be the <span style="color: red;">color</span> of the future of the internet.
</p>
</blockquote>
<br>
<a href="/signup" target="_blank" class="mt-4 border border-white px-6 py-2 fade-in lg:text-2xl text-xl rounded-2xl tracking-normal font-medium text-white hover:text-gray-400 blinking-effect"><span aria-hidden="true">→ </span>Take the Next Step</a>
</figure>
</div>
</div>
</div>
</div>
<style>
/* Apply the blinking animation to the link */
.blinking-effect {
animation: blink 2s infinite; /* Adjust the speed here (1.5s for slow blinking) */
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0.4;
}
100% {
opacity: 1;
}
}
blockquote {
border-left-width: 2px;
padding-left: 1rem;
}
.blockquote::before {
content: open-quote;
font-size: 4rem;
position: absolute;
top: -1rem;
left: -1rem;
color: #ffffff;
}
.inline-flex {
display: flex;
align-items: center;
}
.items-center {
justify-content: center;
}
.gap-2 {
gap: 0.5rem; /* Adjust the gap size as needed */
}
</style>

57
templates/partials/action/announcements.html Normal file
View File

@@ -0,0 +1,57 @@
<div class="bg-transparent fade-in pb-24 flex items-center justify-center">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:max-w-7xl items-center text-center">
<p class="fade-in mx-auto text-pretty lg:text-2xl leading-tight text-xl font-normal text-gray-200">Announcements</p>
<p class="fade-in mx-auto text-pretty lg:text-5xl leading-tight text-4xl font-normal text-white">Coming Soon on 12.12.24</p>
<p class="max-w-4xl mt-4 fade-in mx-auto text-pretty lg:text-xl mb-12 leading-tight text-lg font-light text-gray-200"></p>
</div>
<div class="-mx-6 grid grid-cols-2 gap-2 overflow-hidden sm:mx-0 sm:rounded-2xl md:grid-cols-2">
<div class="grid-item bg-white/5 p-2 lg:p-12">
<h2 class="text-white lg:text-3xl text-xl text-center font-semibold">A Roadmap to <br>Web4</h2>
</div>
<div class="grid-item bg-white/5 p-2 lg:p-12">
<h2 class="text-white lg:text-3xl text-xl text-center font-semibold">Web4 <br>Phone</h2>
</div>
<div class="grid-item bg-white/5 p-2 lg:p-12">
<h2 class="text-white lg:text-3xl text-xl text-center font-semibold">Web4 <br>Router</h2>
</div>
<div class="grid-item bg-white/5 p-2 lg:p-12">
<h2 class="text-white lg:text-3xl text-xl text-center font-semibold">Web4 <br>Node</h2>
</div>
</div>
</div>
</div>
</div>
<script>
// JavaScript to control the blinking effect
const items = document.querySelectorAll('.grid-item');
let currentIndex = 0;
function blinkItem() {
// Remove the 'blink' class from all items
items.forEach(item => item.classList.remove('blink'));
// Add the 'blink' class to the current item
items[currentIndex].classList.add('blink');
// Move to the next item in a clockwise manner
currentIndex = (currentIndex + 1) % items.length;
}
// Start the blinking effect
setInterval(blinkItem, 1000); // Change every second
</script>
<style>
/* CSS for the blinking effect */
.blink {
animation: blink-animation 1s infinite;
}
@keyframes blink-animation {
0%, 100% { background-color: rgba(255, 255, 255, 0.1); }
50% { background-color: rgba(255, 255, 255, 0.5); }
}
</style>

8
templates/partials/action/banner.html Normal file
View File

@@ -0,0 +1,8 @@
<div class="h-screen flex flex-col justify-center items-center">
<div class="">
<img
class="mx-auto"
src="/images/mycel2.gif"
alt="TF">
</div>
</div>

53
templates/partials/action/cta.html Normal file
View File

@@ -0,0 +1,53 @@
<div class="bg-transparent">
<div class="mx-auto rounded-2xl bg-white/5 max-w-7xl px-6 py-12 lg:flex lg:items-center lg:justify-between lg:px-20">
<h2 class="lg:text-balance leading-tight lg:text-left lg:items-start items-center text-center font-normal tracking-tight text-white lg:text-5xl text-3xl fade-in">
Stay tuned for 12.12.24<br/>
</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="https://t.me/threefoldnews" target="_blank" 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">
Telegram
</a>
<a href="javascript:;" onclick="ml_account('webforms', '3562741', 'n7q9l7', 'show')" class="fade-in rounded-2xl bg-black px-4 py-2.5 text-sm 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 focus-visible:outline-offset-2 mb-4 lg:mb-0">
Newsletter
</a>
</div>
</div>
</div>
<style>
.bg-black {
background-color: #000;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fade-in {
animation: fadeIn 4s ease-in-out forwards;
}
h2 {
animation-delay: 0.5s;
}
p {
animation-delay: 1s;
}
.blockquote::before {
content: open-quote;
font-size: 4rem;
position: absolute;
top: -1rem;
left: -1rem;
color: #ffffff;
}
</style>

83
templates/partials/action/hero.html Normal file
View File

@@ -0,0 +1,83 @@
<div class="flex bg-transparent">
<div class="max-w-2xl p-8 mx-auto text-center">
<p class="mx-auto mt-6 max-w-2xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in fade-in-delay">
We believe actions are more important than words. <br>
This page is in black & white,
to let YOU be the color of the future of the internet.
</p>
<h2 class="mt-12 text-balance font-normal tracking-tight text-white lg:text-4xl text-3xl fade-in fade-in-delay">
Web4
</h2>
<p class="mx-auto mt-12 max-w-2xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in fade-in-delay">
Web4 opens the door for Machines & Humans to create together
a new form of Intelligence with respect for the Planet & People.
</p>
<h2 class="mt-12 text-balance font-normal tracking-tight text-white lg:text-4xl text-3xl fade-in fade-in-delay">
Augmented Collective Intelligence
</h2>
<p class="mx-auto mt-12 max-w-2xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in fade-in-delay">
ThreeFold has been working on Web4 for more than 10 years,
ready to go public <span class="font-semibold">12.12.2024</span>
</p>
<h2 class="mt-12 text-balance font-normal tracking-tight text-white lg:text-4xl text-3xl fade-in fade-in-delay">
An Internet created by Everyone for Everyone
</h2>
<p class="mx-auto mt-12 max-w-2xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in fade-in-delay">
The Internet is a Trillion USD business.
We want to make sure this Internet is built and owned by all of us.
</p>
<p class="mx-auto mt-12 max-w-2xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in fade-in-delay">
Register for our online launch event 12-12-2024.
</p>
<h2 class="mt-12 text-balance font-semibold tracking-tight text-white lg:text-4xl text-3xl fade-in fade-in-delay">
When 3 Becomes 4
</h2>
<div class="mt-12 flex items-center justify-center gap-x-6">
<a href="" class="fade-in fade-in-delay rounded-2xl bg-white px-8 py-2.5 text-base 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">
12.12.24
</a>
</div>
</div>
</div>
<style>
/* Fade-in animation */
.fade-in {
opacity: 0;
animation: fadeIn 1s ease-out forwards;
}
/* Fade-in keyframe */
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
<script>
// JavaScript to add 'visible' class after loading
window.addEventListener('DOMContentLoaded', () => {
const fadeInElements = document.querySelectorAll('.fade-in');
fadeInElements.forEach((element, index) => {
// Adding a delay for each fade-in effect (increasing delay with index)
setTimeout(() => {
element.classList.add('visible');
}, index * 1000); // 1000ms delay between each element
});
});
</script>

40
templates/partials/action/tools.html Normal file
View File

@@ -0,0 +1,40 @@
<div class="bg-transparent py-24 sm:py-32">
<div class="mx-auto max-w-7xl grid grid-cols-1 gap-x-16 gap-y-16 sm:gap-y-20 lg:grid-cols-2 lg:items-start px-6">
<div class="mx-auto w-full max-w-3xl lg:mx-0">
<h2 class="fade-in text-balance lg:text-5xl text-4xl leading-tight font-normal tracking-tight text-white">Unlock the Web4 Revolution with ThreeFold</h2>
<p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">From secure phones and AI-driven virtual assistants to encrypted routers and decentralized nodes, explore a suite of innovative Web4 products designed to redefine connectivity, empower autonomy, and simplify daily life with cutting-edge technology.</p>
<div class="mt-8 flex gap-x-6">
</div>
</div>
<div class="mx-auto grid w-full max-w-xl grid-cols-2 gap-2 items-center gap-y-12 sm:gap-y-14 lg:mx-0 lg:max-w-none lg:pl-8">
<div class="grid-item bg-white/5 p-2 lg:p-12">
<div class="p-10">
<p class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">Web4 Phone</p>
<p class="mt-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">The world’s first truly decentralized smartphone on a mission to define Web4 mobile connectivity.</p>
<a href="#" class="mt-6 text-sm/6 font-semibold text-white">Learn more <span aria-hidden="true">→</span></a>
</div>
</div>
<div class="grid-item bg-white/5 p-2 lg:p-12">
<div class="p-10">
<p class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">Web4 Router</p>
<p class="mt-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">Be your own Internet and unlock the full potential of Web4 from the convenience of your home.</p>
<a href="#" class="mt-6 text-sm/6 font-semibold text-white">Learn more <span aria-hidden="true">→</span></a>
</div>
</div>
<div class="grid-item bg-white/5 p-2 lg:p-12 lg:pt-4">
<div class="p-10">
<p class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">Web4 Nodes</p>
<p class="mt-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">Power the Internet by hosting your own Web4 Node—contributing to a secure, scalable, and autonomous Web4 ecosystem.</p>
<a href="#" class="mt-6 text-sm/6 font-semibold text-white">Learn more <span aria-hidden="true">→</span></a>
</div>
</div>
<div class="grid-item bg-white/5 p-2 lg:p-12 lg:pt-4">
<div class="p-10">
<p class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">TF Genie</p>
<p class="mt-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">Your AI-powered Web4 assistant, designed to enhance productivity and simplify daily tasks with seamless integration.</p>
<a href="#" class="mt-6 text-sm/6 font-semibold text-white">Learn more <span aria-hidden="true">→</span></a>
</div>
</div>
</div>
</div>
</div>

109
templates/partials/action/video.html Normal file
View File

@@ -0,0 +1,109 @@
<div class="flex bg-transparent pt-16 pb-10 justify-center relative isolate overflow-hidden">
<div class="max-w-7xl mx-auto text-center px-4 sm:px-6 lg:px-8">
<!-- Main Heading -->
<h2 class="fade-in text-pretty text-3xl sm:text-4xl lg:text-6xl leading-tight font-normal tracking-tight text-white">
Join the Web4 Revolution
</h2>
<!-- Subtext -->
<p class="mx-auto mt-6 max-w-xl text-pretty text-xl lg:text-2xl font-light text-gray-200 fade-in fade-in-delay">
Join us on our journey. Watch the video below and scroll down to learn how you can participate.
</p>
<br>
<!-- Embed YouTube Video -->
<div class="mt-8 flex justify-center">
<div class="responsive-iframe">
<iframe src="https://www.youtube.com/embed/64mbEewI0Ag?si=I0m_ShxlTUk3mok-" title="YouTube video player"
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
</iframe>
</div>
</div>
<!-- Call to Action Button -->
<div class="mt-12 fade-in flex items-center justify-center gap-x-4">
<a href="/signup" target="_blank"
class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm sm:text-base 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 blinking-effect">
Take the Next Step
</a>
</div>
</div>
</div>
<style>
/* Fade-in animation */
.fade-in {
opacity: 0;
animation: fadeIn 1s ease-out forwards;
}
/* Fade-in keyframe */
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* Responsive iframe for YouTube video */
.responsive-iframe {
position: relative;
width: 100%;
max-width: 800px; /* Max width for large screens */
padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
height: 0;
overflow: hidden;
}
.responsive-iframe iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Ensure content aligns properly */
.flex.justify-center {
display: flex;
justify-content: center;
}
/* Responsive text and spacing */
.text-pretty {
word-wrap: break-word;
}
@media (max-width: 640px) {
.text-pretty {
padding: 0 1rem;
}
}
/* Style for the button */
.blinking-effect {
animation: blink 1.5s step-start infinite;
}
@keyframes blink {
50% {
opacity: 0.5;
}
}
</style>
<script>
// JavaScript to add 'visible' class after loading
window.addEventListener('DOMContentLoaded', () => {
const fadeInElements = document.querySelectorAll('.fade-in');
fadeInElements.forEach((element, index) => {
// Adding a delay for each fade-in effect (increasing delay with index)
setTimeout(() => {
element.classList.add('visible');
}, index * 1000); // 1000ms delay between each element
});
});
</script>

41
templates/partials/action/web4tools.html Normal file
View File

@@ -0,0 +1,41 @@
<div class="overflow-hidden bg-transparent py-16 lg:py-24">
<div class="relative mx-auto max-w-xl px-6 lg:max-w-7xl lg:px-8">
<div class="mx-auto max-w-2xl px-6 lg:max-w-6xl lg:px-8">
<h2 class="mx-auto fade-in text-left lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-white">Discover ThreeFold's Web4 Products for a Smarter, Secure Future</h2>
<p class="text-left my-6 max-w-5xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">
From secure phones and AI-driven virtual assistants to encrypted routers and decentralized nodes, explore a suite of innovative Web4 products designed to redefine connectivity, empower autonomy, and simplify daily life with cutting-edge technology.</p>
</div>
<div class="relative lg:grid lg:grid-cols-2 lg:items-center lg:gap-8">
<!-- Image on the left and text on the right -->
<div class="fade-in relative -mx-4 mt-10 lg:mt-0" aria-hidden="true">
<img class="fade-in blinking-effect relative mx-auto" width="490" src="/images/web4_tools3.png" alt="">
</div>
<!-- Text on the left -->
<div class="relative p-4"> <!-- Add padding here for all sides -->
<div class="gap-y-4">
<div class="fade-in relative p-6 bg-white/5 rounded-lg"> <!-- Add padding inside this div -->
<dt class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">3Phone</dt>
<dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">Secure smartphones come with built-in decentralized apps and seamlessly integrate with the ThreeFold Grid.</dd>
<a href="https://docs.threefold.io/docs/components/3phone/" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
</div>
<div class="fade-in relative p-6 mt-4 bg-white/5 rounded-lg"> <!-- Add padding inside this div -->
<dt class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">3Bot</dt>
<dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">An AI-powered virtual system administrator helps deploy and manage your digital life.</dd>
<a href="https://docs.threefold.io/docs/components/3bot" target="_blank" class=" text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
</div>
<div class="fade-in relative p-6 mt-4 bg-white/5 rounded-lg"> <!-- Add padding inside this div -->
<dt class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">3Node</dt>
<dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">The backbone of Web4's cloud infrastructure, providing compute and data resources.</dd>
<a href="https://docs.threefold.io/docs/components/3node" target="_blank" class=" text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
</div>
<div class="fade-in relative p-6 mt-4 bg-white/5 rounded-lg"> <!-- Add padding inside this div -->
<dt class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-white">3Router</dt>
<dd class="my-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">Smart routers ensure shortest-path connections between nodes and phones with end-to-end encryption.</dd>
<a href="https://docs.threefold.io/docs/components/3router" target="_blank" class=" text-sm/6 font-semibold text-white hover:text-gray-200">Learn more <span aria-hidden="true">→</span></a>
</div>
</div>
</div>
</div>
</div>
</div>