Spaces:
Running
Running
| <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> | |
| <!-- Type Filter --> | |
| <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> | |
| <!-- Pokémon Grid View --> | |
| <div id="pokemon-grid" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6"> | |
| <!-- Pokémon cards will be inserted here by JavaScript --> | |
| </div> | |
| <!-- Stats Modal --> | |
| <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"> | |
| <!-- Modal content will be inserted here by JavaScript --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Pokémon Data (first 50 from Gen 1) | |
| 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" | |
| } | |
| ]; | |
| // DOM Elements | |
| 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'); | |
| // Type effectiveness chart | |
| 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"] } | |
| }; | |
| // Current view mode (grid or list) | |
| let currentViewMode = 'grid'; | |
| // Initialize the Pokedex | |
| function initPokedex() { | |
| renderPokemonCards(pokemonData); | |
| // Event listeners | |
| searchInput.addEventListener('input', handleSearch); | |
| typeFilters.forEach(filter => filter.addEventListener('click', handleTypeFilter)); | |
| toggleViewBtn.addEventListener('click', toggleViewMode); | |
| closeModalBtn.addEventListener('click', () => { | |
| pokemonModal.classList.add('hidden'); | |
| }); | |
| } | |
| // Render Pokémon cards | |
| 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); | |
| }); | |
| } | |
| // Show Pokémon details in modal | |
| function showPokemonDetails(pokemonId) { | |
| const pokemon = pokemonData.find(p => p.id === pokemonId); | |
| if (!pokemon) return; | |
| // Play Pokémon cry | |
| const audio = new Audio(pokemon.cry); | |
| audio.play(); | |
| // Calculate effectiveness for this Pokémon | |
| const weaknesses = calculateWeaknesses(pokemon.types); | |
| const resistances = calculateResistances(pokemon.types); | |
| const immunities = calculateImmunities(pokemon.types); | |
| // Create modal content | |
| 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> | |
| `; | |
| // Initialize chart | |
| 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 | |
| } | |
| } | |
| } | |
| }); | |
| // Show modal | |
| pokemonModal.classList.remove('hidden'); | |
| } | |
| // Calculate weaknesses based on Pokémon types | |
| function calculateWeaknesses(types) { | |
| const weakTo = new Set(); | |
| types.forEach(type => { | |
| typeEffectiveness[type].weak.forEach(weakType => { | |
| weakTo.add(weakType); | |
| }); | |
| // Check if any resistances cancel out weaknesses | |
| typeEffectiveness[type].strong.forEach(strongType => { | |
| if (weakTo.has(strongType)) { | |
| weakTo.delete(strongType); | |
| } | |
| }); | |
| }); | |
| return Array.from(weakTo); | |
| } | |
| // Calculate resistances based on Pokémon types | |
| function calculateResistances(types) { | |
| const resistantTo = new Set(); | |
| types.forEach(type => { | |
| typeEffectiveness[type].strong.forEach(resistantType => { | |
| resistantTo.add(resistantType); | |
| }); | |
| // Check if any weaknesses cancel out resistances | |
| typeEffectiveness[type].weak.forEach(weakType => { | |
| if (resistantTo.has(weakType)) { | |
| resistantTo.delete(weakType); | |
| } | |
| }); | |
| }); | |
| return Array.from(resistantTo); | |
| } | |
| // Calculate immunities based on Pokémon types | |
| 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); | |
| } | |
| // Handle search input | |
| function handleSearch() { | |
| const searchTerm = searchInput.value.toLowerCase(); | |
| const filteredPokemon = pokemonData.filter(pokemon => | |
| pokemon.name.toLowerCase().includes(searchTerm) || | |
| pokemon.id.toString().includes(searchTerm) | |
| ); | |
| renderPokemonCards(filteredPokemon); | |
| } | |
| // Handle type filter | |
| 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); | |
| } | |
| // Toggle between grid and list view | |
| function toggleViewMode() { | |
| if (currentViewMode === 'grid') { | |
| // Switch to list view | |
| 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 { | |
| // Switch to grid view | |
| 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`; | |
| } | |
| } | |
| // Make showPokemonDetails available globally | |
| window.showPokemonDetails = showPokemonDetails; | |
| // Initialize the Pokedex on page load | |
| 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> |