Hugging Face's logo

Spaces:
nkjoy
/
tvdian
Running

App Files Community
tvdian / index.html
nkjoy's picture
nkjoy
μ˜ν™” νŽ˜μ΄μ§€ λ§Œλ“€μ–΄μ€˜ - Follow Up Deployment
80563f7 verified
raw
history blame contribute delete
28.9 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>μ‘°μ„ μ˜ν™”</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
#movie-player {
 transition: opacity 0.3s ease;
 }
.aspect-w-16 {
 position: relative;
 padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
 }
.aspect-h-9 {
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 }
body {
 font-family: 'Poppins', sans-serif;
 background-color: #0f172a;
 color: #f8fafc;
 }
.hero {
 background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
url('https://image.tmdb.org/t/p/original/wwemzKWzjKYJFfCeiB57q3r4Bcm.png');
 background-size: cover;
 background-position: center;
 height: 80vh;
 }
.movie-card {
 transition: transform 0.3s ease;
 }
.movie-card:hover {
 transform: scale(1.05);
 }
.movie-card:hover .play-icon {
 opacity: 1;
 }
.play-icon {
 opacity: 0;
 transition: opacity 0.3s ease;
 }
.category-btn.active {
 background-color: #3b82f6;
 color: white;
 }
 </style>
</head>
<body>
 <!-- Navigation -->
 <nav class="bg-gray-900 bg-opacity-90 fixed w-full z-10">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="flex items-center justify-between h-16">
 <div class="flex items-center">
 <div class="flex-shrink-0">
 <span class="text-blue-500 font-bold text-2xl">CineStream</span>
 </div>
 <div class="hidden md:block">
 <div class="ml-10 flex items-baseline space-x-4">
 <a href="index.html" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">ν™ˆ</a>
 <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">μ˜ν™”</a>
 <a href="tv.html" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">TV ν”„λ‘œκ·Έλž¨</a>
 <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">μ΅œμ‹  κ°œλ΄‰μž‘</a>
 <a href="mylist.html" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">λ‚΄ λͺ©λ‘</a>
 </div>
 </div>
 </div>
 <div class="hidden md:block">
 <div class="ml-4 flex items-center md:ml-6">
 <div class="relative">
 <input type="text" placeholder="Search movies..." class="bg-gray-800 text-white px-4 py-1 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 w-64">
 <button class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">
 <i class="fas fa-search"></i>
 </button>
 </div>
 <button class="ml-4 bg-blue-600 hover:bg-blue-700 text-white px-4 py-1 rounded-full text-sm">
 Sign In
 </button>
 </div>
 </div>
 <div class="-mr-2 flex md:hidden">
 <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none">
 <span class="sr-only">Open main menu</span>
 <i class="fas fa-bars"></i>
 </button>
 </div>
 </div>
 </div>
<!-- Mobile menu -->
 <div class="md:hidden hidden" id="mobile-menu">
 <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
 <a href="#" class="text-white block px-3 py-2 rounded-md text-base font-medium">ν™ˆ </a>
 <a href="#" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">μ˜ˆμˆ μ˜ν™”</a>
 <a href="#" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">μ•„λ™μ˜ν™”</a>
 <a href="#" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">련속극</a>
 <a href="#" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">마이리슀트</a>
 <div class="pt-4 pb-3 border-t border-gray-700">
 <div class="flex items-center px-5">
 <input type="text" placeholder="Search movies..." class="bg-gray-800 text-white px-4 py-1 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 w-full">
 <button class="ml-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-1 rounded-full text-sm">
 <i class="fas fa-search"></i>
 </button>
 </div>
 <div class="mt-3 px-2">
 <button class="w-full bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm">
 Sign In
 </button>
 </div>
 </div>
 </div>
 </div>
 </nav>
<!-- Hero Section -->
 <section class="hero flex items-center justify-center text-center pt-16">
 <div class="px-4 sm:px-6 lg:px-8 max-w-3xl">
 <h1 class="text-4xl md:text-5xl font-bold mb-4">인기 TV ν”„λ‘œκ·Έλž¨κ³Ό μ‹œλ¦¬μ¦ˆ</h1>
 <p class="text-lg mb-8">μ΅œμ‹  μ—ν”Όμ†Œλ“œλΆ€ν„° μ™„κ²° μ‹œλ¦¬μ¦ˆκΉŒμ§€ λͺ¨λ‘ 여기에</p>
 <div class="flex flex-col sm:flex-row justify-center gap-4">
 <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium flex items-center justify-center">
 <i class="fas fa-play mr-2"></i> 인기 μ‹œλ¦¬μ¦ˆ 보기
 </button>
 <button class="bg-gray-800 hover:bg-gray-700 text-white px-6 py-3 rounded-lg font-medium flex items-center justify-center">
 <i class="fas fa-info-circle mr-2"></i> μ‹ κ·œ ν”„λ‘œκ·Έλž¨
 </button>
 </div>
 </div>
 </section>
<!-- Main Content -->
 <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<!-- Featured TV Shows -->
 <div class="mb-12">
 <div class="flex justify-between items-center mb-4">
 <h2 class="text-2xl font-bold">μΆ”μ²œ μ˜ν™”</h2>
 <a href="#" class="text-blue-500 hover:underline">λͺ¨λ“  ν”„λ‘œκ·Έλž¨ 보기</a>
 </div>
 <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
 <!-- Movie Card 1 -->
 <div class="movie-card relative rounded-lg overflow-hidden bg-gray-800">
 <img src="https://image.tmdb.org/t/p/w500/1pdfLvkbY9ohJlCjQH2CZjjYVvJ.jpg" alt="Movie Poster" class="w-full h-64 object-cover">
 <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center play-icon">
 <button class="bg-blue-600 hover:bg-blue-700 text-white rounded-full w-12 h-12 flex items-center justify-center">
 <i class="fas fa-play"></i>
 </button>
 </div>
 <div class="p-3">
 <h3 class="font-semibold truncate">Spider-Man: No Way Home</h3>
 <div class="flex justify-between items-center text-sm text-gray-400 mt-1">
 <span>2021</span>
 <span class="flex items-center">
 <i class="fas fa-star text-yellow-400 mr-1"></i> 8.2
 </span>
 </div>
 </div>
 </div>
<!-- Movie Card 2 -->
 <div class="movie-card relative rounded-lg overflow-hidden bg-gray-800">
 <img src="https://image.tmdb.org/t/p/w500/1g0dhYtq4irTY1GPXvft6k4YLjm.jpg" alt="Movie Poster" class="w-full h-64 object-cover">
 <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center play-icon">
 <button class="bg-blue-600 hover:bg-blue-700 text-white rounded-full w-12 h-12 flex items-center justify-center">
 <i class="fas fa-play"></i>
 </button>
 </div>
 <div class="p-3">
 <h3 class="font-semibold truncate">The Batman</h3>
 <div class="flex justify-between items-center text-sm text-gray-400 mt-1">
 <span>2022</span>
 <span class="flex items-center">
 <i class="fas fa-star text-yellow-400 mr-1"></i> 7.9
 </span>
 </div>
 </div>
 </div>
<!-- Movie Card 3 -->
 <div class="movie-card relative rounded-lg overflow-hidden bg-gray-800">
 <img src="https://image.tmdb.org/t/p/w500/6DrHO1jr3qVrViUO6s6kFiAGM7.jpg" alt="Movie Poster" class="w-full h-64 object-cover">
 <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center play-icon">
 <button class="bg-blue-600 hover:bg-blue-700 text-white rounded-full w-12 h-12 flex items-center justify-center">
 <i class="fas fa-play"></i>
 </button>
 </div>
 <div class="p-3">
 <h3 class="font-semibold truncate">Dune</h3>
 <div class="flex justify-between items-center text-sm text-gray-400 mt-1">
 <span>2021</span>
 <span class="flex items-center">
 <i class="fas fa-star text-yellow-400 mr-1"></i> 8.0
 </span>
 </div>
 </div>
 </div>
<!-- Movie Card 4 -->
 <div class="movie-card relative rounded-lg overflow-hidden bg-gray-800">
 <img src="https://image.tmdb.org/t/p/w500/8Y43POKjjKDGI9MH89NW0NAzzp8.jpg" alt="Movie Poster" class="w-full h-64 object-cover">
 <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center play-icon">
 <button class="bg-blue-600 hover:bg-blue-700 text-white rounded-full w-12 h-12 flex items-center justify-center">
 <i class="fas fa-play"></i>
 </button>
 </div>
 <div class="p-3">
 <h3 class="font-semibold truncate">Top Gun: Maverick</h3>
 <div class="flex justify-between items-center text-sm text-gray-400 mt-1">
 <span>2022</span>
 <span class="flex items-center">
 <i class="fas fa-star text-yellow-400 mr-1"></i> 8.3
 </span>
 </div>
 </div>
 </div>
<!-- Movie Card 5 -->
 <div class="movie-card relative rounded-lg overflow-hidden bg-gray-800">
 <img src="https://image.tmdb.org/t/p/w500/8Vt6mWEReuy4Of61Lnj5Xj704m8.jpg" alt="Movie Poster" class="w-full h-64 object-cover">
 <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center play-icon">
 <button class="bg-blue-600 hover:bg-blue-700 text-white rounded-full w-12 h-12 flex items-center justify-center">
 <i class="fas fa-play"></i>
 </button>
 </div>
 <div class="p-3">
 <h3 class="font-semibold truncate">Lightyear</h3>
 <div class="flex justify-between items-center text-sm text-gray-400 mt-1">
 <span>2022</span>
 <span class="flex items-center">
 <i class="fas fa-star text-yellow-400 mr-1"></i> 6.1
 </span>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Popular TV Shows -->
 <div class="mb-12">
 <div class="flex justify-between items-center mb-4">
 <h2 class="text-2xl font-bold">졜근 련속극 </h2>
 <a href="#" class="text-blue-500 hover:underline">λͺ¨λ“  ν”„λ‘œκ·Έλž¨ 보기</a>
 </div>
 <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
 <!-- Movie Card 6 -->
 <div class="movie-card relative rounded-lg overflow-hidden bg-gray-800">
 <img src="https://image.tmdb.org/t/p/w500/odVv1sqVs0KxBXiA8bhIBlPgalx.jpg" alt="Movie Poster" class="w-full h-64 object-cover">
 <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center play-icon">
 <button class="bg-blue-600 hover:bg-blue-700 text-white rounded-full w-12 h-12 flex items-center justify-center">
 <i class="fas fa-play"></i>
 </button>
 </div>
 <div class="p-3">
 <h3 class="font-semibold truncate">Morbius</h3>
 <div class="flex justify-between items-center text-sm text-gray-400 mt-1">
 <span>2022</span>
 <span class="flex items-center">
 <i class="fas fa-star text-yellow-400 mr-1"></i> 6.4
 </span>
 </div>
 </div>
 </div>
<!-- Movie Card 7 -->
 <div class="movie-card relative rounded-lg overflow-hidden bg-gray-800">
 <img src="https://image.tmdb.org/t/p/w500/6zbKgwgaaCyyBXE4Sun4oWQfQmi.jpg" alt="Movie Poster" class="w-full h-64 object-cover">
 <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center play-icon">
 <button class="bg-blue-600 hover:bg-blue-700 text-white rounded-full w-12 h-12 flex items-center justify-center">
 <i class="fas fa-play"></i>
 </button>
 </div>
 <div class="p-3">
 <h3 class="font-semibold truncate">The Northman</h3>
 <div class="flex justify-between items-center text-sm text-gray-400 mt-1">
 <span>2022</span>
 <span class="flex items-center">
 <i class="fas fa-star text-yellow-400 mr-1"></i> 7.3
 </span>
 </div>
 </div>
 </div>
<!-- Movie Card 8 -->
 <div class="movie-card relative rounded-lg overflow-hidden bg-gray-800">
 <img src="https://image.tmdb.org/t/p/w500/rugyJdeoJm7cSJL1q4jBpTNbxyU.jpg" alt="Movie Poster" class="w-full h-64 object-cover">
 <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center play-icon">
 <button class="bg-blue-600 hover:bg-blue-700 text-white rounded-full w-12 h-12 flex items-center justify-center">
 <i class="fas fa-play"></i>
 </button>
 </div>
 <div class="p-3">
 <h3 class="font-semibold truncate">Doctor Strange 2</h3>
 <div class="flex justify-between items-center text-sm text-gray-400 mt-1">
 <span>2022</span>
 <span class="flex items-center">
 <i class="fas fa-star text-yellow-400 mr-1"></i> 7.5
 </span>
 </div>
 </div>
 </div>
<!-- Movie Card 9 -->
 <div class="movie-card relative rounded-lg overflow-hidden bg-gray-800">
 <img src="https://image.tmdb.org/t/p/w500/74xTEgt7R36Fpooo50r9T25onhq.jpg" alt="Movie Poster" class="w-full h-64 object-cover">
 <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center play-icon">
 <button class="bg-blue-600 hover:bg-blue-700 text-white rounded-full w-12 h-12 flex items-center justify-center">
 <i class="fas fa-play"></i>
 </button>
 </div>
 <div class="p-3">
 <h3 class="font-semibold truncate">The Batman</h3>
 <div class="flex justify-between items-center text-sm text-gray-400 mt-1">
 <span>2022</span>
 <span class="flex items-center">
 <i class="fas fa-star text-yellow-400 mr-1"></i> 7.9
 </span>
 </div>
 </div>
 </div>
<!-- Movie Card 10 -->
 <div class="movie-card relative rounded-lg overflow-hidden bg-gray-800">
 <img src="https://image.tmdb.org/t/p/w500/1BIoJGKbXjdFDAqUEiA2VHqkK1Z.jpg" alt="Movie Poster" class="w-full h-64 object-cover">
 <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center play-icon">
 <button class="bg-blue-600 hover:bg-blue-700 text-white rounded-full w-12 h-12 flex items-center justify-center">
 <i class="fas fa-play"></i>
 </button>
 </div>
 <div class="p-3">
 <h3 class="font-semibold truncate">Uncharted</h3>
 <div class="flex justify-between items-center text-sm text-gray-400 mt-1">
 <span>2022</span>
 <span class="flex items-center">
 <i class="fas fa-star text-yellow-400 mr-1"></i> 7.0
 </span>
 </div>
 </div>
 </div>
 </div>
 </div>
</main>
<!-- Movie Player Overlay -->
 <div id="movie-player" class="fixed inset-0 bg-black bg-opacity-90 z-50 hidden flex-col items-center justify-center">
 <div class="w-full max-w-4xl relative">
 <button id="close-player" class="absolute -top-10 right-0 text-white text-2xl hover:text-gray-300">
 <i class="fas fa-times"></i>
 </button>
 <div class="aspect-w-16 aspect-h-9">
 <iframe id="player-iframe" class="w-full h-full" src="" frameborder="0" allowfullscreen></iframe>
 </div>
 <div class="bg-gray-900 p-4 text-white">
 <h2 id="player-title" class="text-xl font-bold mb-2">μ˜ν™” 제λͺ©</h2>
 <div class="flex items-center text-sm text-gray-400 mb-4">
 <span id="player-year" class="mr-4">2022</span>
 <span class="flex items-center">
 <i class="fas fa-star text-yellow-400 mr-1"></i>
 <span id="player-rating">8.0</span>
 </span>
 </div>
 <p id="player-description" class="text-gray-300">
 μ˜ν™” μ„€λͺ…이 여기에 ν‘œμ‹œλ©λ‹ˆλ‹€. μ˜ν™”μ˜ 쀄거리와 μ£Όμš” 정보λ₯Ό κ°„λž΅ν•˜κ²Œ μ†Œκ°œν•˜λŠ” λ‚΄μš©μž…λ‹ˆλ‹€.
 </p>
 </div>
 </div>
 </div>
<!-- Footer -->
 <footer class="bg-gray-900 text-gray-400 py-12">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
 <div>
 <h3 class="text-white font-semibold mb-4">νšŒμ‚¬</h3>
 <ul class="space-y-2">
 <li><a href="#" class="hover:text-white">νšŒμ‚¬ μ†Œκ°œ</a></li>
 <li><a href="#" class="hover:text-white">μ±„μš©</a></li>
 <li><a href="#" class="hover:text-white">문의</a></li>
 <li><a href="#" class="hover:text-white">보도 자료</a></li>
 </ul>
 </div>
 <div>
 <h3 class="text-white font-semibold mb-4">도움말</h3>
 <ul class="space-y-2">
 <li><a href="#" class="hover:text-white">자주 λ¬»λŠ” 질문</a></li>
 <li><a href="#" class="hover:text-white">계정</a></li>
 <li><a href="#" class="hover:text-white">κ°œμΈμ •λ³΄</a></li>
 <li><a href="#" class="hover:text-white">이용 μ•½κ΄€</a></li>
 </ul>
 </div>
 <div>
 <h3 class="text-white font-semibold mb-4">λ‘˜λŸ¬λ³΄κΈ°</h3>
 <ul class="space-y-2">
 <li><a href="#" class="hover:text-white">μ‘°μ„ μŒμ•…</a></li>
 <li><a href="#" class="hover:text-white">μ‘°μ„ λ…Έλž˜λ°©</a></li>
 <li><a href="#" class="hover:text-white">쑰선쀑앙TV</a></li>
 <li><a href="#" class="hover:text-white">ꡭ가별</a></li>
 </ul>
 </div>
 <div>
 <h3 class="text-white font-semibold mb-4">Connect</h3>
 <div class="flex space-x-4">
 <a href="#" class="hover:text-white"><i class="fab fa-facebook-f"></i></a>
 <a href="#" class="hover:text-white"><i class="fab fa-twitter"></i></a>
 <a href="#" class="hover:text-white"><i class="fab fa-instagram"></i></a>
 <a href="#" class="hover:text-white"><i class="fab fa-youtube"></i></a>
 </div>
 <div class="mt-4">
 <p>Download our app</p>
 <div class="flex space-x-2 mt-2">
 <button class="bg-black text-white px-3 py-1 rounded flex items-center">
 <i class="fab fa-apple mr-1"></i> μ•± μŠ€ν† μ–΄
 </button>
 <button class="bg-black text-white px-3 py-1 rounded flex items-center">
 <i class="fab fa-google-play mr-1"></i> ν”Œλ ˆμ΄ μŠ€ν† μ–΄
 </button>
 </div>
 </div>
 </div>
 </div>
 <div class="border-t border-gray-800 mt-8 pt-8 text-sm">
 <p>Β© 2022 μ”¨λ„€μŠ€νŠΈλ¦Ό. λͺ¨λ“  ꢌ리 보유.</p>
 </div>
 </div>
 </footer>
<script>
 // Movie player functionality
 const movieCards = document.querySelectorAll('.movie-card');
 const moviePlayer = document.getElementById('movie-player');
 const closePlayer = document.getElementById('close-player');
 const playerIframe = document.getElementById('player-iframe');
 const playerTitle = document.getElementById('player-title');
 const playerYear = document.getElementById('player-year');
 const playerRating = document.getElementById('player-rating');
 const playerDescription = document.getElementById('player-description');
// Sample movie data (in a real app, this would come from an API)
 const movieData = {
 'Spider-Man: No Way Home': {
 year: '2021',
 rating: '8.2',
 description: 'μŠ€νŒŒμ΄λ”λ§¨μ˜ 정체가 λ“œλŸ¬λ‚˜λ©΄μ„œ 삢이 μ™„μ „νžˆ 뒀바뀐 ν”Όν„° 파컀. 문제λ₯Ό ν•΄κ²°ν•˜κΈ° μœ„ν•΄ λ‹₯ν„° μŠ€νŠΈλ ˆμΈμ§€λ₯Ό μ°Ύμ•„κ°€ 도움을 μ²­ν•˜μ§€λ§Œ, 주문이 잘λͺ»λ˜μ–΄ λ©€ν‹°λ²„μŠ€κ°€ μ—΄λ¦¬λ©΄μ„œ μœ„ν—˜ν•œ 적듀이 λ‚˜νƒ€λ‚œλ‹€.',
 trailer: 'https://www.youtube.com/embed/JfVOs4VSpmA'
 },
 'The Batman': {
 year: '2022',
 rating: '7.9',
 description: 'κ³ λ‹΄ μ‹œμ˜ μ–΄λ‘  속을 λ°°νšŒν•˜λŠ” 배트맨. λΆ€μœ ν•œ 웨인 κ°€μ˜ ν›„κ³„μž 브루슀 웨인은 κ³ λ‹΄μ˜ λΆ€νŒ¨ν•œ 거리λ₯Ό μ •μ˜λ‘œ μ‹¬νŒν•œλ‹€. 수수께끼 같은 연쇄살인범 λ¦¬λ“€λŸ¬κ°€ λ‚˜νƒ€λ‚˜λ©΄μ„œ λ°°νŠΈλ§¨μ€ μƒˆλ‘œμš΄ 쑰사λ₯Ό μ‹œμž‘ν•œλ‹€.',
 trailer: 'https://www.youtube.com/embed/mqqft2x_Aa4'
 },
 // Add data for other movies similarly...
 };
// Open player when movie card is clicked
 movieCards.forEach(card => {
 card.addEventListener('click', function() {
 const title = this.querySelector('h3').textContent;
 const data = movieData[title] || {
 year: this.querySelector('span:first-child').textContent,
 rating: this.querySelector('span:last-child span').textContent,
 description: '이 μ˜ν™”μ— λŒ€ν•œ μ„€λͺ…을 μ€€λΉ„ μ€‘μž…λ‹ˆλ‹€.',
 trailer: 'https://www.youtube.com/embed/dQw4w9WgXcQ' // Default trailer
 };
playerTitle.textContent = title;
 playerYear.textContent = data.year;
 playerRating.textContent = data.rating;
 playerDescription.textContent = data.description;
 playerIframe.src = data.trailer;
moviePlayer.classList.remove('hidden');
 document.body.style.overflow = 'hidden';
 });
 });
// Close player
 closePlayer.addEventListener('click', function() {
 moviePlayer.classList.add('hidden');
 playerIframe.src = '';
 document.body.style.overflow = 'auto';
 });
// Close player when clicking outside
 moviePlayer.addEventListener('click', function(e) {
 if (e.target === this) {
 moviePlayer.classList.add('hidden');
 playerIframe.src = '';
 document.body.style.overflow = 'auto';
 }
 });
// Mobile menu toggle
 document.getElementById('mobile-menu-button').addEventListener('click', function() {
 const menu = document.getElementById('mobile-menu');
 menu.classList.toggle('hidden');
 });
// Category buttons active state
 const categoryButtons = document.querySelectorAll('.category-btn');
 categoryButtons.forEach(button => {
 button.addEventListener('click', function() {
 categoryButtons.forEach(btn => btn.classList.remove('active'));
 this.classList.add('active');
 });
 });
// Simple search functionality
 document.querySelector('input[type="text"]').addEventListener('keyup', function(e) {
 if (e.key === 'Enter') {
 alert('검색어: ' + this.value);
 this.value = '';
 }
 });
 </script>
</body>
</html>