149 lines
12 KiB
HTML
149 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="theme-color" content="#000000" />
|
||
<meta http-equiv="Refresh" content="10">
|
||
<title>michu-it - offline</title>
|
||
<canvas id="canvas"></canvas>
|
||
<style>
|
||
@import url(https://fonts.googleapis.com/css?family=Share+Tech+Mono);
|
||
html, body {
|
||
background:#777;
|
||
margin:0;
|
||
}
|
||
svg {
|
||
width: 100%;
|
||
height: 100%;
|
||
max-width: 340px;
|
||
display: block;
|
||
position: absolute;
|
||
top: 45%;
|
||
left: 50%;
|
||
transform: translateX(-50%) translateY(-50%);
|
||
overflow: hidden;
|
||
margin: 0 auto;
|
||
}
|
||
#canvas {
|
||
position:fixed;
|
||
background:#777;
|
||
}
|
||
</style>
|
||
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> -->
|
||
<script> !function(){function a(a,b){return[].slice.call((b||document).querySelectorAll(a))}if(window.addEventListener){var b=window.StyleFix={link:function(a){try{if("stylesheet"!==a.rel||a.hasAttribute("data-noprefix"))return}catch(a){return}var g,c=a.href||a.getAttribute("data-href"),d=c.replace(/[^\/]+$/,""),e=a.parentNode,f=new XMLHttpRequest;f.onreadystatechange=function(){4===f.readyState&&g()},g=function(){var c=f.responseText;if(c&&a.parentNode&&(!f.status||f.status<400||f.status>600)){if(c=b.fix(c,!0,a),d){c=c.replace(/url\(\s*?((?:"|')?)(.+?)\1\s*?\)/gi,function(a,b,c){return/^([a-z]{3,10}:|\/|#)/i.test(c)?a:'url("'+d+c+'")'});var g=d.replace(/([\\\^\$*+[\]?{}.=!:(|)])/g,"\\$1");c=c.replace(RegExp("\\b(behavior:\\s*?url\\('?\"?)"+g,"gi"),"$1")}var h=document.createElement("style");h.textContent=c,h.media=a.media,h.disabled=a.disabled,h.setAttribute("data-href",a.getAttribute("href")),e.insertBefore(h,a),e.removeChild(a),h.media=a.media}};try{f.open("GET",c),f.send(null)}catch(a){"undefined"!=typeof XDomainRequest&&(f=new XDomainRequest,f.onerror=f.onprogress=function(){},f.onload=g,f.open("GET",c),f.send(null))}a.setAttribute("data-inprogress","")},styleElement:function(a){if(!a.hasAttribute("data-noprefix")){var c=a.disabled;a.textContent=b.fix(a.textContent,!0,a),a.disabled=c}},styleAttribute:function(a){var c=a.getAttribute("style");c=b.fix(c,!1,a),a.setAttribute("style",c)},process:function(){a('link[rel="stylesheet"]:not([data-inprogress])').forEach(StyleFix.link),a("style").forEach(StyleFix.styleElement),a("[style]").forEach(StyleFix.styleAttribute)},register:function(a,c){(b.fixers=b.fixers||[]).splice(void 0===c?b.fixers.length:c,0,a)},fix:function(a,c,d){for(var e=0;e<b.fixers.length;e++)a=b.fixers[e](a,c,d)||a;return a},camelCase:function(a){return a.replace(/-([a-z])/g,function(a,b){return b.toUpperCase()}).replace("-","")},deCamelCase:function(a){return a.replace(/[A-Z]/g,function(a){return"-"+a.toLowerCase()})}};!function(){setTimeout(function(){a('link[rel="stylesheet"]').forEach(StyleFix.link)},10),document.addEventListener("DOMContentLoaded",StyleFix.process,!1)}()}}(),function(a){function b(a,b,d,e,f){if(a=c[a],a.length){var g=RegExp(b+"("+a.join("|")+")"+d,"gi");f=f.replace(g,e)}return f}if(window.StyleFix&&window.getComputedStyle){var c=window.PrefixFree={prefixCSS:function(a,d,e){var f=c.prefix;if(c.functions.indexOf("linear-gradient")>-1&&(a=a.replace(/(\s|:|,)(repeating-)?linear-gradient\(\s*(-?\d*\.?\d*)deg/gi,function(a,b,c,d){return b+(c||"")+"linear-gradient("+(90-d)+"deg"})),a=b("functions","(\\s|:|,)","\\s*\\(","$1"+f+"$2(",a),a=b("keywords","(\\s|:)","(\\s|;|\\}|$)","$1"+f+"$2$3",a),a=b("properties","(^|\\{|\\s|;)","\\s*:","$1"+f+"$2:",a),c.properties.length){var g=RegExp("\\b("+c.properties.join("|")+")(?!:)","gi");a=b("valueProperties","\\b",":(.+?);",function(a){return a.replace(g,f+"$1")},a)}return d&&(a=b("selectors","","\\b",c.prefixSelector,a),a=b("atrules","@","\\b","@"+f+"$1",a)),a=a.replace(RegExp("-"+f,"g"),"-"),a=a.replace(/-\*-(?=[a-z]+)/gi,c.prefix)},property:function(a){return(c.properties.indexOf(a)?c.prefix:"")+a},value:function(a,d){return a=b("functions","(^|\\s|,)","\\s*\\(","$1"+c.prefix+"$2(",a),a=b("keywords","(^|\\s)","(\\s|$)","$1"+c.prefix+"$2$3",a)},prefixSelector:function(a){return a.replace(/^:{1,2}/,function(a){return a+c.prefix})},prefixProperty:function(a,b){var d=c.prefix+a;return b?StyleFix.camelCase(d):d}};!function(){var a={},b=[],e=getComputedStyle(document.documentElement,null),f=document.createElement("div").style,g=function(c){if("-"===c.charAt(0)){b.push(c);var d=c.split("-"),e=d[1];for(a[e]=++a[e]||1;d.length>3;){d.pop();var f=d.join("-");h(f)&&b.indexOf(f)===-1&&b.push(f)}}},h=function(a){return StyleFix.camelCase(a)in f};if(e.length>0)for(var i=0;i<e.length;i++)g(e[i]);else for(var j in e)g(StyleFix.deCamelCase(j));var k={uses:0};for(var l in a){var m=a[l];k.uses<m&&(k={prefix:l,uses:m})}c.prefix="-"+k.prefix+"-",c.Prefix=StyleFix.camelCase(c.prefix),c.properties=[];for(var i=0;i<b.length;i++){var j=b[i];if(0===j.indexOf(c.prefix)){var n=j.slice(c.prefix.length);h(n)||c.properties.push(n)}}"Ms"==c.Prefix&&!("transform"in f)&&!("MsTransform"in f)&&"msTransform"in f&&c.properties.push("transform","transform-origin"),c.properties.sort()}(),function(){function a(a,b){return e[b]="",e[b]=a,!!e[b]}var b={"linear-gradient":{property:"backgroundImage",params:"red, teal"},calc:{property:"width",params:"1px + 5%"},element:{property:"backgroundImage",params:"#foo"},"cross-fade":{property:"backgroundImage",params:"url(a.png), url(b.png), 50%"}};b["repeating-linear-gradient"]=b["repeating-radial-gradient"]=b["radial-gradient"]=b["linear-gradient"];var d={initial:"color","zoom-in":"cursor","zoom-out":"cursor",box:"display",flexbox:"display","inline-flexbox":"display",flex:"display","inline-flex":"display"};c.functions=[],c.keywords=[];var e=document.createElement("div").style;for(var f in b){var g=b[f],h=g.property,i=f+"("+g.params+")";!a(i,h)&&a(c.prefix+i,h)&&c.functions.push(f)}for(var j in d){var h=d[j];!a(j,h)&&a(c.prefix+j,h)&&c.keywords.push(j)}}(),function(){function b(a){return f.textContent=a+"{}",!!f.sheet.cssRules.length}var d={":read-only":null,":read-write":null,":any-link":null,"::selection":null},e={keyframes:"name",viewport:null,document:'regexp(".")'};c.selectors=[],c.atrules=[];var f=a.appendChild(document.createElement("style"));for(var g in d){var h=g+(d[g]?"("+d[g]+")":"");!b(h)&&b(c.prefixSelector(h))&&c.selectors.push(g)}for(var i in e){var h=i+" "+(e[i]||"");!b("@"+h)&&b("@"+c.prefix+h)&&c.atrules.push(i)}a.removeChild(f)}(),c.valueProperties=["transition","transition-property"],a.className+=" "+c.prefix,StyleFix.register(c.prefixCSS)}}(document.documentElement); </script>
|
||
<script>
|
||
var canvas = document.getElementById('canvas'),
|
||
ctx = canvas.getContext('2d');
|
||
|
||
function resize() {
|
||
canvas.width = window.innerWidth;
|
||
canvas.height = window.innerHeight;
|
||
}
|
||
resize();
|
||
window.onresize = resize;
|
||
|
||
function noise(ctx) {
|
||
|
||
var w = ctx.canvas.width,
|
||
h = ctx.canvas.height,
|
||
idata = ctx.createImageData(w, h),
|
||
buffer32 = new Uint32Array(idata.data.buffer),
|
||
len = buffer32.length,
|
||
i = 0;
|
||
|
||
for(; i < len;)
|
||
buffer32[i++] = ((255 * Math.random())|0) << 24;
|
||
|
||
ctx.putImageData(idata, 0, 0);
|
||
}
|
||
|
||
var toggle = true;
|
||
|
||
// added toggle to get 30 FPS instead of 60 FPS
|
||
(function loop() {
|
||
toggle = !toggle;
|
||
if (toggle) {
|
||
requestAnimationFrame(loop);
|
||
return;
|
||
}
|
||
noise(ctx);
|
||
requestAnimationFrame(loop);
|
||
})();
|
||
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||
width="800px" height="100px" viewBox="0 0 800 100">
|
||
<style type="text/css">
|
||
<![CDATA[
|
||
text {
|
||
filter: url(#filter);
|
||
fill: white;
|
||
font-family: 'Share Tech Mono', sans-serif;
|
||
font-size: 100px;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
]]>
|
||
</style>
|
||
<defs>
|
||
<filter id="filter">
|
||
<feFlood flood-color="black" result="black" />
|
||
<feFlood flood-color="red" result="flood1" />
|
||
<feFlood flood-color="limegreen" result="flood2" />
|
||
<feOffset in="SourceGraphic" dx="3" dy="0" result="off1a"/>
|
||
<feOffset in="SourceGraphic" dx="2" dy="0" result="off1b"/>
|
||
<feOffset in="SourceGraphic" dx="-3" dy="0" result="off2a"/>
|
||
<feOffset in="SourceGraphic" dx="-2" dy="0" result="off2b"/>
|
||
<feComposite in="flood1" in2="off1a" operator="in" result="comp1" />
|
||
<feComposite in="flood2" in2="off2a" operator="in" result="comp2" />
|
||
<feMerge x="0" width="100%" result="merge1">
|
||
<feMergeNode in = "black" />
|
||
<feMergeNode in = "comp1" />
|
||
<feMergeNode in = "off1b" />
|
||
<animate
|
||
attributeName="y"
|
||
id = "y"
|
||
dur ="4s"
|
||
values = '104px; 104px; 30px; 105px; 30px; 2px; 2px; 50px; 40px; 105px; 105px; 20px; 6<>px; 40px; 104px; 40px; 70px; 10px; 30px; 104px; 102px'
|
||
keyTimes = '0; 0.362; 0.368; 0.421; 0.440; 0.477; 0.518; 0.564; 0.593; 0.613; 0.644; 0.693; 0.721; 0.736; 0.772; 0.818; 0.844; 0.894; 0.925; 0.939; 1'
|
||
repeatCount = "indefinite" />
|
||
<animate attributeName="height"
|
||
id = "h"
|
||
dur ="4s"
|
||
values = '10px; 0px; 10px; 30px; 50px; 0px; 10px; 0px; 0px; 0px; 10px; 50px; 40px; 0px; 0px; 0px; 40px; 30px; 10px; 0px; 50px'
|
||
keyTimes = '0; 0.362; 0.368; 0.421; 0.440; 0.477; 0.518; 0.564; 0.593; 0.613; 0.644; 0.693; 0.721; 0.736; 0.772; 0.818; 0.844; 0.894; 0.925; 0.939; 1'
|
||
repeatCount = "indefinite" />
|
||
</feMerge>
|
||
<feMerge x="0" width="100%" y="60px" height="65px" result="merge2">
|
||
<feMergeNode in = "black" />
|
||
<feMergeNode in = "comp2" />
|
||
<feMergeNode in = "off2b" />
|
||
<animate attributeName="y"
|
||
id = "y"
|
||
dur ="4s"
|
||
values = '103px; 104px; 69px; 53px; 42px; 104px; 78px; 89px; 96px; 100px; 67px; 50px; 96px; 66px; 88px; 42px; 13px; 100px; 100px; 104px;'
|
||
keyTimes = '0; 0.055; 0.100; 0.125; 0.159; 0.182; 0.202; 0.236; 0.268; 0.326; 0.357; 0.400; 0.408; 0.461; 0.493; 0.513; 0.548; 0.577; 0.613; 1'
|
||
repeatCount = "indefinite" />
|
||
<animate attributeName="height"
|
||
id = "h"
|
||
dur = "4s"
|
||
values = '0px; 0px; 0px; 16px; 16px; 12px; 12px; 0px; 0px; 5px; 10px; 22px; 33px; 11px; 0px; 0px; 10px'
|
||
keyTimes = '0; 0.055; 0.100; 0.125; 0.159; 0.182; 0.202; 0.236; 0.268; 0.326; 0.357; 0.400; 0.408; 0.461; 0.493; 0.513; 1'
|
||
repeatCount = "indefinite" />
|
||
</feMerge>
|
||
<feMerge>
|
||
<feMergeNode in="SourceGraphic" />
|
||
<feMergeNode in="merge1" />
|
||
<feMergeNode in="merge2" />
|
||
</feMerge>
|
||
</filter>
|
||
</defs>
|
||
<g>
|
||
<text x="0" y="100">System OFFLINE.</text>
|
||
</g>
|
||
</svg>
|
||
</body>
|
||
</html>
|