currentFiltered = watchlistMovies; visibleCount = 30; renderGrid();
</style> </head> <body>
.filter-group label font-weight: 500; font-size: 0.85rem; color: #cbd5e1; HUGE MOVIES COLLECTION
function toggleWatchlist(movie) if (!movie) return; const exists = watchlist.some(w => w.id === movie.id); if (exists) watchlist = watchlist.filter(w => w.id !== movie.id); else watchlist.push( id: movie.id, title: movie.title, year: movie.year ); currentFiltered = watchlistMovies
let currentModalMovie = null; function openModal(movie) currentModalMovie = movie; const modal = document.getElementById('movieModal'); document.getElementById('modalTitle').innerText = movie.title; document.getElementById('modalDetails').innerHTML = <strong>$movie.year</strong> • $movie.genre<br> ⭐ $movie.rating/10<br><br> 📖 $movie.synopsis<br> 🎬 Part of the HUGE MOVIES COLLECTION. ; const btn = document.getElementById('modalWatchlistBtn'); const isIn = watchlist.some(w => w.id === movie.id); btn.innerText = isIn ? '❌ Remove from My Vault' : '➕ Add to My Vault'; modal.style.display = 'flex'; visibleCount = 30
if (activeRating === '8') filtered = filtered.filter(m => m.rating >= 8); if (activeRating === '7') filtered = filtered.filter(m => m.rating >= 7 && m.rating < 8);
.title font-size: 3rem; font-weight: 800; letter-spacing: -0.02em; background: linear-gradient(135deg, #e6b800, #ff4d4d); -webkit-background-clip: text; background-clip: text; color: transparent;