-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1 lines (1 loc) · 8.96 KB
/
index.html
1
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>rgb.li</title><meta name="description" content="RGB Light"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="manifest" href="manifest.json"><link rel="icon" href="favicon.ico"><link rel="apple-touch-icon" sizes="180x180" href="/img/touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="/img/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/img/favicon-16x16.png"><style>body{font-family:sans-serif;background-color:#000;margin:0;padding:0;width:100%;touch-action:pan-x pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.container{margin:auto;text-align:center}#colors{width:100%;display:flex;flex-wrap:wrap}.color{flex:1 0 20%;outline:0;-webkit-tap-highlight-color:transparent}.color:after{content:'';display:block;padding-bottom:100%}#fullScreenColor{position:fixed;width:100vw;height:100vh;-ms-interpolation-mode:nearest-neighbor;image-rendering:-moz-crisp-edges;image-rendering:pixelated}.fadeIn{opacity:0;-webkit-animation:fadeIn ease-in 1;animation:fadeIn ease-in 1;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-duration:.2s;animation-duration:.2s}@-webkit-keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}body.noscript{width:100%;background-color:#fff}.noscript{--zoomAnimation:0.5s}.noscript .fadeAnimation{-webkit-animation:fadeIn ease-in;animation:fadeIn ease-in;-webkit-animation-duration:.5s;animation-duration:.5s}.noscript .colorSwitch input{visibility:hidden;position:fixed;top:-100px}.noscript .noscriptColor{position:fixed;z-index:1;cursor:pointer;transition:var(--zoomAnimation)}.noscript .noscriptColor:before{position:fixed;content:"";height:25%;width:20%;transition:var(--zoomAnimation)}.noscript input:checked+.noscriptColor{z-index:300}.noscript input:checked+.noscriptColor:before{position:fixed;border-radius:100vw;height:200vh;width:200vw;top:-50vh;left:-50vw;z-index:420}.noscript .color1{-webkit-animation-delay:0s;animation-delay:0s}.noscript .color1:before{background-color:#00bfff;top:0;left:0}.noscript .color2{-webkit-animation-delay:.1s;animation-delay:.1s}.noscript .color2:before{background-color:#adff2f;top:0;left:20%}.noscript .color3{-webkit-animation-delay:.2s;animation-delay:.2s}.noscript .color3:before{background-color:#daa520;top:0;left:40%}.noscript .color4{-webkit-animation-delay:.3s;animation-delay:.3s}.noscript .color4:before{background-color:#ff0;top:0;left:60%}.noscript .color5{-webkit-animation-delay:.4s;animation-delay:.4s}.noscript .color5:before{background-color:#2f4f4f;top:0;left:80%}.noscript .color6{-webkit-animation-delay:.5s;animation-delay:.5s}.noscript .color6:before{background-color:#f0f;top:25%;left:0}.noscript .color7{-webkit-animation-delay:.6s;animation-delay:.6s}.noscript .color7:before{background-color:#0ff;top:25%;left:20%}.noscript .color8{-webkit-animation-delay:.7s;animation-delay:.7s}.noscript .color8:before{background-color:grey;top:25%;left:40%}.noscript .color9{-webkit-animation-delay:.8s;animation-delay:.8s}.noscript .color9:before{background-color:#0f0;top:25%;left:60%}.noscript .color10{-webkit-animation-delay:.9s;animation-delay:.9s}.noscript .color10:before{background-color:maroon;top:25%;left:80%}.noscript .color11{-webkit-animation-delay:1s;animation-delay:1s}.noscript .color11:before{background-color:#6495ed;top:50%;left:0}.noscript .color12{-webkit-animation-delay:1.1s;animation-delay:1.1s}.noscript .color12:before{background-color:#7cfc00;top:50%;left:20%}.noscript .color13{-webkit-animation-delay:1.2s;animation-delay:1.2s}.noscript .color13:before{background-color:salmon;top:50%;left:40%}.noscript .color14{-webkit-animation-delay:1.3s;animation-delay:1.3s}.noscript .color14:before{background-color:#7b68ee;top:50%;left:60%}.noscript .color15{-webkit-animation-delay:1.4s;animation-delay:1.4s}.noscript .color15:before{background-color:teal;top:50%;left:80%}.noscript .color16{-webkit-animation-delay:1.5s;animation-delay:1.5s}.noscript .color16:before{background-color:#000;top:75%;left:0}.noscript .color17{-webkit-animation-delay:1.6s;animation-delay:1.6s}.noscript .color17:before{background-color:purple;top:75%;left:20%}.noscript .color18{-webkit-animation-delay:1.7s;animation-delay:1.7s}.noscript .color18:before{background-color:orchid;top:75%;left:40%}.noscript .color19{-webkit-animation-delay:1.8s;animation-delay:1.8s}.noscript .color19:before{background-color:#ff1493;top:75%;left:60%}.noscript .color20{-webkit-animation-delay:1.9s;animation-delay:1.9s}.noscript .color20:before{background-color:#fff;top:75%;left:80%}@-webkit-keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}</style></head><body class="noscript"><script>document.body.classList.remove("noscript")</script><div id="colors"></div><noscript><label class="colorSwitch"><input type="checkbox"><span class="noscriptColor color1 fadeAnimation"></span></label> <label class="colorSwitch"><input type="checkbox"><span class="noscriptColor color2 fadeAnimation"></span></label> <label class="colorSwitch"><input type="checkbox"><span class="noscriptColor color3 fadeAnimation"></span></label> <label class="colorSwitch"><input type="checkbox"><span class="noscriptColor color4 fadeAnimation"></span></label> <label class="colorSwitch"><input type="checkbox"><span class="noscriptColor color5 fadeAnimation"></span></label> <label class="colorSwitch"><input type="checkbox"><span class="noscriptColor color6 fadeAnimation"></span></label> <label class="colorSwitch"><input type="checkbox"><span class="noscriptColor color7 fadeAnimation"></span></label> <label class="colorSwitch"><input type="checkbox"><span class="noscriptColor color8 fadeAnimation"></span></label> <label class="colorSwitch"><input type="checkbox"><span class="noscriptColor color9 fadeAnimation"></span></label> <label class="colorSwitch"><input type="checkbox"><span class="noscriptColor color10 fadeAnimation"></span></label> <label class="colorSwitch"><input type="checkbox"><span class="noscriptColor color11 fadeAnimation"></span></label> <label class="colorSwitch"><input type="checkbox"><span class="noscriptColor color12 fadeAnimation"></span></label> <label class="colorSwitch"><input type="checkbox"><span class="noscriptColor color13 fadeAnimation"></span></label> <label class="colorSwitch"><input type="checkbox"><span class="noscriptColor color14 fadeAnimation"></span></label> <label class="colorSwitch"><input type="checkbox"><span class="noscriptColor color15 fadeAnimation"></span></label> <label class="colorSwitch"><input type="checkbox"><span class="noscriptColor color16 fadeAnimation"></span></label> <label class="colorSwitch"><input type="checkbox"><span class="noscriptColor color17 fadeAnimation"></span></label> <label class="colorSwitch"><input type="checkbox"><span class="noscriptColor color18 fadeAnimation"></span></label> <label class="colorSwitch"><input type="checkbox"><span class="noscriptColor color19 fadeAnimation"></span></label> <label class="colorSwitch"><input type="checkbox"><span class="noscriptColor color20 fadeAnimation"></span></label></noscript><script>(function(){var e,n,t,r,o,i,u,l,c,d,a,s,f,w,h,v;f=function(){return n(),window.addEventListener("scroll",d),window.addEventListener("popstate",function(n){return w()})},l=function(){return f(),o()},h=[],e=0,u=function(){return null!==document.getElementById("fullScreenColor")},w=function(){return u()?i():o("#")},i=function(){return t("/.")},a=function(n){if(0===h.length||1===e)return e=0,h.push(n),window.history.pushState(n,n,n)},c=function(n){var t;return t="#"+n.target.getAttribute("href").split("#")[1],e=1,r(t)},d=function(){if(document.getElementById("colors").offsetHeight-window.scrollY<2*window.innerHeight)return n()},o=function(){var n,t;if((t=window.location.href).includes("#"))return n="#"+t.split("#")[1],v(n)},s=function(n){if("hex"===(n=n||"hex"))return"#"+(16777216+16777215*Math.random()).toString(16).substr(1,6)},n=function(){var n,t,e,r,o;for(e=0,200,t=new Array,n=document.getElementById("colors"),o=[];e<200;)t[e]=document.createElement("div"),t[e].style.backgroundColor=r=s("hex"),t[e].className="color",t[e].setAttribute("href",""+r),t[e].addEventListener("click",c),n.appendChild(t[e]),o.push(e++);return o},v=function(n){var t;return/^#[0-9A-F]{6}$/i.test(n)||/^#([0-9A-F]{3}){1,2}$/i.test(n)?r(n):(t=window.location.href,window.history.replaceState(null,null,t.split("#")[0]))},r=function(n){var t;return t='<div id="fullScreenColor" class="fadeIn" style="background-color: '+n+';"><div/>',document.body.insertAdjacentHTML("afterbegin",t),document.body.style.overflow="hidden",a(n)},t=function(n){return document.getElementById("fullScreenColor").remove(),document.body.style.overflow=null,window.history.replaceState(null,null,window.location.pathname)},l(),window.onload=function(){"use strict";"serviceWorker"in navigator&&navigator.serviceWorker.register("./sw.js").then(function(n){}).catch(function(n){})}}).call(this)</script></body></html>