Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Realistic Analog Clock</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| .clock { | |
| width: 300px; | |
| height: 300px; | |
| border-radius: 50%; | |
| position: relative; | |
| background: radial-gradient(circle, #f5f5f5 0%, #e0e0e0 100%); | |
| box-shadow: | |
| inset 0 0 15px rgba(0, 0, 0, 0.1), | |
| 0 20px 30px rgba(0, 0, 0, 0.2), | |
| 0 0 0 4px #333, | |
| 0 0 10px rgba(0, 0, 0, 0.3); | |
| } | |
| .clock::before { | |
| content: ''; | |
| position: absolute; | |
| width: 15px; | |
| height: 15px; | |
| background: #333; | |
| border-radius: 50%; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| z-index: 10; | |
| box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); | |
| } | |
| .hour-marks { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| border-radius: 50%; | |
| } | |
| .hour-mark { | |
| position: absolute; | |
| width: 4px; | |
| height: 15px; | |
| background: #333; | |
| left: 50%; | |
| transform-origin: 50% 150px; | |
| } | |
| .minute-mark { | |
| position: absolute; | |
| width: 2px; | |
| height: 8px; | |
| background: #666; | |
| left: 50%; | |
| transform-origin: 50% 150px; | |
| } | |
| .hand { | |
| position: absolute; | |
| bottom: 50%; | |
| left: 50%; | |
| transform-origin: 50% 100%; | |
| border-radius: 5px; | |
| } | |
| .hour-hand { | |
| width: 8px; | |
| height: 70px; | |
| background: #333; | |
| margin-left: -4px; | |
| box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); | |
| } | |
| .minute-hand { | |
| width: 5px; | |
| height: 100px; | |
| background: #555; | |
| margin-left: -2.5px; | |
| box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); | |
| } | |
| .second-hand { | |
| width: 2px; | |
| height: 120px; | |
| background: #e74c3c; | |
| margin-left: -1px; | |
| box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); | |
| } | |
| .brand { | |
| position: absolute; | |
| top: 40%; | |
| left: 0; | |
| right: 0; | |
| text-align: center; | |
| font-family: 'Arial', sans-serif; | |
| font-size: 14px; | |
| font-weight: bold; | |
| color: #333; | |
| } | |
| .date-display { | |
| position: absolute; | |
| top: 55%; | |
| left: 0; | |
| right: 0; | |
| text-align: center; | |
| font-family: 'Arial', sans-serif; | |
| font-size: 12px; | |
| color: #333; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 min-h-screen flex items-center justify-center"> | |
| <div class="clock"> | |
| <div class="brand">CLASSIC TIME</div> | |
| <div class="date-display" id="date"></div> | |
| <!-- Hour marks --> | |
| <div class="hour-marks"> | |
| <!-- Hour marks (12) --> | |
| <div class="hour-mark" style="transform: rotate(0deg);"></div> | |
| <div class="hour-mark" style="transform: rotate(30deg);"></div> | |
| <div class="hour-mark" style="transform: rotate(60deg);"></div> | |
| <div class="hour-mark" style="transform: rotate(90deg);"></div> | |
| <div class="hour-mark" style="transform: rotate(120deg);"></div> | |
| <div class="hour-mark" style="transform: rotate(150deg);"></div> | |
| <div class="hour-mark" style="transform: rotate(180deg);"></div> | |
| <div class="hour-mark" style="transform: rotate(210deg);"></div> | |
| <div class="hour-mark" style="transform: rotate(240deg);"></div> | |
| <div class="hour-mark" style="transform: rotate(270deg);"></div> | |
| <div class="hour-mark" style="transform: rotate(300deg);"></div> | |
| <div class="hour-mark" style="transform: rotate(330deg);"></div> | |
| <!-- Minute marks (60) --> | |
| <div class="minute-mark" style="transform: rotate(6deg);"></div> | |
| <div class="minute-mark" style="transform: rotate(12deg);"></div> | |
| <div class="minute-mark" style="transform: rotate(18deg);"></div> | |
| <div class="minute-mark" style="transform: rotate(24deg);"></div> | |
| <div class="minute-mark" style="transform: rotate(36deg);"></div> | |
| <div class="minute-mark" style="transform: rotate(42deg);"></div> | |
| <div class="minute-mark" style="transform: rotate(48deg);"></div> | |
| <div class="minute-mark" style="transform: rotate(54deg);"></div> | |
| <div class="minute-mark" style="transform: rotate(66deg);"></div> | |
| <div class="minute-mark" style="transform: rotate(72deg);"></div> | |
| <div class="minute-mark" style="transform: rotate(78deg);"></div> | |
| <div class="minute-mark" style="transform: rotate(84deg);"></div> | |
| <div class="minute-mark" style="transform: rotate(96deg);"></div> | |
| <div class="minute-mark" style="transform: rotate(102deg);"></div> | |
| <div class="minute-mark" style="transform: rotate(108deg);"></div> | |
| <div class="minute-mark" style="transform: rotate(114deg);"></div> | |
| <div class="minute-mark" style="transform: rotate(126deg);"></div> | |
| <div class="minute-mark" style="transform: rotate(132deg);"></div> | |
| <div class="minute-mark" style="transform: rotate(138deg);"></div> | |
| <div class="minute-mark" style="transform: rotate(144deg);"></div> | |
| <div class="minute-mark" style="transform: rotate(156deg);"></div> | |
| <div class="minute-mark" style="transform: rotate(162deg);"></div> | |
| <div class="minute-mark" style="transform: rotate(168deg);"></div> | |
| <div class="minute-mark" style="transform: rotate(174deg);"></div> | |
| <div class="minute-mark" style="transform: rotate(186deg);"></div> | |
| <div class="minute-mark" style="transform: rotate(192deg);"></div> | |
| <div class="minute-mark" style="transform: rotate(198deg);"></div> | |
| <div class="minute-mark" style="transform: rotate(204deg);"></div> | |
| <div class="minute-mark" style="transform: rotate(216deg);"></div> | |
| <div class="minute-mark" style="transform: rotate(222deg);"></div> | |
| <div class="minute-mark" style="transform: rotate(228deg);"></div> | |
| <div class="minute-mark" style="transform: rotate(234deg);"></div> | |
| <div class="minute-mark" style="transform: rotate(246deg);"></div> | |
| <div class="minute-mark" style="transform: rotate(252deg);"></div> | |
| <div class="minute-mark" style="transform: rotate(258deg);"></div> | |
| <div class="minute-mark" style="transform: rotate(264deg);"></div> | |
| <div class="minute-mark" style="transform: rotate(276deg);"></div> | |
| <div class="minute-mark" style="transform: rotate(282deg);"></div> | |
| <div class="minute-mark" style="transform: rotate(288deg);"></div> | |
| <div class="minute-mark" style="transform: rotate(294deg);"></div> | |
| <div class="minute-mark" style="transform: rotate(306deg);"></div> | |
| <div class="minute-mark" style="transform: rotate(312deg);"></div> | |
| <div class="minute-mark" style="transform: rotate(318deg);"></div> | |
| <div class="minute-mark" style="transform: rotate(324deg);"></div> | |
| <div class="minute-mark" style="transform: rotate(336deg);"></div> | |
| <div class="minute-mark" style="transform: rotate(342deg);"></div> | |
| <div class="minute-mark" style="transform: rotate(348deg);"></div> | |
| <div class="minute-mark" style="transform: rotate(354deg);"></div> | |
| </div> | |
| <!-- Clock hands --> | |
| <div class="hand hour-hand" id="hour-hand"></div> | |
| <div class="hand minute-hand" id="minute-hand"></div> | |
| <div class="hand second-hand" id="second-hand"></div> | |
| </div> | |
| <script> | |
| function updateClock() { | |
| const now = new Date(); | |
| const hours = now.getHours() % 12; | |
| const minutes = now.getMinutes(); | |
| const seconds = now.getSeconds(); | |
| const milliseconds = now.getMilliseconds(); | |
| // Calculate angles for each hand with smooth transitions | |
| const hourAngle = (hours * 30) + (minutes * 0.5); | |
| const minuteAngle = (minutes * 6) + (seconds * 0.1); | |
| const secondAngle = (seconds * 6) + (milliseconds * 0.006); | |
| // Apply rotation to 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 date display | |
| const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; | |
| document.getElementById('date').textContent = now.toLocaleDateString(undefined, options); | |
| // Request animation frame for smooth animation | |
| requestAnimationFrame(updateClock); | |
| } | |
| // Start the clock | |
| updateClock(); | |
| </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=leonyuan2001/time" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> | |
| </html> |