75 lines
2.6 KiB
Vue
75 lines
2.6 KiB
Vue
<template>
|
|
<div class="flex flex-wrap justify-center items-center h-screen">
|
|
<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">
|
|
<!-- <molecule-box :compilation="compilation" /> -->
|
|
<div class="devtool absolute right-4 text-white bg-black rounded-2xl px-4 py-2">
|
|
<!-- <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">
|
|
<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>
|
|
<molecule-card :track="track" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { BoxPosition, Compilation, Track } from '~~/types/types'
|
|
|
|
const compilation = ref<Compilation>({
|
|
id: 'ES00A',
|
|
name: 'zero',
|
|
duration: 2794,
|
|
description: 'Zero is for manifesto',
|
|
color1: '#ffffff',
|
|
color2: '#48959d',
|
|
color3: '#00ff00',
|
|
})
|
|
|
|
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',
|
|
})
|
|
|
|
//from-slate-800 to-zinc-900
|
|
</script>
|