Merge pull request #4 from malikwachter/translate

Translate Feature
This commit is contained in:
Malik Wachter 2024-01-27 15:33:57 +01:00 committed by GitHub
commit 64b5e8f551
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 425 additions and 228 deletions

View file

@ -14,10 +14,11 @@
<img src="webicons/logo.png" class="logo"> <img src="webicons/logo.png" class="logo">
<nav> <nav>
<ul id="menuList"> <ul id="menuList">
<li><a href="index.html">Home</a></li> <li><a href="index.html" id="homenav"></a></li>
<li><a href="aboutme.html">About Me</a></li> <li><a href="aboutme.html" id="aboutmenav"></a></li>
<li><a href="projects.html">Projects</a></li> <li><a href="projects.html" id="projectsnav"></a></li>
<li><a href="contactme.html">Contact Me</a></li> <li><a href="contactme.html" id="contactnav"></a></li>
<li><a onclick="langChange()" id="lang"></a></li>
</ul> </ul>
</nav> </nav>
<img src="webicons/menu.png" class="menu-icon" onclick="togglemenu()"> <img src="webicons/menu.png" class="menu-icon" onclick="togglemenu()">
@ -25,52 +26,34 @@
<div class="row"> <div class="row">
<div class="col-1"> <div class="col-1">
<h1>Über mich:</h1> <h1 id="aboutmetitle"></h1>
<h2>Hey, ich weiß selbst nach fast zwei Jahrzehnten auf diesem Planeten nicht genau, was ich über mich schreiben soll in solchen „Über Mich“s. Aber ich versuche es mal. :)</h2> <h2 id="aboutme1"></h2>
<p> </p> <p></p>
<h2>Also ich interessiere mich sehr für alles rund um Computer. Ich nutze Linux und lerne gerade programmieren. Abseits vom Computer treffe ich mich gerne mit Freunden und höre sehr viel Musik. In letzter Zeit höre ich überwiegend Techno, daher gehe ich auch mega gerne regelmäßig in Technoclubs. </h2> <h2 id="aboutme2"></h2>
<p> </p> <p></p>
<h2>Zu guter Letzt. Ich liebe Katzen und habe sogar zwei von diesen Spinnern.</h2> <h2 id="aboutme3"></h2>
<ul id="aboutmelinks"> <ul id="aboutmelinks">
<li><a href="aboutme/cats.html">Katzen</a></li> <li><a href="aboutme/cats.html" id="aboutmebutton1"></a></li>
<li><a href="aboutme/linux.html">Linux</a></li> <li><a href="aboutme/linux.html" id="aboutmebutton2"></a></li>
<li><a href="aboutme/techno.html">Top 10 Techno</a></li> <li><a href="aboutme/techno.html" id="aboutmebutton3"></a></li>
</ul> </ul>
</div> </div>
<div class="col-2"> <div class="col-2">
<img src="webicons/foto.png" class="fotovonmir"> <img src="webicons/foto.png" class="fotovonmir">
</div> </div>
</div> </div>
<div class="socialmedia"> <div class="socialmedia">
<a href="https://feddit.de/u/mawacode"><img src="../webicons/lemmy.png"></a> <a href="https://feddit.de/u/mawacode"><img src="webicons/lemmy.png"></a>
<a rel="me" href="https://hessen.social/@mawacode"><img src="../webicons/mastodon.png"></a> <a rel="me" href="https://hessen.social/@mawacode"><img src="webicons/mastodon.png"></a>
<a href="https://github.com/malikwachter"><img src="../webicons/GitHub.png"></a> <a href="https://github.com/malikwachter"><img src="webicons/GitHub.png"></a>
</div> </div>
</div> </div>
<script> <script src="js/lang.js"></script>
var menuList = document.getElementById("menuList");
menuList.style.maxHeight = "0px";
function togglemenu(){
if(menuList.style.maxHeight == "0px")
{
menuList.style.maxHeight = "130px";
}
else
{
menuList.style.maxHeight = "0px";
}
}
</script>
</body> </body>

View file

@ -15,10 +15,11 @@
<img src="../webicons/logo.png" class="logo"> <img src="../webicons/logo.png" class="logo">
<nav> <nav>
<ul id="menuList"> <ul id="menuList">
<li><a href="../index.html">Home</a></li> <li><a href="../index.html" id="homenav"></a></li>
<li><a href="../aboutme.html">About Me</a></li> <li><a href="../aboutme.html" id="aboutmenav"></a></li>
<li><a href="../projects.html">Projects</a></li> <li><a href="../projects.html" id="projectsnav"></a></li>
<li><a href="../contactme.html">Contact Me</a></li> <li><a href="../contactme.html" id="contactnav"></a></li>
<li><a onclick="langChange()" id="lang"></a></li>
</ul> </ul>
</nav> </nav>
<img src="../webicons/menu.png" class="menu-icon" onclick="togglemenu()"> <img src="../webicons/menu.png" class="menu-icon" onclick="togglemenu()">
@ -26,8 +27,8 @@
<div class="row"> <div class="row">
<div class="col-1"> <div class="col-1">
<h1>Meine Katzen!</h1> <h1 id="catstitle"></h1>
<h2>Der weiße Kater heißt Percy und der Schwarzweiße heißt Mailo</h2> <h2 id="cats"></h2>
</div> </div>
<div class="col-2" id="catpics"> <div class="col-2" id="catpics">
<img src="catpics/catpic2.jpg"> <img src="catpics/catpic2.jpg">
@ -43,26 +44,8 @@
</div> </div>
<script> <script src="../js/lang.js"></script>
var menuList = document.getElementById("menuList");
menuList.style.maxHeight = "0px";
function togglemenu(){
if(menuList.style.maxHeight == "0px")
{
menuList.style.maxHeight = "130px";
}
else
{
menuList.style.maxHeight = "0px";
}
}
</script>
</body> </body>

View file

@ -15,10 +15,11 @@
<img src="../webicons/logo.png" class="logo"> <img src="../webicons/logo.png" class="logo">
<nav> <nav>
<ul id="menuList"> <ul id="menuList">
<li><a href="../index.html">Home</a></li> <li><a href="../index.html" id="homenav"></a></li>
<li><a href="../aboutme.html">About Me</a></li> <li><a href="../aboutme.html" id="aboutmenav"></a></li>
<li><a href="../projects.html">Projects</a></li> <li><a href="../projects.html" id="projectsnav"></a></li>
<li><a href="../contactme.html">Contact Me</a></li> <li><a href="../contactme.html" id="contactnav"></a></li>
<li><a onclick="langChange()" id="lang"></a></li>
</ul> </ul>
</nav> </nav>
<img src="../webicons/menu.png" class="menu-icon" onclick="togglemenu()"> <img src="../webicons/menu.png" class="menu-icon" onclick="togglemenu()">
@ -26,35 +27,35 @@
<div class="row"> <div class="row">
<div class="col-1"> <div class="col-1">
<h1>Linux</h1> <h1 id="linuxtitle"></h1>
<h2>Meine Linux distrohop Geschichte:</h2> <h2 id="linux1"></h2>
<ul class="technolist"> <ul class="technolist">
<li>2021 Januar - Linux Mint</li> <li id="linuxli1"></li>
<li>2021 Juni - Kubuntu</li> <li id="linuxli2"></li>
<li>2021 Juli - KDE Neon</li> <li id="linuxli3"></li>
<li>2022 Februar - Fedora</li> <li id="linuxli4"></li>
<li>2022 Juni - Nobara</li> <li id="linuxli5"></li>
<li>Aktuell Fedora und Nobara</li> <li id="linuxli6"></li>
</ul> </ul>
<p> </p> <p> </p>
<h2>Desktop: Nobara Linux</h2> <h2 id="linux2"></h2>
<img src="../pics/linuxdesktop.png" class="neofetch"> <img src="../pics/linuxdesktop.png" class="neofetch">
<h2>Laptop: Fedora Linux</h2> <h2 id="linux2_2"></h2>
<img src="../pics/linuxlaptop.png" class="neofetch"> <img src="../pics/linuxlaptop.png" class="neofetch">
<p> </p> <p> </p>
<h2>Distros mit dennen ich nurmal rumgespielt habe:</h2> <h2 id="linux3"></h2>
<ul class="technolist"> <ul class="technolist">
<li>Arch Linux</li> <li id="linuxli7"></li>
<li>Artix Linux</li> <li id="linuxli8"></li>
<li>AntiX</li> <li id="linuxli9"></li>
<li>TailsOS</li> <li id="linuxli10"></li>
</ul> </ul>
<h2>Weitere Linux Geräte in meinem Besitz:</h2> <h2 id="linux4"></h2>
<ul class="technolist"> <ul class="technolist">
<li>Raspberry Pi - Rasberry Pi OS</li> <li id="linuxli11"></li>
<li>Steam Deck - SteamOS</li> <li id="linuxli12"></li>
<li>Fairphone 3+ - iodéOS</li> <li id="linuxli13"></li>
</ul> </ul>
</div> </div>
<div class="col-2"> <div class="col-2">
@ -69,26 +70,9 @@
</div> </div>
<script>
var menuList = document.getElementById("menuList");
menuList.style.maxHeight = "0px"; <script src="../js/lang.js"></script>
function togglemenu(){
if(menuList.style.maxHeight == "0px")
{
menuList.style.maxHeight = "130px";
}
else
{
menuList.style.maxHeight = "0px";
}
}
</script>
</body> </body>

View file

@ -15,10 +15,11 @@
<img src="../webicons/logo.png" class="logo"> <img src="../webicons/logo.png" class="logo">
<nav> <nav>
<ul id="menuList"> <ul id="menuList">
<li><a href="../index.html">Home</a></li> <li><a href="../index.html" id="homenav"></a></li>
<li><a href="../aboutme.html">About Me</a></li> <li><a href="../aboutme.html" id="aboutmenav"></a></li>
<li><a href="../projects.html">Projects</a></li> <li><a href="../projects.html" id="projectsnav"></a></li>
<li><a href="../contactme.html">Contact Me</a></li> <li><a href="../contactme.html" id="contactnav"></a></li>
<li><a onclick="langChange()" id="lang"></a></li>
</ul> </ul>
</nav> </nav>
<img src="../webicons/menu.png" class="menu-icon" onclick="togglemenu()"> <img src="../webicons/menu.png" class="menu-icon" onclick="togglemenu()">
@ -26,19 +27,19 @@
<div class="row"> <div class="row">
<div class="col-1"> <div class="col-1">
<h1>Techno Top 10</h1> <h1 id="technotitle"></h1>
<h2>Vorab: Diese Top-10-Liste ist nicht ernst gemeint. Es wurde nach keinen Kriterien bewertet. Das ist nur eine Sammlung von Liedern, die ich aktuell gerne höre.</h2> <h2 id="techno"></h2>
<ul class="technolist"> <ul class="technolist">
<li>1. i wanna be your girlfriend | Dj Brice</li> <li id="technoli1"></li>
<li>2. DIE LIEBE KOMMT NICHT AUS BERLIN | Brutalismus 3000</li> <li id="technoli2"></li>
<li>3. HEISS (Floorkiller Flex) | ÅMRTÜM</li> <li id="technoli3"></li>
<li>4. Underground | Tucker</li> <li id="technoli4"></li>
<li>5. Audio Bully - Original | ANSBRO</li> <li id="technoli5"></li>
<li>6. Goes Crazy - Original Mix | RBX</li> <li id="technoli6"></li>
<li>7. As We Kick | RVLT, Ouija</li> <li id="technoli7"></li>
<li>8. Language Of The Devil | Infeed</li> <li id="technoli8"></li>
<li>9. NUR MEIN KÖRPER UND DIE ANGST | Brutalismus 3000</li> <li id="technoli9"></li>
<li>10. Atme Ein (Atme Rauch aus) | Butschi, Felix Jaehn, Fairy Mary</li> <li id="technoli10"></li>
</ul> </ul>
</div> </div>
@ -55,26 +56,8 @@
</div> </div>
<script> <script src="../js/lang.js"></script>
var menuList = document.getElementById("menuList");
menuList.style.maxHeight = "0px";
function togglemenu(){
if(menuList.style.maxHeight == "0px")
{
menuList.style.maxHeight = "130px";
}
else
{
menuList.style.maxHeight = "0px";
}
}
</script>
</body> </body>

View file

@ -15,10 +15,11 @@
<img src="webicons/logo.png" class="logo"> <img src="webicons/logo.png" class="logo">
<nav> <nav>
<ul id="menuList"> <ul id="menuList">
<li><a href="index.html">Home</a></li> <li><a href="index.html" id="homenav"></a></li>
<li><a href="aboutme.html">About Me</a></li> <li><a href="aboutme.html" id="aboutmenav"></a></li>
<li><a href="projects.html">Projects</a></li> <li><a href="projects.html" id="projectsnav"></a></li>
<li><a href="contactme.html">Contact Me</a></li> <li><a href="contactme.html" id="contactnav"></a></li>
<li><a onclick="langChange()" id="lang"></a></li>
</ul> </ul>
</nav> </nav>
<img src="webicons/menu.png" class="menu-icon" onclick="togglemenu()"> <img src="webicons/menu.png" class="menu-icon" onclick="togglemenu()">
@ -26,8 +27,8 @@
<div class="row"> <div class="row">
<div class="col-1"> <div class="col-1">
<h1>Kontakt</h1> <h1 id="contacttitle"></h1>
<h2>Email: malik.wachter [at] mawacode.de</h2> <h2 id="contact"></h2>
</div> </div>
<div class="col-2"> <div class="col-2">
<a href="https://xkcd.com/1783/"><img src="pics/emails.png" class="comic"></a> <a href="https://xkcd.com/1783/"><img src="pics/emails.png" class="comic"></a>
@ -35,33 +36,16 @@
</div> </div>
<div class="socialmedia"> <div class="socialmedia">
<a href="https://feddit.de/u/mawacode"><img src="../webicons/lemmy.png"></a> <a href="https://feddit.de/u/mawacode"><img src="webicons/lemmy.png"></a>
<a rel="me" href="https://hessen.social/@mawacode"><img src="../webicons/mastodon.png"></a> <a rel="me" href="https://hessen.social/@mawacode"><img src="webicons/mastodon.png"></a>
<a href="https://github.com/malikwachter"><img src="../webicons/GitHub.png"></a> <a href="https://github.com/malikwachter"><img src="webicons/GitHub.png"></a>
</div> </div>
</div> </div>
<script>
var menuList = document.getElementById("menuList");
menuList.style.maxHeight = "0px"; <script src="js/lang.js"></script>
function togglemenu(){
if(menuList.style.maxHeight == "0px")
{
menuList.style.maxHeight = "130px";
}
else
{
menuList.style.maxHeight = "0px";
}
}
</script>
</body> </body>

View file

@ -178,7 +178,7 @@ h2{
padding-right: 4%; padding-right: 4%;
} }
nav ul { nav ul{
width: 100%; width: 100%;
position: absolute; position: absolute;
top: 75px; top: 75px;
@ -192,11 +192,11 @@ h2{
display: block; display: block;
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
} }
nav ul li a{ nav ul li a{
box-shadow: 0 0 0; box-shadow: 0 0 0;
cursor: pointer;
} }
.menu-icon{ .menu-icon{
@ -221,7 +221,6 @@ h2{
.col-2 .fotovonmir{ .col-2 .fotovonmir{
width: 77%; width: 77%;
transform: translateX(0px); transform: translateX(0px);
} }

View file

@ -10,15 +10,17 @@
<body> <body>
<div class="container"> <div class="container">
<div class="navbar"> <div class="navbar">
<img src="webicons/logo.png" class="logo"> <img src="webicons/logo.png" class="logo">
<nav> <nav>
<ul id="menuList"> <ul id="menuList">
<li><a href="index.html">Home</a></li> <li><a href="index.html" id="homenav"></a></li>
<li><a href="aboutme.html">About Me</a></li> <li><a href="aboutme.html" id="aboutmenav"></a></li>
<li><a href="projects.html">Projects</a></li> <li><a href="projects.html" id="projectsnav"></a></li>
<li><a href="contactme.html">Contact Me</a></li> <li><a href="contactme.html" id="contactnav"></a></li>
<li><a onclick="langChange()" id="lang"></a></li>
</ul> </ul>
</nav> </nav>
<img src="webicons/menu.png" class="menu-icon" onclick="togglemenu()"> <img src="webicons/menu.png" class="menu-icon" onclick="togglemenu()">
@ -26,10 +28,10 @@
<div class="row"> <div class="row">
<div class="col-1"> <div class="col-1">
<h1>Hallo Internet!</h1> <h1 id="welcometitle">Hello Internet!</h1>
<h2>Ich bin Malik, irgend so ein Typ im Web, der gerade Programmieren lernt.</h2> <h2 id="welcome1"></h2>
<p> </p> <p></p>
<h2>Willkommen auf meiner persönlichen Webseite. Hier erfährst du mehr über mich und meine Projekte! Danke fürs Vorbeischauen. :)</h2> <h2 id="welcome2"></h2>
</div> </div>
<div class="col-2"> <div class="col-2">
<img src="webicons/foto.png" class="fotovonmir"> <img src="webicons/foto.png" class="fotovonmir">
@ -37,33 +39,14 @@
</div> </div>
<div class="socialmedia"> <div class="socialmedia">
<a href="https://feddit.de/u/mawacode"><img src="../webicons/lemmy.png"></a> <a href="https://feddit.de/u/mawacode"><img src="webicons/lemmy.png"></a>
<a rel="me" href="https://hessen.social/@mawacode"><img src="../webicons/mastodon.png"></a> <a rel="me" href="https://hessen.social/@mawacode"><img src="webicons/mastodon.png"></a>
<a href="https://github.com/malikwachter"><img src="../webicons/GitHub.png"></a> <a href="https://github.com/malikwachter"><img src="webicons/GitHub.png"></a>
</div> </div>
</div> </div>
<script> <script src="js/lang.js"></script>
var menuList = document.getElementById("menuList");
menuList.style.maxHeight = "0px";
function togglemenu(){
if(menuList.style.maxHeight == "0px")
{
menuList.style.maxHeight = "130px";
}
else
{
menuList.style.maxHeight = "0px";
}
}
</script>
</body> </body>

315
js/lang.js Normal file
View file

@ -0,0 +1,315 @@
var language = {
//All english strings:
eng: {
//nav
homenav: "Home",
aboutmenav: "About Me",
projectsnav: "Projects",
contactnav: "Contact me",
lang: "Switch to German",
//index.html
welcometitle: "Hello Internet!",
welcome1: "I'm Malik, some guy on the web who's learning to code.",
welcome2: "Welcome to my personal website. Here you can find out more about me and my projects! Thanks for stopping by. :)",
//aboutme.html
aboutmetitle: "About me:",
aboutme1: "Hey, even after almost two decades on this planet I don't know exactly what to write about myself in these 'About Me's. But I'll give it a try. :)",
aboutme2: "So I'm very interested in everything to do with computers. I use Linux and am currently learning to program. Away from the computer, I like to meet up with friends and listen to a lot of music. Lately I've been listening mainly to techno lately, which is why I also go to techno clubs regularly. ",
aboutme3: "Last but not least. I love cats and even have two of these weirdos.",
aboutmebutton1: "Cats",
aboutmebutton2: "Linux",
aboutmebutton3: "Top 10 Techno",
//projects.html
projectstitle: "Coming Soon!",
projects: "Nothing here yet. :)",
//contactme.html
contacttitle: "Contact",
contact: "Email: malik.wachter[at]mawacode.de",
//aboutme/cats.html
catstitle: "My Cats!",
cats: "The white cat is called Percy and the black and white cat is called Mailo.",
//aboutme/linux.html
linuxtitle: "Linux",
linux1: "My Linux distrohop history:",
linuxli1: "2021 January - Linux Mint",
linuxli2: "2021 June - Kubuntu",
linuxli3: "2021 July - KDE Neon",
linuxli4: "2022 February - Fedora",
linuxli5: "2022 June - Nobara",
linuxli6: "Currently Fedora and Nobara",
linux2: "Desktop: Nobara Linux",
linux2_2: "Laptop: Fedora Linux",
linux3: "Distros I've only played around with once:",
linuxli7: "Arch Linux",
linuxli8: "Artix Linux",
linuxli9: "AntiX",
linuxli10: "TailsOS",
linux4: "Other Linux devices I own:",
linuxli11: "Raspberry Pi - Rasberry Pi OS",
linuxli12: "Steam Deck - SteamOS",
linuxli13: "Fairphone 3+ - iodéOS",
//aboutme/techno.html
technotitle: "Techno Top 10",
techno: "Befor you read: This top 10 list is not meant seriously. It was not rated according to any criteria. It's just a collection of songs that I currently enjoy listening to.",
technoli1: "1. i wanna be your girlfriend | Dj Brice",
technoli2: "2. DIE LIEBE KOMMT NICHT AUS BERLIN | Brutalismus 3000",
technoli3: "3. HEISS (Floorkiller Flex) | ÅMRTÜM",
technoli4: "4. Underground | Tucker",
technoli5: "5. Audio Bully - Original | ANSBRO",
technoli6: "6. Goes Crazy - Original Mix | RBX",
technoli7: "7. As We Kick | RVLT, Ouija",
technoli8: "8. Language Of The Devil | Infeed",
technoli9: "9. NUR MEIN KÖRPER UND DIE ANGST | Brutalismus 3000",
technoli10: "10. Atme Ein (Atme Rauch aus) | Butschi, Felix Jaehn, Fairy Mary"
},
//All german strings:
ger: {
//nav
homenav: "Startseite",
aboutmenav: "Über Mich",
projectsnav: "Projekte",
contactnav: "Kontakt",
lang: "Wechseln zu Englisch",
//index.html
welcometitle: "Hallo Internet!",
welcome1: "Ich bin Malik, ein Typ aus dem Internet, der programmieren lernt.",
welcome2: "Willkommen auf meiner persönlichen Website. Hier kannst du mehr über mich und meine Projekte erfahren! Danke fürs Vorbeischauen :)",
//aboutme.html
aboutmetitle: "Über mich:",
aboutme1: "Hey, selbst nach fast zwei Jahrzehnten auf diesem Planeten weiß ich nicht genau, was ich in diesen 'Über mich's überhaupt schreiben soll. Aber ich werde es versuchen :)",
aboutme2: "Ich interessiere mich also sehr für alles, was mit Computern zu tun hat. Ich benutze Linux und lerne gerade programmieren. Abseits des Computers treffe ich mich gerne mit Freunden und höre viel Musik. In letzter Zeit höre ich vor allem Techno, deshalb gehe ich auch regelmäßig in Techno-Clubs.",
aboutme3: "Zu guter Letzt, Ich liebe Katzen und habe sogar zwei von diesen Spinnern.",
aboutmebutton1: "Katzen",
aboutmebutton2: "Linux",
aboutmebutton3: "Top 10 Techno",
//projects.html
projectstitle: "Kommt bald!",
projects: "Noch ist hier nichts :)",
//contactme.html
contacttitle: "Kontakt",
contact: "Email: malik.wachter[at]mawacode.de",
//aboutme/cats.html
catstitle: "Meine Katzen!",
cats: "Der weiße Kater heißt Percy und der schwarz-weiße Kater heißt Mailo.",
//aboutme/linux.html
linuxtitle: "Linux",
linux1: "Meine Linux distrohop Geschichte:",
linuxli1: "2021 Januar - Linux Mint",
linuxli2: "2021 Juni - Kubuntu",
linuxli3: "2021 Juli - KDE Neon",
linuxli4: "2022 Februar - Fedora",
linuxli5: "2022 Juni - Nobara",
linuxli6: "Aktuell Fedora und Nobara",
linux2: "Desktop: Nobara Linux",
linux2_2: "Laptop: Fedora Linux",
linux3: "Distros mit dennen ich nurmal rumgespielt habe:",
linuxli7: "Arch Linux",
linuxli8: "Artix Linux",
linuxli9: "AntiX",
linuxli10: "TailsOS",
linux4: "Weitere Linux Geräte in meinem Besitz:",
linuxli11: "Raspberry Pi - Rasberry Pi OS",
linuxli12: "Steam Deck - SteamOS",
linuxli13: "Fairphone 3+ - iodéOS",
//aboutme/techno.html
technotitle: "Techno Top 10",
techno: "Vorab: Diese Top-10-Liste ist nicht ernst gemeint. Es wurde nach keinen Kriterien bewertet. Das ist nur eine Sammlung von Liedern, die ich aktuell gerne höre.",
technoli1: "1. i wanna be your girlfriend | Dj Brice",
technoli2: "2. DIE LIEBE KOMMT NICHT AUS BERLIN | Brutalismus 3000",
technoli3: "3. HEISS (Floorkiller Flex) | ÅMRTÜM",
technoli4: "4. Underground | Tucker",
technoli5: "5. Audio Bully - Original | ANSBRO",
technoli6: "6. Goes Crazy - Original Mix | RBX",
technoli7: "7. As We Kick | RVLT, Ouija",
technoli8: "8. Language Of The Devil | Infeed",
technoli9: "9. NUR MEIN KÖRPER UND DIE ANGST | Brutalismus 3000",
technoli10: "10. Atme Ein (Atme Rauch aus) | Butschi, Felix Jaehn, Fairy Mary"
}
};
//get isGerman state from localStorage
var isGerman = localStorage.getItem("isGerman") === "true";
//inserting the german strings:
if(isGerman===true) {
//nav
homenav.textContent = language.ger.homenav;
aboutmenav.textContent = language.ger.aboutmenav;
projectsnav.textContent = language.ger.projectsnav;
contactnav.textContent = language.ger.contactnav;
lang.textContent = language.ger.lang;
//index.html
if (window.location.pathname == '/' || window.location.href.indexOf("index") > -1) {
welcometitle.textContent = language.ger.welcometitle;
welcome1.textContent = language.ger.welcome1;
welcome2.textContent = language.ger.welcome2;
}
//aboutme.html
else if(window.location.href.indexOf("aboutme.html") > -1) {
aboutmetitle.textContent = language.ger.aboutmetitle;
aboutme1.textContent = language.ger.aboutme1;
aboutme2.textContent = language.ger.aboutme2;
aboutme3.textContent = language.ger.aboutme3;
aboutmebutton1.textContent = language.ger.aboutmebutton1;
aboutmebutton2.textContent = language.ger.aboutmebutton2;
aboutmebutton3.textContent = language.ger.aboutmebutton3;
}
//projects.html
else if(window.location.href.indexOf("projects") > -1) {
projectstitle.textContent = language.ger.projectstitle;
projects.textContent = language.ger.projects;
}
//contactme.html
else if(window.location.href.indexOf("contactme") > -1) {
contacttitle.textContent = language.ger.contacttitle;
contact.textContent = language.ger.contact;
}
//aboutme/cats.html
else if(window.location.href.indexOf("cats") > -1) {
catstitle.textContent = language.ger.catstitle;
cats.textContent = language.ger.cats;
}
//aboutme/linux.html
else if(window.location.href.indexOf("linux") > -1) {
linuxtitle.textContent = language.ger.linuxtitle;
linux1.textContent = language.ger.linux1;
linuxli1.textContent = language.ger.linuxli1;
linuxli2.textContent = language.ger.linuxli2;
linuxli3.textContent = language.ger.linuxli3;
linuxli4.textContent = language.ger.linuxli4;
linuxli5.textContent = language.ger.linuxli5;
linuxli6.textContent = language.ger.linuxli6;
linux2.textContent = language.ger.linux2;
linux2_2.textContent = language.ger.linux2_2;
linux3.textContent = language.ger.linux3;
linuxli7.textContent = language.ger.linuxli7;
linuxli8.textContent = language.ger.linuxli8;
linuxli9.textContent = language.ger.linuxli9;
linuxli10.textContent = language.ger.linuxli10;
linux4.textContent = language.ger.linux4;
linuxli11.textContent = language.ger.linuxli11;
linuxli12.textContent = language.ger.linuxli12;
linuxli13.textContent = language.ger.linuxli13;
}
//aboutme/techno.html
else if(window.location.href.indexOf("techno") > -1) {
technotitle.textContent = language.ger.technotitle;
techno.textContent = language.ger.techno;
technoli1.textContent = language.ger.technoli1;
technoli2.textContent = language.ger.technoli2;
technoli3.textContent = language.ger.technoli3;
technoli4.textContent = language.ger.technoli4;
technoli5.textContent = language.ger.technoli5;
technoli6.textContent = language.ger.technoli6;
technoli7.textContent = language.ger.technoli7;
technoli8.textContent = language.ger.technoli8;
technoli9.textContent = language.ger.technoli9;
technoli10.textContent = language.ger.technoli10;
}
}
//inserting the english strings:
else{
//nav
homenav.textContent = language.eng.homenav;
aboutmenav.textContent = language.eng.aboutmenav;
projectsnav.textContent = language.eng.projectsnav;
contactnav.textContent = language.eng.contactnav;
lang.textContent = language.eng.lang;
//index.html
if (window.location.pathname == '/' || window.location.href.indexOf("index") > -1) {
welcometitle.textContent = language.eng.welcometitle;
welcome1.textContent = language.eng.welcome1;
welcome2.textContent = language.eng.welcome2;
}
//aboutme.html
else if(window.location.href.indexOf("aboutme.html") > -1) {
aboutmetitle.textContent = language.eng.aboutmetitle;
aboutme1.textContent = language.eng.aboutme1;
aboutme2.textContent = language.eng.aboutme2;
aboutme3.textContent = language.eng.aboutme3;
aboutmebutton1.textContent = language.eng.aboutmebutton1;
aboutmebutton2.textContent = language.eng.aboutmebutton2;
aboutmebutton3.textContent = language.eng.aboutmebutton3;
}
//projects.html
else if(window.location.href.indexOf("projects") > -1) {
projectstitle.textContent = language.eng.projectstitle;
projects.textContent = language.eng.projects;
}
//contactme.html
else if(window.location.href.indexOf("contactme") > -1) {
contacttitle.textContent = language.eng.contacttitle;
contact.textContent = language.eng.contact;
}
//aboutme/cats.html
else if(window.location.href.indexOf("cats") > -1) {
catstitle.textContent = language.eng.catstitle;
cats.textContent = language.eng.cats;
}
//aboutme/linux.html
else if(window.location.href.indexOf("linux") > -1) {
linuxtitle.textContent = language.eng.linuxtitle;
linux1.textContent = language.eng.linux1;
linuxli1.textContent = language.eng.linuxli1;
linuxli2.textContent = language.eng.linuxli2;
linuxli3.textContent = language.eng.linuxli3;
linuxli4.textContent = language.eng.linuxli4;
linuxli5.textContent = language.eng.linuxli5;
linuxli6.textContent = language.eng.linuxli6;
linux2.textContent = language.eng.linux2;
linux2_2.textContent = language.eng.linux2_2;
linux3.textContent = language.eng.linux3;
linuxli7.textContent = language.eng.linuxli7;
linuxli8.textContent = language.eng.linuxli8;
linuxli9.textContent = language.eng.linuxli9;
linuxli10.textContent = language.eng.linuxli10;
linux4.textContent = language.eng.linux4;
linuxli11.textContent = language.eng.linuxli11;
linuxli12.textContent = language.eng.linuxli12;
linuxli13.textContent = language.eng.linuxli13;
}
//aboutme/techno.html
else if(window.location.href.indexOf("techno") > -1) {
technotitle.textContent = language.eng.technotitle;
techno.textContent = language.eng.techno;
technoli1.textContent = language.eng.technoli1;
technoli2.textContent = language.eng.technoli2;
technoli3.textContent = language.eng.technoli3;
technoli4.textContent = language.eng.technoli4;
technoli5.textContent = language.eng.technoli5;
technoli6.textContent = language.eng.technoli6;
technoli7.textContent = language.eng.technoli7;
technoli8.textContent = language.eng.technoli8;
technoli9.textContent = language.eng.technoli9;
technoli10.textContent = language.eng.technoli10;
}
}
//invert isGerman bool on click of language button
function langChange() {
isGerman = !isGerman;
localStorage.setItem("isGerman", isGerman);
console.log(isGerman);
window.location.reload();
}
//menu Script
var menuList = document.getElementById("menuList");
menuList.style.maxHeight = "0px";
function togglemenu(){
if(menuList.style.maxHeight == "0px")
{
menuList.style.maxHeight = "200px";
}
else
{
menuList.style.maxHeight = "0px";
}
}

View file

@ -15,10 +15,11 @@
<img src="webicons/logo.png" class="logo"> <img src="webicons/logo.png" class="logo">
<nav> <nav>
<ul id="menuList"> <ul id="menuList">
<li><a href="index.html">Home</a></li> <li><a href="index.html" id="homenav"></a></li>
<li><a href="aboutme.html">About Me</a></li> <li><a href="aboutme.html" id="aboutmenav"></a></li>
<li><a href="projects.html">Projects</a></li> <li><a href="projects.html" id="projectsnav"></a></li>
<li><a href="contactme.html">Contact Me</a></li> <li><a href="contactme.html" id="contactnav"></a></li>
<li><a onclick="langChange()" id="lang"></a></li>
</ul> </ul>
</nav> </nav>
<img src="webicons/menu.png" class="menu-icon" onclick="togglemenu()"> <img src="webicons/menu.png" class="menu-icon" onclick="togglemenu()">
@ -26,8 +27,8 @@
<div class="row"> <div class="row">
<div class="col-1"> <div class="col-1">
<h1>Kommt bald!</h1> <h1 id="projectstitle"></h1>
<h2>Noch ist hier nichts. :)</h2> <h2 id="projects"></h2>
</div> </div>
<div class="col-2"> <div class="col-2">
<img src="webicons/foto.png" class="fotovonmir"> <img src="webicons/foto.png" class="fotovonmir">
@ -35,33 +36,15 @@
</div> </div>
<div class="socialmedia"> <div class="socialmedia">
<a href="https://feddit.de/u/mawacode"><img src="../webicons/lemmy.png"></a> <a href="https://feddit.de/u/mawacode"><img src="webicons/lemmy.png"></a>
<a rel="me" href="https://hessen.social/@mawacode"><img src="../webicons/mastodon.png"></a> <a rel="me" href="https://hessen.social/@mawacode"><img src="webicons/mastodon.png"></a>
<a href="https://github.com/malikwachter"><img src="../webicons/GitHub.png"></a> <a href="https://github.com/malikwachter"><img src="webicons/GitHub.png"></a>
</div> </div>
</div> </div>
<script>
var menuList = document.getElementById("menuList");
menuList.style.maxHeight = "0px"; <script src="js/lang.js"></script>
function togglemenu(){
if(menuList.style.maxHeight == "0px")
{
menuList.style.maxHeight = "130px";
}
else
{
menuList.style.maxHeight = "0px";
}
}
</script>
</body> </body>

BIN
webicons/eng.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

BIN
webicons/ger.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB