toggle for language(base) + starting inscription menu

frontend/src/App.vue

@@ -2,7 +2,7 @@
 	import 'https://kit.fontawesome.com/fb3bbd0a95.js'
 	import { toast } from 'vue3-toastify';
 	import { ref } from 'vue'
-
+  import i18n from './i18n.js'
 	const test = ref();
 
 	async function draw(e) {
@@ -10,6 +10,8 @@
 		test.value = await test.value.json();
 		toast(test.value['txt']);
 	}
+
+
 </script>
 
 <template>
@@ -34,9 +36,13 @@
                 <div class="fa-solid fa-bell"  style="margin-top: 7px; margin-bottom: 3px;"></div>
             </a></li>
         <li style="float: right;" title="Options">
-          <div class="item">
+            <a href="#Options">
                 <div  class="fa-solid fa-gear"  style="margin-top: 7px; margin-bottom: 3px;"></div>
-            </div></li>
+            </a></li>
+
+        <li style="float:right; margin-top:7.5px;" title="Language">
+            <input type="checkbox" v-model="toggle" true-value="FR" false-value="EN" class="theme-checkbox">
+        </li>
       </ul>
     </div>
 
@@ -112,7 +118,7 @@
 		transition-duration: .3s;
 	}
 
-	.item,li a{
+	li a{
 		display: flex;
 		padding: 8px 16px;
 		color:rgb(255, 255, 255);
@@ -159,8 +165,7 @@
 	}
 
 
-	ul.horizontal .item:hover, li a:hover:not(.active){
-
+	ul.horizontal li a:hover:not(.active){
 		background-color: black;
 		border-radius:6px;
 		color:white;
@@ -194,4 +199,51 @@
 		transition-duration: .3s;
 		padding-left: 5px;
 	  }
+    .theme-checkbox {
+    --toggle-size: 16px;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    width: 80px;
+    height: 40px;
+    background: -webkit-gradient(linear, left top, right top, color-stop(50%, #efefef), color-stop(50%, #2a2a2a)) no-repeat;
+    background: -o-linear-gradient(left, #efefef 50%, rgb(239, 60, 168) 50%) no-repeat;
+    background: linear-gradient(to right, #efefef 50%, rgb(239, 60, 168) 50%) no-repeat;
+    background-size: 205%;
+    background-position: 0;
+    -webkit-transition: 0.4s;
+    -o-transition: 0.4s;
+    transition: 0.4s;
+    border-radius: 99em;
+    position: relative;
+    cursor: pointer;
+    font-size: var(--toggle-size);
+    }
+
+    .theme-checkbox::before {
+    content: "";
+    width: 35px;
+    height: 35px;
+    position: absolute;
+    top: 2px;
+    left: 3px;
+    background: -webkit-gradient(linear, left top, right top, color-stop(50%, #efefef), color-stop(50%, #2rgb(239, 60, 168))) no-repeat;
+    background: -o-linear-gradient(left, #efefef 50%, rgb(239, 60, 168) 50%) no-repeat;
+    background: linear-gradient(to right, #efefef 50%, rgb(239, 60, 168) 50%) no-repeat;
+    background-size: 205%;
+    background-position: 100%;
+    border-radius: 50%;
+    -webkit-transition: 0.4s;
+    -o-transition: 0.4s;
+    transition: 0.4s;
+    }
+
+    .theme-checkbox:checked::before {
+    left: calc(100% - 35px - 3px);
+    background-position: 0;
+    }
+
+    .theme-checkbox:checked {
+    background-position: 100%;
+    }
 </style>

frontend/src/Inscription.vue

@@ -0,0 +1,2 @@
+<template>
+</template>

frontend/src/Login.vue

@@ -116,6 +116,8 @@
 
 <style scoped>
 .Home{
+  position:absolute;
+  z-index:1;
  	display: flex;
 	padding: 8px 16px;
 	color:rgb(255, 255, 255);