```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>競技ヨーヨー管理アプリ</title>
<style>
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
@keyframes pulsate {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
</style>
</head>
<body>
<div style="width: 400px; height: 400px; margin: 0 auto; text-align: center; padding-top: 20px; border: 5px solid #000;">
<h1 style="font-size: 24px;">🎯 競技ヨーヨー管理アプリ 🎯</h1>
<div style="margin-bottom: 20px;">
<input type="text" id="maker" placeholder="メーカー" style="padding: 8px; margin-top: 8px; width: 90%;"><br>
<input type="text" id="width" placeholder="本体幅" style="padding: 8px; margin-top: 8px; width: 90%;"><br>
<input type="text" id="diameter" placeholder="直径" style="padding: 8px; margin-top: 8px; width: 90%;"><br>
<input type="text" id="model" placeholder="機種名" style="padding: 8px; margin-top: 8px; width: 90%;"><br>
<input type="text" id="weight" placeholder="重さ" style="padding: 8px; margin-top: 8px; width: 90%;"><br>
<button onclick="addYoyo()" style="padding: 10px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; animation: bounce 2s infinite;">追加 🎉</button>
</div>
<div id="yoyoList" style="height: 200px; overflow-y: scroll; border: 2px solid #000; padding: 10px; text-align: left;"></div>
</div>
<script>
const yoyoList = [];
function addYoyo() {
const maker = document.getElementById('maker').value;
const width = document.getElementById('width').value;
const diameter = document.getElementById('diameter').value;
const model = document.getElementById('model').value;
const weight = document.getElementById('weight').value;
if (maker && width && diameter && model && weight) {
yoyoList.push({ maker, width, diameter, model, weight });
document.getElementById('maker').value = '';
document.getElementById('width').value = '';
document.getElementById('diameter').value = '';
document.getElementById('model').value = '';
document.getElementById('weight').value = '';
renderList();
}
}
function renderList() {
const yoyoListDiv = document.getElementById('yoyoList');
yoyoListDiv.innerHTML = '';
yoyoList.forEach((yoyo, index) => {
const yoyoDiv = document.createElement('div');
yoyoDiv.innerHTML = `
<div style="border-bottom: 1px solid #ddd; padding: 5px;">
🏷️ <strong>メーカー:</strong> ${yoyo.maker} <br>
📏 <strong>本体幅:</strong> ${yoyo.width} mm <br>
📏 <strong>直径:</strong> ${yoyo.diameter} mm <br>
🛠️ <strong>機種名:</strong> ${yoyo.model} <br>
⚖️ <strong>重さ:</strong> ${yoyo.weight} g <br>
<button onclick="deleteYoyo(${index})" style="padding: 5px; background-color: #f44336; color: white; border: none; border-radius: 3px; animation: pulsate 2s infinite;">削除 ✂️</button>
</div>
`;
yoyoDiv.style.animation = 'spin 2s linear';
yoyoListDiv.appendChild(yoyoDiv);
});
}
function deleteYoyo(index) {
yoyoList.splice(index, 1);
renderList();
}
</script>
</body>
</html>
```
