创建一个名为templates的文件夹，并在其中创建一个名为index.html的文件，内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>升级动画</title>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
}
.character {
width: 200px;
height: 200px;
margin: 50px auto;
border: 2px solid #000;
border-radius: 10px;
background-color: #f0f0f0;
position: relative;
}
.character img {
width: 100%;
height: 100%;
display: none;
}
.character img.active {
display: block;
}
.level {
font-size: 1.5em;
margin-top: 20px;
}
.upgrade {
font-size: 1.2em;
color: green;
}
</style>
</head>
<body>
<div class="character">
<img src="/static/character_level1.png" id="level1" class="active">
<img src="/static/character_level2.png" id="level2">
<img src="/static/character_level3.png" id="level3">
</div>
<div class="level" id="level">当前等级: 初级</div>
<div class="upgrade" id="upgrade"></div>
<script>
function updateLevel(newLevel) {
const levelImages = {
'初级': document.getElementById('level1'),
'中级': document.getElementById('level2'),
'高级': document.getElementById('level3')
};
for (let level in levelImages) {
if (level === newLevel) {
levelImages[level].classList.add('active');
document.getElementById('level').textContent = `当前等级: ${level}`;
document.getElementById('upgrade').textContent = `升级到${level}!`;
} else {
levelImages[level].classList.remove('active');
}
}
}
function simulateProgress() {
fetch('/simulate')
.then(response => response.json())
.then(data => {
updateLevel(data.level);
});
}
simulateProgress();
</script>
</body>
</html>
