cohost/static/cursor-fun-end/index.html

132 lines
3.8 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>RICK ROLL OF COURSE</title>
<style>
* {
margin: 0;
}
body {
width: 100vw;
height: 100vh;
background-color: #a4a3ae;
transition: 1s background-color;
}
.absolute-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.initially-hidden {
display: none;
}
#lemonsnout {
animation: explode 3s ease-in;
}
@keyframes explode {
0% {
transform: scale(0%);
}
100% {
transform: scale(100%);
}
}
</style>
<script>
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
function hide(id) {
document.getElementById(id).style.display = "none";
}
function show(id) {
document.getElementById(id).style.display = "block";
}
function set_bg(color) {
document.body.style.backgroundColor = color;
}
function set_title(title) {
document.title = title;
}
async function main() {
await sleep(3500);
hide("rickroll");
show("psyche");
set_title("PSYCHE");
set_bg("#136602");
await sleep(3000);
hide("psyche");
show("shill");
set_title("i like it a lot :]");
set_bg("#5ae93d");
await sleep(10000);
hide("shill");
show("2x-psyche");
set_title("OHHHHHHH YOU JUST GOT GOT");
set_bg("#b57fc4");
await sleep(1000);
show("lemonsnout-container");
set_title("oh hi lemonsnout :D");
await sleep(3200);
window.location.replace(
"https://www.youtube.com/watch?v=dQw4w9WgXcQ"
);
}
window.onload = main;
</script>
</head>
<body>
<img
id="rickroll"
class="absolute-center"
src="https://media.tenor.com/x8v1oNUOmg4AAAAd/rickroll-roll.gif"
alt="young rick astley from the famous rick roll dancing"
/>
<img
id="psyche"
class="absolute-center initially-hidden"
src="./psyche.png"
alt="large, green, pixelated text that says PSYCHE"
/>
<div id="shill" class="absolute-center initially-hidden">
<p>i just want you to read homestuck :]</p>
<a href="https://bambosh.dev/unofficial-homestuck-collection"
>offline (best)</a
>
<a href="https://homestuck.giovanh.com"
>online (easier, also really cool)</a
>
</div>
<img
id="2x-psyche"
class="absolute-center initially-hidden"
src="./x2-double-psycheout-combo.png"
alt="large, yellow and purple, pixelated text that says x2 DOUBLE PSYCHEOUT COMBO!!"
/>
<div class="absolute-center initially-hidden" id="lemonsnout-container">
<img
id="lemonsnout"
src="./large-lemonsnout.png"
alt="a very close pic of lemonsnout's head"
/>
</div>
</body>
</html>