148 lines
11 KiB
Plaintext
148 lines
11 KiB
Plaintext
@{
|
|
Layout = "_Layout";
|
|
|
|
ViewData["Title"] = "Laporan Pemantauan Kualitas Air - Dinas Lingkungan Hidup DKI Jakarta";
|
|
ViewData["Description"] = "Informasi mengenai laporan pemantauan kualitas air yang dilakukan oleh Dinas Lingkungan Hidup DKI Jakarta. Temukan dokumen terkait, peraturan, dan data penting lainnya.";
|
|
ViewData["Keywords"] = "Laporan Pemantauan Kualitas Air, Regulasi Lingkungan, Kualitas Air, Data Lingkungan, Jakarta";
|
|
ViewData["OgTitle"] = "Laporan Pemantauan Kualitas Air - Dinas Lingkungan Hidup DKI Jakarta";
|
|
ViewData["OgDescription"] = "Informasi mengenai laporan pemantauan kualitas air yang dilakukan oleh Dinas Lingkungan Hidup DKI Jakarta. Temukan dokumen terkait, peraturan, dan data penting lainnya.";
|
|
ViewData["TwitterTitle"] = "Laporan Pemantauan Kualitas Air - Dinas Lingkungan Hidup DKI Jakarta";
|
|
ViewData["TwitterDescription"] = "Informasi mengenai laporan pemantauan kualitas air yang dilakukan oleh Dinas Lingkungan Hidup DKI Jakarta. Temukan dokumen terkait, peraturan, dan data penting lainnya.";
|
|
|
|
// Breadcumb
|
|
ViewData["BreadcrumbText"] = "Laporan Pemantauan Kualitas Air";
|
|
ViewData["TitleBeforeHighlight"] = "Laporan";
|
|
ViewData["TitleHighlight"] = "Pemantauan Kualitas Air";
|
|
}
|
|
|
|
<!-- Breadcumb -->
|
|
<partial name="~/Views/Shared/Partials/_Breadcumb.cshtml" />
|
|
|
|
<div class="container px-4 md:px-0 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">Laporan Pemantauan Kualitas Air</h1>
|
|
<p class="text-gray-600 max-w-4xl mx-auto leading-relaxed">
|
|
Kumpulan laporan hasil pemantauan kualitas air yang dilakukan secara berkala oleh Dinas Lingkungan Hidup DKI Jakarta.
|
|
Dokumen-dokumen ini memuat data dan analisis kondisi kualitas air di berbagai titik pemantauan di wilayah Jakarta,
|
|
termasuk sungai, waduk, dan sumber air lainnya. Laporan ini menjadi dasar evaluasi kebijakan pengelolaan kualitas
|
|
air dan upaya perbaikan lingkungan untuk menjaga ketersediaan air bersih bagi masyarakat Jakarta.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container max-w-6xl mx-auto pb-8 px-4">
|
|
<div class="flex flex-col lg:flex-row gap-6 lg: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-4 sm:p-6 lg:p-8 backdrop-blur-sm">
|
|
<div class="flex flex-col sm:flex-row sm:items-center justify-between mb-6 gap-4">
|
|
<h2 class="text-xl sm:text-2xl font-bold text-gray-800 flex items-center">
|
|
<i class="fas fa-file-archive text-green-600 mr-2 sm:mr-3 text-lg sm:text-xl"></i>
|
|
Dokumen
|
|
</h2>
|
|
<div class="flex flex-col sm:flex-row items-start sm:items-center gap-3">
|
|
<span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">8 Dokumen</span>
|
|
<div class="flex items-center gap-2 w-full sm:w-auto">
|
|
<label class="text-sm font-medium text-gray-700 whitespace-nowrap">Filter:</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 flex-1 sm:flex-none">
|
|
<option>Semua Tahun</option>
|
|
<option>2024</option>
|
|
<option>2023</option>
|
|
<option>2019</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
|
<!-- Document Cards - Responsive for mobile -->
|
|
<div class="bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300">
|
|
<div class="relative overflow-hidden rounded-lg flex justify-center items-center">
|
|
<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>
|
|
</div>
|
|
<h3 class="text-xs sm:text-sm font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-3 sm:px-4 py-2 text-center">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300">
|
|
<div class="relative overflow-hidden rounded-lg flex justify-center items-center">
|
|
<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>
|
|
</div>
|
|
<h3 class="text-xs sm:text-sm font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-3 sm:px-4 py-2 text-center">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300">
|
|
<div class="relative overflow-hidden rounded-lg flex justify-center items-center">
|
|
<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>
|
|
</div>
|
|
<h3 class="text-xs sm:text-sm font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-3 sm:px-4 py-2 text-center">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300">
|
|
<div class="relative overflow-hidden rounded-lg flex justify-center items-center">
|
|
<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>
|
|
</div>
|
|
<h3 class="text-xs sm:text-sm font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-3 sm:px-4 py-2 text-center">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300">
|
|
<div class="relative overflow-hidden rounded-lg flex justify-center items-center">
|
|
<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>
|
|
</div>
|
|
<h3 class="text-xs sm:text-sm font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-3 sm:px-4 py-2 text-center">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300">
|
|
<div class="relative overflow-hidden rounded-lg flex justify-center items-center">
|
|
<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>
|
|
</div>
|
|
<h3 class="text-xs sm:text-sm font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-3 sm:px-4 py-2 text-center">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300">
|
|
<div class="relative overflow-hidden rounded-lg flex justify-center items-center">
|
|
<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>
|
|
</div>
|
|
<h3 class="text-xs sm:text-sm font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-3 sm:px-4 py-2 text-center">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300">
|
|
<div class="relative overflow-hidden rounded-lg flex justify-center items-center">
|
|
<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>
|
|
</div>
|
|
<h3 class="text-xs sm:text-sm font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-3 sm:px-4 py-2 text-center">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Enhanced Sidebar -->
|
|
<div class="lg:w-1/3 space-y-4 sm: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-4 sm:p-6">
|
|
<h3 class="text-lg sm:text-xl font-bold mb-4 text-gray-800 flex items-center">
|
|
<i class="fas fa-search text-green-600 mr-2 sm:mr-3"></i>
|
|
Cari Dokumen
|
|
</h3>
|
|
<div class="relative">
|
|
<input type="text" class="w-full px-4 py-3 pl-12 pr-20 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent transition-all text-sm" 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-3 sm:px-4 py-2 rounded-md hover:bg-green-700 transition-all duration-300 shadow-md text-sm">
|
|
Cari
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<register-block dynamic-section="css" key="cssKualitasAir">
|
|
<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="jsKualitasAir">
|
|
<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>
|
|
</register-block> |