diff --git a/epic 5158.mp4 b/epic 5158.mp4 new file mode 100644 index 0000000..3e6084c Binary files /dev/null and b/epic 5158.mp4 differ diff --git a/index.html b/index.html index 372aa93..baf0f53 100644 --- a/index.html +++ b/index.html @@ -7,17 +7,14 @@ - -
- Go Home - - +
-
+

Welcome!

This is my website for tools. The source code can be found on my GitHub!

@@ -25,11 +22,18 @@

Mouse Test

-

This allows you to test your mouse's keys!

- Mouse Test Preview - Visit +

This allows you to test your mouse's keys!

+
+ Mouse Test Preview + + +
+ Visit
-
+ + + + - \ No newline at end of file + diff --git a/script.js b/script.js deleted file mode 100644 index 13215a9..0000000 --- a/script.js +++ /dev/null @@ -1,43 +0,0 @@ -const themeToggle = document.getElementById('themeToggle'); -const topbar = document.getElementById('topbar') - -let isLightMode = false; - -themeToggle.addEventListener('click', function() { - if (!isLightMode) { - document.body.style.backgroundColor = '#C8C8C8'; - container.style.backgroundColor = "#B0B0B0"; - themeToggle.innerHTML = ` - - - - - - - - - - - - - `; - container.style.color = "#1E1E1E" - isLightMode = true; - - let children = container.children; - for (let i = 0; i < children.length; i++) { - children[i].style.color = "#1E1E1E"; - } - - } else { - let children = container.children; - for (let i = 0; i < children.length; i++) { - children[i].style.color = "#f0f0f0"; - } - document.body.style.backgroundColor = '#2a2a2a'; - themeToggle.innerHTML = ` `; - isLightMode = false; - container.style.backgroundColor = "#4b4b4b"; - - } -}); diff --git a/slide.js b/slide.js new file mode 100644 index 0000000..60b3579 --- /dev/null +++ b/slide.js @@ -0,0 +1,24 @@ +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&" +]; + +function showSlide(n) { + const image = document.querySelector(".tool-image"); + slideIndex = (n + images.length) % images.length; + image.src = images[slideIndex]; +} + +function changeSlide(n) { + showSlide(slideIndex + n); +} + +function autoScroll() { + changeSlide(1); + setTimeout(autoScroll, 10000); +} + +showSlide(slideIndex); +autoScroll(); diff --git a/style.css b/style.css index a691625..fdad6d5 100644 --- a/style.css +++ b/style.css @@ -7,10 +7,14 @@ body { font-family: monospace; background-color: #2a2a2a; transition: background-color 0.3s, color 0.3s; - color: white; + color: #f0f0f0; flex-direction: column; } +::selection { + background-color: #3c7855; +} + .topbar { display: flex; align-items: center; @@ -28,7 +32,7 @@ body { .home { text-decoration: none; - color: white; + color: #f0f0f0; padding: 10px; background-color: rgba(75, 75, 75, 1); border: 2px solid rgba(80, 80, 80, 1); @@ -36,6 +40,8 @@ body { transition: 0.3s; margin-left: 25px; margin-right: -10px; + user-select: none; + cursor: pointer !important; } .theme-button { @@ -58,7 +64,7 @@ body { } .welcome * { - color: white; + color: #f0f0f0; } .tools-main { @@ -80,35 +86,93 @@ body { display: flex; flex-direction: column; align-items: center; - justify-content: space-between; + justify-content: center; height: 75%; width: 500px; } .tool-header { margin-bottom: 0; + padding-top: 15px; + text-decoration: underline; +} + +.tool-desc { + margin: 5px; + font-weight: normal; } #tool-div img { height: 200px; border-radius: 10px; cursor: pointer; + margin: 10px; } .visit-tool { - padding: 10px 20px; + padding-top: 10px; + padding-bottom: 12px; + padding-right: 20px; + padding-left: 20px; + background-color: rgb(60, 120, 85); - color: white; + color: #f0f0f0; border: 2px solid rgb(75, 135, 100); border-radius: 4px; - margin-top: auto; - margin-bottom: -10px; transition: 0.1s; font-weight: bolder; font-size: large; + margin-bottom: 15px; + margin-top: 5px; } .visit-tool:hover { background-color: rgb(75, 135, 100); border-color: rgb(90, 150, 115); } + + +.slideshow-container { + position: relative; + width: 100%; + max-width: 500px; + margin: auto; +} + +.tool-image { + width: 100%; + border-radius: 10px; +} + +.prev, .next { + cursor: pointer; + top: 50%; + width: 36px; + height: 36px; + color: #f0f0f0; + background-color: #747474; + border: none; + font-weight: bold; + font-size: 18px; + transition: 0.1s ease; + user-select: none; + text-align: center; + justify-content: center; + margin: 5px; +} + +.prev:hover, +.next:hover { + scale: 1.01; + background-color: #808080; +} + +.prev { + left: 0; + border-radius: 50%; +} + +.next { + right: 0; + border-radius: 50%; +} diff --git a/theme.js b/theme.js new file mode 100644 index 0000000..38574f4 --- /dev/null +++ b/theme.js @@ -0,0 +1,82 @@ +const themeToggle = document.getElementById('themeToggle'); +const topbar = document.getElementById('topbar') +const toolContainer = document.getElementById('tool-div') +const visit = document.getElementById('visit') +const welcome = document.getElementById('welcome') +const homeButton = document.getElementById('home') + +let isLightMode = false; + +themeToggle.addEventListener('click', function() { + if (!isLightMode) { + document.body.style.backgroundColor = '#C8C8C8'; + topbar.style.backgroundColor = "#B0B0B0"; + topbar.style.borderColor = "#aeaeae"; + + + home.style.backgroundColor = "#909090"; + home.style.borderColor = "#858585"; + + + toolContainer.style.backgroundColor = "#B0B0B0"; + toolContainer.style.borderColor = "#A5A5A5"; + isLightMode = true; + + let children = toolContainer.children; + for (let i = 0; i < children.length; i++) { + children[i].style.color = "#1E1E1E"; + } + + let welcomeChildren = welcome.querySelectorAll('*'); + for (let o = 0; o< welcomeChildren.length; o++) { + welcomeChildren[o].style.color = "#1E1E1E"; + } + + visit.style.backgroundColor = "#8CC8A5"; + visit.style.borderColor = "#A0DCB9"; + + themeToggle.innerHTML = ` + + + + + + + + + + + + + `; + + } else { + isLightMode = false; + + document.body.style.backgroundColor = '#2a2a2a'; + + home.style.backgroundColor = "#4b4b4b"; + home.style.borderColor = "#505050"; + + let children = toolContainer.children; + for (let i = 0; i < children.length; i++) { + children[i].style.color = "#f0f0f0"; + } + + let welcomeChildren = welcome.querySelectorAll('*'); + for (let o = 0; o< welcomeChildren.length; o++) { + welcomeChildren[o].style.color = "#f0f0f0"; + } + + topbar.style.backgroundColor = "rgba(59, 59, 59, 0.885)"; + + toolContainer.style.backgroundColor = "#4b4b4b"; + toolContainer.style.borderColor = "#505050"; + + visit.style.backgroundColor = "#3c7855"; + visit.style.borderColor = "#4b8764"; + + themeToggle.innerHTML = ` `; + + } +});