diff --git a/bio/audio.js b/bio/audio.js index b81f6b5..8687eca 100644 --- a/bio/audio.js +++ b/bio/audio.js @@ -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 } ]; diff --git a/index.html b/index.html index 2024e43..87b192f 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,6 @@ + @@ -9,19 +10,40 @@ +
+ + +
why is this one so much worse than /projects 😭😭😭
-

Welcome!

-

This is a website for future tools. The source code can be found on my GitHub!

-

Clicking "Test It" will open the tool in the current tab.

-

More tools will come in the future.

+

Welcome!

+

This is a website for future tools. The source code can be found on my GitHub!

+

Clicking "Test It" will open the tool in the current tab.

+

More tools will come in the future.

@@ -32,5 +54,7 @@ + + \ No newline at end of file diff --git a/quote.js b/quote.js index d3bdf0c..9f349b7 100644 --- a/quote.js +++ b/quote.js @@ -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) diff --git a/style.css b/style.css index c5b6162..e005823 100644 --- a/style.css +++ b/style.css @@ -32,6 +32,10 @@ html { color: #2a2a2a; } +#motd { + font-style: italic; +} + .topbar { display: flex; align-items: center; diff --git a/tools.js b/tools.js index f24adb6..28a4c1b 100644 --- a/tools.js +++ b/tools.js @@ -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 = "
No tools match the selected filter.
" - 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 = ` -

↬ ${tool.name} ↫

-

${tool.subheader}

-

${tool.description}

+

↬ ${toolData.name} ↫

+

${toolData.subheader}

+

${toolData.description}

${tool.name} Image - Visit "${tool.name}"! + Visit "${toolData.name}"! `; 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'); \ No newline at end of file diff --git a/tools.json b/tools.json index 6d0c9c3..962e5c6 100644 --- a/tools.json +++ b/tools.json @@ -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" } ] \ No newline at end of file diff --git a/translate.js b/translate.js new file mode 100644 index 0000000..e856421 --- /dev/null +++ b/translate.js @@ -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 GitHub!", + 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 GitHub 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'); \ No newline at end of file