<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dragon Pomodoro Quest</title>
<style>
body {
font-family: 'Arial', sans-serif;
background: url('background.jpg') no-repeat center center fixed;
background-size: cover;
color: #fff;
text-align: center;
padding: 50px;
}
.xp-bar {
width: 100%;
height: 30px;
background: #333;
border-radius: 10px;
margin: 20px auto;
position: relative;
}
.xp-fill {
height: 100%;
background: linear-gradient(to right, #ff8000, #ff3333);
border-radius: 10px;
}
.level {
font-size: 24px;
margin-top: 10px;
}
.quest-list {
margin-top: 30px;
}
.quest-item {
background: rgba(0, 0, 0, 0.6);
margin: 10px;
padding: 10px;
border-radius: 5px;
}
.pomodoro {
background: rgba(0, 0, 0, 0.7);
padding: 15px;
border-radius: 10px;
margin: 20px auto;
width: 50%;
}
.dragon-name {
font-size: 36px;
font-weight: bold;
color: #ffcc00;
}
.dragon-description {
font-size: 18px;
font-style: italic;
color: #ddd;
}
.start-button {
background-color: #ff8000;
color: white;
padding: 10px 20px;
font-size: 18px;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 20px;
}
.start-button:hover {
background-color: #ffcc00;
}
.dragon-image {
width: 100%;
height: auto;
border-radius: 10px;
}
.dragon-tier {
font-size: 20px;
margin-top: 10px;
color: #f2f2f2;
}
</style>
</head>
<body>
<div class="pomodoro">
<div class="dragon-name" id="dragonName">1-Hour Dragon: Novice Drake</div>
<div class="dragon-description" id="dragonDescription">A small, fiery creature
just beginning to spread its wings. The Novice Drake thrives on quick, nimble
bursts of energy. Defeat him in a short, fiery battle to prove your resolve!</div>
<img src="dragon1.jpg" alt="Dragon" class="dragon-image">
<button class="start-button" onclick="startPomodoro()">Start Battle</button>
</div>
<div class="xp-bar">
<div class="xp-fill" id="xpFill" style="width: 0%;"></div>
</div>
<div class="level" id="level">Level: Novice</div>
<div class="quest-list">
<div class="quest-item">
<strong>Quest 1:</strong> Complete 1-hour Pomodoro
</div>
<div class="quest-item">
<strong>Quest 2:</strong> Complete 2-hour Pomodoro
</div>
<div class="quest-item">
<strong>Quest 3:</strong> Complete 3-hour Pomodoro
</div>
<div class="quest-item">
<strong>Quest 4:</strong> Complete 4-hour Pomodoro
</div>
<div class="quest-item">
<strong>Quest 5:</strong> Complete 5-hour Pomodoro
</div>
</div>
<script>
let xp = 0;
let level = 1;
const levelThresholds = [200, 400, 600, 800, 1000];
function startPomodoro() {
// Simulating the completion of Pomodoro
xp += 50; // Increase XP for completing Pomodoro
// Update XP bar
let xpPercentage = (xp / 1000) * 100;
if (xpPercentage > 100) xpPercentage = 100;
document.getElementById('xpFill').style.width = xpPercentage + '%';
// Update level and dragon name/description
if (xp >= levelThresholds[4]) {
level = 5;
document.getElementById('dragonName').innerHTML = '5-Hour Dragon: The
Celestial Dragon';
document.getElementById('dragonDescription').innerHTML = 'The Celestial
Dragon is a being of legend, rumored to control the stars themselves. Known for its
vast power, this dragon resides in the heavens, testing only the most determined
souls. Those who defeat the Celestial Dragon are said to possess the strength of a
thousand warriors.';
} else if (xp >= levelThresholds[3]) {
level = 4;
document.getElementById('dragonName').innerHTML = '4-Hour Dragon: Elder
Dragon of the Crags';
document.getElementById('dragonDescription').innerHTML = 'An ancient,
towering dragon who resides in the craggy mountains. Known for its strength and
wisdom, this creature waits for adventurers worthy of facing its challenges. Only
those who can endure its trial will be granted the honor of its legendary
knowledge.';
} else if (xp >= levelThresholds[2]) {
level = 3;
document.getElementById('dragonName').innerHTML = '3-Hour Dragon: Arcane
Wyvern';
document.getElementById('dragonDescription').innerHTML = 'A creature born
of both magic and flame, the Arcane Wyvern has mastery over the elements. To defeat
this beast, you must channel your own focus and power, using your mind as a weapon
against its arcane might.';
} else if (xp >= levelThresholds[1]) {
level = 2;
document.getElementById('dragonName').innerHTML = '2-Hour Dragon: The
Midnight Serpent';
document.getElementById('dragonDescription').innerHTML = 'The Midnight
Serpent slithers through the shadows, clever and elusive. Its deep blue scales
shimmer under the moonlight as it presents a challenge that tests your endurance
and focus. Defeat it to gain strength and wisdom.';
} else if (xp >= levelThresholds[0]) {
level = 1;
document.getElementById('dragonName').innerHTML = '1-Hour Dragon: Novice
Drake';
document.getElementById('dragonDescription').innerHTML = 'You are just
beginning your adventure with a small dragon!';
}
document.getElementById('level').innerHTML = 'Level: ' + getLevelName(level);
}
function getLevelName(level) {
switch (level) {
case 5:
return 'Legendary';
case 4:
return 'Veteran';
case 3:
return 'Experienced';
case 2:
return 'Intermediate';
case 1:
default:
return 'Novice';
}
}
</script>
</body>
</html>
