valere/evilspins
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

animations + cards
All checks were successful
Deploy App / deploy (push) Successful in 30s
Details

Browse Source
This commit is contained in:
valere
2025-09-30 01:10:12 +02:00
parent 631bc65c70
commit 9438394db8
20 changed files with 775 additions and 455 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
app/pages/design.vue
View File

@@ -1,17 +0,0 @@
<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"
v-for="compilation in store.getAllCompilations.slice().reverse()">
<box :compilation="compilation" template="full" />
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { useDataStore } from '@/store/dataStore'
const store = useDataStore()
</script>

23
app/pages/index.vue
View File

@@ -1,9 +1,20 @@
<template>
<div>
<h1>
<img class="logo h-full p-1" src="/logo.svg" alt="">
Compilations
indépendantes
</h1>
<div class="w-full flex flex-col items-center">
<header class="py-4">
<img class="logo p-1 w-80" src="/logo.svg" alt="">
<h1 class="dark:text-white text-center">
compilations
indépendantes
</h1>
</header>
<main>
<OrganismCompilationList />
</main>
</div>
</template>
<style>
.logo {
filter: drop-shadow(2px 2px 0 rgb(0 0 0 / 0.8));
}
</style>

33
app/pages/studio.vue
View File

@@ -3,11 +3,11 @@
<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" />
<molecule-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>
<button @click="currentPosition = boxPositions.side">side</button>
<button @click="currentPosition = boxPositions.front">front</button>
<button @click="currentPosition = boxPositions.back">back</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">
@@ -37,14 +37,16 @@
</div>
</div>
</div>
<molecule-card :track="track" />
</div>
</div>
</template>
<script setup lang="ts">
import type { BoxPosition } from '~~/types/types'
import type { BoxPosition, Compilation, Track } from '~~/types/types'
import { boxPositions } from '~/store/position'
const compilation = ref({
const compilation = ref<Compilation>({
id: 'ES00A',
name: 'zero',
duration: 2794,
@@ -54,13 +56,24 @@ const compilation = ref({
color3: '#00ff00',
})
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 track = ref<Track>({
id: 1,
compilationId: 'ES00A',
title: 'The grinding wheel',
artist: {
id: 0,
name: 'L\'Efondras',
url: '',
coverId: '0024705317',
},
start: 0,
url: 'https://arakirecords.bandcamp.com/track/the-grinding-wheel',
coverId: 'a3236746052',
})
const size = ref(6)
const currentPosition: Ref<BoxPosition> = ref(poser)
const currentPosition: Ref<BoxPosition> = ref(boxPositions.side)
//from-slate-800 to-zinc-900
</script>