diff --git a/index.html b/index.html new file mode 100644 index 0000000..a0b1f53 --- /dev/null +++ b/index.html @@ -0,0 +1,35 @@ + + + + + + zyq's Tools + + + + + +
+ Go Home + + +
+ +
+

Welcome!

+

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

+
+ +
+
+

Mouse Test

+

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 new file mode 100644 index 0000000..98d24f7 --- /dev/null +++ b/script.js @@ -0,0 +1,68 @@ +const themeToggle = document.getElementById('themeToggle'); + +let isLightMode = false; + +themeToggle.addEventListener('click', function() { + if (!isLightMode) { + + /* + LIGHT MODE + LIGHT MODE + LIGHT MODE + */ + + document.body.style.backgroundColor = '#C8C8C8'; + container.style.backgroundColor = "#B0B0B0"; + themeToggle.innerHTML = ` + + + + + + + + + + + + + `; + container.style.color = "#1E1E1E" + isLightMode = true; + document.getElementById('github').innerHTML = ` github [#142]Created with Sketch. `; + + let children = container.children; + for (let i = 0; i < children.length; i++) { + children[i].style.color = "#1E1E1E"; + } + + rmbReset.style.backgroundColor = "#1E1E1E"; + lmbReset.style.backgroundColor = "#1E1E1E"; + rmbReset.style.color = "#b0b0b0"; + lmbReset.style.color = "#b0b0b0"; + + + } else { + + /* + DARK MODE + DARK MODE + DARK MODE + */ + + 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"; + document.getElementById('github').innerHTML = ` github [#142]Created with Sketch. `; + rmbReset.style.backgroundColor = "#b0b0b0"; + lmbReset.style.backgroundColor = "#b0b0b0"; + rmbReset.style.color = "#141414"; + lmbReset.style.color = "#141414"; + + } +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..f91ae56 --- /dev/null +++ b/style.css @@ -0,0 +1,109 @@ +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + font-family: monospace; + background-color: #2a2a2a; + transition: background-color 0.3s, color 0.3s; + color: white; + flex-direction: column; +} + +.topbar { + display: flex; + align-items: center; + gap: 20px; + width: 100%; + position: fixed; + background-color: rgba(59, 59, 59, 0.885); + padding: 20px; + backdrop-filter: blur(5px); + font-size: large; + top: 0; + border-bottom: 1px solid rgba(70, 70, 70, 0.885); + z-index: 9999; +} + +.home { + text-decoration: none; + color: white; + padding: 10px; + background-color: rgba(75, 75, 75, 1); + border: 2px solid rgba(80, 80, 80, 1); + border-radius: 7px; + transition: 0.3s; + margin-left: 25px; + margin-right: -10px; +} + +.theme-button { + cursor: pointer; + background: none; + border: none; + transition: 0.3s; +} + +.home:hover { + background-color: rgba(85, 85, 85, 1); + border: 2px solid rgba(90, 90, 90, 1); + text-decoration: underline; +} + +.welcome { + text-align: center; + margin: 0; + width: 100%; +} + +.tools-main { + display: flex; + flex-wrap: wrap; + gap: 40px; + justify-content: center; + min-height: 10vh; + padding-top: 5vh; +} + +#tool-div { + padding: 10px 30px 30px 30px; + background-color: rgba(75, 75, 75, 1); + border: 2px solid rgba(80, 80, 80, 1); + border-radius: 7px; + transition: 0.3s; + text-align: center; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + height: 75%; + width: 500px; +} + +.tool-header { + margin-bottom: 0; +} + +#tool-div img { + height: 200px; + border-radius: 10px; +} + +.visit-tool { + padding: 10px 20px; + background-color: rgb(60, 120, 85); + color: white; + 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; +} + +.visit-tool:hover { + background-color: rgb(75, 135, 100); + border-color: rgb(90, 150, 115); +}