111 lines
4.4 KiB
HTML
111 lines
4.4 KiB
HTML
<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>
|