This model didn't return a displayable web page for this challenge.
View raw output
<style>
* {
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(45deg, #333 0%, rgba(0,0,0,0.5) 100%) no-repeat center center;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
}
header {
background: rgba(255, 255, 255, 0.9);
padding: 20px 40px;
text-align: center;
color: #007BFF;
border-bottom: 2px solid #FFD700;
}
.battle-details {
background: rgba(64, 64, 64, 0.9);
padding: 20px 40px;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(128, 128, 128, 0.1);
max-width: 600px;
}
.opponent-info {
color: #ff5733;
font-weight: bold;
}
.status-bar {
background: rgba(255, 255, 255, 0.8);
padding: 15px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid #ddd;
}
.status-bar-item {
background: #008CBA;
border-radius: 5px;
padding: 5px 10px;
display: flex;
align-items: center;
min-width: 110px;
justify-content: space-between;
}
.status-bar-text {
color: #fff;
font-size: 14px;
}
.move-container {
max-width: 600px;
margin: 20px auto;
background: rgba(240, 240, 240, 0.8);
border-radius: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.1);
padding: 20px;
}
.move-item {
display: flex;
gap: 5px;
padding: 10px;
border-bottom: 1px solid #007BFF;
cursor: pointer;
transition: all 0.2s ease;
}
.move-item:hover {
border-color: #008CBA;
}
.status-bar-content {
display: flex;
gap: 10px;
}
button {
padding: 8px 16px;
font-size: 14px;
cursor: pointer;
border: none;
border-radius: 4px;
background: rgba(255, 255, 255, 0.9);
color: #007BFF;
transition: background 0.3s;
}
.play-button {
background: #008CBA;
color: #FFD700;
border: none;
border-radius: 4px;
font-weight: bold;
}
.close-button {
background: #FF5733;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
}
@media (max-width: 768px) {
.battle-details {
padding: 15px;
border-radius: 6px;
}
}
</style>
</head>
<body>
<header>Pokémon Battle</header>
<section class="battle-details">
<div class="opponent-info">
<h2>Opponent: {{ enemy.name }}</h2>
<div class="status-bar">
<div class="status-bar-content">
<span>{{ enemy.status }}</span>
<span>{{ enemy.heal }}</span>
</div>
</div>
</div>
<div class="move-container">
<div class="opponent-moves" id="moves"></div>
</div>
</section>
<script>
// Sample data
const moves = [
{ id: 1, name: "Fire Blast", description: "Use a blazing fire!", color: "#FF6347" },
{ id: 2, name: "Thunderbolt", description: "Thunder to the skies!", color: "#FF1493" },
{ id: 3, name: "Cure", description: "Peachy healing!", color: "#3498DB" }
];
const enemy = {
id: 1,
name: "RuneMaster",
status: "Stale",
heal: 0,
moves: [
{ id: 1, name: "Fire Blast", description: "Use a blazing fire!" },
{ id: 2, name: "Thunderbolt", description: "Thunder to the skies!" },
{ id: 3, name: "Cure", description: "Peachy healing!" }
]
};
let moveIndex = 0;
document.getElementById('moves').textContent = enemy.moves.map(move => '<div class="move-item" data-id="' + move.id + '">' + move.name + '</div>');
document.getElementById('opponent-moves').addEventListener('click', e => {
moveIndex = e.target.dataset.id;
const move = moves[moveIndex];
const statusText = enemy.status ? 'Status: ' + enemy.status + '' : "Status: Normal";
const healText = (enemy.heal + move.heal).toFixed(1) + "%";
const moveDetail = move.description;
const moveContainer = document.getElementById('moves');
moveContainer.innerHTML = '
<div class="move-item" data-id="' + move.id + '" data-detail="' + moveDetail + '">
' + move.name + ' <span style="color: #FF6347;">' + move.color + '</span>
' + statusText + '
<span style="color: #007BFF;">Heal: ' + healText + '</span>
</div>
';
});
document.getElementById('play-button').addEventListener('click', () => {
document.getElementById('battle-details').style.display = 'none';
document.body.style.backgroundColor = '#008CBA';
});
document.getElementById('close-button').addEventListener('click', () => {
document.body.style.backgroundColor = 'white';
});
</script>
</body>
</html>
