From 0ce433b00266a21e8ca13e71500ef3e3be181913 Mon Sep 17 00:00:00 2001
From: "leeway.zlw" <leeway213@outlook.com>
Date: Sun, 24 Mar 2024 10:46:24 +0800
Subject: [PATCH] update carousel indicator

---
 src/components/AnimateHumanVideos.vue | 21 +++----
 src/components/ComparisionVideos.vue  | 24 +++-----
 src/components/CrossIdVideos.vue      | 21 +++----
 src/components/HelloWorld.vue         | 41 -------------
 src/components/T2IVideos.vue          | 58 +++++++++++-------
 src/components/TheWelcome.vue         | 88 ---------------------------
 src/components/UnseenVideos.vue       | 21 +++----
 src/main.ts                           |  1 +
 8 files changed, 70 insertions(+), 205 deletions(-)
 delete mode 100644 src/components/HelloWorld.vue
 delete mode 100644 src/components/TheWelcome.vue

diff --git a/src/components/AnimateHumanVideos.vue b/src/components/AnimateHumanVideos.vue
index 67474a7..98edbe9 100644
--- a/src/components/AnimateHumanVideos.vue
+++ b/src/components/AnimateHumanVideos.vue
@@ -60,23 +60,19 @@ watch(animateHumanCarousel, (newV) => {
     </div>
 
     <!--Carousel indicators-->
-    <div class="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] mb-4 flex list-none justify-center p-0"
+    <div class="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] -mb-8 flex list-none justify-center p-0"
       data-twe-carousel-indicators>
       <button type="button" data-twe-target="#animateHumanCarousel" data-twe-slide-to="0" data-twe-carousel-active
-        class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
-        aria-current="true" aria-label="Slide 1"></button>
-      <button type="button" data-twe-target="#animateHumanCarousel" data-twe-slide-to="1"
-        class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
+        class="indicator" aria-current="true" aria-label="Slide 1"></button>
+      <button type="button" data-twe-target="#animateHumanCarousel" data-twe-slide-to="1" class="indicator"
         aria-label="Slide 2"></button>
-      <button type="button" data-twe-target="#animateHumanCarousel" data-twe-slide-to="2"
-        class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
+      <button type="button" data-twe-target="#animateHumanCarousel" data-twe-slide-to="2" class="indicator"
         aria-label="Slide 3"></button>
     </div>
 
     <!--Carousel controls - prev item-->
-    <button
-      class="absolute bottom-0 left-0 top-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
-      type="button" data-twe-target="#animateHumanCarousel" data-twe-slide="prev">
+    <button class="indicator-btn indicator-left-btn" type="button" data-twe-target="#animateHumanCarousel"
+      data-twe-slide="prev">
       <span class="inline-block h-8 w-8">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
           class="h-6 w-6">
@@ -87,9 +83,8 @@ watch(animateHumanCarousel, (newV) => {
         class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">Previous</span>
     </button>
     <!--Carousel controls - next item-->
-    <button
-      class="absolute bottom-0 right-0 top-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
-      type="button" data-twe-target="#animateHumanCarousel" data-twe-slide="next">
+    <button class="indicator-btn indicator-right-btn" type="button" data-twe-target="#animateHumanCarousel"
+      data-twe-slide="next">
       <span class="inline-block h-8 w-8">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
           class="h-6 w-6">
diff --git a/src/components/ComparisionVideos.vue b/src/components/ComparisionVideos.vue
index 73f147f..19929f6 100644
--- a/src/components/ComparisionVideos.vue
+++ b/src/components/ComparisionVideos.vue
@@ -60,26 +60,21 @@ watch(comparisionsCarousel, (newV) => {
     </div>
 
     <!--Carousel indicators-->
-    <div class="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] mb-4 flex list-none justify-center p-0"
+    <div class="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] -mb-8 flex list-none justify-center p-0"
       data-twe-carousel-indicators>
       <button type="button" data-twe-target="#comparisionsCarousel" data-twe-slide-to="0" data-twe-carousel-active
-        class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
-        aria-current="true" aria-label="Slide 1"></button>
-      <button type="button" data-twe-target="#comparisionsCarousel" data-twe-slide-to="1"
-        class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
+        class="indicator" aria-current="true" aria-label="Slide 1"></button>
+      <button type="button" data-twe-target="#comparisionsCarousel" data-twe-slide-to="1" class="indicator"
         aria-label="Slide 2"></button>
-      <button type="button" data-twe-target="#comparisionsCarousel" data-twe-slide-to="2"
-        class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
+      <button type="button" data-twe-target="#comparisionsCarousel" data-twe-slide-to="2" class="indicator"
         aria-label="Slide 3"></button>
-      <button type="button" data-twe-target="#comparisionsCarousel" data-twe-slide-to="3"
-        class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
+      <button type="button" data-twe-target="#comparisionsCarousel" data-twe-slide-to="3" class="indicator"
         aria-label="Slide 4"></button>
     </div>
 
     <!--Carousel controls - prev item-->
-    <button
-      class="absolute bottom-0 left-0 top-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
-      type="button" data-twe-target="#comparisionsCarousel" data-twe-slide="prev">
+    <button class="indicator-btn indicator-left-btn" type="button" data-twe-target="#comparisionsCarousel"
+      data-twe-slide="prev">
       <span class="inline-block h-8 w-8">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
           class="h-6 w-6">
@@ -90,9 +85,8 @@ watch(comparisionsCarousel, (newV) => {
         class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">Previous</span>
     </button>
     <!--Carousel controls - next item-->
-    <button
-      class="absolute bottom-0 right-0 top-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
-      type="button" data-twe-target="#comparisionsCarousel" data-twe-slide="next">
+    <button class="indicator-btn indicator-right-btn" type="button" data-twe-target="#comparisionsCarousel"
+      data-twe-slide="next">
       <span class="inline-block h-8 w-8">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
           class="h-6 w-6">
diff --git a/src/components/CrossIdVideos.vue b/src/components/CrossIdVideos.vue
index c263a0f..f1d001b 100644
--- a/src/components/CrossIdVideos.vue
+++ b/src/components/CrossIdVideos.vue
@@ -49,23 +49,19 @@ watch(crossIdCarousel, (newV) => {
     </div>
 
     <!--Carousel indicators-->
-    <div class="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] mb-4 flex list-none justify-center p-0"
+    <div class="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] -mb-8 flex list-none justify-center p-0"
       data-twe-carousel-indicators>
       <button type="button" data-twe-target="#crossIdCarousel" data-twe-slide-to="0" data-twe-carousel-active
-        class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
-        aria-current="true" aria-label="Slide 1"></button>
-      <button type="button" data-twe-target="#crossIdCarousel" data-twe-slide-to="1"
-        class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
+        class="indicator" aria-current="true" aria-label="Slide 1"></button>
+      <button type="button" data-twe-target="#crossIdCarousel" data-twe-slide-to="1" class="indicator"
         aria-label="Slide 2"></button>
-      <button type="button" data-twe-target="#crossIdCarousel" data-twe-slide-to="2"
-        class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
+      <button type="button" data-twe-target="#crossIdCarousel" data-twe-slide-to="2" class="indicator"
         aria-label="Slide 3"></button>
     </div>
 
     <!--Carousel controls - prev item-->
-    <button
-      class="absolute bottom-0 left-0 top-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
-      type="button" data-twe-target="#crossIdCarousel" data-twe-slide="prev">
+    <button class="indicator-btn indicator-left-btn" type="button" data-twe-target="#crossIdCarousel"
+      data-twe-slide="prev">
       <span class="inline-block h-8 w-8">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
           class="h-6 w-6">
@@ -76,9 +72,8 @@ watch(crossIdCarousel, (newV) => {
         class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">Previous</span>
     </button>
     <!--Carousel controls - next item-->
-    <button
-      class="absolute bottom-0 right-0 top-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
-      type="button" data-twe-target="#crossIdCarousel" data-twe-slide="next">
+    <button class="indicator-btn indicator-right-btn" type="button" data-twe-target="#crossIdCarousel"
+      data-twe-slide="next">
       <span class="inline-block h-8 w-8">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
           class="h-6 w-6">
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 38d821e..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  msg: string
-}>()
-</script>
-
-<template>
-  <div class="greetings">
-    <h1 class="green">{{ msg }}</h1>
-    <h3>
-      You’ve successfully created a project with
-      <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
-      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. What's next?
-    </h3>
-  </div>
-</template>
-
-<style scoped>
-h1 {
-  font-weight: 500;
-  font-size: 2.6rem;
-  position: relative;
-  top: -10px;
-}
-
-h3 {
-  font-size: 1.2rem;
-}
-
-.greetings h1,
-.greetings h3 {
-  text-align: center;
-}
-
-@media (min-width: 1024px) {
-  .greetings h1,
-  .greetings h3 {
-    text-align: left;
-  }
-}
-</style>
diff --git a/src/components/T2IVideos.vue b/src/components/T2IVideos.vue
index 764db29..b9fce10 100644
--- a/src/components/T2IVideos.vue
+++ b/src/components/T2IVideos.vue
@@ -43,45 +43,47 @@ const t2iCaptions = ref([
       <div
         class="relative float-left -mr-[100%] w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none"
         data-twe-carousel-active data-twe-carousel-item style="backface-visibility: hidden">
-
-        <video :ref="(el: any) => videos[0] = el" v-lazy src="@/assets/video/T2I/0.mp4" muted loop autoplay></video>
-
-
+        <div class="item-content">
+          <div class="t2i-caption"><span>Prompt: </span>{{ t2iCaptions[t2iIndex] }}</div>
+          <video :ref="(el: any) => videos[0] = el" v-lazy src="@/assets/video/T2I/0.mp4" muted loop autoplay></video>
+        </div>
       </div>
       <!--Second item-->
       <div
         class="relative float-left -mr-[100%] hidden w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none"
         data-twe-carousel-item style="backface-visibility: hidden">
-        <video :ref="(el: any) => videos[1] = el" v-lazy src="@/assets/video/T2I/1.mp4" muted loop></video>
+
+        <div class="item-content">
+          <div class="t2i-caption"><span>Prompt: </span>{{ t2iCaptions[t2iIndex] }}</div>
+          <video :ref="(el: any) => videos[1] = el" v-lazy src="@/assets/video/T2I/1.mp4" muted loop></video>
+        </div>
 
       </div>
       <!--Third item-->
       <div
         class="relative float-left -mr-[100%] hidden w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none"
         data-twe-carousel-item style="backface-visibility: hidden">
-        <video :ref="(el: any) => videos[2] = el" v-lazy src="@/assets/video/T2I/2.mp4" muted loop></video>
+        <div class="item-content">
+          <div class="t2i-caption"><span>Prompt: </span>{{ t2iCaptions[t2iIndex] }}</div>
+          <video :ref="(el: any) => videos[2] = el" v-lazy src="@/assets/video/T2I/2.mp4" muted loop></video>
+        </div>
       </div>
 
     </div>
 
     <!--Carousel indicators-->
-    <div class="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] mb-4 flex list-none justify-center p-0"
+    <div class="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] -mb-8 flex list-none justify-center p-0"
       data-twe-carousel-indicators>
       <button type="button" data-twe-target="#t2iCarousel" data-twe-slide-to="0" data-twe-carousel-active
-        class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
-        aria-current="true" aria-label="Slide 1"></button>
-      <button type="button" data-twe-target="#t2iCarousel" data-twe-slide-to="1"
-        class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
+        class="indicator" aria-current="true" aria-label="Slide 1"></button>
+      <button type="button" data-twe-target="#t2iCarousel" data-twe-slide-to="1" class="indicator"
         aria-label="Slide 2"></button>
-      <button type="button" data-twe-target="#t2iCarousel" data-twe-slide-to="2"
-        class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
+      <button type="button" data-twe-target="#t2iCarousel" data-twe-slide-to="2" class="indicator"
         aria-label="Slide 3"></button>
     </div>
 
     <!--Carousel controls - prev item-->
-    <button
-      class="absolute bottom-0 left-0 top-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
-      type="button" data-twe-target="#t2iCarousel" data-twe-slide="prev">
+    <button class="indicator-btn indicator-left-btn" type="button" data-twe-target="#t2iCarousel" data-twe-slide="prev">
       <span class="inline-block h-8 w-8">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
           class="h-6 w-6">
@@ -92,9 +94,8 @@ const t2iCaptions = ref([
         class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">Previous</span>
     </button>
     <!--Carousel controls - next item-->
-    <button
-      class="absolute bottom-0 right-0 top-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
-      type="button" data-twe-target="#t2iCarousel" data-twe-slide="next">
+    <button class="indicator-btn indicator-right-btn" type="button" data-twe-target="#t2iCarousel"
+      data-twe-slide="next">
       <span class="inline-block h-8 w-8">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
           class="h-6 w-6">
@@ -106,11 +107,24 @@ const t2iCaptions = ref([
     </button>
   </div>
 
-  <div class="t2i-caption"><span>Prompt: </span>{{ t2iCaptions[t2iIndex] }}</div>
+  <!-- <div class="t2i-caption"><span>Prompt: </span>{{ t2iCaptions[t2iIndex] }}</div> -->
 </template>
 
 <style scoped>
-.t2i-caption {
-  @apply font-light md:px-20 text-center leading-snug mt-2;
+/* .t2i-caption {
+  @apply font-light text-center leading-snug mt-2 px-4;
+} */
+
+
+.item-content {
+  @apply flex flex-row justify-between items-center;
+
+  video {
+    @apply w-1/2;
+  }
+
+  div {
+    @apply w-1/2 pl-2 pr-20 font-thin;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/components/TheWelcome.vue b/src/components/TheWelcome.vue
deleted file mode 100644
index 49d8f73..0000000
--- a/src/components/TheWelcome.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<script setup lang="ts">
-import WelcomeItem from './WelcomeItem.vue'
-import DocumentationIcon from './icons/IconDocumentation.vue'
-import ToolingIcon from './icons/IconTooling.vue'
-import EcosystemIcon from './icons/IconEcosystem.vue'
-import CommunityIcon from './icons/IconCommunity.vue'
-import SupportIcon from './icons/IconSupport.vue'
-</script>
-
-<template>
-  <WelcomeItem>
-    <template #icon>
-      <DocumentationIcon />
-    </template>
-    <template #heading>Documentation</template>
-
-    Vue’s
-    <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
-    provides you with all information you need to get started.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <ToolingIcon />
-    </template>
-    <template #heading>Tooling</template>
-
-    This project is served and bundled with
-    <a href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
-    recommended IDE setup is
-    <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a> +
-    <a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
-    you need to test your components and web pages, check out
-    <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a> and
-    <a href="https://on.cypress.io/component" target="_blank" rel="noopener"
-      >Cypress Component Testing</a
-    >.
-
-    <br />
-
-    More instructions are available in <code>README.md</code>.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <EcosystemIcon />
-    </template>
-    <template #heading>Ecosystem</template>
-
-    Get official tools and libraries for your project:
-    <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
-    <a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
-    <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
-    <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
-    you need more resources, we suggest paying
-    <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
-    a visit.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <CommunityIcon />
-    </template>
-    <template #heading>Community</template>
-
-    Got stuck? Ask your question on
-    <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>, our official
-    Discord server, or
-    <a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
-      >StackOverflow</a
-    >. You should also subscribe to
-    <a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a> and follow
-    the official
-    <a href="https://twitter.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
-    twitter account for latest news in the Vue world.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <SupportIcon />
-    </template>
-    <template #heading>Support Vue</template>
-
-    As an independent project, Vue relies on community backing for its sustainability. You can help
-    us by
-    <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
-  </WelcomeItem>
-</template>
diff --git a/src/components/UnseenVideos.vue b/src/components/UnseenVideos.vue
index 9b20dd2..f5a4417 100644
--- a/src/components/UnseenVideos.vue
+++ b/src/components/UnseenVideos.vue
@@ -55,24 +55,20 @@ watch(unseenCarousel, (newV) => {
     </div>
 
     <!--Carousel indicators-->
-    <div class="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] mb-4 flex list-none justify-center p-0"
+    <div class="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] -mb-8 flex list-none justify-center p-0"
       data-twe-carousel-indicators>
       <button type="button" data-twe-target="#unseenCarousel" data-twe-slide-to="0" data-twe-carousel-active
-        class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
-        aria-current="true" aria-label="Slide 1"></button>
-      <button type="button" data-twe-target="#unseenCarousel" data-twe-slide-to="1"
-        class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
+        class="indicator" aria-current="true" aria-label="Slide 1"></button>
+      <button type="button" data-twe-target="#unseenCarousel" data-twe-slide-to="1" class="indicator"
         aria-label="Slide 2"></button>
-      <button type="button" data-twe-target="#unseenCarousel" data-twe-slide-to="2"
-        class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
+      <button type="button" data-twe-target="#unseenCarousel" data-twe-slide-to="2" class="indicator"
         aria-label="Slide 3"></button>
 
     </div>
 
     <!--Carousel controls - prev item-->
-    <button
-      class="absolute bottom-0 left-0 top-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
-      type="button" data-twe-target="#unseenCarousel" data-twe-slide="prev">
+    <button class="indicator-btn indicator-left-btn" type="button" data-twe-target="#unseenCarousel"
+      data-twe-slide="prev">
       <span class="inline-block h-8 w-8">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
           class="h-6 w-6">
@@ -83,9 +79,8 @@ watch(unseenCarousel, (newV) => {
         class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">Previous</span>
     </button>
     <!--Carousel controls - next item-->
-    <button
-      class="absolute bottom-0 right-0 top-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
-      type="button" data-twe-target="#unseenCarousel" data-twe-slide="next">
+    <button class="indicator-btn indicator-right-btn" type="button" data-twe-target="#unseenCarousel"
+      data-twe-slide="next">
       <span class="inline-block h-8 w-8">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
           class="h-6 w-6">
diff --git a/src/main.ts b/src/main.ts
index 89bbe4a..782e7aa 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,4 +1,5 @@
 import '@/assets/main.css'
+import '@/assets/carousel.css'
 
 import { createApp } from 'vue'
 import App from './App.vue'