studio v1.1

app/error.vue

@@ -1,3 +1,12 @@
+<template>
+  <div>
+    <h1 class="text-white pt-6 text-lg md:text-xl lg:text-2xl text-center font-bold tracking-widest text-shadow">
+      {{ error?.statusCode }}
+    </h1>
+    <NuxtLink to="/">Go back home</NuxtLink>
+  </div>
+</template>
+
 <script setup lang="ts">
 import type { NuxtError } from '#app'
 
@@ -5,103 +14,3 @@ const props = defineProps({
   error: Object as () => NuxtError
 })
 </script>
-
-<template>
-  <div>
-    <div class="background fixed w-full h-full">
-      <video class="animation screen" loop autoplay muted ref="animation">
-        <source src="https://files.erudi.fr/evilspins/sloughi-run-loop-big.webm" type="video/webm">
-        <source src="https://files.erudi.fr/evilspins/sloughi-run-loop-small.webm" type="video/webm"
-          media="all and (max-width: 640px)">
-      </video>
-    </div>
-    <section class="splash-screen flex items-center flex-col">
-      <figure class="ui">
-        <h1 class="text-white pt-6 text-lg md:text-xl lg:text-2xl text-center font-bold tracking-widest text-shadow">
-          {{ error.statusCode }}
-        </h1>
-        <NuxtLink to="/">Go back home</NuxtLink>
-      </figure>
-    </section>
-  </div>
-</template>
-
-<style scoped>
-body {
-  margin: 0;
-  overflow-x: hidden;
-}
-
-.logo,
-.button,
-.shadow,
-.animation,
-.mix {
-  transition: .7s opacity;
-}
-
-.screen {
-  position: absolute;
-  height: 100vh;
-  min-width: 100%;
-  max-width: 100%;
-}
-
-.splash-screen {
-  position: relative;
-  height: 100vh;
-  box-shadow: inset black 0px 1px 800px 200px;
-}
-
-.animation {
-  z-index: 1;
-  object-fit: cover;
-  opacity: .8;
-  /* opacity: 0; */
-}
-
-.mix {
-  z-index: 4;
-  position: fixed;
-}
-
-.shadow {
-  z-index: 3;
-  box-shadow: rgb(0, 0, 0) 0px 0px 170px 70px inset;
-  opacity: .9;
-}
-
-.ui {
-  z-index: 4;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  max-width: 80%;
-  transform: translate(-50%, -50%);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.logo {
-  filter: drop-shadow(8px 8px 0 rgb(0 0 0 / 0.8));
-}
-
-.mixPlayer {
-  background: black;
-  max-height: 70vh;
-}
-
-.hide {
-  opacity: 0;
-  z-index: 0;
-}
-
-.show {
-  opacity: 1;
-}
-
-.text-shadow {
-  text-shadow: 3px 2px 8px black;
-}
-</style>

app/pages/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>
+    <h1>
+      <img class="logo h-full p-1" src="/logo.svg" alt="">
+      Compilations
+      indépendantes
+    </h1>
+  </div>
+</template>

app/pages/studio.vue

@@ -51,6 +51,7 @@ const compilation = ref({
   description: 'Zero is for manifesto',
   color1: '#ffffff',
   color2: '#48959d',
+  color3: '#00ff00',
 })
 
 const poser = { x: 76, y: 0, z: 150 }