more sites and languages coming soon
This commit is contained in:
zyqunix
parent
b3fdfeb589
commit
5c6bc7df83
8 changed files with 85 additions and 57 deletions
3
.vscode/settings.json
vendored
Normal file
3
.vscode/settings.json
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"compile-hero.disable-compile-files-on-did-save-code": true
|
||||
}
|
||||
BIN
assets/90's Bio.png
Normal file
BIN
assets/90's Bio.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
assets/Bio.png
Normal file
BIN
assets/Bio.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2 MiB |
|
|
@ -12,7 +12,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<div id="topbar" class="topbar">
|
||||
<button id="themeToggle" class="theme-button" title="Change Theme to Dark/Light">
|
||||
<button id="themeToggle" class="theme-button" title="Toggle Dark/Light Mode">
|
||||
<svg fill="#747474" height="24px" width="24px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 472.618 472.618" xml:space="preserve" style="--darkreader-inline-fill: #747474;" data-darkreader-inline-fill=""><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <path d="M380.525,337.291c-135.427,0-245.302-109.773-245.302-245.302c0-32.502,6.338-63.575,17.991-91.988 C63.372,36.286,0,124.39,0,227.315c0,135.427,109.875,245.302,245.302,245.302c102.923,0,191.029-63.472,227.316-153.315 C444.201,330.954,413.129,337.291,380.525,337.291z"></path> </g> </g> </g></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -22,7 +22,6 @@
|
|||
<h2>This is a website for future tools. The source code can be found on my <a href="https://github.com/zyqunix/tools" target="_blank">GitHub</a>!</h2>
|
||||
<h3>Clicking "Test It" will open the tool in the current tab.</h3>
|
||||
<h3>More tools will come in the future.</h3>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tools-main" id="toolsMain"></div>
|
||||
|
|
|
|||
13
style.css
13
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);
|
||||
|
|
|
|||
97
theme.js
97
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 = `<svg viewBox="0 0 24 24" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
|
||||
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
|
||||
<g id="SVGRepo_iconCarrier">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12Z" fill="#141414"></path>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C12.5523 2 13 2.44772 13 3V5C13 5.55228 12.5523 6 12 6C11.4477 6 11 5.55228 11 5V3C11 2.44772 11.4477 2 12 2Z" fill="#141414"></path>
|
||||
<path fill-rule="evenodd" clip -rule="evenodd" d="M19.7071 4.29289C20.0976 4.68342 20.0976 5.31658 19.7071 5.70711L17.7071 7.70711C17.3166 8.09763 16.6834 8.09763 16.2929 7.70711C15.9024 7.31658 15.9024 6.68342 16.2929 6.29289L18.2929 4.29289C18.6834 3.90237 19.3166 3.90237 19.7071 4.29289Z" fill="#141414"></path>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M18 12C18 11.4477 18.4477 11 19 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H19C18.4477 13 18 12.5523 18 12Z" fill="#141414"></path>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.2929 16.2929C16.6834 15.9024 17.3166 15.9024 17.7071 16.2929L19.7071 18.2929C20.0976 18.6834 20.0976 19.3166 19.7071 19.7071C19.3166 20.0976 18.6834 20.0976 18.2929 19.7071L16.2929 17.7071C15.9024 17.3166 15.9024 16.6834 16.2929 16.2929Z" fill="#141414"></path>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 18C12.5523 18 13 18.4477 13 19V21C13 21.5523 12.5523 22 12 22C11.4477 22 11 21.5523 11 21V19C11 18.4477 11.4477 18 12 18Z" fill="#141414"></path>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.70711 16.2929C8.09763 16.6834 8.09763 17.3166 7.70711 17.7071L5.70711 19.7071C5.31658 20.0976 4.68342 20.0976 4.29289 19.7071C3.90237 19.3166 3.90237 18.68342 4.29289 18.2929L6.29289 16.2929C6.68342 15.9024 7.31658 15.9024 7.70711 16.2929Z" fill="#141414"></path>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 12C2 11.4477 2.44772 11 3 11H5C5.55228 11 6 11.4477 6 12C6 12.5523 5.55228 13 5 13H3C2.44772 13 2 12.5523 2 12Z" fill="#141414"></path>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.29289 4.29289C4.68342 3.90237 5.31658 3.90237 5.70711 4.29289L7.70711 6.29289C8.09763 6.68342 8.09763 7.31658 7.70711 7.70711C7.31658 8.09763 6.68342 8.09763 6.29289 7.70711L4.29289 5.70711C3.90237 5.31658 3.90237 4.68342 4.29289 4.29289Z" fill="#141414"></path>
|
||||
</g></svg>`;
|
||||
themeToggle.innerHTML = `
|
||||
<svg viewBox="0 0 24 24" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="12" cy="12" r="5" fill="#1E1E1E"></circle>
|
||||
<path d="M12 2v2" stroke="#1E1E1E" stroke-width="2" stroke-linecap="round"></path>
|
||||
<path d="M12 20v2" stroke="#1E1E1E" stroke-width="2" stroke-linecap="round"></path>
|
||||
<path d="M4.22 4.22l1.42 1.42" stroke="#1E1E1E" stroke-width="2" stroke-linecap="round"></path>
|
||||
<path d="M18.36 18.36l1.42 1.42" stroke="#1E1E1E" stroke-width="2" stroke-linecap="round"></path>
|
||||
<path d="M2 12h2" stroke="#1E1E1E" stroke-width="2" stroke-linecap="round"></path>
|
||||
<path d="M20 12h2" stroke="#1E1E1E" stroke-width="2" stroke-linecap="round"></path>
|
||||
<path d="M4.22 19.78l1.42-1.42" stroke="#1E1E1E" stroke-width="2" stroke-linecap="round"></path>
|
||||
<path d="M18.36 5.64l1.42-1.42" stroke="#1E1E1E" stroke-width="2" stroke-linecap="round"></path>
|
||||
</svg>`;
|
||||
|
||||
} 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 = `<svg fill="#747474" height="24" width="24" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 472.618 472.618" xml:space="preserve" style="--darkreader-inline-fill: #000000;" data-darkreader-inline-fill=""><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <path d="M380.525,337.291c-135.427,0-245.302-109.773-245.302-245.302c0-32.502,6.338-63.575,17.991-91.988 C63.372,36.286,0,124.39,0,227.315c0,135.427,109.875,245.302,245.302,245.302c102.923,0,191.029-63.472,227.316-153.315 C444.201,330.954,413.129,337.291,380.525,337.291z"></path> </g> </g> </g></svg>`;
|
||||
themeToggle.innerHTML = `
|
||||
<svg fill="#747474" height="24px" width="24px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 472.618 472.618" xml:space="preserve" style="--darkreader-inline-fill: #747474;" data-darkreader-inline-fill=""><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <path d="M380.525,337.291c-135.427,0-245.302-109.773-245.302-245.302c0-32.502,6.338-63.575,17.991-91.988 C63.372,36.286,0,124.39,0,227.315c0,135.427,109.875,245.302,245.302,245.302c102.923,0,191.029-63.472,227.316-153.315 C444.201,330.954,413.129,337.291,380.525,337.291z"></path> </g> </g> </g></svg>
|
||||
|
||||
`;
|
||||
|
||||
}
|
||||
});
|
||||
6
tools.js
6
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 = `
|
||||
<h1 class="tool-header">${tool.name}</h1>
|
||||
<h1 class="tool-header">↬ ${tool.name} ↫</h1>
|
||||
<h2 class="tool-subhead"><u>${tool.subheader}</u></h2>
|
||||
<h2 class="tool-desc">${tool.description}</h2>
|
||||
<img class="tool-media" src="assets/${tool.name}.png" alt="${tool.name} Image">
|
||||
<a id="visit" class="visit-tool" href="${tool.url}">Try the "${tool.name}" tool!</a>
|
||||
<a id="visit" class="visit-tool" href="${tool.url}">Visit "${tool.name}"!</a>
|
||||
`;
|
||||
|
||||
toolList.appendChild(toolItem);
|
||||
|
|
|
|||
20
tools.json
20
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"
|
||||
}
|
||||
]
|
||||
Loading…
Add table
Reference in a new issue