-
Notifications
You must be signed in to change notification settings - Fork 0
/
404.html
132 lines (120 loc) · 3.09 KB
/
404.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!doctype html>
<html lang="en">
<head>
<title>couldn't find that.</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
background: center / contain no-repeat linear-gradient(180deg, #000, #303);
color: white;
font-family: monospace;
text-align: center;
overflow: hidden;
}
#container {
position: absolute;
top: 37%;
width: 30%;
margin-left: 35%;
}
h1 {
font-size: 72px;
}
#sleepz {
position: absolute;
top: 0px;
margin-left: 45%;
width: 30%;
}
#sleepz h1 {
position: absolute;
}
#links {
text-align: right;
}
</style>
<script>
var zs = [];
// this took way too long to do, but the result is something that looks sort of okay.
// if you're wondering why i don't use jquery or any external libraries for this,
//
// it's because you're a weakling for even wanting to use them, nerd.
// seriously, you can do pretty much everything jquery or whatever does in vanilla script,
// and it'll load a hell of a lot faster.
//
// search up "the best fucking website ever made" for more information.
function makez() {
var elem = document.createElement("h2");
elem.className = "z";
if(Math.random() * 10 > 5) elem.textContent = "Z";
else elem.textContent = "z";
elem.style.position = "absolute";
return elem;
}
function spawnz() {
var sleepel = document.getElementById("sleepz");
if(Math.random() * 10 > 5) {
zy = {
ox: Math.random() * 100,
x: 0,
y: 500,
r: Math.random(),
el: makez()
}
sleepel.appendChild(zy.el);
zy.el.style.top = zy.y + "px";
zy.el.style.left = zy.x + "px";
zs.push(zy);
}
}
function updatez() {
var sleepel = document.getElementById("sleepz");
var newzs = [];
for(var i = 0; i < zs.length; i++) {
var z = zs[i];
z.y -= (0.5 * z.y) * 0.01;
if(z.y < 0) {
sleepel.removeChild(z.el);
} else {
z.el.style.top = z.y + "px";
z.el.style.left = z.ox + (Math.sin(z.x + (z.y / 10) + z.r) * 15) + "px";
z.el.style.opacity = z.y / 100;
newzs.push(z);
}
}
zs = newzs;
}
function load() {
setInterval(function() {spawnz();}, 1500);
setInterval(function() {updatez();}, 1);
}
window.onload = load;
</script>
</head>
<body>
<noscript>
<style>
#container {
display: none;
}
#sleepz {
display: none;
}
</style>
<h1>404, not found</h1>
<h3>(you have javascript off so nothing fun can be shown)</h3>
<h4>(at least you care, i guess)</h4>
</noscript>
<div style="height: 2560px;"> <!-- miserable hack, but mdn is completely fucking useless on this -->
<div id="links">
<a href="/">take me home, please</a>
</div>
<div id="container">
<h1>404</h1>
<p>(try to use one of the links next time)</p>
</div>
<div id="sleepz"></div>
<span style="color: #404040; position: absolute; font-size: 8px; bottom: 0px; left: 0px;">40/40/40/40</span>
</div>
</body>
</html>