Huge Movies Collection -

currentFiltered = filtered; visibleCount = 30; renderGrid();

function loadMore() if (visibleCount >= currentFiltered.length) return; visibleCount = Math.min(visibleCount + 30, currentFiltered.length); renderGrid(); if (visibleCount >= currentFiltered.length) document.getElementById('loadMoreBtn').style.opacity = '0.5'; document.getElementById('loadMoreBtn').innerText = "All movies loaded";

// shuffle a bit masterMovies.sort(() => Math.random() - 0.5); 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 );

.movie-year font-size: 0.8rem; color: #aaa; margin: 0.3rem 0; currentFiltered = filtered

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('');

/* Header / Hero */ .vault-header background: linear-gradient(135deg, #0f0f1f 0%, #1a1a2e 100%); padding: 2rem 2rem 1.5rem; border-bottom: 1px solid #2a2a3a; visibleCount = 30

@media (max-width: 640px) .movie-grid grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; .title font-size: 2rem;