🎉 チーム分けアプリ 🎉
👯♀️ チームを作ろう 👯♂️
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>チーム分けアプリ</title>
<style>
@keyframes pop {
0% { transform: scale(1); }
50% { transform: scale(1.5); }
100% { transform: scale(1); }
}
@keyframes wiggle {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(15deg); }
75% { transform: rotate(-15deg); }
}
</style>
</head>
<body>
<div style="width: 400px; height: 400px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px solid #000; padding: 20px; box-sizing: border-box; text-align: center; background-color: #FFFAE3;">
<div style="font-size: 2rem; margin-bottom: 20px;">
🎉 チーム分けアプリ 🎉
</div>
<div id="teams" style="font-size: 1.5rem; margin-bottom: 20px;">
👯♀️ チームを作ろう 👯♂️
</div>
<div>
<input type="button" value="チーム分けスタート！" style="font-size: 1.2rem; padding: 10px; cursor: pointer;" onclick="teamUp()">
</div>
<div style="margin-top: 30px; width: 100%; display: flex; justify-content: space-between;">
<input type="button" value="A" style="font-size: 1.5rem; padding: 10px; cursor: pointer; background-color: #FFD700;" onclick="animateEmoji('A')">
<input type="button" value="B" style="font-size: 1.5rem; padding: 10px; cursor: pointer; background-color: #00FF00;" onclick="animateEmoji('B')">
<input type="button" value="C" style="font-size: 1.5rem; padding: 10px; cursor: pointer; background-color: #FF69B4;" onclick="animateEmoji('C')">
<input type="button" value="D" style="font-size: 1.5rem; padding: 10px; cursor: pointer; background-color: #1E90FF;" onclick="animateEmoji('D')">
</div>
<script>
function getRandomTeam() {
const teams = [
'AとC',
'BとD',
'🎉 AとC 🎉',
'🎈 BとD 🎈',
'✨ AとC ✨',
'🌟 BとD 🌟',
'⭐️ AとC ⭐️',
'🎶 BとD 🎶'
];
return teams[Math.floor(Math.random() * teams.length)];
}
function teamUp() {
const teamsDiv = document.getElementById('teams');
teamsDiv.innerHTML = getRandomTeam();
teamsDiv.style.animation = "pop 0.5s";
setTimeout(() => {
teamsDiv.style.animation = "";
}, 500);
}
function animateEmoji(button) {
const colors = {
'A': '#FFD700',
'B': '#00FF00',
'C': '#FF69B4',
'D': '#1E90FF'
};
document.body.style.backgroundColor = colors[button];
document.body.style.animation = "wiggle 0.5s";
setTimeout(() => {
document.body.style.backgroundColor = '#FFFAE3';
document.body.style.animation = "";
}, 500);
}
// 初期表示のアニメーション
window.onload = function() {
const emojiDiv = document.getElementById('teams');
emojiDiv.style.animation = "pop 1s";
setTimeout(() => {
emojiDiv.style.animation = "";
}, 1000);
}
</script>
</div>
</body>
</html>
```