zyqunix/pages
1
0
Fork 0
mirror of https://github.com/zyqunix/tools.git synced 2025-07-06 06:20:30 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

make portfolio the landing page

Browse source
This commit is contained in:
zyqunix 2025-04-22 00:17:40 +02:00
parent 1a8311a035
commit 02c3312728
No known key found for this signature in database
GPG key ID: 134A8DEEA83B80E6
15 changed files with 1070 additions and 1054 deletions
Download patch file Download diff file Expand all files Collapse all files

59
sitemap/index.html Normal file
View file

@ -0,0 +1,59 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>zyq's Tools</title>
<meta name="description" content="Useful Tests Without Any Trackers, Fully Open-Source on GitHub!">
<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">
<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>
<select title="Change Language" name="Language" id="langauge-selector">
<option value="en">English 🇬🇧</option>
<option value="de">Deutsch 🇩🇪</option>
</select>
<h6>why is this one so much worse than /projects T_T T_T T_T</h6>
</div>
<div id="welcome" class="welcome">
<h1 id="welcome-title">Welcome!</h1>
<h2 id="welcome-description">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 id="welcome-test-it">Clicking "Test It" will open the tool in the current tab.</h3>
<h3 id="welcome-future">More tools will come in the future.</h3>
</div>
<div class="tools-main" id="toolsMain"></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="translate.js"></script>
</body>
</html>

0
sitemap/index.js Normal file
View file

72
sitemap/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)

231
sitemap/style.css Normal file
View file

@ -0,0 +1,231 @@
@font-face {
font-family: 'Hack';
src: url('/Fonts/Hack/Hack-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'JetBrainsMono';
src: url('/Fonts/JetBrainsMono/JetBrainsMono-Regular.woff2');
}
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 100vh;
margin: 0;
font-family: monospace;
font-size: 1rem;
background-color: #2a2a2a;
color: #f0f0f0;
overflow-x: hidden;
font-family: 'Hack', 'JetBrainsMono', monospace;
}
html {
height: 100%;
}
::selection {
background-color: #c099ff;
color: #2a2a2a;
}
#motd {
font-style: italic;
}
.topbar {
display: flex;
align-items: center;
justify-content: start;
gap: 2vw;
width: 100%;
max-width: 100vw;
position: fixed;
background-color: rgba(59, 59, 59, 0.885);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
font-size: large;
top: 0;
border-bottom: 1px solid rgba(70, 70, 70, 0.885);
z-index: 9999;
overflow-x: hidden;
}
.welcome {
text-align: center;
margin: 0;
width: 60vw;
max-width: 1920px;
line-height: 1.4;
padding-top: 60px;
box-sizing: border-box;
overflow-wrap: break-word;
}
.welcome * {
color: #f0f0f0;
}
#welcome :not(h1) {
margin: 0 0 10px 0;
}
.tools-main {
display: flex;
flex-wrap: wrap;
gap: 2.5vw;
justify-content: center;
min-height: 10vh;
max-width: 80vw;
margin-bottom: 100px;
}
.tool-div {
bottom: 20px !important;
background-color: rgba(50, 50, 50, 1);
border: 2px solid rgba(65, 65, 65, 1);
border-radius: 7px;
transition: 0.3s;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: auto;
max-width: 90vw;
width: 50vw;
box-shadow: 0 4px 10px rgba(16, 16, 16, 0.5);
scale: 0.79;
margin-bottom: -100px;
}
.tool-header {
margin-bottom: 0;
padding-top: 15px;
text-decoration: underline;
}
.tool-desc {
margin: 5px;
font-weight: normal;
max-width: 90%;
}
.tool-media {
max-width: 30vw;
border-radius: 5px;
margin: 10px;
}
.visit-tool {
padding: 10px 20px;
background-color: rgb(40, 100, 65);
color: #fff;
border: 2px solid rgb(75, 135, 100);
border-radius: 4px;
transition: 0.1s;
font-weight: bolder;
font-size: large;
margin: 5px 0 15px 0;
}
.visit-tool:hover {
background-color: rgb(35, 95, 60);
border-color: rgb(90, 150, 115);
}
.slideshow-container {
position: relative;
width: 90vw;
max-width: 500px;
margin: auto;
}
.tool-image {
width: 100%;
max-width: 90vw;
max-height: 40vh;
border-radius: 10px;
object-fit: contain;
}
.theme-button {
cursor: pointer;
background: none;
border: none;
transition: 0.3s;
margin-left: 30px;
}
@media (max-width: 768px) {
.tools-main {
max-width: 100%;
gap: 1.5vw;
}
.tool-div {
width: 100%;
scale: 1;
margin-bottom: 20px;
font-size: 0.9rem;
}
.tool-header {
font-size: 1.2rem;
}
.tool-desc {
font-size: 0.8rem;
}
.visit-tool {
font-size: 0.9rem;
padding: 8px 16px;
}
.welcome {
font-size: 0.9rem;
width: 90vw;
padding-top: 40px;
}
}
@media (max-width: 480px) {
body {
margin: 0 10px;
}
.tools-main {
max-width: 100%;
}
.tool-div {
width: 100%;
scale: 1;
margin-bottom: 20px;
font-size: 0.8rem;
}
.tool-header {
font-size: 1rem;
}
.tool-desc {
font-size: 0.75rem;
}
.visit-tool {
font-size: 0.85rem;
padding: 6px 12px;
}
.welcome {
font-size: 0.8rem;
width: 100%;
margin-top: 70px;
}
}

56
sitemap/tools.js Normal file
View file

@ -0,0 +1,56 @@
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, language = 'en') {
const toolList = document.getElementById('toolsMain');
toolList.innerHTML = "";
filteredTools.forEach(tool => {
const toolData = {
name: language === 'de' ? tool["name-de"] : tool.name,
subheader: language === 'de' ? tool["subheader-de"] : tool.subheader,
description: language === 'de' ? tool["description-de"] : tool.description,
url: tool.url
};
const toolItem = document.createElement("div");
toolItem.className = "tool-div";
toolItem.innerHTML = `
<h1 class="tool-header">↬ ${toolData.name} ↫</h1>
<h2 class="tool-subhead">${toolData.subheader}</h2>
<h2 class="tool-desc">${toolData.description}</h2>
<img class="tool-media" src="assets/${tool.name}.png" alt="${tool.name} Image">
<a id="visit" class="visit-tool" href="${toolData.url}">Visit "${toolData.name}"!</a>
`;
toolList.appendChild(toolItem);
});
};
async function filterTools(filterType, language = 'en') {
const tools = await fetchTools();
let filteredTools;
if (filterType) {
filteredTools = tools;
}
renderTools(filteredTools, language);
}
document.getElementById('langauge-selector').addEventListener('change', async (event) => {
const selectedLanguage = event.target.value;
await filterTools('all', selectedLanguage);
});
filterTools('all');

92
sitemap/tools.json Normal file
View file

@ -0,0 +1,92 @@
[
{
"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-de": "Maus Test",
"subheader-de": "Teste deine Maustasten",
"description-de": "Dieses Tool erlaubt dir die Tasten deiner Maus zu Testen: LMB; MMB; RMB"
},
{
"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",
"name-de": "Tastatur Test",
"subheader-de": "Teste deine Tastaturtasten",
"description-de": "Dieses Tool erlaubt dir die Tasten deiner Tastatur zu Testen"
},
{
"name": "Color Generator",
"subheader": "Generate Random Hexadecimal Colors",
"description": "Generate random Hexadecimal colors using a single click",
"url": "/color",
"name-de": "Farben Generator",
"subheader-de": "Generiere Zufällige Farben",
"description-de": "Generiere zufällige hexadezimale Farben mit einem Click"
},
{
"name": "Notes",
"subheader": "Write Notes for later",
"description": "Write Notes for later, export and import them via a JSON file",
"url": "/notes",
"name-de": "Notizen",
"subheader-de": "Schreibe Notizen für später",
"description-de": "Notizen für später schreiben und sie über eine JSON-Datei exportieren und importieren"
},
{
"name": "Code Stuff & Snippets",
"subheader": "View WinAPI Keys and other stuff",
"description": "Ripped WinAPI Keys from Microsoft's site and made my own for snippets, etc.",
"url": "/code",
"name-de": "Code Sachen",
"subheader-de": "WinAPI-Schlüssel und andere Sachen ansehen",
"description-de": "WinAPI Keys Von Microsofts Website genommen und meine eigene Sammlung für erstellt"
},
{
"name": "Bio",
"subheader": "A page with my links",
"description": "This site includes my links like Instagram, so you can contact me easier",
"url": "/bio",
"name-de": "Bio",
"subheader-de": "Eine Seite mit meinen Links",
"description-de": "Diese Seite beinhaltet meine Links wie Instagram, sie hat auch einen Musikspieler"
},
{
"name": "90's Bio",
"subheader": "A 90's inspired site",
"description": "This is a site inspired by a 90's 'About Me' site",
"url": "/old",
"name-de": "90-er Bio",
"subheader-de": "Eine Seite mit einen 90-er Stil",
"description-de": "Diese Seite ist wie /bio, aber wie in den 90ern"
},
{
"name": "Projects",
"subheader": "My most popular projects",
"description": "Some of my projects I'd like to showcase. All on GitHub",
"url": "/projects",
"name-de": "Projekte",
"subheader-de": "Meine bekannteste Projekte",
"description-de": "Einige meiner Projekte die ich gerne zeigen möchte. Alle auf GitHub"
},
{
"name": "Autist",
"subheader": "Autstic friend",
"description": "A site for my autistic friend who does funny noises",
"url": "/autist",
"name-de": "Autist",
"subheader-de": "Autistischer Freund",
"description-de": "Eine Seite für meinen autistischen Freund, der lustige Geräusche macht"
},
{
"name": "Guestbook",
"subheader": "Custom Guestbook Frontend",
"description": "A custom SmartGB frontend that uses a CORS Proxy to fetch reviews",
"url": "/guestbook",
"name-de": "Gästebuch",
"subheader-de": "Eigenes SmartGB Frontend",
"description-de": "Ein eigenes SmartGB Frontend, der eine CORS-Proxy benutzt, um Bewertungen abzurufen"
}
]

34
sitemap/translate.js Normal file
View file

@ -0,0 +1,34 @@
const translations = {
en: {
welcome: {
title: "Welcome!",
description: "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>!",
testIt: "Clicking \"Test It\" will open the tool in the current tab.",
future: "More tools will come in the future."
}
},
de: {
welcome: {
title: "Willkommen!",
description: "Dies ist eine Webseite für zukünftige Tools. Der Quellcode ist auf meinem <a href='https://github.com/zyqunix/tools' target='_blank'>GitHub</a> zu finden!",
testIt: "\"Test It\" öffnet das Tool im aktuellen Tab.",
future: "Weitere Tools werden in Zukunft hinzugefügt."
}
}
};
const languageSelector = document.getElementById('langauge-selector');
languageSelector.addEventListener('change', () => {
const selectedLanguage = languageSelector.value;
applyTranslations(selectedLanguage);
});
function applyTranslations(language) {
const welcome = translations[language].welcome;
document.getElementById('welcome-title').innerHTML = welcome.title;
document.getElementById('welcome-description').innerHTML = welcome.description;
document.getElementById('welcome-test-it').innerHTML = welcome.testIt;
document.getElementById('welcome-future').innerHTML = welcome.future;
}
applyTranslations('en');