You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
280 lines
8.3 KiB
280 lines
8.3 KiB
<!DOCTYPE html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
|
|
<title>404</title>
|
|
<script type="text/javascript" src='/static/js/jquery.min.js'></script>
|
|
<script src="/static/js/theater.min.js"></script>
|
|
<link rel="stylesheet" href="/static/css/bootstrap.min.css" type="text/css" />
|
|
<script type="text/javascript" src='/static/js/bootstrap.min.js'></script>
|
|
<link rel="shortcut icon" href="/static/img/favicon.ico" type="image/x-icon">
|
|
<link rel="icon" href="/static/img/favicon.ico" type="image/x-icon">
|
|
<meta name="description" content="{{ NAME }}" />
|
|
<meta property="og:title" content="{{ NAME }}" />
|
|
<meta property="og:description" content="{{ NAME }}" />
|
|
<meta property="og:image" content="{{ DOMAIN }}static/img/3818cc0ec1.png" />
|
|
<style>
|
|
@font-face{font-family:'FiraSans';src:url('/static/fonts/FiraSans-Heavy.otf');}
|
|
@font-face{font-family:'Cutive';src:url('/static/fonts/cour.ttf');}
|
|
.header__video-wrapp {
|
|
position:absolute;
|
|
top:0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
overflow: hidden;
|
|
|
|
}
|
|
.header__video-box {
|
|
position: absolute;
|
|
top:0;
|
|
left: 50%;
|
|
height: 100%;
|
|
}
|
|
.header__video {
|
|
display: inline-block;
|
|
transform: translateX(-50%);
|
|
min-height: 100%;
|
|
min-width: 100%;
|
|
}
|
|
.videoWrapper {
|
|
position: relative;
|
|
padding-bottom: 56.25%;
|
|
padding-top: 25px;
|
|
height: 0;
|
|
}
|
|
.videoWrapper iframe {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
<script>
|
|
$(document).ready(function(){
|
|
if ($(window).width() > 500) {
|
|
$('.header__video-box').fadeIn('slow');
|
|
$('body').css('background', '#000');
|
|
setTimeout(obves, 3000)
|
|
} else {
|
|
$('img').css('left', 30).css('top', 50).fadeIn('slow');
|
|
$('[name=error]').css('left', 40).css('bottom', 50).fadeIn('slow');
|
|
$('[name=dialog]').css('top', '30%').fadeIn('slow');
|
|
$('.actor__content').css('width', 270).css('font-size', 15).css('font-weight', 'bold').css('text-align', 'center').css('background', '#000');
|
|
$('.actor__prefix').hide();
|
|
|
|
}
|
|
|
|
});
|
|
window.onresize = function(){
|
|
obves()
|
|
};
|
|
function obves(){
|
|
var left = $('video.header__video').offset().left;
|
|
if (left < 0){
|
|
left = 30
|
|
}
|
|
if ($(window).width() > 500) {
|
|
$('img').css('left', left + 50).fadeIn('slow', function () {
|
|
$('[name=dialog]').css('left', left + 50);
|
|
$('[name=dialog]').css('top', $('img').offset().top + 100).fadeIn('slow');
|
|
$('[name=error]').css('left', left + 50);
|
|
$('[name=error]').css('top', $('video.header__video').height() - ($('[name=error]').height() + 100)).fadeIn('slow')
|
|
}
|
|
);
|
|
} else {
|
|
$('img').css('left', 30).css('top', 50).fadeIn('slow');
|
|
$('[name=error]').css('left', 40).css('bottom', 50).fadeIn('slow');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
</head>
|
|
<body style="text-align: center;background-image: url('/static/img/404.gif');background-size: cover;background-position: center;" class="scene">
|
|
<div style="width: 100%;text-align: center;">
|
|
<a href="/"><img src="/static/img/logowhite.png" style="position: absolute; top: 100px;z-index: 3000;display: none;"></a>
|
|
</div>
|
|
<div class="header__video-wrapp">
|
|
<div class="header__video-box" style="display: none;">
|
|
<video class="header__video" id='header__video' autoplay preload loop muted>
|
|
<source src='/static/video/404.webm' type="video/webm">
|
|
<source src="/static/video/404.ogv" type="video/ogg"/>
|
|
<source src='/static/video/404.mp4' type="video/mp4">
|
|
</video>
|
|
</div>
|
|
</div>
|
|
|
|
<div name="error" style="z-index: 3000;
|
|
position: absolute;margin: 0;display: none;">
|
|
<h1 style="font-size: 150px;color:#fff;font-family: FiraSans;letter-spacing: -10px;margin: 0;line-height: 100px;text-align: left;">404</h1>
|
|
<span style="font-size: 20px; color: #f8b539;font-weight: bold;
|
|
float: left;padding-left: 10px;">{% if request.GET.error %}{{ request.GET.error }}{% else %}error{% endif %}</span>
|
|
</div>
|
|
<script>
|
|
|
|
|
|
|
|
/*
|
|
* TheaterJS, a typing effect mimicking human behavior.
|
|
*
|
|
* Github repository:
|
|
* https://github.com/Zhouzi/TheaterJS
|
|
*
|
|
*/
|
|
|
|
var theater = theaterJS();
|
|
|
|
theater
|
|
.on('type:start, erase:start', function () {
|
|
theater.getCurrentActor().$element.classList.add('actor__content--typing')
|
|
})
|
|
.on('type:end, erase:end', function () {
|
|
theater.getCurrentActor().$element.classList.remove('actor__content--typing')
|
|
})
|
|
.on('type:start, erase:start', function () {
|
|
|
|
});
|
|
start_time = get_start_time();
|
|
function get_start_time(){
|
|
if ($(window).width() > 500) {
|
|
return 4500
|
|
} else {
|
|
return 1000
|
|
}
|
|
}
|
|
theater
|
|
.addActor('vader', { speed: 1, accuracy: 0.6 })
|
|
.addActor('luke')
|
|
.addScene('vader:', start_time)
|
|
.addScene('vader:Ты попал на эту страницу', 100)
|
|
.addScene('vader:в очень странный период моей жизни...', 800)
|
|
.addScene('luke:Что происходит?!', 800)
|
|
.addScene('vader:Ты сломал наш сервис', 400)
|
|
.addScene('luke:И что теперь делать?', 600)
|
|
.addScene('luke:Когда все починится?', 400)
|
|
.addScene('vader:Мы уже решаем эту проблему', 1600)
|
|
.addScene('vader:Ей конкретно занимается <b>Николай</b>', 1600)
|
|
.addScene('vader:Ты можешь перейти на <a href="/" target="__blank">главную страницу</a>', 1000)
|
|
.addScene('luke:Что мне там делать?', 600)
|
|
.addScene('vader:Можешь и там что-нибудь сломать', 600)
|
|
.addScene('vader:Тут сломал и там сломай.', 1600)
|
|
.addScene('vader:Если проблема долго не решится', 800)
|
|
.addScene('vader:Можешь написать на support@' + location.host, 1600)
|
|
.addScene('luke:Хорошо, спасибо', 600)
|
|
.addScene('vader:Если что -> <a href="/">главная страница</a>', 800)
|
|
</script>
|
|
<style>
|
|
*,
|
|
*:before,
|
|
*:after {
|
|
box-sizing: inherit;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
html {
|
|
font-size: 14px;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: "Cutive", serif;
|
|
font-size: 1rem;
|
|
line-height: 1.4;
|
|
color: #222;
|
|
background-color: #ededed;
|
|
-webkit-transition: background-color 150ms ease-out, color 150ms ease-out;
|
|
transition: background-color 150ms ease-out, color 150ms ease-out;
|
|
}
|
|
|
|
.dark {
|
|
color: #ededed;
|
|
background-color: #222;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
border-bottom: 1px solid;
|
|
}
|
|
a:focus, a:hover {
|
|
box-shadow: inset 0 -8px 0 #c92b2b;
|
|
}
|
|
|
|
p {
|
|
opacity: .6;
|
|
margin: 0 0 .6rem 0;
|
|
-webkit-transition: opacity 300ms ease-out;
|
|
transition: opacity 300ms ease-out;
|
|
}
|
|
p:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.scene {
|
|
padding: 6rem 2rem;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.actor {
|
|
font-size: 1.8rem;
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
margin-bottom: 2rem;
|
|
color: #fff;
|
|
}
|
|
.actor:last-of-type {
|
|
margin-bottom: 6rem;
|
|
}
|
|
|
|
.actor__content {
|
|
-webkit-box-flex: 1;
|
|
-webkit-flex-grow: 1;
|
|
-ms-flex-positive: 1;
|
|
flex-grow: 1;
|
|
width: 600px;
|
|
text-align: left;
|
|
}
|
|
.actor__prefix{
|
|
font-weight: bold;
|
|
font-size: 25px;
|
|
margin-right: 10px;
|
|
}
|
|
@-webkit-keyframes blink {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes blink {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.actor__content--typing::after {
|
|
content: '|';
|
|
-webkit-animation: blink 500ms infinite;
|
|
animation: blink 500ms infinite;
|
|
}
|
|
|
|
</style>
|
|
</body>
|
|
</html> |