Autoría | Ultima modificación | Ver Log |
<?php
$this->headStyle()->captureStart();
echo <<<CSS
.full-screen {
background-color: #fbfaf1;
width: 100vw;
height: 100vh;
color: white;
font-family: 'Arial Black';
text-align: center;
}
.container {
padding-top: 4em;
width: 50%;
display: block;
margin: 0 auto;
}
.error-num {
font-size: 8em;
color: #0860bf;
}
.eye {
background: #0860bf;
border-radius: 50%;
display: inline-block;
height: 100px;
position: relative;
width: 100px;
&::after {
background: #000;
border-radius: 50%;
bottom: 56.1px;
content: ' ';
height: 33px;
position: absolute;
right: 33px;
width: 33px;
}
}
.italic {
font-style: italic;
}
p {
margin-bottom: 4em;
}
a {
text-decoration: none;
text-transform: uppercase;
}
CSS;
$this->headStyle()->captureEnd();
$this->inlineScript()->captureStart();
echo <<<JS
jQuery( document ).ready(function( $ ) {
$(".full-screen").mousemove(function(event) {
var eye = $(".eye");
var x = (eye.offset().left) + (eye.width() / 2);
var y = (eye.offset().top) + (eye.height() / 2);
var rad = Math.atan2(event.pageX - x, event.pageY - y);
var rot = (rad * (180 / Math.PI) * -1) + 180;
eye.css({
'-webkit-transform': 'rotate(' + rot + 'deg)',
'-moz-transform': 'rotate(' + rot + 'deg)',
'-ms-transform': 'rotate(' + rot + 'deg)',
'transform': 'rotate(' + rot + 'deg)'
});
});
});
JS;
$this->inlineScript()->captureEnd();
?>
<div class="full-screen">
<div class='container'>
<p class="sub-text">
<strong>
Error 500
</strong>
<br>
Algo fue mal. Por favor, vuelve al tu área personal
</p>
<a href="<?php echo $this->url('home') ?>">Volver</a>
</div>
</div>