CHANGE: lang animation (stereum-dev#1874)

launcher/public/output.css

@@ -2050,10 +2050,6 @@ video {
   width: 66.666667%;
 }
 
-.w-40{
-  width: 10rem;
-}
-
 .w-5{
   width: 1.25rem;
 }
@@ -2166,6 +2162,10 @@ video {
   width: 390px;
 }
 
+.w-\[40\%\]{
+  width: 40%;
+}
+
 .w-\[400px\]{
   width: 400px;
 }
@@ -2194,10 +2194,6 @@ video {
   width: 60%;
 }
 
-.w-\[65\%\]{
-  width: 65%;
-}
-
 .w-\[70px\]{
   width: 70px;
 }
@@ -2228,14 +2224,6 @@ video {
   width: 100vw;
 }
 
-.w-\[35\%\]{
-  width: 35%;
-}
-
-.w-\[40\%\]{
-  width: 40%;
-}
-
 .min-w-\[100px\]{
   min-width: 100px;
 }

launcher/src/components/UI/language-page/LangScreen.vue

@@ -1,9 +1,12 @@
 <template>
-  <div class="w-screen h-screen grid grid-cols-12 grid-rows-12 items-center bg-[#336666] rounded-md relative">
+  <div
+    class="w-screen h-screen grid grid-cols-12 grid-rows-12 items-center bg-[#336666] rounded-md relative"
+  >
     <LogoSection />
     <MenuSection />
-    <EntryAnimation v-if="langStore.isEntryAnimationActive" />
-    <div class="col-start-11 col-span-full row-start-11 row-span-full flex justify-center items-center">
+    <div
+      class="col-start-11 col-span-full row-start-11 row-span-full flex justify-center items-center"
+    >
       <div
         class="w-[150px] h-14 bg-[#2f5a5a] hover:bg-[#244343] border-2 border-gray-400 rounded-full shadow-md shadow-[#1e2b2b] flex justify-center items-center cursor-pointer transition-all duration-300 ease-in-out hover:shadow-lg active:shadow-none active:scale-95 mr-4"
         :class="langStore.selectedLang === '' ? 'pointer-events-none opacity-50 ' : ''"
@@ -15,15 +18,17 @@
   </div>
 </template>
 <script setup>
-import EntryAnimation from "./sections/EntryAnimation.vue";
+import { useRouter } from "vue-router";
 import LogoSection from "./sections/LogoSection.vue";
 import MenuSection from "./sections/MenuSection.vue";
 
 import { useLangStore } from "@/store/languages";
 
+const router = useRouter();
 const langStore = useLangStore();
 
 const buttonHandler = () => {
-  langStore.runEntryAnimation();
+  langStore.settingPageIsVisible ? router.push("/setting") : router.push("/login");
+  langStore.settingPageIsVisible = false;
 };
 </script>

launcher/src/components/UI/language-page/components/LogoBody.vue

@@ -1,9 +1,11 @@
 <template>
-  <div class="w-full h-full col-start-1 col-span-8 row-start-1 row-span-full grid grid-cols-12 grid-rows-12">
+  <div
+    class="w-full h-full col-start-1 col-end-8 row-start-1 row-span-full grid grid-cols-12 grid-rows-12"
+  >
     <img
-      class="col-start-2 col-end-12 row-start-1 row-end-11"
-      src="/img/icon/language-page-icons/stereum-logo.svg"
-      alt="Logo Icon"
+      class="w-full h-full col-start-2 col-end-12 row-start-1 row-span-full"
+      src="/animation/language/heartcore.gif"
+      alt="Logo Anim"
     />
   </div>
 </template>

launcher/src/components/UI/language-page/components/MenuBody.vue

@@ -29,7 +29,11 @@
         }"
         @click="handleClick(lang, index)"
       >
-        <img :src="lang.flag" :alt="`${lang.name} Flag`" class="col-start-1 col-span-3 w-10 h-10 rounded-full" />
+        <img
+          :src="lang.flag"
+          :alt="`${lang.name} Flag`"
+          class="col-start-1 col-span-3 w-10 h-10 rounded-full"
+        />
         <span
           class="col-start-4 col-span-full text-lg font-bold uppercase"
           :class="{ 'text-gray-700': selectedLanguage }"
@@ -71,6 +75,7 @@ onBeforeMount(async () => {
     router.push("/");
   }
 });
+
 // langStore.settingPageIsVisible ? "/setting" :
 const checkSettings = async () => {
   try {
@@ -108,7 +113,7 @@ const selectItem = async (lang, playSound = true) => {
 
 const playSoundBase = (base64Data) => {
   const audio = new Audio(base64Data);
-  audio.volume = langStore.currentVolume; 
+  audio.volume = langStore.currentVolume;
   audio.play().catch((e) => console.error("Failed to play sound:", e));
 };
 

launcher/src/store/languages.js

@@ -18,7 +18,7 @@ export const useLangStore = defineStore("languages", {
           name: "deutsch",
           flag: "img/flag/germany.png",
           label: "de",
-          isSelected: true,
+          isSelected: false,
         },
         {
           name: "français",