[{"id":213,"created_at":"2024-04-10T00:56:57.076324+00:00","html":"

\r\n

\r\n \r\n

\r\n

\r\n","css":"body {\r\n margin: 0;\r\n}\r\n\r\n.cover {\r\n position: absolute;\r\n top: 0;\r\n width: 100vw;\r\n height: 100vh;\r\n background: radial-gradient(circle, #004e92, #000428);\r\n z-index: -1;\r\n animation-name: darken;\r\n animation-duration: 5s;\r\n animation-fill-mode: forwards;\r\n animation-delay: 2s;\r\n}\r\n\r\n.scene {\r\n position: relative;\r\n width: 100vw;\r\n height: 100vh;\r\n background: radial-gradient(circle, #004e92, #000428);\r\n overflow: hidden;\r\n z-index: 1;\r\n}\r\n\r\n.sun {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n width: 200px;\r\n height: 200px;\r\n border-radius: 50% 48% 52%;\r\n background: radial-gradient(circle, #ffdb4d, #ff9900);\r\n box-shadow: 0 0 60px rgba(255, 217, 0, 0.8);\r\n animation-name: whiten;\r\n animation-duration: 3s;\r\n animation-delay: 4s;\r\n animation-fill-mode: forwards;\r\n}\r\n\r\n.moon {\r\n position: absolute;\r\n top: 50%;\r\n left: calc(50% - 225px);\r\n transform: translate(-50%, -50%);\r\n width: 200px;\r\n height: 200px;\r\n border-radius: 50%;\r\n background: black;\r\n transition: left 5s ease;\r\n}\r\n\r\n.restartBtn {\r\n position: absolute;\r\n bottom: 20px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n background: #ffdb4d;\r\n color: #000428;\r\n border: none;\r\n padding: 10px 20px;\r\n border-radius: 5px;\r\n font-size: 16px;\r\n font-weight: bold;\r\n cursor: pointer;\r\n box-shadow: 0 0 10px rgba(255, 217, 0, 0.8);\r\n transition: background-color 0.3s ease;\r\n}\r\n\r\n.restartBtn:hover {\r\n background-color: #ff9900;\r\n}\r\n\r\n@keyframes darken {\r\n from {\r\n filter: brightness(100%);\r\n }\r\n to {\r\n filter: brightness(10%);\r\n }\r\n}\r\n\r\n@keyframes whiten {\r\n 0% {\r\n background: radial-gradient(circle at 50% 50%, #ffdb4d 0%, #ff9900 100%);\r\n scale: 1;\r\n filter: blur(0);\r\n translate: 0 0;\r\n }\r\n 12.5% {\r\n background: radial-gradient(circle at 50% 50%, #ffe78f 0%, #ffca66 100%);\r\n }\r\n 25% {\r\n background: radial-gradient(circle at 50% 50%, #ffed9d 0%, #ffc966 100%);\r\n }\r\n 37.5% {\r\n background: radial-gradient(circle at 50% 50%, #fff3b9 0%, #ffdbaa 100%);\r\n }\r\n 50% {\r\n background: radial-gradient(circle at 50% 50%, #fff6cc 0%, #ffe0b2 100%);\r\n }\r\n 62.5% {\r\n background: radial-gradient(circle at 50% 50%, #fff9df 0%, #ffe6c2 100%);\r\n }\r\n 75% {\r\n background: radial-gradient(circle at 50% 50%, #fffbeb 0%, #ffedd9 100%);\r\n }\r\n 87.5% {\r\n background: radial-gradient(circle at 50% 50%, #fffdf6 0%, #fff5e9 100%);\r\n scale: 1.05;\r\n filter: blur(5px);\r\n translate: 3px 6px;\r\n }\r\n 100% {\r\n background: radial-gradient(circle at 50% 50%, white 0%, white 100%);\r\n scale: 1.05;\r\n filter: blur(5px);\r\n translate: 3px 6px;\r\n }\r\n}\r\n","js":"const moon = document.querySelector(\".moon\");\r\nconst sun = document.querySelector(\".sun\");\r\nconst cover = document.querySelector(\".cover\");\r\nconst restartBtn = document.querySelector(\".restartBtn\");\r\n\r\n// Start the eclipse animation\r\nsetTimeout(() => {\r\n moon.style.left = \"calc(50%)\";\r\n}, 1000); // Delay of 1 second before starting the animation\r\n\r\n// Restart the eclipse animation when the button is clicked\r\nrestartBtn.addEventListener(\"click\", () => {\r\n // Reset the styles\r\n moon.style.left = \"calc(50% - 225px)\";\r\n moon.style.transition = \"null\";\r\n sun.style.animation = \"none\";\r\n\r\n sun.style.background = \"radial-gradient(circle, #ffdb4d, #ff9900)\";\r\n cover.style.animation = \"none\";\r\n cover.offsetHeight; /* trigger reflow */\r\n cover.style.animation = null;\r\n\r\n // Restart the animation after a short delay\r\n setTimeout(() => {\r\n moon.style.left = \"calc(50%)\";\r\n moon.style.transition = \"left 5s ease\";\r\n sun.style.animation = \"whiten 3s forwards 4s\";\r\n\r\n // sun.style.background = 'radial-gradient(circle at 50% 50%, white 0%, white 100%)';\r\n\r\n cover.style.animation = \"darken 5s forwards\";\r\n }, 100);\r\n});\r\n","user_id":"eb85392e-2ebd-4695-9297-d8ef016b3ea4","project_key":"0aLGjr","description":"Eclipse 2024 With HTML/CSS 💛","plugins":[{"css":{"tailwind":false,"bootstrap":false,"fontawesome":false,"materialicons":false,"googlefonts":false,"bulma":false},"js":{"animejs":false,"gsap":false,"motionone":false,"threejs":false,"velocity":false,"popmotion":false,"scrollreveal":false}}],"public":true,"config":{"tags": [], "babelActive": false, "cssProcessor": false, "userImportedJS": [], "typescriptActive": false},"tags":[],"hide_js":false,"hide_css":false,"messages":[],"view":[{"views":681}],"profiles":{"username":"this"}}]