132 lines
3.2 KiB
HTML
132 lines
3.2 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>LEEKSPIN 2.0</title>
|
|
<meta name="description" content="Non-Flash version of the old meme">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<!-- Icon from stockio.com -->
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
|
<link rel="manifest" href="/site.webmanifest">
|
|
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#2ebc6d">
|
|
<meta name="msapplication-TileColor" content="#000000">
|
|
<meta name="theme-color" content="#000000">
|
|
|
|
<style>
|
|
body {
|
|
background: black;
|
|
margin: 0;
|
|
height: 97vh;
|
|
}
|
|
|
|
video {
|
|
display: block;
|
|
margin: 0 auto;
|
|
max-width: 100%;
|
|
height: 97vh;
|
|
}
|
|
|
|
h3 {
|
|
color: white;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
height: 3vh;
|
|
}
|
|
|
|
#overlay {
|
|
display: block;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
background: black;
|
|
opacity: 0.5;
|
|
z-index: 2;
|
|
}
|
|
|
|
#overlay img {
|
|
position: relative;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
display: block;
|
|
width: 30%;
|
|
height: 30%;
|
|
opacity: 0.8;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="overlay" onclick="play()">
|
|
<img alt="Play button" src="play-arrow.svg">
|
|
</div>
|
|
<video id="video1" loop preload="auto">
|
|
<source src="leekspin.webm" type="video/webm">
|
|
</video>
|
|
<audio id="audio1" loop preload="auto">
|
|
<source src="leekspin.opus" type="audio/ogg">
|
|
</audio>
|
|
<h3>You've been spinning for <span id="timer">00:00:00</span></h3>
|
|
</body>
|
|
|
|
<script>
|
|
var v1 = document.getElementById("video1");
|
|
var a1 = document.getElementById("audio1");
|
|
var o1 = document.getElementById("overlay");
|
|
|
|
var time
|
|
var output
|
|
|
|
function play() {
|
|
time = 0;
|
|
v1.play();
|
|
a1.play();
|
|
o1.style.display = "none";
|
|
StartTimer();
|
|
}
|
|
|
|
function convertOutput() {
|
|
var hours = 0
|
|
var mins = 0
|
|
var secs = time
|
|
|
|
while (secs >= 60) {
|
|
secs -= 60;
|
|
mins += 1;
|
|
}
|
|
|
|
while (mins >= 60) {
|
|
mins -= 60;
|
|
hours += 1;
|
|
}
|
|
|
|
if (secs < 10) {
|
|
secs = "0" + secs;
|
|
}
|
|
|
|
if (mins < 10) {
|
|
mins = "0" + mins;
|
|
}
|
|
|
|
if (hours < 10) {
|
|
hours = "0" + hours;
|
|
}
|
|
|
|
output = hours + ":" + mins + ":" + secs;
|
|
}
|
|
|
|
function StartTimer() {
|
|
time += 1;
|
|
convertOutput();
|
|
document.getElementById("timer").innerHTML = output;
|
|
self.setTimeout("StartTimer()", 1000);
|
|
}
|
|
</script>
|
|
|
|
</html> |