Created
December 24, 2023 21:28
-
-
Save AlcibiadesCleinias/21368e0204f35342fd1f178d5645fa9d to your computer and use it in GitHub Desktop.
Obsidian AI - clock
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 lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Simple Clock</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| @keyframes rotate { | |
| 100% { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="flex flex-col items-center justify-center min-h-screen bg-gray-100"> | |
| <div id="clock" class="relative w-64 h-64 flex items-center justify-center bg-white rounded-full shadow-lg"> | |
| <div id="second-hand" class="absolute w-0.5 h-32 bg-red-600 rounded-full" style="bottom: 50%; transform-origin: bottom;"></div> | |
| <!-- Rendering clock ticks --> | |
| <div class="absolute w-2 h-8 bg-black" style="transform: translate(-50%, -50%) rotate(0deg); top: 0%; left: 50%;"></div> | |
| <div class="absolute w-2 h-8 bg-black" style="transform: translate(-50%, -50%) rotate(90deg); right: 0%; top: 50%;"></div> | |
| <div class="absolute w-2 h-8 bg-black" style="transform: translate(-50%, -50%) rotate(180deg); bottom: 0%; left: 50%;"></div> | |
| <div class="absolute w-2 h-8 bg-black" style="transform: translate(-50%, -50%) rotate(270deg); left: 0%; top: 50%;"></div> | |
| </div> | |
| <div class="flex space-x-4 mt-8"> | |
| <button | |
| class="px-6 py-3 rounded bg-green-400 text-white font-semibold shadow-lg focus:outline-none hover:bg-green-500" | |
| onclick="startClock()" | |
| > | |
| Start | |
| </button> | |
| <button | |
| class="px-6 py-3 rounded bg-red-400 text-white font-semibold shadow-lg focus:outline-none hover:bg-red-500" | |
| onclick="stopClock()" | |
| > | |
| Stop | |
| </button> | |
| </div> | |
| <script> | |
| // Initial state | |
| let clockInterval = null; | |
| // Start clock function | |
| function startClock() { | |
| const secondHand = document.getElementById('second-hand'); | |
| if (clockInterval !== null) { | |
| clearInterval(clockInterval); // Clear any existing intervals to prevent duplicates | |
| } | |
| secondHand.style.animation = 'none'; // Reset animation | |
| setTimeout(() => { | |
| secondHand.style.animation = 'rotate 60s linear infinite'; | |
| }, 10); // Trigger reflow then start | |
| clockInterval = setInterval(() => {}, 1000); // Dummy interval just to keep track of running state | |
| } | |
| // Stop clock function | |
| function stopClock() { | |
| const secondHand = document.getElementById('second-hand'); | |
| clearInterval(clockInterval); | |
| clockInterval = null; | |
| secondHand.style.animationPlayState = 'paused'; | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment