<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Analog Clock</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: white;
            font-family: Arial, sans-serif;
        }

        .clock {
            position: relative;
            width: 300px;
            height: 300px;
            border: 5px solid #333;
            border-radius: 50%;
            background-color: white;
            box-shadow: 0 0 20px rgba(0,0,0,0.1);
        }

        .hand {
            position: absolute;
            bottom: 50%;
            left: 50%;
            transform-origin: bottom;
            transform: translateX(-50%) rotate(0deg);
            border-radius: 4px;
            z-index: 10;
        }

        .hour-hand {
            width: 8px;
            height: 70px;
            background-color: #333;
        }

        .minute-hand {
            width: 6px;
            height: 100px;
            background-color: #666;
        }

        .second-hand {
            width: 2px;
            height: 110px;
            background-color: #d00;
            z-index: 15;
        }

        .center-dot {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 12px;
            height: 12px;
            background-color: #333;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            z-index: 20;
        }

        .number {
            position: absolute;
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            font-size: 20px;
            font-weight: bold;
            color: #333;
        }
    </style>
</head>
<body>
    <div class="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 class="center-dot"></div>
    </div>

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

        // Add numbers 1-12 to the clock face
        for (let i = 1; i <= 12; i++) {
            const number = document.createElement('div');
            number.className = 'number';
            number.textContent = i;

            // Position numbers in a circle
            // 12 is at -90 degrees (top)
            const angle = (i * 30 - 90) * (Math.PI / 180);
            const radius = 115; // Distance from center
            const center = 150; // Half of clock size

            const x = center + radius * Math.cos(angle) - 10; // -10 to center the 20px div
            const y = center + radius * Math.sin(angle) - 10;

            number.style.left = `${x}px`;
            number.style.top = `${y}px`;

            clockFace.appendChild(number);
        }

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

            // Calculate rotation degrees
            const secondDeg = seconds * 6;
            // Smooth minute movement based on seconds
            const minuteDeg = minutes * 6 + seconds * 0.1;
            // Smooth hour movement based on minutes
            const hourDeg = (hours % 12) * 30 + minutes * 0.5;

            // Apply rotation
            secondHand.style.transform = `translateX(-50%) rotate(${secondDeg}deg)`;
            minuteHand.style.transform = `translateX(-50%) rotate(${minuteDeg}deg)`;
            hourHand.style.transform = `translateX(-50%) rotate(${hourDeg}deg)`;
        }

        // Update every second
        setInterval(updateClock, 1000);
        // Run immediately to avoid 1-second delay on load
        updateClock();
    </script>
</body>
</html>