254 lines
16 KiB
PHP
254 lines
16 KiB
PHP
<section class="relative bg-gray-100 font-sans" style="z-index: 9;">
|
|
<div class="bg-gradient-to-r from-blue-600 to-indigo-800 text-white" >
|
|
<div class="container mx-auto px-4 py-16 md:py-24">
|
|
<div class="max-w-3xl mx-auto text-center">
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-4">Berita & Updates</h1>
|
|
<p class="text-xl md:text-2xl opacity-90">Temukan informasi terbaru dan video menarik seputar Sistem Pengelolaan Dokumen Lingkungan dan kebijakan lingkungan hidup</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container mx-auto px-4 py-12 max-w-7xl">
|
|
<!-- News Articles Grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="news-container">
|
|
<!-- Sample article 1 -->
|
|
<div class="bg-white rounded-lg overflow-hidden shadow-md transition-transform duration-300 hover:shadow-lg hover:-translate-y-1">
|
|
<img src="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png" alt="Teknologi AI" class="w-full h-48 object-cover">
|
|
<div class="p-5">
|
|
<div class="flex items-center mb-3">
|
|
<span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">5 April 2025</span>
|
|
</div>
|
|
<h3 class="text-xl font-bold mb-2">Kemajuan AI dalam Industri Kesehatan</h3>
|
|
<p class="text-gray-600 mb-4">Bagaimana kecerdasan buatan merevolusi diagnosis dan perawatan dalam bidang medis...</p>
|
|
<a href="#" class="inline-flex items-center text-blue-600 hover:underline">
|
|
Baca Selengkapnya
|
|
<svg class="w-3.5 h-3.5 ml-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sample article 2 -->
|
|
<div class="bg-white rounded-lg overflow-hidden shadow-md transition-transform duration-300 hover:shadow-lg hover:-translate-y-1">
|
|
<img src="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png" alt="Robotika" class="w-full h-48 object-cover">
|
|
<div class="p-5">
|
|
<div class="flex items-center mb-3">
|
|
<span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">2 April 2025</span>
|
|
</div>
|
|
<h3 class="text-xl font-bold mb-2">Robot Asisten Rumah Tangga Masa Depan</h3>
|
|
<p class="text-gray-600 mb-4">Perkembangan terbaru dalam robotika yang membantu pekerjaan rumah tangga sehari-hari...</p>
|
|
<a href="#" class="inline-flex items-center text-blue-600 hover:underline">
|
|
Baca Selengkapnya
|
|
<svg class="w-3.5 h-3.5 ml-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sample article 3 -->
|
|
<div class="bg-white rounded-lg overflow-hidden shadow-md transition-transform duration-300 hover:shadow-lg hover:-translate-y-1">
|
|
<img src="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png" alt="Eksplorasi Luar Angkasa" class="w-full h-48 object-cover">
|
|
<div class="p-5">
|
|
<div class="flex items-center mb-3">
|
|
<span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">30 Maret 2025</span>
|
|
</div>
|
|
<h3 class="text-xl font-bold mb-2">Misi Mars Pertama dengan Awak Manusia</h3>
|
|
<p class="text-gray-600 mb-4">Persiapan dan tantangan untuk misi bersejarah pengiriman manusia ke planet merah...</p>
|
|
<a href="#" class="inline-flex items-center text-blue-600 hover:underline">
|
|
Baca Selengkapnya
|
|
<svg class="w-3.5 h-3.5 ml-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sample article 4 -->
|
|
<div class="bg-white rounded-lg overflow-hidden shadow-md transition-transform duration-300 hover:shadow-lg hover:-translate-y-1">
|
|
<img src="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png" alt="Energi Terbarukan" class="w-full h-48 object-cover">
|
|
<div class="p-5">
|
|
<div class="flex items-center mb-3">
|
|
<span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">25 Maret 2025</span>
|
|
</div>
|
|
<h3 class="text-xl font-bold mb-2">Terobosan Baru dalam Teknologi Panel Surya</h3>
|
|
<p class="text-gray-600 mb-4">Efisiensi panel surya mencapai level tertinggi dengan material nano-photonic...</p>
|
|
<a href="#" class="inline-flex items-center text-blue-600 hover:underline">
|
|
Baca Selengkapnya
|
|
<svg class="w-3.5 h-3.5 ml-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sample article 5 -->
|
|
<div class="bg-white rounded-lg overflow-hidden shadow-md transition-transform duration-300 hover:shadow-lg hover:-translate-y-1">
|
|
<img src="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png" alt="Komputasi Kuantum" class="w-full h-48 object-cover">
|
|
<div class="p-5">
|
|
<div class="flex items-center mb-3">
|
|
<span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">20 Maret 2025</span>
|
|
</div>
|
|
<h3 class="text-xl font-bold mb-2">Komputer Kuantum Merevolusi Kriptografi</h3>
|
|
<p class="text-gray-600 mb-4">Implikasi dari pengembangan komputer kuantum terhadap keamanan data global...</p>
|
|
<a href="#" class="inline-flex items-center text-blue-600 hover:underline">
|
|
Baca Selengkapnya
|
|
<svg class="w-3.5 h-3.5 ml-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sample article 6 -->
|
|
<div class="bg-white rounded-lg overflow-hidden shadow-md transition-transform duration-300 hover:shadow-lg hover:-translate-y-1">
|
|
<img src="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png" alt="Bioteknologi" class="w-full h-48 object-cover">
|
|
<div class="p-5">
|
|
<div class="flex items-center mb-3">
|
|
<span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">15 Maret 2025</span>
|
|
</div>
|
|
<h3 class="text-xl font-bold mb-2">CRISPR Menjadi Pilihan Utama Terapi Gen</h3>
|
|
<p class="text-gray-600 mb-4">Perkembangan terapi gen dengan teknologi CRISPR untuk mengobati penyakit genetik...</p>
|
|
<a href="#" class="inline-flex items-center text-blue-600 hover:underline">
|
|
Baca Selengkapnya
|
|
<svg class="w-3.5 h-3.5 ml-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Load More Button -->
|
|
<div class="flex justify-center mt-10">
|
|
<button id="load-more-btn" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-8 rounded-lg transition-all duration-300 transform hover:scale-105 flex items-center" data-page="1">
|
|
<span>Lihat Artikel Lainnya</span>
|
|
<svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- JavaScript for Load More functionality -->
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const loadMoreBtn = document.getElementById('load-more-btn');
|
|
const newsContainer = document.getElementById('news-container');
|
|
|
|
// Sample data for demonstration
|
|
const moreArticles = [
|
|
{
|
|
image: "https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png",
|
|
published_date: "10 Maret 2025",
|
|
title: "Virtual Reality untuk Pendidikan Jarak Jauh",
|
|
excerpt: "Bagaimana teknologi VR mengubah cara kita belajar dan mengajar dalam era digital",
|
|
slug: "virtual-reality-pendidikan"
|
|
},
|
|
{
|
|
image: "https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png",
|
|
published_date: "5 Maret 2025",
|
|
title: "Mobil Terbang Mulai Uji Coba di Perkotaan",
|
|
excerpt: "Prototipe mobil terbang memasuki fase uji coba di lingkungan perkotaan untuk pertama kalinya",
|
|
slug: "mobil-terbang-uji-coba"
|
|
},
|
|
{
|
|
image: "https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png",
|
|
published_date: "1 Maret 2025",
|
|
title: "Interface Otak-Komputer Generasi Baru",
|
|
excerpt: "Perangkat non-invasif baru memungkinkan kendali komputer hanya dengan pikiran",
|
|
slug: "brain-computer-interface"
|
|
},
|
|
{
|
|
image: "https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png",
|
|
published_date: "25 Februari 2025",
|
|
title: "Daging Kultur Laboratorium Memasuki Pasar Global",
|
|
excerpt: "Produksi daging dalam laboratorium mencapai skala komersial dan mulai tersedia untuk konsumen",
|
|
slug: "daging-laboratorium"
|
|
},
|
|
{
|
|
image: "https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png",
|
|
published_date: "20 Februari 2025",
|
|
title: "Drone Pengirim Bantuan Medis di Daerah Terpencil",
|
|
excerpt: "Jaringan drone otonom menyediakan layanan medis darurat ke wilayah yang sulit dijangkau",
|
|
slug: "drone-medis"
|
|
},
|
|
{
|
|
image: "https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png",
|
|
published_date: "15 Februari 2025",
|
|
title: "Material Super-Konduktor Bekerja pada Suhu Ruangan",
|
|
excerpt: "Penemuan material super-konduktor yang bekerja pada suhu kamar membuka peluang untuk revolusi energi",
|
|
slug: "super-konduktor"
|
|
}
|
|
];
|
|
|
|
let currentPage = 1;
|
|
const totalPages = 3;
|
|
|
|
loadMoreBtn.addEventListener('click', function() {
|
|
currentPage++;
|
|
const loadingText = loadMoreBtn.innerHTML;
|
|
|
|
// Show loading state
|
|
loadMoreBtn.innerHTML = `
|
|
<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
Loading...
|
|
`;
|
|
|
|
// Simulate AJAX request with setTimeout
|
|
setTimeout(() => {
|
|
if (currentPage <= totalPages) {
|
|
// For demo, we'll just use our sample data
|
|
moreArticles.forEach(article => {
|
|
const articleElement = createArticleElement(article);
|
|
newsContainer.appendChild(articleElement);
|
|
});
|
|
|
|
// If reached the last page, hide the button
|
|
if (currentPage === totalPages) {
|
|
loadMoreBtn.style.display = 'none';
|
|
} else {
|
|
loadMoreBtn.innerHTML = loadingText;
|
|
}
|
|
} else {
|
|
// No more articles
|
|
loadMoreBtn.innerHTML = 'Tidak ada artikel lagi';
|
|
loadMoreBtn.disabled = true;
|
|
loadMoreBtn.classList.remove('bg-indigo-600', 'hover:bg-indigo-700');
|
|
loadMoreBtn.classList.add('bg-gray-400', 'cursor-not-allowed');
|
|
}
|
|
}, 1000);
|
|
});
|
|
|
|
// Helper function to create an article element
|
|
function createArticleElement(article) {
|
|
const div = document.createElement('div');
|
|
div.className = 'bg-white rounded-lg overflow-hidden shadow-md transition-transform duration-300 hover:shadow-lg hover:-translate-y-1';
|
|
|
|
div.innerHTML = `
|
|
<img src="${article.image}" alt="${article.title}" class="w-full h-48 object-cover">
|
|
<div class="p-5">
|
|
<div class="flex items-center mb-3">
|
|
<span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">${article.published_date}</span>
|
|
</div>
|
|
<h3 class="text-xl font-bold mb-2">${article.title}</h3>
|
|
<p class="text-gray-600 mb-4">${article.excerpt}</p>
|
|
<a href="/news/${article.slug}" class="inline-flex items-center text-blue-600 hover:underline">
|
|
Baca Selengkapnya
|
|
<svg class="w-3.5 h-3.5 ml-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
`;
|
|
|
|
return div;
|
|
}
|
|
});
|
|
</script>
|
|
</div>
|
|
</section>
|