Files
wlan-cloud-ucentralsec/wwwassets/404_error.html
2021-07-17 17:41:17 -07:00

70 lines
2.0 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Whoops...</title>
<link rel="stylesheet" href="/wwwassets/404_error.css">
</head>
<body>
<div class="box">
<div class="box__ghost">
<div class="symbol"></div>
<div class="symbol"></div>
<div class="symbol"></div>
<div class="symbol"></div>
<div class="symbol"></div>
<div class="symbol"></div>
<div class="box__ghost-container">
<div class="box__ghost-eyes">
<div class="box__eye-left"></div>
<div class="box__eye-right"></div>
</div>
<div class="box__ghost-bottom">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="box__ghost-shadow"></div>
</div>
<div class="box__description">
<div class="box__description-container">
<div class="box__description-title">Whoops!</div>
<div class="box__description-text">You know computers sometimes go crazy... So we'll just assume one of them got
fed up and refused to help you...
If you get this again, we need to know. We need to let that thing know who's the boss...
</div>
</div>
<!-- <a href="https://codepen.io/diogo_ml_gomes/" target="_blank" class="box__button">Go back</a> -->
</div>
</div>
<script>
//based on https://dribbble.com/shots/3913847-404-page
var pageX = $(document).width();
var pageY = $(document).height();
var mouseY=0;
var mouseX=0;
$(document).mousemove(function( event ) {
//verticalAxis
mouseY = event.pageY;
yAxis = (pageY/2-mouseY)/pageY*300;
//horizontalAxis
mouseX = event.pageX / -pageX;
xAxis = -mouseX * 100 - 100;
$('.box__ghost-eyes').css({ 'transform': 'translate('+ xAxis +'%,-'+ yAxis +'%)' });
//console.log('X: ' + xAxis);
});
</script>
</body>
</html>