Movies Collection — Huge
.watchlist-badge margin-top: 8px; font-size: 0.7rem; background: #2a2a3a; display: inline-block; padding: 0.2rem 0.6rem; border-radius: 20px;
</style> </head> <body>
<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> HUGE MOVIES COLLECTION
.filter-group label font-weight: 500; font-size: 0.85rem; color: #cbd5e1; .watchlist-badge margin-top: 8px
// 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'; ; padding: 0.2rem 0.6rem
.load-more-btn background: #f5c518; color: #0a0c10; border: none; padding: 0.8rem 2rem; border-radius: 40px; font-weight: bold; cursor: pointer;