Huge Movies — Collection

.modal-content background: #181826; max-width: 700px; width: 90%; border-radius: 28px; padding: 1.8rem; position: relative;

.poster width: 100%; aspect-ratio: 2 / 3; object-fit: cover; background: #0b0b12;

.load-more-btn background: #f5c518; color: #0a0c10; border: none; padding: 0.8rem 2rem; border-radius: 40px; font-weight: bold; cursor: pointer;

// shuffle a bit masterMovies.sort(() => Math.random() - 0.5); HUGE MOVIES COLLECTION

// State let currentFiltered = [...masterMovies]; let visibleCount = 30; let activeGenre = 'all'; let activeDecade = 'all'; let activeRating = 'all'; let activeSort = 'title';

function updateWatchlistBtnText() const btn = document.getElementById('showWatchlistBtn'); btn.innerText = ⭐ My Vault ($watchlist.length) ;

// User watchlist (localStorage) let watchlist = JSON.parse(localStorage.getItem('movieVault')) || []; .modal-content background: #181826

<script> // ---------- HUGE MOVIES DATABASE (mock of 150+ movies, expandable to thousands) ---------- const genres = ['Action', 'Drama', 'Sci-Fi', 'Comedy', 'Horror']; const titles = [ "The Dark Knight", "Inception", "The Matrix", "Interstellar", "Pulp Fiction", "Fight Club", "Forrest Gump", "Gladiator", "Avengers: Endgame", "The Godfather", "Star Wars: A New Hope", "Jurassic Park", "Titanic", "The Shawshank Redemption", "Mad Max: Fury Road", "Joker", "Parasite", "Whiplash", "Get Out", "The Social Network", "Dune", "Top Gun: Maverick", "Everything Everywhere All at Once", "John Wick", "Spider-Verse", "The Prestige", "Memento" ];

.filter-group background: #1e1e2a; padding: 0.5rem 1rem; border-radius: 40px; display: flex; align-items: center; gap: 0.6rem;

// Event listeners document.getElementById('genreFilter').addEventListener('change', (e) => activeGenre = e.target.value; filterMovies(); ); document.getElementById('decadeFilter').addEventListener('change', (e) => activeDecade = e.target.value; filterMovies(); ); document.getElementById('ratingFilter').addEventListener('change', (e) => activeRating = e.target.value; filterMovies(); ); document.getElementById('sortBy').addEventListener('change', (e) => activeSort = e.target.value; filterMovies(); ); document.getElementById('loadMoreBtn').addEventListener('click', loadMore); document.getElementById('showWatchlistBtn').addEventListener('click', showOnlyWatchlist); document.querySelector('.close-modal').addEventListener('click', () => document.getElementById('movieModal').style.display = 'none'; ); document.getElementById('modalWatchlistBtn').addEventListener('click', () => toggleWatchlist(currentModalMovie); ); window.onclick = (e) => if(e.target === document.getElementById('movieModal')) document.getElementById('movieModal').style.display = 'none'; ; .poster width: 100%

<div class="filter-group"> <label>📅 Decade</label> <select id="decadeFilter"> <option value="all">All</option> <option value="1980">80s</option> <option value="1990">90s</option> <option value="2000">2000s</option> <option value="2010">2010s</option> <option value="2020">2020+</option> </select> </div>

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

<div class="vault-header"> <h1 class="title">🎬 HUGE MOVIES COLLECTION</h1> <p class="sub">The Vault — 500+ blockbusters, cult classics & award winners</p>

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

<!-- 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>