ourworld_web/www_aibox
21
0
Fork 0
Code Pull Requests Activity

ok

Browse Source
This commit is contained in:
sasha-astiadi
2025-02-21 00:24:32 +08:00
parent 62aa6cb831
commit 4380207360
4 changed files with 120 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,7 +2,7 @@
<div class="mx-auto max-w-7xl px-6 lg:px-8 pb-10">
<div class="mx-auto max-w-2xl lg:max-w-4xl">
<div class="text-center">
<h2 class="fade-in text-balance font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]">What Can You Do with an <span class="font-medium">AIBox</span></h2>
<h2 id="blinking" class="fade-in text-balance font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]">What Can You Do with an <span class="font-medium">AIBox</span></h2>
</div>
</div>
</div>
@@ -12,7 +12,7 @@
<!-- 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-black 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="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>
@@ -32,7 +32,7 @@
<!-- 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-black 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="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>
@@ -50,7 +50,7 @@
<!-- 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-black 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="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>
@@ -86,6 +86,11 @@
<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.3" : "1";
}, 1000); // Blinks every 2 seconds
// Target all elements with the 'fade-in' class
const fadeInElements = document.querySelectorAll('.fade-in');
@@ -106,8 +111,5 @@
});
});
</script>