Movies

elokuvahakemisto.html

			
<!DOCTYPE html>
<html lang="fi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leffahylly PRO v4</title>
<style>
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; }
</style>
</head>
<body>
<h1>🎬 Leffahylly PRO v4</h1>
<div id="controls">
<input type="text" id="search" placeholder="Hae elokuvaa...">
<select id="sort">
<option value="az">A–Ö</option>
<option value="za">Ö–A</option>
</select>
<button onclick="clearCache()">Tyhjennä cache</button>
</div>
<div class="grid" id="movies"></div>
<script>
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=`
      <img src="${data?.poster || `https://via.placeholder.com/300x450?text=${encodeURIComponent(title)}`}" />
      <h3>${title}</h3>
      <a href="${data?.imdb || `https://www.imdb.com/find?q=${encodeURIComponent(title)}`}" target="_blank">IMDb</a>
      <a href="https://www.leffafriikki.com/?s=${encodeURIComponent(title)}" target="_blank">Arvostelu</a>
      <div class="badge">${data ? "valmis" : "ladataan..."}</div>
    `;
    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);
</script>
</body>
</html>

		
Jaa tämä:
