Classic Vintage Time - MeggiTools
Run
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Classic Vintage Time</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #fff; font-family: 'Times New Roman', Times, serif; margin: 0; color: #000; } .clock-container { text-align: center; padding: 20px; border: 3px solid #000; border-radius: 15px; background: #f5f5f5; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .time { font-size: 3em; margin: 0; } .date { font-size: 1.2em; margin-top: 10px; } </style> </head> <body> <div class="clock-container"> <div class="time" id="time">--:--:--</div> <div class="date" id="date">-- -- ----</div> </div> <script> function updateTime() { 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'); const day = String(now.getDate()).padStart(2, '0'); const month = String(now.getMonth() + 1).padStart(2, '0'); const year = now.getFullYear(); document.getElementById('time').textContent = `${hours}:${minutes}:${seconds}`; document.getElementById('date').textContent = `${day}-${month}-${year}`; } setInterval(updateTime, 1000); updateTime(); </script> </body> </html>