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

added german translations

Browse source
This commit is contained in:
zyqunix 2024-12-05 21:40:19 +01:00
parent 3cd079bdf9
commit a025525d04
7 changed files with 132 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
bio/audio.js
View file

@ -5,6 +5,12 @@ const songs = [
duration: 100
},
{
title: "Joeyy - PR Package",
src: "https://easyfiles.cc/2024/8/7c649f45-6573-4665-9675-4d869ea1332a/youtube_ZvphwrKo52s_1280x720_h264(1).mp4" ,
duration: 111
},
{
title: "Bladee & Ecco2k - Bleach",
src: "https://easyfiles.cc/2024/9/4ac37ab2-20d7-4fd8-863b-3dcee1c418cd/BLADEE%20&%20ECCO2K%20-%20BLEACH%20-%20drain%20gang%20(720p50,%20h264)(1).mp4" ,
@ -27,12 +33,6 @@ const songs = [
title: "sniper2004 - la ny",
src: "https://easyfiles.cc/2024/8/b8332c2a-e70b-4ec0-9ba8-acc7e5449db7/youtube_mkmn3QZSZUM_874x720_h264(1).mp4" ,
duration: 87
},
{
title: "Joeyy - PR Package",
src: "https://easyfiles.cc/2024/8/7c649f45-6573-4665-9675-4d869ea1332a/youtube_ZvphwrKo52s_1280x720_h264(1).mp4" ,
duration: 111
}
];

34
index.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -9,19 +10,40 @@
<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>
<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 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 😭😭😭</h6>
</div>
<div id="welcome" class="welcome">
<h1>Welcome!</h1>
<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>
<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>
@ -32,5 +54,7 @@
<script src="quote.js"></script>
<!-- <script src="slide.js"></script> -->
<script src="theme.js"></script>
<script src="translate.js"></script>
</body>
</html>

2
quote.js
View file

@ -68,5 +68,5 @@ const randomQuote = quotes[randomIndex];
const motd = document.createElement('h3');
motd.id = "motd";
motd.innerHTML = `MOTD: ${randomQuote}`;
motd.innerHTML = `MOTD: "${randomQuote}"`;
document.getElementById('welcome').appendChild(motd)

4
style.css
View file

@ -32,6 +32,10 @@ html {
color: #2a2a2a;
}
#motd {
font-style: italic;
}
.topbar {
display: flex;
align-items: center;

36
tools.js
View file

@ -9,42 +9,48 @@ async function fetchTools() {
} catch (error) {
console.error("Failed to fetch tools:", error);
return [];
};
}
};
function renderTools(filteredTools) {
function renderTools(filteredTools, language = 'en') {
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 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">↬ ${tool.name} ↫</h1>
<h2 class="tool-subhead"><u>${tool.subheader}</u></h2>
<h2 class="tool-desc">${tool.description}</h2>
<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="${tool.url}">Visit "${tool.name}"!</a>
<a id="visit" class="visit-tool" href="${toolData.url}">Visit "${toolData.name}"!</a>
`;
toolList.appendChild(toolItem);
});
};
async function filterTools(filterType) {
async function filterTools(filterType, language = 'en') {
const tools = await fetchTools();
let filteredTools;
if (filterType) {
filteredTools = tools;
}
renderTools(filteredTools);
renderTools(filteredTools, language);
}
filterTools('all');
document.getElementById('langauge-selector').addEventListener('change', async (event) => {
const selectedLanguage = event.target.value;
await filterTools('all', selectedLanguage);
});
filterTools('all');

45
tools.json
View file

@ -3,42 +3,71 @@
"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"
"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"
"url": "/keyboard",
"name-de": "Tastatur Test",
"subheader-de": "Teste deine Tastaturtasten",
"description-de": "Dieses Tool erlaubt dir die Tasten deiner Tastatur zu Testen"
},
{
"name": "Bio",
"subheader": "A page with my links",
"description": "This site includes my links like Instagram, so you can contact me easier",
"url": "/bio"
"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"
"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"
"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"
"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 custo SmartGB frontend that uses a CORS Proxy to fetch reviews",
"url": "/guestbook"
"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
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');