| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Modern Clock</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap'); |
| .clock-container { |
| perspective: 1000px; |
| } |
| .clock-face { |
| transition: all 0.5s ease; |
| transform-style: preserve-3d; |
| } |
| .clock-face:hover { |
| transform: rotateY(10deg) rotateX(5deg); |
| } |
| .time-segment { |
| text-shadow: 0 0 10px rgba(59, 130, 246, 0.7); |
| } |
| .colon { |
| animation: pulse 1s infinite; |
| } |
| @keyframes pulse { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.5; } |
| } |
| </style> |
| </head> |
| <body class="bg-gradient-to-br from-gray-900 to-blue-900 min-h-screen flex items-center justify-center"> |
| <div class="clock-container" data-aos="zoom-in"> |
| <div class="clock-face bg-gray-800 bg-opacity-50 backdrop-filter backdrop-blur-lg rounded-2xl p-8 shadow-2xl border border-blue-500 border-opacity-30"> |
| <div class="flex flex-col items-center"> |
| <h1 class="text-blue-400 font-bold text-xl mb-6 flex items-center"> |
| <i data-feather="clock" class="mr-2"></i> DIGITAL CLOCK |
| </h1> |
| <div class="flex items-center"> |
| <div class="time-segment text-6xl md:text-8xl font-bold font-orbitron text-blue-300"> |
| <span id="hours">00</span> |
| </div> |
| <div class="colon text-6xl md:text-8xl font-bold text-blue-400 mx-2">:</div> |
| <div class="time-segment text-6xl md:text-8xl font-bold font-orbitron text-blue-300"> |
| <span id="minutes">00</span> |
| </div> |
| <div class="colon text-6xl md:text-8xl font-bold text-blue-400 mx-2">:</div> |
| <div class="time-segment text-6xl md:text-8xl font-bold font-orbitron text-blue-300"> |
| <span id="seconds">00</span> |
| </div> |
| </div> |
| <div class="mt-6 text-blue-200 font-medium flex items-center"> |
| <i data-feather="calendar" class="mr-2"></i> |
| <span id="date" class="text-lg"></span> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| function updateClock() { |
| const now = new Date(); |
| const hours = String(now.getHours()).padStart(2, '0'); |
| const minutes = String(now.getMinutes()).padStart(2, '0'); |
| const seconds = String(now.getSeconds()).padStart(2, '0'); |
| |
| document.getElementById('hours').textContent = hours; |
| document.getElementById('minutes').textContent = minutes; |
| document.getElementById('seconds').textContent = seconds; |
| |
| const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; |
| document.getElementById('date').textContent = now.toLocaleDateString('en-US', options); |
| } |
| |
| setInterval(updateClock, 1000); |
| updateClock(); |
| </script> |
| <script>AOS.init();</script> |
| <script>feather.replace();</script> |
| </body> |
| </html> |
|
|
