86 lines
No EOL
2.1 KiB
HTML
86 lines
No EOL
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>ROCKSPIN</title>
|
|
|
|
<script src="https://penis.possiblyaxolotl.com/index.js" defer></script>
|
|
|
|
<style>
|
|
* {
|
|
padding: 0;
|
|
margin: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
@keyframes rotateY {
|
|
to {transform: rotateY(360deg)}
|
|
}
|
|
|
|
@keyframes rotateX {
|
|
to {rotate: 360deg;}
|
|
}
|
|
|
|
@keyframes hues {
|
|
0% {
|
|
filter: hue-rotate(0deg);
|
|
}
|
|
100% {filter: hue-rotate(360deg);}
|
|
}
|
|
|
|
#rock {
|
|
animation: rotateY 2s infinite linear, rotateX 10s infinite linear, hues 1s linear infinite;
|
|
margin: 20px;
|
|
width: calc(100vw - 40px);
|
|
max-width: 70vw;
|
|
max-height: 70vw;
|
|
justify-content: center;
|
|
align-items: center;
|
|
display: flex;
|
|
}
|
|
|
|
body {
|
|
text-align: center;
|
|
height: 100vh;
|
|
background-color: black;
|
|
align-items: center;
|
|
justify-content: center;
|
|
align-items: center;
|
|
display: flex;
|
|
|
|
}
|
|
|
|
canvas {
|
|
position: absolute;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
}
|
|
|
|
button {
|
|
position: absolute;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<canvas></canvas>
|
|
<img src="/images/ui/rock.png" id="rock">
|
|
<audio hidden loop id="audio"><source src="/audio/rockspin.ogg" type="audio/mp3"></audio>
|
|
<button id="b" onclick="a.play(); this.style.display = 'none'">Autoplay is disabled! Click here to play audio.</button>
|
|
|
|
<script>
|
|
const a = document.getElementById("audio");
|
|
const b = document.getElementById("b");
|
|
|
|
var p = a.play();
|
|
|
|
if (p !== undefined) {
|
|
p.then(_ => {
|
|
b.style.display = 'none';
|
|
}).catch(error => {
|
|
b.style.display = 'auto';
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |