// Function to display movies function displayMovies() const filteredMovies = filterMovies(); const container = document.getElementById("moviesContainer"); if (filteredMovies.length === 0) container.innerHTML = ` <div class="no-results"> <p>😔 No movies found matching your criteria</p> <p style="font-size: 0.9em; margin-top: 10px;">Try adjusting your filters or search term</p> </div> `; return; container.innerHTML = filteredMovies.map(movie => ` <div class="movie-card" onclick="showMovieDetails($movie.id)"> $movie.isNew ? '<div class="badge">NEW</div>' : '' <img class="movie-poster" src="$movie.poster" alt="$movie.title" onerror="this.src='https://via.placeholder.com/300x450/667eea/white?text=No+Image'"> <div class="movie-info"> <div class="movie-title">$movie.title</div> <div class="movie-year">$movie.year</div> <div class="movie-genre">$movie.genre.join(" • ")</div> <div class="movie-rating"> <span class="stars">$renderStars(movie.rating)</span> <span class="rating-value">$movie.rating/5</span> </div> </div> </div> `).join("");
/* Animations */ @keyframes fadeIn from opacity: 0; to opacity: 1; new malayalam movies list
/* Filters */ .filters background: white; border-radius: 15px; padding: 20px; margin-bottom: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); animation: fadeIn 1s ease; // Function to display movies function displayMovies() const
<script> // Sample data - In production, this would come from an API const moviesData = [ id: 1, title: "Aadujeevitham - The Goat Life", malayalamTitle: "ആടുജീവിതം", year: 2024, genre: ["Drama", "Biography"], rating: 4.5, director: "Blessy", cast: ["Prithviraj Sukumaran", "Amala Paul", "Jimmy Jean-Louis"], poster: "https://via.placeholder.com/300x450/667eea/white?text=Aadujeevitham", releaseDate: "March 28, 2024", isNew: true , id: 2, title: "Bramayugam", malayalamTitle: "ബ്രമയുഗം", year: 2024, genre: ["Thriller", "Horror"], rating: 4.3, director: "Rahul Sadasivan", cast: ["Mammootty", "Arjun Ashokan", "Sidharth Bharathan"], poster: "https://via.placeholder.com/300x450/764ba2/white?text=Bramayugam", releaseDate: "February 15, 2024", isNew: true , id: 3, title: "Manjummel Boys", malayalamTitle: "മഞ്ജുമ്മൽ ബോയ്സ്", year: 2024, genre: ["Thriller", "Adventure"], rating: 4.6, director: "Chidambaram", cast: ["Soubin Shahir", "Sreenath Bhasi", "Balu Varghese"], poster: "https://via.placeholder.com/300x450/667eea/white?text=Manjummel+Boys", releaseDate: "February 22, 2024", isNew: true , id: 4, title: "Premalu", malayalamTitle: "പ്രേമലു", year: 2024, genre: ["Comedy", "Romance"], rating: 4.4, director: "Girish A.D.", cast: ["Naslen", "Mamitha Baiju", "Sangeeth Prathap"], poster: "https://via.placeholder.com/300x450/764ba2/white?text=Premalu", releaseDate: "February 9, 2024", isNew: true , id: 5, title: "Anweshippin Kandethum", malayalamTitle: "അന്വേഷിപ്പിൻ കണ്ടെത്തും", year: 2024, genre: ["Thriller", "Crime"], rating: 4.2, director: "Darwin Kuriakose", cast: ["Tovino Thomas", "Siddique", "Indrajith Sukumaran"], poster: "https://via.placeholder.com/300x450/667eea/white?text=Anweshippin", releaseDate: "February 2, 2024", isNew: true , id: 6, title: "Malaikottai Vaaliban", malayalamTitle: "മലൈക്കോട്ടൈ വാലിബൻ", year: 2024, genre: ["Action", "Drama"], rating: 3.8, director: "Lijo Jose Pellissery", cast: ["Mohanlal", "Sonalee Kulkarni", "Danish Sait"], poster: "https://via.placeholder.com/300x450/764ba2/white?text=Malaikottai", releaseDate: "January 25, 2024", isNew: true , id: 7, title: "Neru", malayalamTitle: "നേര്", year: 2023, genre: ["Drama", "Courtroom"], rating: 4.4, director: "Jeethu Joseph", cast: ["Mohanlal", "Anaswara Rajan", "Siddique"], poster: "https://via.placeholder.com/300x450/667eea/white?text=Neru", releaseDate: "December 21, 2023", isNew: false , id: 8, title: "Kaathal - The Core", malayalamTitle: "കാതൽ", year: 2023, genre: ["Drama", "Social"], rating: 4.5, director: "Jeo Baby", cast: ["Mammootty", "Jyothika", "Sudhi Kozhikode"], poster: "https://via.placeholder.com/300x450/764ba2/white?text=Kaathal", releaseDate: "November 23, 2023", isNew: false , id: 9, title: "Falimy", malayalamTitle: "ഫാലിമി", year: 2023, genre: ["Comedy", "Drama"], rating: 4.2, director: "Nithish Sahadev", cast: ["Basil Joseph", "Manju Pillai", "Jagadish"], poster: "https://via.placeholder.com/300x450/667eea/white?text=Falimy", releaseDate: "November 17, 2023", isNew: false , id: 10, title: "King of Kotha", malayalamTitle: "കിംഗ് ഓഫ് കോത്ത", year: 2023, genre: ["Action", "Crime"], rating: 3.5, director: "Abhilash Joshiy", cast: ["Dulquer Salmaan", "Shabeer Kallarakkal", "Aishwarya Lekshmi"], poster: "https://via.placeholder.com/300x450/764ba2/white?text=King+of+Kotha", releaseDate: "August 24, 2023", isNew: false , id: 11, title: "RDX: Robert Dony Xavier", malayalamTitle: "ആർഡിഎക്സ്", year: 2023, genre: ["Action", "Thriller"], rating: 4.3, director: "Nahas Hidayath", cast: ["Shane Nigam", "Antony Varghese", "Neeraj Madhav"], poster: "https://via.placeholder.com/300x450/667eea/white?text=RDX", releaseDate: "August 25, 2023", isNew: false , id: 12, title: "Tholvi F.C.", malayalamTitle: "തോൽവി എഫ്.സി", year: 2023, genre: ["Comedy", "Sports"], rating: 4.0, director: "George Thengummoottil", cast: ["Sreenath Bhasi", "Vincy Aloshious", "Johny Antony"], poster: "https://via.placeholder.com/300x450/764ba2/white?text=Tholvi+FC", releaseDate: "December 1, 2023", isNew: false ]; const container = document.getElementById("moviesContainer")
.filter-btn.active background: #667eea; color: white; box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
.filter-btn:hover transform: translateY(-2px); background: #667eea; color: white;
/* Movies Grid */ .movies-grid display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 25px; animation: fadeIn 1.2s ease;