init

2024-10-04 20:11:17 -03:00 · 2024-10-04 20:11:17 -03:00 · 422bdfa89b
commit 422bdfa89b
2 changed files with 64 additions and 0 deletions
--- a/catboy.png
+++ b/catboy.png
--- a/index.html
+++ b/index.html
@ -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>