Huge Movies Collection – Working & Premium

function renderGrid() const grid = document.getElementById('movieGrid'); const toShow = currentFiltered.slice(0, visibleCount); if (toShow.length === 0) grid.innerHTML = <div class="no-results">🎞️ No movies match. Try different filters!</div> ; return;

/* Movie Grid */ .movie-grid display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1.8rem; padding: 2rem; max-width: 1400px; margin: 0 auto;

/* Load more */ .load-more-container display: flex; justify-content: center; padding: 2rem;

currentFiltered = watchlistMovies; visibleCount = 30; renderGrid(); HUGE MOVIES COLLECTION

.no-results text-align: center; grid-column: 1 / -1; padding: 3rem;

.close-modal position: absolute; top: 1rem; right: 1.5rem; font-size: 2rem; cursor: pointer;

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'; function renderGrid() const grid = document

// Helper functions function filterMovies() let filtered = [...masterMovies]; if (activeGenre !== 'all') filtered = filtered.filter(m => m.genre === activeGenre); if (activeDecade !== 'all') const decadeStart = parseInt(activeDecade); filtered = filtered.filter(m => m.year >= decadeStart && m.year < decadeStart + 10);

.sub color: #9ca3af; margin-top: 0.5rem;

.movie-card:hover transform: translateY(-6px); box-shadow: 0 20px 30px -12px rgba(0, 0, 0, 0.6); border-color: #f5c518; '❌ Remove from My Vault' : '➕ Add to My Vault'; modal

.movie-title font-weight: bold; font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

grid.innerHTML = toShow.map(movie => <div class="movie-card" data-id="$movie.id"> <img class="poster" src="$movie.poster" alt="$movie.title" loading="lazy"> <div class="movie-info"> <div class="movie-title">$movie.title</div> <div class="movie-year">$movie.year • $movie.genre</div> <div class="rating">⭐ $movie.rating</div> $watchlist.some(w => w.id === movie.id) ? '<div class="watchlist-badge">📌 In My Vault</div>' : '' </div> </div> ).join('');

.rating color: #f5c518; font-weight: bold;