Pokemon Animations - Dark Mode

Pokémon Animations

body { background: #111; color: #fff; font-family: 'Segoe UI', Arial, sans-serif; margin: 0; min-height: 100vh; } .container { max-width: 900px; margin: 0 auto; padding: 32px 16px; text-align: center; } h1 { margin-bottom: 32px; font-size: 2.5rem; letter-spacing: 2px; color: #ffcb05; text-shadow: 0 2px 8px #222; } .pokemon-list { display: flex; flex-wrap: wrap; gap: 32px; justify-content: center; } .pokemon-card { background: #222; border-radius: 18px; box-shadow: 0 4px 24px 0 #000a; padding: 24px 18px 18px 18px; width: 180px; display: flex; flex-direction: column; align-items: center; transition: transform 0.2s, box-shadow 0.2s; position: relative; overflow: hidden; } .pokemon-card:hover { transform: translateY(-8px) scale(1.04) rotate(-2deg); box-shadow: 0 8px 32px 0 #000c; background: #23272f; } .pokemon-img { width: 120px; height: 120px; object-fit: contain; margin-bottom: 12px; filter: drop-shadow(0 4px 16px #0008); animation: float 2.2s ease-in-out infinite alternate; } .pokemon-card:hover .pokemon-img { animation: jump 0.5s cubic-bezier(.5,1.8,.5,1) forwards; } @keyframes float { 0% { transform: translateY(0); } 100% { transform: translateY(-18px); } } @keyframes jump { 0% { transform: translateY(0) scale(1); } 40% { transform: translateY(-32px) scale(1.1); } 60% { transform: translateY(-32px) scale(1.1); } 100% { transform: translateY(0) scale(1); } } .pokemon-name { font-size: 1.2rem; font-weight: bold; color: #ffcb05; letter-spacing: 1px; margin-bottom: 6px; text-shadow: 0 1px 4px #000a; } .pokemon-id { font-size: 0.95rem; color: #aaa; margin-bottom: 8px; } .pokemon-types { display: flex; gap: 8px; justify-content: center; margin-bottom: 4px; } .pokemon-type { padding: 2px 10px; border-radius: 12px; font-size: 0.85rem; font-weight: 500; color: #fff; background: #444; text-shadow: 0 1px 2px #000a; border: 1px solid #333; } /* Type colors */ .type-fire { background: linear-gradient(90deg, #ff9800 60%, #ff3c00 100%); } .type-water { background: linear-gradient(90deg, #2196f3 60%, #0d47a1 100%); } .type-grass { background: linear-gradient(90deg, #43ea5e 60%, #388e3c 100%); } .type-electric { background: linear-gradient(90deg, #ffe600 60%, #ffb300 100%); color: #222; } .type-psychic { background: linear-gradient(90deg, #ff5ca7 60%, #a80077 100%); } .type-ice { background: linear-gradient(90deg, #00eaff 60%, #00bcd4 100%); } .type-dragon { background: linear-gradient(90deg, #6f35fc 60%, #1a237e 100%); } .type-dark { background: linear-gradient(90deg, #333 60%, #000 100%); } .type-fairy { background: linear-gradient(90deg, #ffb6f7 60%, #e040fb 100%); color: #222; } .type-fighting { background: linear-gradient(90deg, #e57373 60%, #b71c1c 100%); } .type-flying { background: linear-gradient(90deg, #90caf9 60%, #1976d2 100%); } .type-poison { background: linear-gradient(90deg, #b388ff 60%, #6a1b9a 100%); } .type-ground { background: linear-gradient(90deg, #e0a96d 60%, #a0522d 100%); } .type-rock { background: linear-gradient(90deg, #bca873 60%, #6d4c41 100%); } .type-bug { background: linear-gradient(90deg, #cddc39 60%, #8bc34a 100%); color: #222; } .type-ghost { background: linear-gradient(90deg, #7c4dff 60%, #311b92 100%); } .type-steel { background: linear-gradient(90deg, #b0bec5 60%, #607d8b 100%); color: #222; } .type-normal { background: linear-gradient(90deg, #e0e0e0 60%, #757575 100%); color: #222; } @media (max-width: 700px) { .pokemon-list { gap: 18px; } .pokemon-card { width: 140px; padding: 16px 8px 12px 8px; } .pokemon-img { width: 80px; height: 80px; } } // List of Pokémon to display (first 12 for demo) const POKEMON_IDS = [ 1, 4, 7, 25, 39, 52, 94, 133, 143, 150, 197, 282 ]; const TYPE_CLASS_MAP = { fire: 'type-fire', water: 'type-water', grass: 'type-grass', electric: 'type-electric', psychic: 'type-psychic', ice: 'type-ice', dragon: 'type-dragon', dark: 'type-dark', fairy: 'type-fairy', fighting: 'type-fighting', flying: 'type-flying', poison: 'type-poison', ground: 'type-ground', rock: 'type-rock', bug: 'type-bug', ghost: 'type-ghost', steel: 'type-steel', normal: 'type-normal' }; async function fetchPokemon(id) { const res = await fetch(`https://pokeapi.co/api/v2/pokemon/${id}`); return res.json(); } function capitalize(str) { return str.charAt(0).toUpperCase() + str.slice(1); } function createPokemonCard(pokemon) { const card = document.createElement('div'); card.className = 'pokemon-card'; const img = document.createElement('img'); img.className = 'pokemon-img'; img.src = pokemon.sprites.other['official-artwork'].front_default || pokemon.sprites.front_default; img.alt = pokemon.name; const name = document.createElement('div'); name.className = 'pokemon-name'; name.textContent = capitalize(pokemon.name); const id = document.createElement('div'); id.className = 'pokemon-id'; id.textContent = `#${pokemon.id.toString().padStart(3, '0')}`; const types = document.createElement('div'); types.className = 'pokemon-types'; pokemon.types.forEach(t => { const type = document.createElement('span'); type.className = 'pokemon-type ' + (TYPE_CLASS_MAP[t.type.name] || ''); type.textContent = capitalize(t.type.name); types.appendChild(type); }); card.appendChild(img); card.appendChild(name); card.appendChild(id); card.appendChild(types); return card; } async function renderPokemonList() { const list = document.getElementById('pokemon-list'); list.innerHTML = ''; for (const id of POKEMON_IDS) { try { const pokemon = await fetchPokemon(id); const card = createPokemonCard(pokemon); list.appendChild(card); } catch (e) { // fallback card const card = document.createElement('div'); card.className = 'pokemon-card'; card.textContent = 'Failed to load Pokémon'; list.appendChild(card); } } } renderPokemonList();