Pawan Kalyan Filmography -

// render film cards function render() const filtered = filmography.filter(movie => matchesFilter(movie, currentFilter) && matchesSearch(movie, currentSearch) );

// update stats (total, lead, cameo) function updateStats() const total = filmography.length; const leadCount = filmography.filter(m => m.role === 'Lead').length; const cameoCount = filmography.filter(m => m.role === 'Cameo').length; const latest = [...filmography].sort((a,b)=>b.year - a.year)[0]; const statsHtml = <div class="stat-card"><span>$total</span> Total Films</div> <div class="stat-card"><span>$leadCount</span> Lead Roles</div> <div class="stat-card"><span>$cameoCount</span> Cameos</div> <div class="stat-card"><span>$latest.year</span> Latest Release</div> ; document.getElementById('statsContainer').innerHTML = statsHtml; pawan kalyan filmography

<div class="container"> <div class="hero"> <h1>⚡ Power Star ⚡</h1> <div class="sub">Pawan Kalyan — The Complete Filmography</div> <div class="stats-badge" id="statsContainer"> <!-- stats injected via JS --> </div> </div> // render film cards function render() const filtered

.role-badge.lead background: #ffb34730; color: #FFC107; border-left: 2px solid #FFB347; '✨ Special Appearance' : movie

grid.innerHTML = filtered.map(movie => // dynamic poster emoji / letter const posterInitial = movie.title.charAt(0).toUpperCase(); const yearCategory = movie.year; const roleClass = movie.role === 'Lead' ? 'lead' : ''; return ` <div class="film-card" data-id="$movie.id"> <div class="card-img"> <span>🎬 $posterInitial • $movie.year</span> </div> <div class="film-info"> <div class="film-title"> $movie.title <span class="film-year">$movie.year</span> </div> <div class="film-role"> <span class="role-badge $roleClass">$movie.role === 'Lead' ? '⭐ Power Star' : (movie.role === 'Cameo' ? '✨ Special Appearance' : movie.role)</span> <span>🎥 Dir: $movie.director</span> </div> <div class="film-desc"> $movie.desc <br> <span style="font-size:0.7rem; opacity:0.7;">🏷️ $movie.genre</span> </div> </div> </div> `; ).join('');

<div class="toolbar"> <div class="search-box"> <input type="text" id="searchInput" placeholder="🔍 Search by movie name, role, director..."> </div> <div class="filter-group" id="filterGroup"> <button data-filter="all" class="filter-btn active">🎬 All Movies</button> <button data-filter="lead" class="filter-btn">⭐ Lead Role</button> <button data-filter="cameo" class="filter-btn">✨ Cameo / Special</button> <button data-filter="2000s" class="filter-btn">📀 2000s</button> <button data-filter="2010s" class="filter-btn">🎞️ 2010s</button> <button data-filter="2020s" class="filter-btn">🔥 2020+</button> </div> </div>