ourworld_web/www_aibox
21
0
Fork 0
Code Pull Requests Activity

update home

Browse Source
This commit is contained in:
Ehab Hassan
2025-06-23 12:47:41 +03:00
parent fbd54f5202
commit f91db3b865
14 changed files with 615 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
templates/shortcodes/accordion.html Normal file
View File

@@ -0,0 +1,44 @@
<div class="rounded-lg shadow-lg overflow-hidden my-2 border border-gray-200">
<input type="checkbox" id="{{ id_accordion }}" class="peer hidden">
<label for="{{ id_accordion }}" class="accordion flex items-center justify-between p-4 cursor-pointer transition-colors">
<span class="text-lg font-semibold">{{ question }}</span>
<svg class="w-6 h-6 transition-transform peer-checked:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</label>
<div class="max-h-0 overflow-hidden transition-all duration-300 peer-checked:max-h-screen">
<div class="p-4">
{% if description %}
<p class="semigray font-normal leading-relaxed">{{ description }} </p>
{% endif %}
</div>
</div>
</div>
<style>
body .accordion:hover {
background-color: rgb(240, 240, 240) !important;
}
body.dark-mode .accordion:hover {
background-color: #2e2e2e !important;
}
</style>

71
templates/shortcodes/animated_header.html Normal file
View File

@@ -0,0 +1,71 @@
{% set header = header | default(value="") %}
<div class="max-w-3xl">
<h2 id="typing-text" class="mx-auto fade-in">
</h2>
</div>
<style>
/* Fade-in animation for the grid items */
.fade-in-box {
opacity: 0;
animation: fadeIn 2.2s ease-in-out forwards;
}
/* Fading in each grid item with a slight delay */
.fade-in-box:nth-child(1) { animation-delay: 0s; }
.fade-in-box:nth-child(2) { animation-delay: 0.2s; }
.fade-in-box:nth-child(3) { animation-delay: 0.4s; }
.fade-in-box:nth-child(4) { animation-delay: 0.6s; }
.fade-in-box:nth-child(5) { animation-delay: 0.8s; }
.fade-in-box:nth-child(6) { animation-delay: 1s; }
.fade-in-box:nth-child(7) { animation-delay: 1.2s; }
.fade-in-box:nth-child(8) { animation-delay: 1.4s; }
.fade-in-box:nth-child(9) { animation-delay: 1.6s; }
.fade-in-box:nth-child(10) { animation-delay: 1.8s; }
.fade-in-box:nth-child(11) { animation-delay: 2s; }
.fade-in-box:nth-child(12) { animation-delay: 2.2s; }
@keyframes fadeIn {
to {
opacity: 1;
}
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
const text = "Take Control of Your AI Future";
const textElement = document.getElementById("typing-text");
let loopCount = 0;
const maxLoops = 1;
function typeText(i, callback) {
if (i < text.length) {
textElement.textContent += text.charAt(i);
setTimeout(() => typeText(i + 1), 100);
} else {
setTimeout(callback, 2000);
}
}
function loopTyping() {
if (loopCount < maxLoops) {
typeText(0, () => {
deleteText(() => {
loopCount++;
loopTyping();
});
});
} else {
typeText(0, () => {}); // Final typing with no delete
}
}
loopTyping();
});
</script>

36
templates/shortcodes/cta.html Normal file
View File

@@ -0,0 +1,36 @@
{% set title_1 = title_1 | default(value="") %}
{% set title_2 = title_2 | default(value="") %}
{% set title_3 = title_3 | default(value="") %}
{% set button_text_1 = button_text_1 | default(value="") %}
{% set button_link_1 = button_link_1 | default(value="") %}
{% set button_text_2 = button_text_2 | default(value="") %}
{% set button_link_2 = button_link_2 | default(value="") %}
{% set button_text_3 = button_text_3 | default(value="") %}
{% set button_link_3 = button_link_3 | default(value="") %}
{% set button_text_4 = button_text_4 | default(value="") %}
{% set button_link_4 = button_link_4 | default(value="") %}
<div class="py-12 px-4">
<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 class="max-w-xl leading-tight items-start lg:text-left text-center fade-in">
{{ title_1 }} <br>{{ title_2 }}<br> {{ title_3 }}
</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="{{ button_link_1 }}" 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:text-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 mb-4 lg:mb-0">
{{ button_text_1 }}
</a>
{% if button_link_2 %}
<a href="{{ button_link_2 }}" target="_blank" class="blinking-effect 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 mb-4 lg:mb-0">
{{ button_text_2 }}
</a>
{% endif %}
<a href="{{ button_link_3 }}" target="_blank" class="text-sm/6 font-semibold text-gray-900">
{{ button_text_3 }} <span aria-hidden="true">→</span>
</a>
{% if button_link_4 %}
<a href="{{ button_link_4 }}" class="fade-in text-sm/6 font-semibold text-white">{{ button_text_4 }}<span aria-hidden="true">→</span></a>
{% endif%}
</div>
</div>
</div>

60
templates/shortcodes/farm_steps.html Normal file
View File

@@ -0,0 +1,60 @@
{% set image_src = image_src | default(value="") %}
{% set image_alt = image_alt | default(value="") %}
{% set title = title | default(value="") %}
{% set subtitle = subtitle | default(value="") %}
{% set description = description | default(value="") %}
{% set button_text_1 = button_text_1 | default(value="") %}
{% set button_link_1 = button_link_1 | default(value="") %}
{% set button_text_2 = button_text_2 | default(value="") %}
{% set button_link_2 = button_link_2 | default(value="") %}
<div class="fade-in-box flex flex-col p-8 rounded-2xl my-4 bg-gray-50">
<img class="fade-in relative mb-4" width="20%" src="{{ image_src }}" alt="{{ image_alt }}">
<dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold">
{{ title }}
</dt>
<dt class="text-lg font-normal">{{ subtitle }}<dt>
<dd class="mt-4 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light text-gray-800 text-base">{{ description }}</p>
<div class="flex mt-6 justify-center fade-in">
{% if button_link_1 %}
<a href="{{ button_link_1 }}" class="mr-2 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" target="_blank">{{ button_text_1 }}</a>
{% endif %}
{% if button_link_1 %}
<a href="{{ button_link_2 }}" 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" target="_blank">{{ button_text_2 }}</a>
{% endif %}
</div>
</dd>
</div>
<style>
/* Fade-in animation for the grid items */
.fade-in-box {
opacity: 0;
animation: fadeIn 0.6s ease-in-out forwards;
}
/* Fading in each grid item with a slight delay */
.fade-in-box:nth-child(1) { animation-delay: 0s; }
.fade-in-box:nth-child(2) { animation-delay: 0.2s; }
.fade-in-box:nth-child(3) { animation-delay: 0.4s; }
.fade-in-box:nth-child(4) { animation-delay: 0.6s; }
.fade-in-box:nth-child(5) { animation-delay: 0.8s; }
.fade-in-box:nth-child(6) { animation-delay: 1s; }
.fade-in-box:nth-child(7) { animation-delay: 1.2s; }
.fade-in-box:nth-child(8) { animation-delay: 1.4s; }
.fade-in-box:nth-child(9) { animation-delay: 1.6s; }
.fade-in-box:nth-child(10) { animation-delay: 1.8s; }
.fade-in-box:nth-child(11) { animation-delay: 2s; }
.fade-in-box:nth-child(12) { animation-delay: 2.2s; }
@keyframes fadeIn {
to {
opacity: 1;
}
}
</style>

84
templates/shortcodes/hero_animation.html Normal file
View File

@@ -0,0 +1,84 @@
{% set title = title | default(value="") %}
{% set title_part_1 = title_part_1 | default(value="") %}
{% set title_part_2 = title_part_2 | default(value="") %}
{% set title_part_3 = title_part_3 | default(value="") %}
{% set title_part_4 = title_part_4 | default(value="") %}
{% set title_part_5 = title_part_5 | default(value="") %}
{% set image_src = image_src | default(value="") %}
{% set image_alt = image_alt | default(value="") %}
{% set button_text = button_text | default(value="") %}
{% set button_link = button_link | default(value="") %}
<div class="fade-in relative isolate overflow-hidden py-12 lg:py-24 lg:h-screen">
<div class="mx-auto max-w-7xl lg:col-span-2 px-4 lg:flex lg:gap-x-2 lg:px-8">
<div class="mx-auto max-w-2xl shrink-0 lg:mx-0 lg:pt-8">
<h1 class="mt-10 font-medium tracking-tight text-pretty text-black leading-tight lg:text-[7.37rem] text-[3.5rem]">
{{ title }}
<span id="slides" class="slides"></span>
</h1>
<div id="learn-more" class="lg:mt-10 mt-4 flex items-center gap-x-6">
<a href="{{ button_link }}" target="_blank" class="text-xl font-semibold text-black hover:text-gray-500">
{{ button_text }} <span aria-hidden="true">→</span>
</a>
</div>
</div>
<div class="mx-auto flex max-w-5xl lg:mt-12 mt-0 lg:mr-0 lg:ml-5 lg:max-w-none lg:flex-none">
<div class="max-w-3xl flex-none lg:max-w-5xl">
<img src="{{ image_src }}" alt="{{ image_alt }}" width="2432" height="1442" class="lg:w-[66rem] w-[25rem]">
</div>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
const phrases = [
"{{ title_part_1 }}",
"{{ title_part_2 }}",
"{{ title_part_3 }}",
"{{ title_part_4 }}",
"{{ title_part_5 }}" // Final phrase
];
let index = 0;
const slideElement = document.getElementById("slides");
const learnMoreElement = document.getElementById("learn-more");
function typeText(text, i, callback) {
if (i < text.length) {
slideElement.textContent += text.charAt(i);
setTimeout(() => typeText(text, i + 1, callback), 100);
} else {
setTimeout(callback, 500);
}
}
function deleteText(callback) {
let text = slideElement.textContent;
if (text.length > 0) {
slideElement.textContent = text.substring(0, text.length - 1);
setTimeout(() => deleteText(callback), 50);
} else {
setTimeout(callback, 500);
}
}
function cyclePhrases() {
if (index < phrases.length - 1) {
typeText(phrases[index], 0, () => {
deleteText(() => {
index++;
cyclePhrases();
});
});
} else {
typeText(phrases[index], 0, () => {
learnMoreElement.classList.remove("hidden"); // Show "Learn more"
});
}
}
cyclePhrases(); // Start the loop
});
</script>

30
templates/shortcodes/left_header.html Normal file
View File

@@ -0,0 +1,30 @@
{% set title = title | default(value="MYCELIUM") %}
{% set subtitle = subtitle | default(value="") %}
{% set subtitle_2 = subtitle_2 | default(value="") %}
{% set description = description | default(value="") %}
{% set description2 = description2 | default(value="") %}
{% set description3 = description3 | default(value="") %}
{% set button_text = button_text | default(value="") %}
{% set button_link = button_link | default(value="") %}
<div class="lg:pt-24 pt-12 lg:max-w-7xl container mx-auto px-4 lg:px-0">
<div class="mx-auto">
<div class="mx-auto">
{% if subtitle %}
<p class="text-base font-light tracking-wide">{{ subtitle }}</p>
{% endif %}
<h2 class="fade-in my-4">{{ title }}</h2>
<h3 class="mx-auto fade-in">{{ subtitle_2 }}</h2>
<p class="mt-6 max-w-3xl text-lg font-light">{{ description }}</p>
{% if description2 %}
<p class="mt-6 text-lg font-light">{{ description2 }}</p>
{% endif %}
{% if description3 %}
<p class="text-left mt-4 max-w-3xl text-pretty lg:text-lg text-md font-light fade-in">
{{ description3 }} <a href="{{ button_link }}" class="font-semibold" target="_blanks"><u>{{ button_text }}</u></a>
</p>
{% endif %}
</div>
</div>
</div>

112
templates/shortcodes/timeline.html Normal file
View File

@@ -0,0 +1,112 @@
<div class="space-y-8 lg:py-12 py-6 mx-auto max-w-7xl relative before:absolute before:inset-0 before:ml-5 before:-translate-x-px md:before:mx-auto md:before:translate-x-0 before:h-full before:w-0.5 before:bg-gradient-to-b before:from-transparent before:via-slate-300 before:to-transparent">
<!-- Item #1 -->
<div class="fade-in relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active py-4">
<div class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-gray-600 text-white group-[.is-active]:bg-emerald-500 group-[.is-active]:text-emerald-50 shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2">
<svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="10">
<path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
</svg>
</div>
<div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white/5 p-4 rounded-2xl shadow">
<div class="font-semibold text-lg text-black mb-2">Run AI Models with Full Control </div>
<div class="text-gray-900 font-light">
<br>Execute AI models directly on your dedicated GPU
<br>Decide which models are allowed to run on your AI BOX
<br>Reserve 100% of your GPU resources anytime for your own experimentation
</div>
</div>
</div>
<!-- Item #2 -->
<div class="fade-in relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active py-4">
<div class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-gray-600 group-[.is-active]:bg-emerald-500 text-white group-[.is-active]:text-emerald-50 shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2">
<svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="10">
<path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
</svg>
</div>
<div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white/5 p-4 rounded-2xl shadow">
<div class="font-semibold text-lg text-black mb-2">Rent Out Virtual Machines (CloudSlices)
</div>
<div class="text-gray-900 font-light">
Slice your hardware into a maximum of 8 Virtual Machines
<br>Control GPU allocation: 0, 1, or 2 GPUs per VM (no oversubscription)
<br>Users can connect or disconnect GPUs as needed, with owner permissions
<br>Each VM is securely connected to Mycelium (P2P overlay network), ensuring efficient communication
<br>Pre-built container images available for quick setup and deployment
<br>Web gateways allow external connections to VM containers
<br>
<br>Planned Q2 2025.
</div>
</div>
</div>
<!-- Item #3 -->
<div class="fade-in relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active py-4">
<div class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-gray-600 group-[.is-active]:bg-emerald-500 text-white group-[.is-active]:text-emerald-50 shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2">
<svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="10">
<path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
</svg>
</div>
<div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white/5 p-4 rounded-2xl shadow">
<div class="font-semibold text-lg text-black mb-2">Mycelium Actors</div>
<div class="text-gray-900 font-light">
Become a host for Mycelium Actors and contribute to the Mycelium network.
<br>Mycelium Actors process jobs and generate rewards for their hosts.
<br>These jobs can range from AI requests (such as LLM processing) to higher-level functions like text-to-speech, website building, transcribing youtube video's, training a large language model, communicate ...
<br>
<br>By leveraging Mycelium Actors, we pave the way for Augmented Collective Intelligence.
<br>
<br>Planned for Q2 2025.
</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("blinking");
setInterval(() => {
h2.style.opacity = (h2.style.opacity == "1") ? "0.5" : "1";
}, 1500); // 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>