Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>California and London Time</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        .container {
            display: flex;
            gap: 40px;
        }
        .clock {
            text-align: center;
        }
        .analog-clock {
            width: 200px;
            height: 200px;
            border: 2px solid #333;
            border-radius: 50%;
            position: relative;
            margin: 20px auto;
        }
        .hand {
            position: absolute;
            bottom: 50%;
            left: 50%;
            transform-origin: bottom;
            background-color: #333;
        }
        .hour-hand {
            width: 6px;
            height: 60px;
            margin-left: -3px;
        }
        .minute-hand {
            width: 4px;
            height: 80px;
            margin-left: -2px;
        }
        .second-hand {
            width: 2px;
            height: 90px;
            margin-left: -1px;
            background-color: #ff0000;
        }
        .digital-time {
            font-size: 24px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="clock">
            <h2>California Time</h2>
            <div class="analog-clock" id="ca-clock">
                <div class="hand hour-hand" id="ca-hour-hand"></div>
                <div class="hand minute-hand" id="ca-minute-hand"></div>
                <div class="hand second-hand" id="ca-second-hand"></div>
            </div>
            <div class="digital-time" id="ca-digital"></div>
        </div>
        <div class="clock">
            <h2>London Time</h2>
            <div class="analog-clock" id="london-clock">
                <div class="hand hour-hand" id="london-hour-hand"></div>
                <div class="hand minute-hand" id="london-minute-hand"></div>
                <div class="hand second-hand" id="london-second-hand"></div>
            </div>
            <div class="digital-time" id="london-digital"></div>
        </div>
    </div>

    <script>
        function updateClocks() {
            const now = new Date();
            
            // California Time (Los Angeles)
            const caNow = new Date(now.toLocaleString("en-US", {timeZone: "America/Los_Angeles"}));
            updateClock(caNow, "ca");
            
            // London Time
            const londonNow = new Date(now.toLocaleString("en-US", {timeZone: "Europe/London"}));
            updateClock(londonNow, "london");
        }

        function updateClock(time, prefix) {
            const hours = time.getHours();
            const minutes = time.getMinutes();
            const seconds = time.getSeconds();

            // Update digital clock
            document.getElementById(`${prefix}-digital`).textContent = 
                `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;

            // Update analog clock
            const hourDeg = (hours % 12 + minutes / 60) * 30;
            const minuteDeg = (minutes + seconds / 60) * 6;
            const secondDeg = seconds * 6;

            document.getElementById(`${prefix}-hour-hand`).style.transform = `rotate(${hourDeg}deg)`;
            document.getElementById(`${prefix}-minute-hand`).style.transform = `rotate(${minuteDeg}deg)`;
            document.getElementById(`${prefix}-second-hand`).style.transform = `rotate(${secondDeg}deg)`;
        }

        setInterval(updateClocks, 1000);
        updateClocks(); // Initial update
    </script>
</body>
</html>
Editor is loading...