```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 colorChange {
0%, 100% { color: #00D084; }
50% { color: #00A16C; }
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.animated-text {
animation: colorChange 1s infinite;
}
.btn {
animation: bounce 0.5s infinite;
}
</style>
</head>
<body>
<div id="app" style="width: 400px; height: 400px; text-align: center; position: relative;">
<div id="time" style="font-size: 2em; color: #00D084;" class="animated-text"></div>
<div>
<span id="date" style="color: #87CEFA; "></span>
<span id="weekday" style="margin-left: 10px;"></span>
</div>
<div style="margin-top: 10px;">
<button id="prev" class="btn" style="font-size: 1.5em;">⬅️-1</button>
<button id="next" class="btn" style="font-size: 1.5em; margin-left: 10px;">+1➡️</button>
</div>
<div style="margin-top: 10px;">
<button id="setBirthday" class="btn" style="font-size: 1.5em;">🎂 誕生日設定</button>
</div>
<div id="birthdayButtonContainer" style="margin-top: 10px;"></div>
</div>
<div id="birthdayInputContainer" style="display: none;">
<input id="birthYear" type="number" placeholder="年 (YYYY)" style="width: 20%; margin: 5px;">
<input id="birthMonth" type="number" placeholder="月 (MM)" style="width: 20%; margin: 5px;">
<input id="birthDay" type="number" placeholder="日 (DD)" style="width: 20%; margin: 5px;">
<button id="confirmBirthday" class="btn" style="font-size: 1.5em;">✅ 設定</button>
</div>
<script>
const timeEl = document.getElementById('time');
const dateEl = document.getElementById('date');
const weekdayEl = document.getElementById('weekday');
const prevBtn = document.getElementById('prev');
const nextBtn = document.getElementById('next');
const setBirthdayBtn = document.getElementById('setBirthday');
const birthdayInputContainer = document.getElementById('birthdayInputContainer');
const confirmBirthdayBtn = document.getElementById('confirmBirthday');
const birthYearInput = document.getElementById('birthYear');
const birthMonthInput = document.getElementById('birthMonth');
const birthDayInput = document.getElementById('birthDay');
const birthdayButtonContainer = document.getElementById('birthdayButtonContainer');
let currentDate = new Date();
const weekdays = ["日", "月", "火", "水", "木", "金", "土"];
const weekdayColors = ['red', 'black', '#B22222', '#87CEFA', 'green', 'gold', 'blue'];
function updateDateTime() {
timeEl.textContent = currentDate.toLocaleTimeString();
dateEl.textContent = `${currentDate.getFullYear()}-${String(currentDate.getMonth() + 1).padStart(2, '0')}-${String(currentDate.getDate()).padStart(2, '0')}`;
const day = currentDate.getDay();
weekdayEl.textContent = `(${weekdays[day]})`;
weekdayEl.style.color = weekdayColors[day];
}
function adjustDate(days) {
currentDate.setDate(currentDate.getDate() + days);
updateDateTime();
}
prevBtn.addEventListener('click', () => adjustDate(-1));
nextBtn.addEventListener('click', () => adjustDate(1));
setBirthdayBtn.addEventListener('click', () => {
birthdayInputContainer.style.display = 'block';
});
confirmBirthdayBtn.addEventListener('click', () => {
const year = birthYearInput.value;
const month = birthMonthInput.value;
const day = birthDayInput.value;
const birthdayStr = `${year}/${month}/${day}`;
const birthday = new Date(year, month - 1, day);
const weekday = weekdays[birthday.getDay()];
const buttonHTML = `<button class="btn" style="font-size: 1.5em;" onclick="setBirthdayDate(${year}, ${month}, ${day})">${birthdayStr}</button>`;
birthdayButtonContainer.innerHTML = buttonHTML;
birthdayInputContainer.style.display = 'none';
});
function setBirthdayDate(year, month, day) {
currentDate.setFullYear(year);
currentDate.setMonth(month - 1);
currentDate.setDate(day);
updateDateTime();
}
setInterval(updateDateTime, 1000);
updateDateTime();
</script>
</body>
</html>
```
