huge change:
uses json instead of absolute tool-div adding
This commit is contained in:
zyqunix
parent
149d313754
commit
e145681c9d
13 changed files with 434 additions and 97 deletions
BIN
assets/Keyboard Test.png
Normal file
BIN
assets/Keyboard Test.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
BIN
assets/Mouse Test.png
Normal file
BIN
assets/Mouse Test.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 58 KiB |
|
|
@ -9,7 +9,7 @@
|
|||
|
||||
<meta property="og:title" content="zy's 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">
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<title>Click Test</title>
|
||||
<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://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>
|
||||
<body>
|
||||
|
||||
|
|
|
|||
13
cool/index.html
Normal file
13
cool/index.html
Normal 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
207
cool/script.js
Normal 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
|
||||
32
index.html
32
index.html
|
|
@ -5,6 +5,10 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>zyq's Tools</title>
|
||||
<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>
|
||||
<body>
|
||||
<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>
|
||||
<h3>Clicking "Test It" will open the tool in the current tab.</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 class="tools-main">
|
||||
<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 class="tools-main" id="toolsMain"></div>
|
||||
|
||||
<div id="tool-div" class="mouse-test">
|
||||
<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>
|
||||
<!--<div id="footer">© zyqunix under the MIT License</div> -->
|
||||
|
||||
<script src="tools.js"></script>
|
||||
<script src="quote.js"></script>
|
||||
<!-- <script src="slide.js"></script> -->
|
||||
<script src="theme.js"></script>
|
||||
<script src="slide.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
72
quote.js
Normal file
72
quote.js
Normal 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
54
style.css
|
|
@ -3,7 +3,6 @@ body {
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
font-family: monospace;
|
||||
background-color: #2a2a2a;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
|
|
@ -39,18 +38,21 @@ img {
|
|||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.home {
|
||||
text-decoration: none;
|
||||
color: #f0f0f0;
|
||||
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;
|
||||
user-select: none;
|
||||
cursor: pointer !important;
|
||||
#footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
max-width: 100vw;
|
||||
position: fixed;
|
||||
background-color: #3b3b3b80;
|
||||
padding: 1.5vh 2vw;
|
||||
backdrop-filter: blur(3px);
|
||||
font-size: large;
|
||||
bottom: 0;
|
||||
border-top: 1px solid #46464680;
|
||||
z-index: 9999;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.theme-button {
|
||||
|
|
@ -58,22 +60,15 @@ img {
|
|||
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;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.welcome {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
width: 100vw;
|
||||
width: 60vw;
|
||||
max-width: 1920px;
|
||||
line-height: 1.4;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
padding-bottom: 25px;
|
||||
padding-top: 60px;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -94,11 +89,12 @@ img {
|
|||
gap: 2.5vw;
|
||||
justify-content: center;
|
||||
min-height: 10vh;
|
||||
max-width: 100vw;
|
||||
padding-bottom: 50px;
|
||||
max-width: 80vw;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
#tool-div {
|
||||
bottom: 20px !important;
|
||||
padding: 1vh 3vw;
|
||||
background-color: rgba(75, 75, 75, 1);
|
||||
border: 2px solid rgba(80, 80, 80, 1);
|
||||
|
|
@ -111,6 +107,7 @@ img {
|
|||
justify-content: center;
|
||||
height: auto;
|
||||
max-width: 90vw;
|
||||
width: 50vw;
|
||||
box-shadow: 0 4px 10px rgba(16, 16, 16, 0.5);
|
||||
}
|
||||
|
||||
|
|
@ -127,14 +124,9 @@ img {
|
|||
}
|
||||
|
||||
.tool-media {
|
||||
height: 200px;
|
||||
border-radius: 10px;
|
||||
max-width: 30vw;
|
||||
border-radius: 5px;
|
||||
margin: 10px;
|
||||
transition: 0.25s ease-in-out;
|
||||
}
|
||||
|
||||
.tool-image.active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.visit-tool {
|
||||
|
|
|
|||
79
theme.js
79
theme.js
|
|
@ -1,39 +1,40 @@
|
|||
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')
|
||||
const topbar = document.getElementById('topbar');
|
||||
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) {
|
||||
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;
|
||||
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++) {
|
||||
children[i].style.color = "#1E1E1E";
|
||||
}
|
||||
|
||||
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";
|
||||
}
|
||||
});
|
||||
|
||||
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";
|
||||
}
|
||||
|
||||
visit.style.backgroundColor = "#8CC8A5";
|
||||
visit.style.borderColor = "#A0DCB9";
|
||||
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>
|
||||
|
|
@ -41,7 +42,7 @@ themeToggle.addEventListener('click', function() {
|
|||
<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="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>
|
||||
|
|
@ -55,29 +56,31 @@ themeToggle.addEventListener('click', function() {
|
|||
|
||||
document.body.style.backgroundColor = '#2a2a2a';
|
||||
|
||||
home.style.backgroundColor = "#4b4b4b";
|
||||
home.style.borderColor = "#505050";
|
||||
toolContainers.forEach(toolContainer => {
|
||||
let children = toolContainer.children;
|
||||
for (let i = 0; i < children.length; i++) {
|
||||
children[i].style.color = "#f0f0f0";
|
||||
}
|
||||
|
||||
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++) {
|
||||
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 = "#505050";
|
||||
topbar.style.borderColor = "#505050E1";
|
||||
footer.style.backgroundColor = "#3b3b3b80";
|
||||
footer.style.backgroundColor = "#46464680";
|
||||
|
||||
toolContainer.style.backgroundColor = "#4b4b4b";
|
||||
toolContainer.style.borderColor = "#505050";
|
||||
|
||||
visit.style.backgroundColor = "#3c7855";
|
||||
visit.style.borderColor = "#4b8764";
|
||||
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>`;
|
||||
|
||||
}
|
||||
});
|
||||
50
tools.js
Normal file
50
tools.js
Normal 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
14
tools.json
Normal 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"
|
||||
}
|
||||
]
|
||||
Loading…
Add table
Reference in a new issue