362 lines
18 KiB
Plaintext
362 lines
18 KiB
Plaintext
@{
|
|
Layout = "_Layout";
|
|
|
|
ViewData["Title"] = "Berita - Dinas Lingkungan Hidup DKI Jakarta";
|
|
ViewData["Description"] = "Kegiatan dan Informasi Terkini dari Dinas Lingkungan Hidup DKI Jakarta";
|
|
ViewData["Keywords"] = "Berita, Dokumen Informasi, Kinerja, Lingkungan Hidup, DLH, Dinas Lingkungan Hidup DKI Jakarta";
|
|
ViewData["OgTitle"] = "Berita - Dinas Lingkungan Hidup DKI Jakarta";
|
|
ViewData["OgDescription"] = "Kegiatan dan Informasi Terkini dari Dinas Lingkungan Hidup DKI Jakarta";
|
|
ViewData["TwitterTitle"] = "Berita - Dinas Lingkungan Hidup DKI Jakarta";
|
|
ViewData["TwitterDescription"] = "Kegiatan dan Informasi Terkini dari Dinas Lingkungan Hidup DKI Jakarta";
|
|
|
|
// Breadcumb
|
|
ViewData["BreadcrumbText"] = "Berita";
|
|
ViewData["TitleBeforeHighlight"] = "Kegiatan dan Informasi Terkini";
|
|
ViewData["TitleHighlight"] = "dari Dinas Lingkungan Hidup DKI Jakarta";
|
|
}
|
|
|
|
<!-- Breadcumb -->
|
|
<partial name="~/Views/Shared/Partials/_Breadcumb.cshtml" />
|
|
|
|
<section class="py-12 bg-gray-50">
|
|
<div class="container mx-auto max-w-6xl px-4">
|
|
|
|
<!-- Filter Tabs -->
|
|
<div class="mb-8">
|
|
<div class="flex flex-wrap items-center justify-center gap-2 mb-6">
|
|
<button class="filter-tab active px-6 py-2 rounded-sm font-medium transition-all" data-category="">
|
|
Semua
|
|
</button>
|
|
<button class="filter-tab px-6 py-2 rounded-sm font-medium transition-all" data-category="lingkungan">Lingkungan</button>
|
|
<button class="filter-tab px-6 py-2 rounded-sm font-medium transition-all" data-category="kebersihan">Kebersihan</button>
|
|
<button class="filter-tab px-6 py-2 rounded-sm font-medium transition-all" data-category="kegiatan">Kegiatan</button>
|
|
<button class="filter-tab px-6 py-2 rounded-sm font-medium transition-all" data-category="pengumuman">Pengumuman</button>
|
|
</div>
|
|
<div class="flex flex-col md:flex-row gap-4 items-center justify-center mb-6">
|
|
<div class="relative w-full">
|
|
<input
|
|
type="text"
|
|
id="search-input"
|
|
placeholder="Cari berita..."
|
|
class="w-full px-4 py-3 pr-11 pl-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition"
|
|
autocomplete="off"
|
|
>
|
|
<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
|
|
<i class="h-5 w-5 text-gray-400" data-lucide="search"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="">
|
|
<select id="year-filter" class="px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500">
|
|
<option value="">Semua Tahun</option>
|
|
<option value="2024">2024</option>
|
|
<option value="2023">2023</option>
|
|
<option value="2022">2022</option>
|
|
<option value="2021">2021</option>
|
|
</select>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- News -->
|
|
<div>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="news-grid">
|
|
<article class="news-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 cursor-pointer"
|
|
data-category="lingkungan" data-year="2024" data-title="Program Penghijauan Kota Jakarta Tahun 2024" data-date="2024-01-15">
|
|
<img src="@Url.Content("~/assets/images/home/berita1.jpg")" alt="News" class="w-full h-48 object-cover">
|
|
<div class="p-6">
|
|
<div class="flex items-center gap-2 mb-3">
|
|
<span class="px-2 py-1 bg-green-100 text-green-800 text-xs font-medium rounded">Lingkungan</span>
|
|
<span class="text-xs text-gray-500">15 Januari 2024</span>
|
|
</div>
|
|
<h3 class="font-bold text-gray-800 mb-2 line-clamp-2">Program Penghijauan Kota Jakarta Tahun 2024</h3>
|
|
<p class="text-gray-600 text-sm mb-4 line-clamp-3">Program penghijauan ini bertujuan untuk meningkatkan kualitas udara di Jakarta melalui penanaman pohon di berbagai titik strategis...</p>
|
|
<a href="#" class="text-green-600 hover:text-green-700 font-medium text-sm">Baca Selengkapnya →</a>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="news-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 cursor-pointer"
|
|
data-category="kebersihan" data-year="2024" data-title="Operasi Kebersihan Lingkungan di Seluruh DKI Jakarta" data-date="2024-01-12">
|
|
<img src="@Url.Content("~/assets/images/home/berita1.jpg")" alt="News" class="w-full h-48 object-cover">
|
|
<div class="p-6">
|
|
<div class="flex items-center gap-2 mb-3">
|
|
<span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded">Kebersihan</span>
|
|
<span class="text-xs text-gray-500">12 Januari 2024</span>
|
|
</div>
|
|
<h3 class="font-bold text-gray-800 mb-2 line-clamp-2">Operasi Kebersihan Lingkungan di Seluruh DKI Jakarta</h3>
|
|
<p class="text-gray-600 text-sm mb-4 line-clamp-3">Dinas Lingkungan Hidup DKI Jakarta menggelar operasi kebersihan massal untuk menjaga kebersihan kota...</p>
|
|
<a href="#" class="text-green-600 hover:text-green-700 font-medium text-sm">Baca Selengkapnya →</a>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="news-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 cursor-pointer"
|
|
data-category="kegiatan" data-year="2024" data-title="Workshop Pengelolaan Sampah Ramah Lingkungan" data-date="2024-01-10">
|
|
<img src="@Url.Content("~/assets/images/home/berita1.jpg")" alt="News" class="w-full h-48 object-cover">
|
|
<div class="p-6">
|
|
<div class="flex items-center gap-2 mb-3">
|
|
<span class="px-2 py-1 bg-purple-100 text-purple-800 text-xs font-medium rounded">Kegiatan</span>
|
|
<span class="text-xs text-gray-500">10 Januari 2024</span>
|
|
</div>
|
|
<h3 class="font-bold text-gray-800 mb-2 line-clamp-2">Workshop Pengelolaan Sampah Ramah Lingkungan</h3>
|
|
<p class="text-gray-600 text-sm mb-4 line-clamp-3">Workshop ini mengajarkan masyarakat cara mengelola sampah dengan baik dan ramah lingkungan...</p>
|
|
<a href="#" class="text-green-600 hover:text-green-700 font-medium text-sm">Baca Selengkapnya →</a>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="news-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 cursor-pointer"
|
|
data-category="pengumuman" data-year="2024" data-title="Pengumuman Jadwal Pengangkutan Sampah Hari Raya" data-date="2024-01-08">
|
|
<img src="@Url.Content("~/assets/images/home/berita1.jpg")" alt="News" class="w-full h-48 object-cover">
|
|
<div class="p-6">
|
|
<div class="flex items-center gap-2 mb-3">
|
|
<span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs font-medium rounded">Pengumuman</span>
|
|
<span class="text-xs text-gray-500">8 Januari 2024</span>
|
|
</div>
|
|
<h3 class="font-bold text-gray-800 mb-2 line-clamp-2">Pengumuman Jadwal Pengangkutan Sampah Hari Raya</h3>
|
|
<p class="text-gray-600 text-sm mb-4 line-clamp-3">Informasi penting mengenai jadwal pengangkutan sampah selama periode hari raya...</p>
|
|
<a href="#" class="text-green-600 hover:text-green-700 font-medium text-sm">Baca Selengkapnya →</a>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="news-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 cursor-pointer"
|
|
data-category="lingkungan" data-year="2023" data-title="Monitoring Kualitas Air Jakarta 2023" data-date="2023-12-20">
|
|
<img src="@Url.Content("~/assets/images/home/berita1.jpg")" alt="News" class="w-full h-48 object-cover">
|
|
<div class="p-6">
|
|
<div class="flex items-center gap-2 mb-3">
|
|
<span class="px-2 py-1 bg-green-100 text-green-800 text-xs font-medium rounded">Lingkungan</span>
|
|
<span class="text-xs text-gray-500">20 Desember 2023</span>
|
|
</div>
|
|
<h3 class="font-bold text-gray-800 mb-2 line-clamp-2">Monitoring Kualitas Air Jakarta 2023</h3>
|
|
<p class="text-gray-600 text-sm mb-4 line-clamp-3">Hasil monitoring kualitas air di berbagai wilayah Jakarta menunjukkan peningkatan yang signifikan...</p>
|
|
<a href="#" class="text-green-600 hover:text-green-700 font-medium text-sm">Baca Selengkapnya →</a>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="news-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 cursor-pointer"
|
|
data-category="kegiatan" data-year="2023" data-title="Kampanye Reduce Reuse Recycle" data-date="2023-12-15">
|
|
<img src="@Url.Content("~/assets/images/home/berita1.jpg")" alt="News" class="w-full h-48 object-cover">
|
|
<div class="p-6">
|
|
<div class="flex items-center gap-2 mb-3">
|
|
<span class="px-2 py-1 bg-purple-100 text-purple-800 text-xs font-medium rounded">Kegiatan</span>
|
|
<span class="text-xs text-gray-500">15 Desember 2023</span>
|
|
</div>
|
|
<h3 class="font-bold text-gray-800 mb-2 line-clamp-2">Kampanye Reduce Reuse Recycle</h3>
|
|
<p class="text-gray-600 text-sm mb-4 line-clamp-3">Kampanye 3R untuk mengajak masyarakat Jakarta berpartisipasi dalam menjaga lingkungan...</p>
|
|
<a href="#" class="text-green-600 hover:text-green-700 font-medium text-sm">Baca Selengkapnya →</a>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<div class="flex justify-center items-center mt-10 space-x-2" id="pagination">
|
|
<button class="pagination-btn px-3 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50" data-page="prev" disabled>
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
|
|
</svg>
|
|
</button>
|
|
|
|
<button class="pagination-btn px-4 py-2 bg-green-600 text-white rounded-lg" data-page="1">1</button>
|
|
<button class="pagination-btn px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50" data-page="2">2</button>
|
|
<button class="pagination-btn px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50" data-page="3">3</button>
|
|
|
|
<button class="pagination-btn px-3 py-2 border border-gray-300 rounded-lg hover:bg-gray-50" data-page="next">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<register-block dynamic-section="css" key="cssPageBerita">
|
|
<style>
|
|
.filter-tab {
|
|
background-color: #e5e7eb;
|
|
color: #374151;
|
|
border-radius: 1rem;
|
|
transition: all 0.2s;
|
|
}
|
|
.filter-tab:hover {
|
|
background-color: #d1d5db;
|
|
}
|
|
|
|
.filter-tab.active {
|
|
background-color: #16a34a;
|
|
color: #fff;
|
|
}
|
|
.filter-tab.active:hover {
|
|
background-color: #15803d;
|
|
}
|
|
|
|
.active-badge {
|
|
display: none;
|
|
}
|
|
|
|
.line-clamp-2 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.line-clamp-3 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
</register-block>
|
|
|
|
<register-block dynamic-section="scripts" key="jsPageBerita">
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const filterTabs = document.querySelectorAll('.filter-tab');
|
|
const searchInput = document.getElementById('search-input');
|
|
const yearFilter = document.getElementById('year-filter');
|
|
const newsCards = document.querySelectorAll('.news-card');
|
|
const paginationBtns = document.querySelectorAll('.pagination-btn');
|
|
|
|
let currentCategory = '';
|
|
let currentSearchTerm = '';
|
|
let currentYear = '';
|
|
let currentPage = 1;
|
|
const itemsPerPage = 6;
|
|
|
|
// Filter functionality
|
|
function filterNews() {
|
|
let visibleCards = [];
|
|
|
|
newsCards.forEach(card => {
|
|
const cardCategory = card.dataset.category;
|
|
const cardYear = card.dataset.year;
|
|
const cardTitle = card.dataset.title.toLowerCase();
|
|
|
|
const matchCategory = !currentCategory || cardCategory === currentCategory;
|
|
const matchYear = !currentYear || cardYear === currentYear;
|
|
const matchSearch = !currentSearchTerm || cardTitle.includes(currentSearchTerm.toLowerCase());
|
|
|
|
if (matchCategory && matchYear && matchSearch) {
|
|
visibleCards.push(card);
|
|
card.style.display = 'block';
|
|
} else {
|
|
card.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
// Update pagination
|
|
updatePagination(visibleCards.length);
|
|
paginateCards(visibleCards);
|
|
}
|
|
|
|
function paginateCards(visibleCards) {
|
|
const startIndex = (currentPage - 1) * itemsPerPage;
|
|
const endIndex = startIndex + itemsPerPage;
|
|
|
|
visibleCards.forEach((card, index) => {
|
|
if (index >= startIndex && index < endIndex) {
|
|
card.style.display = 'block';
|
|
} else {
|
|
card.style.display = 'none';
|
|
}
|
|
});
|
|
}
|
|
|
|
function updatePagination(totalItems) {
|
|
const totalPages = Math.ceil(totalItems / itemsPerPage);
|
|
const pagination = document.getElementById('pagination');
|
|
|
|
// Clear existing pagination
|
|
pagination.innerHTML = '';
|
|
|
|
// Previous button
|
|
const prevBtn = document.createElement('button');
|
|
prevBtn.className = 'pagination-btn px-3 py-2 border border-gray-300 rounded-lg hover:bg-gray-50';
|
|
prevBtn.innerHTML = '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>';
|
|
prevBtn.disabled = currentPage === 1;
|
|
prevBtn.addEventListener('click', () => {
|
|
if (currentPage > 1) {
|
|
currentPage--;
|
|
updatePaginationState();
|
|
filterNews();
|
|
}
|
|
});
|
|
pagination.appendChild(prevBtn);
|
|
|
|
// Page numbers
|
|
for (let i = 1; i <= totalPages; i++) {
|
|
const pageBtn = document.createElement('button');
|
|
pageBtn.className = `pagination-btn px-4 py-2 rounded-lg ${i === currentPage ? 'bg-green-600 text-white' : 'border border-gray-300 hover:bg-gray-50'}`;
|
|
pageBtn.textContent = i;
|
|
pageBtn.addEventListener('click', () => {
|
|
currentPage = i;
|
|
updatePaginationState();
|
|
filterNews();
|
|
});
|
|
pagination.appendChild(pageBtn);
|
|
}
|
|
|
|
// Next button
|
|
const nextBtn = document.createElement('button');
|
|
nextBtn.className = 'pagination-btn px-3 py-2 border border-gray-300 rounded-lg hover:bg-gray-50';
|
|
nextBtn.innerHTML = '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>';
|
|
nextBtn.disabled = currentPage === totalPages;
|
|
nextBtn.addEventListener('click', () => {
|
|
if (currentPage < totalPages) {
|
|
currentPage++;
|
|
updatePaginationState();
|
|
filterNews();
|
|
}
|
|
});
|
|
pagination.appendChild(nextBtn);
|
|
}
|
|
|
|
function updatePaginationState() {
|
|
const paginationBtns = document.querySelectorAll('.pagination-btn');
|
|
paginationBtns.forEach(btn => {
|
|
if (btn.textContent == currentPage) {
|
|
btn.className = 'pagination-btn px-4 py-2 bg-green-600 text-white rounded-lg';
|
|
} else if (!isNaN(btn.textContent)) {
|
|
btn.className = 'pagination-btn px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50';
|
|
}
|
|
});
|
|
}
|
|
|
|
// Event listeners
|
|
filterTabs.forEach(tab => {
|
|
tab.addEventListener('click', function() {
|
|
filterTabs.forEach(t => t.classList.remove('active'));
|
|
this.classList.add('active');
|
|
currentCategory = this.dataset.category;
|
|
currentPage = 1;
|
|
filterNews();
|
|
});
|
|
});
|
|
// Tambahkan badge ke tab aktif saat load awal
|
|
const activeTab = document.querySelector('.filter-tab.active');
|
|
if (activeTab && !activeTab.querySelector('.active-badge')) {
|
|
const badge = document.createElement('span');
|
|
badge.className = 'active-badge absolute top-1 right-1';
|
|
activeTab.appendChild(badge);
|
|
}
|
|
|
|
searchInput.addEventListener('input', function() {
|
|
currentSearchTerm = this.value;
|
|
currentPage = 1;
|
|
filterNews();
|
|
});
|
|
|
|
yearFilter.addEventListener('change', function() {
|
|
currentYear = this.value;
|
|
currentPage = 1;
|
|
filterNews();
|
|
});
|
|
|
|
// Initial load
|
|
filterNews();
|
|
});
|
|
</script>
|
|
</register-block>
|