<div class="filters"> <div class="filter-group"> <button class="filter-btn active" data-filter="all">All Movies</button> <button class="filter-btn" data-filter="2024">2024 Releases</button> <button class="filter-btn" data-filter="2023">2023 Releases</button> <button class="filter-btn" data-filter="action">Action</button> <button class="filter-btn" data-filter="drama">Drama</button> <button class="filter-btn" data-filter="comedy">Comedy</button> <button class="filter-btn" data-filter="thriller">Thriller</button> </div> <div class="search-box"> <input type="text" id="searchInput" placeholder="🔍 Search movies by name, cast, or director..."> </div> </div>
// Function to render stars based on rating function renderStars(rating) const fullStars = Math.floor(rating); const hasHalfStar = rating % 1 >= 0.5; let starsHTML = ""; for (let i = 0; i < fullStars; i++) starsHTML += "⭐"; if (hasHalfStar) starsHTML += "½"; return starsHTML; new malayalam movies list
.rating-value font-weight: bold; color: #333; button class="filter-btn active" data-filter="all">
/* Animations */ @keyframes fadeIn from opacity: 0; to opacity: 1; button class="filter-btn" data-filter="2024">
.movie-title font-size: 1.3em; font-weight: bold; margin-bottom: 8px; color: #333;