zyqunix/tools
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

huge change:

Browse source 
uses json instead of absolute tool-div adding
This commit is contained in:
zyqunix 2024-11-18 21:50:30 +01:00
parent 149d313754
commit e145681c9d
13 changed files with 434 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
assets/Keyboard Test.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 51 KiB

BIN
assets/Mouse Test.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 60 KiB

BIN
assets/keyboard.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 58 KiB

2
bio/index.html
View file

@ -9,7 +9,7 @@
<meta property="og:title" content="zy's page"> <meta property="og:title" content="zy's page">
<meta property="og:description" content="The BEST Bio Page!"> <meta property="og:description" content="The BEST Bio Page!">
<meta property="og:image" content="https://easyfiles.cc/2024/4/e0482551-b6a6-4739-bf0a-758756e8c464/RFbdMMB.png"> <meta property="og:image" content="https://rimgo.pussthecat.org/RFbdMMB.png">
<link rel="shortcut icon" href="https://easyfiles.cc/2024/4/e0482551-b6a6-4739-bf0a-758756e8c464/RFbdMMB.png" type="image/x-icon"> <link rel="shortcut icon" href="https://easyfiles.cc/2024/4/e0482551-b6a6-4739-bf0a-758756e8c464/RFbdMMB.png" type="image/x-icon">

2
click/index.html
View file

@ -6,7 +6,7 @@
<title>Click Test</title> <title>Click Test</title>
<meta name="description" content="Clicking Test Without Any Trackers, Fully Open-Source on GitHub! (https://github.com/zyqunix/click_test)"> <meta name="description" content="Clicking Test Without Any Trackers, Fully Open-Source on GitHub! (https://github.com/zyqunix/click_test)">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="https://easyfiles.cc/2024/10/bbacd5fc-c1bc-45da-9eb1-9057256cfe23/RFbdMMB.png" type="image/x-icon"> <link rel="shortcut icon" href="https://rimgo.pussthecat.org/RFbdMMB.png" type="image/x-icon">
</head> </head>
<body> <body>

13
cool/index.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cool</title>
</head>
<body>
<canvas id="canvas" style="position: fixed; inset: 0px; z-index: 0; width: 1104px; height: 772px;" width="2208" height="1544"></canvas>
<script src="script.js"></script>
</body>
</html>

207
cool/script.js Normal file
View file

@ -0,0 +1,207 @@
var background_color = "#fafafa";
var canvas = document.getElementById("canvas");
var renderer = new THREE.WebGLRenderer( { canvas: canvas } );
var scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff);
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var win_width = 0, win_height = 0;
function update_size() {
if (window.innerWidth != win_width || window.innerHeight != win_height) {
win_width = window.innerWidth;
win_height = window.innerHeight;
renderer.setPixelRatio(window.devicePixelRatio || 1);
renderer.setSize(win_width, win_height);
camera.aspect = win_width / win_height;
camera.updateProjectionMatrix();
}
}
update_size();
var clock = new THREE.Clock();
var delta_time = 1/60.0;
var elapsed_time = 0;
var geometry = new THREE.Geometry();
var radius = 10;
var depth_step = 10;
var num_rings = 100;
var num_segments = 24;
var outer_h = Math.max($("#outer").height(), 10000) - 1200;
var content_h = Math.max($("#content").height(), 10000);
var content_h2 = $("#content").height() + 9200;
var base_colors = [];
var colors = [];
var num_colors = num_rings * num_segments * 2;
for (var c = 0; c < num_colors; c++) {
base_colors[c] = new THREE.Color(Math.random(), Math.random(), Math.random());
colors[c] = base_colors[c].clone();
}
function lerp(res, color1, color2, t) {
res.r = (1-t)*color1.r + t*color2.r;
res.g = (1-t)*color1.g + t*color2.g;
res.b = (1-t)*color1.b + t*color2.b;
}
function update_colors(delta, progress) {
var bias = 1;
var bg = new THREE.Color(background_color);
var h1 = content_h - 6000;
var h2 = content_h + 400;
if (progress < h1) {
bias = 0;
} else if (progress < h2) {
bias = (progress - h1) / (h2 - h1);
}
//if (s > content_h) {
// if (s > content_h + 1000) {
// color = new THREE.Color(1, 1, 1);
// } else {
// var q = (s - content_h) / 1000;
// //color = new THREE.Color(r + (1-r) * q, g + (1-g) * q, b + (1-b) * q);
// color = new THREE.Color();
// color.setHSL(0, 0.5, q * 0.6 + 0.4);
// }
//} else {
// var q = (content_h-s) / content_h;
// color = new THREE.Color();
// color.setHSL(q, 0.5, 0.4);
//}
for (var c = 0; c < num_colors; c++) {
var hsl = base_colors[c].getHSL();
var h = hsl.h;
h = (h + delta * (1+c/100)) % 1;
base_colors[c].setHSL(h, hsl.s, hsl.l);
lerp(colors[c], bg, base_colors[c], bias);
}
}
update_colors(0, 0);
var verts = [];
var speeds = [];
var phases = [];
function init_verts() {
var x = 0, y = 0, z = 0;
var dz = -depth_step / num_segments;
for (var r = 0; r < num_rings; r++) {
for (var s = 0; s < num_segments; s++) {
var angle = Math.PI * 2 * (s / num_segments);
var x = Math.cos(angle) * radius;
var y = Math.sin(angle) * radius;
verts.push(new THREE.Vector3(x, y, z));
speeds.push(Math.random());
phases.push(Math.random());
z += dz;
}
}
}
init_verts();
function update_verts(t) {
var d = num_rings * 0.4;
var v = 0;
for (var r = 0; r < num_rings; r++) {
for (var s = 0; s < num_segments; s++) {
if (r > d) {
var p = 0.5 + 0.5 * Math.sin(t*speeds[v] + phases[v])
var q = (r-d)/d * 1.1;
var rad = (1-p * q) * radius;
var angle = Math.PI * 2 * (s / num_segments);
var x = Math.cos(angle) * rad;
var y = Math.sin(angle) * rad;
var vert = verts[v];
vert.x = x;
vert.y = y;
}
v++;
}
}
}
update_verts(0);
function mkgeometry(geometry) {
var fi = 0;
var f = 0;
var vi = 0;
var v = 0;
var x = 0, y = 0, z = 0;
var dz = -depth_step / num_segments;
var c = 0;
for (var r = 0; r < num_rings; r++) {
for (var s = 0; s < num_segments; s++) {
var vert1 = verts[vi];
var vert2 = vi - 1 >= 0 ? verts[vi - 1] : verts[0];
var vert3 = vi - num_segments >= 0 ? verts[vi - num_segments] : verts[0];
var vert4 = vi - num_segments - 1 >= 0 ? verts[vi - num_segments - 1] : verts[0];
vi++;
geometry.vertices[v++] = vert1;
geometry.vertices[v++] = vert2;
geometry.vertices[v++] = vert4;
geometry.faces[f++] = new THREE.Face3(fi, fi+1, fi+2, null, colors[c++]);
fi += 3;
geometry.vertices[v++] = vert1;
geometry.vertices[v++] = vert4;
geometry.vertices[v++] = vert3;
geometry.faces[f++] = new THREE.Face3(fi, fi+1, fi+2, null, colors[c++]);
fi += 3;
old_x = x;
old_y = y;
old_z = z;
z += dz;
}
}
geometry.verticesNeedUpdate = true;
geometry.colorsNeedUpdate = true;
geometry.elementsNeedUpdate = true;
}
mkgeometry(geometry);
var material = new THREE.MeshBasicMaterial({ vertexColors: THREE.VertexColors, color: background_color });
material.depthFunc = THREE.AlwaysDepth;
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
var s = 0;
var total_s = 0;
var first_time = true;
var animate = function () {
//console.log("updating background");
update_size();
delta_time = clock.getDelta();
elapsed_time = clock.elapsedTime;
var win = $(window);
var prev_s = s;
s = $(window).scrollTop();
var ds = Math.abs(s - prev_s);
camera.position.z = -s/outer_h*(num_rings * depth_step);
//var color;
//color = new THREE.Color("#efefef");
//if (s > content_h) {
// if (s > content_h + 1000) {
// color = new THREE.Color(1, 1, 1);
// } else {
// var q = (s - content_h) / 1000;
// //color = new THREE.Color(r + (1-r) * q, g + (1-g) * q, b + (1-b) * q);
// color = new THREE.Color();
// color.setHSL(0, 0.5, q * 0.6 + 0.4);
// }
//} else {
// var q = (content_h-s) / content_h;
// color = new THREE.Color();
// color.setHSL(q, 0.5, 0.4);
//}
//material.color = color;
if (ds > 0 || first_time) {
total_s += ds * 0.01;
update_colors(ds * 0.00001, s);
update_verts(total_s);
mkgeometry(mesh.geometry);
first_time = false;
}
renderer.render(scene, camera);
requestAnimationFrame( animate );
};
animate();
//setInterval(animate, 500); // backup as sometimes requestAnimationFrame doesn't trigger in Firefox

34
index.html
View file

@ -5,6 +5,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>zyq's Tools</title> <title>zyq's Tools</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<meta name="description" content="Clicking Test Without Any Trackers, Fully Open-Source on GitHub! (https://github.com/zyqunix/click_test)">
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="https://rimgo.pussthecat.org/RFbdMMB.png" type="image/x-icon">
</head> </head>
<body> <body>
<div id="topbar" class="topbar"> <div id="topbar" class="topbar">
@ -18,34 +22,16 @@
<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> <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>Clicking "Test It" will open the tool in the current tab.</h3>
<h3>More tools will come in the future.</h3> <h3>More tools will come in the future.</h3>
<h3>MOTD: "To the mind that is still, the whole universe surrenders." - Lao Tzu</h3>
</div> </div>
<div class="tools-main"> <div class="tools-main" id="toolsMain"></div>
<div id="tool-div" class="click-test">
<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">
<button class="prev" onclick="changeSlide(-1)">❮</button>
<button class="next" onclick="changeSlide(1)">❯</button>
</div>
<a id="visit" class="visit-tool" href="/click">Test It</a>
</div>
<div id="tool-div" class="mouse-test"> <!--<div id="footer">© zyqunix under the MIT License</div> -->
<h1 class="tool-header">Keyboard Test</h1>
<h2 class="tool-desc">This allows you to test your keyboard's keys to see if they all work!</h2>
<div class="slideshow-container">
<img class="tool-media" src="assets/keyboard.png" alt="Keyboard Image">
</div>
<a id="visit" class="visit-tool" href="/keyboard">Test It</a>
</div>
</div>
<script src="tools.js"></script>
<script src="quote.js"></script>
<!-- <script src="slide.js"></script> -->
<script src="theme.js"></script> <script src="theme.js"></script>
<script src="slide.js"></script>
</body> </body>
</html> </html>

72
quote.js Normal file
View file

@ -0,0 +1,72 @@
const quotes = [
"The journey of a thousand miles begins with one step. - Lao Tzu",
"Knowing others is wisdom, knowing yourself is Enlightenment. - Lao Tzu",
"A man who does not plan long ahead will find trouble right at his door. - Confucius",
"The man who moves a mountain begins by carrying away small stones. - Confucius",
"He who asks a question is a fool for five minutes; he who does not ask a question remains a fool forever. - Confucius",
"Life is really simple, but we insist on making it complicated. - Confucius",
"When it is obvious that the goals cannot be reached, don't adjust the goals, adjust the action steps. - Confucius",
"The superior man is modest in his speech but exceeds in his actions. - Confucius",
"Our greatest glory is not in never falling, but in rising every time we fall. - Confucius",
"Real knowledge is to know the extent of one's ignorance. - Confucius",
"To be wronged is nothing unless you continue to remember it. - Confucius",
"Silence is a true friend who never betrays. - Confucius",
"Choose a job you love, and you will never have to work a day in your life. - Confucius",
"The more man meditates upon good thoughts, the better will be his world and the world at large. - Confucius",
"To see what is right and not do it is the want of courage. - Confucius",
"I hear and I forget. I see and I remember. I do and I understand. - Confucius",
"When we see men of worth, we should think of equaling them; when we see men of a contrary character, we should turn inwards and examine ourselves. - Confucius",
"The superior man is modest in his speech, but exceeds in his actions. - Confucius",
"Ignorance is the night of the mind, but a night without moon and star. - Confucius",
"Wherever you go, go with all your heart. - Confucius",
"Wheresoever you go, go with all your heart. - Confucius",
"The gem cannot be polished without friction, nor man perfected without trials. - Confucius",
"When anger rises, think of the consequences. - Confucius",
"Better a diamond with a flaw than a pebble without. - Confucius",
"By nature, men are nearly alike; by practice, they get to be wide apart. - Confucius",
"When it is obvious that the goals cannot be reached, don't adjust the goals, adjust the action steps. - Confucius",
"What you do not want done to yourself, do not do to others. - Confucius",
"He who learns but does not think, is lost! He who thinks but does not learn is in great danger. - Confucius",
"To see and listen to the wicked is already the beginning of wickedness. - Confucius",
"Respect yourself and others will respect you. - Confucius",
"The superior man understands what is right; the inferior man understands what will sell. - Confucius",
"Without feelings of respect, what is there to distinguish men from beasts? - Confucius",
"Study the past if you would define the future. - Confucius",
"Success depends upon previous preparation, and without such preparation there is sure to be failure. - Confucius",
"If you think in terms of a year, plant a seed; if in terms of ten years, plant trees; if in terms of 100 years, teach the people. - Confucius",
"Wheresoever you go, go with all your heart. - Confucius",
"I hear and I forget. I see and I remember. I do and I understand. - Confucius",
"The man who asks a question is a fool for a minute, the man who does not ask is a fool for life. - Confucius",
"To know what is right and not do it is the worst cowardice. - Confucius",
"Real knowledge is to know the extent of one's ignorance. - Confucius",
"When you see a good person, think of becoming like them. When you see someone not so good, reflect on your own weak points. - Confucius",
"When it is obvious that the goals cannot be reached, don't adjust the goals, adjust the action steps. - Confucius",
"He who learns but does not think, is lost! He who thinks but does not learn is in great danger. - Confucius",
"The superior man is modest in his speech but exceeds in his actions. - Confucius",
"When we see men of a contrary character, we should turn inwards and examine ourselves. - Confucius",
"They must often change who would be constant in happiness or wisdom. - Confucius",
"The journey of a thousand miles begins with one step. - Lao Tzu",
"When I let go of what I am, I become what I might be. - Lao Tzu",
"Kindness in words creates confidence. Kindness in thinking creates profoundness. Kindness in giving creates love. - Lao Tzu",
"Mastering others is strength. Mastering yourself is true power. - Lao Tzu",
"Being deeply loved by someone gives you strength, while loving someone deeply gives you courage. - Lao Tzu",
"Life is a series of natural and spontaneous changes. Don't resist them; that only creates sorrow. Let reality be reality. Let things flow naturally forward in whatever way they like. - Lao Tzu",
"The wise man does not lay up his own treasures. The more he gives to others, the more he has for his own. - Lao Tzu",
"To the mind that is still, the whole universe surrenders. - Lao Tzu",
"The truth is not always beautiful, nor beautiful words the truth. - Lao Tzu",
"Act without expectation. - Lao Tzu",
"Nature does not hurry, yet everything is accomplished. - Lao Tzu",
"Time is a created thing. To say 'I don't have time,' is like saying, 'I don't want to.' - Lao Tzu",
"Be content with what you have; rejoice in the way things are. When you realize there is nothing lacking, the whole world belongs to you. - Lao Tzu",
"Those who know do not speak. Those who speak do not know. - Lao Tzu",
"Life and death are one thread, the same line viewed from different sides. - Lao Tzu",
"Do the difficult things while they are easy and do the great things while they are small. A journey of a thousand miles must begin with a single step. - Lao Tzu"
];
const randomIndex = Math.floor(Math.random() * quotes.length);
const randomQuote = quotes[randomIndex];
const motd = document.createElement('h3');
motd.id = "motd";
motd.innerHTML = `MOTD: ${randomQuote}`;
document.getElementById('welcome').appendChild(motd)

54
style.css
View file

@ -3,7 +3,6 @@ body {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100vh; height: 100vh;
margin: 0;
font-family: monospace; font-family: monospace;
background-color: #2a2a2a; background-color: #2a2a2a;
transition: background-color 0.3s, color 0.3s; transition: background-color 0.3s, color 0.3s;
@ -39,18 +38,21 @@ img {
overflow-x: hidden; overflow-x: hidden;
} }
.home { #footer {
text-decoration: none; display: flex;
color: #f0f0f0; align-items: center;
padding: 10px; justify-content: center;
background-color: rgba(75, 75, 75, 1); width: 100%;
border: 2px solid rgba(80, 80, 80, 1); max-width: 100vw;
border-radius: 7px; position: fixed;
transition: 0.3s; background-color: #3b3b3b80;
margin-left: 25px; padding: 1.5vh 2vw;
margin-right: -10px; backdrop-filter: blur(3px);
user-select: none; font-size: large;
cursor: pointer !important; bottom: 0;
border-top: 1px solid #46464680;
z-index: 9999;
overflow-x: hidden;
} }
.theme-button { .theme-button {
@ -58,22 +60,15 @@ img {
background: none; background: none;
border: none; border: none;
transition: 0.3s; transition: 0.3s;
} margin-left: 30px;
.home:hover {
background-color: rgba(85, 85, 85, 1);
border: 2px solid rgba(90, 90, 90, 1);
text-decoration: underline;
} }
.welcome { .welcome {
text-align: center; text-align: center;
margin: 0; margin: 0;
width: 100vw; width: 60vw;
max-width: 1920px; max-width: 1920px;
line-height: 1.4; line-height: 1.4;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 25px; padding-bottom: 25px;
padding-top: 60px; padding-top: 60px;
box-sizing: border-box; box-sizing: border-box;
@ -94,11 +89,12 @@ img {
gap: 2.5vw; gap: 2.5vw;
justify-content: center; justify-content: center;
min-height: 10vh; min-height: 10vh;
max-width: 100vw; max-width: 80vw;
padding-bottom: 50px; margin-bottom: 50px;
} }
#tool-div { #tool-div {
bottom: 20px !important;
padding: 1vh 3vw; padding: 1vh 3vw;
background-color: rgba(75, 75, 75, 1); background-color: rgba(75, 75, 75, 1);
border: 2px solid rgba(80, 80, 80, 1); border: 2px solid rgba(80, 80, 80, 1);
@ -111,6 +107,7 @@ img {
justify-content: center; justify-content: center;
height: auto; height: auto;
max-width: 90vw; max-width: 90vw;
width: 50vw;
box-shadow: 0 4px 10px rgba(16, 16, 16, 0.5); box-shadow: 0 4px 10px rgba(16, 16, 16, 0.5);
} }
@ -127,14 +124,9 @@ img {
} }
.tool-media { .tool-media {
height: 200px; max-width: 30vw;
border-radius: 10px; border-radius: 5px;
margin: 10px; margin: 10px;
transition: 0.25s ease-in-out;
}
.tool-image.active {
opacity: 1;
} }
.visit-tool { .visit-tool {

83
theme.js
View file

@ -1,39 +1,40 @@
const themeToggle = document.getElementById('themeToggle'); const themeToggle = document.getElementById('themeToggle');
const topbar = document.getElementById('topbar') const topbar = document.getElementById('topbar');
const toolContainer = document.getElementById('tool-div') const toolContainers = document.querySelectorAll('#tool-div');
const visit = document.getElementById('visit') const visit = document.getElementById('visit');
const welcome = document.getElementById('welcome') const welcome = document.getElementById('welcome');
const homeButton = document.getElementById('home')
let isLightMode = false; let isLightMode = false;
themeToggle.addEventListener('click', function() { themeToggle.addEventListener('click', function() {
if (!isLightMode) { 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; isLightMode = true;
document.body.style.backgroundColor = '#C8C8C8';
topbar.style.backgroundColor = "#B0B0B0E1";
topbar.style.borderColor = "#aeaeaeE1";
footer.style.backgroundColor = "#B0B0B080";
footer.style.backgroundColor = "#A5A5A580";
let children = toolContainer.children;
for (let i = 0; i < children.length; i++) { toolContainers.forEach(toolContainer => {
children[i].style.color = "#1E1E1E"; 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";
}
});
let welcomeChildren = welcome.querySelectorAll('*'); let welcomeChildren = welcome.querySelectorAll('*');
for (let o = 0; o< welcomeChildren.length; o++) { for (let o = 0; o < welcomeChildren.length; o++) {
welcomeChildren[o].style.color = "#1E1E1E"; welcomeChildren[o].style.color = "#1E1E1E";
} }
visit.style.backgroundColor = "#8CC8A5"; if (visit) {
visit.style.borderColor = "#A0DCB9"; 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"> 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_bgCarrier" stroke-width="0"></g>
@ -41,7 +42,7 @@ themeToggle.addEventListener('click', function() {
<g id="SVGRepo_iconCarrier"> <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="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="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="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="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="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="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>
@ -55,29 +56,31 @@ themeToggle.addEventListener('click', function() {
document.body.style.backgroundColor = '#2a2a2a'; document.body.style.backgroundColor = '#2a2a2a';
home.style.backgroundColor = "#4b4b4b"; toolContainers.forEach(toolContainer => {
home.style.borderColor = "#505050"; let children = toolContainer.children;
for (let i = 0; i < children.length; i++) {
children[i].style.color = "#f0f0f0";
}
let children = toolContainer.children; toolContainer.style.backgroundColor = "#4b4b4b";
for (let i = 0; i < children.length; i++) { toolContainer.style.borderColor = "#505050";
children[i].style.color = "#f0f0f0"; });
}
let welcomeChildren = welcome.querySelectorAll('*'); let welcomeChildren = welcome.querySelectorAll('*');
for (let o = 0; o< welcomeChildren.length; o++) { for (let o = 0; o < welcomeChildren.length; o++) {
welcomeChildren[o].style.color = "#f0f0f0"; welcomeChildren[o].style.color = "#f0f0f0";
} }
topbar.style.backgroundColor = "rgba(59, 59, 59, 0.885)"; topbar.style.backgroundColor = "rgba(59, 59, 59, 0.885)";
topbar.style.borderColor = "#505050"; topbar.style.borderColor = "#505050E1";
footer.style.backgroundColor = "#3b3b3b80";
footer.style.backgroundColor = "#46464680";
toolContainer.style.backgroundColor = "#4b4b4b"; if (visit) {
toolContainer.style.borderColor = "#505050"; visit.style.backgroundColor = "#3c7855";
visit.style.borderColor = "#4b8764";
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="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>`;
} }
}); });

50
tools.js Normal file
View file

@ -0,0 +1,50 @@
async function fetchTools() {
try {
const response = await fetch('tools.json');
if (!response.ok) {
throw new Error("VPS response is bad");
}
const tools = await response.json();
return tools;
} catch (error) {
console.error("Failed to fetch tools:", error);
return [];
};
};
function renderTools(filteredTools) {
const toolList = document.getElementById('toolsMain');
toolList.innerHTML = "";
if (filteredTools.length === 0) {
toolList.innerHTML = "<div class='text-center'>No tools match the selected filter.</div>"
return;
}
filteredTools.sort((a, b) => b.description - a.description);
filteredTools.forEach(tool => {
const toolItem = document.createElement("div");
toolItem.id = "tool-div";
toolItem.innerHTML = `
<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>
`;
toolList.appendChild(toolItem);
});
};
async function filterTools(filterType) {
const tools = await fetchTools();
let filteredTools;
if (filterType) {
filteredTools = tools;
}
renderTools(filteredTools);
}
filterTools('all');

14
tools.json Normal file
View file

@ -0,0 +1,14 @@
[
{
"name": "Mouse Test",
"subheader": "Test your mouse's keys",
"description": "This tool allows you to test your mouse's keys: Left Click; Middle Click; Right Click.",
"url": "/click"
},
{
"name": "Keyboard Test",
"subheader": "Test your keyboard's keys",
"description": "This tool allows you to test your keyboard's keys. To start, press any key to show its presses.",
"url": "/keyboard"
}
]