ourworld_web/www_aibox
23
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

BIN
static/images/aibox_spec.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 155 KiB

1
templates/index.html
View File

@@ -5,4 +5,5 @@
{% include "partials/hero/aihero3.html" %}
{% include "partials/hero/aihero4.html" %}
{% include "partials/hero/aihero5.html" %}
{% include "partials/hero/aihero6.html" %}
{% endblock content %}

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>

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

@@ -0,0 +1,110 @@
<div class="fade-in">
<div class="relative isolate pt-14">
<div class="mx-auto max-w-7xl px-6 py-24 sm:py-32 lg:flex lg:items-center lg:gap-x-15 lg:px-8 lg:py-40">
<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>
<!-- Specification List -->
<dl class="mt-10 px-10 max-w-xl space-y-6 text-gray-900 lg:max-w-xl">
<div class="relative pl-2"><dt class="fade-in-item font-light text-xl text-black">✓ AMD CPU</dt></div>
<div class="relative pl-2"><dt class="fade-in-item font-light text-xl text-black">✓ 64 GB Memory</dt></div>
<div class="relative pl-2"><dt class="fade-in-item font-light text-xl text-black">✓ 2 x 2 TB SSD</dt></div>
<div class="relative pl-2"><dt class="fade-in-item font-light text-xl text-black">✓ 7800 XTX GPU</dt></div>
<div class="relative pl-2"><dt class="fade-in-item font-light text-xl text-black">✓ Watercooled GPU/CPU</dt></div>
<div class="relative pl-2"><dt class="fade-in-item font-light text-xl text-black">✓ Integrated mini computer with relay and remote control</dt></div>
<div class="relative pl-2"><dt class="fade-in-item font-light text-xl text-black">✓ High Quality motherboard & power supply</dt></div>
</dl>
</div>
<!-- Image Section -->
<div class="fade-in-image mt-16 sm:mt-24 lg:mt-0 lg:flex lg:justify-center lg:w-1/2">
<img class="w-full max-w-lg h-auto object-cover rounded-xl" src="/images/aibox_spec.jpg" alt="Mobile App Screenshot">
</div>
</div>
</div>
</div>
<!-- Styles -->
<style>
/* Fade-in for Text & Image */
.fade-in-item, .fade-in-image {
opacity: 0;
transform: translateY(10px);
transition: opacity 1s ease-out, transform 1s ease-out;
}
.fade-in-item.show, .fade-in-image.show {
opacity: 1;
transform: translateY(0);
}
</style>
<!-- Script -->
<script>
document.addEventListener("DOMContentLoaded", function () {
/*** Typing Effect ***/
const text = "What's Inside AIBox";
const textElement = document.getElementById("typing-text2");
let loopCount = 0;
const maxLoops = 5;
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);
}
}
function loopTyping() {
if (loopCount < maxLoops) {
typeText(0, () => {
deleteText(() => {
loopCount++;
loopTyping();
});
});
} else {
typeText(0, () => {}); // Final typing with no delete
}
}
/*** Fade-in Items One by One ***/
const items = document.querySelectorAll(".fade-in-item");
const image = document.querySelector(".fade-in-image");
let index = 0;
function showNextItem() {
if (index < items.length) {
items[index].classList.add("show");
index++;
setTimeout(showNextItem, 1000);
} else {
setTimeout(() => {
items.forEach(item => item.classList.remove("show"));
index = 0;
setTimeout(showNextItem, 1000);
}, 5000);
}
}
/*** Initialize Everything ***/
loopTyping();
showNextItem();
// Fade-in Image after text animations
setTimeout(() => image.classList.add("show"), 1000);
});
</script>