Spaces:
Running
Running
| <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PokeVision - Ultimate Pokémon Encyclopedia</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| pokered: '#FF0000', | |
| pokeblue: '#3B4CCA', | |
| pokeyellow: '#FFDE00', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <style> | |
| .stat-bar { | |
| transition: width 0.5s ease-in-out; | |
| } | |
| .pokemon-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); | |
| } | |
| .type-badge { | |
| filter: brightness(1.1); | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| .floating { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 dark:bg-gray-900 transition-colors duration-300"> | |
| <!-- Header --> | |
| <header class="bg-pokered text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center mb-4 md:mb-0"> | |
| <i data-feather="compass" class="w-8 h-8 mr-3"></i> | |
| <h1 class="text-3xl font-bold">PokeVision</h1> | |
| </div> | |
| <div class="relative w-full md:w-1/3"> | |
| <input type="text" placeholder="Search Pokémon..." | |
| class="w-full py-2 px-4 rounded-full text-gray-800 focus:outline-none focus:ring-2 focus:ring-pokeyellow"> | |
| <button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-pokeblue text-white p-1 rounded-full"> | |
| <i data-feather="search"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center mt-4 md:mt-0"> | |
| <button id="theme-toggle" class="bg-pokeblue p-2 rounded-full ml-4"> | |
| <i data-feather="moon" class="hidden dark:block"></i> | |
| <i data-feather="sun" class="dark:hidden"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <div class="grid grid-cols-1 lg:grid-cols-4 gap-6"> | |
| <!-- Filters Sidebar --> | |
| <aside class="lg:col-span-1 bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 h-fit sticky top-6"> | |
| <h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Filters</h2> | |
| <!-- Type Filter --> | |
| <div class="mb-6"> | |
| <h3 class="font-semibold mb-2 text-gray-700 dark:text-gray-300">Types</h3> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <button class="bg-fire type-badge py-1 px-2 rounded text-white text-sm">Fire</button> | |
| <button class="bg-water type-badge py-1 px-2 rounded text-white text-sm">Water</button> | |
| <button class="bg-grass type-badge py-1 px-2 rounded text-white text-sm">Grass</button> | |
| <button class="bg-electric type-badge py-1 px-2 rounded text-white text-sm">Electric</button> | |
| <button class="bg-psychic type-badge py-1 px-2 rounded text-white text-sm">Psychic</button> | |
| <button class="bg-dark type-badge py-1 px-2 rounded text-white text-sm">Dark</button> | |
| <button class="bg-fairy type-badge py-1 px-2 rounded text-white text-sm">Fairy</button> | |
| <button class="bg-dragon type-badge py-1 px-2 rounded text-white text-sm">Dragon</button> | |
| </div> | |
| </div> | |
| <!-- Generation Filter --> | |
| <div class="mb-6"> | |
| <h3 class="font-semibold mb-2 text-gray-700 dark:text-gray-300">Generation</h3> | |
| <select class="w-full p-2 rounded border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white"> | |
| <option>All Generations</option> | |
| <option>Generation I</option> | |
| <option>Generation II</option> | |
| <option>Generation III</option> | |
| <option>Generation IV</option> | |
| <option>Generation V</option> | |
| <option>Generation VI</option> | |
| <option>Generation VII</option> | |
| <option>Generation VIII</option> | |
| </select> | |
| </div> | |
| <!-- Legendary Filter --> | |
| <div class="mb-6"> | |
| <h3 class="font-semibold mb-2 text-gray-700 dark:text-gray-300">Category</h3> | |
| <div class="space-y-2"> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="rounded text-pokered"> | |
| <span class="ml-2 text-gray-700 dark:text-gray-300">Legendary</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="rounded text-pokered"> | |
| <span class="ml-2 text-gray-700 dark:text-gray-300">Mythical</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="rounded text-pokered"> | |
| <span class="ml-2 text-gray-700 dark:text-gray-300">Starter</span> | |
| </label> | |
| </div> | |
| </div> | |
| <!-- Reset Filters --> | |
| <button class="w-full bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white py-2 rounded-lg font-medium"> | |
| Reset Filters | |
| </button> | |
| </aside> | |
| <!-- Pokémon Grid --> | |
| <section class="lg:col-span-3"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Pokémon Directory</h2> | |
| <div class="flex space-x-2"> | |
| <button class="bg-pokeblue text-white p-2 rounded-lg"> | |
| <i data-feather="grid"></i> | |
| </button> | |
| <button class="bg-gray-200 dark:bg-gray-700 p-2 rounded-lg"> | |
| <i data-feather="list"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6"> | |
| <!-- Pokémon Card 1 --> | |
| <div class="pokemon-card bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden transition-all duration-300"> | |
| <div class="relative"> | |
| <img src="http://static.photos/nature/640x360/1" alt="Charizard" class="w-full h-48 object-contain bg-gray-100 dark:bg-gray-700"> | |
| <button class="absolute top-2 right-2 bg-white p-2 rounded-full shadow-md"> | |
| <i data-feather="heart" class="text-gray-400"></i> | |
| </button> | |
| <div class="absolute bottom-2 left-2 flex space-x-2"> | |
| <span class="bg-fire type-badge py-1 px-3 rounded-full text-white text-xs font-medium">Fire</span> | |
| <span class="bg-flying type-badge py-1 px-3 rounded-full text-white text-xs font-medium">Flying</span> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="text-xl font-bold text-gray-800 dark:text-white">Charizard</h3> | |
| <p class="text-gray-500 dark:text-gray-400">#006</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="star" class="w-4 h-4 text-pokeyellow mr-1"></i> | |
| <span class="text-sm font-medium">4.8</span> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span class="text-gray-600 dark:text-gray-300">HP</span> | |
| <span class="font-medium">78</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5"> | |
| <div class="bg-green-500 h-1.5 rounded-full stat-bar" style="width: 78%"></div> | |
| </div> | |
| </div> | |
| <button class="mt-4 w-full bg-pokered hover:bg-red-700 text-white py-2 rounded-lg font-medium transition-colors"> | |
| View Details | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Pokémon Card 2 --> | |
| <div class="pokemon-card bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden transition-all duration-300"> | |
| <div class="relative"> | |
| <img src="http://static.photos/nature/640x360/2" alt="Blastoise" class="w-full h-48 object-contain bg-gray-100 dark:bg-gray-700"> | |
| <button class="absolute top-2 right-2 bg-white p-2 rounded-full shadow-md"> | |
| <i data-feather="heart" class="text-gray-400"></i> | |
| </button> | |
| <div class="absolute bottom-2 left-2 flex space-x-2"> | |
| <span class="bg-water type-badge py-1 px-3 rounded-full text-white text-xs font-medium">Water</span> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="text-xl font-bold text-gray-800 dark:text-white">Blastoise</h3> | |
| <p class="text-gray-500 dark:text-gray-400">#009</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="star" class="w-4 h-4 text-pokeyellow mr-1"></i> | |
| <span class="text-sm font-medium">4.6</span> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span class="text-gray-600 dark:text-gray-300">HP</span> | |
| <span class="font-medium">79</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5"> | |
| <div class="bg-green-500 h-1.5 rounded-full stat-bar" style="width: 79%"></div> | |
| </div> | |
| </div> | |
| <button class="mt-4 w-full bg-pokeblue hover:bg-blue-700 text-white py-2 rounded-lg font-medium transition-colors"> | |
| View Details | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Pokémon Card 3 --> | |
| <div class="pokemon-card bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden transition-all duration-300"> | |
| <div class="relative"> | |
| <img src="http://static.photos/nature/640x360/3" alt="Venusaur" class="w-full h-48 object-contain bg-gray-100 dark:bg-gray-700"> | |
| <button class="absolute top-2 right-2 bg-white p-2 rounded-full shadow-md"> | |
| <i data-feather="heart" class="text-pokered"></i> | |
| </button> | |
| <div class="absolute bottom-2 left-2 flex space-x-2"> | |
| <span class="bg-grass type-badge py-1 px-3 rounded-full text-white text-xs font-medium">Grass</span> | |
| <span class="bg-poison type-badge py-1 px-3 rounded-full text-white text-xs font-medium">Poison</span> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="text-xl font-bold text-gray-800 dark:text-white">Venusaur</h3> | |
| <p class="text-gray-500 dark:text-gray-400">#003</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="star" class="w-4 h-4 text-pokeyellow mr-1"></i> | |
| <span class="text-sm font-medium">4.7</span> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span class="text-gray-600 dark:text-gray-300">HP</span> | |
| <span class="font-medium">80</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5"> | |
| <div class="bg-green-500 h-1.5 rounded-full stat-bar" style="width: 80%"></div> | |
| </div> | |
| </div> | |
| <button class="mt-4 w-full bg-green-600 hover:bg-green-700 text-white py-2 rounded-lg font-medium transition-colors"> | |
| View Details | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pagination --> | |
| <div class="mt-8 flex justify-center"> | |
| <nav class="flex items-center space-x-2"> | |
| <button class="px-3 py-1 rounded border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300"> | |
| <i data-feather="chevron-left"></i> | |
| </button> | |
| <button class="px-3 py-1 rounded bg-pokered text-white">1</button> | |
| <button class="px-3 py-1 rounded border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300">2</button> | |
| <button class="px-3 py-1 rounded border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300">3</button> | |
| <span class="px-2 text-gray-500">...</span> | |
| <button class="px-3 py-1 rounded border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300">24</button> | |
| <button class="px-3 py-1 rounded border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300"> | |
| <i data-feather="chevron-right"></i> | |
| </button> | |
| </nav> | |
| </div> | |
| </section> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">PokeVision</h3> | |
| <p class="text-gray-400">The ultimate Pokémon encyclopedia with comprehensive data and beautiful visuals.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Explore</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Pokédex</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Moves</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Abilities</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Items</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Resources</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">API</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Documentation</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">GitHub</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Connect</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="facebook"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="github"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray | |
| </body> | |
| </html> |