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)){va
|
|||
|
|
<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>
|