<!-- Movie Modal --> <div id="movieModal" class="modal"> <div class="modal-content"> <span class="close-modal">×</span> <h2 id="modalTitle"></h2> <p id="modalDetails"></p> <button id="modalWatchlistBtn" style="margin-top: 1rem; background:#f5c518; border:none; padding:0.5rem 1rem; border-radius:30px;">➕ Add to My Vault</button> </div> </div>
// State let currentFiltered = [...masterMovies]; let visibleCount = 30; let activeGenre = 'all'; let activeDecade = 'all'; let activeRating = 'all'; let activeSort = 'title'; HUGE MOVIES COLLECTION
<div class="filters-bar"> <div class="filter-group"> <label>🎭 Genre</label> <select id="genreFilter"> <option value="all">All</option> <option value="Action">Action</option> <option value="Drama">Drama</option> <option value="Sci-Fi">Sci-Fi</option> <option value="Comedy">Comedy</option> <option value="Horror">Horror</option> </select> </div> !-- Movie Modal -->
.poster width: 100%; aspect-ratio: 2 / 3; object-fit: cover; background: #0b0b12; div id="movieModal" class="modal">
// 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. );