286 lines
9.4 KiB
Plaintext
286 lines
9.4 KiB
Plaintext
<div class="relative bg-gradient-to-br from-amber-600 via-amber-700 to-orange-600 py-16 md:py-24 min-h-screen">
|
|
<div class="container mx-auto px-4 max-w-7xl">
|
|
<!-- Heading Section -->
|
|
<div class="text-center text-white mb-16">
|
|
<h2 class="text-4xl md:text-5xl font-bold mb-6">
|
|
Layanan Digital
|
|
</h2>
|
|
<p class="max-w-3xl mx-auto text-lg md:text-xl leading-relaxed text-amber-50">
|
|
Beragam layanan DLH DKI Jakarta, dari pengelolaan sampah, pengujian lingkungan, hingga pengaduan pelanggaran untuk Jakarta yang lebih hijau.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Three Laptops Display -->
|
|
<div class="relative max-w-6xl mx-auto">
|
|
<div class="grid grid-cols-3 gap-6 mb-12">
|
|
<!-- Website Image 1 -->
|
|
<div class="website-item" data-index="0">
|
|
<img src="/assets/images/home/skl.png" alt="Sistem Ketaatan Lingkungan" class="w-full h-auto object-contain cursor-pointer hover:scale-105 transition-transform duration-300">
|
|
</div>
|
|
|
|
<!-- Website Image 2 -->
|
|
<div class="website-item active" data-index="1">
|
|
<img src="/assets/images/home/skl.png" alt="Jakarta Lingko" class="w-full h-auto object-contain cursor-pointer hover:scale-105 transition-transform duration-300">
|
|
</div>
|
|
|
|
<!-- Website Image 3 -->
|
|
<div class="website-item" data-index="2">
|
|
<img src="/assets/images/home/skl.png" alt="Lingkungan Jakarta" class="w-full h-auto object-contain cursor-pointer hover:scale-105 transition-transform duration-300">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Featured URL Display -->
|
|
<div class="relative mx-auto max-w-md mb-8">
|
|
<div class="bg-white/95 backdrop-blur-sm flex items-center rounded-2xl overflow-hidden shadow-2xl border border-white/20">
|
|
<div class="flex items-center px-4 py-1">
|
|
<div class="flex space-x-2">
|
|
<div class="w-3 h-3 rounded-full bg-red-500"></div>
|
|
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
|
|
<div class="w-3 h-3 rounded-full bg-green-500"></div>
|
|
</div>
|
|
</div>
|
|
<input type="text" id="urlDisplay" value="jaklingko.jakarta.go.id" class="flex-1 py-4 px-4 text-gray-800 focus:outline-none font-medium bg-transparent" readonly>
|
|
<button class="bg-gradient-to-r from-amber-600 to-orange-600 p-4 hover:from-amber-700 hover:to-orange-700 transition-all duration-300">
|
|
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Enhanced Indicators -->
|
|
<div class="flex justify-center space-x-4" id="indicators">
|
|
<button class="indicator group relative" data-slide="0">
|
|
<div class="w-12 h-3 rounded-full bg-white/30 group-hover:bg-white/50 transition-all duration-300"></div>
|
|
<span class="absolute -bottom-6 left-1/2 transform -translate-x-1/2 text-white/70 text-xs font-medium opacity-0 group-hover:opacity-100 transition-opacity">SKL</span>
|
|
</button>
|
|
<button class="indicator group relative active" data-slide="1">
|
|
<div class="w-12 h-3 rounded-full bg-white group-hover:bg-white transition-all duration-300"></div>
|
|
<span class="absolute -bottom-6 left-1/2 transform -translate-x-1/2 text-white text-xs font-medium">Lingko</span>
|
|
</button>
|
|
<button class="indicator group relative" data-slide="2">
|
|
<div class="w-12 h-3 rounded-full bg-white/30 group-hover:bg-white/50 transition-all duration-300"></div>
|
|
<span class="absolute -bottom-6 left-1/2 transform -translate-x-1/2 text-white/70 text-xs font-medium opacity-0 group-hover:opacity-100 transition-opacity">Lingkungan</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<register-block dynamic-section="css" key="cssWebsite">
|
|
<style>
|
|
.laptop-screen {
|
|
border-radius: 8px 8px 0 0;
|
|
border: 3px solid #374151;
|
|
background: #1f2937;
|
|
}
|
|
|
|
.laptop-base {
|
|
position: relative;
|
|
}
|
|
|
|
.laptop-base::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 60px;
|
|
height: 8px;
|
|
background: #9ca3af;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.website-slide {
|
|
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.carousel-container {
|
|
perspective: 1000px;
|
|
}
|
|
|
|
.website-card {
|
|
transition: all 0.4s ease-in-out;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.website-card:hover {
|
|
transform: translateY(-10px) scale(1.02);
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.website-card.active {
|
|
transform: scale(1.05);
|
|
z-index: 10;
|
|
}
|
|
|
|
.laptop-frame {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
border-radius: 12px;
|
|
padding: 8px;
|
|
}
|
|
|
|
.screen-content {
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
background: #000;
|
|
}
|
|
|
|
</style>
|
|
</register-block>
|
|
|
|
<register-block dynamic-section="scripts" key="jsWebsite">
|
|
<script>
|
|
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();
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
</register-block>
|