lelgenio/catboy-spinner
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

init

Browse source
This commit is contained in:
lelgenio 2024-10-04 20:11:17 -03:00
commit 422bdfa89b
2 changed files with 64 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
catboy.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 782 KiB

64
index.html Normal file
View file

@ -0,0 +1,64 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.col {
display: flex;
flex-direction: column;
gap: 10px;
margin: auto;
max-width: 900px;
background: #7eb0ff;
}
* {
text-align: center;
color: #fff;
}
h1 {
font-family: sans;
}
#catboy {
max-width: 80vw;
max-height: 80vh;
object-fit: contain;
}
</style>
</head>
<body>
<div class="col">
<h1>Catboy spinner</h1>
<img src="catboy.png" alt="" id="catboy" />
<p><span id="rpm">0</span> RPM</p>
</div>
<script>
const catboyImage = document.getElementById("catboy");
const rpmIndiCATor = document.getElementById("rpm");
let rpm = 6000;
let rot = 0;
setInterval(() => {
catboyImage.style.rotate = `${rot}deg`;
rot += rpm / 60;
while (rot > 360) {
rot -= 360;
}
}, 1000 / 60);
setInterval(() => {
if (rpm > 0) rpm -= rpm / 100;
rpmIndiCATor.innerHTML = Math.floor(rpm);
}, 10);
catboyImage.onclick = () => {
rpm += 300;
};
</script>
</body>
</html>