468 lines
21 KiB
Plaintext
468 lines
21 KiB
Plaintext
<div class="relative py-16 bg-white video-theater-container overflow-hidden">
|
|
<!-- Ambient background with subtle pattern -->
|
|
<div class="absolute inset-0">
|
|
<div class="absolute inset-0 opacity-10">
|
|
<div class="absolute inset-0 bg-grid-pattern"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="max-w-7xl mx-auto px-4 relative z-10">
|
|
<!-- Header Section -->
|
|
<div class="text-center mb-12" data-aos="fade-down" data-aos-delay="300">
|
|
<div class="inline-flex items-center gap-2 bg-oren px-5 py-2 rounded-full mb-6 relative overflow-hidden group">
|
|
<div class="absolute inset-0 bg-white/20 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-700"></div>
|
|
<span class="relative w-2 h-2 bg-white rounded-full animate-ping-slow"></span>
|
|
<span class="relative text-white font-medium text-xs uppercase tracking-wider">Video Terbaru</span>
|
|
</div>
|
|
|
|
<h2 class="text-2xl md:text-3xl font-bold text-gray-800 mb-6">
|
|
<span class="relative inline-block">
|
|
Video Terkini
|
|
</span>
|
|
</h2>
|
|
|
|
<p class="text-gray-600 text-lg max-w-2xl mx-auto leading-relaxed">
|
|
Ikuti akun resmi DLH untuk berita, edukasi, dan ajakan aksi lingkungan langsung dari sumber terpercaya.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Main Video Theater -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8 max-w-6xl mx-auto" data-aos="fade-up" data-aos-delay="400">
|
|
<!-- Left Column: Main Video -->
|
|
<div class="md:col-span-2">
|
|
<div class="video-theater rounded-xl overflow-hidden shadow-xl relative">
|
|
<div class="aspect-video relative z-10">
|
|
<iframe id="mainVideoEmbed" width="100%" height="100%" src="https://www.youtube.com/embed/05NdDFoOHPE?si=NbGEtdA7nMfGbDoI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen class="absolute inset-0"></iframe>
|
|
|
|
<div id="videoOverlay" class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/30 to-black/10 flex items-center justify-center cursor-pointer transition-opacity group">
|
|
<div class="play-button-container relative transform transition-all duration-500 group-hover:scale-110">
|
|
<div class="absolute inset-0 bg-orange-600 rounded-full opacity-20 animate-ping-slow"></div>
|
|
<div class="relative bg-gradient-to-br from-orange-500 to-orange-600 rounded-full p-1 group-hover:from-orange-400 group-hover:to-orange-600 transition-all duration-300">
|
|
<div class="bg-white/10 backdrop-blur-sm rounded-full p-4">
|
|
<svg class="w-8 h-8 text-white ml-1" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M8 5.14v14l11-7-11-7z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Video Info Overlay -->
|
|
<div class="absolute bottom-0 left-0 right-0 p-4 z-20 bg-gradient-to-t from-black via-black/80 to-transparent">
|
|
<div class="video-info-container">
|
|
<h3 id="mainVideoTitle" class="text-white text-lg font-bold video-title">Selamat Hari Lingkungan Hidup, 5 Juni 2025. #GubernurJakarta</h3>
|
|
<p id="mainVideoDescription" class="text-slate-300 text-sm max-w-3xl mt-1 video-description line-clamp-2">
|
|
Saya Pramono Anung, Gubernur Jakarta. Menyampaikan pada Hari Lingkungan Hidup tahun 2025, Pemerintah Provinsi DKI Jakarta berkolaborasi dengan Breathe Jakarta dan Clean Air Asia (CAA), akan memperingatinya dengan langkah bersama untuk mengurangi emisi polutan udara melalui perubahan mobilisasi yang bersih.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Right Column: Video Thumbnails -->
|
|
<div class="md:col-span-1">
|
|
<div class="h-full flex flex-col">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<h3 class="text-gray-800 text-sm font-medium">Video Lainnya</h3>
|
|
<div class="flex items-center space-x-2">
|
|
<button id="prev-video" class="bg-gray-100 text-gray-600 p-1.5 rounded-full hover:bg-orange-500 hover:text-white transition-colors duration-300">
|
|
<svg class="w-3 h-3" 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="next-video" class="bg-gray-100 text-gray-600 p-1.5 rounded-full hover:bg-orange-500 hover:text-white transition-colors duration-300">
|
|
<svg class="w-3 h-3" 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>
|
|
|
|
<!-- Vertical Thumbnails Container -->
|
|
<div class="overflow-y-auto video-thumbnails-container h-[350px] pr-1 border rounded-xl border-gray-200 bg-gray-50 shadow-sm">
|
|
<div id="thumbnails-container" class="flex flex-col space-y-2 p-2">
|
|
<!-- Thmbnail ada di JS -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CTA Button -->
|
|
<div class="text-center mt-12" data-aos="fade-up" data-aos-delay="600">
|
|
<button class="relative inline-flex items-center justify-center overflow-hidden rounded-lg group bg-gradient-to-br from-orange-500 to-orange-600 p-0.5 font-medium hover:shadow-lg hover:shadow-orange-200 transition-all duration-300">
|
|
<span class="relative rounded-md bg-white px-8 py-3.5 transition-all duration-500 ease-in-out group-hover:bg-opacity-0 group-hover:text-white">
|
|
<span class="relative flex items-center gap-2">
|
|
Lihat Semua Video
|
|
<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="M14 5l7 7m0 0l-7 7m7-7H3"></path>
|
|
</svg>
|
|
</span>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<register-block dynamic-section="css" key="cssVideo">
|
|
<style>
|
|
/* Animation keyframes */
|
|
@@keyframes ping-slow {
|
|
0% { transform: scale(1); opacity: 1; }
|
|
75%, 100% { transform: scale(2); opacity: 0; }
|
|
}
|
|
|
|
@@keyframes pulse-slow {
|
|
0%, 100% { opacity: 0.2; }
|
|
50% { opacity: 0.3; }
|
|
}
|
|
|
|
@@keyframes pulse-slow-delay {
|
|
0%, 100% { opacity: 0.2; }
|
|
50% { opacity: 0.3; }
|
|
}
|
|
|
|
.animate-ping-slow {
|
|
animation: ping-slow 2s cubic-bezier(0, 0, 0.2, 1) infinite;
|
|
}
|
|
|
|
.animate-pulse-slow {
|
|
animation: pulse-slow 6s ease-in-out infinite;
|
|
}
|
|
|
|
.animate-pulse-slow-delay {
|
|
animation: pulse-slow-delay 6s ease-in-out 3s infinite;
|
|
}
|
|
|
|
/* Grid background pattern */
|
|
.bg-grid-pattern {
|
|
background-image: radial-gradient(circle, #7e7e7e 1px, transparent 1px);
|
|
background-size: 30px 30px;
|
|
}
|
|
|
|
/* Hover glow effect */
|
|
.hover\:shadow-glow:hover {
|
|
box-shadow: 0 0 25px rgba(59, 130, 246, 0.3);
|
|
}
|
|
|
|
/* Video theater styling - modified for light theme */
|
|
.video-theater::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -3px;
|
|
left: -3px;
|
|
right: -3px;
|
|
bottom: -3px;
|
|
background: linear-gradient(45deg, #3b82f6, #4f46e5, #3b82f6);
|
|
border-radius: inherit;
|
|
z-index: 0;
|
|
opacity: 0.3;
|
|
filter: blur(8px);
|
|
}
|
|
|
|
/* Video reflection effect */
|
|
.video-reflection {
|
|
background: linear-gradient(to bottom, rgba(59, 130, 246, 0.15), transparent);
|
|
backdrop-filter: blur(10px);
|
|
transform: scaleY(-1);
|
|
mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
|
|
-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
|
|
}
|
|
|
|
/* Video title and description transitions */
|
|
.video-title, .video-description {
|
|
transition: opacity 0.5s ease, transform 0.5s ease;
|
|
}
|
|
|
|
/* Thumbnail styling */
|
|
.video-thumbnail {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.video-thumbnail.active {
|
|
transform: translateY(-8px);
|
|
}
|
|
|
|
/* Modern scrollbar for thumbnails */
|
|
.thumbnails-container::-webkit-scrollbar {
|
|
height: 8px;
|
|
}
|
|
|
|
.thumbnails-container::-webkit-scrollbar-track {
|
|
background: rgba(255,255,255,0.05);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.thumbnails-container::-webkit-scrollbar-thumb {
|
|
background: rgba(255,255,255,0.2);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Additional styles for the vertical thumbnails layout */
|
|
.video-thumbnails-container {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(100,100,100,0.2) rgba(220,220,220,0.1);
|
|
}
|
|
|
|
.video-thumbnails-container::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
|
|
.video-thumbnails-container::-webkit-scrollbar-track {
|
|
background: rgba(220,220,220,0.3);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.video-thumbnails-container::-webkit-scrollbar-thumb {
|
|
background: rgba(100,100,100,0.3);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.video-thumbnails-container::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(100,100,100,0.5);
|
|
}
|
|
|
|
/* Thumbnail modifications for vertical layout */
|
|
.video-thumbnail.vertical {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.video-thumbnail.vertical.active {
|
|
transform: translateX(-4px);
|
|
}
|
|
</style>
|
|
</register-block>
|
|
|
|
<register-block dynamic-section="scripts" key="jsVideo">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
|
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Initialize AOS
|
|
AOS.init({
|
|
duration: 1000,
|
|
once: true
|
|
});
|
|
|
|
// Video Data
|
|
const videoData = [
|
|
{
|
|
id: '05NdDFoOHPE',
|
|
title: 'Selamat Hari Lingkungan Hidup, 5 Juni 2025. #GubernurJakarta',
|
|
description: 'Saya Pramono Anung, Gubernur Jakarta. Menyampaikan pada Hari Lingkungan Hidup tahun 2025, Pemerintah Provinsi DKI Jakarta berkolaborasi dengan Breathe Jakarta dan Clean Air Asia (CAA), akan memperingatinya dengan langkah bersama untuk mengurangi emisi polutan udara melalui perubahan mobilisasi yang bersih.',
|
|
date: '5 Juni 2025'
|
|
},
|
|
{
|
|
id: 'HW-ZIPBeKs4',
|
|
title: 'Operasi Gabungan Uji Emisi Kendaraan Berat',
|
|
description: 'Operasi Gabungan Uji Emisi Kendaraan Berat digelar Selasa, 15 April 2025 di Jl. TB Simatupang, Ciracas, Jakarta Timur.',
|
|
date: '18 Mei 2023'
|
|
},
|
|
{
|
|
id: 'F0R5Wu2EY5c',
|
|
title: 'Kolaborasi Nyata Wujudkan Kampung Iklim',
|
|
description: 'RW 01 Pondok Bambu menjadi lokasi pelaksanaan Forum Grup Diskusi Program Kampung Iklim yang diinisiasi oleh Dinas Lingkungan Hidup Provinsi DKI Jakarta bersama Pertamina Retail dan masyarakat setempat. ',
|
|
date: '10 Mei 2023'
|
|
},
|
|
{
|
|
id: 'jNQXAC9IVRw',
|
|
title: 'Monitoring Kualitas Udara',
|
|
description: 'Sistem monitoring kualitas udara real-time untuk menjaga kesehatan masyarakat Jakarta.',
|
|
date: '5 Mei 2023'
|
|
},
|
|
{
|
|
id: 'OPf0YbXqDm0',
|
|
title: 'Gerakan Reboisasi Perkotaan',
|
|
description: 'Program penanaman pohon untuk meningkatkan kualitas udara dan menciptakan ruang hijau di Jakarta.',
|
|
date: '28 April 2023'
|
|
},
|
|
{
|
|
id: 'uelHwf8o7_U',
|
|
title: 'Penanganan Banjir Terintegrasi',
|
|
description: 'Sistem penanganan banjir terintegrasi melalui kolaborasi berbagai instansi dan masyarakat.',
|
|
date: '21 April 2023'
|
|
}
|
|
];
|
|
|
|
// DOM Elements
|
|
const mainVideoEmbed = document.getElementById('mainVideoEmbed');
|
|
const mainTitle = document.getElementById('mainVideoTitle');
|
|
const mainDescription = document.getElementById('mainVideoDescription');
|
|
const mainVideoDate = document.getElementById('mainVideoDate');
|
|
const videoOverlay = document.getElementById('videoOverlay');
|
|
const thumbnailsContainer = document.getElementById('thumbnails-container');
|
|
const prevBtn = document.getElementById('prev-video');
|
|
const nextBtn = document.getElementById('next-video');
|
|
|
|
// Track Current Video and Position
|
|
let currentVideoId = videoData[0].id;
|
|
let currentVideoIndex = 0;
|
|
let thumbnailsScrollPosition = 0;
|
|
const visibleThumbnails = 4; // Number of visible thumbnails in the container
|
|
|
|
// Generate Video Thumbnails for vertical layout
|
|
videoData.forEach((video, index) => {
|
|
const thumbnailElement = document.createElement('div');
|
|
thumbnailElement.className = `video-thumbnail vertical ${index === 0 ? 'active' : ''} flex-shrink-0`;
|
|
thumbnailElement.setAttribute('data-video-id', video.id);
|
|
thumbnailElement.setAttribute('data-index', index);
|
|
|
|
thumbnailElement.innerHTML = `
|
|
<div class="rounded-lg overflow-hidden transition-all duration-300 group ${index === 0 ? 'border-l-4 border-orange-500 bg-orange-50/50' : 'hover:bg-gray-100'}">
|
|
<div class="flex items-center p-1">
|
|
<div class="flex-shrink-0 w-24 h-16 relative rounded-md overflow-hidden">
|
|
<img src="https://img.youtube.com/vi/${video.id}/mqdefault.jpg" alt="${video.title}"
|
|
class="w-full h-full object-cover">
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-60"></div>
|
|
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
|
<div class="w-8 h-8 bg-orange-600/80 rounded-full flex items-center justify-center">
|
|
<svg class="w-3 h-3 text-white ml-0.5" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M8 5v14l11-7z"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ml-3 flex-1 min-w-0">
|
|
<h4 class="text-gray-800 font-medium text-sm line-clamp-2 group-hover:text-orange-700 transition-colors duration-300 cursor-pointer">${video.title}</h4>
|
|
<p class="text-gray-500 text-xs mt-1">${video.date}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
thumbnailsContainer.appendChild(thumbnailElement);
|
|
|
|
// Click handler
|
|
thumbnailElement.addEventListener('click', function() {
|
|
const index = parseInt(this.getAttribute('data-index'));
|
|
changeVideo(index);
|
|
});
|
|
});
|
|
|
|
// All thumbnails after generation
|
|
const thumbnails = document.querySelectorAll('.video-thumbnail');
|
|
|
|
// Function to change the current video
|
|
function changeVideo(index) {
|
|
if (index < 0 || index >= videoData.length) return;
|
|
|
|
// Update current index
|
|
currentVideoIndex = index;
|
|
currentVideoId = videoData[index].id;
|
|
|
|
// Update main video
|
|
mainVideoEmbed.src = `https://www.youtube.com/embed/${currentVideoId}`;
|
|
|
|
// Animate title and description change
|
|
gsap.timeline()
|
|
.to([mainTitle, mainDescription, mainVideoDate], {opacity: 0, x: -20, duration: 0.2})
|
|
.call(() => {
|
|
mainTitle.textContent = videoData[index].title;
|
|
mainDescription.textContent = videoData[index].description;
|
|
mainVideoDate.textContent = videoData[index].date;
|
|
})
|
|
.to([mainTitle, mainDescription, mainVideoDate], {opacity: 1, x: 0, duration: 0.3, stagger: 0.1});
|
|
|
|
// Update active thumbnail
|
|
thumbnails.forEach((thumbnail, i) => {
|
|
const thumbnailDiv = thumbnail.querySelector('div');
|
|
if (i === index) {
|
|
thumbnail.classList.add('active');
|
|
thumbnailDiv.classList.add('border-l-4', 'border-orange-500', 'bg-orange-50/50');
|
|
thumbnailDiv.classList.remove('hover:bg-gray-100');
|
|
} else {
|
|
thumbnail.classList.remove('active');
|
|
thumbnailDiv.classList.remove('border-l-4', 'border-orange-500', 'bg-orange-50/50');
|
|
thumbnailDiv.classList.add('hover:bg-gray-100');
|
|
}
|
|
});
|
|
|
|
// Show overlay
|
|
videoOverlay.style.display = 'flex';
|
|
|
|
// Ensure the active thumbnail is visible by scrolling it into view
|
|
ensureThumbnailVisible(index);
|
|
}
|
|
|
|
// Function to ensure the selected thumbnail is visible
|
|
function ensureThumbnailVisible(index) {
|
|
const thumbElement = thumbnails[index];
|
|
if (!thumbElement) return;
|
|
|
|
// Scroll the thumbnail into view
|
|
thumbElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
|
}
|
|
|
|
// Navigation functionality
|
|
function navigateVideos(direction) {
|
|
let newIndex = currentVideoIndex + direction;
|
|
|
|
// Handle boundary conditions
|
|
if (newIndex < 0) {
|
|
newIndex = videoData.length - 1;
|
|
} else if (newIndex >= videoData.length) {
|
|
newIndex = 0;
|
|
}
|
|
|
|
changeVideo(newIndex);
|
|
}
|
|
|
|
// Navigation button click handlers
|
|
prevBtn.addEventListener('click', () => navigateVideos(-1));
|
|
nextBtn.addEventListener('click', () => navigateVideos(1));
|
|
|
|
// Play video functionality
|
|
videoOverlay.addEventListener('click', function() {
|
|
mainVideoEmbed.src = `https://www.youtube.com/embed/${currentVideoId}?autoplay=1`;
|
|
gsap.to(videoOverlay, {opacity: 0, duration: 0.5, onComplete: () => {
|
|
videoOverlay.style.display = 'none';
|
|
}});
|
|
});
|
|
|
|
// Add keyboard navigation
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
|
|
navigateVideos(-1);
|
|
} else if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
|
|
navigateVideos(1);
|
|
}
|
|
});
|
|
|
|
// Clean up video hover effect to be more subtle
|
|
const videoTheater = document.querySelector('.video-theater');
|
|
|
|
videoTheater.addEventListener('mousemove', function(e) {
|
|
const rect = this.getBoundingClientRect();
|
|
const x = e.clientX - rect.left;
|
|
const y = e.clientY - rect.top;
|
|
|
|
const centerX = rect.width / 2;
|
|
const centerY = rect.height / 2;
|
|
|
|
// Make the effect more subtle
|
|
const moveX = (x - centerX) / 50;
|
|
const moveY = (y - centerY) / 50;
|
|
|
|
gsap.to(this, {
|
|
rotateY: moveX,
|
|
rotateX: -moveY,
|
|
transformPerspective: 1000,
|
|
transformOrigin: 'center center',
|
|
ease: 'power1.out',
|
|
duration: 0.5
|
|
});
|
|
});
|
|
|
|
videoTheater.addEventListener('mouseleave', function() {
|
|
gsap.to(this, {
|
|
rotateY: 0,
|
|
rotateX: 0,
|
|
duration: 0.5,
|
|
ease: 'power1.out'
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</register-block> |