ilham
/
dikplhd
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

main
Ilham Wara Nugroho 2026-02-20 11:11:51 +07:00
parent 3730d39ce1
commit 6eb63aeeb6
2 changed files with 64 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
resources/views/index.blade.php
View File

@ -31,7 +31,7 @@
<div id="data-panel" class="relative">
<div class="bg-white p-6 rounded-3xl shadow-2xl border border-slate-100 relative z-10">
<div class="flex justify-between items-center mb-6">
<h3 class="font-bold text-slate-800">Capaian Indikator Utama</h3>
<h3 class="font-bold text-slate-800">Statistik</h3>
<i data-lucide="activity" class="text-blue-600 w-5 h-5"></i>
</div>
<div class="space-y-6">
@ -68,7 +68,7 @@
<i data-lucide="grid"></i>
</div>
<div>
<p class="text-xs text-slate-500 font-medium">Indikator Utama</p>
<p class="text-xs text-slate-500 font-medium">Tabel Utama</p>
<p class="font-bold text-xl">{{ $count['resource'] }}</p>
</div>
</div>
@ -86,39 +86,55 @@
<!-- DPSIR Framework -->
<section class="py-20 bg-blue-900 text-white overflow-hidden relative">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h3 class="text-3xl font-bold mb-4">Kerangka Kerja DPSIR</h3>
<p class="text-blue-200 max-w-2xl mx-auto mb-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h3 class="text-center text-3xl font-bold mb-4">8 Matra DPSIR</h3>
<p class="text-center text-blue-200 max-w-2xl mx-auto mb-16">
Analisis hubungan kausalitas antara aktivitas manusia dan perubahan lingkungan untuk merumuskan respon kebijakan yang tepat.
</p>
<div class="grid grid-cols-2 md:grid-cols-5 gap-4">
<div class="group bg-white/10 backdrop-blur-md border border-white/10 p-6 rounded-2xl h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105">
<div class="text-4xl font-black mb-4 text-blue-400">D</div>
<h4 class="font-bold mb-2 text-lg">Driving Force</h4>
<p class="text-sm opacity-70">Pertumbuhan penduduk & aktivitas ekonomi kota.</p>
<div class="flex gap-4">
<div class="w-1/2">
<div class="flex flex-col gap-2">
<div data-d="Eksploitasi sumber daya alam" data-p="Fragmentasi habitat" data-s="Penurunan populasi tumbuhan endemik" data-i="Gangguan penyerbukan pertanian" data-r="Penetapan area ekploitasi terbatas" class="dpsir hover:cursor-pointer bg-white/10 backdrop-blur-md border border-white/10 p-2 rounded-2xl h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105 flex justify-between items-center"><span>1. Keanekaragaman Hayati</span> <i data-lucide="arrow-right" class="text-white-600 w-5 h-5"></i></div>
<div data-d="Pengembangan industri sebagai mesin pertumbuhan ekonomi" data-p="Pembuangan air limbah (BOD, COD, TSS)" data-s="Penurunan kualitas air permukaan" data-i="Ketersediaan air bersih semakin berkurang" data-r="Instalasi pengolahan air limbah" class="dpsir hover:cursor-pointer bg-white/10 backdrop-blur-md border border-white/10 p-2 rounded-2xl h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105 flex justify-between items-center"><span>2. Kualitas Air</span> <i data-lucide="arrow-right" class="text-white-600 w-5 h-5"></i></div>
<div data-d="Urbanisasi pesisir" data-p="Pembuangan Limbah domestik ke laut" data-s="Degradasi terumbu karang" data-i="Penurunan hasil tangkapan ikan" data-r="Pengelolaan wilayah pesisir terpadu" class="dpsir hover:cursor-pointer bg-white/10 backdrop-blur-md border border-white/10 p-2 rounded-2xl h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105 flex justify-between items-center"><span>3. Laut, Pesisir dan Pantai</span> <i data-lucide="arrow-right" class="text-white-600 w-5 h-5"></i></div>
<div data-d="Peningkatan aktivitas transportasi" data-p="Emisi gas buang (CO2, NOx, SO2, PM2.5)" data-s="Konsentrasi polutan PM2.5" data-i="Gangguan kesehatan (ISPA)" data-r="Transportasi ramah lingkungan, penghijauan kota" class="dpsir hover:cursor-pointer bg-white/10 backdrop-blur-md border border-white/10 p-2 rounded-2xl h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105 flex justify-between items-center"><span>4. Kualitas Udara</span> <i data-lucide="arrow-right" class="text-white-600 w-5 h-5"></i></div>
<div data-d="Perluasan pemukiman" data-p="Alih fungsi lahan" data-s="Penurunan tutupan hutan" data-i="Erosi" data-r="Pengaturan Koefisien Dasar Bangunan < 50%" class="dpsir hover:cursor-pointer bg-white/10 backdrop-blur-md border border-white/10 p-2 rounded-2xl h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105 flex justify-between items-center"><span>5. Lahan dan Hutan</span> <i data-lucide="arrow-right" class="text-white-600 w-5 h-5"></i></div>
<div data-d="Peningkatan konsumsi" data-p="Produksi sampah berlebih" data-s="Timbunan sampah di TPA" data-i="Emisi metana" data-r="Ekonomi Sirkular" class="dpsir hover:cursor-pointer bg-white/10 backdrop-blur-md border border-white/10 p-2 rounded-2xl h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105 flex justify-between items-center"><span>6. Pengelolaan Sampah dan Limbah</span> <i data-lucide="arrow-right" class="text-white-600 w-5 h-5"></i></div>
<div data-d="Pertumbuhan ekonomi berbasis fosil" data-p="Emisi dari sektor energi & transportasi" data-s="Perubahan pola curah hujan (musim tak menentu)" data-i="Bencana hidrometeorologi meningkat (banjir, kekeringan)" data-r="Insentif ekonomi hijau" class="dpsir hover:cursor-pointer bg-white/10 backdrop-blur-md border border-white/10 p-2 rounded-2xl h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105 flex justify-between items-center"><span>7. Perubahan Iklim</span> <i data-lucide="arrow-right" class="text-white-600 w-5 h-5"></i></div>
<div data-d="Pembangunan tidak berkelanjutan" data-p="Pemukiman di daerah rawan" data-s="Kerentanan wilayah meningkat terhadap bencana" data-i="Kerugian ekonomi" data-r="Tata ruang berbasis risiko" class="dpsir hover:cursor-pointer bg-white/10 backdrop-blur-md border border-white/10 p-2 rounded-2xl h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105 flex justify-between items-center"><span>8. Risiko Bencana</span> <i data-lucide="arrow-right" class="text-white-600 w-5 h-5"></i></div>
</div>
</div>
<div class="group bg-white/10 backdrop-blur-md border border-white/10 p-6 rounded-2xl h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105">
<div class="text-4xl font-black mb-4 text-blue-400">P</div>
<h4 class="font-bold mb-2 text-lg">Pressure</h4>
<p class="text-sm opacity-70">Emisi kendaraan, limbah industri & konsumsi air.</p>
</div>
<div class="group bg-white/10 backdrop-blur-md border border-white/10 p-6 rounded-2xl h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105">
<div class="text-4xl font-black mb-4 text-blue-400">S</div>
<h4 class="font-bold mb-2 text-lg">State</h4>
<p class="text-sm opacity-70">Kondisi riil kualitas udara, air & tutupan lahan.</p>
</div>
<div class="group bg-white/10 backdrop-blur-md border border-white/10 p-6 rounded-2xl h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105">
<div class="text-4xl font-black mb-4 text-blue-400">I</div>
<h4 class="font-bold mb-2 text-lg">Impact</h4>
<p class="text-sm opacity-70">Dampak pada kesehatan warga & ekosistem perkotaan.</p>
</div>
<div class="group bg-white/10 backdrop-blur-md border border-white/10 p-6 rounded-2xl h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105">
<div class="text-4xl font-black mb-4 text-blue-400">R</div>
<h4 class="font-bold mb-2 text-lg">Response</h4>
<p class="text-sm opacity-70">Kebijakan pemerintah, inovasi & peran masyarakat.</p>
<div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-2">
<div class="group bg-white/10 backdrop-blur-md border border-white/10 p-6 rounded-2xl h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105">
<div class="text-4xl font-black mb-4 text-blue-400">D</div>
<h4 class="font-bold mb-2 text-lg">Driving Force</h4>
<p class="text-sm opacity-70 d">Eksploitasi sumber daya alam.</p>
</div>
<div class="group bg-white/10 backdrop-blur-md border border-white/10 p-6 rounded-2xl h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105">
<div class="text-4xl font-black mb-4 text-blue-400">P</div>
<h4 class="font-bold mb-2 text-lg">Pressure</h4>
<p class="text-sm opacity-70 p">Fragmentasi habitat.</p>
</div>
<div class="group bg-white/10 backdrop-blur-md border border-white/10 p-6 rounded-2xl h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105">
<div class="text-4xl font-black mb-4 text-blue-400">S</div>
<h4 class="font-bold mb-2 text-lg">State</h4>
<p class="text-sm opacity-70 s">Penurunan populasi tumbuhan endemik.</p>
</div>
<div class="group bg-white/10 backdrop-blur-md border border-white/10 p-6 rounded-2xl h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105">
<div class="text-4xl font-black mb-4 text-blue-400">I</div>
<h4 class="font-bold mb-2 text-lg">Impact</h4>
<p class="text-sm opacity-70 i">Gangguan penyerbukan pertanian.</p>
</div>
<div class="group bg-white/10 backdrop-blur-md border border-white/10 p-6 rounded-2xl h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105">
<div class="text-4xl font-black mb-4 text-blue-400">R</div>
<h4 class="font-bold mb-2 text-lg">Response</h4>
<p class="text-sm opacity-70 r">Penetapan area ekploitasi terbatas.</p>
</div>
</div>
</div>
</div>
</div>
</section>
@ -158,4 +174,21 @@
</div>
</div>
</section>
@endsection
@section('js')
<script>
$('.dpsir').on('click',function(){
var d = $(this).attr('data-d');
var p = $(this).attr('data-p');
var s = $(this).attr('data-s');
var i = $(this).attr('data-i');
var r = $(this).attr('data-r');
$('.d').html(d);
$('.p').html(p);
$('.s').html(s);
$('.i').html(i);
$('.r').html(r);
});
</script>
@endsection

1
resources/views/layouts/appNew.blade.php
View File

@ -186,5 +186,6 @@
}
});
</script>
@yield('js')
</body>
</html>