The Glory

8.5/10 60m 2023 HD

Seorang wanita berencana balas dendam terhadap para pengganggu yang membuat hidupnya sengsa saat sekolah menengah.

Crash Landing on You

9.0/10 70m 2020 4K

Seorang pewaris Korea Selatan secara tidak sengaja mendarat di Korea Utara dan bertemu dengan perwira militer.

Trending Now

Lihat Semua

Drama Korea Terbaru

Lihat Semua

Drama China

Lihat Semua

Kategori Populer

Romantis Komedi Action Horor Fantasi Medis
/ * Reset & Base */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary: #e50914; --primary-dark: #b20710; --secondary: #221f1f; --light: #f5f5f5; --dark: #141414; --gray: #808080; --gray-light: #e0e0e0; --success: #46d369; --transition: all 0.3s ease; } [data-theme="dark"] { --light: #141414; --dark: #f5f5f5; --secondary: #2d2d2d; --gray-light: #333; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: var(--light); color: var(--dark); line-height: 1.6; transition: var(--transition); } .container { max-width: 1400px; margin: 0 auto; padding: 0 20px; } /* Navigation */ .navbar { background-color: rgba(20, 20, 20, 0.95); position: fixed; top: 0; width: 100%; z-index: 1000; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3); } .nav-container { display: flex; align-items: center; justify-content: space-between; padding: 0 40px; height: 70px; } .logo { display: flex; align-items: center; gap: 10px; font-size: 28px; font-weight: 700; color: var(--primary); text-decoration: none; } .logo i { font-size: 32px; } .nav-menu { display: flex; gap: 30px; margin-left: 40px; } .nav-link { color: var(--gray-light); text-decoration: none; font-size: 16px; font-weight: 500; display: flex; align-items: center; gap: 8px; transition: var(--transition); padding: 8px 0; } .nav-link:hover, .nav-link.active { color: var(--primary); } .nav-actions { display: flex; align-items: center; gap: 15px; } .btn-login, .btn-register { padding: 8px 24px; border-radius: 4px; font-weight: 600; cursor: pointer; transition: var(--transition); border: none; font-size: 14px; } .btn-login { background: transparent; color: var(--gray-light); border: 1px solid var(--gray); } .btn-register { background: var(--primary); color: white; } .btn-login:hover { border-color: var(--primary); color: var(--primary); } .btn-register:hover { background: var(--primary-dark); } .theme-toggle { background: var(--secondary); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--gray-light); transition: var(--transition); } .theme-toggle:hover { color: var(--primary); transform: rotate(30deg); } .menu-toggle { display: none; background: none; border: none; color: white; font-size: 24px; cursor: pointer; } /* Hero Section */ .hero { margin-top: 70px; height: 80vh; min-height: 600px; position: relative; } .hero-swiper { width: 100%; height: 100%; } .hero-slide { background-size: cover !important; background-position: center !important; display: flex; align-items: center; padding: 0 60px; } .hero-content { max-width: 600px; color: white; animation: fadeInUp 1s ease; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .hero-title { font-size: 3.5rem; margin-bottom: 20px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); } .hero-meta { display: flex; gap: 20px; margin-bottom: 25px; font-size: 18px; } .hero-meta span { display: flex; align-items: center; gap: 5px; } .rating { color: var(--success); } .quality { background: rgba(255, 255, 255, 0.2); padding: 2px 8px; border-radius: 3px; font-size: 14px; } .hero-description { font-size: 18px; line-height: 1.8; margin-bottom: 30px; opacity: 0.9; } .hero-actions { display: flex; gap: 20px; } .btn-watch, .btn-info { padding: 15px 30px; font-size: 18px; border-radius: 5px; border: none; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: var(--transition); font-weight: 600; } .btn-watch { background: var(--primary); color: white; } .btn-info { background: rgba(255, 255, 255, 0.2); color: white; backdrop-filter: blur(10px); } .btn-watch:hover { background: var(--primary-dark); transform: translateY(-2px); } .btn-info:hover { background: rgba(255, 255, 255, 0.3); } .swiper-pagination-bullet { width: 12px !important; height: 12px !important; background: white !important; opacity: 0.5 !important; } .swiper-pagination-bullet-active { opacity: 1 !important; background: var(--primary) !important; } /* Content Sections */ .section { margin: 50px 0; padding: 0 40px; } .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; } .section-header h2 { font-size: 28px; display: flex; align-items: center; gap: 10px; } .see-all { color: var(--primary); text-decoration: none; font-weight: 600; transition: var(--transition); } .see-all:hover { color: var(--primary-dark); } /* Video Grid */ .video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 25px; margin-top: 20px; } .video-card { background: var(--secondary); border-radius: 10px; overflow: hidden; transition: var(--transition); cursor: pointer; position: relative; } .video-card:hover { transform: translateY(-10px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); } .video-card:hover .video-thumbnail img { transform: scale(1.1); } .video-thumbnail { height: 300px; overflow: hidden; position: relative; } .video-thumbnail img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .video-badge { position: absolute; top: 10px; right: 10px; background: var(--primary); color: white; padding: 4px 8px; border-radius: 3px; font-size: 12px; font-weight: 600; } .video-info { padding: 15px; } .video-title { font-size: 16px; font-weight: 600; margin-bottom: 8px; color: white; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .video-meta { display: flex; justify-content: space-between; color: var(--gray); font-size: 14px; } .video-rating { color: var(--success); } /* Categories */ .categories-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px; margin-top: 20px; } .category-card { background: var(--secondary); border-radius: 10px; padding: 30px 20px; text-align: center; text-decoration: none; color: white; transition: var(--transition); display: flex; flex-direction: column; align-items: center; gap: 15px; } .category-card:hover { background: var(--primary); transform: translateY(-5px); } .category-card i { font-size: 40px; color: var(--primary); } .category-card:hover i { color: white; } .category-card span { font-size: 18px; font-weight: 600; } /* Footer */ .footer { background: var(--secondary); color: white; margin-top: 80px; padding: 50px 40px 20px; } .footer-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; margin-bottom: 40px; } .footer-section h3 { color: var(--primary); font-size: 28px; margin-bottom: 15px; } .footer-section h4 { margin-bottom: 20px; font-size: 18px; } .footer-section p { color: var(--gray); margin-bottom: 20px; line-height: 1.8; } .footer-section a { display: block; color: var(--gray); text-decoration: none; margin-bottom: 10px; transition: var(--transition); } .footer-section a:hover { color: var(--primary); padding-left: 5px; } .social-links { display: flex; gap: 15px; margin-top: 20px; } .social-links a { width: 40px; height: 40px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 18px; transition: var(--transition); } .social-links a:hover { background: var(--primary); transform: translateY(-3px); } .btn-app { width: 100%; padding: 12px; background: rgba(255, 255, 255, 0.1); border: none; border-radius: 8px; color: white; display: flex; align-items: center; gap: 15px; margin-bottom: 15px; cursor: pointer; transition: var(--transition); } .btn-app:hover { background: rgba(255, 255, 255, 0.2); } .btn-app i { font-size: 30px; } .btn-app div { display: flex; flex-direction: column; align-items: flex-start; } .btn-app span { font-size: 12px; } .btn-app strong { font-size: 16px; } .footer-bottom { text-align: center; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); color: var(--gray); font-size: 14px; } .footer-bottom p { margin: 5px 0; } /* Modal */ .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); z-index: 2000; align-items: center; justify-content: center; padding: 20px; } .modal.active { display: flex; } .modal-content { background: var(--secondary); border-radius: 15px; max-width: 900px; width: 100%; max-height: 90vh; overflow: hidden; animation: modalIn 0.3s ease; } @keyframes modalIn { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 30px; background: rgba(0, 0, 0, 0.3); color: white; } .close-modal { background: none; border: none; color: white; font-size: 30px; cursor: pointer; transition: var(--transition); } .close-modal:hover { color: var(--primary); } .modal-body { padding: 0; } .video-player { width: 100%; height: 500px; } .video-player video { width: 100%; height: 100%; object-fit: cover; } .video-info { padding: 20px 30px; color: white; } .video-info h4 { font-size: 24px; margin-bottom: 10px; } .video-info p { color: var(--gray); line-height: 1.6; } /* Responsive */ @media (max-width: 1200px) { .nav-menu { gap: 20px; margin-left: 20px; } } @media (max-width: 992px) { .hero-title { font-size: 2.5rem; } .video-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } } @media (max-width: 768px) { .nav-container { padding: 0 20px; } .menu-toggle { display: block; } .nav-menu { position: fixed; top: 70px; left: -100%; width: 100%; height: calc(100vh - 70px); background: var(--secondary); flex-direction: column; padding: 40px 20px; transition: var(--transition); } .nav-menu.active { left: 0; } .hero-slide { padding: 0 20px; } .hero-title { font-size: 2rem; } .hero-description { font-size: 16px; } .btn-watch, .btn-info { padding: 12px 20px; font-size: 16px; } .section { padding: 0 20px; } .video-player { height: 300px; } } @media (max-width: 576px) { .hero { height: 70vh; min-height: 500px; } .hero-meta { flex-wrap: wrap; gap: 10px; } .hero-actions { flex-direction: column; gap: 10px; } .video-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; } .categories-grid { grid-template-columns: repeat(2, 1fr); } } // Sample Data const videoData = { trending: [ { id: 1, title: "The Glory", thumbnail: "https://images.unsplash.com/photo-1574267432553-4b4628081c31?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80", rating: 8.5, year: 2023, duration: "60m", quality: "HD", category: "Drama Korea", description: "Kisah balas dendam seorang wanita terhadap mantan pengganggunya." }, { id: 2, title: "Crash Landing on You", thumbnail: "https://images.unsplash.com/photo-1551029506-0807df4e2031?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80", rating: 9.0, year: 2020, duration: "70m", quality: "4K", category: "Drama Korea", description: "Cinta terlarang antara Korea Selatan dan Utara." }, { id: 3, title: "Vincenzo", thumbnail: "https://images.unsplash.com/photo-1626814026160-2237a95fc5a0?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80", rating: 8.7, year: 2021, duration: "75m", quality: "HD", category: "Drama Korea", description: "Pengacara Italia-Korea yang bekerja dengan pengacara." }, { id: 4, title: "Squid Game", thumbnail: "https://images.unsplash.com/photo-1635805737707-575885ab0820?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80", rating: 8.8, year: 2021, duration: "60m", quality: "4K", category: "Drama Korea", description: "Kompetisi bertahan hidup dengan permainan anak-anak." }, { id: 5, title: "Goblin", thumbnail: "https://images.unsplash.com/photo-1543536448-d209d2d13a1c?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80", rating: 8.9, year: 2016, duration: "90m", quality: "HD", category: "Drama Korea", description: "Dewa abadi mencari pengantin manusianya." } ], korean: [ { id: 6, title: "Itaewon Class", thumbnail: "https://images.unsplash.com/photo-1489599809516-9827b6d1cf13?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80", rating: 8.4, year: 2020, duration: "70m", quality: "HD", category: "Drama Korea", description: "Pemuda membuka restoran untuk membalas dendam." }, { id: 7, title: "Start-Up", thumbnail: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80", rating: 8.2, year: 2020, duration: "65m", quality: "HD", category: "Drama Korea", description: "Perjuangan startup di dunia teknologi." }, { id: 8, title: "Hospital Playlist", thumbnail: "https://images.unsplash.com/photo-1586773860418-dc22f8b874bc?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80", rating: 9.2, year: 2020, duration: "90m", quality: "HD", category: "Drama Korea", description: "Kisah persahabatan dokter di rumah sakit." }, { id: 9, title: "Extraordinary Attorney Woo", thumbnail: "https://images.unsplash.com/photo-1589829545856-d10d557cf95f?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80", rating: 8.8, year: 2022, duration: "70m", quality: "4K", category: "Drama Korea", description: "Pengacara autis yang jenius." }, { id: 10, title: "My Love from the Star", thumbnail: "https://images.unsplash.com/photo-1518709268805-4e9042af2176?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80", rating: 8.6, year: 2014, duration: "60m", quality: "HD", category: "Drama Korea", description: "Alien jatuh cinta dengan aktris top." } ], chinese: [ { id: 11, title: "The Untamed", thumbnail: "https://images.unsplash.com/photo-1545569341-9eb8b30979d9?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80", rating: 9.1, year: 2019, duration: "45m", quality: "HD", category: "Drama China", description: "Kisah persahabatan dan sihir di dunia cultivation." }, { id: 12, title: "Eternal Love", thumbnail: "https://images.unsplash.com/photo-1536440136628-849c177e76a1?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80", rating: 8.9, year: 2017, duration: "45m", quality: "HD", category: "Drama China", description: "Dewa jatuh cinta dengan peri." }, { id: 13, title: "Word of Honor", thumbnail: "https://images.unsplash.com/photo-1595769812725-4c6564f7528b?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80", rating: 8.8, year: 2021, duration: "45m", quality: "HD", category: "Drama China", description: "Persahabatan di dunia Jianghu." }, { id: 14, title: "Love Between Fairy and Devil", thumbnail: "https://images.unsplash.com/photo-1517604931442-7e0c8ed2963c?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80", rating: 9.0, year: 2022, duration: "45m", quality: "4K", category: "Drama China", description: "Peri jatuh cinta dengan iblis." }, { id: 15, title: "Joy of Life", thumbnail: "https://images.unsplash.com/photo-1542204165-65bf26472b9b?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80", rating: 8.7, year: 2019, duration: "45m", quality: "HD", category: "Drama China", description: "Pemuda modern terlahir di dunia kuno." } ] }; // Initialize Swiper const heroSwiper = new Swiper('.hero-swiper', { slidesPerView: 1, spaceBetween: 0, loop: true, autoplay: { delay: 5000, disableOnInteraction: false, }, pagination: { el: '.swiper-pagination', clickable: true, }, speed: 1000, effect: 'fade', fadeEffect: { crossFade: true } }); // DOM Elements const menuToggle = document.querySelector('.menu-toggle'); const navMenu = document.querySelector('.nav-menu'); const themeToggle = document.querySelector('.theme-toggle'); const videoModal = document.getElementById('videoModal'); const modalVideo = document.getElementById('modalVideo'); const videoTitle = document.getElementById('videoTitle'); const videoDescription = document.getElementById('videoDescription'); const closeModal = document.querySelector('.close-modal'); // Toggle Mobile Menu menuToggle.addEventListener('click', () => { navMenu.classList.toggle('active'); menuToggle.innerHTML = navMenu.classList.contains('active') ? '' : ''; }); // Toggle Theme themeToggle.addEventListener('click', () => { const currentTheme = document.documentElement.getAttribute('data-theme'); const newTheme = currentTheme === 'dark' ? 'light' : 'dark'; document.documentElement.setAttribute('data-theme', newTheme); themeToggle.innerHTML = newTheme === 'dark' ? '' : ''; localStorage.setItem('theme', newTheme); }); // Load saved theme const savedTheme = localStorage.getItem('theme'); if (savedTheme) { document.documentElement.setAttribute('data-theme', savedTheme); themeToggle.innerHTML = savedTheme === 'dark' ? '' : ''; } // Render video cards function renderVideoCards(containerId, videos) { const container = document.getElementById(containerId); container.innerHTML = ''; videos.forEach(video => { const card = document.createElement('div'); card.className = 'video-card'; card.dataset.id = video.id; card.innerHTML = `
${video.title}
${video.quality}

${video.title}

${video.rating} ${video.year}
`; card.addEventListener('click', () => openVideoModal(video)); container.appendChild(card); }); } // Open video modal function openVideoModal(video) { videoModal.classList.add('active'); document.body.style.overflow = 'hidden'; videoTitle.textContent = video.title; videoDescription.textContent = video.description; // In production, you would use actual video URLs modalVideo.src = 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'; modalVideo.load(); } // Close video modal function closeVideoModal() { videoModal.classList.remove('active'); document.body.style.overflow = 'auto'; modalVideo.pause(); } // Event Listeners closeModal.addEventListener('click', closeVideoModal); videoModal.addEventListener('click', (e) => { if (e.target === videoModal) { closeVideoModal(); } }); // Close modal with Escape key document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && videoModal.classList.contains('active')) { closeVideoModal(); } }); // Initialize video grids renderVideoCards('trending-grid', videoData.trending); renderVideoCards('korean-grid', videoData.korean); renderVideoCards('chinese-grid', videoData.chinese); // Search functionality const searchInput = document.createElement('input'); searchInput.type = 'text'; searchInput.placeholder = 'Cari film atau drama...'; searchInput.className = 'search-input'; // Add search to navbar const searchNav = document.querySelector('.nav-link[href="#"]:nth-child(6)'); searchNav.addEventListener('click', (e) => { e.preventDefault(); if (!document.querySelector('.search-overlay')) { const overlay = document.createElement('div'); overlay.className = 'search-overlay'; overlay.innerHTML = `

Cari Film & Drama

`; document.body.appendChild(overlay); const closeSearch = overlay.querySelector('.close-search'); const searchMain = overlay.querySelector('.search-main'); const searchResults = overlay.querySelector('.search-results'); closeSearch.addEventListener('click', () => { overlay.remove(); }); overlay.addEventListener('click', (e) => { if (e.target === overlay) { overlay.remove(); } }); searchMain.addEventListener('input', debounce(function(e) { const query = e.target.value.toLowerCase(); if (query.length < 2) { searchResults.innerHTML = ''; return; } const allVideos = [...videoData.trending, ...videoData.korean, ...videoData.chinese]; const results = allVideos.filter(video => video.title.toLowerCase().includes(query) || video.description.toLowerCase().includes(query) ); displaySearchResults(results, searchResults); }, 300)); searchMain.focus(); } }); function displaySearchResults(results, container) { if (results.length === 0) { container.innerHTML = '

Tidak ditemukan hasil pencarian.

'; return; } container.innerHTML = results.map(video => `
${video.title}

${video.title}

${video.category} ${video.year} ${video.rating}/10

${video.description.substring(0, 100)}...

`).join(''); // Add click event to results container.querySelectorAll('.search-result-item').forEach(item => { item.addEventListener('click', () => { const videoId = parseInt(item.dataset.id); const allVideos = [...videoData.trending, ...videoData.korean, ...videoData.chinese]; const video = allVideos.find(v => v.id === videoId); if (video) { document.querySelector('.search-overlay')?.remove(); openVideoModal(video); } }); }); } // Debounce function for search function debounce(func, wait) { let timeout; return function executedFunction(...args) { const later = () => { clearTimeout(timeout); func(...args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; } // Add scroll effect to navbar window.addEventListener('scroll', () => { const navbar = document.querySelector('.navbar'); if (window.scrollY > 100) { navbar.style.background = 'rgba(20, 20, 20, 0.98)'; navbar.style.backdropFilter = 'blur(10px)'; } else { navbar.style.background = 'rgba(20, 20, 20, 0.95)'; navbar.style.backdropFilter = 'none'; } }); // Initialize document.addEventListener('DOMContentLoaded', () => { console.log('StreamFlix loaded successfully!'); });