g0dsp33d
/
errorpages-on-acid
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

3 pages done

This commit is contained in:
Barry Batsbakkus 2023-12-19 16:52:51 +01:00
parent b436208407
commit 7e189d6906
7 changed files with 110 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
400.html Normal file
View File

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>400 | Bad request</title>
<meta name="description" content="A 400 error status implies that the request could not be understood by the server due to malformed syntax.">
<meta property="og:title" content="400 | Bad request">
<meta property="og:description" content="A 400 error status implies that the request could not be understood by the server due to malformed syntax.">
</head>
<!--[if lt IE 8]><p class="js-fail text-center animated slideInDown">You are using an outdated browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p><![endif]-->
<noscript class="js-fail text-center animated slideInDown">Javascript required to run this website</noscript>
<link rel="preload" href="./fonts/CheapFire.woff2" as="font" type="font/woff2" crossorigin>
<body class="fire">
<div class="video-overlay"></div>
<div class="frame">
<header class="wrapper">
<div class="bit-1 text-center">
<div class="flame">
<h1><span>Error 400</span></h1>
<h2><span>Bad request</span></h2>
<p class="blazing">The request could not be understood by the server due to malformed syntax. Usually this is because of a error in the http client itself or a plugin/addon/malware loaded in the http client. </p>
</div>
</div>
</header>
<main class="wrapper">
</main>
<footer class="wrapper fixed bottom">
<strong class="left">
<script>document.write('<a class=" blazing" onclick="goBack()" href="' + document.location.hostname + '" title="&larr; BACK TO ' + window.location.hostname + '">&nbsp;&nbsp;<< previous page &nbsp;&nbsp;</a>');</script>
</strong>
<strong class="right"><span class="blazing"><script>document.write(new Date().getFullYear());</script> | errorpages on steroids &trade;</strong>
</footer>
</div>
<script src="js/background-video.js"></script>
<link href="fonts/stylesheet.css" rel="stylesheet">
<link href="css/grid.css" rel="stylesheet">
<link href="css/background-video.css" rel="stylesheet">
<script>new BackgroundVideo({video: [{file: "video/fire.mp4" , formats: ["mp4"]},]});</script>
</body>
</html>

45
css/background-video.css
View File

@ -3,7 +3,6 @@
-moz-box-sizing: border-box;
}
body.fire {
font-family: 'Cheap Fire', sans-serif;
}
@ -14,31 +13,40 @@ body.fire {
}
.flame span {
height: 300px;
height: 600px;
width: 100%;
background-image: url("https://dl.dropbox.com/s/r2s8s2r17wi0xm6/flame.png?dl=0");
background-position: 0 -1000px;
background-image: url("../img/fire3.png");
background-position:0 -2000px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: fire 4s linear infinite;
animation: fire 3s infinite forwards linear;
}
.flame h1 {
.flame h1 { font-size:13vw;}
.flame h2 {font-size:9vw}
.flame h1, .flame h2 {
color: #fff;
font-size: 80px;
text-align: center;
}
.fire p.blazing {
font-size: 155%;
line-height: 150%;
padding: 0 2em;
}
@keyframes fire {
0% {
background-position: 0% -50%;
background-position: 0% -100%;
}
100% {
background-position: 0% -25%;
background-position: 0% 0%;
}
}
.blazing {text-shadow: 0 3px 20px red,0 0 20px red,0 0 10px orange,4px -5px 6px yellow,-4px -10px 10px yellow,0 -10px 30px yellow;animation:2s blazing infinite alternate linear;}
@keyframes blazing { 0%{text-shadow:0 3px 20px red,0 0 20px red,0 0 10px orange,0 0 0 yellow,0 0 5px yellow,-2px -5px 5px yellow,4px -10px 10px yellow}25%{text-shadow:0 3px 20px red,0 0 30px red,0 0 20px orange,0 0 5px yellow,-2px -5px 5px yellow,3px -10px 10px yellow,-4px -15px 20px yellow}50%{text-shadow:0 3px 20px red,0 0 20px red,0 -5px 10px orange,-2px -5px 5px yellow,3px -10px 10px yellow,-4px -15px 20px yellow,2px -20px 30px rgba(255,255,0,.5)}75%{text-shadow:0 3px 20px red,0 0 20px red,0 -5px 10px orange,3px -5px 5px yellow,-4px -10px 10px yellow,2px -20px 30px rgba(255,255,0,.5),0px -25px 40px rgba(255,255,0,0)}100%{text-shadow:0 3px 20px red,0 0 20px red,0 0 10px orange,0 0 0 yellow,0 0 5px yellow,-2px -5px 5px yellow,4px -10px 10px yellow}}
@ -110,6 +118,21 @@ body.windows {
line-height: 200%;
padding:0;
}
.fire h1 {
font-size: 10em;
line-height: 120%;
}
.fire h2 {
font-size: 10vw;
margin-bottom: 1em;
}
.fire p.blazing {
font-size: 140%;
line-height: 160%;
padding: 0;
}
}
@ -168,7 +191,7 @@ img {
.skynet .video-overlay,.skynet-2 .video-overlay{
background: linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.1) 91%);
}
.video-overlay.fens{
background:rgba(0,0,0,.5) url(../video/video-bg-pattern.png) center center repeat;
opacity:.5
background:rgba(0,0,0,.5) url(../img/video-bg-pattern.png) center center repeat;
}

72
fire.html
View File

@ -2,51 +2,43 @@
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>404</title>
<meta name="description" content="A 404 error status implies that the file or page that you're looking for could not be found.">
<meta property="og:title" content="404">
<meta property="og:description" content="A 404 error status implies that the file or page that you're looking for could not be found.">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>400 | Bad request</title>
<meta name="description" content="A 400 error status implies that the request could not be understood by the server due to malformed syntax.">
<meta property="og:title" content="400 | Bad request">
<meta property="og:description" content="A 400 error status implies that the request could not be understood by the server due to malformed syntax.">
</head>
<!--[if lt IE 8]>
<p class="js-fail text-center animated slideInDown">You are using an outdated browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p><![endif]-->
<!--[if lt IE 8]><p class="js-fail text-center animated slideInDown">You are using an outdated browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p><![endif]-->
<noscript class="js-fail text-center animated slideInDown">Javascript required to run this website</noscript>
<link rel="preload" href="./fonts/CheapFire.woff2" as="font" type="font/woff2" crossorigin>
<body class="fire">
<div class="video-overlay"></div>
<div class="frame">
<header class="wrapper">
<div class="bit-1 text-center">
<div class="flame">
<h1><span>Error 500</span></h1>
<h2>Internal server error </h2>
<p>Server meltdown - Please evacuate</p>
</div>
</div>
</header>
<main class="wrapper">
</main>
<footer class="wrapper fixed bottom">
<strong class="left">
<script>document.write('<a class="button btn" onclick="goBack()" href="' + document.location.hostname + '" title="&larr; BACK TO ' + window.location.hostname + '"><< Exit</a>');</script>
</strong>
<strong class="right"><script>document.write(new Date().getFullYear());</script> | errorpages on steroids &trade;</strong>
</footer>
<div class="video-overlay"></div>
<div class="frame">
<header class="wrapper">
<div class="bit-1 text-center">
<div class="flame">
<h1><span>Error 400</span></h1>
<h2><span>Bad request</span></h2>
<p class="blazing">The request could not be understood by the server due to malformed syntax. Usually this is because of a error in the http client itself or a plugin/addon/malware loaded in the http client. </p>
</div>
<script src="js/background-video.js"></script>
<link type="text/css" href="fonts/stylesheet.css" rel="stylesheet" />
<link type="text/css" href="css/grid.css" rel="stylesheet" />
<link type="text/css" href="css/background-video.css" rel="stylesheet" />
<script>
new BackgroundVideo({
video: [{file: "video/fire.mp4" // formats: ["mp4"]
}, ]
});
</script>
</div>
</header>
<main class="wrapper">
</main>
<footer class="wrapper fixed bottom">
<strong class="left">
<script>document.write('<a class=" blazing" onclick="goBack()" href="' + document.location.hostname + '" title="&larr; BACK TO ' + window.location.hostname + '">&nbsp;&nbsp;<< previous page &nbsp;&nbsp;</a>');</script>
</strong>
<strong class="right"><span class="blazing"><script>document.write(new Date().getFullYear());</script> | errorpages on steroids &trade;</strong>
</footer>
</div>
<script src="js/background-video.js"></script>
<link href="fonts/stylesheet.css" rel="stylesheet">
<link href="css/grid.css" rel="stylesheet">
<link href="css/background-video.css" rel="stylesheet">
<script>new BackgroundVideo({video: [{file: "video/fire.mp4" , formats: ["mp4"]},]});</script>
</body>
</html>

BIN
img/fire.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 179 KiB

BIN
img/fire2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 142 KiB

BIN
img/fire3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 MiB

0
video/video-bg-pattern.png → img/video-bg-pattern.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 468 B

After

Width:  |  Height:  |  Size: 468 B