ourworld_web/www_aibox
23
0
Fork 0
Code Pull Requests Activity

tileline at home

Browse Source
This commit is contained in:
Ehab Hassan
2025-06-23 15:17:11 +03:00
parent f91db3b865
commit db7c7f0bf7
3 changed files with 161 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
templates/shortcodes/timeline.html
View File

@@ -1,71 +1,110 @@
<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">
{% set title_1 = title_1 | default(value="") %}
{% set subtitle_1 = subtitle_1 | default(value="") %}
{% set point_1_1 = point_1_1 | default(value="") %}
{% set point_1_2 = point_1_2 | default(value="") %}
{% set point_1_3 = point_1_3 | default(value="") %}
{% set title_2 = title_2 | default(value="") %}
{% set subtitle_2 = subtitle_2 | default(value="") %}
{% set point_2_1 = point_2_1 | default(value="") %}
{% set point_2_2 = point_2_2 | default(value="") %}
{% set point_2_3 = point_2_3 | default(value="") %}
{% set point_2_4 = point_2_4 | default(value="") %}
{% set point_2_5 = point_2_5 | default(value="") %}
{% set point_2_6 = point_2_6 | default(value="") %}
{% set paragraph_2_1 = paragraph_2_1 | default(value="") %}
{% set title_3 = title_3 | default(value="") %}
{% set subtitle_3 = subtitle_3 | default(value="") %}
{% set point_3_1 = point_3_1 | default(value="") %}
{% set point_3_2 = point_3_2 | default(value="") %}
{% set point_3_3 = point_3_3 | default(value="") %}
{% set paragraph_3_1 = paragraph_3_1 | default(value="") %}
{% set paragraph_3_2 = paragraph_3_2 | default(value="") %}
<div class="space-y-8 pt-12 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">
<div class="fade-in relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active">
<div class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-slate-300 group-[.is-active]:bg-emerald-500 text-slate-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="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white/5 p-4 rounded-2xl shadow visible">
<div class="flex items-center justify-between space-x-2 mb-1">
<div class="font-medium">{{ subtitle_1 }}</div>
</div>
<div class="font-semibold text-lg mb-2">{{ title_1 }}</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
<ul style="list-style: disc;">
<li>{{ point_1_1 }}</li>
<li>{{ point_1_2 }}</li>
<li>{{ point_1_3 }}</li>
</ul>
</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">
<div class="fade-in relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active">
<div class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-slate-300 group-[.is-active]:bg-emerald-500 text-slate-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">Rent Out Virtual Machines (CloudSlices)
<div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white/5 p-4 rounded-2xl shadow visible">
<div class="flex items-center justify-between space-x-2 mb-1">
<div class="font-medium">{{ subtitle_2 }}</div>
</div>
<div class="font-semibold text-lg mb-2">{{ title_2 }}</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.
<ul style="list-style: disc;">
<li>{{ point_2_1 }}</li>
<li>{{ point_2_2 }}</li>
<li>{{ point_2_3 }}</li>
<li>{{ point_2_4 }}</li>
<li>{{ point_2_5 }}</li>
<li>{{ point_2_6 }}</li>
</ul>
<p class="text-base font-semibold mt-4">{{ paragraph_2_1 }}</p>
</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">
<div class="fade-in relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active">
<div class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-slate-300 group-[.is-active]:bg-emerald-500 text-slate-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">Mycelium Actors</div>
<div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white/5 p-4 rounded-2xl shadow visible">
<div class="flex items-center justify-between space-x-2 mb-1">
<div class="font-medium">{{ subtitle_3 }}</div>
</div>
<div class="font-semibold text-lg mb-2">{{ title_3 }}</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.
<ul style="list-style: disc;">
<li>{{ point_3_1 }}</li>
<li>{{ point_3_2 }}</li>
<li>{{ point_3_3 }}</li>
</ul>
<div class="text-base mt-8">
<p class="text-base">{{ paragraph_3_1 }}</p>
<p class="text-base font-semibold mt-4">{{ paragraph_3_2 }}</p>
</div>
</div>
</div>
</div>
</div>
<style>
/* Initial state: elements are invisible */
.fade-in {
@@ -83,11 +122,6 @@
<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');
@@ -107,6 +141,5 @@
observer.observe(element);
});
});
</script>