const moviesData = [ id: 1, title: "Nayakan (1987)", year: 1987, rating: 8.6, poster: "https://via.placeholder.com/300x450?text=Nayakan", // Replace with actual image URL synopsis: "A common man's rise to power as a Mumbai don, and his complex relationship with his daughter.", era: "classic" , id: 2, title: "Anbe Sivam", year: 2003, rating: 8.7, poster: "https://via.placeholder.com/300x450?text=Anbe+Sivam", synopsis: "Two mismatched strangers on a road trip discover life, love, and humanity.", era: "2000s" , id: 3, title: "Pariyerum Perumal", year: 2018, rating: 8.8, poster: "https://via.placeholder.com/300x450?text=Pariyerum+Perumal", synopsis: "A law student faces brutal caste discrimination and fights for dignity.", era: "2010s" , id: 4, title: "Jai Bhim", year: 2021, rating: 8.9, poster: "https://via.placeholder.com/300x450?text=Jai+Bhim", synopsis: "A tribal woman fights for justice after her husband's illegal arrest.", era: "2020s" , id: 5, title: "Vikram Vedha", year: 2017, rating: 8.5, poster: "https://via.placeholder.com/300x450?text=Vikram+Vedha", synopsis: "A cop and a gangster play a cat-and-mouse game of moral ambiguity.", era: "2010s" , id: 6, title: "Super Deluxe", year: 2019, rating: 8.4, poster: "https://via.placeholder.com/300x450?text=Super+Deluxe", synopsis: "Interwoven stories of an alien, a trans woman, a cheating wife, and more.", era: "2010s" , id: 7, title: "Soorarai Pottru", year: 2020, rating: 8.7, poster: "https://via.placeholder.com/300x450?text=Soorarai+Pottru", synopsis: "A man from rural background dreams to make low-cost airlines accessible.", era: "2020s" , id: 8, title: "Vada Chennai", year: 2018, rating: 8.6, poster: "https://via.placeholder.com/300x450?text=Vada+Chennai", synopsis: "A young carrom player gets trapped in North Chennai's gang wars.", era: "2010s" , id: 9, title: "Aadukalam", year: 2011, rating: 8.3, poster: "https://via.placeholder.com/300x450?text=Aadukalam", synopsis: "Rooster fights, pride, and betrayal in a rural backdrop.", era: "2010s" , id: 10, title: "Maharaja", year: 2024, rating: 8.7, poster: "https://via.placeholder.com/300x450?text=Maharaja", synopsis: "A barber's shocking quest for revenge after a burglary.", era: "2020s" ]; const movieGrid = document.getElementById("movieGrid"); const filterBtns = document.querySelectorAll(".filter-btn");
.rating-value background: #1e1e2c; padding: 0.2rem 0.6rem; border-radius: 20px; font-size: 0.85rem;
.container max-width: 1400px; margin: 0 auto; top rated tamil movies
function renderMovies(filter = "all") let filtered = [...moviesData]; if (filter === "2000s") filtered = moviesData.filter(m => m.year >= 2000 && m.year <= 2010); else if (filter === "2010s") filtered = moviesData.filter(m => m.year >= 2011 && m.year <= 2020); else if (filter === "2020s") filtered = moviesData.filter(m => m.year >= 2021);
.movie-card background: #151522; border-radius: 24px; overflow: hidden; transition: transform 0.25s ease, box-shadow 0.3s; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.05); cursor: pointer; position: relative; const moviesData = [ id: 1, title: "Nayakan
.movie-card:hover transform: translateY(-10px); box-shadow: 0 25px 40px rgba(0, 0, 0, 0.6); border-color: #ff7e0555;
// Filter button event listeners filterBtns.forEach(btn => btn.addEventListener("click", () => filterBtns.forEach(b => b.classList.remove("active")); btn.classList.add("active"); const filterValue = btn.getAttribute("data-filter"); renderMovies(filterValue); ); ); const moviesData = [ id: 1
.rating display: flex; align-items: center; gap: 0.4rem; margin: 0.6rem 0; font-weight: bold;