document.addEventListener("DOMContentLoaded", function () { const asset = (file) => `${window.assetBaseUrl}images/home/${file}`; const serviceData = { "Penjemputan e-Waste": { image: asset("jemput.jpg"), description: "Layanan pengumpulan sampah elektronik.", }, "Uji Sampel Laboratorium": { image: asset("lab.jpg"), description: "Pengujian kualitas lingkungan hidup.", }, "Bus Toilet": { image: asset("lab.jpg"), description: "Fasilitas toilet keliling untuk kegiatan umum.", }, AMDAL: { image: asset("lab.jpg"), description: "Proses Analisis Mengenai Dampak Lingkungan.", }, "Bulky Waste": { image: asset("lab.jpg"), description: "Layanan khusus pengangkutan sampah besar.", }, "Permohonan Informasi Publik": { image: asset("lab.jpg"), description: "Saluran pengaduan pelanggaran lingkungan.", }, "BPS-RW": { image: asset("lab.jpg"), description: "Basis data lingkungan hidup tingkat Rukun Warga", }, "Whistleblowing System": { image: asset("lab.jpg"), description: "Sarana pelaporan pelanggaran terkait lingkungan", }, }; const mobileTabs = document.querySelectorAll(".mobile-tab"); const mobileServiceImage = document.getElementById("mobile-service-image"); const mobileServiceTitle = document.getElementById("mobile-service-title"); const mobileServiceDescription = document.getElementById( "mobile-service-description" ); mobileTabs.forEach((tab) => { tab.addEventListener("click", function () { const serviceName = this.getAttribute("data-service"); mobileTabs.forEach((t) => { t.classList.remove("bg-orange-500", "text-white"); t.classList.add("bg-gray-200", "text-gray-600"); }); this.classList.remove("bg-gray-200", "text-gray-600"); this.classList.add("bg-orange-500", "text-white"); if (serviceData[serviceName]) { mobileServiceImage.src = serviceData[serviceName].image; mobileServiceTitle.textContent = serviceName; mobileServiceDescription.textContent = serviceData[serviceName].description; } }); }); const serviceItems = Array.from(document.querySelectorAll(".service-item")); const imageCard = document.querySelector(".md\\:col-span-1 .rounded-lg img"); const serviceTitle = document.querySelector( ".md\\:col-span-1 .rounded-lg h3" ); const cardContainer = document.querySelector(".md\\:col-span-1 .rounded-lg"); let activeService = "Penjemputan e-Waste"; const style = document.createElement("style"); style.innerHTML = ` .service-item { position: relative; transition: all 0.3s ease-in-out; border-left: 0px solid #ed8936; overflow: hidden; } .service-item::before { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 0; background-color: rgba(237, 137, 54, 0.1); transition: width 0.3s ease-in-out; z-index: -1; } .service-item.active::before { width: 100%; } .service-item h2, .service-item p { transition: all 0.3s ease-in-out; } .rounded-lg.overflow-hidden { transition: transform 0.3s ease, box-shadow 0.3s ease; } .rounded-lg.overflow-hidden:hover { transform: translateY(-5px); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } .rounded-lg.overflow-hidden img { transition: transform 0.6s ease; } .image-fade { animation: imageFade 0.4s ease-in-out; } @keyframes imageFade { 0% { opacity: 0.6; transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } } `; document.head.appendChild(style); function setActiveService(title) { serviceItems.forEach((item) => { const h2 = item.querySelector("h2"); const p = item.querySelector("p"); if (!h2 || !p) return; const serviceName = h2.textContent.trim(); if (serviceName === title) { item.classList.add("active"); item.style.borderLeft = "4px solid #ed8936"; item.style.paddingLeft = "1rem"; h2.classList.remove("text-gray-400"); h2.classList.add("text-black", "font-bold"); p.classList.remove("text-gray-400"); p.classList.add("text-gray-600"); } else { item.classList.remove("active"); item.style.borderLeft = "none"; item.style.paddingLeft = "0"; h2.classList.add("text-gray-400"); h2.classList.remove("text-black", "font-bold"); p.classList.add("text-gray-400"); p.classList.remove("text-gray-600"); } }); if (imageCard && serviceData[title]) { imageCard.classList.add("image-fade"); imageCard.src = serviceData[title].image; imageCard.alt = title; setTimeout(() => imageCard.classList.remove("image-fade"), 400); } if (serviceTitle) { serviceTitle.textContent = title; } activeService = title; } let autoplayInterval; let isHovering = false; serviceItems.forEach((item) => { item.addEventListener("mouseenter", () => { isHovering = true; const h2 = item.querySelector("h2"); if (!h2) return; const hoveredTitle = h2.textContent.trim(); if (serviceData[hoveredTitle]) setActiveService(hoveredTitle); }); item.addEventListener("mouseleave", () => { isHovering = false; }); }); if (cardContainer) { cardContainer.addEventListener("mouseenter", () => { if (imageCard) imageCard.style.transform = "scale(1.05)"; }); cardContainer.addEventListener("mouseleave", () => { if (imageCard) imageCard.style.transform = "scale(1)"; }); } function startAutoplay() { autoplayInterval = setInterval(() => { if (!isHovering) { const serviceNames = Object.keys(serviceData); const currentIndex = serviceNames.indexOf(activeService); const nextIndex = (currentIndex + 1) % serviceNames.length; setActiveService(serviceNames[nextIndex]); } }, 4000); } setActiveService(activeService); startAutoplay(); });