Styling

src/App.vue

@@ -38,10 +38,14 @@ async function init(){
 init();
 </script>
 <template>
-  <main class="w-screen h-screen overflow-hidden flex items-center justify-center p-10" v-if="initialized">
-    <div class="w-full h-full border rounded-2xl transition-all ease-in-out duration-200 p-6 overflow-y-scroll">
+  <main class="w-screen h-screen overflow-hidden flex items-center justify-center p-10 bg-black text-white" v-if="initialized">
+    <div class="w-full h-full border rounded-2xl transition-all ease-in-out duration-200 p-6 overflow-y-scroll border-gray-600 bg-gray-900">
+      <h1 class="text-4xl font-extrabold">Produkt zur Hausarbeit von Jonas Kuhlenkamp</h1>
+      <br>
+      <hr>
+      <br>
       <div v-if="!home_page">
-        <h1>Moin!</h1>
+        <h2 class="text-2xl font-bold">Konfiguration der Ollama API</h2>
         <p>Mit dieser App kannst du verschiedene Modelle über die Ollama API ausprobieren und vergleichen.</p>
         <form @submit="submit">
           <Input placeholder="Ollama URL (z.B. http://localhost:11434)" class="w-full" v-model="ollama_url"/> <br>
@@ -50,8 +54,40 @@ init();
           <input value="Weiter" class="w-full border" type="submit"/>
         </form>
       </div>
-      <RouterView v-else/>
+      <router-view v-slot="{ Component, route }" v-else>
+      <!-- Use a custom transition or fallback to `fade` -->
+      <transition :name="<string> route.meta.transition || 'fade'">
+        <component :is="Component" />
+      </transition>
+</router-view>
     </div>
   </main>
 
-</template>
+</template>
+<style>
+.slide-left-enter-active,
+.slide-left-leave-active {
+  transition: all 0.3s ease-in-out;
+  position: absolute;
+  transform: translateX(0px);
+}
+
+.slide-left-enter-from,
+.slide-left-leave-to {
+  opacity: 0;
+  transform: translateX(100px);
+}
+
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition: all 0.3s ease;
+  position: absolute;
+  transform: translateX(0px);
+}
+
+.slide-right-enter-from,
+.slide-right-leave-to {
+  opacity: 0;
+  transform: translateX(-100px);
+}
+</style>