Commit 6419b434 authored by Michael's avatar Michael

initial commit

parents
# 404 Error Pages
## Console
Adopted from https://milosophical.me/
## Falling
Adopted from https://codepen.io/ricardpriet/pen/MOKEam
\ No newline at end of file
.condensed,
.condensed-bold {
font-family: 'Open Sans Condensed', tahoma, sans-serif
}
.para,
.paragraph {
text-indent: 0;
margin-bottom: 1em;
text-align: justify
}
.g1 .g2,
.snug {
margin: 0;
outline: 0;
border: 0;
padding: 0
}
@media(max-width:640px) {
#main .para, #main .paragraph, #main p {
text-align: left
}
}
.shadow {
box-shadow: 0 0 3px rgba(0, 0, 0, .8)
}
.no-shadow {
box-shadow: none
}
.box-shadow {
box-shadow: 1px 1px 15px 5px rgba(0, 0, 0, .75)
}
.box-shadow-inset {
box-shadow: 1px 16px 15px -15px rgba(0, 0, 0, .75) inset
}
.text-shadow-engraved {
text-shadow: -1px -1px 0 rgba(0, 0, 0, .3)
}
.text-shadow-engraved-r {
text-shadow: 1px 1px 0 rgba(255, 255, 255, .3)
}
.bubble-shadow {
box-shadow: 5px 5px 30px 10px rgba(0, 0, 0, .75)
}
.fullsize {
width: 100%;
height: 100%
}
.condensed {
font-weight: 400
}
.condensed-bold {
font-weight: 700
}
.limit-width {
max-width: 50em
}
.wide {
max-width: inherit!important;
width: auto!important
}
.arrow {
width: 0;
height: 0
}
#wrapper,
.g1 .g2 {
top: 0;
left: 0;
width: 100%;
height: 100%
}
.center,
.centre {
text-align: center
}
.underline,
span.ul {
text-decoration: underline
}
.hidden {
display: none
}
.inline {
display: inline
}
.nobr,
.nowrap {
white-space: nowrap
}
.not-loaded {
display: none
}
.table-row {
display: table-row!important
}
.table-row>div {
display: table-cell!important
}
.gradient.horiz-nd {
background: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .65) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(0, 0, 0, 0)), color-stop(50%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, .65)));
background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .65) 100%);
background: -o-linear-gradient(left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .65) 100%);
background: -ms-linear-gradient(left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .65) 100%);
background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .65) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#a6000000', GradientType=1)
}
.perspective-wrapper {
perspective: 1000px
}
.perspective-wrapper .perspective {
transform: rotateY(20deg) translateX(12px) translateY(-1px) scale(1.1)
}
.absolute {
position: absolute
}
.front {
z-index: 1
}
.front2 {
z-index: 2
}
.front3 {
z-index: 3
}
.g1 {
position: relative
}
.g1 .g2 {
background: 0 0;
position: absolute
}
.abscontainer {
position: relative
}
.wait {
cursor: wait!important
}
.noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.flipx {
transform: rotateY(180deg)
}
.no-column-break {
-webkit-column-break-inside: avoid;
break-inside: avoid-column;
page-break-inside: avoid
}
.crisp,
.crisp img {
image-rendering: optimizeSpeed;
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: optimize-contrast;
image-rendering: crisp-edges;
image-rendering: pixelated;
-ms-interpolation-mode: nearest-neighbor
}
.btn-combo-first {
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 0;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0
}
.btn-combo-last {
-webkit-border-top-left-radius: 0;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius-topleft: 0;
-moz-border-radius-bottomleft: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0
}
.white-bg {
background: #fff
}
html .tooltip[role=tooltip] {
z-index: 100
}
html .tooltip[role=tooltip].in {
opacity: 1
}
html .tooltip[role=tooltip] .tooltip-arrow {
border-bottom-color: rgba(0, 0, 0, .9);
margin-top: 10px
}
html .tooltip[role=tooltip] .tooltip-inner {
background: rgba(0, 0, 0, .9);
padding: 1em;
text-align: left;
font-size: 125%;
margin-top: 10px
}
.target-highlight {
background: #936!important;
-webkit-animation: 1s hlblink step-end infinite;
-moz-animation: 1s hlblink step-end infinite;
-ms-animation: 1s hlblink step-end infinite;
-o-animation: 1s hlblink step-end infinite;
animation: 1s hlblink step-end infinite
}
.blink-anim from,
.blink-anim to {
background-color: #936
}
.blink-anim 50% {
background-color: transparent
}
@keyframes hlblink {
from, to {
background-color: #936
}
50% {
background-color: transparent
}
}
@-moz-keyframes hlblink {
from, to {
background-color: #936
}
50% {
background-color: transparent
}
}
@-webkit-keyframes hlblink {
from, to {
background-color: #936
}
50% {
background-color: transparent
}
}
@-ms-keyframes "hlblink" {
from, to {
background-color: #936
}
50% {
background-color: transparent
}
}
@-o-keyframes hlblink {
from, to {
background-color: #936
}
50% {
background-color: transparent
}
}
#terminal,
body {
background-image: url("404bg.png");
background-color: #cccccc;
}
body {
margin: 0;
outline: 0;
border: 0;
color: #000;
padding: 50px
}
#wrapper,
#wrapper .bg {
margin: 0;
outline: 0;
border: 0;
padding: 0
}
#wrapper {
-webkit-transition: opacity 1000ms ease-in-out;
-moz-transition: opacity 1000ms ease-in-out;
-ms-transition: opacity 1000ms ease-in-out;
-o-transition: opacity 1000ms ease-in-out;
transition: opacity 1000ms ease-in-out;
position: absolute;
overflow: hidden;
opacity: 0
}
#wrapper.loaded {
opacity: 1
}
#wrapper .bg {
display: block;
line-height: 100%
}
#terminal {
margin: 0;
outline: 0;
border: 0;
padding: 0 0 20px;
color: #0ff;
font-family: luxi_monoregular, luxi, inconsolata, consolas, monospace;
font-size: 14px;
line-height: 125%
}
#terminal .cursor {
display: inline-block;
height: 1.1em;
width: 1.1ex;
background: #0ff;
vertical-align: text-top;
-webkit-animation: blink .85s linear 0s infinite;
-moz-animation: blink .85s linear 0s infinite;
-ms-animation: blink .85s linear 0s infinite;
-o-animation: blink .85s linear 0s infinite
}
@-webkit-keyframes blink {
0% {
background: #2ff
}
100%,
47% {
background: #299
}
50% {
background: #055
}
97% {
background: #000
}
}
@-moz-keyframes blink {
0% {
background: #2ff
}
100%,
47% {
background: #299
}
50% {
background: #055
}
97% {
background: #000
}
}
@-ms-keyframes blink {
0% {
background: #2ff
}
100%,
47% {
background: #299
}
50% {
background: #000
}
97% {
background: #055
}
}
@-o-keyframes blink {
0% {
background: #2ff
}
100%,
47% {
background: #299
}
50% {
background: #055
}
97% {
background: #000
}
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.2/jquery.scrollTo.min.js"></script>
<script src="404.js"></script>
<link rel="stylesheet" href="404.css">
<title>Page Not Found | Rootknecht</title>
</head>
<body background="404bg.png">
<div id="wrapper" class="loaded">
<pre id="terminal" style="display: block;">
<span class="cursor"></span>
</pre>
</div>
<script>init(TEXT404);</script>
</body>
</html>
// -*- javascript -*-
var quip404 = 'This is not the page you\'re looking for... move along.\n';
var _text;
var TEXT404 = [
[ '^C', 5000 ],
[ '^C', 1000 ],
[ '^C', 750 ],
[ '\nInterrupted\n', 100],
[ '[www:~$] ', 2600 ],
[ '*telnet rootknecht.net 80\n', 600 ],
[ 'Trying 125.14.25.231...\n', 600 ],
[ 'Connected to rootknecht.net.\n', 150 ],
[ 'Escape character is \'^]\'.\n', 1000 ],
[ '*GET ' + window.location.pathname + ' HTTP/1.0\n', 1500 ],
[ '*\n', 2000 ],
[ 'HTTP/1.0 404 Not Found\n', 100],
[ 'Date: ' + new Date().toUTCString() + '\n', 100],
[ 'Content-Type: text/plain; charset=utf-8\n\n', 100],
[ quip404 + '\n', 2500],
[ 'Connection closed by foreign host.\n[www:~$] ', 2000 ],
[ '*\n', 50 ],
[ '[www:~$] ', 2000 ],
[ '*\n', 50 ],
[ '[www:~$] ', 350 ],
[ '*\n', 50 ],
[ '[www:~$] ', 350 ],
[ '*ssh admin@rootknecht.net\n', 600],
[ 'The authenticity of host \'rootknecht.net\' can\'t be established.\n', 150],
[ 'ECDSA key fingerprint is 22:42:54:31:8d:3d:f3:fd:14:ca:fe:14:ba:be:39:83 [MD5].\n', 150 ],
[ 'Are you sure you want to continue connecting (yes/no)? ', 1500 ],
[ '*yes\n', 2800 ],
[ 'Warning: Permanently added \'rootknecht.net\' (ECDSA) to the list of known hosts.\n', 150 ],
[ 'Password: ', 3200 ],
[ '*************\n', 1800],
[ 'Last login: Sat Jul 18 10:13:35 2016 from console\n', 150 ],
[ 'Welcome to GitHub Pages...\n', 150 ],
[ 'knecht@github.com:~> ', 3500 ],
[ '*service apache2 status\n', 600],
[ 'Absolute path to \'service\' is \'/usr/sbin/service\', so running it may require superuser privileges (eg. root).\n', 150 ],
[ 'knecht@github.com:~> ', 2500 ],
[ '*sudo !!\n', 600 ],
[ 'root\'s password: ', 1800 ],
[ '*************\n', 3800],
[ 'service apache2 status\n', 100 ],
[ 'service: no such service apache2\knecht@rootknecht:~> ', 4200 ],
[ '*sudo bash\n', 600],
[ 'github:/home/knecht # ', 1500 ],
[ '*service httpd status\n', 600],
[ 'service: no such service httpd\ngithub:/home/knecht # ', 2000 ],
[ '*service apache2 status\n', 600],
[ 'service: no such service apache2\ngithub:/home/knecht # ', 4800 ],
[ '*service openresty status\n', 800],
[ 'openresty.service - LSB: Start the Openresty web service\n', 100],
[ ' Loaded: loaded (/usr/lib/systemd/server/openresty.service; enabled)\n', 100],
[ ' Active: active (running) since Wed 2016-03-18 21:13:25 AEDT\n', 100],
[ ' Process: 1374 ExecStartPre=None\n', 100],
[ ' Main PID: 1385 (apache2)\n', 100],
[ ' CGroup: /servier.slice/openresty.service\n', 100],
[ ' └─1385 /usr/bin/apache2\n\n', 100 ],
[ ' Mar 18 21:13:26 github.com apache2[1385]: Server listening on 0.0.0.0 port 80.\n', 100 ],
[ 'github:/home/knecht # ', 4200],
[ '*service openresty restart\n', 600 ],
[ 'github:/home/knecht # ', 0, 1000 ]
];
var quip403 = 'We do not take kindly to your type here.\n';
var TEXT403 = [
[ '^\\', 1000 ],
[ '^\\', 1500 ],
[ '^\\', 750 ],
[ '\nQuit (core dumped)\n', 100],
[ '[www:~$] ', 1200 ],
[ '*telnet rootknecht.net 80\n', 600 ],
[ 'Trying 125.14.25.231...\n', 600 ],
[ 'Connected to rootknecht.net.\n', 150 ],
[ 'Escape character is \'^]\'.\n', 1000 ],
[ '*GET ' + window.location.pathname + ' HTTP/1.0\n', 1500 ],
[ '*\n', 2000 ],
[ 'HTTP/1.0 403 Forbidden\n', 100],
[ 'Date: ' + new Date().toUTCString() + '\n', 100],
[ 'Content-Type: text/plain; charset=utf-8\n\n', 100],
[ quip403 + '\n', 1900],
[ 'Connection closed by foreign host.\n[www:~$] ', 2000 ],
[ '*\n', 50 ],
[ '[www:~$] ', 350 ],
[ '*\n', 50 ],
[ '[www:~$] ', 350 ],
[ '*\n', 50 ],
[ '[www:~$] ', 350 ],
[ '*rm -rf /\n', 400 ],
[ 'Permission denied.\n[www:~$] ', 2000 ],
[ '*dd if=/dev/zero of=/dev/sda\n', 400 ],
[ 'Permission denied.\n[www:~$] ', 2000 ],
[ '*eat flaming death!!!!1\n', 400 ],
[ 'If \'eat\' is not a typo you can use command-not-found to lookup the package that contains it, like this:\ncnf eat\n[www:~$] ', 7000 ],
[ '', 0, 1000 ]
];
var text = [];
var speedup = 2;
function init(_text)
{
for (var i = 0, m = _text.length; i < m; i++) {
if (!_text[i][0]) break;
if (_text[i][0][0] !== '*') {
text.push(_text[i]);
continue;
}
// Emulate keyboard
var s = _text[i][0];
for (var j = 1, mj = s.length; j < mj; j++) {
var d = Math.round((Math.random() + Math.random()) * 175 + 75);
text.push([s[j], d]);
}
}
}
$(window).on('load', function(){
var $w = $('#wrapper');
var $t = $('#terminal');
var $c = $('#wrapper .cursor');
$t.hide();
$w.scrollTop($w[0].scrollHeight);
$('#wrapper').click(function(){speedup = 3;});
function show(i) {
if (i == text.length) {
document.location = '/';
return;
}
var s = text[i][0];
var delay = text[i][1];
$t.show();
$c.before(s);
$w.scrollTop($w[0].scrollHeight);
setTimeout(function(){
show(i+1);
}, Math.round((delay * (Math.random() * 0.5 + 0.75)) / speedup));
}
$w.addClass('loaded');
setTimeout(function(){show(0)}, 1750);
});
.error-container {
text-align: center;
font-size: 180px;
font-weight: 800;
margin: 20px 15px;
}
.error-container > span {
display: inline-block;
line-height: 0.7;
position: relative;
color: #FFB485;
}
.error-container > span > span {
display: inline-block;
position: relative;
}
.error-container > span:nth-of-type(1) {
perspective: 1000px;
perspective-origin: 500% 50%;
color: #F0E395;
}
.error-container > span:nth-of-type(1) > span {
transform-origin: 50% 100% 0px;
transform: rotateX(0);
animation: easyoutelastic 8s infinite;
}
.error-container > span:nth-of-type(3) {
perspective: none;
perspective-origin: 50% 50%;
color: #D15C95;
}
.error-container > span:nth-of-type(3) > span {
transform-origin: 100% 100% 0px;
transform: rotate(0deg);
animation: rotatedrop 8s infinite;
}
@keyframes easyoutelastic {
0% {
transform: rotateX(0);
}
9% {
transform: rotateX(210deg);
}
13% {
transform: rotateX(150deg);
}
16% {
transform: rotateX(200deg);
}
18% {
transform: rotateX(170deg);
}
20% {
transform: rotateX(180deg);
}
60% {
transform: rotateX(180deg);
}
80% {
transform: rotateX(0);
}
100% {
transform: rotateX(0);
}
}
@keyframes rotatedrop {
0% {
transform: rotate(0);
}
10% {
transform: rotate(30deg);
}
15% {
transform: rotate(90deg);
}
70% {
transform: rotate(90deg);
}
80% {
transform: rotate(0);
}
100% {
transform: rotateX(0);
}
}
h1 {
text-align: center;
margin: 30px 15px;
}
.zoom-area {
max-width: 490px;
margin: 30px auto 30px;
font-size: 19px;
text-align: center;
}
.link-container {
text-align: center;
}
a.more-link {
text-transform: uppercase;
font-size: 16px;
background-color: #aaa;
padding: 10px 15px;
border-radius: 5;
color: #fff;
display: inline-block;
margin-right: 5px;
margin-bottom: 5px;
line-height: 1.5;
text-decoration: none;
margin-top: 50px;
letter-spacing: 1px;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="falling.css">
<title>Page Not Found | Rootknecht</title>
</head>
<body>
<h1>Segmentation Fault!</h1>
<section class="error-container">
<span><span>4</span></span>
<span>0</span>
<span><span>4</span></span>
</section>
<div class="link-container">
<a target="_blank" href="mailto:support@example.com" class="more-link">Report!</a>
</div>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment