/* 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;
// User watchlist (localStorage) let watchlist = JSON.parse(localStorage.getItem('movieVault')) || [];
.filter-group label font-weight: 500; font-size: 0.85rem; color: #cbd5e1;
.rating color: #f5c518; font-weight: bold; HUGE MOVIES COLLECTION
.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;
// generate 250+ movies let masterMovies = []; for (let i = 0; i < 260; i++) const year = 1985 + Math.floor(Math.random() * 40); const genre = genres[Math.floor(Math.random() * genres.length)]; const rating = (Math.random() * 3 + 6).toFixed(1); // 6.0 - 9.1 masterMovies.push( id: i, title: titles[i % titles.length] + (i > titles.length ? $Math.floor(i/titles.length)+1 : ''), year: year, genre: genre, rating: parseFloat(rating), poster: https://picsum.photos/seed/movie$i/300/450 , synopsis: A $genre masterpiece from $year. Vastly acclaimed and part of the HUGE COLLECTION. );
.close-modal position: absolute; top: 1rem; right: 1.5rem; font-size: 2rem; cursor: pointer; /* Movie Grid */
<div id="movieGrid" class="movie-grid"></div> <div class="load-more-container"> <button id="loadMoreBtn" class="load-more-btn">LOAD MORE MOVIES</button> </div>
currentFiltered = filtered; visibleCount = 30; renderGrid();
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(''); .close-modal position: absolute
.movie-title font-weight: bold; font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
.modal-content background: #181826; max-width: 700px; width: 90%; border-radius: 28px; padding: 1.8rem; position: relative;