뻐꾹이 시계 > 홈페지 자료

<aside id="aside">

        <?php echo outlogin('theme/basic'); // 외부 로그인, 테마의 스킨을 사용하려면 스킨을 theme/basic 과 같이 지정 ?>

        <?php echo poll('theme/basic'); // 설문조사, 테마의 스킨을 사용하려면 스킨을 theme/basic 과 같이 지정 ?>

<<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: 140px; height: 140px; border: 5px solid #8B4513; border-radius: 50%; margin: 10px auto; background: #fffdf9; box-shadow: inset 0 0 6px rgba(0,0,0,0.15); box-sizing: border-box;">

        <b style="position: absolute; display: block !important; visibility: visible !important; top: 4px; left: 59px; font-weight: bold !important; font-size: 11px !important; color: #8B4513 !important; line-height: 1 !important; margin:0; padding:0;">12</b>

        <b style="position: absolute; display: block !important; visibility: visible !important; top: 13px; left: 93px; font-weight: bold !important; font-size: 11px !important; color: #8B4513 !important; line-height: 1 !important; margin:0; padding:0;">1</b>

        <b style="position: absolute; display: block !important; visibility: visible !important; top: 35px; left: 114px; font-weight: bold !important; font-size: 11px !important; color: #8B4513 !important; line-height: 1 !important; margin:0; padding:0;">2</b>

        <b style="position: absolute; display: block !important; visibility: visible !important; top: 60px; left: 121px; font-weight: bold !important; font-size: 11px !important; color: #8B4513 !important; line-height: 1 !important; margin:0; padding:0;">3</b>

        <b style="position: absolute; display: block !important; visibility: visible !important; top: 85px; left: 114px; font-weight: bold !important; font-size: 11px !important; color: #8B4513 !important; line-height: 1 !important; margin:0; padding:0;">4</b>

        <b style="position: absolute; display: block !important; visibility: visible !important; top: 107px; left: 93px; font-weight: bold !important; font-size: 11px !important; color: #8B4513 !important; line-height: 1 !important; margin:0; padding:0;">5</b>

        <b style="position: absolute; display: block !important; visibility: visible !important; top: 115px; left: 62px; font-weight: bold !important; font-size: 11px !important; color: #8B4513 !important; line-height: 1 !important; margin:0; padding:0;">6</b>

        <b style="position: absolute; display: block !important; visibility: visible !important; top: 107px; left: 33px; font-weight: bold !important; font-size: 11px !important; color: #8B4513 !important; line-height: 1 !important; margin:0; padding:0;">7</b>

        <b style="position: absolute; display: block !important; visibility: visible !important; top: 85px; left: 13px; font-weight: bold !important; font-size: 11px !important; color: #8B4513 !important; line-height: 1 !important; margin:0; padding:0;">8</b>

        <b style="position: absolute; display: block !important; visibility: visible !important; top: 60px; left: 6px; font-weight: bold !important; font-size: 11px !important; color: #8B4513 !important; line-height: 1 !important; margin:0; padding:0;">9</b>

        <b style="position: absolute; display: block !important; visibility: visible !important; top: 35px; left: 9px; font-weight: bold !important; font-size: 11px !important; color: #8B4513 !important; line-height: 1 !important; margin:0; padding:0;">10</b>

        <b style="position: absolute; display: block !important; visibility: visible !important; top: 13px; left: 29px; font-weight: bold !important; font-size: 11px !important; color: #8B4513 !important; line-height: 1 !important; margin:0; padding:0;">11</b>

        <div id="daet-hour" style="position: absolute; width: 4px; height: 35px; background: #333; top: 32px; left: 63px; transform-origin: bottom center; border-radius: 2px; z-index: 3;"></div>

        <div id="daet-minute" style="position: absolute; width: 3px; height: 48px; background: #555; top: 19px; left: 63.5px; transform-origin: bottom center; border-radius: 2px; z-index: 2;"></div>

        <div id="daet-second" style="position: absolute; width: 1px; height: 52px; background: #d97706; top: 15px; left: 64.5px; transform-origin: bottom center; z-index: 1;"></div>

        <div style="position: absolute; width: 8px; height: 8px; background: #8B4513; border-radius: 50%; top: 61px; left: 61px; z-index: 4;"></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>