ändere(App.vue): Ändere die Ausrichtung des Logos von zentriert auf rechts.

 ändere(App.vue): Ändere die Breite des Logos von 200px auf 100px.
 ändere(Form.vue): Aktualisiere Kommentare und füge neue Funktionalitäten hinzu.
 ändere(Form.vue): Zentriere den Inhalt des Flex-Containers.
 ändere(Lottie.vue): Aktualisiere Textinhalte in den Animationen.

src/App.vue

@@ -51,12 +51,12 @@ function pauseLottie(data: boolean) {
 
 <style scoped>
 .logo {
-  text-align: center;
+  text-align: right;
   margin: auto;
   padding-bottom: 50px;
 }
 .logoImg {
-  width: 200px;
+  width: 100px;
 }
 .appGrid {
   display: flex;

src/components/Form.vue

 <script setup lang="ts">
-
 const emit = defineEmits(["playLottie", "pauseLottie"]);
 const vorname = defineModel("vorname");
 const nachname = defineModel("nachname");
@@ -19,8 +18,11 @@ function pauseAnimation() {
 }
 
 function writeJson() {
-  // nützlich, um den Datenpfad vom src im template oder output in Actions zu ändern, wenn wir das machen wollen
-  // wir können ein Benutzer fragen, ob sie ihr Neutzername eingeben können und das output einfach zu seiner Downloads Ordner schicken. 
+  // BL: nützlich, um den Datenpfad vom src im template oder output in Actions zu ändern, wenn wir das machen wollen
+  // wir können ein Benutzer fragen, ob sie ihr Neutzername eingeben können und das output einfach zu seiner Downloads Ordner schicken.
+  // DS: Das ist eine sehr gute Idee. So machen wir das. Tatsächlich hat in unserem System
+  // jeder Nutzer potentiell einen eigenen Export-Ordner.
+  // Kannst du gerne einbauen, die Detail ändere ich dann angepasst auf unser System.
   if (window.navigator.userAgent.indexOf("Windows") != -1) {
     console.log("The user is running Windows");
   } else if (window.navigator.userAgent.indexOf("Mac OS") != -1) {
@@ -37,7 +39,11 @@ function writeJson() {
   jsonDraft.assets[2].value = String(funktionZeileEins.value);
   jsonDraft.assets[3].value = String(funktionZeileZwei.value);
 
-  download(JSON.stringify(jsonDraft), "Bauchbinde_" + nachname.value + ".json", "text/plain");
+  download(
+    JSON.stringify(jsonDraft),
+    "Bauchbinde_" + nachname.value + ".json",
+    "text/plain"
+  );
 }
 
 function download(content: string, fileName: string, contentType: string) {
@@ -98,6 +104,7 @@ function download(content: string, fileName: string, contentType: string) {
   margin-bottom: 1em;
   width: 20em;
   display: flex;
+  justify-content: center;
   gap: 1rem;
 }
 

src/components/Lottie.vue

@@ -120,6 +120,15 @@ watch(
 );
 
 onMounted(() => {
+  AnimationRechtsBB.layers[1].t.d.k[0].s.t = "MAX";
+  AnimationLinksBB.layers[1].t.d.k[0].s.t = "MAX";
+  AnimationRechtsBB.layers[3].t.d.k[0].s.t = "MUSTERMANN";
+  AnimationLinksBB.layers[3].t.d.k[0].s.t = "MUSTERMANN";
+  AnimationRechtsBB.layers[5].t.d.k[0].s.t = "Testperson";
+  AnimationLinksBB.layers[5].t.d.k[0].s.t = "Testperson";
+  AnimationRechtsBB.layers[7].t.d.k[0].s.t = "";
+  AnimationLinksBB.layers[7].t.d.k[0].s.t = "";
+
   setTimeout(() => {
     // console.log(anim.value.goToAndPlay(150, true));
     anim.value;