|
| 1 | +<!DOCTYPE html> |
| 2 | +<html lang="en"> |
| 3 | + <head> |
| 4 | + <meta charset="UTF-8" /> |
| 5 | + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| 6 | + <script src="/lib/gsap.min.js"></script> |
| 7 | + <script src="/lib/MorphSVGPlugin.min.js"></script> |
| 8 | + <link rel="icon" href="/assets/icon.png" /> |
| 9 | + <title>Day 50/100</title> |
| 10 | + </head> |
| 11 | + <body> |
| 12 | + <main> |
| 13 | + <svg class="mode-button" id="mode-button" viewBox="0 0 20 20"> |
| 14 | + <path |
| 15 | + id="icon" |
| 16 | + d="M10.18.59v.72h2.22c-.73-.28-1.47-.52-2.22-.72ZM10.18,2.31v.84h5.15c-.09-.3-.19-.58-.29-.84h-4.85ZM10.18,4.42v.84h7.03c-.05-.28-.1-.56-.16-.84h-6.87ZM10.18,6.53v.84h8.81c-.02-.29-.05-.57-.08-.84h-8.73ZM10.18,8.65v.84h8.86c0-.28-.01-.56-.03-.84h-8.83ZM10.18,10.75v.84h8.83c.01-.28.02-.56.03-.84h-8.86ZM10.18,12.86v.84h8.73c.03-.28.06-.56.08-.84h-8.81ZM10.18,14.97v.84h6.87c.06-.27.11-.55.16-.84h-7.03ZM10.18,17.22v.84h4.85c.11-.27.21-.55.29-.84h-5.15ZM10.18,19.06v.72c.75-.2,1.5-.44,2.22-.72h-2.22ZM10.18,20.37c5.63,0,10.19-4.56,10.19-10.18S15.81,0,10.18,0,0,4.56,0,10.18s4.56,10.18,10.18,10.18ZM10.18,18.13c-4.39,0-7.95-3.55-7.95-7.95s3.55-7.95,7.95-7.95,7.95,3.55,7.95,7.95-3.56,7.95-7.95,7.95Z" |
| 17 | + /> |
| 18 | + </svg> |
| 19 | + </main> |
| 20 | + |
| 21 | + <style> |
| 22 | + :root { |
| 23 | + --primary-color: #000; |
| 24 | + --background-color: #fff; |
| 25 | + } |
| 26 | + |
| 27 | + [data-theme="dark"] { |
| 28 | + --primary-color: #fff; |
| 29 | + --background-color: #000; |
| 30 | + } |
| 31 | + |
| 32 | + body { |
| 33 | + margin: 0; |
| 34 | + overflow: hidden; |
| 35 | + display: flex; |
| 36 | + justify-content: center; |
| 37 | + align-items: center; |
| 38 | + -webkit-tap-highlight-color: transparent; |
| 39 | + width: 100vw; |
| 40 | + height: 100vh; |
| 41 | + background-color: var(--background-color); |
| 42 | + transition: background-color 0.5s ease-in-out; |
| 43 | + } |
| 44 | + |
| 45 | + .mode-button { |
| 46 | + cursor: pointer; |
| 47 | + width: 50px; |
| 48 | + height: 50px; |
| 49 | + overflow: visible; |
| 50 | + } |
| 51 | + |
| 52 | + #icon { |
| 53 | + fill: var(--primary-color); |
| 54 | + transition: fill 0.5s ease-in-out; |
| 55 | + } |
| 56 | + </style> |
| 57 | + |
| 58 | + <script> |
| 59 | + gsap.registerPlugin(MorphSVGPlugin); |
| 60 | + |
| 61 | + const prefersDark = window.matchMedia("(prefers-color-scheme: dark)"); |
| 62 | + prefersDark.addEventListener("change", (e) => { |
| 63 | + if (mode === "auto") { |
| 64 | + document.documentElement.setAttribute( |
| 65 | + "data-theme", |
| 66 | + e.matches ? "dark" : "light" |
| 67 | + ); |
| 68 | + } |
| 69 | + }); |
| 70 | + |
| 71 | + const auto = |
| 72 | + "M10.18.59v.72h2.22c-.73-.28-1.47-.52-2.22-.72ZM10.18,2.31v.84h5.15c-.09-.3-.19-.58-.29-.84h-4.85ZM10.18,4.42v.84h7.03c-.05-.28-.1-.56-.16-.84h-6.87ZM10.18,6.53v.84h8.81c-.02-.29-.05-.57-.08-.84h-8.73ZM10.18,8.65v.84h8.86c0-.28-.01-.56-.03-.84h-8.83ZM10.18,10.75v.84h8.83c.01-.28.02-.56.03-.84h-8.86ZM10.18,12.86v.84h8.73c.03-.28.06-.56.08-.84h-8.81ZM10.18,14.97v.84h6.87c.06-.27.11-.55.16-.84h-7.03ZM10.18,17.22v.84h4.85c.11-.27.21-.55.29-.84h-5.15ZM10.18,19.06v.72c.75-.2,1.5-.44,2.22-.72h-2.22ZM10.18,20.37c5.63,0,10.19-4.56,10.19-10.18S15.81,0,10.18,0,0,4.56,0,10.18s4.56,10.18,10.18,10.18ZM10.18,18.13c-4.39,0-7.95-3.55-7.95-7.95s3.55-7.95,7.95-7.95,7.95,3.55,7.95,7.95-3.56,7.95-7.95,7.95Z"; |
| 73 | + const light = |
| 74 | + "M 9.957 2.317 C 10.591 2.317 11.115 1.799 11.115 1.158 C 11.115 0.514 10.591 0 9.957 0 C 9.313 0 8.798 0.514 8.798 1.158 C 8.798 1.799 9.313 2.317 9.957 2.317 Z M 16.182 4.89 C 16.817 4.89 17.334 4.375 17.334 3.731 C 17.334 3.09 16.817 2.573 16.182 2.573 C 15.538 2.573 15.024 3.09 15.024 3.731 C 15.024 4.375 15.538 4.89 16.182 4.89 Z M 18.755 11.115 C 19.389 11.115 19.907 10.598 19.907 9.957 C 19.907 9.313 19.389 8.798 18.755 8.798 C 18.111 8.798 17.597 9.313 17.597 9.957 C 17.597 10.598 18.111 11.115 18.755 11.115 Z M 16.182 17.341 C 16.817 17.341 17.334 16.823 17.334 16.182 C 17.334 15.538 16.817 15.024 16.182 15.024 C 15.538 15.024 15.024 15.538 15.024 16.182 C 15.024 16.823 15.538 17.341 16.182 17.341 Z M 9.957 19.913 C 10.591 19.913 11.115 19.396 11.115 18.755 C 11.115 18.111 10.591 17.597 9.957 17.597 C 9.313 17.597 8.798 18.111 8.798 18.755 C 8.798 19.396 9.313 19.913 9.957 19.913 Z M 3.731 17.341 C 4.375 17.341 4.89 16.823 4.89 16.182 C 4.89 15.538 4.375 15.024 3.731 15.024 C 3.09 15.024 2.573 15.538 2.573 16.182 C 2.573 16.823 3.09 17.341 3.731 17.341 Z M 1.158 11.115 C 1.799 11.115 2.317 10.598 2.317 9.957 C 2.317 9.313 1.799 8.798 1.158 8.798 C 0.514 8.798 0 9.313 0 9.957 C 0 10.598 0.514 11.115 1.158 11.115 Z M 3.731 4.89 C 4.375 4.89 4.89 4.375 4.89 3.731 C 4.89 3.09 4.375 2.573 3.731 2.573 C 3.09 2.573 2.573 3.09 2.573 3.731 C 2.573 4.375 3.09 4.89 3.731 4.89 Z M 9.957 15.154 C 12.825 15.154 15.154 12.825 15.154 9.957 C 15.154 7.088 12.825 4.753 9.957 4.753 C 7.088 4.753 4.753 7.088 4.753 9.957 C 4.753 12.825 7.088 15.154 9.957 15.154 Z M 9.957 13.111 C 8.21 13.111 6.796 11.701 6.796 9.957 C 6.796 8.21 8.21 6.796 9.957 6.796 C 11.704 6.796 13.111 8.21 13.111 9.957 C 13.111 11.701 11.704 13.111 9.957 13.111 Z"; // Circle |
| 75 | + const dark = |
| 76 | + "M10.2903 19.9209C14.517 19.9209 18.045 17.3867 19.6217 13.9661C20.0655 13.0092 19.4118 12.4354 18.5898 12.7553C17.7895 13.0678 16.5671 13.3177 15.4822 13.3177C9.8992 13.3177 6.71994 10.1384 6.71994 4.54878C6.71994 3.47011 6.9796 2.21745 7.36222 1.30394C7.75101 0.391852 7.09148-0.221504 6.16211 0.186814C2.60656 1.74131 0 5.35634 0 9.62748C0 15.3128 4.61469 19.9209 10.2903 19.9209ZM10.2903 17.8948C5.73402 17.8948 2.02296 14.1935 2.02296 9.62748C2.02296 7.15379 3.22613 5.02509 4.8426 3.6738C4.75602 4.10712 4.7094 4.50539 4.71251 4.9618C4.86156 11.2826 8.73018 15.1605 15.035 15.322C15.4346 15.3251 15.8204 15.2816 16.1529 15.2314C14.7821 16.8115 12.6996 17.8948 10.2903 17.8948Z"; // Square |
| 77 | + |
| 78 | + let mode = "auto"; |
| 79 | + |
| 80 | + document.getElementById("mode-button").onclick = () => { |
| 81 | + mode = mode === "auto" ? "light" : mode === "light" ? "dark" : "auto"; |
| 82 | + gsap.to("#icon", { |
| 83 | + duration: 0.5, |
| 84 | + morphSVG: mode === "auto" ? auto : mode === "light" ? light : dark, |
| 85 | + ease: "power1.inOut", |
| 86 | + }); |
| 87 | + |
| 88 | + if (mode === "auto") { |
| 89 | + document.documentElement.setAttribute( |
| 90 | + "data-theme", |
| 91 | + window.matchMedia("(prefers-color-scheme: dark)").matches |
| 92 | + ? "dark" |
| 93 | + : "light" |
| 94 | + ); |
| 95 | + } else { |
| 96 | + document.documentElement.setAttribute( |
| 97 | + "data-theme", |
| 98 | + mode === "dark" ? "dark" : "light" |
| 99 | + ); |
| 100 | + } |
| 101 | + }; |
| 102 | + </script> |
| 103 | + </body> |
| 104 | +</html> |
0 commit comments