diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..a1c4910 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "compile-hero.disable-compile-files-on-did-save-code": true +} \ No newline at end of file diff --git a/assets/90's Bio.png b/assets/90's Bio.png new file mode 100644 index 0000000..c3c129c Binary files /dev/null and b/assets/90's Bio.png differ diff --git a/assets/Bio.png b/assets/Bio.png new file mode 100644 index 0000000..999c295 Binary files /dev/null and b/assets/Bio.png differ diff --git a/index.html b/index.html index 33ca567..2922113 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,7 @@
-
@@ -22,7 +22,6 @@

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

Clicking "Test It" will open the tool in the current tab.

More tools will come in the future.

-
diff --git a/style.css b/style.css index 70eacf4..e732e43 100644 --- a/style.css +++ b/style.css @@ -2,13 +2,20 @@ body { display: flex; justify-content: center; align-items: center; - height: 100vh; + height: 100%; + min-height: 100%; font-family: monospace; background-color: #2a2a2a; transition: background-color 0.3s, color 0.3s; color: #f0f0f0; flex-direction: column; overflow-x: hidden; + margin: 0; +} + +html { + height: 100%; + min-height: 100%; } ::selection { @@ -90,10 +97,10 @@ img { justify-content: center; min-height: 10vh; max-width: 80vw; - margin-bottom: 50px; + margin-bottom: 50px !important; } -#tool-div { +.tool-div { bottom: 20px !important; padding: 1vh 3vw; background-color: rgba(75, 75, 75, 1); diff --git a/theme.js b/theme.js index 0e4f037..92ab655 100644 --- a/theme.js +++ b/theme.js @@ -1,86 +1,85 @@ const themeToggle = document.getElementById('themeToggle'); const topbar = document.getElementById('topbar'); -const toolContainers = document.querySelectorAll('#tool-div'); -const visit = document.getElementById('visit'); +const toolContainers = document.querySelectorAll('.tool-div'); +const visit = document.getElementById('visit'); const welcome = document.getElementById('welcome'); let isLightMode = false; -themeToggle.addEventListener('click', function() { - if (!isLightMode) { +themeToggle.addEventListener('click', function () { + if (!isLightMode) { isLightMode = true; + document.body.style.backgroundColor = '#C8C8C8'; + topbar.style.backgroundColor = "#B0B0B0E1"; topbar.style.borderColor = "#aeaeaeE1"; - footer.style.backgroundColor = "#B0B0B080"; - footer.style.backgroundColor = "#A5A5A580"; - toolContainers.forEach(toolContainer => { - toolContainer.style.backgroundColor = "#B0B0B0"; - toolContainer.style.borderColor = "#A5A5A5"; - - let children = toolContainer.children; - for (let i = 0; i < children.length; i++) { - children[i].style.color = "#1E1E1E"; + const toolChildren = toolContainer.children; + for (let i = 0; i < toolChildren.length; i++) { + toolChildren[i].style.color = "#1E1E1E"; } + toolContainers.style.backgroundColor = "#B0B0B0"; + toolContainers.style.borderColor = "#aeaeae"; }); - let welcomeChildren = welcome.querySelectorAll('*'); - for (let o = 0; o < welcomeChildren.length; o++) { - welcomeChildren[o].style.color = "#1E1E1E"; - } + + + const welcomeChildren = welcome.querySelectorAll('*'); + welcomeChildren.forEach(child => { + child.style.color = "#1E1E1E"; + }); if (visit) { visit.style.backgroundColor = "#8CC8A5"; visit.style.borderColor = "#A0DCB9"; } - themeToggle.innerHTML = ` - - - - - - - - - - - - - `; + themeToggle.innerHTML = ` + + + + + + + + + + + `; } else { isLightMode = false; document.body.style.backgroundColor = '#2a2a2a'; - toolContainers.forEach(toolContainer => { - let children = toolContainer.children; - for (let i = 0; i < children.length; i++) { - children[i].style.color = "#f0f0f0"; - } - - toolContainer.style.backgroundColor = "#4b4b4b"; - toolContainer.style.borderColor = "#505050"; - }); - - 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)"; topbar.style.borderColor = "#505050E1"; - footer.style.backgroundColor = "#3b3b3b80"; - footer.style.backgroundColor = "#46464680"; + + toolContainers.forEach(toolContainer => { + const toolChildren = toolContainer.children; + for (let i = 0; i < toolChildren.length; i++) { + toolChildren[i].style.color = "#f0f0f0"; + toolChildren[i].style.backgroundColor = ""; + toolChildren[i].style.borderColor = ""; + } + }); + + const welcomeChildren = welcome.querySelectorAll('*'); + welcomeChildren.forEach(child => { + child.style.color = "#f0f0f0"; + }); if (visit) { visit.style.backgroundColor = "#3c7855"; visit.style.borderColor = "#4b8764"; } - themeToggle.innerHTML = ` `; + themeToggle.innerHTML = ` + + + `; + } }); \ No newline at end of file diff --git a/tools.js b/tools.js index 8946254..f24adb6 100644 --- a/tools.js +++ b/tools.js @@ -24,14 +24,14 @@ function renderTools(filteredTools) { filteredTools.sort((a, b) => b.description - a.description); filteredTools.forEach(tool => { const toolItem = document.createElement("div"); - toolItem.id = "tool-div"; + toolItem.className = "tool-div"; toolItem.innerHTML = ` -

${tool.name}

+

↬ ${tool.name} ↫

${tool.subheader}

${tool.description}

${tool.name} Image - Try the "${tool.name}" tool! + Visit "${tool.name}"! `; toolList.appendChild(toolItem); diff --git a/tools.json b/tools.json index b4668f7..13a8c50 100644 --- a/tools.json +++ b/tools.json @@ -2,13 +2,33 @@ { "name": "Mouse Test", "subheader": "Test your mouse's keys", + "subheader-de": "Teste die Tasten deiner Maus aus", "description": "This tool allows you to test your mouse's keys: Left Click; Middle Click; Right Click.", + "description-de": "Mit diesem Tool kannst du die Tasten deiner Maus testen: Linksklick, Mittelklick, Rechtsklick..", "url": "/click" }, { "name": "Keyboard Test", "subheader": "Test your keyboard's keys", + "subheader-de": "Teste die Tasten deiner Tastatur aus", "description": "This tool allows you to test your keyboard's keys. To start, press any key to show its presses.", + "description-de": "Mit diesem Tool kannst du die Tasten deiner Tastatur testen. Drücke eine beliebige Taste, um die Tastendrücke anzuzeigen.", "url": "/keyboard" + }, + { + "name": "Bio", + "subheader": "A page with my links", + "subheader-de": "Eine Seite mit meinen Links", + "description": "This site includes my links like Instagram, so you can contact me easier.", + "description-de": "Diese Seite enthält meine Links wie Instagram, damit du mich einfacher kontaktieren kannst.", + "url": "/bio" + }, + { + "name": "90's Bio", + "subheader": "A 90's inspired site", + "subheader-de": "Eine 90er inspirierte Seite", + "description": "This is a site inspired by a 90's 'About Me' site.", + "description-de": "Diese Seite ist von 90er Websites inspiriert.", + "url": "/old" } ] \ No newline at end of file