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"><main> | |
| <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> | |
| <button aria-label="button" id="dark-mode-toggle" class="bg-gray-200 dark:bg-gray-700 rounded-full w-12 h-6 flex items-center transition duration-300 ease-in-out cursor-pointer"> | |
| <span class="bg-white dark:bg-gray-800 w-4 h-4 rounded-full shadow-md transform transition duration-300 ease-in-out ml-1 dark:ml-7"></span> | |
| </button> | |
| </div> | |
| </header> | |
| <div class="flex justify-between items-center mb-6"> | |
| <div class="relative w-64"> | |
| <input type="text" id="search" aria-label="Search Pokémon" role="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 aria-label="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 aria-label="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 aria-label="button" class="type-filter px-3 py-1 rounded-full text-xs text-white bg-red-500" data-type="all">All</button> | |
| <button aria-label="button" class="type-filter px-3 py-1 rounded-full text-xs text-white type-fire" data-type="fire">Fire</button> | |
| <button aria-label="button" class="type-filter px-3 py-1 rounded-full text-xs text-white type-water" data-type="water">Water</button> | |
| <button aria-label="button" class="type-filter px-3 py-1 rounded-full text-xs text-white type-grass" data-type="grass">Grass</button> | |
| <button aria-label="button" class="type-filter px-3 py-1 rounded-full text-xs text-white type-electric" data-type="electric">Electric</button> | |
| <button aria-label="button" class="type-filter px-3 py-1 rounded-full text-xs text-white type-normal" data-type="normal">Normal</button> | |
| <button aria-label="button" class="type-filter px-3 py-1 rounded-full text-xs text-white type-fighting" data-type="fighting">Fighting</button> | |
| <button aria-label="button" class="type-filter px-3 py-1 rounded-full text-xs text-white type-poison" data-type="poison">Poison</button> | |
| <button aria-label="button" class="type-filter px-3 py-1 rounded-full text-xs text-white type-ground" data-type="ground">Ground</button> | |
| <button aria-label="button" class="type-filter px-3 py-1 rounded-full text-xs text-white type-flying" data-type="flying">Flying</button> | |
| <button aria-label="button" class="type-filter px-3 py-1 rounded-full text-xs text-white type-psychic" data-type="psychic">Psychic</button> | |
| <button aria-label="button" class="type-filter px-3 py-1 rounded-full text-xs text-white type-bug" data-type="bug">Bug</button> | |
| <button aria-label="button" class="type-filter px-3 py-1 rounded-full text-xs text-white type-rock" data-type="rock">Rock</button> | |
| <button aria-label="button" class="type-filter px-3 py-1 rounded-full text-xs text-white type-ghost" data-type="ghost">Ghost</button> | |
| <button aria-label="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" role="main" 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 aria-label="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> | |
| </main></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 bui | |
| ..._This content has been truncated to stay below 50000 characters_... | |
| // 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> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script> | |
| <script> | |
| const darkModeToggle = document.getElementById('dark-mode-toggle'); | |
| const body = document.querySelector('body'); | |
| // Function to toggle dark mode | |
| function toggleDarkMode() { | |
| body.classList.toggle('dark'); | |
| // Store the dark mode preference in local storage | |
| localStorage.setItem('darkMode', body.classList.contains('dark')); | |
| } | |
| // Check for dark mode preference in local storage on page load | |
| if (localStorage.getItem('darkMode') === 'true') { | |
| body.classList.add('dark'); | |
| } | |
| // Add event listener to dark mode toggle | |
| darkModeToggle.addEventListener('click', toggleDarkMode); | |
| // GSAP Animations | |
| gsap.from(".absolute.inset-0", { duration: 1, scale: 0.5, opacity: 0, delay: 0.5, ease: "elastic" }); | |
| gsap.from(".relative.z-10", { duration: 1, y: -50, opacity: 0, delay: 0.75, ease: "power3.out" }); | |
| gsap.from("#search", { duration: 0.75, x: -50, opacity: 0, delay: 1, ease: "power3.out" }); | |
| gsap.from("#toggle-view", { duration: 0.75, x: 50, opacity: 0, delay: 1, ease: "power3.out" }); | |
| gsap.from(".type-filter", { duration: 0.5, opacity: 0, stagger: 0.1, delay: 1.25, ease: "power2.out" }); | |
| gsap.from(".pokemon-card", { duration: 0.5, opacity: 0, stagger: 0.05, delay: 1.5, ease: "power2.out" }); | |
| gsap.utils.toArray(".pokemon-card").forEach(card => { | |
| gsap.from(card, { | |
| scrollTrigger: { | |
| trigger: card, | |
| start: "top bottom", | |
| end: "bottom top", | |
| scrub: true | |
| }, | |
| opacity: 0.2, | |
| y: 50, | |
| duration: 0.5 | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |