-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
138 lines (119 loc) · 4.02 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>yippeeeee</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
<style>
html,
body {
height: 100%;
margin: 0;
font-family: 'Inter', sans-serif;
}
#videos {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 10px;
margin-left: 10px;
}
video {
width: 100px;
height: 100px;
}
#fpsCounter {
position: absolute;
top: 10px;
right: 10px;
background: rgba(0, 0, 0, 0.5);
color: white;
padding: 5px;
border-radius: 5px;
}
details {
border: 1px solid #aaa;
border-radius: 4px;
padding: 0.5em 0.5em 0;
margin-left: 10px;
margin-right: 10px;
/* max-width: 300px; */
}
summary {
font-weight: bold;
margin: -0.5em -0.5em 0;
padding: 0.5em;
width: 100%;
}
details[open] {
padding: 0.5em;
width: 100%;
}
details[open] summary {
border-bottom: 1px solid #aaa;
margin-bottom: 0.5em;
width: 100%;
}
h1 {
margin-left: 10px;
}
</style>
</head>
<body>
<h1>Press a key or click/touch anywhere to UOOOOPA!</h1>
<details>
<summary>How it works</summary>
How does it work you ask? Well according to my awesome friend <a href="https://shepfish.neocities.org/">shepfish</a> who looked into it, the webm file
has a lot of HEX data at the end, which is why you see the color and resolution change. The reason most
browsers need a click or touch is a security feature to stop things like this from autplaying! This site
works best on Firefox as Chromium simply terminates the page after a certain amount of RAM usage :(
</details>
<br>
<details>
<summary>Created by Josh (NOT eli)</summary>
Since your page somehow hasn't crashed yet, go to the <a href="https://github.com/JoshAtticus/uoooopa">GitHub Repo</a> for this page
</details>
<br>
<div id="videos">
<!-- Videos will be added here -->
</div>
<div id="fpsCounter">FPS: 0</div>
<script>
const videoContainer = document.getElementById('videos');
const videoCount = 90;
const videoSrc = 'UOOOOPA-1.webm';
for (let i = 0; i < videoCount; i++) {
const videoElement = document.createElement('video');
videoElement.src = videoSrc;
videoElement.controls = true;
videoElement.loop = true;
videoElement.muted = false;
videoContainer.appendChild(videoElement);
}
const playVideos = () => {
const videos = document.querySelectorAll('video');
videos.forEach(video => video.play());
};
document.body.addEventListener('click', playVideos);
document.body.addEventListener('touchstart', playVideos);
document.addEventListener('keydown', playVideos);
// Play videos on page load
window.addEventListener('load', playVideos);
// FPS Counter
let lastFrameTime = performance.now();
let frameCount = 0;
const updateFPS = () => {
const now = performance.now();
frameCount++;
if (now >= lastFrameTime + 1000) {
const fps = frameCount;
document.getElementById('fpsCounter').innerText = `FPS: ${fps}`;
frameCount = 0;
lastFrameTime = now;
}
requestAnimationFrame(updateFPS);
};
updateFPS();
</script>
</body>
</html>