🏢 勤怠管理 📅
⏰
タップしてみて！👇
🏃🕒🍵😊💪🚶♂️📅✨
```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 buttonClick {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
@keyframes emojiBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
</style>
<script>
function punchIn() {
alert("⏰ 出勤しました！頑張りましょう！💪✨");
}
function punchOut() {
alert("🏠 退勤しました！お疲れ様です！🍵😌");
}
</script>
</head>
<body>
<div style="width: 400px; height: 400px; margin: auto; text-align: center; background: #ffeb3b; padding: 20px; border-radius: 20px; box-shadow: 0 0 10px rgba(0,0,0,0.5);">
<h1 style="font-size: 2em; margin-bottom: 20px;">🏢 勤怠管理 📅</h1>
<div style="font-size: 4em; margin-bottom: 20px;">⏰</div>
<div style="display: flex; justify-content: space-around; margin-bottom: 20px;">
<input type="button" value="出勤 🏃" onclick="punchIn()" style="padding: 10px 20px; font-size: 1em; border: none; border-radius: 10px; background: #4caf50; color: white; cursor: pointer; animation: emojiBounce 2s infinite;">
<input type="button" value="退勤 🚶♂️" onclick="punchOut()" style="padding: 10px 20px; font-size: 1em; border: none; border-radius: 10px; background: #f44336; color: white; cursor: pointer; animation: emojiBounce 2s infinite;">
</div>
<div style="margin-bottom: 20px;">
<p style="margin: 0;">タップしてみて！👇</p>
<div onclick="alert('🎉 楽しい一日を！🎉')" style="font-size: 3em; cursor: pointer; animation: buttonClick 0.2s 1;"></div>
</div>
<div style="font-size: 2em;">
🏃🕒🍵😊💪🚶♂️📅✨
</div>
</div>
</body>
</html>
```