Last active
February 2, 2026 19:31
-
-
Save kyledoesdev/5cf825185dd50ecf6e8c4293bf761c5d to your computer and use it in GitHub Desktop.
the clock script I found and use for archiving on my stream.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Stream Clock</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| @keyframes gradientAnimation { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| body { | |
| display: flex; | |
| background: transparent; | |
| } | |
| #widget { | |
| font-family: 'Inter', system-ui, sans-serif; | |
| letter-spacing: 0.5px; | |
| color: #18181b; | |
| background: linear-gradient(45deg, rgba(207, 120, 224, 1) 25%, rgba(100, 249, 179, 1)); | |
| background-size: 400% 400%; | |
| animation: gradientAnimation 20s linear infinite; | |
| border-radius: 12px; | |
| padding: 14px 24px; | |
| box-shadow: 0 4px 20px rgba(207, 120, 224, 0.4); | |
| text-align: center; | |
| } | |
| .date { | |
| font-size: 16px; | |
| color: black; | |
| margin-bottom: 4px; | |
| } | |
| .time { | |
| font-size: 36px; | |
| color: black; | |
| } | |
| .divider { | |
| height: 1px; | |
| background: rgba(24, 24, 27, 0.2); | |
| margin: 8px 0; | |
| } | |
| .links { | |
| display: flex; | |
| justify-content: center; | |
| gap: 20px; | |
| font-size: 14px; | |
| font-weight: 500; | |
| } | |
| .link { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| color: rgba(24, 24, 27, 0.8); | |
| } | |
| .link svg { | |
| width: 16px; | |
| height: 16px; | |
| opacity: 0.7; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="widget"> | |
| <div class="date"></div> | |
| <div class="time"></div> | |
| <div class="divider"></div> | |
| <div class="links"> | |
| <span class="link"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg> | |
| kyledoes.dev | |
| </span> | |
| <span class="link"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="5.5" cy="17.5" r="2.5"/><circle cx="17.5" cy="15.5" r="2.5"/><path d="M8 17V5l12-2v12"/></svg> | |
| songrank.dev | |
| </span> | |
| </div> | |
| </div> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script> | |
| <script> | |
| const dateEl = document.querySelector('.date'); | |
| const timeEl = document.querySelector('.time'); | |
| function updateClock() { | |
| dateEl.textContent = moment().format('dddd, MMMM D, YYYY'); | |
| timeEl.textContent = moment().format('h:mm:ss A'); | |
| } | |
| updateClock(); | |
| setInterval(updateClock, 1000); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment