뻐꾹이 시계 > 팁 자쇼실

<div style="text-align: center; margin: 20px auto; padding: 15px; border: 1px solid #ddd; background-color: #ffffff; border-radius: 8px; max-width: 200px; box-sizing: border-box; clear: both; box-shadow: 0 2px 4px rgba(0,0,0,0.05); font-family: 'Malgun Gothic', sans-serif;">
    
    <div style="margin: 0 0 12px 0; font-size: 14px; color: #333; font-weight: bold;">⏰ 뻐꾸기 알람 시계</div>
    
    <div style="position: relative; width: 130px; height: 130px; border: 5px solid #8B4513; border-radius: 50%; margin: 10px auto; background: #fffdf9; box-shadow: inset 0 0 6px rgba(0,0,0,0.15);">
        <div style="position: absolute; width: 100%; text-align: center; font-weight: bold; font-size: 11px; top: 2px; color: #8B4513;">12</div>
        <div style="position: absolute; width: 100%; text-align: center; font-weight: bold; font-size: 11px; bottom: 2px; color: #8B4513;">6</div>
        <div style="position: absolute; height: 100%; top: 0; left: 5px; display: flex; align-items: center; font-weight: bold; font-size: 11px; color: #8B4513;">9</div>
        <div style="position: absolute; height: 100%; top: 0; right: 5px; display: flex; align-items: center; font-weight: bold; font-size: 11px; color: #8B4513;">3</div>
        
        <div id="daet-hour" style="position: absolute; width: 4px; height: 32px; background: #333; top: 33px; left: 58px; transform-origin: bottom center; border-radius: 2px;"></div>
        <div id="daet-minute" style="position: absolute; width: 3px; height: 45px; background: #555; top: 20px; left: 58.5px; transform-origin: bottom center; border-radius: 2px;"></div>
        <div id="daet-second" style="position: absolute; width: 1px; height: 48px; background: #d97706; top: 17px; left: 59.5px; transform-origin: bottom center;"></div>
        <div style="position: absolute; width: 8px; height: 8px; background: #8B4513; border-radius: 50%; top: 56px; left: 56px;"></div>
    </div>
    
    <div style="font-size: 11px; color: #666; font-weight: bold; margin: 10px 0 5px 0;">ALARM SETTINGS</div>
    <div style="display: flex; justify-content: center; align-items: center; gap: 5px;">
        <input type="time" id="real-alarm-time" style="padding: 4px 6px; font-size: 13px; border: 1px solid #cbd5e1; border-radius: 4px; color: #334155; width: 100px;">
        <button type="button" onclick="fn_setAlarm()" style="padding: 5px 10px; font-size: 12px; font-weight: bold; background-color: #ea580c; color: #ffffff; border: none; border-radius: 4px; cursor: pointer;">설정</button>
    </div>
</div>

<audio id="cuckoo-sound" src="https://actions.google.com/sounds/v1/alarms/digital_watch_alarm_long.ogg" preload="auto"></audio>

<script>
// 시계 바늘 구동
function runDaetClock() {
    var now = new Date();
    var sDeg = (now.getSeconds() / 60) * 360;
    var mDeg = ((now.getMinutes() + now.getSeconds()/60) / 60) * 360;
    var hDeg = (((now.getHours() % 12) + now.getMinutes()/60) / 12) * 360;



// 알람 등록 및 오디오 시스템 강제 잠금 해제
var targetAlarmTime = null;
function fn_setAlarm() {
    var timeVal = document.getElementById('real-alarm-time').value;
    if(!timeVal) { alert('시간을 선택해 주세요.'); return; }
    targetAlarmTime = timeVal;
    
    // [보안 돌파 핵심] 사용자가 클릭하는 순간 시스템 소리 기능을 강제로 깨웁니다.
    var audio = document.getElementById('cuckoo-sound');
    if(audio) {
        audio.play().then(function() {
            audio.pause();
            audio.currentTime = 0;
        }).catch(function(e) { console.log(e); });
    }
    
    alert(timeVal + '에 알람음이 등록되었습니다!\n\n※ 정시에 소리가 나려면 이 인터넷 창이 켜져 있어야 합니다.');
}

// 매 초마다 감시하다가 정시에 삑삑 소리내기
setInterval(function() {
    if(!targetAlarmTime) return;
    var d = new Date();
    var current = ('0' + d.getHours()).slice(-2) + ':' + ('0' + d.getMinutes()).slice(-2);
    
    if(current === targetAlarmTime) {
        var audio = document.getElementById('cuckoo-sound');
        if(audio) {
            audio.currentTime = 0;
            audio.play().catch(function(e){ alert("소리 재생을 위해 화면 아무 곳이나 한번만 클릭해 주세요!"); });
        }
        
        // 0.5초 뒤 글자 창도 같이 띄우기
        setTimeout(function() {
            alert('