261 lines
21 KiB
PHP
261 lines
21 KiB
PHP
@extends('layouts.appNew')
|
||
@section('content')
|
||
<!-- Hero Section -->
|
||
<header class="relative pt-32 pb-20 overflow-hidden">
|
||
<div class="absolute top-0 right-0 -z-10 w-1/2 h-full bg-gradient-to-l from-blue-50 to-transparent rounded-bl-full opacity-50"></div>
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="grid md:grid-cols-2 gap-12 items-center">
|
||
<div>
|
||
<span class="inline-block bg-blue-100 text-blue-700 px-3 py-1 rounded-full text-xs font-bold mb-4">
|
||
Portal Status Lingkungan Hidup Daerah
|
||
</span>
|
||
<h2 class="text-5xl font-extrabold text-slate-900 leading-tight mb-6">
|
||
Wujudkan Jakarta <span class="text-blue-600 underline decoration-blue-200 underline-offset-8">Berkelanjutan</span> Melalui Transparansi Data
|
||
</h2>
|
||
<p class="text-lg text-slate-600 mb-8 max-w-lg">
|
||
Sistem informasi terintegrasi untuk pemantauan kinerja pengelolaan lingkungan hidup Provinsi DKI Jakarta berbasis kerangka kerja DPSIR.
|
||
</p>
|
||
<div class="flex flex-wrap gap-4">
|
||
<a href="{{ url('dataset') }}" class="flex items-center space-x-2 bg-blue-600 text-white px-8 py-4 rounded-xl font-bold hover:bg-blue-700 transition-all transform hover:-translate-y-1 shadow-xl">
|
||
<span>Cari Data Spesifik</span>
|
||
<i data-lucide="search" class="w-5 h-5"></i>
|
||
</a>
|
||
{{-- <button class="flex items-center space-x-2 bg-white border border-slate-200 text-slate-700 px-8 py-4 rounded-xl font-bold hover:bg-slate-50 transition-all">
|
||
<i data-lucide="search" class="w-5 h-5"></i>
|
||
<span>Cari Data Spesifik</span>
|
||
</button> --}}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Live Data Panel -->
|
||
<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">Statistik</h3>
|
||
<i data-lucide="activity" class="text-blue-600 w-5 h-5"></i>
|
||
</div>
|
||
<div class="space-y-6">
|
||
<!-- Stat Item 1 -->
|
||
<div class="flex items-center justify-between p-4 bg-slate-50 rounded-2xl border border-slate-100 hidden">
|
||
<div class="flex items-center space-x-4">
|
||
<div class="p-3 bg-white rounded-xl shadow-sm text-blue-500">
|
||
<i data-lucide="database"></i>
|
||
</div>
|
||
<div>
|
||
<p class="text-xs text-slate-500 font-medium">Jumlah Dataset Indikator</p>
|
||
<p class="font-bold text-xl">{{ $count['dataset'] }} <span class="text-xs font-normal text-slate-400">Dataset</span></p>
|
||
</div>
|
||
</div>
|
||
{{-- <span class="text-[10px] font-bold px-2 py-1 rounded-md bg-yellow-100 text-yellow-700">Sedang</span> --}}
|
||
</div>
|
||
<!-- Stat Item 2 -->
|
||
<div class="flex items-center justify-between p-4 bg-slate-50 rounded-2xl border border-slate-100">
|
||
<div class="flex items-center space-x-4">
|
||
<div class="p-3 bg-white rounded-xl shadow-sm text-orange-500">
|
||
<i data-lucide="users-2"></i>
|
||
</div>
|
||
<div>
|
||
<p class="text-xs text-slate-500 font-medium">Organisasi/Instansi</p>
|
||
<p class="font-bold text-xl">{{ $count['instansi'] }}</p>
|
||
</div>
|
||
</div>
|
||
{{-- <span class="text-[10px] font-bold px-2 py-1 rounded-md bg-green-100 text-green-700">Terkelola</span> --}}
|
||
</div>
|
||
<!-- Stat Item 3 -->
|
||
<div class="flex items-center justify-between p-4 bg-slate-50 rounded-2xl border border-slate-100">
|
||
<div class="flex items-center space-x-4">
|
||
<div class="p-3 bg-white rounded-xl shadow-sm text-cyan-500">
|
||
<i data-lucide="grid"></i>
|
||
</div>
|
||
<div>
|
||
<p class="text-xs text-slate-500 font-medium">Dataset Utama</p>
|
||
<p class="font-bold text-xl">{{ $count['resource'] }}</p>
|
||
</div>
|
||
</div>
|
||
{{-- <span class="text-[10px] font-bold px-2 py-1 rounded-md bg-blue-100 text-blue-700">Cukup</span> --}}
|
||
</div>
|
||
<div class="flex items-center justify-between p-4 bg-slate-50 rounded-2xl border border-slate-100">
|
||
<div class="flex items-center space-x-4">
|
||
<div class="p-3 bg-white rounded-xl shadow-sm text-cyan-500">
|
||
<i data-lucide="grid"></i>
|
||
</div>
|
||
<div>
|
||
<p class="text-xs text-slate-500 font-medium">Dataset Tambahan</p>
|
||
<p class="font-bold text-xl">{{ $count['dataset_tambahan'] }}</p>
|
||
</div>
|
||
</div>
|
||
{{-- <span class="text-[10px] font-bold px-2 py-1 rounded-md bg-blue-100 text-blue-700">Cukup</span> --}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Decorative Blobs -->
|
||
<div class="absolute -bottom-6 -right-6 w-32 h-32 bg-green-200 rounded-full blur-3xl opacity-40 -z-10"></div>
|
||
<div class="absolute -top-10 -left-10 w-48 h-48 bg-blue-200 rounded-full blur-3xl opacity-40 -z-10"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- 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">
|
||
<h3 class="text-center text-3xl font-bold mb-4">Hasil Analisis DPSIR untuk 8 Matra Lingkungan</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="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 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 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 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 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 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 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 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 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>
|
||
<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>
|
||
|
||
<!-- Publication Section -->
|
||
<section id="publikasi" class="py-20">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="flex flex-col md:flex-row justify-between items-end mb-12 gap-6">
|
||
<div class="max-w-xl">
|
||
<h3 class="text-3xl font-bold text-slate-900 mb-4 tracking-tight">Dataset Utama Terbaru</h3>
|
||
<p class="text-slate-600">Akses seluruh arsip Dataset Kinerja Pengelolaan Lingkungan Hidup Daerah dari tahun ke tahun</p>
|
||
</div>
|
||
{{-- <div class="flex space-x-2">
|
||
<button class="year-filter px-4 py-2 text-sm font-semibold bg-blue-600 text-white rounded-lg" data-year="all">Semua Tahun</button>
|
||
<button class="year-filter px-4 py-2 text-sm font-semibold text-slate-600 hover:bg-slate-100 rounded-lg" data-year="2024">2024</button>
|
||
<button class="year-filter px-4 py-2 text-sm font-semibold text-slate-600 hover:bg-slate-100 rounded-lg" data-year="2023">2023</button>
|
||
</div> --}}
|
||
</div>
|
||
|
||
<div class="grid md:grid-cols-3 gap-6">
|
||
<!-- Report Card 1 -->
|
||
@foreach($dataset as $dataSet)
|
||
<div class="report-card bg-white rounded-2xl p-6 border border-slate-200 hover:border-blue-400 hover:shadow-xl transition-all group" data-year="2024">
|
||
<div class="flex justify-between items-start mb-6">
|
||
<div class="bg-blue-50 text-blue-700 px-3 py-1 rounded-md text-sm font-bold">{{ $dataSet->tahun_data }}</div>
|
||
<i data-lucide="file-text" class="text-slate-300 group-hover:text-blue-500 transition-colors"></i>
|
||
</div>
|
||
<h4 class="font-bold text-slate-800 mb-2 leading-tight h-12">{{ $dataSet->name }}</h4>
|
||
<div class="flex items-center text-xs text-slate-400 mb-6 space-x-4">
|
||
<span class="flex items-center"><i data-lucide="info" class="w-3 h-3 mr-1"></i> {{ $dataSet->instansi->name }}</span>
|
||
</div>
|
||
<a href="{{ url('dataset/detail/'.encode_id($dataSet->DatasetId)) }}" class="w-full flex items-center justify-center space-x-2 bg-slate-50 text-slate-700 py-3 rounded-xl font-bold group-hover:bg-blue-600 group-hover:text-white transition-all">
|
||
<i data-lucide="eye" class="w-5 h-5"></i>
|
||
<span>Lihat Detail</span>
|
||
</a>
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="py-20 bg-blue-900">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="bg-white/10 backdrop-blur-md rounded-[40px] p-8 md:p-16 flex flex-col md:flex-row items-center justify-between border border-white/20 gap-12">
|
||
<div class="max-w-xl text-center md:text-left">
|
||
<h3 class="text-3xl md:text-4xl font-extrabold text-white mb-6 leading-tight">Helpdesk</h3>
|
||
<p class="text-emerald-100 text-lg mb-8">Butuh bantuan teknis atau konsultasi mengenai pengisian SLHD? Tim helpdesk kami siap membantu Anda.</p>
|
||
|
||
</div>
|
||
<div class="bg-white p-10 rounded-3xl shadow-2xl w-full max-w-sm">
|
||
<div class="flex flex-col gap-6">
|
||
<div class="flex items-center gap-4">
|
||
<div class="w-12 h-12 rounded-full bg-blue-600 flex items-center justify-center text-white">
|
||
<i data-lucide="phone" class="w-5 h-5"></i>
|
||
</div>
|
||
<div>
|
||
<p class="text-[10px] font-bold text-blue-600 uppercase tracking-widest">Phone</p>
|
||
<p class="text-lg font-bold">
|
||
<a target="_blank" href="https://api.whatsapp.com/send/?phone=6285212436339">
|
||
0852-1243-6339
|
||
</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center gap-4">
|
||
<div class="w-12 h-12 rounded-full bg-blue-600 flex items-center justify-center text-white">
|
||
<i data-lucide="mail" class="w-5 h-5"></i>
|
||
</div>
|
||
<div>
|
||
<p class="text-[10px] font-bold text-blue-600 uppercase tracking-widest">Email Resmi</p>
|
||
<a target="_blank" href="mailto:dinaslh@jakarta.go.id" class="">
|
||
<p class="text-lg font-bold">dinaslh@jakarta.go.id</p>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-center gap-4">
|
||
<a class="bg-blue-600 text-white rounded-xl p-4 w-full text-center flex items-center justify-center gap-4 hover:bg-blue-700 transition-all transform hover:-translate-y-1 shadow-xl" download="" href="{{ asset('assets/manualbook.pdf') }}">
|
||
Download Manual Book
|
||
<i data-lucide="download" class="w-5 h-5"></i>
|
||
</a>
|
||
{{-- <div class="w-12 h-12 rounded-full bg-blue-600 flex items-center justify-center text-white">
|
||
<i data-lucide="mail" class="w-5 h-5"></i>
|
||
</div>
|
||
<div>
|
||
<p class="text-[10px] font-bold text-blue-600 uppercase tracking-widest">Email Resmi</p>
|
||
<a target="_blank" href="mailto:dinaslh@jakarta.go.id" class="">
|
||
<p class="text-lg font-bold">dinaslh@jakarta.go.id</p>
|
||
</a>
|
||
</div> --}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</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 |