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/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>
|
||||
|
||||
345
pages/index.vue
345
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>
|
||||
|
||||
.hide {
|
||||
opacity: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.show {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user