234 lines
10 KiB
Plaintext
234 lines
10 KiB
Plaintext
<div class="container max-w-6xl px-4 mx-auto my-12">
|
|
<div class="flex flex-col md:flex-row justify-between items-start md:items-start mb-12 gap-4">
|
|
<div class="w-full md:w-1/2">
|
|
<h2 class="text-2xl md:text-3xl font-bold text-gray-800">Informasi Lingkungan dan</br> Kebersihan Realtime</h2>
|
|
</div>
|
|
<div class="w-full md:w-1/2">
|
|
<div class="flex flex-col gap-2">
|
|
<div class="inline-flex flex-wrap md:flex-nowrap mt-2 md:mt-0 bg-amber-100 rounded-full px-3 py-1 items-center hover:bg-amber-200 transition-all duration-300 w-fit">
|
|
<i class="h-4 w-4 md:h-5 md:w-5 text-amber-600 mr-2" data-lucide="calendar"></i>
|
|
<span class="font-medium text-sm md:text-base">Senin, 10 Februari 2025</span>
|
|
<span class="mx-2 text-amber-600">|</span>
|
|
<i class="h-4 w-4 md:h-5 md:w-5 text-amber-600 mr-2" data-lucide="clock"></i>
|
|
<span class="font-medium text-sm md:text-base">15.00 WIB</span>
|
|
</div>
|
|
<div>
|
|
<p class="text-gray-600 text-balance text-sm md:text-base">
|
|
Update terbaru seputar kapasitas, teknologi, dan program keberlanjutan TPST Bantar Gebang dalam pengelolaan sampah Jakarta serta kualitas udara di Provinsi DKI Jakarta.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="animate-on-scroll" data-aos="fade-up" data-aos-duration="2000" data-aos-once="true">
|
|
<div class="grid grid-cols-1 md:grid-cols-12 gap-4">
|
|
<!-- Jumlah Sampah Card -->
|
|
<div class="relative bg-gradient-to-br from-orange-400 via-orange-500 to-orange-600 text-white p-6 rounded-lg md:col-span-6 overflow-hidden h-[240px] md:h-[488px] group">
|
|
<div class="absolute inset-0 bg-gradient-to-r from-white/20 via-white/10 to-transparent animate-spotlight"></div>
|
|
<div class="relative z-10 flex flex-col justify-between h-full md:p-6">
|
|
<div class="flex justify-between items-start">
|
|
<div>
|
|
<h3 class="text-lg md:text-2xl leading-tight">Jumlah Sampah<br>Masuk TPST<br>Bantar Gebang</h3>
|
|
</div>
|
|
<div>
|
|
<i class="h-8 w-8 md:h-10 md:w-10" data-lucide="trash-2"></i>
|
|
</div>
|
|
</div>
|
|
<div class="text-left">
|
|
<span class="text-lg md:text-xl">Ton</span>
|
|
<div class="text-5xl md:text-7xl font-bold rolling-number" data-target="673">0</div>
|
|
<div class="mt-3 inline-flex items-center bg-orange-600 bg-opacity-50 rounded-md px-3 py-1">
|
|
<i class="h-4 w-4 mr-1" data-lucide="arrow-down"></i>
|
|
<span class="text-sm">2.5%</span>
|
|
<span class="ml-1 text-sm">dari kemarin</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="md:col-span-6 grid grid-rows-1 md:grid-rows-2 gap-4">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<!-- Kualitas Udara Terbaik -->
|
|
<div class="relative bg-green-600 text-white p-6 rounded-lg h-[240px] md:h-[234px] overflow-hidden group">
|
|
<div class="absolute inset-0 bg-gradient-to-r from-white/20 via-white/10 to-transparent animate-spotlight-slow"></div>
|
|
<div class="relative z-10 flex flex-col justify-between h-full">
|
|
<div class="flex justify-between items-start">
|
|
<div>
|
|
<h3 class="text-lg md:text-xl leading-tight">Kualitas Udara<br>Terbaik</h3>
|
|
</div>
|
|
<div>
|
|
<i class="h-8 w-8 md:h-10 md:w-10" data-lucide="wind"></i>
|
|
</div>
|
|
</div>
|
|
<div class="text-left">
|
|
<div class="flex items-end gap-2">
|
|
<div class="text-5xl md:text-7xl font-bold rolling-number" data-target="8">0</div>
|
|
<div class="text-lg md:text-sm font-normal">ISPU</div>
|
|
</div>
|
|
<div class="mt-3 inline-flex items-center bg-green-700 bg-opacity-50 rounded-md px-3 py-1">
|
|
<i class="h-4 w-4 mr-1" data-lucide="arrow-up"></i>
|
|
<span class="text-sm">2.5 μg/</span>
|
|
<span class="ml-1 text-sm">PM2</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Kualitas Udara Terburuk -->
|
|
<div class="relative bg-red-600 text-white p-6 rounded-lg h-[240px] md:h-[234px] overflow-hidden group">
|
|
<div class="absolute inset-0 bg-gradient-to-r from-white/20 via-white/10 to-transparent animate-spotlight-reverse"></div>
|
|
<div class="relative z-10 flex flex-col justify-between h-full">
|
|
<div class="flex justify-between items-start">
|
|
<div>
|
|
<h3 class="text-lg md:text-xl leading-tight">Kualitas Udara<br>Terburuk</h3>
|
|
</div>
|
|
<div>
|
|
<i class="h-8 w-8 md:h-10 md:w-10" data-lucide="tornado"></i>
|
|
</div>
|
|
</div>
|
|
<div class="text-left">
|
|
<div class="flex items-end gap-2">
|
|
<div class="text-5xl md:text-7xl font-bold rolling-number" data-target="8">0</div>
|
|
<div class="text-lg md:text-sm font-normal">ISPU</div>
|
|
</div>
|
|
<div class="mt-3 inline-flex items-center bg-red-700 bg-opacity-50 rounded-md px-3 py-1">
|
|
|
|
<i class="h-4 w-4 mr-1" data-lucide="arrow-down"></i>
|
|
<span class="text-sm">2.5 μg/</span>
|
|
<span class="ml-1 text-sm">PM2</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Jumlah Truk Card -->
|
|
<div class="relative bg-yellow-400 text-white rounded-lg p-6 h-[240px] md:h-[234px] overflow-hidden group">
|
|
<div class="absolute inset-0 bg-gradient-to-r from-white/20 via-white/10 to-transparent animate-spotlight-diagonal"></div>
|
|
<div class="relative z-10 flex flex-col justify-between h-full">
|
|
<div class="flex justify-between items-start">
|
|
<div>
|
|
<h3 class="text-lg md:text-xl leading-tight">Jumlah Truk<br>Masuk TPST<br>Bantar Gebang</h3>
|
|
</div>
|
|
<div>
|
|
<i class="h-8 w-8 md:h-10 md:w-10" data-lucide="truck"></i>
|
|
</div>
|
|
</div>
|
|
<div class="text-left">
|
|
<div class="flex items-end gap-2">
|
|
<div class="text-5xl md:text-7xl font-bold rolling-number" data-target="673">0</div>
|
|
<div class="text-lg md:text-sm font-normal">Unit</div>
|
|
</div>
|
|
<div class="mt-3 inline-flex items-center bg-yellow-500 bg-opacity-50 rounded-md px-3 py-1">
|
|
<i class="h-4 w-4 mr-1" data-lucide="arrow-down"></i>
|
|
<span class="text-sm">2.5%</span>
|
|
<span class="ml-1 text-sm">dari kemarin</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<register-block dynamic-section="css" key="cssInformasi">
|
|
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
|
|
<style>
|
|
@@keyframes spotlight {
|
|
0% {
|
|
transform: translateX(-100%) skew(-20deg);
|
|
}
|
|
100% {
|
|
transform: translateX(200%) skew(-20deg);
|
|
}
|
|
}
|
|
|
|
@@keyframes spotlight-slow {
|
|
0% {
|
|
transform: translateX(-100%) skew(-15deg);
|
|
}
|
|
100% {
|
|
transform: translateX(200%) skew(-15deg);
|
|
}
|
|
}
|
|
|
|
@@keyframes spotlight-reverse {
|
|
0% {
|
|
transform: translateX(200%) skew(20deg);
|
|
}
|
|
100% {
|
|
transform: translateX(-100%) skew(20deg);
|
|
}
|
|
}
|
|
|
|
@@keyframes spotlight-diagonal {
|
|
0% {
|
|
transform: translate(-100%, -50%) skew(-25deg);
|
|
}
|
|
100% {
|
|
transform: translate(200%, 50%) skew(-25deg);
|
|
}
|
|
}
|
|
|
|
.animate-spotlight {
|
|
animation: spotlight 3s ease-in-out infinite;
|
|
}
|
|
|
|
.animate-spotlight-slow {
|
|
animation: spotlight-slow 4s ease-in-out infinite;
|
|
}
|
|
|
|
.animate-spotlight-reverse {
|
|
animation: spotlight-reverse 3.5s ease-in-out infinite;
|
|
}
|
|
|
|
.animate-spotlight-diagonal {
|
|
animation: spotlight-diagonal 4.5s ease-in-out infinite;
|
|
}
|
|
|
|
</style>
|
|
</register-block>
|
|
|
|
<register-block dynamic-section="scripts" key="jsInformasi">
|
|
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
|
|
|
|
<script>
|
|
AOS.init();
|
|
</script>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const rollingNumbers = document.querySelectorAll(".rolling-number");
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
const element = entry.target;
|
|
const target = parseInt(element.getAttribute("data-target"));
|
|
let current = 0;
|
|
const increment = target / 120;
|
|
|
|
const updateNumber = () => {
|
|
current += increment;
|
|
if (current < target) {
|
|
element.textContent = Math.floor(current);
|
|
requestAnimationFrame(updateNumber);
|
|
} else {
|
|
element.textContent = target;
|
|
}
|
|
};
|
|
|
|
updateNumber();
|
|
observer.unobserve(element);
|
|
}
|
|
});
|
|
});
|
|
|
|
rollingNumbers.forEach((number) => {
|
|
observer.observe(number);
|
|
});
|
|
});
|
|
</script>
|
|
</register-block> |