Leffahylly body { font-family: Arial, sans-serif; background:#0f0f0f; color:#fff; margin:0; } h1 { text-align:center; padding:20px; } #controls { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; } input, select, button { padding:10px; border-radius:8px; border:none; } .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:20px; padding:20px; } .card { background:#1c1c1c; border-radius:15px; padding:15px; text-align:center; transition:0.3s; } .card:hover { transform:scale(1.05); box-shadow:0 0 15px rgba(0,191,255,0.5); } img { width:100%; border-radius:10px; min-height:300px; object-fit:cover; } a { color:#00bfff; text-decoration:none; display:block; margin-top:5px; } .badge { font-size:11px; color:#aaa; }

🎬 Leffahylly PRO v4

A–Ö Ö–A
const TMDB_API_KEY = ”PASTE_YOUR_TMDB_API_KEY_HERE”; const CACHE_KEY = ”movieCache_v4”; let cache = JSON.parse(localStorage.getItem(CACHE_KEY) || ”{}”); const movies = `1917 2001: Space Odyssey 2012 300 47 Ronin 8 Mile Abyss Accountant Accountant 2 Ad Astra Air Force One Alien Aliens Alien Covenant Alien Romulus Alita Battle Angel American Sniper Apollo 13 Aquaman Aquaman the Lost Kingdom Argo Avatar the Way of Water Avangers Infinity War Avangers Endgame Back to the Future 1 Back to the Future 2 Back to the Future 3 Baby Driver Bad Boys 1 Bad Boys 2 Bad Boys for Life Bad Boys Ride or Die The Batman Batman Begins Blade Runner 2049 Bohemian Rhapsody Bourne Identity Bourne Supremacy Bourne Ultimatium Casablanca Dune Dune 2 Dunkirk E.T. Elvis Equalizer Equalizer 2 Equalizer 3 Exorcist Fast X Ford v Ferrari Forrest Gump Gladiator Gladiator II Godzilla Godzilla vs Kong Good Fellas Green Mile Heat Inception Interstellar Indiana Jones and the Dial of Destiny Jaws Joker Jurassic Park Justice League Zack Snider Knives Out Logan Lord Of the Rings Box Mad Max Fury Road Man of Steel Matrix Mission Impossible Mission Impossible Fallout Mission Impossible Dead Reckoning Oppenheimer Pacific Rim Pulp Fiction Ready Player One Rocky I Rocky II Rocky III Rocky IV Saving Private Ryan Seven Shining Shutter Island Sisu Skyfall Spider-Man Spider-Man 2 Spider-Man 3 Spiderman Home Coming Spiderman Far from Home Spiderman No Way Home Star Trek Star Wars The Force Awakens Star Wars The Last Jedi Star Wars The Rise of Skywalker Superman Tenet Terminator Terminator 2 Judgement Day The Dark Knight The Dark Knight Rises The Revenant Titanic Top Gun Top Gun Maverick Transformers Tron Legacy Uncharted Venom Venom Let there be Carnage V for Vendetta Warcraft The Beginning Waterworld Wonder Woman Yesterday Zombieland Double Tap`.split(”\n”); function saveCache(){ localStorage.setItem(CACHE_KEY, JSON.stringify(cache)); } function clearCache(){ localStorage.removeItem(CACHE_KEY); location.reload(); } async function fetchBatch(list){ for(const title of list){ if(cache[title]) continue; try{ const res = await fetch(`https://api.themoviedb.org/3/search/movie?api_key=${TMDB_API_KEY}&query=${encodeURIComponent(title)}`); const data = await res.json(); if(!data.results?.length) continue; const m = data.results[0]; const details = await fetch(`https://api.themoviedb.org/3/movie/${m.id}?api_key=${TMDB_API_KEY}`).then(r=>r.json()); cache[title] = { poster: m.poster_path ? `https://image.tmdb.org/t/p/w500${m.poster_path}` : null, imdb: details.imdb_id ? `https://www.imdb.com/title/${details.imdb_id}` : null }; saveCache(); }catch{} } } const container = document.getElementById(”movies”); function render(list){ container.innerHTML=””; list.forEach(title=>{ const data = cache[title]; const card = document.createElement(”div”); card.className=”card”; card.innerHTML=`

${title}

IMDb Arvostelu
${data ? ”valmis” : ”ladataan…”}
`; container.appendChild(card); }); } function sortMovies(list){ const mode=document.getElementById(”sort”).value; return […list].sort((a,b)=> mode===’az’?a.localeCompare(b,’fi’):b.localeCompare(a,’fi’)); } function update(){ const term=document.getElementById(”search”).value.toLowerCase(); let filtered=movies.filter(m=>m.toLowerCase().includes(term)); filtered=sortMovies(filtered); render(filtered); } // 🚀 batch lataus taustalla (async ()=>{ update(); await fetchBatch(movies); update(); })(); document.getElementById(”search”).addEventListener(”input”, update); document.getElementById(”sort”).addEventListener(”change”, update);