835 lines
55 KiB
Plaintext
835 lines
55 KiB
Plaintext
@{
|
|
ViewData["Title"] = "BPS-RW Jakarta";
|
|
}
|
|
|
|
<!-- Hero Section -->
|
|
<section class="w-full h-[calc(100vh-5rem)] relative overflow-hidden">
|
|
<!-- Container -->
|
|
<div id="heroSlider" class="relative w-full h-full">
|
|
<!-- Content -->
|
|
<div class="hero-slide active absolute inset-0 w-full h-full transition-opacity duration-500">
|
|
<img src="/images/hero-bg.png" class="w-full h-full object-cover object-[75%_center] lg:object-center"
|
|
alt="Hero Background 1" />
|
|
<div class="absolute inset-0 flex items-center">
|
|
<div class="w-full mx-auto px-4 lg:px-28 xl:px-48">
|
|
<div class="w-full lg:w-1/2">
|
|
<!-- Badge -->
|
|
<div class="inline-flex px-4 py-2 bg-primary-25 rounded-full mb-4 lg:mb-6">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-2 h-2 bg-primary-700 rounded-full"></div>
|
|
<span class="text-primary-700 text-base font-semibold font-jakarta">BPS-RW
|
|
Jakarta</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Title and Description -->
|
|
<h1 class="text-white text-4xl lg:text-6xl font-bold font-jakarta leading-tight mb-4 lg:mb-6">
|
|
Pengelolaan Sampah<br />Lingkup Rukun Warga
|
|
</h1>
|
|
<p
|
|
class="text-white/90 text-base lg:text-lg font-normal font-jakarta leading-relaxed mb-6 lg:mb-8">
|
|
Program dari Dinas Lingkungan Hidup Provinsi Jakarta yang bertujuan untuk mengoptimalkan
|
|
pengelolaan sampah berbasis komunitas di tingkat RW.
|
|
</p>
|
|
|
|
<!-- CTA Buttons -->
|
|
<div class="flex flex-col sm:flex-row gap-3 lg:gap-4 items-start">
|
|
<a href="#tentang"
|
|
class="inline-flex px-6 lg:px-8 py-2.5 lg:py-3 bg-white hover:bg-gray-100 rounded-full items-center justify-center gap-2 transition-all w-auto">
|
|
<span
|
|
class="text-primary-700 text-base lg:text-base font-semibold font-jakarta whitespace-nowrap">Pelajari
|
|
Selengkapnya</span>
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M5 15L15 5" stroke="#1E602A" stroke-width="2" stroke-linecap="round"
|
|
stroke-linejoin="round" />
|
|
<path d="M6.875 5H15V13.125" stroke="#1E602A" stroke-width="2"
|
|
stroke-linecap="round" stroke-linejoin="round" />
|
|
</svg>
|
|
</a>
|
|
<a href="#kontak"
|
|
class="inline-flex px-6 lg:px-8 py-2.5 lg:py-3 bg- rounded-full border-2 border-white hover:bg-white/10 items-center justify-center transition-all w-auto">
|
|
<span class="text-white text-sm lg:text-base font-semibold font-jakarta whitespace-nowrap">Hubungi
|
|
Kami</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right side icons (hidden on mobile) -->
|
|
<div
|
|
class="absolute right-8 lg:right-16 xl:right-24 top-1/2 transform -translate-y-1/2 z-20 hidden lg:flex flex-col gap-3">
|
|
<button
|
|
class="w-12 h-12 bg-white/20 hover:bg-white/30 backdrop-blur-sm rounded-full flex items-center justify-center transition-all border border-white/30">
|
|
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
|
|
</svg>
|
|
</button>
|
|
<button
|
|
class="w-12 h-12 bg-white hover:bg-gray-100 rounded-full flex items-center justify-center transition-all shadow-lg">
|
|
<svg class="w-6 h-6 text-primary-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- About BPS-RW Section -->
|
|
<section id="tentang" class="w-full px-4 lg:px-28 xl:px-48 py-16 lg:py-24 bg-white">
|
|
<div class="w-full mx-auto">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 xl:gap-20 items-center">
|
|
<!-- Image Section -->
|
|
<div class="order-2 lg:order-1">
|
|
<div class="relative w-full h-[400px] lg:h-[500px]">
|
|
<img class="w-full h-full object-cover rounded-2xl shadow-lg" src="/images/about.png"
|
|
alt="Tentang BPS-RW" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content Section -->
|
|
<div class="order-1 lg:order-2">
|
|
<!-- Badge -->
|
|
<div class="inline-flex px-4 py-2 bg-primary-25 rounded-full mb-4">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-2 h-2 bg-primary-700 rounded-full"></div>
|
|
<span class="text-primary-700 text-base font-semibold font-jakarta">Tentang Kami</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="text-gray-900 text-3xl lg:text-4xl font-bold font-jakarta mb-6">Tentang BPS-RW</h2>
|
|
<p class="text-slate-600 text-lg font-normal font-jakarta leading-relaxed"></p>
|
|
BPS-RW (Bidang Pengelolaan Sampah Lingkup Rukun Warga) adalah Program dari Dinas Lingkungan Hidup
|
|
Provinsi DKI Jakarta yang bertujuan untuk me pengelolaan sampah berbasis komunitas di tingkat RW.
|
|
Program ini hadir untuk meningkatkan kesadaran masyarakat dalam memilah, mengelola, serta mendaur ulang
|
|
sampah guna menciptakan lingkungan yang lebih bersih dan sehat.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Statistics Section -->
|
|
<section class="w-full px-4 lg:px-28 xl:px-48 py-16 lg:py-24 relative bg-green-950 overflow-hidden">
|
|
<!-- Background overlay -->
|
|
<div class="absolute inset-0 overflow-hidden">
|
|
<img src="/images/leaf.svg" class="w-full h-full object-cover opacity-20" alt="Background Pattern"
|
|
style="mix-blend-mode: overlay;" />
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="w-full mx-auto relative z-10">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 xl:gap-20 items-center">
|
|
<!-- Left Content -->
|
|
<div>
|
|
<!-- Badge -->
|
|
<div class="inline-flex px-4 py-2 bg-primary-25 rounded-full mb-4">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-2 h-2 bg-primary-700 rounded-full"></div>
|
|
<span class="text-primary-700 text-base font-semibold font-jakarta">Statistik</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="text-white text-3xl lg:text-5xl font-bold font-jakarta mb-6">
|
|
Jumlah Rumah Memilah
|
|
</h2>
|
|
<p class="text-white/90 text-base lg:text-lg font-normal font-jakarta leading-relaxed">
|
|
Rumah Memilah adalah program dari BPSRW DKI Jakarta yang mendorong partisipasi aktif warga dalam
|
|
memilah sampah rumah tangga menjadi beberapa kategori.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Statistics Grid -->
|
|
<div class="grid grid-cols-2 gap-8">
|
|
<!-- Stat 1 -->
|
|
<div class="pl-3 lg:pl-6 border-l-4 border-white">
|
|
<div class="text-white text-3xl lg:text-5xl font-bold font-jakarta mb-2">1.522.356</div>
|
|
<div class="text-white/80 text-sm lg:text-lg font-normal font-jakarta">Jumlah Rumah</div>
|
|
</div>
|
|
|
|
<!-- Stat 2 -->
|
|
<div class="pl-3 lg:pl-6 border-l-4 border-white">
|
|
<div class="text-white text-3xl lg:text-5xl font-bold font-jakarta mb-2">2.755</div>
|
|
<div class="text-white/80 text-sm lg:text-lg font-normal font-jakarta">Jumlah RW</div>
|
|
</div>
|
|
|
|
<!-- Stat 3 -->
|
|
<div class="pl-3 lg:pl-6 border-l-4 border-white">
|
|
<div class="text-white text-3xl lg:text-5xl font-bold font-jakarta mb-2">203.511</div>
|
|
<div class="text-white/80 text-sm lg:text-lg font-normal font-jakarta">Rumah Memilah</div>
|
|
</div>
|
|
|
|
<!-- Stat 4 -->
|
|
<div class="pl-3 lg:pl-6 border-l-4 border-white">
|
|
<div class="text-white text-3xl lg:text-5xl font-bold font-jakarta mb-2">126.023</div>
|
|
<div class="text-white/80 text-sm lg:text-lg font-normal font-jakarta">Jumlah Nasabah</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- What is Rumah Memilah Section -->
|
|
<section class="w-full px-4 lg:px-28 xl:px-48 py-16 lg:py-24 bg-white">
|
|
<div class="w-full mx-auto">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 xl:gap-20 items-center">
|
|
<!-- Image Section -->
|
|
<div class="order-2 lg:order-1">
|
|
<div class="relative w-full h-[400px] lg:h-[500px]">
|
|
<img class="w-full h-full object-cover rounded-2xl shadow-lg" src="/images/hero-choosen.png"
|
|
alt="Rumah Memilah" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content Section -->
|
|
<div class="order-1 lg:order-2">
|
|
<!-- Badge -->
|
|
<div class="inline-flex px-4 py-2 bg-primary-25 rounded-full mb-4">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-2 h-2 bg-primary-700 rounded-full"></div>
|
|
<span class="text-primary-700 text-base font-semibold font-jakarta">Rumah Memilah</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="text-gray-900 text-3xl lg:text-4xl font-bold font-jakarta mb-6">Apa Itu Rumah Memilah</h2>
|
|
<div class="text-slate-600 text-lg font-normal font-jakarta leading-relaxed space-y-4">
|
|
<p>
|
|
Rumah Memilah adalah program dari BPS RW DKI Jakarta yang mendorong partisipasi aktif warga
|
|
dalam memilah sampah rumah tangga menjadi beberapa kategori. Program ini bertujuan untuk
|
|
mengurangi volume sampah yang masuk ke TPA (Tempat Pembuangan Akhir) dan meningkatkan tingkat
|
|
daur ulang di Jakarta.
|
|
</p>
|
|
<p>
|
|
Dengan bergabung menjadi Rumah Memilah, Anda berkontribusi langsung pada kebersihan lingkungan
|
|
dan ekonomi sirkular di Jakarta, serta mendapatkan berbagai keuntungan menarik.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
|
|
<!-- Regulation Section -->
|
|
<section id="pergub" class="w-full px-4 lg:px-28 xl:px-48 py-16 lg:py-24 bg-gray-100">
|
|
<div class="w-full mx-auto">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 xl:gap-20 items-start">
|
|
<!-- Content Section -->
|
|
<div>
|
|
<!-- Badge -->
|
|
<div class="inline-flex px-4 py-2 bg-primary-25 rounded-full mb-4">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-2 h-2 bg-primary-700 rounded-full"></div>
|
|
<span class="text-primary-700 text-sm font-semibold font-jakarta">Pergub DKI Jakarta</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="text-gray-900 text-3xl lg:text-4xl font-bold font-jakarta mb-8">Peraturan Gubernur DKI
|
|
Jakarta</h2>
|
|
|
|
<!-- Accordion Item 1 - Expanded -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 mb-4 overflow-hidden">
|
|
<button onclick="toggleAccordion('accordion1')"
|
|
class="w-full p-6 flex justify-between items-start text-left">
|
|
<div class="flex-1">
|
|
<h3 class="text-gray-900 text-2xl font-bold font-jakarta mb-1">No. 77 Tahun 2020</h3>
|
|
<p class="text-gray-600 text-base">Pengelolaan Sampah di Lingkungan RT/RW</p>
|
|
</div>
|
|
<svg id="accordion1-icon" class="w-6 h-6 text-gray-600 transform transition-transform"
|
|
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7">
|
|
</path>
|
|
</svg>
|
|
</button>
|
|
<div id="accordion1" class="px-6 pb-6">
|
|
<p class="text-slate-600 text-base leading-relaxed mb-4">
|
|
Peraturan Gubernur Nomor 77 Tahun 2020 mengatur tentang pengelolaan sampah dari sumbernya
|
|
melalui peran aktif warga di tingkat RT dan RW, dengan tujuan mengurangi volume sampah yang
|
|
masuk ke TPA.
|
|
</p>
|
|
<div class="flex flex-wrap gap-2 mb-4">
|
|
<span class="px-3 py-1 bg-primary-50 rounded-full
|
|
font-medium inline-flex items-center gap-1">
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M13 2H11.5V1.5C11.5 1.36739 11.4473 1.24021 11.3536 1.14645C11.2598 1.05268 11.1326 1 11 1C10.8674 1 10.7402 1.05268 10.6464 1.14645C10.5527 1.24021 10.5 1.36739 10.5 1.5V2H5.5V1.5C5.5 1.36739 5.44732 1.24021 5.35355 1.14645C5.25979 1.05268 5.13261 1 5 1C4.86739 1 4.74021 1.05268 4.64645 1.14645C4.55268 1.24021 4.5 1.36739 4.5 1.5V2H3C2.73478 2 2.48043 2.10536 2.29289 2.29289C2.10536 2.48043 2 2.73478 2 3V13C2 13.2652 2.10536 13.5196 2.29289 13.7071C2.48043 13.8946 2.73478 14 3 14H13C13.2652 14 13.5196 13.8946 13.7071 13.7071C13.8946 13.5196 14 13.2652 14 13V3C14 2.73478 13.8946 2.48043 13.7071 2.29289C13.5196 2.10536 13.2652 2 13 2ZM5.25 11.5C5.10166 11.5 4.95666 11.456 4.83332 11.3736C4.70999 11.2912 4.61386 11.1741 4.55709 11.037C4.50032 10.9 4.48547 10.7492 4.51441 10.6037C4.54335 10.4582 4.61478 10.3246 4.71967 10.2197C4.82456 10.1148 4.9582 10.0433 5.10368 10.0144C5.24917 9.98547 5.39997 10.0003 5.53701 10.0571C5.67406 10.1139 5.79119 10.21 5.8736 10.3333C5.95601 10.4567 6 10.6017 6 10.75C6 10.9489 5.92098 11.1397 5.78033 11.2803C5.63968 11.421 5.44891 11.5 5.25 11.5ZM8 11.5C7.85166 11.5 7.70666 11.456 7.58332 11.3736C7.45999 11.2912 7.36386 11.1741 7.30709 11.037C7.25032 10.9 7.23547 10.7492 7.26441 10.6037C7.29335 10.4582 7.36478 10.3246 7.46967 10.2197C7.57456 10.1148 7.7082 10.0433 7.85368 10.0144C7.99917 9.98547 8.14997 10.0003 8.28701 10.0571C8.42406 10.1139 8.54119 10.21 8.6236 10.3333C8.70601 10.4567 8.75 10.6017 8.75 10.75C8.75 10.9489 8.67098 11.1397 8.53033 11.2803C8.38968 11.421 8.19891 11.5 8 11.5ZM8 9C7.85166 9 7.70666 8.95601 7.58332 8.8736C7.45999 8.79119 7.36386 8.67406 7.30709 8.53701C7.25032 8.39997 7.23547 8.24917 7.26441 8.10368C7.29335 7.9582 7.36478 7.82456 7.46967 7.71967C7.57456 7.61478 7.7082 7.54335 7.85368 7.51441C7.99917 7.48547 8.14997 7.50032 8.28701 7.55709C8.42406 7.61386 8.54119 7.70999 8.6236 7.83332C8.70601 7.95666 8.75 8.10166 8.75 8.25C8.75 8.44891 8.67098 8.63968 8.53033 8.78033C8.38968 8.92098 8.19891 9 8 9ZM10.75 11.5C10.6017 11.5 10.4567 11.456 10.3333 11.3736C10.21 11.2912 10.1139 11.1741 10.0571 11.037C10.0003 10.9 9.98547 10.7492 10.0144 10.6037C10.0433 10.4582 10.1148 10.3246 10.2197 10.2197C10.3246 10.1148 10.4582 10.0433 10.6037 10.0144C10.7492 9.98547 10.9 10.0003 11.037 10.0571C11.1741 10.1139 11.2912 10.21 11.3736 10.3333C11.456 10.4567 11.5 10.6017 11.5 10.75C11.5 10.9489 11.421 11.1397 11.2803 11.2803C11.1397 11.421 10.9489 11.5 10.75 11.5ZM10.75 9C10.6017 9 10.4567 8.95601 10.3333 8.8736C10.21 8.79119 10.1139 8.67406 10.0571 8.53701C10.0003 8.39997 9.98547 8.24917 10.0144 8.10368C10.0433 7.9582 10.1148 7.82456 10.2197 7.71967C10.3246 7.61478 10.4582 7.54335 10.6037 7.51441C10.7492 7.48547 10.9 7.50032 11.037 7.55709C11.1741 7.61386 11.2912 7.70999 11.3736 7.83332C11.456 7.95666 11.5 8.10166 11.5 8.25C11.5 8.44891 11.421 8.63968 11.2803 8.78033C11.1397 8.92098 10.9489 9 10.75 9ZM13 5H3V3H4.5V3.5C4.5 3.63261 4.55268 3.75979 4.64645 3.85355C4.74021 3.94732 4.86739 4 5 4C5.13261 4 5.25979 3.94732 5.35355 3.85355C5.44732 3.75979 5.5 3.63261 5.5 3.5V3H10.5V3.5C10.5 3.63261 10.5527 3.75979 10.6464 3.85355C10.7402 3.94732 10.8674 4 11 4C11.1326 4 11.2598 3.94732 11.3536 3.85355C11.4473 3.75979 11.5 3.63261 11.5 3.5V3H13V5Z"
|
|
fill="#247332" />
|
|
</svg>
|
|
|
|
Ditetapkan: 13 Juli 2020
|
|
</span>
|
|
<span
|
|
class="px-3 py-1 bg-primary-50 rounded-full text-primary-700 text-sm font-medium inline-flex items-center gap-1">
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M8 1.5C6.71442 1.5 5.45772 1.88122 4.3888 2.59545C3.31988 3.30968 2.48676 4.32484 1.99479 5.51256C1.50282 6.70028 1.37409 8.00721 1.6249 9.26809C1.8757 10.529 2.49477 11.6872 3.40381 12.5962C4.31285 13.5052 5.47104 14.1243 6.73192 14.3751C7.99279 14.6259 9.29973 14.4972 10.4874 14.0052C11.6752 13.5132 12.6903 12.6801 13.4046 11.6112C14.1188 10.5423 14.5 9.28558 14.5 8C14.4982 6.27665 13.8128 4.62441 12.5942 3.40582C11.3756 2.18722 9.72335 1.50182 8 1.5ZM10.8538 6.85375L7.35375 10.3538C7.30732 10.4002 7.25217 10.4371 7.19147 10.4623C7.13077 10.4874 7.06571 10.5004 7 10.5004C6.9343 10.5004 6.86923 10.4874 6.80853 10.4623C6.74783 10.4371 6.69269 10.4002 6.64625 10.3538L5.14625 8.85375C5.05243 8.75993 4.99972 8.63268 4.99972 8.5C4.99972 8.36732 5.05243 8.24007 5.14625 8.14625C5.24007 8.05243 5.36732 7.99972 5.5 7.99972C5.63268 7.99972 5.75993 8.05243 5.85375 8.14625L7 9.29313L10.1463 6.14625C10.1927 6.09979 10.2479 6.06294 10.3086 6.0378C10.3693 6.01266 10.4343 5.99972 10.5 5.99972C10.5657 5.99972 10.6308 6.01266 10.6915 6.0378C10.7521 6.06294 10.8073 6.09979 10.8538 6.14625C10.9002 6.1927 10.9371 6.24786 10.9622 6.30855C10.9873 6.36925 11.0003 6.4343 11.0003 6.5C11.0003 6.5657 10.9873 6.63075 10.9622 6.69145C10.9371 6.75214 10.9002 6.8073 10.8538 6.85375Z"
|
|
fill="#247332" />
|
|
</svg>
|
|
|
|
Status: Berlaku
|
|
</span>
|
|
<a href="#"
|
|
class="px-3 py-1 bg-primary-50 rounded-full text-primary-700 text-sm font-medium inline-flex items-center gap-1 hover:bg-gray-200 transition-colors">
|
|
<svg width="12" height="12" viewBox="0 0 12 12" fill="none"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M12 7.5V11.5C12 11.6326 11.9473 11.7598 11.8536 11.8536C11.7598 11.9473 11.6326 12 11.5 12H0.5C0.367392 12 0.240215 11.9473 0.146447 11.8536C0.0526785 11.7598 0 11.6326 0 11.5V7.5C0 7.36739 0.0526785 7.24021 0.146447 7.14645C0.240215 7.05268 0.367392 7 0.5 7C0.632608 7 0.759785 7.05268 0.853553 7.14645C0.947321 7.24021 1 7.36739 1 7.5V11H11V7.5C11 7.36739 11.0527 7.24021 11.1464 7.14645C11.2402 7.05268 11.3674 7 11.5 7C11.6326 7 11.7598 7.05268 11.8536 7.14645C11.9473 7.24021 12 7.36739 12 7.5ZM5.64625 7.85375C5.69269 7.90024 5.74783 7.93712 5.80853 7.96228C5.86923 7.98744 5.93429 8.00039 6 8.00039C6.06571 8.00039 6.13077 7.98744 6.19147 7.96228C6.25217 7.93712 6.30731 7.90024 6.35375 7.85375L8.85375 5.35375C8.92376 5.28382 8.97144 5.1947 8.99076 5.09765C9.01009 5.00061 9.00019 4.90002 8.96231 4.8086C8.92443 4.71719 8.86029 4.63908 8.77799 4.58414C8.69569 4.5292 8.59895 4.49992 8.5 4.5H6.5V0.5C6.5 0.367392 6.44732 0.240215 6.35355 0.146447C6.25979 0.0526784 6.13261 0 6 0C5.86739 0 5.74021 0.0526784 5.64645 0.146447C5.55268 0.240215 5.5 0.367392 5.5 0.5V4.5H3.5C3.40105 4.49992 3.30431 4.5292 3.22201 4.58414C3.13971 4.63908 3.07556 4.71719 3.03769 4.8086C2.99981 4.90002 2.98991 5.00061 3.00924 5.09765C3.02856 5.1947 3.07624 5.28382 3.14625 5.35375L5.64625 7.85375Z"
|
|
fill="#247332" />
|
|
</svg>
|
|
|
|
Unduh PDF
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Accordion Item 2 - Collapsed -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
|
|
<button onclick="toggleAccordion('accordion2')"
|
|
class="w-full p-6 flex justify-between items-start text-left">
|
|
<div class="flex-1">
|
|
<h3 class="text-gray-900 text-2xl font-bold font-jakarta mb-1">Pergub DKI Jakarta No.
|
|
77/2020</h3>
|
|
<p class="text-gray-600 text-base">Peraturan Gubernur Provins DKI Jakarta Nomor 77 Tahun
|
|
2020</p>
|
|
</div>
|
|
<svg id="accordion2-icon"
|
|
class="w-6 h-6 text-gray-600 transform transition-transform rotate-180" fill="none"
|
|
stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7">
|
|
</path>
|
|
</svg>
|
|
</button>
|
|
<div id="accordion2" class="hidden px-6 pb-6">
|
|
<p class="text-slate-600 text-sm leading-relaxed">
|
|
Detail informasi tambahan tentang Peraturan Gubernur DKI Jakarta Nomor 77 Tahun 2020.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Image Section -->
|
|
<div class="relative mt-10 w-full h-[400px] lg:h-[480px]">
|
|
<img class="w-full h-full object-cover rounded-2xl shadow-lg" src="/images/gubernur.png"
|
|
alt="Peraturan Gubernur" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
|
|
<!-- Location BPS RW Section -->
|
|
<section class="w-full px-4 lg:px-28 xl:px-48 py-16 lg:py-24 bg-white">
|
|
<div class="w-full mx-auto">
|
|
<!-- Header -->
|
|
<div class="mb-8">
|
|
<!-- Badge -->
|
|
<div class="inline-flex px-4 py-2 bg-primary-25 rounded-full mb-4">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-2 h-2 bg-primary-700 rounded-full"></div>
|
|
<span class="text-primary-700 text-base font-semibold font-jakarta">Lokasi</span>
|
|
</div>
|
|
</div>
|
|
<h2 class="text-gray-900 text-3xl lg:text-4xl font-bold font-jakarta">Lokasi BPS RW</h2>
|
|
</div>
|
|
|
|
<!-- Gray Wrapper Container -->
|
|
<div class="bg-gray-100 rounded-2xl p-4">
|
|
<div class="grid grid-cols-1 lg:grid-cols-4 gap-4">
|
|
<!-- Map Section -->
|
|
<div class="lg:col-span-3">
|
|
<div id="map" class="w-full h-[500px] bg-white rounded-xl overflow-hidden shadow-sm"></div>
|
|
</div>
|
|
|
|
<!-- Filter Section -->
|
|
<div class="lg:col-span-1">
|
|
<div class="bg-white p-5 rounded-xl shadow-sm h-[500px] overflow-y-auto">
|
|
<div class="flex justify-between items-center mb-5">
|
|
<h3 class="text-gray-900 text-base font-bold font-jakarta">Filter</h3>
|
|
<button onclick="clearFilters()"
|
|
class="text-red-500 text-xs font-semibold hover:underline">Clear All</button>
|
|
</div>
|
|
|
|
<!-- Jenis Lokasi Filter -->
|
|
<div class="mb-4">
|
|
<label for="jenisLokasi"
|
|
class="block text-gray-700 text-xs font-semibold font-jakarta mb-2">Jenis
|
|
Lokasi</label>
|
|
<select id="jenisLokasi"
|
|
class="w-full px-3 py-2 bg-gray-100 border border-gray-200 rounded-lg text-gray-700 text-xs focus:outline-none focus:ring-2 focus:ring-green-500">
|
|
<option value="">Pilih jenis lokasi</option>
|
|
<option value="bps">TPS</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Wilayah Filter -->
|
|
<div class="mb-4">
|
|
<label for="wilayah"
|
|
class="block text-gray-700 text-xs font-semibold font-jakarta mb-2">Wilayah</label>
|
|
<select id="wilayah"
|
|
class="w-full px-3 py-2 bg-gray-100 border border-gray-200 rounded-lg text-gray-700 text-xs focus:outline-none focus:ring-2 focus:ring-green-500">
|
|
<option value="">Pilih wilayah</option>
|
|
<option value="pusat">Jakarta Pusat</option>
|
|
<option value="utara">Jakarta Utara</option>
|
|
<option value="barat">Jakarta Barat</option>
|
|
<option value="selatan">Jakarta Selatan</option>
|
|
<option value="timur">Jakarta Timur</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Kecamatan Filter -->
|
|
<div class="mb-4">
|
|
<label for="kecamatan"
|
|
class="block text-gray-700 text-xs font-semibold font-jakarta mb-2">Kecamatan</label>
|
|
<select id="kecamatan"
|
|
class="w-full px-3 py-2 bg-gray-100 border border-gray-200 rounded-lg text-gray-700 text-xs focus:outline-none focus:ring-2 focus:ring-green-500">
|
|
<option value="">Pilih kecamatan</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Kelurahan Filter -->
|
|
<div class="mb-4">
|
|
<label for="kelurahan"
|
|
class="block text-gray-700 text-xs font-semibold font-jakarta mb-2">Kelurahan</label>
|
|
<select id="kelurahan"
|
|
class="w-full px-3 py-2 bg-gray-100 border border-gray-200 rounded-lg text-gray-700 text-xs focus:outline-none focus:ring-2 focus:ring-green-500">
|
|
<option value="">Pilih kelurahan</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- RW Filter -->
|
|
<div class="mb-5">
|
|
<label for="rw"
|
|
class="block text-gray-700 text-xs font-semibold font-jakarta mb-2">RW</label>
|
|
<select id="rw"
|
|
class="w-full px-3 py-2 bg-gray-100 border border-gray-200 rounded-lg text-gray-700 text-xs focus:outline-none focus:ring-2 focus:ring-green-500">
|
|
<option value="">Pilih RW</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Filter Button -->
|
|
<button onclick="applyFilters()"
|
|
class="w-full px-5 py-2.5 bg-primary-700 hover:bg-green-700 text-white text-center rounded-full text-sm font-semibold transition-colors">
|
|
Terapkan Filter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Scroll to Top Button -->
|
|
<button id="scrollToTop"
|
|
class="fixed bottom-8 cursor-pointer
|
|
right-8 text-lg w-12 h-12 bg-primary-700 hover:bg-primary-800 text-white rounded-full shadow-lg flex items-center justify-center transition-all duration-300 opacity-0 invisible z-50">
|
|
<i class="ph ph-arrow-up text-2xl"></i>
|
|
</button>
|
|
|
|
<!-- Contact Section -->
|
|
<section id="kontak" class="w-full px-4 lg:px-28 xl:px-48 py-16 lg:py-24 bg-gray-100">
|
|
<div class="w-full mx-auto">
|
|
<!-- Header -->
|
|
<div class="mb-10">
|
|
<!-- Badge -->
|
|
<div class="inline-flex px-4 py-2 bg-primary-25 rounded-full mb-4">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-2 h-2 bg-primary-700 rounded-full"></div>
|
|
<span class="text-primary-700 text-base font-semibold font-jakarta">Hubungi Kami</span>
|
|
</div>
|
|
</div>
|
|
<h2 class="text-gray-900 text-3xl lg:text-4xl font-bold font-jakarta">Informasi Kontak</h2>
|
|
</div>
|
|
|
|
<!-- Contact Grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<!-- Phone Card -->
|
|
<div class="bg-white p-8 rounded-2xl shadow-sm border border-gray-100">
|
|
<div class="w-[72px] h-[72px] bg-primary-700 rounded-full flex items-center justify-center mb-6">
|
|
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M18.0338 5.741C18.0677 5.61409 18.1263 5.49511 18.2063 5.39086C18.2862 5.28661 18.3859 5.19914 18.4997 5.13344C18.6134 5.06773 18.739 5.02509 18.8693 5.00794C18.9995 4.99079 19.1319 4.99948 19.2588 5.0335C21.1126 5.51718 22.804 6.4863 24.1587 7.84104C25.5135 9.19578 26.4826 10.8872 26.9663 12.741C27.0003 12.8679 27.009 13.0002 26.9918 13.1305C26.9747 13.2607 26.932 13.3863 26.8663 13.5001C26.8006 13.6138 26.7131 13.7135 26.6089 13.7935C26.5047 13.8734 26.3857 13.9321 26.2588 13.966C26.1743 13.9882 26.0873 13.9995 26 13.9997C25.7798 13.9998 25.5657 13.9272 25.391 13.7932C25.2163 13.6591 25.0907 13.4712 25.0338 13.2585C24.6395 11.7449 23.8486 10.3639 22.7428 9.2578C21.6369 8.15171 20.256 7.36059 18.7425 6.966C18.6155 6.93219 18.4964 6.87366 18.392 6.79378C18.2876 6.71389 18.2 6.61421 18.1342 6.50044C18.0683 6.38666 18.0256 6.26103 18.0084 6.13071C17.9911 6.0004 17.9998 5.86797 18.0338 5.741ZM17.7425 10.966C19.4663 11.426 20.5738 12.5347 21.0338 14.2585C21.0907 14.4712 21.2163 14.6591 21.391 14.7932C21.5657 14.9272 21.7798 14.9998 22 14.9997C22.0873 14.9995 22.1743 14.9882 22.2588 14.966C22.3857 14.9321 22.5047 14.8734 22.6089 14.7935C22.7131 14.7135 22.8006 14.6138 22.8663 14.5001C22.932 14.3863 22.9747 14.2607 22.9918 14.1305C23.009 14.0002 23.0003 13.8679 22.9663 13.741C22.3263 11.346 20.6538 9.6735 18.2588 9.0335C18.0025 8.96504 17.7295 9.00118 17.4999 9.13398C17.2703 9.26678 17.1028 9.48536 17.0344 9.74162C16.9659 9.99789 17.0021 10.2709 17.1349 10.5005C17.2677 10.7301 17.4862 10.8975 17.7425 10.966ZM26.7963 20.8072L20.9075 18.1685L20.8913 18.161C20.5856 18.0302 20.2521 17.9778 19.921 18.0083C19.5899 18.0389 19.2716 18.1515 18.995 18.336C18.9624 18.3575 18.9311 18.3809 18.9013 18.406L15.8588 20.9997C13.9313 20.0635 11.9413 18.0885 11.005 16.186L13.6025 13.0972C13.6275 13.066 13.6513 13.0347 13.6738 13.001C13.8543 12.7251 13.9638 12.4089 13.9926 12.0805C14.0214 11.752 13.9686 11.4216 13.8388 11.1185V11.1035L11.1925 5.20475C11.0209 4.80883 10.7259 4.47902 10.3515 4.26455C9.97707 4.05007 9.54333 3.96245 9.11501 4.01475C7.42122 4.23763 5.86649 5.06946 4.74118 6.35487C3.61587 7.64028 2.99695 9.29136 3.00001 10.9997C3.00001 20.9247 11.075 28.9997 21 28.9997C22.7084 29.0028 24.3595 28.3839 25.6449 27.2586C26.9303 26.1333 27.7621 24.5785 27.985 22.8847C28.0374 22.4566 27.95 22.0229 27.7357 21.6485C27.5215 21.2741 27.1919 20.979 26.7963 20.8072Z"
|
|
fill="white" />
|
|
</svg>
|
|
|
|
</div>
|
|
<h3 class="text-gray-900 text-xl lg:text-2xl font-bold font-jakarta mb-2">Phone</h3>
|
|
<p class="text-gray-500 text-base mb-4 leading-relaxed">Senin-Jumat, 08.00-16.00 WIB</p>
|
|
<a href="tel:02138657455" class="text-primary-500 text-base hover:underline">(021) 3865745</a>
|
|
</div>
|
|
|
|
<!-- Email Card -->
|
|
<div class="bg-white p-8 rounded-2xl shadow-sm border border-gray-100">
|
|
<div class="w-[72px] h-[72px] bg-primary-700 rounded-full flex items-center justify-center mb-6">
|
|
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M28 6H4C3.73478 6 3.48043 6.10536 3.29289 6.29289C3.10536 6.48043 3 6.73478 3 7V24C3 24.5304 3.21071 25.0391 3.58579 25.4142C3.96086 25.7893 4.46957 26 5 26H27C27.5304 26 28.0391 25.7893 28.4142 25.4142C28.7893 25.0391 29 24.5304 29 24V7C29 6.73478 28.8946 6.48043 28.7071 6.29289C28.5196 6.10536 28.2652 6 28 6ZM12.3387 16L5 22.7262V9.27375L12.3387 16ZM13.8188 17.3563L15.3188 18.7375C15.5032 18.9069 15.7446 19.0008 15.995 19.0008C16.2454 19.0008 16.4868 18.9069 16.6712 18.7375L18.1712 17.3563L25.4212 24H6.57125L13.8188 17.3563ZM19.6612 16L27 9.2725V22.7275L19.6612 16Z"
|
|
fill="white" />
|
|
</svg>
|
|
|
|
</div>
|
|
<h3 class="text-gray-900 text-xl lg:text-2xl font-bold font-jakarta mb-2">Email</h3>
|
|
<p class="text-gray-500 text-base mb-4 leading-relaxed">Respon dalam 1-2 hari kerja</p>
|
|
<a href="mailto:sampah@jakarta.go.id"
|
|
class="text-primary-500 text-base hover:underline break-all">sampah@jakarta.go.id</a>
|
|
</div>
|
|
|
|
<!-- Office Card -->
|
|
<div class="bg-white p-8 rounded-2xl shadow-sm border border-gray-100">
|
|
<div class="w-[72px] h-[72px] bg-primary-700 rounded-full flex items-center justify-center mb-6">
|
|
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M29.9662 26.0004H28V12.0004C28 11.47 27.7893 10.9612 27.4142 10.5862C27.0391 10.2111 26.5304 10.0004 26 10.0004H20.5C20.3674 10.0004 20.2402 10.0531 20.1464 10.1468C20.0527 10.2406 20 10.3678 20 10.5004V26.0004H18V4.05164C18.0033 3.74012 17.9357 3.43192 17.8023 3.15039C17.6689 2.86885 17.4732 2.62136 17.23 2.42664C16.8985 2.16819 16.494 2.02075 16.0739 2.00526C15.6539 1.98978 15.2396 2.10704 14.89 2.34039L4.89 9.00039C4.61567 9.18341 4.39086 9.43143 4.23558 9.72237C4.0803 10.0133 3.99937 10.3381 4 10.6679V26.0004H2.03375C1.77533 25.9966 1.52506 26.0908 1.33327 26.264C1.14148 26.4372 1.0224 26.6767 1 26.9341C0.990918 27.0709 1.01006 27.2081 1.05623 27.3372C1.1024 27.4663 1.17462 27.5845 1.2684 27.6845C1.36218 27.7845 1.47552 27.8641 1.60137 27.9185C1.72723 27.9728 1.86291 28.0007 2 28.0004H30C30.1371 28.0007 30.2728 27.9728 30.3986 27.9185C30.5245 27.8641 30.6378 27.7845 30.7316 27.6845C30.8254 27.5845 30.8976 27.4663 30.9438 27.3372C30.9899 27.2081 31.0091 27.0709 31 26.9341C30.9776 26.6767 30.8585 26.4372 30.6667 26.264C30.4749 26.0908 30.2247 25.9966 29.9662 26.0004ZM9.5 23.0004C9.5003 23.1375 9.47241 23.2732 9.41807 23.399C9.36372 23.5249 9.28408 23.6382 9.18409 23.732C9.08409 23.8258 8.96589 23.898 8.83681 23.9442C8.70773 23.9903 8.57054 24.0095 8.43375 24.0004C8.17606 23.978 7.93644 23.8587 7.76317 23.6667C7.5899 23.4746 7.49586 23.224 7.5 22.9654V21.0341C7.49648 20.7758 7.59076 20.5257 7.76394 20.334C7.93712 20.1422 8.17639 20.0231 8.43375 20.0004C8.57054 19.9913 8.70773 20.0104 8.83681 20.0566C8.96589 20.1028 9.08409 20.175 9.18409 20.2688C9.28408 20.3626 9.36372 20.4759 9.41807 20.6018C9.47241 20.7276 9.5003 20.8633 9.5 21.0004V23.0004ZM9.5 16.0004C9.5003 16.1375 9.47241 16.2732 9.41807 16.399C9.36372 16.5249 9.28408 16.6382 9.18409 16.732C9.08409 16.8258 8.96589 16.898 8.83681 16.9442C8.70773 16.9903 8.57054 17.0095 8.43375 17.0004C8.17617 16.9777 7.93672 16.8583 7.76351 16.6664C7.5903 16.4744 7.49616 16.2239 7.5 15.9654V14.0341C7.49648 13.7758 7.59076 13.5257 7.76394 13.334C7.93712 13.1422 8.17639 13.0231 8.43375 13.0004C8.57054 12.9913 8.70773 13.0104 8.83681 13.0566C8.96589 13.1028 9.08409 13.175 9.18409 13.2688C9.28408 13.3626 9.36372 13.4759 9.41807 13.6018C9.47241 13.7276 9.5003 13.8633 9.5 14.0004V16.0004ZM14.5 23.0004C14.5003 23.1375 14.4724 23.2732 14.4181 23.399C14.3637 23.5249 14.2841 23.6382 14.1841 23.732C14.0841 23.8258 13.9659 23.898 13.8368 23.9442C13.7077 23.9903 13.5705 24.0095 13.4338 24.0004C13.1765 23.978 12.9372 23.8591 12.764 23.6676C12.5908 23.4761 12.4965 23.2261 12.5 22.9679V21.0341C12.4968 20.776 12.5912 20.5262 12.7644 20.3348C12.9375 20.1433 13.1766 20.0243 13.4338 20.0016C13.5705 19.9926 13.7077 20.0117 13.8368 20.0579C13.9659 20.104 14.0841 20.1763 14.1841 20.27C14.2841 20.3638 14.3637 20.4772 14.4181 20.603C14.4724 20.7289 14.5003 20.8646 14.5 21.0016V23.0004ZM14.5 16.0004C14.5003 16.1375 14.4724 16.2732 14.4181 16.399C14.3637 16.5249 14.2841 16.6382 14.1841 16.732C14.0841 16.8258 13.9659 16.898 13.8368 16.9442C13.7077 16.9903 13.5705 17.0095 13.4338 17.0004C13.1766 16.9777 12.9375 16.8587 12.7644 16.6673C12.5912 16.4758 12.4968 16.226 12.5 15.9679V14.0341C12.4968 13.776 12.5912 13.5262 12.7644 13.3348C12.9375 13.1433 13.1766 13.0243 13.4338 13.0016C13.5705 12.9926 13.7077 13.0117 13.8368 13.0579C13.9659 13.104 14.0841 13.1763 14.1841 13.27C14.2841 13.3638 14.3637 13.4772 14.4181 13.603C14.4724 13.7289 14.5003 13.8646 14.5 14.0016V16.0004Z"
|
|
fill="white" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-gray-900 text-xl lg:text-2xl font-bold font-jakarta mb-2">Office</h3>
|
|
<p class="text-gray-500 text-base mb-4 leading-relaxed">Dinas Lingkungan Hidup DKI Jakarta</p>
|
|
<p class="text-primary-500 text-base">Jl. Mandala V No. 67, Cililitan, Jakarta Timur</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
|
|
@section Scripts {
|
|
<style>
|
|
/* Leaflet map custom styles */
|
|
#map {
|
|
z-index: 1;
|
|
}
|
|
|
|
.leaflet-popup-content-wrapper {
|
|
border-radius: 0.75rem;
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.leaflet-popup-content {
|
|
margin: 1rem;
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
}
|
|
|
|
.leaflet-popup-content b {
|
|
color: #1E602A;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.custom-popup .leaflet-popup-close-button {
|
|
color: #6B7280;
|
|
font-size: 20px;
|
|
margin: 8px 8px;
|
|
}
|
|
</style>
|
|
<script>
|
|
// Scroll to Top Button
|
|
const scrollToTopBtn = document.getElementById('scrollToTop');
|
|
|
|
window.addEventListener('scroll', function() {
|
|
if (window.pageYOffset > 300) {
|
|
scrollToTopBtn.classList.remove('opacity-0', 'invisible');
|
|
scrollToTopBtn.classList.add('opacity-100', 'visible');
|
|
} else {
|
|
scrollToTopBtn.classList.remove('opacity-100', 'visible');
|
|
scrollToTopBtn.classList.add('opacity-0', 'invisible');
|
|
}
|
|
});
|
|
|
|
scrollToTopBtn.addEventListener('click', function() {
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: 'smooth'
|
|
});
|
|
});
|
|
|
|
// Smooth scrolling for anchor links
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
anchor.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
const target = document.querySelector(this.getAttribute('href'));
|
|
if (target) {
|
|
target.scrollIntoView({
|
|
behavior: 'smooth'
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
// Animation on scroll
|
|
const observerOptions = {
|
|
threshold: 0.1,
|
|
rootMargin: '0px 0px -50px 0px'
|
|
};
|
|
|
|
const observer = new IntersectionObserver(function (entries) {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('animate-fade-in');
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
// Observe all sections
|
|
document.querySelectorAll('section').forEach(section => {
|
|
observer.observe(section);
|
|
});
|
|
|
|
// Accordion Toggle Function
|
|
function toggleAccordion(id) {
|
|
const content = document.getElementById(id);
|
|
const icon = document.getElementById(id + '-icon');
|
|
|
|
if (content.classList.contains('hidden')) {
|
|
content.classList.remove('hidden');
|
|
icon.classList.remove('rotate-180');
|
|
} else {
|
|
content.classList.add('hidden');
|
|
icon.classList.add('rotate-180');
|
|
}
|
|
}
|
|
|
|
// Leaflet Map
|
|
let map;
|
|
let markers = [];
|
|
let allLocations = [];
|
|
|
|
// Data lokasi BPS RW
|
|
const locationsData = [
|
|
{ lat: -6.1751, lng: 106.8650, name: 'TPS Menteng', wilayah: 'pusat', kecamatan: 'Menteng', kelurahan: 'Menteng', rw: '01', jenis: 'bps', alamat: 'Jl. Menteng Raya No.15 Menteng' },
|
|
{ lat: -6.1850, lng: 106.8550, name: 'TPS Gondangdia', wilayah: 'pusat', kecamatan: 'Menteng', kelurahan: 'Gondangdia', rw: '02', jenis: 'bps', alamat: 'Jl. Gondangdia Lama No.8 Gondangdia' },
|
|
{ lat: -6.2088, lng: 106.8456, name: 'TPS Petamburan', wilayah: 'pusat', kecamatan: 'Tanah Abang', kelurahan: 'Petamburan', rw: '01', jenis: 'bps', alamat: 'Jl. Petamburan IV No.22 Petamburan', telepon: '021-5734-1234' },
|
|
{ lat: -6.2150, lng: 106.8350, name: 'TPS Kebon Melati', wilayah: 'pusat', kecamatan: 'Tanah Abang', kelurahan: 'Kebon Melati', rw: '03', jenis: 'bps', alamat: 'Jl. Kebon Melati Raya No.45 Kebon Melati', telepon: '021-5734-5678' },
|
|
|
|
{ lat: -6.1215, lng: 106.7784, name: 'TPS Kelapa Gading Barat', wilayah: 'utara', kecamatan: 'Kelapa Gading', kelurahan: 'Kelapa Gading Barat', rw: '01', jenis: 'bps', alamat: 'Jl. Boulevard Barat No.10 Kelapa Gading', telepon: '021-4585-2345' },
|
|
{ lat: -6.1300, lng: 106.7850, name: 'TPS Kelapa Gading Timur', wilayah: 'utara', kecamatan: 'Kelapa Gading', kelurahan: 'Kelapa Gading Timur', rw: '05', jenis: 'bps', alamat: 'Jl. Boulevard Timur No.25 Kelapa Gading', telepon: '021-4585-6789' },
|
|
{ lat: -6.1385, lng: 106.8060, name: 'TPS Sunter Agung', wilayah: 'utara', kecamatan: 'Tanjung Priok', kelurahan: 'Sunter Agung', rw: '02', jenis: 'bps', alamat: 'Jl. Sunter Agung Raya No.18 Sunter', telepon: '021-6512-3456' },
|
|
{ lat: -6.1450, lng: 106.8150, name: 'TPS Sunter Jaya', wilayah: 'utara', kecamatan: 'Tanjung Priok', kelurahan: 'Sunter Jaya', rw: '04', jenis: 'bps', alamat: 'Jl. Sunter Jaya No.32 Sunter', telepon: '021-6512-7890' },
|
|
|
|
{ lat: -6.1744, lng: 106.7897, name: 'TPS Grogol', wilayah: 'barat', kecamatan: 'Grogol Petamburan', kelurahan: 'Grogol', rw: '03', jenis: 'bps', alamat: 'Jl. Grogol Raya No.55 Grogol', telepon: '021-5603-4567' },
|
|
{ lat: -6.1850, lng: 106.7800, name: 'TPS Tomang', wilayah: 'barat', kecamatan: 'Grogol Petamburan', kelurahan: 'Tomang', rw: '06', jenis: 'bps', alamat: 'Jl. Tomang Raya No.88 Tomang', telepon: '021-5603-8901' },
|
|
{ lat: -6.2000, lng: 106.7833, name: 'TPS Kebon Jeruk', wilayah: 'barat', kecamatan: 'Kebon Jeruk', kelurahan: 'Kebon Jeruk', rw: '02', jenis: 'bps', alamat: 'Jl. Perjuangan No.12 Kebon Jeruk', telepon: '021-5327-5678' },
|
|
{ lat: -6.2100, lng: 106.7750, name: 'TPS Sukabumi Utara', wilayah: 'barat', kecamatan: 'Kebon Jeruk', kelurahan: 'Sukabumi Utara', rw: '05', jenis: 'bps', alamat: 'Jl. Sukabumi Utara No.67 Kebon Jeruk', telepon: '021-5327-9012' },
|
|
|
|
{ lat: -6.2615, lng: 106.8106, name: 'TPS Melawai', wilayah: 'selatan', kecamatan: 'Kebayoran Baru', kelurahan: 'Melawai', rw: '01', jenis: 'bps', alamat: 'Jl. Melawai Raya No.20 Kebayoran Baru', telepon: '021-7234-6789' },
|
|
{ lat: -6.2700, lng: 106.8000, name: 'TPS Gunung', wilayah: 'selatan', kecamatan: 'Kebayoran Baru', kelurahan: 'Gunung', rw: '04', jenis: 'bps', alamat: 'Jl. Gunung Sahari No.35 Kebayoran Baru', telepon: '021-7234-0123' },
|
|
{ lat: -6.3000, lng: 106.8167, name: 'TPS Cilandak Barat', wilayah: 'selatan', kecamatan: 'Cilandak', kelurahan: 'Cilandak Barat', rw: '02', jenis: 'bps', alamat: 'Jl. Cilandak KKO No.14 Cilandak', telepon: '021-7501-7890' },
|
|
{ lat: -6.3100, lng: 106.8250, name: 'TPS Cilandak Timur', wilayah: 'selatan', kecamatan: 'Cilandak', kelurahan: 'Cilandak Timur', rw: '06', jenis: 'bps', alamat: 'Jl. Raya Cilandak No.28 Cilandak', telepon: '021-7501-1234' },
|
|
|
|
{ lat: -6.2250, lng: 106.9004, name: 'TPS Cakung Barat', wilayah: 'timur', kecamatan: 'Cakung', kelurahan: 'Cakung Barat', rw: '03', jenis: 'bps', alamat: 'Jl. Cakung Barat No.42 Cakung', telepon: '021-4603-5678' },
|
|
{ lat: -6.2350, lng: 106.9100, name: 'TPS Cakung Timur', wilayah: 'timur', kecamatan: 'Cakung', kelurahan: 'Cakung Timur', rw: '07', jenis: 'bps', alamat: 'Jl. Cakung Timur Raya No.56 Cakung', telepon: '021-4603-9012' },
|
|
{ lat: -6.2744, lng: 106.8750, name: 'TPS Pasar Rebo', wilayah: 'timur', kecamatan: 'Pasar Rebo', kelurahan: 'Pasar Rebo', rw: '01', jenis: 'bps', alamat: 'Jl. Raya Bogor No.78 Pasar Rebo', telepon: '021-8403-3456' },
|
|
{ lat: -6.2850, lng: 106.8850, name: 'TPS Cijantung', wilayah: 'timur', kecamatan: 'Pasar Rebo', kelurahan: 'Cijantung', rw: '05', jenis: 'bps', alamat: 'Jl. Cijantung Raya No.91 Pasar Rebo', telepon: '021-8403-7890' }
|
|
];
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
allLocations = locationsData;
|
|
|
|
// Init map on Jakarta
|
|
map = L.map('map').setView([-6.2088, 106.8456], 11);
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
|
maxZoom: 19
|
|
}).addTo(map);
|
|
|
|
// Marker icon
|
|
const trashIcon = L.divIcon({
|
|
className: 'custom-trash-marker',
|
|
html: `
|
|
<div class="w-8 h-8 bg-[#247332] rounded-full flex items-center justify-center">
|
|
<svg width="9" height="11" viewBox="0 0 9 11" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M0.666667 10.6667C0.666667 11.4 1.26667 12 2 12H7.33333C8.06667 12 8.66667 11.4 8.66667 10.6667V2.66667H0.666667V10.6667ZM9.33333 0.666667H7L6.33333 0H3L2.33333 0.666667H0V2H9.33333V0.666667Z" fill="white"/>
|
|
</svg>
|
|
</div>
|
|
`,
|
|
iconSize: [32, 32],
|
|
iconAnchor: [16, 32],
|
|
popupAnchor: [0, -32]
|
|
});
|
|
|
|
// All markers to map
|
|
allLocations.forEach(location => {
|
|
const popupContent = `
|
|
<div class="w-[200px]">
|
|
<div class="text-[14px] font-bold text-gray-800 mb-4">
|
|
${location.name}
|
|
</div>
|
|
<div class="mb-2">
|
|
<div class="text-[14px] font-semibold text-gray-700 mb-1">
|
|
Alamat
|
|
</div>
|
|
<div class="text-[12px] text-gray-500 leading-[1.5]">
|
|
${location.alamat}
|
|
</div>
|
|
</div>
|
|
<div class="mb-2">
|
|
<div class="text-[14px] font-semibold text-gray-700 mb-1">
|
|
Nomor Telepon
|
|
</div>
|
|
<div class="text-[12px] text-gray-500 leading-[1.5]">
|
|
${location.telepon}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
const marker = L.marker([location.lat, location.lng], { icon: trashIcon })
|
|
.addTo(map)
|
|
.bindPopup(popupContent, {
|
|
className: 'custom-popup'
|
|
});
|
|
markers.push({ marker: marker, data: location });
|
|
});
|
|
|
|
populateKecamatan();
|
|
|
|
document.getElementById('wilayah').addEventListener('change', function () {
|
|
populateKecamatan();
|
|
populateKelurahan();
|
|
populateRW();
|
|
});
|
|
|
|
document.getElementById('kecamatan').addEventListener('change', function () {
|
|
populateKelurahan();
|
|
populateRW();
|
|
});
|
|
|
|
document.getElementById('kelurahan').addEventListener('change', function () {
|
|
populateRW();
|
|
});
|
|
});
|
|
|
|
function populateKecamatan() {
|
|
const wilayah = document.getElementById('wilayah').value;
|
|
const kecamatanSelect = document.getElementById('kecamatan');
|
|
kecamatanSelect.innerHTML = '<option value="">Pilih kecamatan</option>';
|
|
|
|
if (!wilayah) return;
|
|
|
|
const kecamatans = [...new Set(allLocations
|
|
.filter(loc => loc.wilayah === wilayah)
|
|
.map(loc => loc.kecamatan))];
|
|
|
|
kecamatans.forEach(kec => {
|
|
const option = document.createElement('option');
|
|
option.value = kec;
|
|
option.textContent = kec;
|
|
kecamatanSelect.appendChild(option);
|
|
});
|
|
}
|
|
|
|
function populateKelurahan() {
|
|
const wilayah = document.getElementById('wilayah').value;
|
|
const kecamatan = document.getElementById('kecamatan').value;
|
|
const kelurahanSelect = document.getElementById('kelurahan');
|
|
kelurahanSelect.innerHTML = '<option value="">Pilih kelurahan</option>';
|
|
|
|
if (!kecamatan) return;
|
|
|
|
const kelurahans = [...new Set(allLocations
|
|
.filter(loc => loc.wilayah === wilayah && loc.kecamatan === kecamatan)
|
|
.map(loc => loc.kelurahan))];
|
|
|
|
kelurahans.forEach(kel => {
|
|
const option = document.createElement('option');
|
|
option.value = kel;
|
|
option.textContent = kel;
|
|
kelurahanSelect.appendChild(option);
|
|
});
|
|
}
|
|
|
|
function populateRW() {
|
|
const wilayah = document.getElementById('wilayah').value;
|
|
const kecamatan = document.getElementById('kecamatan').value;
|
|
const kelurahan = document.getElementById('kelurahan').value;
|
|
const rwSelect = document.getElementById('rw');
|
|
rwSelect.innerHTML = '<option value="">Pilih RW</option>';
|
|
|
|
if (!kelurahan) return;
|
|
|
|
const rws = [...new Set(allLocations
|
|
.filter(loc => loc.wilayah === wilayah && loc.kecamatan === kecamatan && loc.kelurahan === kelurahan)
|
|
.map(loc => loc.rw))];
|
|
|
|
rws.forEach(rw => {
|
|
const option = document.createElement('option');
|
|
option.value = rw;
|
|
option.textContent = 'RW ' + rw;
|
|
rwSelect.appendChild(option);
|
|
});
|
|
}
|
|
|
|
// Filter functions
|
|
function applyFilters() {
|
|
const jenisLokasi = document.getElementById('jenisLokasi').value;
|
|
const wilayah = document.getElementById('wilayah').value;
|
|
const kecamatan = document.getElementById('kecamatan').value;
|
|
const kelurahan = document.getElementById('kelurahan').value;
|
|
const rw = document.getElementById('rw').value;
|
|
|
|
let visibleCount = 0;
|
|
let bounds = [];
|
|
|
|
// markers based on filters
|
|
markers.forEach(item => {
|
|
let show = true;
|
|
|
|
if (jenisLokasi && item.data.jenis !== jenisLokasi) {
|
|
show = false;
|
|
}
|
|
if (wilayah && item.data.wilayah !== wilayah) {
|
|
show = false;
|
|
}
|
|
if (kecamatan && item.data.kecamatan !== kecamatan) {
|
|
show = false;
|
|
}
|
|
if (kelurahan && item.data.kelurahan !== kelurahan) {
|
|
show = false;
|
|
}
|
|
if (rw && item.data.rw !== rw) {
|
|
show = false;
|
|
}
|
|
|
|
if (show) {
|
|
item.marker.addTo(map);
|
|
bounds.push([item.data.lat, item.data.lng]);
|
|
visibleCount++;
|
|
} else {
|
|
map.removeLayer(item.marker);
|
|
}
|
|
});
|
|
|
|
// Adjust map view to show all visible markers
|
|
if (bounds.length > 0) {
|
|
map.fitBounds(bounds, { padding: [50, 50] });
|
|
}
|
|
}
|
|
|
|
function clearFilters() {
|
|
document.getElementById('jenisLokasi').value = '';
|
|
document.getElementById('wilayah').value = '';
|
|
document.getElementById('kecamatan').value = '';
|
|
document.getElementById('kelurahan').value = '';
|
|
document.getElementById('rw').value = '';
|
|
|
|
// Reset dropdowns
|
|
document.getElementById('kecamatan').innerHTML = '<option value="">Pilih kecamatan</option>';
|
|
document.getElementById('kelurahan').innerHTML = '<option value="">Pilih kelurahan</option>';
|
|
document.getElementById('rw').innerHTML = '<option value="">Pilih RW</option>';
|
|
|
|
// Show all markers and reset map view
|
|
markers.forEach(item => {
|
|
item.marker.addTo(map);
|
|
});
|
|
|
|
map.setView([-6.2088, 106.8456], 11);
|
|
}
|
|
</script>
|
|
} |