Add LocalSelector

index.html

@@ -9,8 +9,8 @@
 	<link rel="icon" href="./src/favicon.ico" />
 	<title>Av32000</title>
 	<meta content="Av32000" property="og:title" />
-	<meta content="Je suis Av32000, développeur frontend et backend, passionné
-		d’informatique et de nouvelles technologies !" property="og:description" />
+	<meta content="I'm Av32000, frontend and backend developer, passionate about IT
+      and new technologies!" property="og:description" />
 	<meta content="https://av32000.github.io" property="og:url" />
 	<meta content="https://av32000.github.io/src/embed.png" property="og:image" />
 	<meta content="#00FFB2" data-react-helmet="true" name="theme-color" />
@@ -23,6 +23,9 @@
 			<div class="disk disk-2" id="disk"></div>
 			<div class="disk disk-3"></div>
 		</div>
+		<div class="local-selector">
+			<select id="local"></select>
+		</div>
 		<div class="topbar">
 			<img src="./src/icon.jpg" alt="Icon Compte" />
 			<p>Av32000</p>
@@ -183,7 +186,8 @@ <h1>Csharp</h1>
 				<div class="Java">
 					<h1>Java</h1>
 					<p id="java-1" toTranslate>
-						J’ai découvert Java en créant des mods et plugin pour le jeu Minecraft. Je l'ai également utilisé dans de
+						J’ai découvert Java en créant des mods et plugin pour le jeu Minecraft. Je l'ai également
+						utilisé dans de
 						petits projets d'applications Android. Même si je ne m’en sers
 						que rarement, je l’ai assez utilisé pour en avoir une bonne maîtrise d’ensemble.
 					</p>

style.css

@@ -65,6 +65,27 @@ body {
 	justify-content: center;
 }
 
+.local-selector {
+	position: absolute;
+	top: 10px;
+	right: 10px;
+	color: white;
+	appearance: none;
+}
+
+.local-selector select {
+	appearance: none;
+	outline: none;
+	background: none;
+	border: none;
+	color: white;
+	padding: 10px;
+}
+
+.local-selector select option {
+	color: black;
+}
+
 .header h1 {
 	font-size: 48px;
 	margin-bottom: 90px;
@@ -272,13 +293,14 @@ body {
 	height: 40px;
 }
 
-.last-update-project{
+.last-update-project {
 	color: gray;
 	font-size: .8rem;
 	margin-left: 5px;
 }
 
 @media all and (max-width: 900px) {
+
 	.header h1,
 	#header-desc {
 		font-size: 6vw;
@@ -346,13 +368,15 @@ body {
 }
 
 @media all and (max-width: 550px) {
-	.link{
+	.link {
 		font-size: 3.3vw;
 	}
-	.last-update-project{
+
+	.last-update-project {
 		font-size: 2.4vw;
 	}
-	.socials{
+
+	.socials {
 		margin: 20vw;
 	}
 }
@@ -361,7 +385,8 @@ body {
 	0% {
 		opacity: 0;
 	}
+
 	100% {
 		opacity: 1;
 	}
-}
+}

translations.js

@@ -25,7 +25,7 @@ function extractTranslations(xml) {
 // Detect User Preferences
 const languages = ["fr", "en"]
 let userLanguage = (navigator.language || navigator.userLanguage).split("-")[0];
-if (!languages.includes(userLanguage)) userLanguage = "fr"
+if (!languages.includes(userLanguage)) userLanguage = "en"
 
 loadXMLFile(userLanguage + ".xml", function (xml) {
   var translations = extractTranslations(xml);
@@ -40,10 +40,22 @@ function ApplyTranslations(translations) {
     let html = translations[element.id]
     if (html != null) element.innerHTML = html;
   })
+
+  // Load LocalSelector
+  const loaclSelector = document.getElementById("local")
+  loaclSelector.innerHTML = ""
+  languages.forEach(l => {
+    const option = document.createElement("option")
+    option.value = l
+    option.innerText = l.toUpperCase()
+    option.onclick = e => setLanguage(e.target.value)
+    if (userLanguage == l) option.selected = "selected"
+    loaclSelector.appendChild(option)
+  })
 }
 
-// Debug Function
 function setLanguage(language) {
+  userLanguage = language
   loadXMLFile(language + ".xml", function (xml) {
     var translations = extractTranslations(xml);
     ApplyTranslations(translations)