66 lines
2.4 KiB
Vue
66 lines
2.4 KiB
Vue
<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>
|