-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
294 lines (265 loc) · 11.9 KB
/
index.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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
<!doctype html>
<html lang="en">
<!--
Hey, you know how rude it is to just look at the source of a page?
Seriously, doing this ruins all the fun of finding the secrets!
...
...who even puts secrets on webpages?
-->
<head>
<!--
shout outs to myra for making me want to work on this page again
you nerd
use the mdn web docs if you wanna actually make your site look good
-->
<title>voidnull('s site)</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
/*
if you think this webpage was specifically designed for my screen,
you'd be right.
to be fair, i don't expect people to be using 800x600 screens nowadays.
but who knows, y'know?
*/
body {
background-color: black;
text-align: center;
color: white;
font-family: monospace;
margin: 3em;
}
div {
position: relative;
}
#links {
text-align: right;
}
#container {
margin-top: 20em;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
/* i hate css so much */
}
#title h1 {
position: absolute;
font-size: 72px;
}
#randotext {
position: absolute;
transform: translate(0, 15em);
}
#credits {
position: absolute;
left: 0px;
bottom: 0px;
font-size: 8px;
color: gray;
}
</style>
<script>
// what even are size constraints
var msgs = [
"there's plenty of other sites to go to, y'know",
"there's nothing here, go home",
"hey why don't you use one of the links above",
"help i'm trapped in a message factory",
"// TODO: put message here",
"yes i do use notepad++ what's the issue",
"i suppose being out of ideas and making it known is also a funny thing to put here",
"thinking about my ghosting hours (GHOST GANG!)",
"thinking about how many hours i've wasted in sandbox",
"thinking about my space programs (hasn't landed on the moon)", // ksp moment, cheated for my first docking (i don't even play ksp anymore)
"thinking about null pointers (segfaults inbound)",
"thinking about being a girl", // sorry not sorry
"did you know that cyberpunk as a genre is actually showing you things that happen (or could happen) in the current day and age and not a dystopian future",
// there was a massively large wall of text here but it a) bloats filesizes b) was basically a conspiracy and i don't want that to my name honestly
"did you know that in britain, trans people are basically fucked over by every single institution and rich guy oh wait you probably already did",
"yes i'm giving you a 12kb page to show terrible messages and crappy js code, what about it",
"insert joke about null poin-- <b>SIGSEGV</b>",
"hey guys did you know that in terms of websites, not using a javascript framework (even something like jquery) is better for someone's internet browsing experience then packing 50MB of random shit you're probably not going to use in the slightest",
"y'know what they say<br>i don't remember what they say",
"something tells me that i should not be packing this site with 50 morbillion different messages but who gives a shit",
"<a href='/data/10/01/10/01'>Incoming data...</a>", // this didn't work for a while i'm sorry
"imagine if i actually had the willpower to do things that would be awesome wouldn't it",
"the wavy text above me took literal hours to make and i'm not proud of it anyway",
"myra if you're reading this you're a nerd",
"hi, i'm voidnull, and i'm a text-a-holic", // i don't even think people will laugh at this joke
"the funny thing about random messages is that they're not actually funny the second time around",
"oh look it's the last message of the list how cool",
]
//var msgs = ["...you should click the bright red link..."]
var alreadyloaded = false;
var textcol = 0;
var textpos = 0;
var currentletter = 0;
var donethething = 0;
var rampup = 0;
// i'm copying this from reddit's 504 page which is on github.
// or was, i dunno.
function randint(low, high) {
return Math.round(Math.random() * (high - low + 1)) + low;
}
function randmsg() {
return msgs[randint(0, msgs.length - 2)];
}
function changemsg() {
var mg = document.getElementById("randotext");
mg.innerHTML = randmsg();
}
// this stuff was made by me, though
// you can tell because it sucks ass
function nextcol() {
var posconst = 7;
var tmpposc = 0; // i don't trust javascript enough
var tmpcol = 0;
var textsat = 50;
// this is a hack, plain and simple
// it's not good, but the end result looks nice, so
var l1 = document.getElementById("l1");
var l2 = document.getElementById("l2");
var l3 = document.getElementById("l3");
var l4 = document.getElementById("l4");
var l5 = document.getElementById("l5");
var l6 = document.getElementById("l6");
var l7 = document.getElementById("l7");
var l8 = document.getElementById("l8");
textcol = textcol + 0.1;
textpos = textpos + 0.05;
tmpposc = -posconst + rampup + 6;
tmpcol = tmpposc / 7;
// apologies in advance if you've set your browser to scale up the webpage
// or if you're going to throw up from this block of code
var s1 = "color: hsl(" + (textcol + 5) + ", " + (textsat * tmpcol) + "%, " + (100 - (textsat * tmpcol) + 10) + "%); transform: translate(-140px, " + Math.sin(textpos + 5) * tmpposc + "px);"
var s2 = "color: hsl(" + (textcol + 10) + ", " + (textsat * tmpcol) + "%, " + (100 - (textsat * tmpcol) + 10) + "%); transform: translate(-105px, " + Math.sin(textpos + 10) * tmpposc + "px);";
var s3 = "color: hsl(" + (textcol + 15) + ", " + (textsat * tmpcol) + "%, " + (100 - (textsat * tmpcol) + 10) + "%); transform: translate(-70px, " + Math.sin(textpos + 15) * tmpposc + "px);";
var s4 = "color: hsl(" + (textcol + 20) + ", " + (textsat * tmpcol) + "%, " + (100 - (textsat * tmpcol) + 10) + "%); transform: translate(-35px, " + Math.sin(textpos + 20) * tmpposc + "px);";
var s5 = "color: hsl(" + (textcol + 25) + ", " + (textsat * tmpcol) + "%, " + (100 - (textsat * tmpcol) + 10) + "%); transform: translate(0px, " + Math.sin(textpos + 25) * tmpposc + "px);";
var s6 = "color: hsl(" + (textcol + 30) + ", " + (textsat * tmpcol) + "%, " + (100 - (textsat * tmpcol) + 10) + "%); transform: translate(35px, " + Math.sin(textpos + 30) * tmpposc + "px);";
var s7 = "color: hsl(" + (textcol + 35) + ", " + (textsat * tmpcol) + "%, " + (100 - (textsat * tmpcol) + 10) + "%); transform: translate(70px, " + Math.sin(textpos + 35) * tmpposc + "px);";
var s8 = "color: hsl(" + (textcol + 40) + ", " + (textsat * tmpcol) + "%, " + (100 - (textsat * tmpcol) + 10) + "%); transform: translate(105px, " + Math.sin(textpos + 40) * tmpposc + "px);";
/*
// alt colors
// i wonder if you could guess
var s1 = "color: rgb(0, 192, 255); transform: translate(-140px, " + Math.sin(textpos + 5) * tmpposc + "px);"
var s2 = "color: rgb(255, 128, 192); transform: translate(-105px, " + Math.sin(textpos + 10) * tmpposc + "px);";
var s3 = "color: rgb(255, 128, 192); transform: translate(-70px, " + Math.sin(textpos + 15) * tmpposc + "px);";
var s4 = "color: rgb(255, 255, 255); transform: translate(-35px, " + Math.sin(textpos + 20) * tmpposc + "px);";
var s5 = "color: rgb(255, 255, 255); transform: translate(0px, " + Math.sin(textpos + 25) * tmpposc + "px);";
var s6 = "color: rgb(255, 128, 192); transform: translate(35px, " + Math.sin(textpos + 30) * tmpposc + "px);";
var s7 = "color: rgb(255, 128, 192); transform: translate(70px, " + Math.sin(textpos + 35) * tmpposc + "px);";
var s8 = "color: rgb(0, 192, 255); transform: translate(105px, " + Math.sin(textpos + 40) * tmpposc + "px);";
*/
var bc = "background-color: hsl(" + (1 - textcol) + ", " + (50 * tmpcol) + "%, " + ((textsat * tmpcol) / 8) + "%);";
document.body.style = bc;
l1.style = s1;
l2.style = s2;
l3.style = s3;
l4.style = s4;
l5.style = s5;
l6.style = s6;
l7.style = s7;
l8.style = s8;
// apparently css styles can do something like this but better,
// i don't care enough, though
}
function dothecoolloadthing() {
if(currentletter > 8) return;
var l1 = document.getElementById("l1");
var l2 = document.getElementById("l2");
var l3 = document.getElementById("l3");
var l4 = document.getElementById("l4");
var l5 = document.getElementById("l5");
var l6 = document.getElementById("l6");
var l7 = document.getElementById("l7");
var l8 = document.getElementById("l8");
currentletter = currentletter + 4;
if(currentletter > 8) {
setInterval(function() {nextcol();}, 1);
setInterval(function() {ramp();}, 100);
}
// mmm i love ctrl+d
// thank you npp for being a good text editor
if(currentletter > 0) l1.style = "display: inline; transform: translate(-140px, 0px);";
else l1.style = "display: none;";
if(currentletter > 1) l2.style = "display: inline; transform: translate(-105px, 0px);";
else l2.style = "display: none;";
if(currentletter > 2) l3.style = "display: inline; transform: translate(-70px, 0px);";
else l3.style = "display: none;";
if(currentletter > 3) l4.style = "display: inline; transform: translate(-35px, 0px);";
else l4.style = "display: none;";
if(currentletter > 4) l5.style = "display: inline; transform: translate(0px, 0px);";
else l5.style = "display: none;";
if(currentletter > 5) l6.style = "display: inline; transform: translate(35px, 0px);";
else l6.style = "display: none;";
if(currentletter > 6) l7.style = "display: inline; transform: translate(70px, 0px);";
else l7.style = "display: none;";
if(currentletter > 7) l8.style = "display: inline; transform: translate(105px, 0px);";
else l8.style = "display: none;";
}
function ramp() {
if(rampup < 10) rampup = rampup + 1;
}
function load() {
if(alreadyloaded) return;
alreadyloaded = true;
document.getElementById("l1").style = "display: none;";
document.getElementById("l2").style = "display: none;";
document.getElementById("l3").style = "display: none;";
document.getElementById("l4").style = "display: none;";
document.getElementById("l5").style = "display: none;";
document.getElementById("l6").style = "display: none;";
document.getElementById("l7").style = "display: none;";
document.getElementById("l8").style = "display: none;";
setInterval(function() {dothecoolloadthing();}, 450);
setInterval(function() {changemsg();}, 10 * 1000);
// weird that the javascript console also supports css styling
console.log("%cYou're not gonna find anything in the console, buddy.", "font-size: 24px;");
}
window.onload = load;
</script>
</head>
<body>
<noscript>
<style>
#container {
display: none;
}
</style>
<p>
hi there, i'm null<br>
you don't have javascript enabled currently.<br>
that's <i>fine</i>, but it means some cool (without a k) stuff can't be shown to you.<br>
i mean, you're not missing out on anything.<br>
<br>
probably.
</p>
</noscript>
<div id="links">
<!-- <a href="#">Link test</a>
<a href="#">Test 2</a> -->
<a href="/about">who actually are you?</a>
<a href="/howtodothat">how 2 do that</a>
</div>
<div id="container">
<div id="title">
<h1 id="l1">v</h1>
<h1 id="l2">o</h1>
<h1 id="l3">i</h1>
<h1 id="l4">d</h1>
<h1 id="l5">n</h1>
<h1 id="l6">u</h1>
<h1 id="l7">l</h1>
<h1 id="l8">l</h1>
</div>
<h3 id="randotext"></h3>
</div>
<span id="credits">(most) content on this site is made by me (voidnull)
<br>please don't do any ai generation garbage with this</span>
</body>
<!--
please github don't train your shitty ai models on my repos
not like they'd get any better anyway
-->
</html>