```html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>카운트다운 타이머</title>
<style>
/* CSS */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
#countdown {
text-align: center;
margin: 20px;
}
#countdown button {
margin: 5px;
}
#countdown button:hover {
background-color: #ccc;
}
#countdown .timer {
font-size: 36px;
font-weight: bold;
color: #000;
}
#countdown .timer.red {
color: #f00;
}
#countdown .dark-mode {
display: none;
}
@media (prefers-color-scheme: dark) {
#countdown .dark-mode {
display: block;
}
}
</style>
</head>
<body>
<div id="countdown">
<input type="number" id="minute" placeholder="분">
<input type="number" id="second" placeholder="초">
<button id="preset-5">5분</button>
<button id="preset-10">10분</button>
<button id="preset-15">15분</button>
<button id="preset-30">30분</button>
<button id="preset-60">60분</button>
<button id="start">시작</button>
<button id="pause">일시정지</button>
<button id="resume">재개</button>
<button id="reset">초기화</button>
<div class="dark-mode">
<button id="dark-mode">다크 모드</button>
</div>
<div class="timer" id="timer"></div>
</div>
<script>
// JavaScript
let timer;
let audioContext;
let oscillator;
document.getElementById("preset-5").addEventListener("click", function() {
document.getElementById("minute").value = 5;
document.getElementById("second").value = 0;
});
document.getElementById("preset-10").addEventListener("click", function() {
document.getElementById("minute").value = 10;
document.getElementById("second").value = 0;
});
document.getElementById("preset-15").addEventListener("click", function() {
document.getElementById("minute").value = 15;
document.getElementById("second").value = 0;
});
document.getElementById("preset-30").addEventListener("click", function() {
document.getElementById("minute").value = 30;
document.getElementById("second").value = 0;
});
document.getElementById("preset-60").addEventListener("click", function() {
document.getElementById("minute").value = 60;
document.getElementById("second").value = 0;
});
document.getElementById("dark-mode").addEventListener("click", function() {
document.body.classList.toggle("dark-mode");
});
document.getElementById("start").addEventListener("click", function() {
timer = setInterval(function() {
let minute = parseInt(document.getElementById("minute").value);
let second = parseInt(document.getElementById("second").value);
let time = minute * 60 + second;
let remainingTime = time - Date.now() / 1000;
if (remainingTime < 0) {
clearInterval(timer);
finish();
return;
}
let minuteDisplay = Math.floor(remainingTime / 60);
let secondDisplay = Math.floor(remainingTime % 60);
document.getElementById("timer").innerText = `${minuteDisplay.toString().padStart(2,
"0")}:${secondDisplay.toString().padStart(2, "0")}`;
if (secondDisplay < 10) {
document.getElementById("timer").classList.add("red");
} else {
document.getElementById("timer").classList.remove("red");
}
}, 1000);
// AudioContext resume
audioContext = new AudioContext();
audioContext.resume();
// Sound effects
let soundEffects = [
[520, 650, 0.09, 0.06, 2],
[440, 550, 0.15, 0.15, 6]
];
function playSoundEffect(index) {
let sound = audioContext.createOscillator();
sound.type = "square";
sound.frequency.value = soundEffects[index][0];
sound.connect(audioContext.destination);
sound.start(soundEffects[index][2]);
sound.stop(soundEffects[index][2] + soundEffects[index][3]);
}
function finish() {
if (minute < 5) return;
if (minute < 1) return;
playSoundEffect(0);
setTimeout(function() {
playSoundEffect(0);
}, 1000);
setTimeout(function() {
playSoundEffect(1);
}, 2000);
}
});
document.getElementById("pause").addEventListener("click", function() {
clearInterval(timer);
});
document.getElementById("resume").addEventListener("click", function() {
timer = setInterval(function() {
// ...
}, 1000);
});
document.getElementById("reset").addEventListener("click", function() {
clearInterval(timer);
document.getElementById("minute").value = 0;
document.getElementById("second").value = 0;
document.getElementById("timer").innerText = "00:00";
document.getElementById("timer").classList.remove("red");
});
</script>
</body>
</html>
```