diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 228 |
1 files changed, 228 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 0000000..7102a45 --- /dev/null +++ b/index.html @@ -0,0 +1,228 @@ +<!DOCTYPE html> +<html lang="en"> + +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Burn-In Removal</title> + <style> + @keyframes cfadeout { + 0% { + opacity: 1; + } + + 100% { + opacity: 0; + } + } + + @keyframes animhor { + 0% { + left: 100%; + top: 0%; + width: 51%; + height: 100%; + } + + 100% { + left: -50%; + top: 0%; + width: 51%; + height: 100%; + } + } + + @keyframes animvert { + 0% { + left: 0%; + top: 100%; + width: 100%; + height: 21%; + opacity: 1; + } + + 50% { + opacity: 0.7; + } + + 100% { + left: 0%; + top: -50%; + width: 100%; + height: 51%; + opacity: 1; + } + } + + @keyframes ctr { + + /* fun interesting effects can be done here */ + /* 0% { + transform: translate(-50%, -50%) rotate(0deg); + } + + 100% { + transform: translate(-50%, -50%) rotate(360deg); + } */ + 0% { + transform: translate(-50%, -50%) scale(1); + } + + 30% { + transform: translate(-50%, -50%) scale(1.4); + } + + 50% { + transform: translate(-50%, -50%) scale(0.7); + } + + 80% { + transform: translate(-50%, -50%) scale(1.1); + } + + 100% { + transform: translate(-50%, -50%) scale(1); + } + } + + .ctr { + position: fixed; + top: 50vh; + left: 50vw; + width: 100vw; + height: 100vh; + display: flex; + align-items: center; + justify-content: center; + pointer-events: none; + transform: translate(-50%, -50%); + } + + .ctr:not(.no-anim) { + animation: ctr; + animation-timing-function: ease-in-out; + animation-duration: 7s; + animation-iteration-count: infinite; + animation-delay: 3s; + } + + .inner { + position: relative; + width: 200vw; + height: 200vh; + } + + .hor { + animation: animhor; + --animation-length: 12s; + } + + .vert { + animation: animvert; + --animation-length: 7s; + } + + .r, + .g, + .b { + position: absolute; + animation-timing-function: linear; + animation-duration: var(--animation-length); + animation-iteration-count: infinite; + pointer-events: none; + } + + .g { + /* change to -0.66 if you don't want the initial buildup */ + animation-delay: calc(0.33 * var(--animation-length)); + } + + .b { + /* change to -0.33 if you don't want the initial buildup */ + animation-delay: calc(0.66 * var(--animation-length)); + } + + /* this is to ensure the background looks fine until the animation has done its rounds */ + @keyframes htmlrootbg { + 0% { + background: #1a1a1a; + } + + 50% { + background: #1a1a1a; + } + + 100% { + background: #800; + } + } + + html { + animation: htmlrootbg; + animation-duration: 3s; + animation-timing-function: ease-in-out; + animation-iteration-count: 1; + background: #a00; + color: #dedede; + display: flex; + font-family: Nunito, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + } + + .cft { + display: none; + } + + + input:checked+.cfadeout { + animation: cfadeout; + animation-timing-function: linear; + animation-duration: 1s; + animation-iteration-count: 1; + opacity: 0; + pointer-events: none; + } + + .fullscreenprompt { + position: fixed; + top: 50vh; + left: 50vw; + padding: 24px; + background: #0a0a0a; + transform: translate(-50%, -50%); + max-width: min(calc(100vw - 2rem), max-content); + text-align: center; + border-radius: 1rem; + z-index: 9; + } + </style> + <!-- In JS-enabled environments, attempt to ensure frames always render --> + <script> + ((fn) => fn(fn))((self) => requestAnimationFrame(() => self)) + </script> +</head> + +<body + onclick="(document.documentElement??document.rootElement).requestFullscreen?.({navigationUI:'hide'}).then(v=>{const c=document.head.querySelector('style');const c2=document.createElement('style');c2.innerHTML=c.innerHTML;c.remove();setTimeout(()=>document.head.appendChild(c2),10)}) ?? console.error('No requestFullscreen promise')"> + <input type="checkbox" id="cfadeoutt" class="cft" autocomplete="off"> + <label class="cfadeout fullscreenprompt" for="cfadeoutt"> + Please <b>fullscreen this page</b> for best results.<br /> + If JS is available, this can be done by clicking the screen - otherwise, press F11 and reload.<br /> + Click this to dismiss + </label> + <div class="ctr no-anim"> + <div class="inner"> + <div class="r hor" style="background-color: #f33;"></div> + <div class="g hor" style="background-color: #3f3;"></div> + <div class="b hor" style="background-color: #33f;"></div> + </div> + </div> + <div class="ctr"> + <div class="inner"> + <div class="r vert" style="background-color: #c00;"></div> + <div class="g vert" style="background-color: #0c0;"></div> + <div class="b vert" style="background-color: #00c;"></div> + </div> + </div> +</body> + +</html>
\ No newline at end of file |