💪✨ パーソナルフィットネス評価 🏋️♂️🎉
🏃♂️ 走るテスト:
m
💪 腕立て伏せ:
回
🧘♀️ 体幹テスト:
秒
```html
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-20px); }
60% { transform: translateY(-10px); }
}
@keyframes tada {
from { transform: scale3d(1, 1, 1); }
10%, 20% { transform: scale3d(0.9, 1.1, 1); }
30%, 50%, 70%, 90% { transform: scale3d(1.1, 0.9, 1); }
40%, 60%, 80% { transform: scale3d(0.95, 1.05, 1); }
to { transform: scale3d(1, 1, 1); }
}
@keyframes sparkle {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.bounce {
animation: bounce 1s;
}
.tada {
animation: tada 1s;
}
.sparkle {
animation: sparkle 2s infinite;
}
</style>
</head>
<body>
<div style="width: 400px; height: 400px; border: 2px solid #FFD700; border-radius: 10px; padding: 10px; box-sizing: border-box; overflow: auto;">
<div style="text-align: center; font-size: 24px; margin-bottom: 10px;">💪✨ パーソナルフィットネス評価 🏋️♂️🎉</div>
<div style="margin-bottom: 10px;">
<span style="font-size: 20px;">🏃♂️ 走るテスト:</span>
<input type="number" id="run" style="width: 60px; margin-left: 10px;">
<span style="font-size: 20px;">m</span>
</div>
<div style="margin-bottom: 10px;">
<span style="font-size: 20px;">💪 腕立て伏せ:</span>
<input type="number" id="pushup" style="width: 60px; margin-left: 10px;">
<span style="font-size: 20px;">回</span>
</div>
<div style="margin-bottom: 10px;">
<span style="font-size: 20px;">🧘♀️ 体幹テスト:</span>
<input type="number" id="core" style="width: 60px; margin-left: 10px;">
<span style="font-size: 20px;">秒</span>
</div>
<div style="text-align: center; margin-bottom: 10px;">
<button id="submit" style="font-size: 18px; padding: 5px 10px; cursor: pointer;">📊 結果を表示 🎈</button>
</div>
<canvas id="chart" width="350" height="200" style="border:1px solid #000; margin: 0 auto; display: block;"></canvas>
<div id="emojis" style="text-align: center; margin-top: 10px; font-size: 30px;"></div>
</div>
<script>
const submitBtn = document.getElementById('submit');
const emojisDiv = document.getElementById('emojis');
const canvas = document.getElementById('chart');
const ctx = canvas.getContext('2d');
submitBtn.addEventListener('click', () => {
submitBtn.classList.add('tada');
setTimeout(() => submitBtn.classList.remove('tada'), 1000);
const run = parseInt(document.getElementById('run').value) || 0;
const pushup = parseInt(document.getElementById('pushup').value) || 0;
const core = parseInt(document.getElementById('core').value) || 0;
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
const data = [run, pushup, core];
const labels = ['🏃♂️ 走る', '💪 腕立て', '🧘♀️ 体幹'];
const colors = ['#FF6384', '#36A2EB', '#FFCE56'];
// Draw bars
const barWidth = 80;
const max = Math.max(...data, 10);
data.forEach((value, index) => {
const barHeight = (value / max) * 150;
ctx.fillStyle = colors[index];
ctx.fillRect(50 + index * 100, 180 - barHeight, barWidth, barHeight);
ctx.fillStyle = '#000';
ctx.textAlign = 'center';
ctx.fillText(labels[index], 50 + index * 100 + barWidth / 2, 195);
ctx.fillText(value, 50 + index * 100 + barWidth / 2, 170 - barHeight);
});
// Add sparkles
emojisDiv.innerHTML = '🎉✨💪🏅🎈🎊';
emojisDiv.classList.add('sparkle');
setTimeout(() => {
emojisDiv.classList.remove('sparkle');
emojisDiv.innerHTML = '';
}, 4000);
});
// Add click animations to submit button
submitBtn.addEventListener('mousedown', () => {
submitBtn.classList.add('bounce');
});
submitBtn.addEventListener('mouseup', () => {
submitBtn.classList.remove('bounce');
});
</script>
</body>
</html>
```