Huge Movies Collection Site

.watchlist-badge margin-top: 8px; font-size: 0.7rem; background: #2a2a3a; display: inline-block; padding: 0.2rem 0.6rem; border-radius: 20px;

<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" ];

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

<div class="filter-group"> <label>📂 Sort by</label> <select id="sortBy"> <option value="title">Title A-Z</option> <option value="year">Year (newest)</option> <option value="rating">Rating (high to low)</option> </select> </div> HUGE MOVIES COLLECTION

if (activeRating === '8') filtered = filtered.filter(m => m.rating >= 8); if (activeRating === '7') filtered = filtered.filter(m => m.rating >= 7 && m.rating < 8);

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

<div id="movieGrid" class="movie-grid"></div> <div class="load-more-container"> <button id="loadMoreBtn" class="load-more-btn">LOAD MORE MOVIES</button> </div> .watchlist-badge margin-top: 8px

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

/* 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;

localStorage.setItem('movieVault', JSON.stringify(watchlist)); renderGrid(); // refresh badges updateWatchlistBtnText(); if (document.getElementById('movieModal').style.display === 'flex') const btn = document.getElementById('modalWatchlistBtn'); btn.innerText = watchlist.some(w => w.id === movie.id) ? '❌ Remove from My Vault' : '➕ Add to My Vault'; padding: 0.2rem 0.6rem

/* Modal */ .modal display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); justify-content: center; align-items: center; z-index: 1000;

.watchlist-toggle background: #2d2d44; border: none; color: #ffd966; padding: 0.5rem 1rem; border-radius: 40px; font-weight: bold; cursor: pointer;