399 lines
18 KiB
Plaintext
399 lines
18 KiB
Plaintext
@{
|
|
ViewData["Title"] = "BPS-RW Jakarta - Edukasi";
|
|
ViewData["FooterBgColor"] = "bg-black";
|
|
ViewData["FooterHoverColor"] = "bg-black-800/20";
|
|
ViewData["FooterShowLeaf"] = "false";
|
|
}
|
|
|
|
<!-- Edukasi Section -->
|
|
<section class="w-full px-4 lg:px-28 xl:px-48 py-12 lg:py-18 bg-white">
|
|
<div class="w-full mx-auto gap-10">
|
|
<div class="inline-flex px-4 py-2 bg-primary-50 rounded-full mb-4">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-2 h-2 bg-primary-500 rounded-full"></div>
|
|
<span class="text-primary-500 text-base font-semibold font-jakarta">BPS RW</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col lg:flex-row lg:justify-between lg:items-center">
|
|
<h1 class="text-gray-900 text-3xl lg:text-5xl font-bold font-jakarta mb-4">Edukasi BPS-RW</h1>
|
|
<p class="text-gray-500 text:sm lg:text-lg font-normal font-jakarta leading-relaxed max-w-3xl">
|
|
Pusat pembelajaran dan sumber informasi tentang Bidang Pengolahan Sampah Lingkup Rukun Warga (BPS-RW)
|
|
DKI Jakarta
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Video Pembelajaran Section -->
|
|
<section class="w-full px-4 lg:px-28 xl:px-48 py-16 lg:py-24 bg-gray-100">
|
|
<!-- Filter -->
|
|
<div class="flex flex-col lg:flex-row lg:justify-between lg:items-center mb-8 gap-6 lg:gap-2">
|
|
<h2 class="text-black text-3xl lg:text-4xl font-semibold font-jakarta">Konten</h2>
|
|
<div class="flex gap-2 ">
|
|
<button data-filter="all"
|
|
class="filter-btn px-6 py-2 text-sm lg:text-lg cursor-pointer font-medium font-jakarta rounded-lg transition-colors bg-gray-900 text-white">
|
|
Semua
|
|
</button>
|
|
<button data-filter="video"
|
|
class="filter-btn px-6 py-2 text-sm lg:text-lg cursor-pointer font-medium font-jakarta rounded-lg transition-colors text-gray-600 hover:bg-gray-200">
|
|
Video
|
|
</button>
|
|
<button data-filter="ebook"
|
|
class="filter-btn px-6 py-2 text-sm lg:text-lg cursor-pointer font-medium font-jakarta rounded-lg transition-colors text-gray-600 hover:bg-gray-200">
|
|
E-Book
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Video Pembelajaran -->
|
|
<div id="videoSection" class="w-full mx-auto content-section">
|
|
<div class="flex justify-between items-center mb-8">
|
|
<h2 class="text-gray-900 text-2xl lg:text-3xl font-semibold font-jakarta">Video Pembelajaran</h2>
|
|
<div class="flex gap-3">
|
|
<button id="videoPrevBtn"
|
|
class="w-10 h-10 bg-white hover:bg-gray-100 rounded-full flex items-center justify-center transition-colors shadow-sm border border-gray-200">
|
|
<svg class="w-5 h-5 text-gray-700" 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 id="videoNextBtn"
|
|
class="w-10 h-10 bg-white hover:bg-gray-100 rounded-full flex items-center justify-center transition-colors shadow-sm border border-gray-200">
|
|
<svg class="w-5 h-5 text-gray-700" 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 class="relative overflow-hidden">
|
|
<div id="videoCarousel" class="flex flex-nowrap transition-transform duration-500 ease-in-out gap-5">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- E-Book -->
|
|
<div id="ebookSection" class="w-full mx-auto content-section mt-12">
|
|
<div class="flex justify-between items-center mb-8">
|
|
<h2 class="text-gray-900 text-2xl lg:text-3xl font-semibold font-jakarta">E-Book</h2>
|
|
<div class="flex gap-3">
|
|
<button id="ebookPrevBtn"
|
|
class="w-10 h-10 bg-white hover:bg-gray-100 rounded-full flex items-center justify-center transition-colors shadow-sm border border-gray-200">
|
|
<svg class="w-5 h-5 text-gray-700" 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 id="ebookNextBtn"
|
|
class="w-10 h-10 bg-white hover:bg-gray-100 rounded-full flex items-center justify-center transition-colors shadow-sm border border-gray-200">
|
|
<svg class="w-5 h-5 text-gray-700" 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 class="relative overflow-hidden">
|
|
<div id="ebookCarousel" class="flex flex-nowrap transition-transform duration-500 ease-in-out gap-5">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
@{
|
|
ViewData["ContactBgColor"] = "bg-black";
|
|
ViewData["ContactBgCardColor"] = "bg-black";
|
|
ViewData["ContactBorderCardColor"] = "bg-black";
|
|
ViewData["ContactTitleTextColor"] = "text-white";
|
|
ViewData["ContactTitleCardColor"] = "text-white";
|
|
ViewData["ContactIconBgColor"] = "bg-primary-700";
|
|
ViewData["ContactLinkColor"] = "text-primary-500";
|
|
}
|
|
@await Html.PartialAsync("_ContactSection")
|
|
|
|
<script>
|
|
// Data Dummy
|
|
const videos = [
|
|
{
|
|
youtubeId: '_vx9Lzx794o',
|
|
title: 'Video Sosialisasi BPS RW',
|
|
description: 'Tonton video ini untuk memahami cara kerja dan manfaat program BPS-RW.',
|
|
thumbnailUrl: 'https://img.youtube.com/vi/_vx9Lzx794o/sddefault.jpg'
|
|
},
|
|
{
|
|
youtubeId: '_vx9Lzx794o',
|
|
title: 'Webinar Edukasi BPS-RW',
|
|
description: 'Ikuti webinar ini untuk mendapatkan informasi mendalam tentang pelaksanaan program BPS-RW.',
|
|
thumbnailUrl: 'https://img.youtube.com/vi/_vx9Lzx794o/sddefault.jpg'
|
|
},
|
|
{
|
|
youtubeId: '_vx9Lzx794o',
|
|
title: 'Sesi Tanya Jawab BPS-RW',
|
|
description: 'Bergabunglah dalam sesi tanya jawab untuk menjawab segala pertanyaan mengenai BPS-RW.',
|
|
thumbnailUrl: 'https://img.youtube.com/vi/_vx9Lzx794o/sddefault.jpg'
|
|
},
|
|
{
|
|
youtubeId: '_vx9Lzx794o',
|
|
title: 'Sesi Tanya Jawab BPS-RW',
|
|
description: 'Bergabunglah dalam sesi tanya jawab untuk menjawab segala pertanyaan mengenai BPS-RW.',
|
|
thumbnailUrl: 'https://img.youtube.com/vi/_vx9Lzx794o/sddefault.jpg'
|
|
},
|
|
{
|
|
youtubeId: '_vx9Lzx794o',
|
|
title: 'Sosialisasi Program BPS-RW',
|
|
description: 'Tips mensosialisasikan program BPS-RW kepada warga',
|
|
thumbnailUrl: 'https://img.youtube.com/vi/_vx9Lzx794o/sddefault.jpg'
|
|
}
|
|
];
|
|
|
|
const ebooks = [
|
|
{
|
|
title: 'Panduan Praktis BPS-RW',
|
|
description: 'Simak lankah-langkah mudah dan contoh sukses penerapan BPS-RW',
|
|
documentUrl: 'https://drive.google.com/file/d/1Cd5eQFqhqGpgctI6JkE4oiEvE1drFlNc/view?pli=1'
|
|
},
|
|
{
|
|
title: 'Pelatihan Intensif BPS-RW',
|
|
description: 'Pelajari strategi implementasi BPS-RW yang efektif dan berkelanjutan',
|
|
documentUrl: 'https://drive.google.com/file/d/1Cd5eQFqhqGpgctI6JkE4oiEvE1drFlNc/view?pli=1'
|
|
|
|
},
|
|
{
|
|
title: 'Kupas Tuntas BPS-RW',
|
|
description: 'Dapatkan jawaban dari pakar terkait pengelolaan sampah di lingkungan RW',
|
|
documentUrl: 'https://drive.google.com/file/d/1Cd5eQFqhqGpgctI6JkE4oiEvE1drFlNc/view?pli=1'
|
|
|
|
},
|
|
{
|
|
title: 'Forum Diskusi BPS-RW',
|
|
description: 'Diskusi dan bertukar pikiran tentang pengelolaan sampah bersama BPS-RW',
|
|
documentUrl: 'https://drive.google.com/file/d/1Cd5eQFqhqGpgctI6JkE4oiEvE1drFlNc/view?pli=1'
|
|
|
|
},
|
|
{
|
|
title: 'Laporan Tahunan 2024',
|
|
description: 'Laporan pencapaian program BPS-RW Jakarta tahun 2024',
|
|
documentUrl: 'https://drive.google.com/file/d/1Cd5eQFqhqGpgctI6JkE4oiEvE1drFlNc/view?pli=1'
|
|
|
|
}
|
|
];
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
// Filter functionality
|
|
const filterBtns = document.querySelectorAll('.filter-btn');
|
|
const videoSection = document.getElementById('videoSection');
|
|
const ebookSection = document.getElementById('ebookSection');
|
|
|
|
filterBtns.forEach(btn => {
|
|
btn.addEventListener('click', function () {
|
|
const filter = this.getAttribute('data-filter');
|
|
|
|
// Update active button
|
|
filterBtns.forEach(b => {
|
|
b.classList.remove('bg-gray-900', 'text-white');
|
|
b.classList.add('text-gray-600', 'hover:bg-gray-200');
|
|
});
|
|
this.classList.add('bg-gray-900', 'text-white');
|
|
this.classList.remove('text-gray-600', 'hover:bg-gray-200');
|
|
|
|
// Show/hide sections
|
|
if (filter === 'all') {
|
|
videoSection.style.display = 'block';
|
|
ebookSection.style.display = 'block';
|
|
ebookSection.classList.add('mt-12');
|
|
} else if (filter === 'video') {
|
|
videoSection.style.display = 'block';
|
|
ebookSection.style.display = 'none';
|
|
} else if (filter === 'ebook') {
|
|
videoSection.style.display = 'none';
|
|
ebookSection.style.display = 'block';
|
|
ebookSection.classList.remove('mt-12');
|
|
}
|
|
});
|
|
});
|
|
|
|
// Render Videos
|
|
const videoCarousel = document.getElementById('videoCarousel');
|
|
videos.forEach(video => {
|
|
const videoCard = `
|
|
<div class="shrink-0 w-full md:w-[calc(50%-10px)] lg:w-[calc(25%-15px)]">
|
|
<div class="bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
|
|
<div class="relative w-full aspect-video overflow-hidden bg-gray-300" data-video-id="${video.youtubeId}">
|
|
<img src="${video.thumbnailUrl}"
|
|
alt="${video.title}"
|
|
class="absolute inset-0 w-full h-full object-cover video-thumbnail cursor-pointer"
|
|
loading="lazy">
|
|
<div class="absolute inset-0 flex items-center justify-center video-play-btn cursor-pointer">
|
|
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M20 0C8.96 0 0 8.96 0 20C0 31.04 8.96 40 20 40C31.04 40 40 31.04 40 20C40 8.96 31.04 0 20 0ZM16 29V11L28 20L16 29Z" fill="white"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="pt-5">
|
|
<h3 class="text-gray-900 text-xl font-bold font-jakarta mb-2">${video.title}</h3>
|
|
<p class="text-gary-500 text-sm font-normal font-jakarta line-clamp-2">${video.description}</p>
|
|
</div>
|
|
</div>
|
|
`;
|
|
videoCarousel.innerHTML += videoCard;
|
|
});
|
|
|
|
// E-books
|
|
const ebookCarousel = document.getElementById('ebookCarousel');
|
|
ebooks.forEach(ebook => {
|
|
const ebookCard = `
|
|
<div class="shrink-0 w-full md:w-[calc(50%-10px)] lg:w-[calc(25%-15px)]">
|
|
<div class="group">
|
|
<div class="bg-primary-100 min-h-56 rounded-2xl p-12 mb-4 flex items-center justify-center hover:opacity-80 transition-opacity">
|
|
<i class="ph-fill ph-file-text text-8xl text-primary-500"></i>
|
|
</div>
|
|
<h3 class="text-gray-900 text-xl font-bold font-jakarta mb-2">${ebook.title}</h3>
|
|
<p class="text-gray-500 text-sm font-normal font-jakarta mb-4 line-clamp-2">${ebook.description}</p>
|
|
<a href="${ebook.documentUrl}" target="_blank"
|
|
class="block w-full px-6 py-2.5 bg-white rounded-full text-primary-700 text-base font-semibold transition-colors border border-primary-500 text-center">
|
|
Baca Dokumen
|
|
</a>
|
|
</div>
|
|
</div>
|
|
`;
|
|
ebookCarousel.innerHTML += ebookCard;
|
|
});
|
|
|
|
// Lazy load YouTube videos - dipindahkan setelah video cards di-render
|
|
setTimeout(() => {
|
|
const videoContainers = document.querySelectorAll('[data-video-id]');
|
|
|
|
videoContainers.forEach(container => {
|
|
const videoId = container.dataset.videoId;
|
|
|
|
const loadVideo = () => {
|
|
const iframe = document.createElement('iframe');
|
|
iframe.className = 'absolute inset-0 w-full h-full border-0';
|
|
iframe.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
|
|
iframe.title = 'YouTube video player';
|
|
iframe.frameBorder = '0';
|
|
iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share';
|
|
iframe.allowFullscreen = true;
|
|
|
|
// Hide thumbnail and play button
|
|
const thumbnail = container.querySelector('.video-thumbnail');
|
|
const playBtn = container.querySelector('.video-play-btn');
|
|
if (thumbnail) thumbnail.classList.add('hidden');
|
|
if (playBtn) playBtn.classList.add('hidden');
|
|
|
|
container.appendChild(iframe);
|
|
};
|
|
|
|
const thumbnail = container.querySelector('.video-thumbnail');
|
|
const playBtn = container.querySelector('.video-play-btn');
|
|
|
|
if (thumbnail) thumbnail.addEventListener('click', loadVideo);
|
|
if (playBtn) playBtn.addEventListener('click', loadVideo);
|
|
});
|
|
}, 50);
|
|
|
|
// Video Carousel
|
|
const carousel = document.getElementById('videoCarousel');
|
|
const prevBtn = document.getElementById('videoPrevBtn');
|
|
const nextBtn = document.getElementById('videoNextBtn');
|
|
|
|
let currentIndex = 0;
|
|
const totalVideos = videos.length;
|
|
|
|
function getVisibleItems() {
|
|
if (window.innerWidth >= 1024) return 4;
|
|
if (window.innerWidth >= 768) return 2;
|
|
return 1;
|
|
}
|
|
|
|
function updateCarousel() {
|
|
const visibleItems = getVisibleItems();
|
|
const maxIndex = totalVideos - visibleItems;
|
|
|
|
if (currentIndex < 0) currentIndex = 0;
|
|
if (currentIndex > maxIndex) currentIndex = maxIndex;
|
|
|
|
const itemWidth = carousel.children[0]?.offsetWidth || 0;
|
|
const gap = 20;
|
|
const offset = -(currentIndex * (itemWidth + gap));
|
|
|
|
carousel.style.transform = `translateX(${offset}px)`;
|
|
|
|
prevBtn.disabled = currentIndex === 0;
|
|
nextBtn.disabled = currentIndex >= maxIndex;
|
|
|
|
prevBtn.style.opacity = currentIndex === 0 ? '0.5' : '1';
|
|
nextBtn.style.opacity = currentIndex >= maxIndex ? '0.5' : '1';
|
|
}
|
|
|
|
prevBtn.addEventListener('click', function () {
|
|
currentIndex--;
|
|
updateCarousel();
|
|
});
|
|
|
|
nextBtn.addEventListener('click', function () {
|
|
currentIndex++;
|
|
updateCarousel();
|
|
});
|
|
|
|
let resizeTimeout;
|
|
window.addEventListener('resize', function () {
|
|
clearTimeout(resizeTimeout);
|
|
resizeTimeout = setTimeout(function () {
|
|
currentIndex = 0;
|
|
updateCarousel();
|
|
}, 250);
|
|
});
|
|
|
|
setTimeout(updateCarousel, 100);
|
|
|
|
// E-Book Carousel
|
|
const ebookCarouselEl = document.getElementById('ebookCarousel');
|
|
const ebookPrevBtn = document.getElementById('ebookPrevBtn');
|
|
const ebookNextBtn = document.getElementById('ebookNextBtn');
|
|
|
|
let ebookCurrentIndex = 0;
|
|
const totalEbooks = ebooks.length;
|
|
|
|
function updateEbookCarousel() {
|
|
const visibleItems = getVisibleItems();
|
|
const maxIndex = totalEbooks - visibleItems;
|
|
|
|
if (ebookCurrentIndex < 0) ebookCurrentIndex = 0;
|
|
if (ebookCurrentIndex > maxIndex) ebookCurrentIndex = maxIndex;
|
|
|
|
const itemWidth = ebookCarouselEl.children[0]?.offsetWidth || 0;
|
|
const gap = 20;
|
|
const offset = -(ebookCurrentIndex * (itemWidth + gap));
|
|
|
|
ebookCarouselEl.style.transform = `translateX(${offset}px)`;
|
|
|
|
ebookPrevBtn.disabled = ebookCurrentIndex === 0;
|
|
ebookNextBtn.disabled = ebookCurrentIndex >= maxIndex;
|
|
|
|
ebookPrevBtn.style.opacity = ebookCurrentIndex === 0 ? '0.5' : '1';
|
|
ebookNextBtn.style.opacity = ebookCurrentIndex >= maxIndex ? '0.5' : '1';
|
|
}
|
|
|
|
ebookPrevBtn.addEventListener('click', function () {
|
|
ebookCurrentIndex--;
|
|
updateEbookCarousel();
|
|
});
|
|
|
|
ebookNextBtn.addEventListener('click', function () {
|
|
ebookCurrentIndex++;
|
|
updateEbookCarousel();
|
|
});
|
|
|
|
window.addEventListener('resize', function () {
|
|
clearTimeout(resizeTimeout);
|
|
resizeTimeout = setTimeout(function () {
|
|
currentIndex = 0;
|
|
ebookCurrentIndex = 0;
|
|
updateCarousel();
|
|
updateEbookCarousel();
|
|
}, 250);
|
|
});
|
|
|
|
setTimeout(updateEbookCarousel, 100);
|
|
});
|
|
</script> |