Huge Movies - Collection

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

// Helper functions function filterMovies() let filtered = [...masterMovies]; if (activeGenre !== 'all') filtered = filtered.filter(m => m.genre === activeGenre); if (activeDecade !== 'all') const decadeStart = parseInt(activeDecade); filtered = filtered.filter(m => m.year >= decadeStart && m.year < decadeStart + 10);

.close-modal position: absolute; top: 1rem; right: 1.5rem; font-size: 2rem; cursor: pointer;

.movie-info padding: 1rem;

// User watchlist (localStorage) let watchlist = JSON.parse(localStorage.getItem('movieVault')) || [];

.movie-card background: #14141e; border-radius: 20px; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s; cursor: pointer; border: 1px solid #2a2a3a;

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

function loadMore() if (visibleCount >= currentFiltered.length) return; visibleCount = Math.min(visibleCount + 30, currentFiltered.length); renderGrid(); if (visibleCount >= currentFiltered.length) document.getElementById('loadMoreBtn').style.opacity = '0.5'; document.getElementById('loadMoreBtn').innerText = "All movies loaded";

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

currentFiltered = filtered; visibleCount = 30; renderGrid(); .poster width: 100%

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

.sub color: #9ca3af; margin-top: 0.5rem;