/* 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;
// 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. ); HUGE MOVIES COLLECTION
// attach click listeners for modal document.querySelectorAll('.movie-card').forEach(card => card.addEventListener('click', (e) => const id = parseInt(card.dataset.id); const movie = masterMovies.find(m => m.id === id); openModal(movie); ); ); updateWatchlistBtnText(); /* Movie Grid */
<div class="filter-group"> <label>⭐ Rating</label> <select id="ratingFilter"> <option value="all">All</option> <option value="8">8+ (Must see)</option> <option value="7">7+ (Great)</option> </select> </div> ); // attach click listeners for modal document
// sorting if (activeSort === 'title') filtered.sort((a,b) => a.title.localeCompare(b.title)); if (activeSort === 'year') filtered.sort((a,b) => b.year - a.year); if (activeSort === 'rating') filtered.sort((a,b) => b.rating - a.rating);
/* Load more */ .load-more-container display: flex; justify-content: center; padding: 2rem;
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';