Merge Konflikte erledigt und App.vue hinzugefügt

src/App.vue

@@ -8,15 +8,33 @@ const vorname = ref("");
 const nachname = ref("");
 const funktionZeileEins = ref("");
 const funktionZeileZwei = ref("");
+const BBEcke = ref("");
+let playLottieStatus = ref(false);
+let pauseLottieStatus = ref(false)
+
+function playLottie(data :boolean) {
+  playLottieStatus.value = data
+}
+
+function pauseLottie(data :boolean) {
+  pauseLottieStatus.value = data
+}
 </script>
 
 <template>
+      <div class="logo" >
+        <img class="logoImg" src="./assets/rbb-logo.png">
+      </div>
+
   <div class="appGrid">
     <Form
       v-model:vorname="vorname"
       v-model:nachname="nachname"
       v-model:funktionZeileEins="funktionZeileEins"
       v-model:funktionZeileZwei="funktionZeileZwei"
+      v-model:BBEcke = "BBEcke"
+      v-on:playLottie="playLottie"
+      v-on:pauseLottie="pauseLottie"
     ></Form>
 
     <Lottie
@@ -24,27 +42,29 @@ const funktionZeileZwei = ref("");
       :nachname="nachname"
       :funktionZeileEins="funktionZeileEins"
       :funktionZeileZwei="funktionZeileZwei"
+      :BBEcke = "BBEcke"
+      :playLottieStatus = "playLottieStatus"
+      :pauseLottieStatus = "pauseLottieStatus"
     ></Lottie>
   </div>
 </template>
 
 <style scoped>
 .logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
+  text-align: center;
+  margin: auto;
+  padding-bottom: 50px;
 }
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
+.logoImg {
+  width: 200px;
 }
-.logo.vue:hover {
-  filter: drop-shadow(0 0 2em #42b883aa);
-}
-
 .appGrid {
   display: grid;
   grid-template-columns: auto auto auto auto;
   gap: 50px;
 }
+
+body {
+  background-color: #FFF;
+}
 </style>

src/components/Form.vue

@@ -18,11 +18,13 @@ function pauseAnimation() {
 </script>
 
 <template>
+  
   <div class="form">
     <h2 class="title">rbb24 Reportage Bauchbinde</h2>
     <div class="container">
       <label>Postion der Bauchbinde </label>
       <div class="row">
+<<<<<<< HEAD
         <select id="bauchbindeEcke" v-model="BBEcke">
           <option value="rechts" selected>rechts</option>
           <option value="links">links</option>
@@ -51,6 +53,22 @@ function pauseAnimation() {
         <button class="pauseLottie-btn" @click="pauseAnimation">
           Lottie Pausieren
         </button>
+=======
+        <label>Vorname </label>
+        <input type="text" v-model="vorname" />
+      </div>
+      <div class="row">
+        <label>Nachname </label>
+        <input type="text" v-model="nachname" />
+      </div>
+      <div class="row">
+        <label>Funktion 1. Zeile </label>
+        <input type="text" v-model="funktionZeileEins" />
+      </div>
+      <div class="row">
+        <label>Funktion 2. Zeile </label>
+        <input type="text" v-model="funktionZeileZwei" />
+>>>>>>> ed3dcb946f9ad82682aa98ac33c5dbd9d2e87887
       </div>
     </div>
   </div>
@@ -66,6 +84,7 @@ function pauseAnimation() {
   border: 1px solid #fff;
   height: 25px;
 }
+<<<<<<< HEAD
 
 #app {
   text-align: unset !important;
@@ -120,4 +139,6 @@ function pauseAnimation() {
 .form {
   height: 115%;
 }
+=======
+>>>>>>> ed3dcb946f9ad82682aa98ac33c5dbd9d2e87887
 </style>