From 431fc4912be10bd92fc791ec40f89b6a205d39e9 Mon Sep 17 00:00:00 2001
From: valere <dev@valerebron.com>
Date: Wed, 4 Sep 2024 00:15:32 +0200
Subject: [PATCH] atropos v3

---
 components/zero-a.vue |   3 +-
 pages/index.vue       | 345 ++++++++++++++++++++++--------------------
 2 files changed, 183 insertions(+), 165 deletions(-)

diff --git a/components/zero-a.vue b/components/zero-a.vue
index 47bc779..8706f49 100644
--- a/components/zero-a.vue
+++ b/components/zero-a.vue
@@ -5,8 +5,7 @@
       <img src="/zero/propeller-a.png" data-atropos-offset="-3" class="absolute inset-0 object-cover" />
       <img src="/zero/zero-a.png" data-atropos-offset="0" class="absolute inset-0 object-cover" />
       <img src="/logo.svg" data-atropos-offset="0" width="70%" class="logo absolute inset-0" />
-      <a href="#" data-atropos-offset="0"
-        class="absolute w-10 h-5 p-4 bg-red-700 text-center inset-0 rounded-full hover:bg-opacity-70 duration-200">play</a>
+      <slot class="absolute" ></slot>
     </atropos-component>
   </div>
 </template>
diff --git a/pages/index.vue b/pages/index.vue
index 9d28496..12ad70d 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,181 +1,200 @@
 <template>
-    <section class="splash-screen flex items-center flex-col" @keydown.esc="closePlayer" @keydown.enter="play()">
-      <figure class="ui">
-        <!-- <ul>
+  <section class="splash-screen flex items-center flex-col" @keydown.esc="closePlayer" @keydown.enter="play()">
+    <figure class="ui">
+      <!-- <ul>
           <li>
             <a href="mailto:contact@evilspins.com">contact</a>
             <a href="/newsletter">newsletter</a>
             <a href="/infos">?</a>
           </li>
         </ul> -->
-        <img class="logo" src="/logo.svg">
-        <button class="button flex justify-center items-center" @click="play()">
-          <svg width="40px" height="30px">
-            <polygon points="0,0 0,30 30,15" />
-          </svg>
-        </button>
-      </figure>
-      <div class="shadow screen" />
-      <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)">
+      <img class="logo" src="/logo.svg">
+      <button class="button flex justify-center items-center" @click="play()">
+        <svg width="40px" height="30px">
+          <polygon points="0,0 0,30 30,15" />
+        </svg>
+      </button>
+    </figure>
+    <div class="shadow screen" />
+    <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 class="mix screen hide">
+      <video class="mixPlayer screen" controls ref="mixPlayer">
+        <source src="https://files.erudi.fr/evilspins/zero-a-hd.mp4" type="video/mp4">
+        <source src="https://files.erudi.fr/evilspins/zero-a-sd.mp4" type="video/webm"
+          media="all and (max-width: 640px)">
       </video>
-      <div class="mix screen hide">
-        <video class="mixPlayer screen" controls ref="mixPlayer">
-          <source src="https://files.erudi.fr/evilspins/zero-a-hd.mp4" type="video/mp4">
-          <source src="https://files.erudi.fr/evilspins/zero-a-sd.mp4" type="video/webm" media="all and (max-width: 640px)">
-        </video>
-        <button class="button button--close flex justify-center items-center" @click="closePlayer()">
-          <svg width="40px" height="30px">
-            <line x1="0" y1="0" x2="20" y2="20" stroke="black" stroke-width="2" />
-            <line x1="0" y1="20" x2="20" y2="0" stroke="black" stroke-width="2" />
-          </svg>
-        </button>
-      </div>
-    </section>
-  </template>
-  <script setup lang="ts">
-  // SEO
-  useSeoMeta({
-    title: 'evilSpins, compilations indépendantes',
-    ogTitle: 'evilSpins, compilations indépendantes',
-    description: 'evilSpins, compilations indépendantes, la bande originale d\'un film qui n\'existe pas',
-    ogDescription: 'evilSpins, compilations indépendantes, la bande originale d\'un film qui n\'existe pas',
-    ogImage: 'https://evilspins.com/logo.svg'
-  })
+      <button class="button button--close flex justify-center items-center" @click="closePlayer()">
+        <svg width="40px" height="30px">
+          <line x1="0" y1="0" x2="20" y2="20" stroke="black" stroke-width="2" />
+          <line x1="0" y1="20" x2="20" y2="0" stroke="black" stroke-width="2" />
+        </svg>
+      </button>
+    </div>
+  </section>
+  <section class="flex">
+    <zero-a>
+      <button class="button flex justify-center items-center" @click="play()">
+        <svg width="40px" height="30px">
+          <polygon points="0,0 0,30 30,15" />
+        </svg>
+      </button>
+    </zero-a>
+    <zero-b></zero-b>
+  </section>
+</template>
+<script setup lang="ts">
+// SEO
+useSeoMeta({
+  title: 'evilSpins, compilations indépendantes',
+  ogTitle: 'evilSpins, compilations indépendantes',
+  description: 'evilSpins, compilations indépendantes, la bande originale d\'un film qui n\'existe pas',
+  ogDescription: 'evilSpins, compilations indépendantes, la bande originale d\'un film qui n\'existe pas',
+  ogImage: 'https://evilspins.com/logo.svg'
+})
 
 
-  // animate player
-  const mixPlayer = ref()
+// animate player
+const mixPlayer = ref()
 
-  const play = () => {
-    fadeOut(document.querySelector('.button'))
-    fadeOut(document.querySelector('.logo'))
-    fadeOut(document.querySelector('.animation'))
-    fadeIn(document.querySelector('.mix'))
-    fadeOut(document.querySelector('.shadow'))
-    mixPlayer.value.play()
-    mixPlayer.value.focus()
+const play = () => {
+  fadeOut(document.querySelector('.button'))
+  fadeOut(document.querySelector('.logo'))
+  fadeOut(document.querySelector('.animation'))
+  fadeIn(document.querySelector('.mix'))
+  fadeOut(document.querySelector('.shadow'))
+  mixPlayer.value.play()
+  mixPlayer.value.focus()
+}
+
+const closePlayer = () => {
+  fadeIn(document.querySelector('.animation'))
+  fadeIn(document.querySelector('.button'))
+  fadeIn(document.querySelector('.logo'))
+  fadeOut(document.querySelector('.mix'))
+  fadeIn(document.querySelector('.shadow'))
+  mixPlayer.value.pause()
+}
+
+const fadeOut = (elt: HTMLElement) => {
+  elt.classList.add('hide')
+}
+const fadeIn = (elt: HTMLElement) => {
+  elt.classList.remove('hide')
+}
+
+// load data
+const { data: artists } = await useFetch('/api/artists')
+const { data: styles, status: statusStyles } = await useFetch('/api/styles', { lazy: true })
+const { data: compilations } = await useFetch('/api/compilations')
+console.log(compilations.value)
+console.log(styles.value)
+console.log(statusStyles.value)
+</script>
+
+<style lang="scss">
+body {
+  margin: 0;
+}
+
+.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;
+  background-color: black;
+}
+
+.animation {
+  z-index: 1;
+  object-fit: cover;
+  opacity: .8;
+  /* opacity: 0; */
+}
+
+.mix {
+  z-index: 4;
+}
+
+.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));
+}
+
+.button {
+  position: relative;
+  top: 70px;
+  padding-left: 16px;
+  text-decoration: none;
+  box-shadow: 0 8px 0 0 black;
+  transition: all .3s;
+  border: 8px black solid;
+  line-height: 100%;
+  height: 70px;
+  width: 70px;
+  border-width: 2px;
+  border-radius: 100px;
+  cursor: pointer;
+  color: #fdec50ff;
+  font-size: 26px;
+  background-color: #ffffff59;
+
+  &:hover {
+    background-color: #fdec50ff;
+    color: black;
   }
 
-  const closePlayer = () => {
-    fadeIn(document.querySelector('.animation'))
-    fadeIn(document.querySelector('.button'))
-    fadeIn(document.querySelector('.logo'))
-    fadeOut(document.querySelector('.mix'))
-    fadeIn(document.querySelector('.shadow'))
-    mixPlayer.value.pause()
+  &:active {
+    top: 64px;
+    box-shadow: 0 0 0 0 black;
   }
 
-  const fadeOut = (elt: HTMLElement) => {
-    elt.classList.add('hide')
-  }
-  const fadeIn = (elt: HTMLElement) => {
-    elt.classList.remove('hide')
-  }
-
-  // load data
-  const { data: artists} = await useFetch('/api/artists')
-  const { data: styles, status: statusStyles} = await useFetch('/api/styles', { lazy: true })
-  const { data: compilations} = await useFetch('/api/compilations')
-  console.log(compilations.value)
-  console.log(styles.value)
-  console.log(statusStyles.value)
-  </script>
-  
-  <style lang="scss">
-  body {
-    margin: 0;
-  }
-
-  .logo, .button, .shadow, .animation, .mix {
-    transition: .7s opacity;
-  }
-  
-  .screen {
+  &--close {
+    right: 24px;
+    padding-top: 10px;
     position: absolute;
-    height: 100vh;
-    min-width: 100%;
-    max-width: 100%;
-  }
-  
-  .splash-screen {
-    position: relative;
-    height: 100vh;
-    background-color: black;
-  }
-  
-  .animation {
-    z-index: 1;
-    object-fit: cover;
-    opacity: .8;
-    /* opacity: 0; */
   }
+}
 
-  .mix {
-    z-index: 4;
-  }
-  
-  .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));
-  }
-  
-  .button {
-    position: relative;
-    top: 70px;
-    padding-left: 16px;
-    text-decoration: none;
-    box-shadow: 0 8px 0 0 black;
-    transition: all .3s;
-    border: 8px black solid;
-    line-height: 100%;
-    height: 70px;
-    width: 70px;
-    border-width: 2px;
-    border-radius: 100px;
-    cursor: pointer;
-    color: #fdec50ff;
-    font-size: 26px;
-    background-color: #ffffff59;
-    &:hover {
-      background-color: #fdec50ff;
-      color: black;
-    }
-    &:active {
-      top: 64px;
-      box-shadow: 0 0 0 0 black;
-    }
-    &--close {
-      right: 24px;
-      padding-top: 10px;
-      position: absolute;
-    }
-  }
-  
-  .hide {
-    opacity: 0;
-    z-index: 0;
-  }
-  .show {
-    opacity: 1;
-  }
-  </style>
-  
\ No newline at end of file
+.hide {
+  opacity: 0;
+  z-index: 0;
+}
+
+.show {
+  opacity: 1;
+}
+</style>
\ No newline at end of file