<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Analog Clock</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f4f4f4;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        }
        .clock {
            width: 400px;
            height: 400px;
            border-radius: 50%;
            background-color: white;
            border: 2px solid #333;
            position: relative;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
        .number {
            position: absolute;
            width: 30px;
            height: 30px;
            text-align: center;
            color: #333;
            font-weight: 300;
        }
        .hand {
            position: absolute;
            bottom: 50%;
            left: 50%;
            transform-origin: bottom;
            background-color: #333;
        }
        .hour-hand {
            width: 6px;
            height: 25%;
            border-radius: 4px;
        }
        .minute-hand {
            width: 4px;
            height: 35%;
            border-radius: 3px;
        }
        .second-hand {
            width: 2px;
            height: 40%;
            background-color: #e74c3c;
        }
    </style>
</head>
<body>
    <div class="clock" id="clock">
        <div class="hand hour-hand" id="hourHand"></div>
        <div class="hand minute-hand" id="minuteHand"></div>
        <div class="hand second-hand" id="secondHand"></div>
    </div>

    <script>
        const clock = document.getElementById('clock');
        const hourHand = document.getElementById('hourHand');
        const minuteHand = document.getElementById('minuteHand');
        const secondHand = document.getElementById('secondHand');

        // Position numbers
        const numbers = [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
        numbers.forEach((num, index) => {
            const numberEl = document.createElement('div');
            numberEl.classList.add('number');
            numberEl.innerText = num;

            const angle = index * 30;
            const radius = 180;
            const x = 200 + radius * Math.sin(angle * Math.PI / 180) - 15;
            const y = 200 - radius * Math.cos(angle * Math.PI / 180) - 15;

            numberEl.style.left = `${x}px`;
            numberEl.style.top = `${y}px`;
            clock.appendChild(numberEl);
        });

        function updateClock() {
            const now = new Date();
            const seconds = now.getSeconds();
            const minutes = now.getMinutes();
            const hours = now.getHours() % 12;

            const secondDegrees = seconds * 6;
            const minuteDegrees = minutes * 6 + seconds * 0.1;
            const hourDegrees = hours * 30 + minutes * 0.5;

            secondHand.style.transform = `rotate(${secondDegrees}deg)`;
            minuteHand.style.transform = `rotate(${minuteDegrees}deg)`;
            hourHand.style.transform = `rotate(${hourDegrees}deg)`;
        }

        setInterval(updateClock, 1000);
        updateClock(); // Immediate first call
    </script>
</body>
</html>