atropos v3
This commit is contained in:
valere
@@ -5,8 +5,7 @@
|
|||||||
<img src="/zero/propeller-a.png" data-atropos-offset="-3" class="absolute inset-0 object-cover" />
|
<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="/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" />
|
<img src="/logo.svg" data-atropos-offset="0" width="70%" class="logo absolute inset-0" />
|
||||||
<a href="#" data-atropos-offset="0"
|
<slot class="absolute" ></slot>
|
||||||
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>
|
|
||||||
</atropos-component>
|
</atropos-component>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
345
pages/index.vue
345
pages/index.vue
@@ -1,181 +1,200 @@
|
|||||||
<template>
|
<template>
|
||||||
<section class="splash-screen flex items-center flex-col" @keydown.esc="closePlayer" @keydown.enter="play()">
|
<section class="splash-screen flex items-center flex-col" @keydown.esc="closePlayer" @keydown.enter="play()">
|
||||||
<figure class="ui">
|
<figure class="ui">
|
||||||
<!-- <ul>
|
<!-- <ul>
|
||||||
<li>
|
<li>
|
||||||
<a href="mailto:contact@evilspins.com">contact</a>
|
<a href="mailto:contact@evilspins.com">contact</a>
|
||||||
<a href="/newsletter">newsletter</a>
|
<a href="/newsletter">newsletter</a>
|
||||||
<a href="/infos">?</a>
|
<a href="/infos">?</a>
|
||||||
</li>
|
</li>
|
||||||
</ul> -->
|
</ul> -->
|
||||||
<img class="logo" src="/logo.svg">
|
<img class="logo" src="/logo.svg">
|
||||||
<button class="button flex justify-center items-center" @click="play()">
|
<button class="button flex justify-center items-center" @click="play()">
|
||||||
<svg width="40px" height="30px">
|
<svg width="40px" height="30px">
|
||||||
<polygon points="0,0 0,30 30,15" />
|
<polygon points="0,0 0,30 30,15" />
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
</figure>
|
</figure>
|
||||||
<div class="shadow screen" />
|
<div class="shadow screen" />
|
||||||
<video class="animation screen" loop autoplay muted ref="animation">
|
<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-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)">
|
<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>
|
</video>
|
||||||
<div class="mix screen hide">
|
<button class="button button--close flex justify-center items-center" @click="closePlayer()">
|
||||||
<video class="mixPlayer screen" controls ref="mixPlayer">
|
<svg width="40px" height="30px">
|
||||||
<source src="https://files.erudi.fr/evilspins/zero-a-hd.mp4" type="video/mp4">
|
<line x1="0" y1="0" x2="20" y2="20" stroke="black" stroke-width="2" />
|
||||||
<source src="https://files.erudi.fr/evilspins/zero-a-sd.mp4" type="video/webm" media="all and (max-width: 640px)">
|
<line x1="0" y1="20" x2="20" y2="0" stroke="black" stroke-width="2" />
|
||||||
</video>
|
</svg>
|
||||||
<button class="button button--close flex justify-center items-center" @click="closePlayer()">
|
</button>
|
||||||
<svg width="40px" height="30px">
|
</div>
|
||||||
<line x1="0" y1="0" x2="20" y2="20" stroke="black" stroke-width="2" />
|
</section>
|
||||||
<line x1="0" y1="20" x2="20" y2="0" stroke="black" stroke-width="2" />
|
<section class="flex">
|
||||||
</svg>
|
<zero-a>
|
||||||
</button>
|
<button class="button flex justify-center items-center" @click="play()">
|
||||||
</div>
|
<svg width="40px" height="30px">
|
||||||
</section>
|
<polygon points="0,0 0,30 30,15" />
|
||||||
</template>
|
</svg>
|
||||||
<script setup lang="ts">
|
</button>
|
||||||
// SEO
|
</zero-a>
|
||||||
useSeoMeta({
|
<zero-b></zero-b>
|
||||||
title: 'evilSpins, compilations indépendantes',
|
</section>
|
||||||
ogTitle: 'evilSpins, compilations indépendantes',
|
</template>
|
||||||
description: 'evilSpins, compilations indépendantes, la bande originale d\'un film qui n\'existe pas',
|
<script setup lang="ts">
|
||||||
ogDescription: 'evilSpins, compilations indépendantes, la bande originale d\'un film qui n\'existe pas',
|
// SEO
|
||||||
ogImage: 'https://evilspins.com/logo.svg'
|
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
|
// animate player
|
||||||
const mixPlayer = ref()
|
const mixPlayer = ref()
|
||||||
|
|
||||||
const play = () => {
|
const play = () => {
|
||||||
fadeOut(document.querySelector('.button'))
|
fadeOut(document.querySelector('.button'))
|
||||||
fadeOut(document.querySelector('.logo'))
|
fadeOut(document.querySelector('.logo'))
|
||||||
fadeOut(document.querySelector('.animation'))
|
fadeOut(document.querySelector('.animation'))
|
||||||
fadeIn(document.querySelector('.mix'))
|
fadeIn(document.querySelector('.mix'))
|
||||||
fadeOut(document.querySelector('.shadow'))
|
fadeOut(document.querySelector('.shadow'))
|
||||||
mixPlayer.value.play()
|
mixPlayer.value.play()
|
||||||
mixPlayer.value.focus()
|
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 = () => {
|
&:active {
|
||||||
fadeIn(document.querySelector('.animation'))
|
top: 64px;
|
||||||
fadeIn(document.querySelector('.button'))
|
box-shadow: 0 0 0 0 black;
|
||||||
fadeIn(document.querySelector('.logo'))
|
|
||||||
fadeOut(document.querySelector('.mix'))
|
|
||||||
fadeIn(document.querySelector('.shadow'))
|
|
||||||
mixPlayer.value.pause()
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const fadeOut = (elt: HTMLElement) => {
|
&--close {
|
||||||
elt.classList.add('hide')
|
right: 24px;
|
||||||
}
|
padding-top: 10px;
|
||||||
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;
|
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 {
|
.hide {
|
||||||
z-index: 4;
|
opacity: 0;
|
||||||
}
|
z-index: 0;
|
||||||
|
}
|
||||||
.shadow {
|
|
||||||
z-index: 3;
|
.show {
|
||||||
box-shadow: rgb(0, 0, 0) 0px 0px 170px 70px inset;
|
opacity: 1;
|
||||||
opacity: .9;
|
}
|
||||||
}
|
</style>
|
||||||
|
|
||||||
.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>
|
|
||||||
|
|
||||||
Reference in New Issue
Block a user