148 lines
3.9 KiB
JavaScript
148 lines
3.9 KiB
JavaScript
document.addEventListener("DOMContentLoaded", function () {
|
|
const asset = (file) => `${window.assetBaseUrl}images/home/${file}`;
|
|
// Website data configuration
|
|
const websites = [
|
|
{
|
|
image: asset("skl.png"),
|
|
url: "wasdal.jakarta.go.id",
|
|
title: "Sistem Ketaatan Lingkungan",
|
|
},
|
|
{
|
|
image: asset("bps.png"),
|
|
url: "jaklingko.jakarta.go.id",
|
|
title: "Jakarta Lingko",
|
|
},
|
|
{
|
|
image: asset("bps.png"),
|
|
url: "lingkungan.jakarta.go.id",
|
|
title: "Lingkungan Jakarta",
|
|
},
|
|
{
|
|
image: asset("bps.png"),
|
|
url: "lingkungan.jakarta.go.id",
|
|
title: "Lingkungan Jakarta",
|
|
},
|
|
{
|
|
image: asset("bps.png"),
|
|
url: "lingkungan.jakarta.go.id",
|
|
title: "Lingkungan Jakarta",
|
|
},
|
|
{
|
|
image: asset("bps.png"),
|
|
url: "lingkungan.jakarta.go.id",
|
|
title: "Lingkungan Jakarta",
|
|
},
|
|
{
|
|
image: asset("bps.png"),
|
|
url: "lingkungan.jakarta.go.id",
|
|
title: "Lingkungan Jakarta",
|
|
},
|
|
{
|
|
image: asset("bps.png"),
|
|
url: "lingkungan.jakarta.go.id",
|
|
title: "Lingkungan Jakarta",
|
|
},
|
|
];
|
|
|
|
// DOM Elements
|
|
const urlInput = document.getElementById("urlDisplay");
|
|
const websiteCards = document.querySelectorAll(".website-card");
|
|
const indicators = document.querySelectorAll(".indicator");
|
|
|
|
let currentIndex = 1; // Start with middle card active
|
|
let autoRotateInterval;
|
|
|
|
// Update active states
|
|
function updateActiveStates() {
|
|
// Update cards
|
|
websiteCards.forEach((card, index) => {
|
|
if (index === currentIndex) {
|
|
card.classList.add("active");
|
|
} else {
|
|
card.classList.remove("active");
|
|
}
|
|
});
|
|
|
|
// Update indicators
|
|
indicators.forEach((indicator, index) => {
|
|
if (index === currentIndex) {
|
|
indicator.classList.add("active");
|
|
indicator.querySelector("div").classList.remove("bg-white/30");
|
|
indicator.querySelector("div").classList.add("bg-white");
|
|
indicator
|
|
.querySelector("span")
|
|
.classList.remove("opacity-0", "text-white/70");
|
|
indicator.querySelector("span").classList.add("text-white");
|
|
} else {
|
|
indicator.classList.remove("active");
|
|
indicator.querySelector("div").classList.remove("bg-white");
|
|
indicator.querySelector("div").classList.add("bg-white/30");
|
|
indicator
|
|
.querySelector("span")
|
|
.classList.add("opacity-0", "text-white/70");
|
|
indicator.querySelector("span").classList.remove("text-white");
|
|
}
|
|
});
|
|
|
|
// Update URL
|
|
if (websites[currentIndex]) {
|
|
urlInput.value = websites[currentIndex].url;
|
|
}
|
|
}
|
|
|
|
// Navigate to specific slide
|
|
function navigateToSlide(targetIndex) {
|
|
if (targetIndex === currentIndex) return;
|
|
currentIndex = targetIndex;
|
|
updateActiveStates();
|
|
}
|
|
|
|
// Auto-rotate functionality
|
|
function startAutoRotate() {
|
|
autoRotateInterval = setInterval(() => {
|
|
currentIndex = (currentIndex + 1) % websites.length;
|
|
updateActiveStates();
|
|
}, 4000);
|
|
}
|
|
|
|
function stopAutoRotate() {
|
|
if (autoRotateInterval) {
|
|
clearInterval(autoRotateInterval);
|
|
autoRotateInterval = null;
|
|
}
|
|
}
|
|
|
|
function resetAutoRotate() {
|
|
stopAutoRotate();
|
|
setTimeout(startAutoRotate, 6000);
|
|
}
|
|
|
|
// Event listeners
|
|
websiteCards.forEach((card, index) => {
|
|
card.addEventListener("click", () => {
|
|
resetAutoRotate();
|
|
navigateToSlide(index);
|
|
});
|
|
});
|
|
|
|
indicators.forEach((indicator, index) => {
|
|
indicator.addEventListener("click", () => {
|
|
resetAutoRotate();
|
|
navigateToSlide(index);
|
|
});
|
|
});
|
|
|
|
// Mouse events for auto-rotate control
|
|
const container = document.querySelector(".max-w-6xl");
|
|
container.addEventListener("mouseenter", stopAutoRotate);
|
|
container.addEventListener("mouseleave", () => {
|
|
if (!autoRotateInterval) {
|
|
startAutoRotate();
|
|
}
|
|
});
|
|
|
|
// Initialize
|
|
updateActiveStates();
|
|
startAutoRotate();
|
|
});
|