| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Pokémon Battle Pass</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| |
| .battle-pass-container::-webkit-scrollbar { |
| height: 8px; |
| } |
| .battle-pass-container::-webkit-scrollbar-track { |
| background: #f1f1f1; |
| border-radius: 10px; |
| } |
| .battle-pass-container::-webkit-scrollbar-thumb { |
| background: #888; |
| border-radius: 10px; |
| } |
| .battle-pass-container::-webkit-scrollbar-thumb:hover { |
| background: #555; |
| } |
| |
| |
| @keyframes spin { |
| 0% { transform: rotate(0deg); } |
| 100% { transform: rotate(360deg); } |
| } |
| |
| .pokeball-spin { |
| animation: spin 2s linear infinite; |
| } |
| |
| |
| .level-item.unlocked { |
| box-shadow: 0 0 15px rgba(255, 215, 0, 0.7); |
| } |
| |
| .level-item.locked { |
| filter: grayscale(70%); |
| opacity: 0.7; |
| } |
| |
| |
| .type-fire { background-color: #F08030; } |
| .type-water { background-color: #6890F0; } |
| .type-grass { background-color: #78C850; } |
| .type-electric { background-color: #F8D030; } |
| .type-psychic { background-color: #F85888; } |
| .type-ice { background-color: #98D8D8; } |
| .type-dragon { background-color: #7038F8; } |
| .type-dark { background-color: #705848; } |
| .type-fairy { background-color: #EE99AC; } |
| .type-normal { background-color: #A8A878; } |
| .type-fighting { background-color: #C03028; } |
| .type-flying { background-color: #A890F0; } |
| .type-poison { background-color: #A040A0; } |
| .type-ground { background-color: #E0C068; } |
| .type-rock { background-color: #B8A038; } |
| .type-bug { background-color: #A8B820; } |
| .type-ghost { background-color: #705898; } |
| .type-steel { background-color: #B8B8D0; } |
| </style> |
| </head> |
| <body class="bg-gradient-to-b from-blue-900 to-blue-700 min-h-screen text-white"> |
| <div class="container mx-auto px-4 py-8"> |
| |
| <div class="flex justify-between items-center mb-8"> |
| <div class="flex items-center"> |
| <img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/items/poke-ball.png" |
| alt="Pokeball" class="w-12 h-12 mr-3 pokeball-spin"> |
| <h1 class="text-3xl font-bold text-yellow-300">Pokémon Battle Pass</h1> |
| </div> |
| <div class="flex items-center bg-red-600 px-4 py-2 rounded-full"> |
| <i class="fas fa-bolt mr-2 text-yellow-300"></i> |
| <span class="font-bold">Season 1: Kanto Journey</span> |
| </div> |
| </div> |
| |
| |
| <div class="mb-8"> |
| <div class="flex justify-between mb-2"> |
| <span class="font-bold">Level 5</span> |
| <span class="font-bold">XP: 1,250/2,000</span> |
| </div> |
| <div class="w-full bg-gray-700 rounded-full h-4"> |
| <div class="bg-gradient-to-r from-yellow-400 to-yellow-600 h-4 rounded-full" style="width: 62.5%"></div> |
| </div> |
| </div> |
| |
| |
| <div class="relative"> |
| <div class="battle-pass-container overflow-x-auto whitespace-nowrap py-4 px-2" style="scroll-snap-type: x mandatory;"> |
| |
| <div class="level-item unlocked inline-block w-48 h-64 mx-2 bg-gradient-to-b from-blue-800 to-blue-600 rounded-xl p-4 text-center border-2 border-yellow-400" style="scroll-snap-align: start;"> |
| <div class="bg-white rounded-full w-16 h-16 mx-auto mb-2 flex items-center justify-center"> |
| <span class="text-2xl font-bold text-blue-800">1</span> |
| </div> |
| <div class="bg-white rounded-lg p-2 mb-3"> |
| <img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png" |
| alt="Bulbasaur" class="w-24 h-24 mx-auto"> |
| </div> |
| <h3 class="font-bold text-lg mb-1">Bulbasaur</h3> |
| <span class="type-grass text-xs font-bold px-2 py-1 rounded-full">Grass</span> |
| <span class="type-poison text-xs font-bold px-2 py-1 rounded-full ml-1">Poison</span> |
| <div class="mt-2"> |
| <span class="text-yellow-300"><i class="fas fa-check-circle"></i> Unlocked</span> |
| </div> |
| </div> |
| |
| |
| <div class="level-item unlocked inline-block w-48 h-64 mx-2 bg-gradient-to-b from-blue-800 to-blue-600 rounded-xl p-4 text-center border-2 border-yellow-400" style="scroll-snap-align: start;"> |
| <div class="bg-white rounded-full w-16 h-16 mx-auto mb-2 flex items-center justify-center"> |
| <span class="text-2xl font-bold text-blue-800">2</span> |
| </div> |
| <div class="bg-white rounded-lg p-2 mb-3"> |
| <img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/4.png" |
| alt="Charmander" class="w-24 h-24 mx-auto"> |
| </div> |
| <h3 class="font-bold text-lg mb-1">Charmander</h3> |
| <span class="type-fire text-xs font-bold px-2 py-1 rounded-full">Fire</span> |
| <div class="mt-2"> |
| <span class="text-yellow-300"><i class="fas fa-check-circle"></i> Unlocked</span> |
| </div> |
| </div> |
| |
| |
| <div class="level-item unlocked inline-block w-48 h-64 mx-2 bg-gradient-to-b from-blue-800 to-blue-600 rounded-xl p-4 text-center border-2 border-yellow-400" style="scroll-snap-align: start;"> |
| <div class="bg-white rounded-full w-16 h-16 mx-auto mb-2 flex items-center justify-center"> |
| <span class="text-2xl font-bold text-blue-800">3</span> |
| </div> |
| <div class="bg-white rounded-lg p-2 mb-3"> |
| <img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/7.png" |
| alt="Squirtle" class="w-24 h-24 mx-auto"> |
| </div> |
| <h3 class="font-bold text-lg mb-1">Squirtle</h3> |
| <span class="type-water text-xs font-bold px-2 py-1 rounded-full">Water</span> |
| <div class="mt-2"> |
| <span class="text-yellow-300"><i class="fas fa-check-circle"></i> Unlocked</span> |
| </div> |
| </div> |
| |
| |
| <div class="level-item unlocked inline-block w-48 h-64 mx-2 bg-gradient-to-b from-blue-800 to-blue-600 rounded-xl p-4 text-center border-2 border-yellow-400" style="scroll-snap-align: start;"> |
| <div class="bg-white rounded-full w-16 h-16 mx-auto mb-2 flex items-center justify-center"> |
| <span class="text-2xl font-bold text-blue-800">4</span> |
| </div> |
| <div class="bg-white rounded-lg p-2 mb-3"> |
| <img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/25.png" |
| alt="Pikachu" class="w-24 h-24 mx-auto"> |
| </div> |
| <h3 class="font-bold text-lg mb-1">Pikachu</h3> |
| <span class="type-electric text-xs font-bold px-2 py-1 rounded-full">Electric</span> |
| <div class="mt-2"> |
| <span class="text-yellow-300"><i class="fas fa-check-circle"></i> Unlocked</span> |
| </div> |
| </div> |
| |
| |
| <div class="level-item unlocked inline-block w-48 h-64 mx-2 bg-gradient-to-b from-blue-800 to-blue-600 rounded-xl p-4 text-center border-4 border-yellow-400" style="scroll-snap-align: start;"> |
| <div class="bg-white rounded-full w-16 h-16 mx-auto mb-2 flex items-center justify-center"> |
| <span class="text-2xl font-bold text-blue-800">5</span> |
| </div> |
| <div class="bg-white rounded-lg p-2 mb-3"> |
| <img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/133.png" |
| alt="Eevee" class="w-24 h-24 mx-auto"> |
| </div> |
| <h3 class="font-bold text-lg mb-1">Eevee</h3> |
| <span class="type-normal text-xs font-bold px-2 py-1 rounded-full">Normal</span> |
| <div class="mt-2"> |
| <span class="text-yellow-300"><i class="fas fa-check-circle"></i> Unlocked</span> |
| </div> |
| </div> |
| |
| |
| <div class="level-item locked inline-block w-48 h-64 mx-2 bg-gradient-to-b from-gray-700 to-gray-600 rounded-xl p-4 text-center border-2 border-gray-500" style="scroll-snap-align: start;"> |
| <div class="bg-gray-400 rounded-full w-16 h-16 mx-auto mb-2 flex items-center justify-center"> |
| <span class="text-2xl font-bold text-gray-700">6</span> |
| </div> |
| <div class="bg-gray-300 rounded-lg p-2 mb-3 relative"> |
| <img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/147.png" |
| alt="Dratini" class="w-24 h-24 mx-auto"> |
| <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center"> |
| <i class="fas fa-lock text-white text-2xl"></i> |
| </div> |
| </div> |
| <h3 class="font-bold text-lg mb-1">Dratini</h3> |
| <span class="type-dragon text-xs font-bold px-2 py-1 rounded-full">Dragon</span> |
| <div class="mt-2"> |
| <span class="text-gray-400">1,750 XP needed</span> |
| </div> |
| </div> |
| |
| |
| <div class="level-item locked inline-block w-48 h-64 mx-2 bg-gradient-to-b from-gray-700 to-gray-600 rounded-xl p-4 text-center border-2 border-gray-500" style="scroll-snap-align: start;"> |
| <div class="bg-gray-400 rounded-full w-16 h-16 mx-auto mb-2 flex items-center justify-center"> |
| <span class="text-2xl font-bold text-gray-700">7</span> |
| </div> |
| <div class="bg-gray-300 rounded-lg p-2 mb-3 relative"> |
| <img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/150.png" |
| alt="Mewtwo" class="w-24 h-24 mx-auto"> |
| <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center"> |
| <i class="fas fa-lock text-white text-2xl"></i> |
| </div> |
| </div> |
| <h3 class="font-bold text-lg mb-1">Mewtwo</h3> |
| <span class="type-psychic text-xs font-bold px-2 py-1 rounded-full">Psychic</span> |
| <div class="mt-2"> |
| <span class="text-gray-400">2,500 XP needed</span> |
| </div> |
| </div> |
| |
| |
| <div class="level-item locked inline-block w-48 h-64 mx-2 bg-gradient-to-b from-gray-700 to-gray-600 rounded-xl p-4 text-center border-2 border-gray-500" style="scroll-snap-align: start;"> |
| <div class="bg-gray-400 rounded-full w-16 h-16 mx-auto mb-2 flex items-center justify-center"> |
| <span class="text-2xl font-bold text-gray-700">8</span> |
| </div> |
| <div class="bg-gray-300 rounded-lg p-2 mb-3 relative"> |
| <img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/151.png" |
| alt="Mew" class="w-24 h-24 mx-auto"> |
| <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center"> |
| <i class="fas fa-lock text-white text-2xl"></i> |
| </div> |
| </div> |
| <h3 class="font-bold text-lg mb-1">Mew</h3> |
| <span class="type-psychic text-xs font-bold px-2 py-1 rounded-full">Psychic</span> |
| <div class="mt-2"> |
| <span class="text-gray-400">3,500 XP needed</span> |
| </div> |
| </div> |
| |
| |
| <div class="level-item locked inline-block w-48 h-64 mx-2 bg-gradient-to-b from-gray-700 to-gray-600 rounded-xl p-4 text-center border-2 border-gray-500" style="scroll-snap-align: start;"> |
| <div class="bg-gray-400 rounded-full w-16 h-16 mx-auto mb-2 flex items-center justify-center"> |
| <span class="text-2xl font-bold text-gray-700">9</span> |
| </div> |
| <div class="bg-gray-300 rounded-lg p-2 mb-3 relative"> |
| <img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/144.png" |
| alt="Articuno" class="w-24 h-24 mx-auto"> |
| <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center"> |
| <i class="fas fa-lock text-white text-2xl"></i> |
| </div> |
| </div> |
| <h3 class="font-bold text-lg mb-1">Articuno</h3> |
| <span class="type-ice text-xs font-bold px-2 py-1 rounded-full">Ice</span> |
| <span class="type-flying text-xs font-bold px-2 py-1 rounded-full ml-1">Flying</span> |
| <div class="mt-2"> |
| <span class="text-gray-400">5,000 XP needed</span> |
| </div> |
| </div> |
| |
| |
| <div class="level-item locked inline-block w-48 h-64 mx-2 bg-gradient-to-b from-gray-700 to-gray-600 rounded-xl p-4 text-center border-2 border-gray-500" style="scroll-snap-align: start;"> |
| <div class="bg-gray-400 rounded-full w-16 h-16 mx-auto mb-2 flex items-center justify-center"> |
| <span class="text-2xl font-bold text-gray-700">10</span> |
| </div> |
| <div class="bg-gray-300 rounded-lg p-2 mb-3 relative"> |
| <img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/149.png" |
| alt="Dragonite" class="w-24 h-24 mx-auto"> |
| <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center"> |
| <i class="fas fa-lock text-white text-2xl"></i> |
| </div> |
| </div> |
| <h3 class="font-bold text-lg mb-1">Dragonite</h3> |
| <span class="type-dragon text-xs font-bold px-2 py-1 rounded-full">Dragon</span> |
| <span class="type-flying text-xs font-bold px-2 py-1 rounded-full ml-1">Flying</span> |
| <div class="mt-2"> |
| <span class="text-gray-400">7,500 XP needed</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <button class="absolute left-0 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-50 text-white p-3 rounded-full z-10"> |
| <i class="fas fa-chevron-left"></i> |
| </button> |
| <button class="absolute right-0 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-50 text-white p-3 rounded-full z-10"> |
| <i class="fas fa-chevron-right"></i> |
| </button> |
| </div> |
| |
| |
| <div class="mt-12 bg-gradient-to-r from-purple-800 to-indigo-800 rounded-xl p-6 shadow-lg"> |
| <div class="flex justify-between items-center mb-4"> |
| <h2 class="text-2xl font-bold text-yellow-300">Premium Battle Pass</h2> |
| <span class="bg-yellow-500 text-black px-3 py-1 rounded-full text-sm font-bold">Unlock Now</span> |
| </div> |
| <p class="mb-4">Upgrade to unlock exclusive Pokémon, items, and rewards at each level!</p> |
| |
| <div class="grid grid-cols-3 gap-4"> |
| <div class="bg-black bg-opacity-30 p-3 rounded-lg text-center"> |
| <img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/150.png" |
| alt="Mewtwo" class="w-16 h-16 mx-auto mb-2"> |
| <p class="text-sm">Shiny Mewtwo</p> |
| </div> |
| <div class="bg-black bg-opacity-30 p-3 rounded-lg text-center"> |
| <img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/151.png" |
| alt="Mew" class="w-16 h-16 mx-auto mb-2"> |
| <p class="text-sm">Shiny Mew</p> |
| </div> |
| <div class="bg-black bg-opacity-30 p-3 rounded-lg text-center"> |
| <img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/items/master-ball.png" |
| alt="Master Ball" class="w-16 h-16 mx-auto mb-2"> |
| <p class="text-sm">5 Master Balls</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mt-8"> |
| <h2 class="text-xl font-bold mb-4">Earn XP Faster</h2> |
| <div class="grid grid-cols-3 gap-4"> |
| <div class="bg-blue-800 bg-opacity-50 p-3 rounded-lg text-center"> |
| <i class="fas fa-trophy text-yellow-400 text-3xl mb-2"></i> |
| <h3 class="font-bold">Win Battles</h3> |
| <p class="text-sm">+100 XP per win</p> |
| </div> |
| <div class="bg-blue-800 bg-opacity-50 p-3 rounded-lg text-center"> |
| <i class="fas fa-flag text-green-400 text-3xl mb-2"></i> |
| <h3 class="font-bold">Daily Quests</h3> |
| <p class="text-sm">Complete for bonus XP</p> |
| </div> |
| <div class="bg-blue-800 bg-opacity-50 p-3 rounded-lg text-center"> |
| <i class="fas fa-bolt text-red-400 text-3xl mb-2"></i> |
| <h3 class="font-bold">XP Boosts</h3> |
| <p class="text-sm">2x XP weekends</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <script> |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| const container = document.querySelector('.battle-pass-container'); |
| const leftBtn = document.querySelector('button:first-of-type'); |
| const rightBtn = document.querySelector('button:last-of-type'); |
| |
| leftBtn.addEventListener('click', () => { |
| container.scrollBy({ left: -300, behavior: 'smooth' }); |
| }); |
| |
| rightBtn.addEventListener('click', () => { |
| container.scrollBy({ left: 300, behavior: 'smooth' }); |
| }); |
| |
| |
| const levels = document.querySelectorAll('.level-item'); |
| levels[4].classList.add('ring-4', 'ring-yellow-400'); |
| }); |
| </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=Denoria/p-bp" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
