| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Dragon's Hoard 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> |
| @import url('https://fonts.googleapis.com/css2?family=MedievalSharp&family=Cinzel+Decorative&display=swap'); |
| |
| :root { |
| --gold: #FFD700; |
| --silver: #C0C0C0; |
| --bronze: #CD7F32; |
| --dragon-red: #8B0000; |
| --scroll-beige: #F5F5DC; |
| } |
| |
| body { |
| font-family: 'MedievalSharp', cursive; |
| background: url('https://images.unsplash.com/photo-1542273917363-3b1817f69a2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') no-repeat center center fixed; |
| background-size: cover; |
| color: white; |
| min-height: 100vh; |
| } |
| |
| .scroll-bg { |
| background-color: rgba(245, 245, 220, 0.9); |
| border: 8px double var(--dragon-red); |
| box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); |
| } |
| |
| .header-text { |
| font-family: 'Cinzel Decorative', cursive; |
| text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); |
| color: var(--gold); |
| } |
| |
| .progress-bar { |
| height: 30px; |
| background: linear-gradient(to right, #2c3e50, #4ca1af); |
| border: 2px solid var(--gold); |
| box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); |
| } |
| |
| .progress-fill { |
| height: 100%; |
| background: linear-gradient(to right, var(--gold), var(--bronze)); |
| transition: width 0.5s ease; |
| } |
| |
| .level-card { |
| background: rgba(0, 0, 0, 0.7); |
| border: 2px solid var(--gold); |
| transition: all 0.3s ease; |
| cursor: pointer; |
| } |
| |
| .level-card:hover { |
| transform: scale(1.05); |
| box-shadow: 0 0 15px var(--gold); |
| } |
| |
| .level-card.unlocked { |
| background: rgba(139, 0, 0, 0.7); |
| border-color: var(--gold); |
| } |
| |
| .level-card.premium { |
| background: rgba(0, 0, 0, 0.9); |
| border: 2px dashed var(--gold); |
| } |
| |
| .reward-icon { |
| font-size: 2rem; |
| margin-bottom: 10px; |
| } |
| |
| .dragon-head { |
| position: absolute; |
| right: -30px; |
| top: 50%; |
| transform: translateY(-50%); |
| font-size: 3rem; |
| color: var(--dragon-red); |
| } |
| |
| @keyframes pulse { |
| 0% { transform: scale(1); } |
| 50% { transform: scale(1.05); } |
| 100% { transform: scale(1); } |
| } |
| |
| .pulse { |
| animation: pulse 2s infinite; |
| } |
| |
| .tooltip { |
| position: relative; |
| display: inline-block; |
| } |
| |
| .tooltip .tooltiptext { |
| visibility: hidden; |
| width: 200px; |
| background-color: #555; |
| color: #fff; |
| text-align: center; |
| border-radius: 6px; |
| padding: 5px; |
| position: absolute; |
| z-index: 1; |
| bottom: 125%; |
| left: 50%; |
| margin-left: -100px; |
| opacity: 0; |
| transition: opacity 0.3s; |
| } |
| |
| .tooltip:hover .tooltiptext { |
| visibility: visible; |
| opacity: 1; |
| } |
| </style> |
| </head> |
| <body class="flex items-center justify-center p-4"> |
| <div class="scroll-bg w-full max-w-6xl rounded-lg p-6 relative overflow-hidden"> |
| |
| <div class="dragon-head"> |
| <i class="fas fa-dragon"></i> |
| </div> |
| |
| |
| <div class="text-center mb-8"> |
| <h1 class="header-text text-4xl md:text-5xl mb-2">Dragon's Hoard Battle Pass</h1> |
| <p class="text-xl text-gray-800">Season of the Eternal Flame</p> |
| |
| <div class="flex justify-between items-center mt-6 mb-4 px-4"> |
| <span class="text-gray-800 font-bold">Level 1</span> |
| <span class="text-gray-800 font-bold">Level 20</span> |
| </div> |
| |
| |
| <div class="progress-bar rounded-full mb-4 relative"> |
| <div id="progressFill" class="progress-fill rounded-full" style="width: 10%"></div> |
| <div id="currentLevelMarker" class="absolute top-0 h-full w-1 bg-white" style="left: 10%"></div> |
| </div> |
| |
| <div class="flex justify-between"> |
| <button id="prevBtn" class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded"> |
| <i class="fas fa-arrow-left"></i> Previous |
| </button> |
| <div class="flex items-center"> |
| <span id="currentLevelDisplay" class="text-2xl font-bold text-gray-800 mr-4">Level: 2</span> |
| <span id="xpDisplay" class="text-gray-800">XP: 250/1000</span> |
| </div> |
| <button id="nextBtn" class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded"> |
| Next <i class="fas fa-arrow-right"></i> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="flex border-b border-gray-600 mb-6"> |
| <button class="tab-btn active px-4 py-2 font-bold text-gray-800 border-b-2 border-red-700" data-tab="free">Free Rewards</button> |
| <button class="tab-btn px-4 py-2 font-bold text-gray-800" data-tab="premium">Premium Rewards</button> |
| </div> |
| |
| |
| <div id="free" class="tab-content grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4"> |
| |
| </div> |
| |
| |
| <div id="premium" class="tab-content hidden grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4"> |
| |
| </div> |
| |
| |
| <div class="mt-8 text-center"> |
| <button id="purchaseBtn" class="bg-gradient-to-r from-yellow-600 to-yellow-800 hover:from-yellow-700 hover:to-yellow-900 text-white font-bold py-3 px-8 rounded-full text-lg pulse"> |
| <i class="fas fa-coins mr-2"></i> Unlock Premium Pass - 999 Gold |
| </button> |
| <p class="text-gray-700 mt-2">Includes all premium rewards + exclusive Dragon Rider title</p> |
| </div> |
| </div> |
|
|
| <script> |
| |
| const battlePass = { |
| freeRewards: [ |
| { level: 1, icon: "fa-coins", name: "100 Gold", description: "Start your adventure with some gold" }, |
| { level: 2, icon: "fa-helmet-battle", name: "Iron Helmet", description: "Basic protection for your journey" }, |
| { level: 3, icon: "fa-flask", name: "Health Potion x3", description: "Restore your vitality in battle" }, |
| { level: 4, icon: "fa-ring", name: "Copper Ring", description: "A simple magical ring" }, |
| { level: 5, icon: "fa-horse", name: "Common Mount", description: "A trusty steed for your travels" }, |
| { level: 6, icon: "fa-shield", name: "Steel Shield", description: "Improved defense against enemies" }, |
| { level: 7, icon: "fa-scroll", name: "Scroll of Fireball", description: "Cast a powerful fire spell" }, |
| { level: 8, icon: "fa-gem", name: "Ruby", description: "Valuable gem for trading" }, |
| { level: 9, icon: "fa-axe-battle", name: "Battle Axe", description: "Heavy weapon for strong warriors" }, |
| { level: 10, icon: "fa-crown", name: "Adventurer's Crown", description: "Mark of a seasoned explorer" }, |
| { level: 11, icon: "fa-bolt", name: "Lightning Charm", description: "Chance to stun enemies" }, |
| { level: 12, icon: "fa-dungeon", name: "Dungeon Key", description: "Unlocks secret areas" }, |
| { level: 13, icon: "fa-bow-arrow", name: "Elven Bow", description: "Precision weapon for rangers" }, |
| { level: 14, icon: "fa-dragon", name: "Dragon Scale", description: "Rare crafting material" }, |
| { level: 15, icon: "fa-wand-magic", name: "Mage's Staff", description: "Empowers your spells" }, |
| { level: 16, icon: "fa-book-spells", name: "Spell Tome", description: "Learn new magical abilities" }, |
| { level: 17, icon: "fa-chess-knight", name: "Knight's Armor", description: "Heavy plate armor" }, |
| { level: 18, icon: "fa-hat-wizard", name: "Wizard's Hat", description: "Boosts magical abilities" }, |
| { level: 19, icon: "fa-sack-dollar", name: "500 Gold", description: "Wealth for your adventures" }, |
| { level: 20, icon: "fa-trophy", name: "Champion's Trophy", description: "Proof of your achievements" } |
| ], |
| premiumRewards: [ |
| { level: 1, icon: "fa-coins", name: "500 Gold", description: "A royal sum to start with" }, |
| { level: 2, icon: "fa-helmet-battle", name: "Dwarven Helm", description: "Exceptional craftsmanship" }, |
| { level: 3, icon: "fa-flask", name: "Elixir of Life", description: "Full health restoration" }, |
| { level: 4, icon: "fa-ring", name: "Ring of Power", description: "+10% to all attributes" }, |
| { level: 5, icon: "fa-horse-head", name: "Nightmare Steed", description: "Fiery mount from the underworld" }, |
| { level: 6, icon: "fa-shield", name: "Dragonbone Shield", description: "Forged from ancient dragon bones" }, |
| { level: 7, icon: "fa-scroll", name: "Scroll of Meteor", description: "Devastating area spell" }, |
| { level: 8, icon: "fa-gem", name: "Dragon's Eye Gem", description: "Extremely rare and valuable" }, |
| { level: 9, icon: "fa-axe-battle", name: "Executioner's Axe", description: "Massive two-handed weapon" }, |
| { level: 10, icon: "fa-crown", name: "Royal Crown", description: "Worn by kings and queens" }, |
| { level: 11, icon: "fa-bolt", name: "Storm Amulet", description: "Summon lightning storms" }, |
| { level: 12, icon: "fa-dungeon", name: "Master Key", description: "Opens all doors" }, |
| { level: 13, icon: "fa-bow-arrow", name: "Phoenix Bow", description: "Fires flaming arrows" }, |
| { level: 14, icon: "fa-dragon", name: "Dragon Egg", description: "Hatch your own dragon" }, |
| { level: 15, icon: "fa-wand-magic", name: "Archmage's Staff", description: "Legendary magical focus" }, |
| { level: 16, icon: "fa-book-spells", name: "Tome of Forbidden Knowledge", description: "Learn powerful dark magic" }, |
| { level: 17, icon: "fa-chess-knight", name: "Dragonbone Armor", description: "Lightweight yet incredibly strong" }, |
| { level: 18, icon: "fa-hat-wizard", name: "Archmage's Circlet", description: "Doubles mana regeneration" }, |
| { level: 19, icon: "fa-sack-dollar", name: "2000 Gold", description: "A king's ransom" }, |
| { level: 20, icon: "fa-trophy", name: "Dragon Slayer's Trophy", description: "Ultimate achievement" } |
| ], |
| xpRequirements: [ |
| 0, 250, 500, 800, 1200, 1700, 2300, 3000, 3800, 4700, |
| 5700, 6800, 8000, 9300, 10700, 12200, 13800, 15500, 17300, 19200 |
| ] |
| }; |
| |
| |
| let currentLevel = 2; |
| let currentXP = 250; |
| let hasPremium = false; |
| |
| |
| const freeTab = document.getElementById('free'); |
| const premiumTab = document.getElementById('premium'); |
| const tabButtons = document.querySelectorAll('.tab-btn'); |
| const progressFill = document.getElementById('progressFill'); |
| const currentLevelMarker = document.getElementById('currentLevelMarker'); |
| const currentLevelDisplay = document.getElementById('currentLevelDisplay'); |
| const xpDisplay = document.getElementById('xpDisplay'); |
| const nextBtn = document.getElementById('nextBtn'); |
| const prevBtn = document.getElementById('prevBtn'); |
| const purchaseBtn = document.getElementById('purchaseBtn'); |
| |
| |
| function initBattlePass() { |
| renderLevels('free', battlePass.freeRewards); |
| renderLevels('premium', battlePass.premiumRewards); |
| updateProgressDisplay(); |
| } |
| |
| |
| function renderLevels(tabId, rewards) { |
| const container = document.getElementById(tabId); |
| container.innerHTML = ''; |
| |
| rewards.forEach(reward => { |
| const isUnlocked = reward.level <= currentLevel; |
| const isPremiumTab = tabId === 'premium'; |
| |
| const card = document.createElement('div'); |
| card.className = `level-card rounded-lg p-4 text-center relative overflow-hidden ${isUnlocked ? 'unlocked' : ''} ${isPremiumTab ? 'premium' : ''}`; |
| |
| |
| if (isPremiumTab && !hasPremium) { |
| card.innerHTML += `<div class="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center"> |
| <i class="fas fa-lock text-2xl text-yellow-500"></i> |
| </div>`; |
| } |
| |
| card.innerHTML += ` |
| <div class="text-xl font-bold mb-2 ${isUnlocked ? 'text-yellow-500' : 'text-gray-400'}">Level ${reward.level}</div> |
| <div class="reward-icon ${isUnlocked ? 'text-yellow-400' : 'text-gray-500'}"> |
| <i class="fas ${reward.icon}"></i> |
| </div> |
| <h3 class="font-bold ${isUnlocked ? 'text-white' : 'text-gray-400'}">${reward.name}</h3> |
| <div class="tooltip mt-2"> |
| <i class="fas fa-info-circle ${isUnlocked ? 'text-blue-400' : 'text-gray-500'}"></i> |
| <span class="tooltiptext">${reward.description}</span> |
| </div> |
| `; |
| |
| container.appendChild(card); |
| }); |
| } |
| |
| |
| function updateProgressDisplay() { |
| const currentLevelXP = battlePass.xpRequirements[currentLevel - 1]; |
| const nextLevelXP = battlePass.xpRequirements[currentLevel] || battlePass.xpRequirements[battlePass.xpRequirements.length - 1]; |
| const progressPercentage = ((currentXP - currentLevelXP) / (nextLevelXP - currentLevelXP)) * 100; |
| |
| progressFill.style.width = `${(currentLevel / 20) * 100}%`; |
| currentLevelMarker.style.left = `${(currentLevel / 20) * 100}%`; |
| currentLevelDisplay.textContent = `Level: ${currentLevel}`; |
| xpDisplay.textContent = `XP: ${currentXP}/${nextLevelXP}`; |
| } |
| |
| |
| tabButtons.forEach(button => { |
| button.addEventListener('click', () => { |
| |
| tabButtons.forEach(btn => btn.classList.remove('active', 'border-red-700')); |
| |
| |
| button.classList.add('active', 'border-red-700'); |
| |
| |
| document.querySelectorAll('.tab-content').forEach(tab => { |
| tab.classList.add('hidden'); |
| }); |
| |
| |
| const tabId = button.getAttribute('data-tab'); |
| document.getElementById(tabId).classList.remove('hidden'); |
| }); |
| }); |
| |
| |
| nextBtn.addEventListener('click', () => { |
| if (currentLevel < 20) { |
| currentLevel++; |
| updateProgressDisplay(); |
| renderLevels('free', battlePass.freeRewards); |
| renderLevels('premium', battlePass.premiumRewards); |
| } |
| }); |
| |
| prevBtn.addEventListener('click', () => { |
| if (currentLevel > 1) { |
| currentLevel--; |
| updateProgressDisplay(); |
| renderLevels('free', battlePass.freeRewards); |
| renderLevels('premium', battlePass.premiumRewards); |
| } |
| }); |
| |
| |
| purchaseBtn.addEventListener('click', () => { |
| if (!hasPremium) { |
| hasPremium = true; |
| purchaseBtn.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Premium Unlocked!'; |
| purchaseBtn.classList.remove('pulse', 'from-yellow-600', 'to-yellow-800', 'hover:from-yellow-700', 'hover:to-yellow-900'); |
| purchaseBtn.classList.add('bg-green-600', 'hover:bg-green-700'); |
| renderLevels('premium', battlePass.premiumRewards); |
| |
| |
| const fireworks = document.createElement('div'); |
| fireworks.className = 'fixed inset-0 flex items-center justify-center z-50 pointer-events-none'; |
| fireworks.innerHTML = ` |
| <div class="text-6xl text-yellow-400 animate-bounce"> |
| <i class="fas fa-fire"></i> |
| </div> |
| `; |
| document.body.appendChild(fireworks); |
| |
| setTimeout(() => { |
| fireworks.remove(); |
| }, 2000); |
| } |
| }); |
| |
| |
| document.addEventListener('DOMContentLoaded', initBattlePass); |
| </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/bp" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
