Claude3.5Sonnetでプログラムを生成

<!DOCTYPE html>

<html lang="ja">

<head>

    <meta charset="UTF-8">

    <title>アナログ時計</title>

    <style>

        .clock {

            width: 98px;

            height: 98px;

            border: 3.5px solid #B08968;

            border-radius: 50%;

            position: relative;

            background: #ffffff;

            margin-left: 7px;

        }

        .hand {

            position: absolute;

            transform-origin: bottom center;

            background: #333;

            z-index: 2; /* 針を日付の前面に配置 */

        }

        .hour {

            width: 2.8px;

            height: 24.5px;

            top: 24.5px;

            left: 47.6px;

        }

        .minute {

            width: 2.1px;

            height: 35px;

            top: 14px;

            left: 48.3px;

        }

        .second {

            width: 0.7px;

            height: 39.9px;

            top: 9.1px;

            left: 49px;

            background: #f00;

        }

        .center {

            width: 5.6px;

            height: 5.6px;

            background: #333;

            border-radius: 50%;

            position: absolute;

            top: 46.2px;

            left: 46.2px;

            z-index: 3; /* 中心点を最前面に配置 */

        }

        .number {

            position: absolute;

            font-size: 11px;

            font-weight: normal;

            font-family: Arial, sans-serif;

            color: #333;

            width: 14px;

            height: 14px;

            text-align: center;

            line-height: 14px;

        }

        .date {

            position: absolute;

            font-size: 10px;

            font-weight: bold;

            font-family: Arial, sans-serif;

            color: #ffffff;

            background-color: #000000;

            width: 34px;

            text-align: center;

            bottom: 26px;

            left: 32px;

            padding: 1px 0;

            border-radius: 3px;

            z-index: 1; /* 日付を針の背面に配置 */

        }

    </style>

</head>

<body>

    <div class="clock">

        <div class="date"></div>

        <div class="hand hour"></div>

        <div class="hand minute"></div>

        <div class="hand second"></div>

        <div class="center"></div>

    </div>


    <script>

        function updateClock() {

            const now = new Date();

            const hours = now.getHours() % 12;

            const minutes = now.getMinutes();

            const seconds = now.getSeconds();

            const milliseconds = now.getMilliseconds();


            const hourDeg = (hours + minutes / 60) * 30;

            const minuteDeg = (minutes + seconds / 60) * 6;

            const secondDeg = (seconds + milliseconds / 1000) * 6;


            document.querySelector('.hour').style.transform = `rotate(${hourDeg}deg)`;

            document.querySelector('.minute').style.transform = `rotate(${minuteDeg}deg)`;

            document.querySelector('.second').style.transform = `rotate(${secondDeg}deg)`;


            // 日付を更新(月/日の形式)

            const month = now.getMonth() + 1;

            const date = now.getDate();

            document.querySelector('.date').textContent = `${month} / ${date}`;

        }


        function addNumbers() {

            const clock = document.querySelector('.clock');

            const radius = 39;

            const centerX = 49;

            const centerY = 49;


            for (let i = 1; i <= 12; i++) {

                const number = document.createElement('div');

                number.className = 'number';

                number.textContent = i;


                const angle = (i - 3) * (Math.PI / 6);

                const x = centerX + radius * Math.cos(angle);

                const y = centerY + radius * Math.sin(angle);


                number.style.left = `${x - 7}px`;

                number.style.top = `${y - 7}px`;


                clock.appendChild(number);

            }

        }


        setInterval(updateClock, 50);

        addNumbers();

    </script>

</body>

</html>