🎉🎈✨
```html
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes bounce {
0% { transform: scale(1); }
25% { transform: scale(1.2); }
50% { transform: scale(1); }
75% { transform: scale(1.2); }
100% { transform: scale(1); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.bounce {
animation: bounce 0.5s;
}
.fadeIn {
animation: fadeIn 1s;
}
</style>
</head>
<body>
<div style="width: 400px; height: 400px; overflow: auto; border: 2px solid #000; position: relative; background-color: #f0f8ff;">
<canvas id="ganttChart" width="400" height="400" style="background-color: #fff;"></canvas>
<div style="position: absolute; top: 10px; left: 10px;">
<button onclick="addTask()" style="padding: 5px; margin: 5px;">➕タスク追加</button>
</div>
<div id="emojiContainer" style="position: absolute; bottom: 10px; right: 10px;">
<span style="font-size: 24px;">🎉🎈✨</span>
</div>
</div>
<script>
const canvas = document.getElementById('ganttChart');
const ctx = canvas.getContext('2d');
let tasks = [];
let taskId = 0;
function addTask() {
if (tasks.length >= 100) return;
const newTask = {
id: taskId++,
name: `タスク${taskId} 🎯`,
level: Math.floor(Math.random() * 10),
plannedStart: Math.floor(Math.random() * 30),
plannedEnd: Math.floor(Math.random() * 30) + 1,
actualStart: Math.floor(Math.random() * 30),
actualEnd: Math.floor(Math.random() * 30) + 1
};
tasks.push(newTask);
drawChart();
animateEmojis();
}
function drawChart() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
tasks.forEach((task, index) => {
const y = 30 + index * 30;
ctx.fillStyle = '#87cefa';
ctx.fillRect(10 + task.plannedStart * 5, y, (task.plannedEnd - task.plannedStart) * 5, 20);
ctx.fillStyle = '#32cd32';
ctx.fillRect(10 + task.actualStart * 5, y + 25, (task.actualEnd - task.actualStart) * 5, 20);
ctx.fillStyle = '#000';
ctx.fillText(`${'📁'.repeat(task.level)} ${task.name}`, 10, y - 5);
});
}
function animateEmojis() {
const emojiContainer = document.getElementById('emojiContainer');
emojiContainer.classList.add('bounce');
emojiContainer.classList.add('fadeIn');
emojiContainer.addEventListener('animationend', () => {
emojiContainer.classList.remove('bounce');
emojiContainer.classList.remove('fadeIn');
}, { once: true });
}
canvas.addEventListener('click', () => {
animateEmojis();
});
// Initialize with some tasks
for (let i = 0; i < 5; i++) {
addTask();
}
</script>
</body>
</html>
```