265 lines
12 KiB
Plaintext
265 lines
12 KiB
Plaintext
@{
|
|
Layout = "_Layout";
|
|
|
|
ViewData["Title"] = "Video - Dinas Lingkungan Hidup DKI Jakarta";
|
|
ViewData["Description"] = "Kumpulan Video Edukasi dan Dokumentasi Kegiatan Lingkungan Hidup DKI Jakarta";
|
|
ViewData["Keywords"] = "Video, Dokumen Informasi, Kinerja, Lingkungan Hidup, DLH, Dinas Lingkungan Hidup DKI Jakarta";
|
|
ViewData["OgTitle"] = "Video - Dinas Lingkungan Hidup DKI Jakarta";
|
|
ViewData["OgDescription"] = "Kumpulan Video Edukasi dan Dokumentasi Kegiatan Lingkungan Hidup DKI Jakarta";
|
|
ViewData["TwitterTitle"] = "Video - Dinas Lingkungan Hidup DKI Jakarta";
|
|
ViewData["TwitterDescription"] = "Kumpulan Video Edukasi dan Dokumentasi Kegiatan Lingkungan Hidup DKI Jakarta";
|
|
|
|
// Breadcumb
|
|
ViewData["BreadcrumbText"] = "Video";
|
|
ViewData["TitleBeforeHighlight"] = "Video";
|
|
ViewData["TitleHighlight"] = "Terkini";
|
|
}
|
|
|
|
<!-- 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">
|
|
|
|
<!-- Search and Year Filter -->
|
|
<div class="mb-8">
|
|
<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 video..."
|
|
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>
|
|
<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>
|
|
|
|
<!-- Video Grid -->
|
|
<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"
|
|
data-year="2024" data-title="Video Penghijauan Jakarta 2024" data-date="2024-01-15" data-desc="Video dokumentasi program penghijauan di Jakarta tahun 2024.">
|
|
<div class="aspect-w-16 aspect-h-9 w-full">
|
|
<iframe class="w-full h-48" src="https://www.youtube.com/embed/05NdDFoOHPE" title="Video Penghijauan Jakarta 2024" frameborder="0" allowfullscreen></iframe>
|
|
</div>
|
|
<div class="p-6">
|
|
<h3 class="font-bold text-gray-800 mb-1 line-clamp-2">Video Penghijauan Jakarta 2024</h3>
|
|
<div class="text-xs text-gray-500 mb-2">15 Januari 2024</div>
|
|
<div class="text-gray-600 text-sm line-clamp-3">Video dokumentasi program penghijauan di Jakarta tahun 2024.</div>
|
|
</div>
|
|
</article>
|
|
<article class="news-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300"
|
|
data-year="2024" data-title="Operasi Kebersihan DKI" data-date="2024-01-12" data-desc="Liputan operasi kebersihan lingkungan di seluruh DKI Jakarta.">
|
|
<div class="aspect-w-16 aspect-h-9 w-full">
|
|
<iframe class="w-full h-48" src="https://www.youtube.com/embed/ZIPBeKs4" title="Operasi Kebersihan DKI" frameborder="0" allowfullscreen></iframe>
|
|
</div>
|
|
<div class="p-6">
|
|
<h3 class="font-bold text-gray-800 mb-1 line-clamp-2">Operasi Kebersihan DKI</h3>
|
|
<div class="text-xs text-gray-500 mb-2">12 Januari 2024</div>
|
|
<div class="text-gray-600 text-sm line-clamp-3">Liputan operasi kebersihan lingkungan di seluruh DKI Jakarta.</div>
|
|
</div>
|
|
</article>
|
|
<article class="news-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300"
|
|
data-year="2024" data-title="Workshop Pengelolaan Sampah" data-date="2024-01-10" data-desc="Workshop edukasi pengelolaan sampah ramah lingkungan.">
|
|
<div class="aspect-w-16 aspect-h-9 w-full">
|
|
<iframe class="w-full h-48" src="https://www.youtube.com/embed/F0R5Wu2EY5c" title="Workshop Pengelolaan Sampah" frameborder="0" allowfullscreen></iframe>
|
|
</div>
|
|
<div class="p-6">
|
|
<h3 class="font-bold text-gray-800 mb-1 line-clamp-2">Workshop Pengelolaan Sampah</h3>
|
|
<div class="text-xs text-gray-500 mb-2">10 Januari 2024</div>
|
|
<div class="text-gray-600 text-sm line-clamp-3">Workshop edukasi pengelolaan sampah ramah lingkungan.</div>
|
|
</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="jsPageVideo">
|
|
<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="jsPageVideo">
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const searchInput = document.getElementById('search-input');
|
|
const yearFilter = document.getElementById('year-filter');
|
|
const newsCards = document.querySelectorAll('.news-card');
|
|
// Pagination
|
|
let currentSearchTerm = '';
|
|
let currentYear = '';
|
|
let currentPage = 1;
|
|
const itemsPerPage = 6;
|
|
|
|
function filterNews() {
|
|
let visibleCards = [];
|
|
newsCards.forEach(card => {
|
|
const cardYear = card.dataset.year;
|
|
const cardTitle = card.dataset.title.toLowerCase();
|
|
const matchYear = !currentYear || cardYear === currentYear;
|
|
const matchSearch = !currentSearchTerm || cardTitle.includes(currentSearchTerm.toLowerCase());
|
|
if (matchYear && matchSearch) {
|
|
visibleCards.push(card);
|
|
card.style.display = 'block';
|
|
} else {
|
|
card.style.display = 'none';
|
|
}
|
|
});
|
|
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');
|
|
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';
|
|
}
|
|
});
|
|
}
|
|
|
|
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>
|