|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Gen 1 Pokedex | First 50 Pokémon</title> |
|
<script src="https://cdn.tailwindcss.com"></script> |
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet"> |
|
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script> |
|
<style> |
|
body { |
|
font-family: 'Press Start 2P', cursive; |
|
background-color: #f0f0f0; |
|
color: #333; |
|
} |
|
.pokemon-card { |
|
transition: all 0.3s ease; |
|
transform-style: preserve-3d; |
|
} |
|
.pokemon-card:hover { |
|
transform: translateY(-5px) rotateY(5deg); |
|
box-shadow: 0 10px 20px rgba(0,0,0,0.2); |
|
} |
|
.pokemon-card-inner { |
|
transition: transform 0.6s; |
|
transform-style: preserve-3d; |
|
} |
|
.pokemon-card:hover .pokemon-card-inner { |
|
transform: rotateY(10deg); |
|
} |
|
@keyframes float { |
|
0%, 100% { transform: translateY(0); } |
|
50% { transform: translateY(-10px); } |
|
} |
|
.floating { |
|
animation: float 3s ease-in-out infinite; |
|
} |
|
.pokemon-sprite { |
|
transition: transform 0.3s; |
|
} |
|
.pokemon-sprite:hover { |
|
transform: scale(1.1); |
|
} |
|
.type-bug { background-color: #A8B820; } |
|
.type-dark { background-color: #705848; } |
|
.type-dragon { background-color: #7038F8; } |
|
.type-electric { background-color: #F8D030; } |
|
.type-fairy { background-color: #EE99AC; } |
|
.type-fighting { background-color: #C03028; } |
|
.type-fire { background-color: #F08030; } |
|
.type-flying { background-color: #A890F0; } |
|
.type-ghost { background-color: #705898; } |
|
.type-grass { background-color: #78C850; } |
|
.type-ground { background-color: #E0C068; } |
|
.type-ice { background-color: #98D8D8; } |
|
.type-normal { background-color: #A8A878; } |
|
.type-poison { background-color: #A040A0; } |
|
.type-psychic { background-color: #F85888; } |
|
.type-rock { background-color: #B8A038; } |
|
.type-steel { background-color: #B8B8D0; } |
|
.type-water { background-color: #6890F0; } |
|
</style> |
|
</head> |
|
<body class="min-h-screen bg-gray-100"> |
|
<div class="container mx-auto px-4 py-8"> |
|
<header class="text-center mb-8 relative overflow-hidden"> |
|
<div class="absolute inset-0 bg-red-500 transform -skew-y-3 z-0 opacity-20"></div> |
|
<h1 class="text-4xl md:text-6xl font-bold relative z-10 mb-2 text-red-600"> |
|
<span class="text-yellow-400">POKÉ</span>DEX |
|
</h1> |
|
<p class="text-lg md:text-xl relative z-10 text-gray-700">Generation 1 | Pokémon #1-50</p> |
|
|
|
<div class="absolute top-4 left-4 w-16 h-16 flex items-center justify-center rounded-full bg-red-500 shadow-md"> |
|
<lottie-player src="https://assets8.lottiefiles.com/packages/lf20_b88nh30c.json" background="transparent" speed="1" style="width: 40px; height: 40px;" loop autoplay></lottie-player> |
|
</div> |
|
</header> |
|
|
|
<div class="flex justify-between items-center mb-6"> |
|
<div class="relative w-64"> |
|
<input type="text" id="search" placeholder="Search Pokémon..." class="w-full px-4 py-2 rounded-full border-2 border-gray-300 focus:outline-none focus:border-red-500 transition-all"> |
|
<button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-red-500 text-white rounded-full p-1"> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> |
|
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" /> |
|
</svg> |
|
</button> |
|
</div> |
|
<div> |
|
<button id="toggle-view" class="bg-yellow-400 hover:bg-yellow-500 text-black px-4 py-2 rounded-md flex items-center transition-colors"> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor"> |
|
<path d="M4 4a2 2 0 00-2 2v1h16V6a2 2 0 00-2-2H4z" /> |
|
<path fill-rule="evenodd" d="M18 9H2v5a2 2 0 002 2h12a2 2 0 002-2V9zM4 13a1 1 0 011-1h1a1 1 0 110 2H5a1 1 0 01-1-1zm5-1a1 1 0 100 2h1a1 1 0 100-2H9z" clip-rule="evenodd" /> |
|
</svg> |
|
Grid View |
|
</button> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="mb-8"> |
|
<h3 class="text-lg font-bold mb-2">Filter by Type:</h3> |
|
<div class="flex flex-wrap gap-2"> |
|
<button class="type-filter px-3 py-1 rounded-full text-xs text-white bg-red-500" data-type="all">All</button> |
|
<button class="type-filter px-3 py-1 rounded-full text-xs text-white type-fire" data-type="fire">Fire</button> |
|
<button class="type-filter px-3 py-1 rounded-full text-xs text-white type-water" data-type="water">Water</button> |
|
<button class="type-filter px-3 py-1 rounded-full text-xs text-white type-grass" data-type="grass">Grass</button> |
|
<button class="type-filter px-3 py-1 rounded-full text-xs text-white type-electric" data-type="electric">Electric</button> |
|
<button class="type-filter px-3 py-1 rounded-full text-xs text-white type-normal" data-type="normal">Normal</button> |
|
<button class="type-filter px-3 py-1 rounded-full text-xs text-white type-fighting" data-type="fighting">Fighting</button> |
|
<button class="type-filter px-3 py-1 rounded-full text-xs text-white type-poison" data-type="poison">Poison</button> |
|
<button class="type-filter px-3 py-1 rounded-full text-xs text-white type-ground" data-type="ground">Ground</button> |
|
<button class="type-filter px-3 py-1 rounded-full text-xs text-white type-flying" data-type="flying">Flying</button> |
|
<button class="type-filter px-3 py-1 rounded-full text-xs text-white type-psychic" data-type="psychic">Psychic</button> |
|
<button class="type-filter px-3 py-1 rounded-full text-xs text-white type-bug" data-type="bug">Bug</button> |
|
<button class="type-filter px-3 py-1 rounded-full text-xs text-white type-rock" data-type="rock">Rock</button> |
|
<button class="type-filter px-3 py-1 rounded-full text-xs text-white type-ghost" data-type="ghost">Ghost</button> |
|
<button class="type-filter px-3 py-1 rounded-full text-xs text-white type-dragon" data-type="dragon">Dragon</button> |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="pokemon-grid" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6"> |
|
|
|
</div> |
|
|
|
|
|
<div id="pokemon-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
|
<div class="bg-white rounded-lg max-w-4xl w-full max-h-screen overflow-y-auto relative"> |
|
<button id="close-modal" class="absolute top-4 right-4 bg-red-500 text-white rounded-full p-2 hover:bg-red-600 transition-colors"> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> |
|
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" /> |
|
</svg> |
|
</button> |
|
<div class="p-8"> |
|
<div id="modal-content" class="grid md:grid-cols-2 gap-8"> |
|
|
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<script> |
|
|
|
const pokemonData = [ |
|
{ |
|
id: 1, |
|
name: "Bulbasaur", |
|
types: ["grass", "poison"], |
|
stats: { hp: 45, attack: 49, defense: 49, spAtk: 65, spDef: 65, speed: 45 }, |
|
height: 0.7, |
|
weight: 6.9, |
|
description: "A strange seed was planted on its back at birth. The plant sprouts and grows with this Pokémon.", |
|
moves: ["Tackle", "Growl", "Vine Whip", "Leech Seed"], |
|
sprite: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/1.png", |
|
cry: "https://play.pokemonshowdown.com/audio/cries/1.mp3" |
|
}, |
|
{ |
|
id: 2, |
|
name: "Ivysaur", |
|
types: ["grass", "poison"], |
|
stats: { hp: 60, attack: 62, defense: 63, spAtk: 80, spDef: 80, speed: 60 }, |
|
height: 1.0, |
|
weight: 13.0, |
|
description: "When the bulb on its back grows large, it appears to lose the ability to stand on its hind legs.", |
|
moves: ["Tackle", "Growl", "Vine Whip", "Razor Leaf"], |
|
sprite: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/2.png", |
|
cry: "https://play.pokemonshowdown.com/audio/cries/2.mp3" |
|
}, |
|
{ |
|
id: 3, |
|
name: "Venusaur", |
|
types: ["grass", "poison"], |
|
stats: { hp: 80, attack: 82, defense: 83, spAtk: 100, spDef: 100, speed: 80 }, |
|
height: 2.0, |
|
weight: 100.0, |
|
description: "The plant blooms when it is absorbing solar energy. It stays on the move to seek sunlight.", |
|
moves: ["Tackle", "Growl", "Vine Whip", "Solar Beam"], |
|
sprite: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/3.png", |
|
cry: "https://play.pokemonshowdown.com/audio/cries/3.mp3" |
|
}, |
|
{ |
|
id: 4, |
|
name: "Charmander", |
|
types: ["fire"], |
|
stats: { hp: 39, attack: 52, defense: 43, spAtk: 60, spDef: 50, speed: 65 }, |
|
height: 0.6, |
|
weight: 8.5, |
|
description: "Obviously prefers hot places. When it rains, steam is said to spout from the tip of its tail.", |
|
moves: ["Scratch", "Growl", "Ember", "Dragon Rage"], |
|
sprite: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/4.png", |
|
cry: "https://play.pokemonshowdown.com/audio/cries/4.mp3" |
|
}, |
|
{ |
|
id: 5, |
|
name: "Charmeleon", |
|
types: ["fire"], |
|
stats: { hp: 58, attack: 64, defense: 58, spAtk: 80, spDef: 65, speed: 80 }, |
|
height: 1.1, |
|
weight: 19.0, |
|
description: "When it swings its burning tail, it elevates the temperature to unbearably high levels.", |
|
moves: ["Scratch", "Growl", "Ember", "Flamethrower"], |
|
sprite: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/5.png", |
|
cry: "https://play.pokemonshowdown.com/audio/cries/5.mp3" |
|
}, |
|
{ |
|
id: 6, |
|
name: "Charizard", |
|
types: ["fire", "flying"], |
|
stats: { hp: 78, attack: 84, defense: 78, spAtk: 109, spDef: 85, speed: 100 }, |
|
height: 1.7, |
|
weight: 90.5, |
|
description: "Spits fire that is hot enough to melt boulders. Known to cause forest fires unintentionally.", |
|
moves: ["Scratch", "Growl", "Flamethrower", "Fire Blast"], |
|
sprite: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/6.png", |
|
cry: "https://play.pokemonshowdown.com/audio/cries/6.mp3" |
|
}, |
|
{ |
|
id: 7, |
|
name: "Squirtle", |
|
types: ["water"], |
|
stats: { hp: 44, attack: 48, defense: 65, spAtk: 50, spDef: 64, speed: 43 }, |
|
height: 0.5, |
|
weight: 9.0, |
|
description: "After birth, its back swells and hardens into a shell. Powerfully sprays foam from its mouth.", |
|
moves: ["Tackle", "Tail Whip", "Water Gun", "Withdraw"], |
|
sprite: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/7.png", |
|
cry: "https://play.pokemonshowdown.com/audio/cries/7.mp3" |
|
}, |
|
{ |
|
id: 8, |
|
name: "Wartortle", |
|
types: ["water"], |
|
stats: { hp: 59, attack: 63, defense: 80, spAtk: 65, spDef: 80, speed: 58 }, |
|
height: 1.0, |
|
weight: 22.5, |
|
description: "Often hides in water to stalk unwary prey. For swimming fast, it moves its ears to maintain balance.", |
|
moves: ["Tackle", "Tail Whip", "Water Gun", "Bite"], |
|
sprite: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/8.png", |
|
cry: "https://play.pokemonshowdown.com/audio/cries/8.mp3" |
|
}, |
|
{ |
|
id: 9, |
|
name: "Blastoise", |
|
types: ["water"], |
|
stats: { hp: 79, attack: 83, defense: 100, spAtk: 85, spDef: 105, speed: 78 }, |
|
height: 1.6, |
|
weight: 85.5, |
|
description: "A brutal Pokémon with pressurized water jets on its shell. They are used for high speed tackles.", |
|
moves: ["Tackle", "Tail Whip", "Water Gun", "Hydro Pump"], |
|
sprite: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/9.png", |
|
cry: "https://play.pokemonshowdown.com/audio/cries/9.mp3" |
|
}, |
|
{ |
|
id: 10, |
|
name: "Caterpie", |
|
types: ["bug"], |
|
stats: { hp: 45, attack: 30, defense: 35, spAtk: 20, spDef: 20, speed: 45 }, |
|
height: 0.3, |
|
weight: 2.9, |
|
description: "Its short feet are tipped with suction pads that enable it to tirelessly climb slopes and walls.", |
|
moves: ["Tackle", "String Shot"], |
|
sprite: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/10.png", |
|
cry: "https://play.pokemonshowdown.com/audio/cries/10.mp3" |
|
}, |
|
{ |
|
id: 11, |
|
name: "Metapod", |
|
types: ["bug"], |
|
stats: { hp: 50, attack: 20, defense: 55, spAtk: 25, spDef: 25, speed: 30 }, |
|
height: 0.7, |
|
weight: 9.9, |
|
description: "This Pokémon is vulnerable to attack while its shell is soft, exposing its weak and tender body.", |
|
moves: ["Harden"], |
|
sprite: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/11.png", |
|
cry: "https://play.pokemonshowdown.com/audio/cries/11.mp3" |
|
}, |
|
{ |
|
id: 12, |
|
name: "Butterfree", |
|
types: ["bug", "flying"], |
|
stats: { hp: 60, attack: 45, defense: 50, spAtk: 90, spDef: 80, speed: 70 }, |
|
height: 1.1, |
|
weight: 32.0, |
|
description: "In battle, it flaps its wings at high speed to release highly toxic dust into the air.", |
|
moves: ["Confusion", "Poison Powder", "Stun Spore", "Sleep Powder"], |
|
sprite: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/12.png", |
|
cry: "https://play.pokemonshowdown.com/audio/cries/12.mp3" |
|
}, |
|
{ |
|
id: 13, |
|
name: "Weedle", |
|
types: ["bug", "poison"], |
|
stats: { hp: 40, attack: 35, defense: 30, spAtk: 20, spDef: 20, speed: 50 }, |
|
height: 0.3, |
|
weight: 3.2, |
|
description: "Often found in forests, eating leaves. It has a sharp venomous stinger on its head.", |
|
moves: ["Poison Sting", "String Shot"], |
|
sprite: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/13.png", |
|
cry: "https://play.pokemonshowdown.com/audio/cries/13.mp3" |
|
}, |
|
{ |
|
id: 14, |
|
name: "Kakuna", |
|
types: ["bug", "poison"], |
|
stats: { hp: 45, attack: 25, defense: 50, spAtk: 25, spDef: 25, speed: 35 }, |
|
height: 0.6, |
|
weight: 10.0, |
|
description: "Almost incapable of moving, this Pokémon can only harden its shell to protect itself from predators.", |
|
moves: ["Harden"], |
|
sprite: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/14.png", |
|
cry: "https://play.pokemonshowdown.com/audio/cries/14.mp3" |
|
}, |
|
{ |
|
id: 15, |
|
name: "Beedrill", |
|
types: ["bug", "poison"], |
|
stats: { hp: 65, attack: 90, defense: 40, spAtk: 45, spDef: 80, speed: 75 }, |
|
height: 1.0, |
|
weight: 29.5, |
|
description: "Flies at high speed and attacks using its large venomous stingers on its forelegs and tail.", |
|
moves: ["Fury Attack", "Focus Energy", "Twineedle"], |
|
sprite: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/15.png", |
|
cry: "https://play.pokemonshowdown.com/audio/cries/15.mp3" |
|
}, |
|
{ |
|
id: 16, |
|
name: "Pidgey", |
|
types: ["normal", "flying"], |
|
stats: { hp: 40, attack: 45, defense: 40, spAtk: 35, spDef: 35, speed: 56 }, |
|
height: 0.3, |
|
weight: 1.8, |
|
description: "A common sight in forests and woods. It flaps its wings at ground level to kick up blinding sand.", |
|
moves: ["Tackle", "Sand Attack", "Gust"], |
|
sprite: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/16.png", |
|
cry: "https://play.pokemonshowdown.com/audio/cries/16.mp3" |
|
}, |
|
{ |
|
id: 17, |
|
name: "Pidgeotto", |
|
types: ["normal", "flying"], |
|
stats: { hp: 63, attack: 60, defense: 55, spAtk: 50, spDef: 50, speed: 71 }, |
|
height: 1.1, |
|
weight: 30.0, |
|
description: "Very protective of its sprawling territorial area, this Pokémon will fiercely peck at any intruder.", |
|
moves: ["Tackle", "Sand Attack", "Gust", "Quick Attack"], |
|
sprite: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/17.png", |
|
cry: "https://play.pokemonshowdown.com/audio/cries/17.mp3" |
|
}, |
|
{ |
|
id: 18, |
|
name: "Pidgeot", |
|
types: ["normal", "flying"], |
|
stats: { hp: 83, attack: 80, defense: 75, spAtk: 70, spDef: 70, speed: 101 }, |
|
height: 1.5, |
|
weight: 39.5, |
|
description: "When hunting, it skims the surface of water at high speed to pick off unwary prey such as Magikarp.", |
|
moves: ["Tackle", "Sand Attack", "Gust", "Wing Attack"], |
|
sprite: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/18.png", |
|
cry: "https://play.pokemonshowdown.com/audio/cries/18.mp3" |
|
}, |
|
{ |
|
id: 19, |
|
name: "Rattata", |
|
types: ["normal"], |
|
stats: { hp: 30, attack: 56, defense: 35, spAtk: 25, spDef: 35, speed: 72 }, |
|
height: 0.3, |
|
weight: 3.5, |
|
description: "Bites anything when it attacks. Small and very quick, it is a common sight in many places.", |
|
moves: ["Tackle", "Tail Whip", "Quick Attack"], |
|
sprite: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/19.png", |
|
cry: "https://play.pokemonshowdown.com/audio/cries/19.mp3" |
|
}, |
|
{ |
|
id: 20, |
|
name: "Raticate", |
|
types: ["normal"], |
|
stats: { hp: 55, attack: 81, defense: 60, spAtk: 50, spDef: 70, speed: 97 }, |
|
height: 0.7, |
|
weight: 18.5, |
|
description: "It uses its whiskers to maintain its balance. It seems to slow down if they are cut off.", |
|
moves: ["Tackle", "Tail Whip", "Quick Attack", "Hyper Fang"], |
|
sprite: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/20.png", |
|
cry: "https://play.pokemonshowdown.com/audio/cries/20.mp3" |
|
}, |
|
{ |
|
id: 21, |
|
name: "Spearow", |
|
types: ["normal", "flying"], |
|
stats: { hp: 40, attack: 60, defense: 30, spAtk: 31, spDef: 31, speed: 70 }, |
|
height: 0.3, |
|
weight: 2.0, |
|
description: "Eats bugs in grassy areas. It has to flap its short wings at high speed to stay airborne.", |
|
moves: ["Peck", "Growl", "Leer"], |
|
sprite: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/21.png", |
|
cry: "https://play.pokemonshowdown.com/audio/cries/21.mp3" |
|
}, |
|
{ |
|
id: 22, |
|
name: "Fearow", |
|
types: ["normal", "flying"], |
|
stats: { hp: 65, attack: 90, defense: 65, spAtk: 61, spDef: 61, speed: 100 }, |
|
height: 1.2, |
|
weight: 38.0, |
|
description: "With its huge and magnificent wings, it can keep aloft without ever having to land for rest.", |
|
moves: ["Peck", "Growl", "Leer", "Fury Attack"], |
|
sprite: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/22.png", |
|
cry: "https://play.pokemonshowdown.com/audio/cries/22.mp3" |
|
}, |
|
{ |
|
id: 23, |
|
name: "Ekans", |
|
types: ["poison"], |
|
stats: { hp: 35, attack: 60, defense: 44, spAtk: 40, spDef: 54, speed: 55 }, |
|
height: 2.0, |
|
weight: 6.9, |
|
description: "Moves silently and stealthily. Eats the eggs of birds, such as Pidgey and Spearow, whole.", |
|
moves: ["Wrap", "Leer", "Poison Sting"], |
|
sprite: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/23.png", |
|
cry: "https://play.pokemonshowdown.com/audio/cries/23.mp3" |
|
}, |
|
{ |
|
id: 24, |
|
name: "Arbok", |
|
types: ["poison"], |
|
stats: { hp: 60, attack: 85, defense: 69, spAtk: 65, spDef: 79, speed: 80 }, |
|
height: 3.5, |
|
weight: 65.0, |
|
description: "It is rumored that the ferocious warning markings on its belly differ from area to area.", |
|
moves: ["Wrap", "Leer", "Poison Sting", "Bite"], |
|
sprite: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/24.png", |
|
cry: "https://play.pokemonshowdown.com/audio/cries/24.mp3" |
|
}, |
|
{ |
|
id: 25, |
|
name: "Pikachu", |
|
types: ["electric"], |
|
stats: { hp: 35, attack: 55, defense: 40, spAtk: 50, spDef: 50, speed: 90 }, |
|
height: 0.4, |
|
weight: 6.0, |
|
description: "When several of these Pokémon gather, their electricity could build and cause lightning storms.", |
|
moves: ["Thunder Shock", "Growl", "Tail Whip", "Quick Attack"], |
|
sprite: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/25.png", |
|
cry: "https://play.pokemonshowdown.com/audio/cries/25.mp3" |
|
}, |
|
{ |
|
id: 26, |
|
name: "Raichu", |
|
types: ["electric"], |
|
stats: { hp: 60, attack: 90, defense: 55, spAtk: 90, spDef: 80, speed: 110 }, |
|
height: 0.8, |
|
weight: 30.0, |
|
description: "Its long tail serves as a ground to protect itself from its own high voltage power.", |
|
moves: ["Thunder Shock", "Growl", "Tail Whip", "Thunderbolt"], |
|
sprite: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/26.png", |
|
cry: "https://play.pokemonshowdown.com/audio/cries/26.mp3" |
|
}, |
|
{ |
|
id: 27, |
|
name: "Sandshrew", |
|
types: ["ground"], |
|
stats: { hp: 50, attack: 75, defense: 85, spAtk: 20, spDef: 30, speed: 40 }, |
|
height: 0.6, |
|
weight: 12.0, |
|
description: "Burrows deep underground in arid locations far from water. It only emerges to hunt for food.", |
|
moves: ["Scratch", "Defense Curl", "Sand Attack"], |
|
sprite: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/27.png", |
|
cry: "https://play.pokemonshowdown.com/audio/cries/27.mp3" |
|
}, |
|
{ |
|
id: 28, |
|
name: "Sandslash", |
|
types: ["ground"], |
|
stats: { hp: 75, attack: 100, defense: 110, spAtk: 45, spDef: 55, speed: 65 }, |
|
height: 1.0, |
|
weight: 29.5, |
|
description: "Curls up into a spiny ball when threatened. It can roll while curled up to attack or escape.", |
|
moves: ["Scratch", "Defense Curl", "Sand Attack", "Swift"], |
|
sprite: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/28.png", |
|
cry: "https://play.pokemonshowdown.com/audio/cries/28.mp3" |
|
}, |
|
{ |
|
id: 29, |
|
name: "Nidoran♀", |
|
types: ["poison"], |
|
stats: { hp: 55, attack: 47, defense: 52, spAtk: 40, spDef: 40, speed: 41 }, |
|
height: 0.4, |
|
weight: 7.0, |
|
description: "Although small, its venomous barbs render this Pokémon dangerous. The female has smaller horns.", |
|
moves: ["Growl", "Tackle", "Scratch"], |
|
sprite: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/29.png", |
|
cry: "https://play.pokemonshowdown.com/audio/cries/29.mp3" |
|
}, |
|
{ |
|
id: 30, |
|
name: "Nidorina", |
|
types: ["poison"], |
|
stats: { hp: 70, attack: 62, defense: 67, spAtk: 55, spDef: 55, speed: 56 }, |
|
height: 0.8, |
|
weight: 20.0, |
|
description: "The female's horn develops slowly. Prefers physical attacks such as clawing and biting.", |
|
moves: ["Growl", "Tackle", "Scratch", "Double Kick"], |
|
sprite: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/30.png", |
|
cry: "https://play.pokemonshowdown.com/audio/cries/30.mp3" |
|
}, |
|
{ |
|
id: 31, |
|
name: "Nidoqueen", |
|
types: ["poison", "ground"], |
|
stats: { hp: 90, attack: 92, defense: 87, spAtk: 75, spDef: 85, speed: 76 }, |
|
height: 1.3, |
|
weight: 60.0, |
|
description: "Its hard scales provide strong protection. It uses its hefty bulk to execute powerful moves.", |
|
moves: ["Growl", "Tackle", "Scratch", "Body Slam"], |
|
sprite: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/31.png", |
|
cry: "https://play.pokemonshowdown.com/audio/cries/31.mp3" |
|
}, |
|
{ |
|
id: 32, |
|
name: "Nidoran♂", |
|
types: ["poison"], |
|
stats: { hp: 46, attack: 57, defense: 40, spAtk: 40, spDef: 40, speed: 50 }, |
|
height: 0.5, |
|
weight: 9.0, |
|
description: "It constantly moves its large ears in many directions in order to detect danger right away.", |
|
moves: ["Leer", "Tackle", "Horn Attack"], |
|
sprite: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/32.png", |
|
cry: "https://play.pokemonshowdown.com/audio/cries/32.mp3" |
|
}, |
|
{ |
|
id: 33, |
|
name: "Nidorino", |
|
types: ["poison"], |
|
stats: { hp: 61, attack: 72, defense: 57, spAtk: 55, spDef: 55, speed: 65 }, |
|
height: 0.9, |
|
weight: 19.5, |
|
description: "An aggressive Pokémon that is quick to attack. The horn on its head secretes a powerful venom.", |
|
moves: ["Leer", "Tackle", "Horn Attack", "Double Kick"], |
|
sprite: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/33.png", |
|
cry: "https://play.pokemonshowdown.com/audio/cries/33.mp3" |
|
}, |
|
{ |
|
id: 34, |
|
name: "Nidoking", |
|
types: ["poison", "ground"], |
|
stats: { hp: 81, attack: 102, defense: 77, spAtk: 85, spDef: 75, speed: 85 }, |
|
height: 1.4, |
|
weight: 62.0, |
|
description: "It uses its powerful tail in battle to smash, constrict, then break the prey's bones.", |
|
moves: ["Leer", "Tackle", "Horn Attack", "Thrash"], |
|
sprite: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/34.png", |
|
cry: "https://play.pokemonshowdown.com/audio/cries/34.mp3" |
|
}, |
|
{ |
|
id: 35, |
|
name: "Clefairy", |
|
types: ["fairy"], |
|
stats: { hp: 70, attack: 45, defense: 48, spAtk: 60, spDef: 65, speed: 35 }, |
|
height: 0.6, |
|
weight: 7.5, |
|
description: "Its magical and cute appeal has many admirers. It is rare and found only in certain areas.", |
|
moves: ["Pound", "Growl", "Sing", "Metronome"], |
|
sprite: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/35.png", |
|
cry: "https://play.pokemonshowdown.com/audio/cries/35.mp3" |
|
}, |
|
{ |
|
id: 36, |
|
name: "Clefable", |
|
types: ["fairy"], |
|
stats: { hp: 95, attack: 70, defense: 73, spAtk: 95, spDef: 90, speed: 60 }, |
|
height: 1.3, |
|
weight: 40.0, |
|
description: "A timid fairy Pokémon that is rarely seen. It will run and hide the moment it senses people.", |
|
moves: ["Pound", "Growl", "Sing", "Metronome"], |
|
sprite: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/36.png", |
|
cry: "https://play.pokemonshowdown.com/audio/cries/36.mp3" |
|
}, |
|
{ |
|
id: 37, |
|
name: "Vulpix", |
|
types: ["fire"], |
|
stats: { hp: 38, attack: 41, defense: 40, spAtk: 50, spDef: 65, speed: 65 }, |
|
height: 0.6, |
|
weight: 9.9, |
|
description: "At the time of birth, it has just one tail. The tail splits from its tip as it grows older.", |
|
moves: ["Ember", "Tail Whip", "Quick Attack"], |
|
sprite: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/37.png", |
|
cry: "https://play.pokemonshowdown.com/audio/cries/37.mp3" |
|
}, |
|
{ |
|
id: 38, |
|
name: "Ninetales", |
|
types: ["fire"], |
|
stats: { hp: 73, attack: 76, defense: 75, spAtk: 81, spDef: 100, speed: 100 }, |
|
height: 1.1, |
|
weight: 19.9, |
|
description: "Very smart and very vengeful. Grabbing one of its many tails could result in a 1000-year curse.", |
|
moves: ["Ember", "Tail Whip", "Quick Attack", "Confuse Ray"], |
|
sprite: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/38.png", |
|
cry: "https://play.pokemonshowdown.com/audio/cries/38.mp3" |
|
}, |
|
{ |
|
id: 39, |
|
name: "Jigglypuff", |
|
types: ["normal", "fairy"], |
|
stats: { hp: 115, attack: 45, defense: 20, spAtk: 45, spDef: 25, speed: 20 }, |
|
height: 0.5, |
|
weight: 5.5, |
|
description: "When its huge eyes light up, it sings a mysteriously soothing melody that lulls its enemies to sleep.", |
|
moves: ["Sing", "Pound", "Defense Curl"], |
|
sprite: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/39.png", |
|
cry: "https://play.pokemonshowdown.com/audio/cries/39.mp3" |
|
}, |
|
{ |
|
id: 40, |
|
name: "Wigglytuff", |
|
types: ["normal", "fairy"], |
|
stats: { hp: 140, attack: 70, defense: 45, spAtk: 85, spDef: 50, speed: 45 }, |
|
height: 1.0, |
|
weight: 12.0, |
|
description: "The body is soft and rubbery. When angered, it will suck in air and inflate itself to an enormous size.", |
|
moves: ["Sing", "Pound", "Defense Curl", "Double Slap"], |
|
sprite: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/40.png", |
|
cry: "https://play.pokemonshowdown.com/audio/cries/40.mp3" |
|
}, |
|
{ |
|
id: 41, |
|
name: "Zubat", |
|
types: ["poison", "flying"], |
|
stats: { hp: 40, attack: 45, defense: 35, spAtk: 30, spDef: 40, speed: 55 }, |
|
height: 0.8, |
|
weight: 7.5, |
|
description: "Forms colonies in perpetually dark places. Uses ultrasonic waves to identify and approach targets.", |
|
moves: ["Leech Life", "Supersonic"], |
|
sprite: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/41.png", |
|
cry: "https://play.pokemonshowdown.com/audio/cries/41.mp3" |
|
}, |
|
{ |
|
id: 42, |
|
name: "Golbat", |
|
types: ["poison", "flying"], |
|
stats: { hp: 75, attack: 80, defense: 70, spAtk: 65, spDef: 75, speed: 90 }, |
|
height: 1.6, |
|
weight: 55.0, |
|
description: "Once it strikes, it will not stop draining energy from the victim even if it gets too heavy to fly.", |
|
moves: ["Leech Life", "Supersonic", "Bite"], |
|
sprite: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/42.png", |
|
cry: "https://play.pokemonshowdown.com/audio/cries/42.mp3" |
|
}, |
|
{ |
|
id: 43, |
|
name: "Oddish", |
|
types: ["grass", "poison"], |
|
stats: { hp: 45, attack: 50, defense: 55, spAtk: 75, spDef: 65, speed: 30 }, |
|
height: 0.5, |
|
weight: 5.4, |
|
description: "During the day, it keeps its face buried in the ground. At night, it wanders around sowing its seeds.", |
|
moves: ["Absorb", "Poison Powder"], |
|
sprite: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/43.png", |
|
cry: "https://play.pokemonshowdown.com/audio/cries/43.mp3" |
|
}, |
|
{ |
|
id: 44, |
|
name: "Gloom", |
|
types: ["grass", "poison"], |
|
stats: { hp: 60, attack: 65, defense: 70, spAtk: 85, spDef: 75, speed: 40 }, |
|
height: 0.8, |
|
weight: 8.6, |
|
description: "The fluid that oozes from its mouth isn't drool. It is a nectar that is used to attract prey.", |
|
moves: ["Absorb", "Poison Powder", "Sleep Powder"], |
|
sprite: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/44.png", |
|
cry: "https://play.pokemonshowdown.com/audio/cries/44.mp3" |
|
}, |
|
{ |
|
id: 45, |
|
name: "Vileplume", |
|
types: ["grass", "poison"], |
|
stats: { hp: 75, attack: 80, defense: 85, spAtk: 110, spDef: 90, speed: 50 }, |
|
height: 1.2, |
|
weight: 18.6, |
|
description: "The larger its petals, the more toxic pollen it contains. Its big head is heavy and hard to hold up.", |
|
moves: ["Absorb", "Poison Powder", "Sleep Powder", "Petal Dance"], |
|
sprite: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/45.png", |
|
cry: "https://play.pokemonshowdown.com/audio/cries/45.mp3" |
|
}, |
|
{ |
|
id: 46, |
|
name: "Paras", |
|
types: ["bug", "grass"], |
|
stats: { hp: 35, attack: 70, defense: 55, spAtk: 45, spDef: 55, speed: 25 }, |
|
height: 0.3, |
|
weight: 5.4, |
|
description: "Burrows to suck tree roots. The mushrooms on its back grow by drawing nutrients from the bug host.", |
|
moves: ["Scratch", "Leech Life"], |
|
sprite: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/46.png", |
|
cry: "https://play.pokemonshowdown.com/audio/cries/46.mp3" |
|
}, |
|
{ |
|
id: 47, |
|
name: "Parasect", |
|
types: ["bug", "grass"], |
|
stats: { hp: 60, attack: 95, defense: 80, spAtk: 60, spDef: 80, speed: 30 }, |
|
height: 1.0, |
|
weight: 29.5, |
|
description: "A host-parasite pair in which the parasite mushroom has taken over the host bug. Prefers damp places.", |
|
moves: ["Scratch", "Leech Life", "Spore"], |
|
sprite: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/47.png", |
|
cry: "https://play.pokemonshowdown.com/audio/cries/47.mp3" |
|
}, |
|
{ |
|
id: 48, |
|
name: "Venonat", |
|
types: ["bug", "poison"], |
|
stats: { hp: 60, attack: 55, defense: 50, spAtk: 40, spDef: 55, speed: 45 }, |
|
height: 1.0, |
|
weight: 30.0, |
|
description: "Lives in the shadows of tall trees where it eats insects. It is attracted by light at night.", |
|
moves: ["Tackle", "Disable", "Poison Powder"], |
|
sprite: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/48.png", |
|
cry: "https://play.pokemonshowdown.com/audio/cries/48.mp3" |
|
}, |
|
{ |
|
id: 49, |
|
name: "Venomoth", |
|
types: ["bug", "poison"], |
|
stats: { hp: 70, attack: 65, defense: 60, spAtk: 90, spDef: 75, speed: 90 }, |
|
height: 1.5, |
|
weight: 12.5, |
|
description: "The dust-like scales covering its wings are color coded to indicate the kinds of poison it has.", |
|
moves: ["Tackle", "Disable", "Poison Powder", "Psybeam"], |
|
sprite: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/49.png", |
|
cry: "https://play.pokemonshowdown.com/audio/cries/49.mp3" |
|
}, |
|
{ |
|
id: 50, |
|
name: "Diglett", |
|
types: ["ground"], |
|
stats: { hp: 10, attack: 55, defense: 25, spAtk: 35, spDef: 45, speed: 95 }, |
|
height: 0.2, |
|
weight: 0.8, |
|
description: "Lives about one yard underground where it feeds on plant roots. It sometimes appears above ground.", |
|
moves: ["Scratch", "Sand Attack"], |
|
sprite: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/50.png", |
|
cry: "https://play.pokemonshowdown.com/audio/cries/50.mp3" |
|
} |
|
]; |
|
|
|
|
|
const pokemonGrid = document.getElementById('pokemon-grid'); |
|
const searchInput = document.getElementById('search'); |
|
const typeFilters = document.querySelectorAll('.type-filter'); |
|
const toggleViewBtn = document.getElementById('toggle-view'); |
|
const pokemonModal = document.getElementById('pokemon-modal'); |
|
const closeModalBtn = document.getElementById('close-modal'); |
|
const modalContent = document.getElementById('modal-content'); |
|
|
|
|
|
const typeEffectiveness = { |
|
normal: { weak: ["fighting"], strong: [], immune: ["ghost"] }, |
|
fire: { weak: ["water", "ground", "rock"], strong: ["grass", "ice", "bug"] }, |
|
water: { weak: ["electric", "grass"], strong: ["fire", "ground", "rock"] }, |
|
electric: { weak: ["ground"], strong: ["water", "flying"] }, |
|
grass: { weak: ["fire", "ice", "poison", "flying", "bug"], strong: ["water", "ground", "rock"] }, |
|
ice: { weak: ["fire", "fighting", "rock"], strong: ["grass", "ground", "flying", "dragon"] }, |
|
fighting: { weak: ["flying", "psychic"], strong: ["normal", "ice", "rock"] }, |
|
poison: { weak: ["ground", "psychic"], strong: ["grass", "fairy"] }, |
|
ground: { weak: ["water", "grass", "ice"], strong: ["fire", "electric", "poison", "rock"] }, |
|
flying: { weak: ["electric", "ice", "rock"], strong: ["grass", "fighting", "bug"] }, |
|
psychic: { weak: ["bug", "ghost", "dark"], strong: ["fighting", "poison"] }, |
|
bug: { weak: ["fire", "flying", "rock"], strong: ["grass", "psychic"] }, |
|
rock: { weak: ["water", "grass", "fighting", "ground"], strong: ["fire", "ice", "flying", "bug"] }, |
|
ghost: { weak: ["ghost", "dark"], strong: ["psychic"], immune: ["normal", "fighting"] }, |
|
dragon: { weak: ["ice", "dragon"], strong: ["dragon"], immune: [] }, |
|
fairy: { weak: ["poison", "steel"], strong: ["fighting", "dragon", "dark"], immune: ["dragon"] } |
|
}; |
|
|
|
|
|
let currentViewMode = 'grid'; |
|
|
|
|
|
function initPokedex() { |
|
renderPokemonCards(pokemonData); |
|
|
|
|
|
searchInput.addEventListener('input', handleSearch); |
|
typeFilters.forEach(filter => filter.addEventListener('click', handleTypeFilter)); |
|
toggleViewBtn.addEventListener('click', toggleViewMode); |
|
closeModalBtn.addEventListener('click', () => { |
|
pokemonModal.classList.add('hidden'); |
|
}); |
|
} |
|
|
|
|
|
function renderPokemonCards(pokemonArray) { |
|
pokemonGrid.innerHTML = ''; |
|
|
|
pokemonArray.forEach(pokemon => { |
|
const card = document.createElement('div'); |
|
card.className = 'pokemon-card rounded-lg overflow-hidden shadow-md bg-white cursor-pointer'; |
|
card.innerHTML = ` |
|
<div class="pokemon-card-inner" onclick="showPokemonDetails(${pokemon.id})"> |
|
<div class="bg-gray-100 py-2 px-4 flex justify-between items-center"> |
|
<span class="text-gray-600 font-bold">#${pokemon.id.toString().padStart(3, '0')}</span> |
|
<div class="flex space-x-1"> |
|
${pokemon.types.map(type => ` |
|
<span class="type-${type} px-2 py-1 rounded-full text-xs">${type.charAt(0).toUpperCase() + type.slice(1)}</span> |
|
`).join('')} |
|
</div> |
|
</div> |
|
<div class="p-4 flex flex-col items-center"> |
|
<img src="${pokemon.sprite}" alt="${pokemon.name}" class="pokemon-sprite w-32 h-32 object-contain transition-transform"> |
|
<h3 class="text-xl font-bold mt-2">${pokemon.name.charAt(0).toUpperCase() + pokemon.name.slice(1)}</h3> |
|
<p class="text-sm text-gray-600 text-center mt-1">${pokemon.description}</p> |
|
</div> |
|
</div> |
|
`; |
|
pokemonGrid.appendChild(card); |
|
}); |
|
} |
|
|
|
|
|
function showPokemonDetails(pokemonId) { |
|
const pokemon = pokemonData.find(p => p.id === pokemonId); |
|
if (!pokemon) return; |
|
|
|
|
|
const audio = new Audio(pokemon.cry); |
|
audio.play(); |
|
|
|
|
|
const weaknesses = calculateWeaknesses(pokemon.types); |
|
const resistances = calculateResistances(pokemon.types); |
|
const immunities = calculateImmunities(pokemon.types); |
|
|
|
|
|
modalContent.innerHTML = ` |
|
<div class="flex flex-col items-center"> |
|
<h2 class="text-3xl font-bold mb-4">${pokemon.name.charAt(0).toUpperCase() + pokemon.name.slice(1)}</h2> |
|
<div class="flex items-center space-x-2 mb-4"> |
|
<span class="text-gray-600 font-bold">#${pokemon.id.toString().padStart(3, '0')}</span> |
|
<div class="flex space-x-1"> |
|
${pokemon.types.map(type => ` |
|
<span class="type-${type} px-3 py-1 rounded-full text-sm">${type.charAt(0).toUpperCase() + type.slice(1)}</span> |
|
`).join('')} |
|
</div> |
|
</div> |
|
<img src="${pokemon.sprite}" alt="${pokemon.name}" class="w-48 h-48 object-contain pokemon-sprite floating"> |
|
|
|
<div class="mt-6 w-full"> |
|
<h3 class="text-xl font-bold mb-2">Pokédex Entry</h3> |
|
<p class="text-gray-700">${pokemon.description}</p> |
|
</div> |
|
|
|
<div class="mt-6 w-full grid grid-cols-2 gap-4"> |
|
<div> |
|
<h3 class="text-xl font-bold mb-2">Height</h3> |
|
<p class="text-gray-700">${pokemon.height} m</p> |
|
</div> |
|
<div> |
|
<h3 class="text-xl font-bold mb-2">Weight</h3> |
|
<p class="text-gray-700">${pokemon.weight} kg</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="space-y-6"> |
|
<div> |
|
<h3 class="text-xl font-bold mb-2">Stats</h3> |
|
<div class="h-64"> |
|
<canvas id="statsChart"></canvas> |
|
</div> |
|
</div> |
|
|
|
<div> |
|
<h3 class="text-xl font-bold mb-2">Known Moves</h3> |
|
<div class="grid grid-cols-2 gap-2"> |
|
${pokemon.moves.map(move => ` |
|
<span class="bg-gray-200 px-3 py-1 rounded-full text-sm text-center">${move}</span> |
|
`).join('')} |
|
</div> |
|
</div> |
|
|
|
<div> |
|
<h3 class="text-xl font-bold mb-2">Type Effectiveness</h3> |
|
${weaknesses.length ? ` |
|
<div class="mb-3"> |
|
<h4 class="font-bold text-red-500 mb-1">Weak to (2×)</h4> |
|
<div class="flex flex-wrap gap-1"> |
|
${weaknesses.map(type => ` |
|
<span class="type-${type} px-3 py-1 rounded-full text-xs">${type.charAt(0).toUpperCase() + type.slice(1)}</span> |
|
`).join('')} |
|
</div> |
|
</div> |
|
` : ''} |
|
|
|
${resistances.length ? ` |
|
<div class="mb-3"> |
|
<h4 class="font-bold text-green-500 mb-1">Resistant to (½×)</h4> |
|
<div class="flex flex-wrap gap-1"> |
|
${resistances.map(type => ` |
|
<span class="type-${type} px-3 py-1 rounded-full text-xs">${type.charAt(0).toUpperCase() + type.slice(1)}</span> |
|
`).join('')} |
|
</div> |
|
</div> |
|
` : ''} |
|
|
|
${immunities.length ? ` |
|
<div class="mb-3"> |
|
<h4 class="font-bold text-blue-500 mb-1">Immune to (0×)</h4> |
|
<div class="flex flex-wrap gap-1"> |
|
${immunities.map(type => ` |
|
<span class="type-${type} px-3 py-1 rounded-full text-xs">${type.charAt(0).toUpperCase() + type.slice(1)}</span> |
|
`).join('')} |
|
</div> |
|
</div> |
|
` : ''} |
|
</div> |
|
</div> |
|
`; |
|
|
|
|
|
const ctx = document.getElementById('statsChart').getContext('2d'); |
|
new Chart(ctx, { |
|
type: 'radar', |
|
data: { |
|
labels: ['HP', 'Attack', 'Defense', 'Sp. Atk', 'Sp. Def', 'Speed'], |
|
datasets: [{ |
|
label: 'Base Stats', |
|
data: [ |
|
pokemon.stats.hp, |
|
pokemon.stats.attack, |
|
pokemon.stats.defense, |
|
pokemon.stats.spAtk, |
|
pokemon.stats.spDef, |
|
pokemon.stats.speed |
|
], |
|
backgroundColor: 'rgba(239, 68, 68, 0.2)', |
|
borderColor: 'rgba(239, 68, 68, 1)', |
|
borderWidth: 2, |
|
pointBackgroundColor: 'rgba(239, 68, 68, 1)', |
|
pointRadius: 4, |
|
pointHoverRadius: 6 |
|
}] |
|
}, |
|
options: { |
|
scales: { |
|
r: { |
|
angleLines: { |
|
display: true |
|
}, |
|
suggestedMin: 0, |
|
suggestedMax: 120 |
|
} |
|
}, |
|
plugins: { |
|
legend: { |
|
display: false |
|
} |
|
}, |
|
elements: { |
|
line: { |
|
tension: 0.2 |
|
} |
|
} |
|
} |
|
}); |
|
|
|
|
|
pokemonModal.classList.remove('hidden'); |
|
} |
|
|
|
|
|
function calculateWeaknesses(types) { |
|
const weakTo = new Set(); |
|
|
|
types.forEach(type => { |
|
typeEffectiveness[type].weak.forEach(weakType => { |
|
weakTo.add(weakType); |
|
}); |
|
|
|
|
|
typeEffectiveness[type].strong.forEach(strongType => { |
|
if (weakTo.has(strongType)) { |
|
weakTo.delete(strongType); |
|
} |
|
}); |
|
}); |
|
|
|
return Array.from(weakTo); |
|
} |
|
|
|
|
|
function calculateResistances(types) { |
|
const resistantTo = new Set(); |
|
|
|
types.forEach(type => { |
|
typeEffectiveness[type].strong.forEach(resistantType => { |
|
resistantTo.add(resistantType); |
|
}); |
|
|
|
|
|
typeEffectiveness[type].weak.forEach(weakType => { |
|
if (resistantTo.has(weakType)) { |
|
resistantTo.delete(weakType); |
|
} |
|
}); |
|
}); |
|
|
|
return Array.from(resistantTo); |
|
} |
|
|
|
|
|
function calculateImmunities(types) { |
|
const immuneTo = new Set(); |
|
|
|
types.forEach(type => { |
|
if (typeEffectiveness[type].immune) { |
|
typeEffectiveness[type].immune.forEach(immuneType => { |
|
immuneTo.add(immuneType); |
|
}); |
|
} |
|
}); |
|
|
|
return Array.from(immuneTo); |
|
} |
|
|
|
|
|
function handleSearch() { |
|
const searchTerm = searchInput.value.toLowerCase(); |
|
const filteredPokemon = pokemonData.filter(pokemon => |
|
pokemon.name.toLowerCase().includes(searchTerm) || |
|
pokemon.id.toString().includes(searchTerm) |
|
); |
|
renderPokemonCards(filteredPokemon); |
|
} |
|
|
|
|
|
function handleTypeFilter(e) { |
|
const type = e.target.dataset.type; |
|
typeFilters.forEach(filter => { |
|
if (filter.dataset.type === type) { |
|
filter.classList.add('ring-2', 'ring-gray-800'); |
|
} else { |
|
filter.classList.remove('ring-2', 'ring-gray-800'); |
|
} |
|
}); |
|
|
|
if (type === 'all') { |
|
renderPokemonCards(pokemonData); |
|
return; |
|
} |
|
|
|
const filteredPokemon = pokemonData.filter(pokemon => |
|
pokemon.types.includes(type) |
|
); |
|
renderPokemonCards(filteredPokemon); |
|
} |
|
|
|
|
|
function toggleViewMode() { |
|
if (currentViewMode === 'grid') { |
|
|
|
pokemonGrid.classList.remove('grid-cols-2', 'sm:grid-cols-3', 'md:grid-cols-4', 'lg:grid-cols-5'); |
|
pokemonGrid.classList.add('grid-cols-1'); |
|
currentViewMode = 'list'; |
|
toggleViewBtn.innerHTML = ` |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor"> |
|
<path d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM11 5a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V5zM11 13a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" /> |
|
</svg> |
|
Grid View`; |
|
} else { |
|
|
|
pokemonGrid.classList.add('grid-cols-2', 'sm:grid-cols-3', 'md:grid-cols-4', 'lg:grid-cols-5'); |
|
pokemonGrid.classList.remove('grid-cols-1'); |
|
currentViewMode = 'grid'; |
|
toggleViewBtn.innerHTML = ` |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor"> |
|
<path d="M4 4a2 2 0 00-2 2v1h16V6a2 2 0 00-2-2H4z" /> |
|
<path fill-rule="evenodd" d="M18 9H2v5a2 2 0 002 2h12a2 2 0 002-2V9zM4 13a1 1 0 011-1h1a1 1 0 110 2H5a1 1 0 01-1-1zm5-1a1 1 0 100 2h1a1 1 0 100-2H9z" clip-rule="evenodd" /> |
|
</svg> |
|
List View`; |
|
} |
|
} |
|
|
|
|
|
window.showPokemonDetails = showPokemonDetails; |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', initPokedex); |
|
</script> |
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=victor/pokedex" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
</html> |
