189 lines
12 KiB
Plaintext
189 lines
12 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 px-4">
|
|
<!-- Search and Filter Section -->
|
|
<div class="mb-8">
|
|
<div class="flex flex-col md:flex-row gap-4 items-center justify-between">
|
|
<!-- Search Bar -->
|
|
<div class="w-full md:w-1/2">
|
|
<div class="relative">
|
|
<input type="text" placeholder="Cari berita..."
|
|
class="w-full px-4 py-3 pl-10 pr-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500">
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Category Filter -->
|
|
<div class="w-full md:w-auto">
|
|
<select 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 Kategori</option>
|
|
<option value="lingkungan">Lingkungan</option>
|
|
<option value="kebersihan">Kebersihan</option>
|
|
<option value="kegiatan">Kegiatan</option>
|
|
<option value="pengumuman">Pengumuman</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Trending News Section -->
|
|
<div class="mb-12">
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-6">Berita Trending</h2>
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
<!-- Main Trending News -->
|
|
<div class="lg:col-span-1">
|
|
<div class="relative overflow-hidden rounded-xl shadow-lg group cursor-pointer">
|
|
<img src="https://via.placeholder.com/600x400" alt="Trending News"
|
|
class="w-full h-80 object-cover group-hover:scale-105 transition-transform duration-300">
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
|
|
<div class="absolute bottom-0 left-0 right-0 p-6 text-white">
|
|
<span class="inline-block px-3 py-1 bg-red-600 text-xs font-semibold rounded-full mb-3">TRENDING</span>
|
|
<h3 class="text-xl font-bold mb-2">Judul Berita Trending Utama Yang Menarik Perhatian</h3>
|
|
<p class="text-sm opacity-90 mb-2">Lorem ipsum dolor sit amet consectetur adipisicing elit...</p>
|
|
<span class="text-xs opacity-75">15 Januari 2024</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Side Trending News -->
|
|
<div class="space-y-4">
|
|
<div class="flex gap-4 p-4 bg-white rounded-lg shadow hover:shadow-md transition-shadow cursor-pointer">
|
|
<img src="https://via.placeholder.com/120x80" alt="News" class="w-24 h-20 object-cover rounded-lg flex-shrink-0">
|
|
<div class="flex-1">
|
|
<span class="inline-block px-2 py-1 bg-orange-100 text-orange-800 text-xs font-medium rounded mb-2">HOT</span>
|
|
<h4 class="font-semibold text-gray-800 mb-1 line-clamp-2">Judul Berita Trending Kedua</h4>
|
|
<span class="text-xs text-gray-500">12 Januari 2024</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex gap-4 p-4 bg-white rounded-lg shadow hover:shadow-md transition-shadow cursor-pointer">
|
|
<img src="https://via.placeholder.com/120x80" alt="News" class="w-24 h-20 object-cover rounded-lg flex-shrink-0">
|
|
<div class="flex-1">
|
|
<span class="inline-block px-2 py-1 bg-green-100 text-green-800 text-xs font-medium rounded mb-2">NEW</span>
|
|
<h4 class="font-semibold text-gray-800 mb-1 line-clamp-2">Judul Berita Trending Ketiga</h4>
|
|
<span class="text-xs text-gray-500">10 Januari 2024</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex gap-4 p-4 bg-white rounded-lg shadow hover:shadow-md transition-shadow cursor-pointer">
|
|
<img src="https://via.placeholder.com/120x80" alt="News" class="w-24 h-20 object-cover rounded-lg flex-shrink-0">
|
|
<div class="flex-1">
|
|
<span class="inline-block px-2 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded mb-2">UPDATE</span>
|
|
<h4 class="font-semibold text-gray-800 mb-1 line-clamp-2">Judul Berita Trending Keempat</h4>
|
|
<span class="text-xs text-gray-500">8 Januari 2024</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- All News Section -->
|
|
<div>
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-6">Semua Berita</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="news-grid">
|
|
<!-- News Card 1 -->
|
|
<article class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 cursor-pointer">
|
|
<img src="https://via.placeholder.com/400x250" 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">5 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">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, voluptatem...</p>
|
|
<a href="#" class="text-green-600 hover:text-green-700 font-medium text-sm">Baca Selengkapnya →</a>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- News Card 2 -->
|
|
<article class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 cursor-pointer">
|
|
<img src="https://via.placeholder.com/400x250" 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">3 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">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, voluptatem...</p>
|
|
<a href="#" class="text-green-600 hover:text-green-700 font-medium text-sm">Baca Selengkapnya →</a>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- News Card 3 -->
|
|
<article class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 cursor-pointer">
|
|
<img src="https://via.placeholder.com/400x250" 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">1 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">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, voluptatem...</p>
|
|
<a href="#" class="text-green-600 hover:text-green-700 font-medium text-sm">Baca Selengkapnya →</a>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- More news cards would be loaded dynamically -->
|
|
</div>
|
|
|
|
<!-- Load More Button -->
|
|
<div class="text-center mt-10">
|
|
<button id="load-more-btn"
|
|
class="px-8 py-3 bg-green-600 text-white font-medium rounded-lg hover:bg-green-700 transition-colors duration-300 focus:ring-4 focus:ring-green-200">
|
|
Muat Lebih Banyak
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const loadMoreBtn = document.getElementById('load-more-btn');
|
|
const newsGrid = document.getElementById('news-grid');
|
|
|
|
loadMoreBtn.addEventListener('click', function() {
|
|
// Simulate loading more news
|
|
const newNewsHtml = `
|
|
<article class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 cursor-pointer">
|
|
<img src="https://via.placeholder.com/400x250" 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">28 Desember 2023</span>
|
|
</div>
|
|
<h3 class="font-bold text-gray-800 mb-2 line-clamp-2">Berita Baru yang Dimuat Secara Dinamis</h3>
|
|
<p class="text-gray-600 text-sm mb-4 line-clamp-3">Lorem ipsum dolor sit amet consectetur adipisicing elit...</p>
|
|
<a href="#" class="text-green-600 hover:text-green-700 font-medium text-sm">Baca Selengkapnya →</a>
|
|
</div>
|
|
</article>
|
|
`;
|
|
|
|
newsGrid.insertAdjacentHTML('beforeend', newNewsHtml);
|
|
});
|
|
});
|
|
</script> |