265 lines
20 KiB
Plaintext
265 lines
20 KiB
Plaintext
@{
|
||
Layout = "_Layout";
|
||
|
||
ViewData["Title"] = "PPID - Dinas Lingkungan Hidup DKI Jakarta";
|
||
ViewData["Description"] = "Pejabat Pengelola Informasi dan Dokumentasi";
|
||
ViewData["Keywords"] = "PPID, Pejabat Pengelola Informasi dan Dokumentasi, Keterbukaan Informasi Publik, Dokumen Publik, Informasi Lingkungan Hidup, Dinas Lingkungan Hidup DKI Jakarta";
|
||
ViewData["OgTitle"] = "PPID - Pejabat Pengelola Informasi dan Dokumentasi | Dinas Lingkungan Hidup DKI Jakarta";
|
||
ViewData["OgDescription"] = "Layanan PPID untuk pengelolaan informasi dan dokumentasi publik bidang lingkungan hidup. Akses informasi transparansi, dokumen kebijakan, dan data lingkungan DKI Jakarta.";
|
||
ViewData["TwitterTitle"] = "PPID - Pejabat Pengelola Informasi dan Dokumentasi | Dinas Lingkungan Hidup DKI Jakarta";
|
||
ViewData["TwitterDescription"] = "Layanan PPID untuk pengelolaan informasi dan dokumentasi publik bidang lingkungan hidup. Akses informasi transparansi, dokumen kebijakan, dan data lingkungan DKI Jakarta.";
|
||
|
||
// Breadcumb
|
||
ViewData["BreadcrumbText"] = "PPID";
|
||
ViewData["TitleBeforeHighlight"] = "Pejabat Pengelola";
|
||
ViewData["TitleHighlight"] = "Informasi dan Dokumentasi";
|
||
}
|
||
|
||
<!-- Breadcumb -->
|
||
<partial name="~/Views/Shared/Partials/_Breadcumb.cshtml" />
|
||
|
||
<div class="bg-white">
|
||
<section class="container mx-auto px-6 lg:px-12 py-16">
|
||
<div class="max-w-6xl mx-auto space-y-12">
|
||
<!-- Hero Section -->
|
||
<div class="text-center py-8">
|
||
<h2 class="text-3xl font-bold text-gray-800 mb-4">PPID</h2>
|
||
<p class="text-gray-600 max-w-2xl mx-auto leading-relaxed">
|
||
Layanan PPID untuk pengelolaan informasi dan dokumentasi publik bidang lingkungan hidup. Akses informasi transparansi, dokumen kebijakan, dan data lingkungan DKI Jakarta.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Accordion Container -->
|
||
<div class="bg-white rounded-3xl shadow-2xl p-8 lg:p-12 border border-gray-100 space-y-4">
|
||
|
||
<!-- Profil PPID -->
|
||
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
||
<button class="w-full px-6 py-4 text-left bg-gradient-to-r from-green-50 to-red-50 hover:from-green-100 hover:to-cyan-100 transition-colors duration-200 flex items-center justify-between"
|
||
onclick="toggleAccordion('profilPPID')">
|
||
<div class="flex items-center space-x-3">
|
||
<i class="text-orange-600" data-lucide="building"></i>
|
||
<h3 class="text-lg font-semibold text-gray-800">Profil PPID</h3>
|
||
</div>
|
||
<i class="text-orange-600 transition-transform duration-200" data-lucide="chevron-down" id="profilPPID-icon"></i>
|
||
</button>
|
||
<div id="profilPPID" class="hidden px-6 py-4 bg-white">
|
||
<p class="text-gray-700 leading-relaxed text-md mb-6">Undang-Undang Nomor 14 Tahun 2008 tentang Keterbukaan Informasi Publik (KIP) merupakan pedoman hukum bagi publik untuk mendapatkan hak atas informasi. Undang-Undang KIP tersebut juga menjelaskan kewajiban Badan Publik dalam menyediakan dan melayani permohonan informasi publik secara cepat dan tepat waktu.</p>
|
||
|
||
<p class="text-gray-700 leading-relaxed text-md mb-6">Selanjutnya dalam Peraturan Pemerintah Republik Indonesia Nomor 61 Tahun 2010 tentang Pelaksanaan UU KIP pada pasal 1 juga mengamanatkan bahwa Badan Publik harus menetapkan Pejabat Pengelola Informasi dan Dokumentasi (PPID) yang bertanggung jawab dalam bidang penyimpanan, pendokumentasian, penyediaan, dan/atau pelayanan informasi di Badan Publik.</p>
|
||
|
||
<p class="text-gray-700 leading-relaxed text-md">Keterbukaan informasi publik pada Badan Pengelolaan Keuangan Daerah Provinsi DKI Jakarta merupakan langkah yang digunakan untuk mewujudkan tata kelola pemerintahan yang baik. Oleh karena itu Undang-undang 14 Tahun 2008 tentang Keterbukaan Informasi Publik sangat perlu di implementasikan. Sehingga menjadi dasar pengelolaan dan pelayanan informasi publik oleh Pejabat Pengelola Informasi dan Dokumentasi (PPID) di lingkungan Provinsi DKI Jakarta.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Visi dan Misi PPID -->
|
||
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
||
<button class="w-full px-6 py-4 text-left bg-gradient-to-r from-green-50 to-red-50 hover:from-green-100 hover:to-cyan-100 transition-colors duration-200 flex items-center justify-between"
|
||
onclick="toggleAccordion('visiMisi')">
|
||
<div class="flex items-center space-x-3">
|
||
<i class="text-orange-600" data-lucide="target"></i>
|
||
<h3 class="text-lg font-semibold text-gray-800">VISI dan MISI PPID</h3>
|
||
</div>
|
||
<i class="text-orange-600 transition-transform duration-200" data-lucide="chevron-down" id="visiMisi-icon"></i>
|
||
</button>
|
||
<div id="visiMisi" class="hidden px-6 py-4 bg-white">
|
||
<div class="mb-6">
|
||
<h5 class="text-lg font-semibold text-orange-600 mb-3">VISI:</h5>
|
||
<p class="font-semibold text-gray-800">Jakarta kota maju, lestari dan berbudaya yang warganya terlibat dalam mewujudkan keberadaban, keadilan dan kesejahteraan bagi semua.</p>
|
||
</div>
|
||
|
||
<div>
|
||
<h5 class="text-lg font-semibold text-orange-600 mb-3">MISI:</h5>
|
||
<div class="grid gap-3">
|
||
<div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
|
||
<div class="flex items-start space-x-3">
|
||
<span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">1</span>
|
||
<p class="text-gray-700 text-sm">Menjadikan Jakarta kota yang aman, sehat, cerdas, berbudaya dengan memperkuat nilai-nilai keluarga dan memberikan ruang kreativitas melalui kepemimpinan yang melibatkan, menggerakkan dan memanusiakan.</p>
|
||
</div>
|
||
</div>
|
||
<div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
|
||
<div class="flex items-start space-x-3">
|
||
<span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">2</span>
|
||
<p class="text-gray-700 text-sm">Menjadikan Jakarta kota yang memajukan kesejahteraan umum melalui terciptanya lapangan kerja, kestabilan dan keterjangkauan kebutuhan pokok, meningkatnya keadilan sosial, percepatan pembangunan infrastruktur, kemudahan investasi dan berbisnis, serta perbaikan pengelolaan tata ruang.</p>
|
||
</div>
|
||
</div>
|
||
<div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
|
||
<div class="flex items-start space-x-3">
|
||
<span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">3</span>
|
||
<p class="text-gray-700 text-sm">Menjadikan Jakarta tempat wahana aparatur negara yang berkarya, mengabdi, melayani, serta menyelesaikan berbagai permasalahan kota dan warga, secara efektif, meritokratis dan berintegritas.</p>
|
||
</div>
|
||
</div>
|
||
<div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
|
||
<div class="flex items-start space-x-3">
|
||
<span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">4</span>
|
||
<p class="text-gray-700 text-sm">Menjadikan Jakarta kota yang lestari, dengan pembangunan dan tata kehidupan yang memperkuat daya dukung lingkungan dan sosial.</p>
|
||
</div>
|
||
</div>
|
||
<div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
|
||
<div class="flex items-start space-x-3">
|
||
<span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">5</span>
|
||
<p class="text-gray-700 text-sm">Menjadikan Jakarta ibukota yang dinamis sebagai simpul kemajuan Indonesia yang bercirikan keadilan, kebangsaan dan kebhinekaan.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tugas PPID -->
|
||
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
||
<button class="w-full px-6 py-4 text-left bg-gradient-to-r from-green-50 to-red-50 hover:from-green-100 hover:to-cyan-100 transition-colors duration-200 flex items-center justify-between"
|
||
onclick="toggleAccordion('tugasPPID')">
|
||
<div class="flex items-center space-x-3">
|
||
<i class="text-orange-600" data-lucide="briefcase"></i>
|
||
<h3 class="text-lg font-semibold text-gray-800">TUGAS PPID</h3>
|
||
</div>
|
||
<i class="text-orange-600 transition-transform duration-200" data-lucide="chevron-down" id="tugasPPID-icon"></i>
|
||
</button>
|
||
<div id="tugasPPID" class="hidden px-6 py-4 bg-white">
|
||
<h5 class="text-lg font-semibold text-orange-600 mb-4">TUGAS DAN WEWENANG PPID</h5>
|
||
<p class="text-gray-700 leading-relaxed text-md mb-6">Fungsi:</p>
|
||
<div class="grid gap-3">
|
||
<div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
|
||
<div class="flex items-start space-x-3">
|
||
<span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">1</span>
|
||
<p class="text-gray-700 text-sm">Melaksanakan kebijakan layanan yang sudah ditetapkan.</p>
|
||
</div>
|
||
</div>
|
||
<div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
|
||
<div class="flex items-start space-x-3">
|
||
<span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">2</span>
|
||
<p class="text-gray-700 text-sm">Melakukan klasifikasi informasi.</p>
|
||
</div>
|
||
</div>
|
||
<div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
|
||
<div class="flex items-start space-x-3">
|
||
<span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">3</span>
|
||
<p class="text-gray-700 text-sm">Melakukan koordinasi untuk pengumpulan bahan informasi dan dokumentasi yang ada di lingkungannya.</p>
|
||
</div>
|
||
</div>
|
||
<div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
|
||
<div class="flex items-start space-x-3">
|
||
<span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">4</span>
|
||
<p class="text-gray-700 text-sm">Menyediakan dan memberi pelayanan informasi yang ada di lingkungan kepada publik.</p>
|
||
</div>
|
||
</div>
|
||
<div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
|
||
<div class="flex items-start space-x-3">
|
||
<span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">5</span>
|
||
<p class="text-gray-700 text-sm">Melakukan verifikasi bahan informasi publik yang ada di lingkungannya.</p>
|
||
</div>
|
||
</div>
|
||
<div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
|
||
<div class="flex items-start space-x-3">
|
||
<span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">6</span>
|
||
<p class="text-gray-700 text-sm">Sebagai media informasi yang mudah diakses oleh masyarakat.</p>
|
||
</div>
|
||
</div>
|
||
<div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
|
||
<div class="flex items-start space-x-3">
|
||
<span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">7</span>
|
||
<p class="text-gray-700 text-sm">Memberikan laporan tentang pengelolaan informasi yang ada di lingkungan kepada PPID utama secara berkala.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Alur Permohonan Informasi -->
|
||
<div class="border border-gray-200 rounded-xl overflow-hidden">
|
||
<button class="w-full px-6 py-4 text-left bg-gradient-to-r from-green-50 to-red-50 hover:from-green-100 hover:to-cyan-100 transition-colors duration-200 flex items-center justify-between"
|
||
onclick="toggleAccordion('alurPermohonan')">
|
||
<div class="flex items-center space-x-3">
|
||
<i class="text-orange-600" data-lucide="info"></i>
|
||
<h3 class="text-lg font-semibold text-gray-800">Alur Permohonan Informasi</h3>
|
||
</div>
|
||
<i class="text-orange-600 transition-transform duration-200" data-lucide="chevron-down" id="alurPermohonan-icon"></i>
|
||
</button>
|
||
<div id="alurPermohonan" class="hidden px-6 py-4 bg-white">
|
||
<div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
|
||
<div class="flex items-center space-x-3">
|
||
<i class="fas fa-info-circle text-orange-500"></i>
|
||
<img src="@Url.Content("~/assets/images/layanan/pemohon.png")" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Service Cards -->
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
<!-- Permohonan Informasi Card -->
|
||
<div class="group bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100 overflow-hidden">
|
||
<div class="p-6">
|
||
<div class="flex items-center justify-center w-12 h-12 bg-amber-100 rounded-xl mb-4 group-hover:bg-amber-600 transition-colors duration-300">
|
||
<i class="w-6 h-6 text-amber-600 group-hover:text-white transition-colors duration-300" data-lucide="file"></i>
|
||
</div>
|
||
<h5 class="font-semibold text-lg mb-3 text-gray-800">Permohonan Informasi</h5>
|
||
<p class="text-gray-600 text-sm mb-4 leading-relaxed">Ajukan permohonan informasi publik secara online dengan mudah dan cepat</p>
|
||
<a href="https://ppid.jakarta.go.id/permohonan-informasi" target="_blank" class="block">
|
||
<button class="w-full bg-amber-600 hover:bg-amber-700 text-white font-medium py-3 rounded-xl transition-all duration-300 hover:shadow-lg cursor-pointer">
|
||
Ajukan Permohonan
|
||
</button>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Daftar Informasi Card -->
|
||
<div class="group bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100 overflow-hidden">
|
||
<div class="p-6">
|
||
<div class="flex items-center justify-center w-12 h-12 bg-amber-100 rounded-xl mb-4 group-hover:bg-amber-600 transition-colors duration-300">
|
||
<i class="w-6 h-6 text-amber-600 group-hover:text-white transition-colors duration-300" data-lucide="database"></i>
|
||
</div>
|
||
<h5 class="font-semibold text-lg mb-3 text-gray-800">Daftar Informasi Publik</h5>
|
||
<p class="text-gray-600 text-sm mb-4 leading-relaxed">Akses berbagai informasi publik yang telah dikategorikan sesuai jenisnya</p>
|
||
<a href="https://ppid.jakarta.go.id/daftar-informasi-publik-ppid-perangkat-daerah" target="_blank" class="block">
|
||
<button class="w-full bg-amber-600 hover:bg-amber-700 text-white font-medium py-3 rounded-xl transition-all duration-300 hover:shadow-lg cursor-pointer">
|
||
Lihat Informasi
|
||
</button>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Statistik Card -->
|
||
<div class="group bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100 overflow-hidden">
|
||
<div class="p-6">
|
||
<div class="flex items-center justify-center w-12 h-12 bg-amber-100 rounded-xl mb-4 group-hover:bg-amber-600 transition-colors duration-300">
|
||
<i class="w-6 h-6 text-amber-600 group-hover:text-white transition-colors duration-300" data-lucide="bar-chart-3"></i>
|
||
</div>
|
||
<h5 class="font-semibold text-lg mb-3 text-gray-800">Satu Data Jakarta</h5>
|
||
<p class="text-gray-600 text-sm mb-4 leading-relaxed">Pantau statistik layanan informasi publik secara real-time</p>
|
||
<a href="https://satudata.jakarta.go.id/home" target="_blank" class="block">
|
||
<button class="w-full bg-amber-600 hover:bg-amber-700 text-white font-medium py-3 rounded-xl transition-all duration-300 hover:shadow-lg cursor-pointer">
|
||
Lihat Statistik
|
||
</button>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<script>
|
||
function toggleAccordion(targetId) {
|
||
const content = document.getElementById(targetId);
|
||
const icon = document.getElementById(targetId + '-icon');
|
||
|
||
if (content.classList.contains('hidden')) {
|
||
content.classList.remove('hidden');
|
||
icon.style.transform = 'rotate(180deg)';
|
||
} else {
|
||
content.classList.add('hidden');
|
||
icon.style.transform = 'rotate(0deg)';
|
||
}
|
||
}
|
||
|
||
// Show first accordion by default
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const firstContent = document.getElementById('profilPPID');
|
||
const firstIcon = document.getElementById('profilPPID-icon');
|
||
firstContent.classList.remove('hidden');
|
||
firstIcon.style.transform = 'rotate(180deg)';
|
||
});
|
||
</script>
|