ourworld_web/www_aibox
23
0
Fork 0
Code Pull Requests Activity

edit fx

Browse Source
This commit is contained in:
sasha-astiadi
2025-02-25 20:59:11 +08:00
parent 46d9f195b1
commit 0263d8a436
8 changed files with 99 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
templates/partials/hero/aihero1.html
View File

@@ -5,7 +5,7 @@
Your
<span id="slides" class="slides"></span>
</h1>
<div id="learn-more" class="lg:mt-10 mt-4 flex items-center gap-x-6 hidden">
<div id="learn-more" class="lg:mt-10 mt-4 flex items-center gap-x-6">
<a href="#" class="text-xl font-semibold text-black hover:text-gray-200">
Learn more <span aria-hidden="true">→</span>
</a>

17
templates/partials/hero/aihero2.html
View File

@@ -85,26 +85,19 @@
const text = "Take Control of Your AI Future";
const textElement = document.getElementById("typing-text");
let loopCount = 0;
const maxLoops = 5;
const maxLoops = 1;
function typeText(i, callback) {
if (i < text.length) {
textElement.textContent += text.charAt(i);
setTimeout(() => typeText(i + 1, callback), 100);
setTimeout(() => typeText(i + 1), 100);
} else {
setTimeout(callback, 1000);
setTimeout(callback, 2000);
}
}
function deleteText(callback) {
let currentText = textElement.textContent;
if (currentText.length > 0) {
textElement.textContent = currentText.substring(0, currentText.length - 1);
setTimeout(() => deleteText(callback), 50);
} else {
setTimeout(callback, 100);
}
}
function loopTyping() {
if (loopCount < maxLoops) {

4
templates/partials/hero/aihero3.html
View File

@@ -96,8 +96,8 @@
const h2 = document.getElementById("blinking");
setInterval(() => {
h2.style.opacity = (h2.style.opacity == "1") ? "0.3" : "1";
}, 1000); // Blinks every 2 seconds
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');

2
templates/partials/hero/aihero5.html
View File

@@ -45,7 +45,7 @@
paragraphs[index].classList.add("show");
index = (index + 1) % paragraphs.length; // Loop back to the first paragraph
setTimeout(showNextParagraph, 3500); // Change paragraph every 3 seconds
setTimeout(showNextParagraph, 4000); // Change paragraph every 4 seconds
}
showNextParagraph();

26
templates/partials/hero/aihero6.html
View File

@@ -3,7 +3,7 @@
<div class="mx-auto max-w-7xl px-6 lg:flex lg:items-center lg:gap-x-15 lg:px-8 py-12">
<div class="mx-auto max-w-2xl lg:mx-0 lg:flex-auto">
<!-- Typing Text -->
<h1 id="typing-text2" class="mt-10 font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]"></h1>
<h1 class="fade-in mt-10 font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]">What's Inside AIBox</h1>
<!-- Specification List -->
<dl class="mt-10 px-10 max-w-xl lg:space-y-6 space-y-3 text-gray-900 lg:max-w-xl">
@@ -38,6 +38,8 @@
opacity: 1;
transform: translateY(0);
}
</style>
<!-- Script -->
@@ -47,24 +49,12 @@
const text = "What's Inside AIBox";
const textElement = document.getElementById("typing-text2");
let loopCount = 0;
const maxLoops = 5;
const maxLoops = 1;
function typeText(i, callback) {
if (i < text.length) {
textElement.textContent += text.charAt(i);
setTimeout(() => typeText(i + 1, callback), 100);
} else {
setTimeout(callback, 1000);
}
}
function deleteText(callback) {
let currentText = textElement.textContent;
if (currentText.length > 0) {
textElement.textContent = currentText.substring(0, currentText.length - 1);
setTimeout(() => deleteText(callback), 50);
} else {
setTimeout(callback, 100);
setTimeout(() => typeText(i + 1), 100);
}
}
@@ -92,11 +82,7 @@
index++;
setTimeout(showNextItem, 1000);
} else {
setTimeout(() => {
items.forEach(item => item.classList.remove("show"));
index = 0;
setTimeout(showNextItem, 1000);
}, 5000);
image.classList.add("show");
}
}

83
templates/partials/hero/aihero7.html
View File

@@ -1 +1,82 @@
{% include "partials/hero/pricing-hero.html" %}
<div class="bg-white py-12 fade-in-box">
<div class="mx-auto max-w-4xl px-6 max-lg:text-center lg:max-w-7xl lg:px-8 fade-in-box">
<h2 class="fade-in text-balance font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]">Pre-order Your AIBox</h2>
<p class="mt-6 max-w-2xl text-lg font-light text-pretty text-black max-lg:mx-auto sm:text-xl/8">{{ section.extra.subtitle | default(value="Choose the box that's packed with the best features for your computing needs.") }}</p>
<p class="mt-6 max-w-2xl text-lg font-light text-pretty text-black max-lg:mx-auto sm:text-xl/10">{{ section.extra.subtitle2}}</p>
</div>
<div class="relative pt-16 sm:pt-24">
<div class="absolute inset-x-0 top-48 bottom-0"></div>
<div class="relative mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
<div class="grid grid-cols-1 gap-10 lg:grid-cols-3">
{% for plan in section.extra.plans %}
<div class="-m-2 grid grid-cols-1 rounded-[2rem] ring-1 shadow-[inset_0_0_2px_1px_#ffffff4d] ring-black/5 max-lg:mx-auto max-lg:w-full max-lg:max-w-md">
<div class="grid grid-cols-1 rounded-[2rem] p-2 shadow-md shadow-black/5">
<div class="rounded-3xl bg-white p-10 pb-9 ring-1 shadow-2xl ring-black/5">
<h2 class="lg:text-4xl text-3xl font-semibold text-black">{{ plan.name }} <span class="sr-only">plan</span></h2>
<p class="mt-2 text-sm/6 text-pretty text-black font-light">{{ plan.description }}</p>
<div class="mt-4 flex items-center gap-4">
<div class="lg:text-5xl text-3xl font-semibold text-gray-950">${{ plan.price }}</div>
<div class="text-sm text-gray-600">
</div>
</div>
<div class="mt-6">
<h3 class="text-sm/6 font-medium text-gray-950">Includes:</h3>
<ul class="mt-3 space-y-2">
{% for feature in plan.features %}
<li {% if not feature.included %}data-disabled="true"{% endif %} class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
<span class="inline-flex h-6 items-center">
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
</svg>
</span>
{% if not feature.included %}<span class="sr-only">Not included:</span>{% endif %}
{{ feature.name }}
</li>
{% endfor %}
</ul>
</div>
<div class="mt-6">
<h3 class="text-sm/6 font-medium text-gray-950">Rewards:</h3>
<ul class="mt-3 space-y-2">
{% for feature in plan.rewards %}
<li {% if not feature.included %}data-disabled="true"{% endif %} class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
<span class="inline-flex h-6 items-center">
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
</svg>
</span>
{% if not feature.included %}<span class="sr-only">Not included:</span>{% endif %}
{{ feature.name }}
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</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; }
@keyframes fadeIn {
to {
opacity: 1;
}
}
</style>

3
templates/partials/hero/pricing-hero.html
View File

@@ -4,7 +4,7 @@
<p class="mt-6 max-w-2xl text-lg font-light text-pretty text-black max-lg:mx-auto sm:text-xl/8">{{ section.extra.subtitle | default(value="Choose the box that's packed with the best features for your computing needs.") }}</p>
<p class="mt-6 max-w-2xl text-lg font-light text-pretty text-black max-lg:mx-auto sm:text-xl/10">{{ section.extra.subtitle2}}</p>
</div>
<div class="relative pt-16 sm:pt-24 fade-in-box">
<div class="relative pt-16 sm:pt-24">
<div class="absolute inset-x-0 top-48 bottom-0"></div>
<div class="relative mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
<div class="grid grid-cols-1 gap-10 lg:grid-cols-3">
@@ -82,7 +82,6 @@
<script>
document.addEventListener("DOMContentLoaded", function () {
const text = "";
const textElement = document.getElementById("typing-text2");
let loopCount = 0;
const maxLoops = 5;