New language selection buttons

This commit is contained in:
2025-04-30 22:04:08 +02:00
parent 23a186a9ba
commit 6ae1c81c6b
6 changed files with 173 additions and 11 deletions

View File

@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 1062.99 708.661" xmlns="http://www.w3.org/2000/svg">
<path d="m0 0h1063v708.66h-1063z" fill="#fff" fill-rule="evenodd"/>
<path d="m0 0h354.33v708.66h-354.33z" fill="#00267f" fill-rule="evenodd"/>
<path d="m708.66 0h354.33v708.66h-354.33z" fill="#f31830" fill-rule="evenodd"/>
</svg>

After

Width:  |  Height:  |  Size: 343 B

View File

@@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
<path d="m0 0h300v200h-300z" fill="#fff" stroke="#000"/>
<path d="m210 100a60 60 0 1 1 -120 0 60 60 0 1 1 120 0z" fill="#be0026"/>
</svg>

After

Width:  |  Height:  |  Size: 242 B

View File

@@ -0,0 +1,20 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg enable-background="new 0 0 341.59 203.057" viewBox="0 0 341.59 203.057" xmlns="http://www.w3.org/2000/svg">
<path d="m0.063 0h341.47v202.17h-341.47z" fill="#fff"/>
<path d="m.063,12" fill="#ffffbd"/>
<path d="m36.323 49.445" fill="#f00"/>
<path d="m.063,20v56.5h96z" fill="#13135f"/>
<path d="m109.91 76.5h19.652l-129.5-76.5v12z" fill="#f00"/>
<path d="m37.916 0 109.65 67.486v-67.486z" fill="#12145b"/>
<path d="m341.56 182v-56h-95z" fill="#13135f"/>
<path d="m232.72 126h-19.652l128.5 76.125v-12.125z" fill="#f00"/>
<path d="m304.68 203-109.65-67.486v67.486z" fill="#12145b"/>
<path d="m341.56 20.513v55.987l-95-0.068z" fill="#13135f"/>
<path d="m195.06 76.5h22.298l124.2-76.5h-22.554z" fill="#f00"/>
<path d="m303.75 0-108.69 66.986v-66.986z" fill="#12145b"/>
<path d="m0.071 182.48v-56.5h96z" fill="#13135f"/>
<path d="m147.52 125.97h-22.299l-125.22 77.088h22.572z" fill="#f00"/>
<path d="m37.87 202.97 109.65-67.486v67.486z" fill="#12145b"/>
<path d="m156.72 0h28.874v203h-28.874z" fill="#f00"/>
<path d="m0.063 85.252h341.53v32.672h-341.53z" fill="#f00"/>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@@ -0,0 +1,77 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 247 130" xmlns="http://www.w3.org/2000/svg">
<g fill="#bf0a30" fill-rule="evenodd" font-size="12">
<path d="m0 0h247v10h-247z"/>
<path d="m0 20h247v10h-247z"/>
<path d="m0 40h247v10h-247z"/>
<path d="m0 60h247v10h-247z"/>
<path d="m0 80h247v10h-247z"/>
<path d="m0 100h247v10h-247z"/>
<path d="m0 120h247v10h-247z"/>
</g>
<g fill="#fff" fill-rule="evenodd" font-size="12">
<path d="m0 10h247v10h-247z"/>
<path d="m0 30h247v10h-247z"/>
<path d="m0 50h247v10h-247z"/>
<path d="m0 70h247v10h-247z"/>
<path d="m0 90h247v10h-247z"/>
<path d="m0 110h247v10h-247z"/>
</g>
<path d="m0 0h98.8v70h-98.8z" fill="#002868" fill-rule="evenodd"/>
<path transform="translate(8.2333 7)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z" fill="#fff" fill-rule="evenodd"/>
<path transform="translate(24.7,7)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z" fill="#fff" fill-rule="evenodd"/>
<path transform="translate(41.167 7)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z" fill="#fff" fill-rule="evenodd"/>
<path transform="translate(57.633 7)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z" fill="#fff" fill-rule="evenodd"/>
<path transform="translate(74.1,7)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z" fill="#fff" fill-rule="evenodd"/>
<path transform="translate(90.567 7)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z" fill="#fff" fill-rule="evenodd"/>
<path transform="translate(16.467 14)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z" fill="#fff" fill-rule="evenodd"/>
<path transform="translate(32.933 14)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z" fill="#fff" fill-rule="evenodd"/>
<path transform="translate(49.4,14)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z" fill="#fff" fill-rule="evenodd"/>
<path transform="translate(65.867 14)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z" fill="#fff" fill-rule="evenodd"/>
<path transform="translate(82.333 14)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z" fill="#fff" fill-rule="evenodd"/>
<g transform="translate(0,14)" fill="#fff" fill-rule="evenodd">
<path transform="translate(8.2333 7)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
<path transform="translate(24.7,7)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
<path transform="translate(41.167 7)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
<path transform="translate(57.633 7)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
<path transform="translate(74.1,7)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
<path transform="translate(90.567 7)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
<path transform="translate(16.467 14)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
<path transform="translate(32.933 14)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
<path transform="translate(49.4,14)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
<path transform="translate(65.867 14)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
<path transform="translate(82.333 14)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
</g>
<g transform="translate(0,28)" fill="#fff" fill-rule="evenodd">
<path transform="translate(8.2333 7)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
<path transform="translate(24.7,7)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
<path transform="translate(41.167 7)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
<path transform="translate(57.633 7)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
<path transform="translate(74.1,7)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
<path transform="translate(90.567 7)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
<path transform="translate(16.467 14)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
<path transform="translate(32.933 14)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
<path transform="translate(49.4,14)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
<path transform="translate(65.867 14)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
<path transform="translate(82.333 14)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
</g>
<g transform="translate(0,42)" fill="#fff" fill-rule="evenodd">
<path transform="translate(8.2333 7)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
<path transform="translate(24.7,7)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
<path transform="translate(41.167 7)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
<path transform="translate(57.633 7)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
<path transform="translate(74.1,7)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
<path transform="translate(90.567 7)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
<path transform="translate(16.467 14)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
<path transform="translate(32.933 14)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
<path transform="translate(49.4,14)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
<path transform="translate(65.867 14)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
<path transform="translate(82.333 14)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z"/>
</g>
<path transform="translate(8.2333 63)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z" fill="#fff" fill-rule="evenodd"/>
<path transform="translate(24.7,63)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z" fill="#fff" fill-rule="evenodd"/>
<path transform="translate(41.167 63)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z" fill="#fff" fill-rule="evenodd"/>
<path transform="translate(57.633 63)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z" fill="#fff" fill-rule="evenodd"/>
<path transform="translate(74.1,63)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z" fill="#fff" fill-rule="evenodd"/>
<path transform="translate(90.567 63)" d="m0-4.004 0.89895 2.7667h2.9091l-2.3535 1.7099 0.89895 2.7667-2.3535-1.7099-2.3535 1.7099 0.89895-2.7667-2.3535-1.7099h2.9091l0.89895-2.7667z" fill="#fff" fill-rule="evenodd"/>
</svg>

After

Width:  |  Height:  |  Size: 11 KiB

View File

@@ -32,9 +32,17 @@
</router-link>
</div>
<div id="footer_right_div">
<div id="footer_picture">
<img src="https://picsum.photos/50/50">
</div>
<div id="language_selection_div">
<img :src="frFlagSvg" @click="changeLanguage('fr')"/>
<img :src="ukFlagSvg" @click="changeLanguage('en')"/>
<img :src="usFlagSvg" @click="changeLanguage('en')"/>
<img :src="jpFlagSvg" @click="changeLanguage('ja')"/>
</div>
</div>
</div> <!-- Footer content -->
<p id="footer_little_text">&lt;/&gt; with &lt;3 by Kévin. Copyright...</p>
@@ -50,6 +58,14 @@
import lineImg from '@/assets/img/line.png';
import githubSvg from '@/assets/img/github.svg';
import frFlagSvg from '@/assets/svg/language/FR_flag.svg';
import jpFlagSvg from '@/assets/svg/language/JP_flag.svg';
import ukFlagSvg from '@/assets/svg/language/UK_flag.svg';
import usFlagSvg from '@/assets/svg/language/US_flag.svg';
import {useI18n} from 'vue-i18n';
const i18n = useI18n();
const networks = [{
img:githubSvg,
routerLink:false,
@@ -63,6 +79,11 @@
routerLink:true,
link:"contact"
}];
const changeLanguage = (lang)=>{
document.cookie = "localeCookie="+lang;
location.reload(); // So everything can reload with the new cookie, and a new display language
}
</script>
<style scoped>
@@ -169,14 +190,33 @@
margin: 0;
margin-left: 20px;
}
#footer_right_div{
width: fit-content;
min-width: 100px;
min-height: 100px;
margin-left: auto;
display: flex;
flex-direction: column;
justify-content: center;
gap: 20px;
}
#footer_picture{
text-align: center;
}
#footer_picture > img{
width: 100px;
height: 100px;
margin-left: auto;
border: 2px green dotted;
}
#footer_picture img{
width: 100%;
height: 100%;
#language_selection_div{
display: flex;
flex-direction: row;
flex-wrap: wrap;
min-width: fit-content;
gap: 7px;
}
#language_selection_div img{
width: 50px;
height: 50px;
cursor: pointer;
}
</style>

View File

@@ -11,17 +11,31 @@ import fr from "./assets/localization/fr/localization.json";
import en from "./assets/localization/en/localization.json";
import ja from "./assets/localization/ja/localization.json";
let userLanguage = navigator.language || navigator.userLanguage;
function getCookie(cname) {
let name = cname + "=";
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(';');
for(let i = 0; i <ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
let userLanguage = getCookie("localeCookie") || navigator.language || navigator.userLanguage;
if(userLanguage.split("-")[0] == "fr") userLanguage = "fr";
else if(userLanguage.split("-")[0] == "jp" || userLanguage.split("-")[0] == "ja") userLanguage = "ja";
else userLanguage = "en";
console.warn("Locale forced to english !");
const i18n = createI18n({
legacy:false,
locale: 'en',//userLanguage,
locale: userLanguage,//'en',
fallbackLocale: 'en',
messages: {
en: en,