index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Beautiful Analog Clock</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .clock-face {
            background: radial-gradient(circle at center, #f9f9f9, #e0e0e0);
            box-shadow: 
                0 0 0 8px rgba(255,255,255,0.8),
                inset 0 0 15px rgba(0,0,0,0.1),
                0 15px 30px rgba(0,0,0,0.15);
            border: 1px solid rgba(255,255,255,0.5);
        }
        
        .clock-center {
            width: 16px;
            height: 16px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            background: radial-gradient(circle at 30% 30%, #fff, #c0392b);
            border: 2px solid #2c3e50;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
            z-index: 10;
        }
        
        .hour-hand, .minute-hand, .second-hand {
            transform-origin: 50% 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            border-radius: 10px;
            transition: transform 0.5s cubic-bezier(0.4, 2.3, 0.3, 1);
        }
        
        .hour-hand {
            width: 8px;
            height: 30%;
            margin-top: -30%;
            margin-left: -4px;
            background: linear-gradient(to top, #2c3e50, #34495e);
            box-shadow: 0 0 5px rgba(0,0,0,0.3);
            border-radius: 8px;
            z-index: 3;
        }
        
        .minute-hand {
            width: 5px;
            height: 40%;
            margin-top: -40%;
            margin-left: -2.5px;
            background: linear-gradient(to top, #34495e, #7f8c8d);
            box-shadow: 0 0 5px rgba(0,0,0,0.2);
            border-radius: 8px;
            z-index: 4;
        }
        
        .second-hand {
            width: 2px;
            height: 45%;
            margin-top: -45%;
            margin-left: -1px;
            background: linear-gradient(to top, #e74c3c, #c0392b);
            box-shadow: 0 0 5px rgba(231, 76, 60, 0.5);
            z-index: 5;
        }
        
        .tick {
            position: absolute;
            width: 100%;
            height: 100%;
            text-align: center;
            font-weight: bold;
            color: #333;
        }
        
        .tick::after {
            content: '';
            position: absolute;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            width: 3px;
            height: 15px;
            background: linear-gradient(to bottom, #2c3e50, #7f8c8d);
            border-radius: 3px;
            box-shadow: 0 0 3px rgba(0,0,0,0.2);
        }
        
        .tick-number {
            position: absolute;
            width: 30px;
            height: 30px;
            text-align: center;
            font-weight: bold;
            color: #333;
            font-size: 1.2rem;
            transform-origin: center center;
            line-height: 30px;
            left: 50%;
            top: 50%;
            margin-left: -15px;
            margin-top: -15px;
            display: flex;
            align-items: center;
            justify-content: center;
            transform: translate(0, -5px);
        }
        
        @keyframes rotate {
            100% {
                transform: rotate(360deg);
            }
        }
        
        .clock-decoration {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: radial-gradient(circle at center, transparent 60%, rgba(255,255,255,0.1) 60.5%, transparent 61%);
        }
    </style>
</head>
<body class="bg-gradient-to-br from-gray-100 to-gray-300 min-h-screen flex items-center justify-center p-4">
    <div class="relative">
        <!-- Clock container -->
        <div class="clock-face bg-white rounded-full shadow-xl relative" style="width: 300px; height: 300px;">
            <!-- Decorative elements -->
            <div class="clock-decoration"></div>
            
            <!-- Clock center -->
            <div class="clock-center"></div>
            
            <!-- Clock hands -->
            <div class="hour-hand" id="hour-hand"></div>
            <div class="minute-hand" id="minute-hand"></div>
            <div class="second-hand" id="second-hand"></div>
            
            <!-- Clock ticks and numbers -->
            <div class="absolute inset-0">
                <!-- Numbers -->
                <div class="tick-number" style="transform: rotate(30deg) translate(0, -110px) rotate(-30deg); transform-origin: center center;">1</div>
                <div class="tick-number" style="transform: rotate(60deg) translate(0, -110px) rotate(-60deg); transform-origin: center center;">2</div>
                <div class="tick-number" style="transform: rotate(90deg) translate(0, -110px) rotate(-90deg); transform-origin: center center;">3</div>
                <div class="tick-number" style="transform: rotate(120deg) translate(0, -110px) rotate(-120deg); transform-origin: center center;">4</div>
                <div class="tick-number" style="transform: rotate(150deg) translate(0, -110px) rotate(-150deg); transform-origin: center center;">5</div>
                <div class="tick-number" style="transform: rotate(180deg) translate(0, -110px) rotate(-180deg); transform-origin: center center;">6</div>
                <div class="tick-number" style="transform: rotate(210deg) translate(0, -110px) rotate(-210deg); transform-origin: center center;">7</div>
                <div class="tick-number" style="transform: rotate(240deg) translate(0, -110px) rotate(-240deg); transform-origin: center center;">8</div>
                <div class="tick-number" style="transform: rotate(270deg) translate(0, -110px) rotate(-270deg); transform-origin: center center;">9</div>
                <div class="tick-number" style="transform: rotate(300deg) translate(0, -110px) rotate(-300deg); transform-origin: center center;">10</div>
                <div class="tick-number" style="transform: rotate(330deg) translate(0, -110px) rotate(-330deg); transform-origin: center center;">11</div>
                <div class="tick-number" style="transform: rotate(0deg) translate(0, -110px) rotate(0deg); transform-origin: center center;">12</div>
                
                <!-- Ticks -->
                <div class="tick" style="transform: rotate(0deg);"></div>
                <div class="tick" style="transform: rotate(30deg);"></div>
                <div class="tick" style="transform: rotate(60deg);"></div>
                <div class="tick" style="transform: rotate(90deg);"></div>
                <div class="tick" style="transform: rotate(120deg);"></div>
                <div class="tick" style="transform: rotate(150deg);"></div>
                <div class="tick" style="transform: rotate(180deg);"></div>
                <div class="tick" style="transform: rotate(210deg);"></div>
                <div class="tick" style="transform: rotate(240deg);"></div>
                <div class="tick" style="transform: rotate(270deg);"></div>
                <div class="tick" style="transform: rotate(300deg);"></div>
                <div class="tick" style="transform: rotate(330deg);"></div>
            </div>
        </div>
        
        <!-- Digital time display -->
        <div class="mt-8 text-center">
            <div class="text-4xl font-light tracking-wider text-gray-700" id="digital-time">00:00:00</div>
            <div class="text-lg font-medium text-gray-500 mt-3 tracking-wide" id="date-display">Monday, January 1, 2023</div>
        </div>
    </div>
    
    <script>
        function updateClock() {
            const now = new Date();
            
            // Get time components
            const hours = now.getHours();
            const twelveHourFormat = hours % 12 || 12; // Convert 0 to 12 for 12-hour format
            const minutes = now.getMinutes();
            const seconds = now.getSeconds();
            const milliseconds = now.getMilliseconds();

            // Announce the hour at the top of each hour
            if (minutes === 0 && seconds === 0) {
                const speech = new SpeechSynthesisUtterance();
                speech.text = `It's ${twelveHourFormat} o'clock`;
                speech.volume = 0.8;
                speech.rate = 0.9;
                speech.pitch = 1;
                window.speechSynthesis.speak(speech);
            }
            
            // Calculate angles for clock hands (use twelveHourFormat for display)
            const hourAngle = (twelveHourFormat * 30) + (minutes * 0.5);
            const minuteAngle = (minutes * 6) + (seconds * 0.1);
            const secondAngle = (seconds * 6) + (milliseconds * 0.006);
            
            // Update clock hands
            document.getElementById('hour-hand').style.transform = `rotate(${hourAngle}deg)`;
            document.getElementById('minute-hand').style.transform = `rotate(${minuteAngle}deg)`;
            document.getElementById('second-hand').style.transform = `rotate(${secondAngle}deg)`;
            
            // Update digital time
            const formattedHours = String(now.getHours()).padStart(2, '0');
            const formattedMinutes = String(minutes).padStart(2, '0');
            const formattedSeconds = String(seconds).padStart(2, '0');
            document.getElementById('digital-time').textContent = `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
            
            // Update date display
            const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
            document.getElementById('date-display').textContent = now.toLocaleDateString('en-US', options);
        }
        
        // Update clock immediately and then every 50ms for smooth animation
        updateClock();
        setInterval(updateClock, 50);
        
        // Add some interactive effects
        const clock = document.querySelector('.clock-face');
        clock.addEventListener('mouseenter', () => {
            clock.classList.add('transform', 'scale-105');
            clock.classList.remove('shadow-xl');
            clock.classList.add('shadow-2xl');
        });
        
        clock.addEventListener('mouseleave', () => {
            clock.classList.remove('transform', 'scale-105');
            clock.classList.add('shadow-xl');
            clock.classList.remove('shadow-2xl');
        });
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ionel/clock" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>