Mes coses

frontend/app/components/parts/TableHeader.vue

@@ -2,16 +2,49 @@
 import HeaderLinks from './HeaderLinks.vue';
 import SiteOptions from './site_options/SiteOptions.vue';
 
+import { accent } from '~/composables/theme'
+const spritePath = computed(() => {
+    return `/sprites/${accent.value}/${accent.value}.gif`
+});
+const hasAnimated = useState('title-animated', () => false)
+
+const fullText = "ARANROIG.COM";
+const displayedText = ref("");
+
+let index = 0
+let interval = null
+
+onMounted(() => {
+if (hasAnimated.value) {
+    displayedText.value = fullText
+    return
+  }
+
+  interval = setInterval(() => {
+    if (index < fullText.length) {
+      displayedText.value += fullText[index]
+      index++
+    } else {
+      clearInterval(interval)
+      hasAnimated.value = true;
+    }
+  }, 35) // velocidad de escritura
+})
+
+onBeforeUnmount(() => {
+  clearInterval(interval)
+})
+
 </script>
 
 <template>
     <div class="header">
         <div class="header-container">
+                <h1 class="title">{{ displayedText }}</h1>
+                <HeaderLinks></HeaderLinks>
         </div>
         <div class="undertable">
-            <h1>ARANROIG.COM</h1>
-            <HeaderLinks></HeaderLinks>
-            <Sprite path="/sprites/katlum/katlum.gif" top="-267px" left="-80px" width="1300"></Sprite> 
+            <Sprite :path="spritePath" bottom="-141px" left="-75px" width="1300"></Sprite> 
         </div>
         <div class="header-container">
             <SiteOptions></SiteOptions>
@@ -33,10 +66,38 @@ import SiteOptions from './site_options/SiteOptions.vue';
 
 .undertable {
     position: relative;
-    left: 45px;
-    margin-top: 300px;
-    margin-left: -360px;
+    left: -200px;
+    margin-top: 450px;
+    margin-left: -370px;
     margin-bottom: 25px;
     user-select: none;
 }
+
+.web-links {
+    position: relative;
+    z-index: 200;
+    padding: 10px 20px;
+    margin-bottom: -10px;
+    left: -30px;
+    background-color: var(--color-background);
+}
+
+.title {
+    width: 300px;
+}
+
+.title::after {
+    content: "_";
+    animation: blink 3s infinite;
+    animation-timing-function: steps(1, end);
+}
+
+@keyframes blink {
+  0%, 50%, 100% {
+    opacity: 1;
+  }
+  25%, 75% {
+    opacity: 0;
+  }
+}
 </style>