This commit is contained in:
valere
@@ -4,7 +4,7 @@
|
||||
<div class="flex flex-col-reverse bg-gradient-to-r from-primary to-primary-dark">
|
||||
<div class="mt-8 flex flex-wrap justify-center"
|
||||
v-for="compilation in store.getAllCompilations.slice().reverse()">
|
||||
<compilationBox :compilation="compilation" template="full" />
|
||||
<box :compilation="compilation" template="full" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,100 +0,0 @@
|
||||
<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">
|
||||
<img class="logo" src="/logo.svg">
|
||||
<h1 class="text-white pt-6 text-lg md:text-xl lg:text-2xl text-center font-bold tracking-widest text-shadow">
|
||||
Compilations
|
||||
indépendantes ...
|
||||
</h1>
|
||||
</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>
|
||||
65
app/pages/studio.vue
Normal file
65
app/pages/studio.vue
Normal file
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<div class="flex flex-wrap justify-center">
|
||||
<div class="bg-page-dark-bg text-white">
|
||||
<div class="flex flex-col-reverse bg-gradient-to-r from-primary to-primary-dark">
|
||||
<div class="mt-8 flex flex-wrap justify-center">
|
||||
<box :compilation="compilation" :position="currentPosition" :size="size" />
|
||||
<div class="devtool absolute right-4 text-white bg-black rounded-2xl px-4 py-2">
|
||||
<button @click="currentPosition = poser">poser</button>
|
||||
<button @click="currentPosition = face">face</button>
|
||||
<button @click="currentPosition = dos">dos</button>
|
||||
<div class="w-full block">
|
||||
<input class="w-1/2" type="color" name="color1" id="color1" v-model="compilation.color1">
|
||||
<input class="w-1/2" type="color" name="color1" id="color1" v-model="compilation.color2">
|
||||
<div class="block w-full h-32" :style="{
|
||||
background: `linear-gradient(to top, ${compilation.color1}, ${compilation.color2})`
|
||||
}">
|
||||
</div>
|
||||
<label class="block">
|
||||
size: {{ size }}
|
||||
<input v-model.number="size" type="range" step="1" min="1" max="14">
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block">
|
||||
X: {{ currentPosition.x }}
|
||||
<input v-model.number="currentPosition.x" type="range" step="1" min="-180" max="180">
|
||||
</label>
|
||||
<label class="block">
|
||||
Y: {{ currentPosition.y }}
|
||||
<input v-model.number="currentPosition.y" type="range" step="1" min="-180" max="180">
|
||||
</label>
|
||||
<label class="block">
|
||||
Z: {{ currentPosition.z }}
|
||||
<input v-model.number="currentPosition.z" type="range" step="1" min="-180" max="180">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { BoxPosition } from '~~/types/types'
|
||||
|
||||
const compilation = ref({
|
||||
id: 'ES00A',
|
||||
name: 'zero',
|
||||
duration: 2794,
|
||||
description: 'Zero is for manifesto',
|
||||
color1: '#ffffff',
|
||||
color2: '#48959d',
|
||||
})
|
||||
|
||||
const poser = { x: 76, y: 0, z: 150 }
|
||||
const face = { x: -20, y: 20, z: 0 }
|
||||
const dos = { x: -20, y: 200, z: 0 }
|
||||
|
||||
const size = ref(6)
|
||||
|
||||
const currentPosition: Ref<BoxPosition> = ref(poser)
|
||||
|
||||
//from-slate-800 to-zinc-900
|
||||
</script>
|
||||
Reference in New Issue
Block a user