| <!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"> |
| |
| <div class="clock-face bg-white rounded-full shadow-xl relative" style="width: 300px; height: 300px;"> |
| |
| <div class="clock-decoration"></div> |
| |
| |
| <div class="clock-center"></div> |
| |
| |
| <div class="hour-hand" id="hour-hand"></div> |
| <div class="minute-hand" id="minute-hand"></div> |
| <div class="second-hand" id="second-hand"></div> |
| |
| |
| <div class="absolute inset-0"> |
| |
| <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> |
| |
| |
| <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> |
| |
| |
| <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(); |
| |
| |
| const hours = now.getHours(); |
| const twelveHourFormat = hours % 12 || 12; |
| const minutes = now.getMinutes(); |
| const seconds = now.getSeconds(); |
| const milliseconds = now.getMilliseconds(); |
| |
| |
| 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); |
| } |
| |
| |
| const hourAngle = (twelveHourFormat * 30) + (minutes * 0.5); |
| const minuteAngle = (minutes * 6) + (seconds * 0.1); |
| const secondAngle = (seconds * 6) + (milliseconds * 0.006); |
| |
| |
| 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)`; |
| |
| |
| 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}`; |
| |
| |
| const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; |
| document.getElementById('date-display').textContent = now.toLocaleDateString('en-US', options); |
| } |
| |
| |
| updateClock(); |
| setInterval(updateClock, 50); |
| |
| |
| 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> |
