221 lines
15 KiB
Plaintext
221 lines
15 KiB
Plaintext
@{
|
|
Layout = "_Layout";
|
|
|
|
ViewData["Title"] = "Peraturan - Dinas Lingkungan Hidup DKI Jakarta";
|
|
ViewData["Description"] = "Regulasi Terkait Lingkungan Hidup - Dinas Lingkungan Hidup DKI Jakarta";
|
|
ViewData["Keywords"] = "Peraturan, Dokumen Informasi, Kinerja, Lingkungan Hidup, DLH, Dinas Lingkungan Hidup DKI Jakarta";
|
|
ViewData["OgTitle"] = "Peraturan - Dinas Lingkungan Hidup DKI Jakarta";
|
|
ViewData["OgDescription"] = "Regulasi Terkait Lingkungan Hidup - Dinas Lingkungan Hidup DKI Jakarta";
|
|
ViewData["TwitterTitle"] = "Peraturan - Dinas Lingkungan Hidup DKI Jakarta";
|
|
ViewData["TwitterDescription"] = "Regulasi Terkait Lingkungan Hidup - Dinas Lingkungan Hidup DKI Jakarta";
|
|
|
|
// Breadcumb
|
|
ViewData["BreadcrumbText"] = "Peraturan Terkait Lingkungan Hidup";
|
|
ViewData["TitleBeforeHighlight"] = "Peraturan";
|
|
ViewData["TitleHighlight"] = "Terkait Lingkungan Hidup";
|
|
}
|
|
|
|
<!-- Breadcumb -->
|
|
<partial name="~/Views/Shared/Partials/_Breadcumb.cshtml" />
|
|
|
|
<div class="flex justify-center">
|
|
<div class="w-full max-w-6xl py-12">
|
|
<div class="text-center mb-8">
|
|
<h1 class="text-3xl font-bold mb-4">Peraturan</h1>
|
|
<p class="text-gray-600 max-w-4xl mx-auto leading-relaxed">
|
|
Kumpulan peraturan dan regulasi lengkap yang berkaitan dengan pengelolaan lingkungan hidup di wilayah DKI Jakarta.
|
|
Dokumen-dokumen ini mencakup berbagai kebijakan, pedoman teknis, dan standar operasional yang menjadi acuan dalam
|
|
pelaksanaan program-program perlindungan dan pengelolaan lingkungan hidup untuk mewujudkan Jakarta yang lebih hijau,
|
|
bersih, dan berkelanjutan.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container max-w-6xl mx-auto pb-8">
|
|
<div class="flex flex-col lg:flex-row gap-8">
|
|
<!-- Main Content -->
|
|
<div class="lg:w-2/3">
|
|
<div class="bg-gradient-to-br from-white to-gray-50 rounded-xl shadow-sm border border-gray-100 p-8 backdrop-blur-sm">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h2 class="text-2xl font-bold text-gray-800 flex items-center">
|
|
<i class="fas fa-file-archive text-green-600 mr-3"></i>
|
|
Dokumen
|
|
</h2>
|
|
<div class="flex items-center gap-4">
|
|
<div class="flex items-center gap-2">
|
|
<label class="text-sm font-medium text-gray-700">Kategori:</label>
|
|
<select id="kategoriSelect" class="px-3 py-1 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-green-500">
|
|
<option>Pengelolaan Limbah B3</option>
|
|
<option>Pengendalian Pencemaran Air</option>
|
|
<option>Pengendalian Pencemaran Udara</option>
|
|
<option>Pengelolaan Limbah Padat</option>
|
|
<option title="Peraturan dan Pedoman Terkait Pengendalian Dampak Perubahan Iklim">Peraturan dan Pedoman Terkait...</option>
|
|
<option title="Peraturan Gubernur Jakarta Sadar Sampah dan Standar Teknis Prasarana dan Sarana Penanganan Sampah">Peraturan Gubernur Jakarta Sadar...</option>
|
|
</select>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<label class="text-sm font-medium text-gray-700">Tahun:</label>
|
|
<select class="px-3 py-1 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-green-500">
|
|
<option>Semua Tahun</option>
|
|
<option>2024</option>
|
|
<option>2023</option>
|
|
<option>2019</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col">
|
|
<div class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-orange-100 text-orange-800 border border-orange-200 mb-4 gap-2">
|
|
<i class="w-4 h-4 text-green-600" data-lucide="book-open-text"></i>
|
|
<h2 id="kategoriLabel" class="text-sm font-semibold">Pengelolaan Limbah B3</h2>
|
|
</div>
|
|
<div id="dokumenGrid" class="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
<!-- Daftar dokumen default -->
|
|
<div class="bg-white rounded-xl shadow-sm">
|
|
<div class="relative overflow-hidden rounded-lg">
|
|
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
|
|
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white rounded-xl shadow-sm">
|
|
<div class="relative overflow-hidden rounded-lg">
|
|
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
|
|
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white rounded-xl shadow-sm">
|
|
<div class="relative overflow-hidden rounded-lg">
|
|
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
|
|
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white rounded-xl shadow-sm">
|
|
<div class="relative overflow-hidden rounded-lg">
|
|
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
|
|
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
|
|
</div>
|
|
</div>
|
|
<!-- ...tambahkan dokumen lain jika perlu... -->
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Enhanced Sidebar -->
|
|
<div class="lg:w-1/3 space-y-6">
|
|
<!-- Search Box -->
|
|
<div class="bg-gradient-to-br from-white to-green-50 rounded-xl shadow-lg border border-green-100 p-6">
|
|
<h3 class="text-xl font-bold mb-4 text-gray-800 flex items-center">
|
|
<i class="fas fa-search text-green-600 mr-3"></i>
|
|
Cari Dokumen
|
|
</h3>
|
|
<div class="relative">
|
|
<input type="text" class="w-full px-4 py-3 pl-12 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent transition-all" placeholder="Masukkan kata kunci...">
|
|
<i class="fas fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
|
|
<button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-green-600 text-white px-4 py-2 rounded-md hover:from-green-700 hover:to-green-800 transition-all duration-300 shadow-md">
|
|
Cari
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<register-block dynamic-section="css" key="cssDIKPLHD">
|
|
<link href="~/assets/dflip/css/dflip.min.css" rel="stylesheet" type="text/css">
|
|
<link href="~/assets/dflip/css/themify-icons.min.css" rel="stylesheet" type="text/css">
|
|
</register-block>
|
|
|
|
<register-block dynamic-section="scripts" key="jsDIKPLHD">
|
|
<script src="~/assets/dflip/js/libs/jquery.min.js" type="text/javascript"></script>
|
|
<script src="~/assets/dflip/js/dflip.min.js" type="text/javascript"></script>
|
|
<script type="text/javascript">
|
|
const dokumenHTML = {
|
|
"Pengelolaan Limbah B3": `
|
|
<div class="bg-white rounded-xl shadow-sm">
|
|
<div class="relative overflow-hidden rounded-lg">
|
|
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
|
|
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white rounded-xl shadow-sm">
|
|
<div class="relative overflow-hidden rounded-lg">
|
|
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
|
|
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white rounded-xl shadow-sm">
|
|
<div class="relative overflow-hidden rounded-lg">
|
|
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
|
|
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white rounded-xl shadow-sm">
|
|
<div class="relative overflow-hidden rounded-lg">
|
|
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
|
|
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
|
|
</div>
|
|
</div>
|
|
`,
|
|
"Pengendalian Pencemaran Air": `
|
|
<div class="bg-white rounded-xl shadow-sm">
|
|
<div class="relative overflow-hidden rounded-lg">
|
|
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
|
|
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Panduan Pengendalian Pencemaran Air 2023</h3>
|
|
</div>
|
|
</div>
|
|
`,
|
|
"Pengendalian Pencemaran Udara": `
|
|
<div class="bg-white rounded-xl shadow-sm">
|
|
<div class="relative overflow-hidden rounded-lg">
|
|
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
|
|
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Pedoman Pengendalian Udara Bersih 2024</h3>
|
|
</div>
|
|
</div>
|
|
`,
|
|
"Pengelolaan Limbah Padat": `
|
|
<div class="bg-white rounded-xl shadow-sm">
|
|
<div class="relative overflow-hidden rounded-lg">
|
|
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
|
|
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Standar Teknis Pengelolaan Limbah Padat</h3>
|
|
</div>
|
|
</div>
|
|
`,
|
|
"Peraturan dan Pedoman Terkait...": `
|
|
<div class="bg-white rounded-xl shadow-sm">
|
|
<div class="relative overflow-hidden rounded-lg">
|
|
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
|
|
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Peraturan Pengendalian Dampak Perubahan Iklim</h3>
|
|
</div>
|
|
</div>
|
|
`,
|
|
"Peraturan Gubernur Jakarta Sadar...": `
|
|
<div class="bg-white rounded-xl shadow-sm">
|
|
<div class="relative overflow-hidden rounded-lg">
|
|
<div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
|
|
<h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Peraturan Gubernur Jakarta Sadar Sampah</h3>
|
|
</div>
|
|
</div>
|
|
`
|
|
};
|
|
|
|
$(function() {
|
|
function getSelectedKategori() {
|
|
let selected = $('#kategoriSelect option:selected').text();
|
|
if (selected.startsWith("Peraturan dan Pedoman")) return "Peraturan dan Pedoman Terkait...";
|
|
if (selected.startsWith("Peraturan Gubernur Jakarta Sadar")) return "Peraturan Gubernur Jakarta Sadar...";
|
|
return selected;
|
|
}
|
|
|
|
$('#kategoriSelect').on('change', function() {
|
|
const kategori = getSelectedKategori();
|
|
$('#kategoriLabel').text($(this).find('option:selected').text());
|
|
$('#dokumenGrid').html(dokumenHTML[kategori] || '');
|
|
});
|
|
});
|
|
</script>
|
|
</register-block> |