i-eat.rocks/site/apps/spin.html

81 lines
2 KiB
HTML
Raw Normal View History

2024-11-19 02:43:34 +00:00
<!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;
2024-11-20 00:28:05 +00:00
display: none;
2024-11-19 02:43:34 +00:00
}
</style>
</head>
<body>
<canvas></canvas>
<img src="/images/ui/rock.png" id="rock">
2024-11-20 00:28:05 +00:00
<audio autoplay loop id="audio" preload="auto"><source src="/audio/rockspin.wav" type="audio/wav"></audio>
2024-11-19 02:43:34 +00:00
<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();
2024-11-20 00:28:05 +00:00
p.catch(function() {b.style.display = "block"});
2024-11-19 02:43:34 +00:00
</script>
</body>
</html>