JIT
Grid - Untitled
Log in
Claude Sonnet 4
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Analog Clock</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } 
    body {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        font-family: 'Arial', sans-serif;
    }

    .clock-container {
        position: relative;
        width: 60vmin;
        height: 60vmin;
        max-width: 500px;
        max-height: 500px;
        min-width: 300px;
        min-height: 300px;
    }

    .clock {
        width: 100%;
        height: 100%;
        background: radial-gradient(circle, #ffffff 0%, #f0f0f0 100%);
        border-radius: 50%;
        position: relative;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3),
                    inset 0 2px 10px rgba(255, 255, 255, 0.8),
                    inset 0 -2px 10px rgba(0, 0, 0, 0.1);
        border: 8px solid #333;
    }

    .clock::before {
        content: '';
        position: absolute;
        width: 20px;
        height: 20px;
        background: #333;
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 100;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    }

    .number {
        position: absolute;
        font-size: 2.5vmin;
        font-weight: bold;
        color: #333;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: translate(-50%, -50%);
    }

    .number-1 { top: 15%; left: 75%; }
    .number-2 { top: 25%; left: 87%; }
    .number-3 { top: 50%; left: 92%; }
    .number-4 { top: 75%; left: 87%; }
    .number-5 { top: 85%; left: 75%; }
    .number-6 { top: 92%; left: 50%; }
    .number-7 { top: 85%; left: 25%; }
    .number-8 { top: 75%; left: 13%; }
    .number-9 { top: 50%; left: 8%; }
    .number-10 { top: 25%; left: 13%; }
    .number-11 { top: 15%; left: 25%; }
    .number-12 { top: 8%; left: 50%; }

    .hour-marks {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .hour-mark {
        position: absolute;
        width: 4px;
        height: 20px;
        background: #333;
        left: 50%;
        top: 5%;
        transform-origin: 50% 400%;
        transform: translateX(-50%);
    }

    .hour-mark:nth-child(1) { transform: translateX(-50%) rotate(0deg); }
    .hour-mark:nth-child(2) { transform: translateX(-50%) rotate(30deg); }
    .hour-mark:nth-child(3) { transform: translateX(-50%) rotate(60deg); }
    .hour-mark:nth-child(4) { transform: translateX(-50%) rotate(90deg); }
    .hour-mark:nth-child(5) { transform: translateX(-50%) rotate(120deg); }
    .hour-mark:nth-child(6) { transform: translateX(-50%) rotate(150deg); }
    .hour-mark:nth-child(7) { transform: translateX(-50%) rotate(180deg); }
    .hour-mark:nth-child(8) { transform: translateX(-50%) rotate(210deg); }
    .hour-mark:nth-child(9) { transform: translateX(-50%) rotate(240deg); }
    .hour-mark:nth-child(10) { transform: translateX(-50%) rotate(270deg); }
    .hour-mark:nth-child(11) { transform: translateX(-50%) rotate(300deg); }
    .hour-mark:nth-child(12) { transform: translateX(-50%) rotate(330deg); }

    .hand {
        position: absolute;
        left: 50%;
        bottom: 50%;
        transform-origin: bottom center;
        border-radius: 5px 5px 0 0;
    }

    .hour-hand {
        width: 8px;
        height: 25%;
        background: #333;
        transform: translateX(-50%) rotate(90deg);
        z-index: 3;
    }

    .minute-hand {
        width: 6px;
        height: 35%;
        background: #555;
        transform: translateX(-50%) rotate(180deg);
        z-index: 2;
    }

    .second-hand {
        width: 2px;
        height: 40%;
        background: #e74c3c;
        transform: translateX(-50%) rotate(0deg);
        z-index: 4;
        animation: tick 60s linear infinite;
    }

    @keyframes tick {
        0% { transform: translateX(-50%) rotate(0deg); }
        100% { transform: translateX(-50%) rotate(360deg); }
    }

    .clock-title {
        position: absolute;
        bottom: -80px;
        left: 50%;
        transform: translateX(-50%);
        color: white;
        font-size: 3vmin;
        font-weight: bold;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        text-align: center;
    }

    @media (max-width: 600px) {
        .number {
            font-size: 4vw;
        }
        .clock-title {
            font-size: 5vw;
            bottom: -60px;
        }
    }
</style>
</head> <body> <div class="clock-container"> <div class="clock"> 
        <div class="hour-marks">
            <div class="hour-mark"></div>
            <div class="hour-mark"></div>
            <div class="hour-mark"></div>
            <div class="hour-mark"></div>
            <div class="hour-mark"></div>
            <div class="hour-mark"></div>
            <div class="hour-mark"></div>
            <div class="hour-mark"></div>
            <div class="hour-mark"></div>
            <div class="hour-mark"></div>
            <div class="hour-mark"></div>
            <div class="hour-mark"></div>
        </div>

        
        <div class="number number-12">12</div>
        <div class="number number-1">1</div>
        <div class="number number-2">2</div>
        <div class="number number-3">3</div>
        <div class="number number-4">4</div>
        <div class="number number-5">5</div>
        <div class="number number-6">6</div>
        <div class="number number-7">7</div>
        <div class="number number-8">8</div>
        <div class="number number-9">9</div>
        <div class="number number-10">10</div>
        <div class="number number-11">11</div>

        
        <div class="hand hour-hand"></div>
        <div class="hand minute-hand"></div>
        <div class="hand second-hand"></div>
    </div>
    
    <div class="clock-title">Analog Clock</div>
</div>

<script>
    // Set the clock to show current time on load
    function updateClock() {
        const now = new Date();
        const hours = now.getHours() % 12;
        const minutes = now.getMinutes();
        const seconds = now.getSeconds();

        const hourAngle = (hours * 30) + (minutes * 0.5); // 30 degrees per hour + minute adjustment
        const minuteAngle = minutes * 6; // 6 degrees per minute

        document.querySelector('.hour-hand').style.transform = `translateX(-50%) rotate(${hourAngle}deg)`;
        document.querySelector('.minute-hand').style.transform = `translateX(-50%) rotate(${minuteAngle}deg)`;
    }

    // Update clock immediately and then every minute
    updateClock();
    setInterval(updateClock, 60000);

    // The second hand animation runs continuously via CSS
</script>
</body> </html>
Updated files
v1
@andronov04
Create HTML/CSS of an analog clock showing ${time}. Include numbers (or numerals) if you wish, and have a CSS animated second hand