small changes

index.html

@@ -24,7 +24,6 @@
             <h1 class="tool-header">Mouse Test</h1>
             <h2 class="tool-desc">This allows you to test your mouse's keys!</h2>
             <div class="slideshow-container">
-                <img class="tool-image" src="https://cdn.discordapp.com/attachments/1262379758478426122/1300822644509114368/image.png?ex=67223cfe&is=6720eb7e&hm=5c81ba48649c2bc0a4d249ad488d0abaa738d72949d4deb714fda4929d832aa3&" alt="Mouse Test Preview">
                 <button class="prev" onclick="changeSlide(-1)">❮</button>
                 <button class="next" onclick="changeSlide(1)">❯</button>
             </div>

slide.js

@@ -1,23 +1,50 @@
 let slideIndex = 0;
-const images = [
-    "https://cdn.discordapp.com/attachments/1262379758478426122/1300822644509114368/image.png?ex=67223cfe&is=6720eb7e&hm=5c81ba48649c2bc0a4d249ad488d0abaa738d72949d4deb714fda4929d832aa3",
-    "https://cdn.discordapp.com/attachments/1281034862391988304/1300921012539490426/image.png?ex=6722989b&is=6721471b&hm=6fc40dd7272e62c4f2cc4cf73433d4c012d9fa939da32a72a5223f8138d4153e&&",
-    "https://cdn.discordapp.com/attachments/1250368193114148907/1285283453595811934/togif.gif?ex=6722657e&is=672113fe&hm=cbc1659cfae2d4b0657cf3d0daf13081923e6ea6dce6030072a2b9c3c560d30b&"
+let autoScrollTimer;
+const media = [
+    { type: "image", src: "https://cdn.discordapp.com/attachments/1262379758478426122/1300822644509114368/image.png?ex=67223cfe&is=6720eb7e&hm=5c81ba48649c2bc0a4d249ad488d0abaa738d72949d4deb714fda4929d832aa3" },
+    { type: "image", src: "https://cdn.discordapp.com/attachments/1281034862391988304/1300921012539490426/image.png?ex=6722989b&is=6721471b&hm=6fc40dd7272e62c4f2cc4cf73433d4c012d9fa939da32a72a5223f8138d4153e&&" },
+    { type: "video", src: "https://files.catbox.moe/qyatl9.mp4" }
 ];
 
 function showSlide(n) {
-    const image = document.querySelector(".tool-image");
-    slideIndex = (n + images.length) % images.length;
-    image.src = images[slideIndex];
+    const container = document.querySelector(".slideshow-container");
+    container.querySelectorAll(".tool-media").forEach(el => el.remove());
+
+    slideIndex = (n + media.length) % media.length;
+    const currentMedia = media[slideIndex];
+
+    let element;
+    if (currentMedia.type === "image") {
+        element = document.createElement("img");
+        element.className = "tool-media";
+        element.src = currentMedia.src;
+    } else if (currentMedia.type === "video") {
+        element = document.createElement("video");
+        element.className = "tool-media";
+        element.src = currentMedia.src;
+        element.autoplay = true;
+        element.loop = true;
+        element.muted = true;
+    }
+
+    container.prepend(element);
 }
 
 function changeSlide(n) {
     showSlide(slideIndex + n);
+    resetAutoScroll();
+}
+
+function resetAutoScroll() {
+    clearTimeout(autoScrollTimer);
+    autoScrollTimer = setTimeout(() => changeSlide(1), 11130);
 }
 
 function autoScroll() {
-    changeSlide(1);
-    setTimeout(autoScroll, 10000);
+    autoScrollTimer = setTimeout(() => {
+        changeSlide(1);
+        autoScroll();
+    }, 11130);
 }
 
 showSlide(slideIndex);

style.css

@@ -102,11 +102,15 @@ body {
     font-weight: normal;
 }
 
-#tool-div img {
+.tool-media  {
     height: 200px;
     border-radius: 10px;
-    cursor: pointer;
     margin: 10px;
+    transition: 0.25s ease-in-out;
+}
+
+.tool-image.active {
+    opacity: 1;
 }
 
 .visit-tool {

theme.js

@@ -69,6 +69,7 @@ themeToggle.addEventListener('click', function() {
         }
 
         topbar.style.backgroundColor = "rgba(59, 59, 59, 0.885)";
+        topbar.style.borderColor = "#505050";
 
         toolContainer.style.backgroundColor = "#4b4b4b";
         toolContainer.style.borderColor = "#505050";