|
|
<!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> |
