127 lines
2.9 KiB
Vue
127 lines
2.9 KiB
Vue
<template>
|
|
<div>
|
|
<div class="w-full flex justify-center">
|
|
<nav class="[&>*]:p-2 text-white bottom-0 right-0 fixed flex justify-center z-50">
|
|
<a href="https://www.youtube.com/channel/UCATtFHnOLDCv8qroi2KW3ZA" target="about:blank" class="mt-1">
|
|
<img src="/youtube.svg" alt="youtube channel" />
|
|
</a>
|
|
<a href="mailto:contact@evilspins.com">📬</a>
|
|
<a href="/about">❓</a>
|
|
</nav>
|
|
</div>
|
|
<section class="splash-screen flex items-center flex-col" @keydown.esc="closePlayer()">
|
|
<figure class="ui">
|
|
<img class="logo" src="/logo.svg">
|
|
<h1 class="text-white pt-6 text-sm md:text-md lg:text-lg text-center font-bold tracking-widest">Compilations
|
|
Indépendantes
|
|
</h1>
|
|
<button class="button button--screened relative top-16 flex justify-center items-center" @click="scrollDown()">
|
|
↓
|
|
</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>
|
|
</section>
|
|
<section class="flex justify-center">
|
|
<div class="flex max-w-2xl">
|
|
<compilationsList />
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</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'
|
|
})
|
|
|
|
const dataStore = useDataStore()
|
|
|
|
const scrollDown = function () {
|
|
window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' })
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" 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;
|
|
background-color: black;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
</style> |