matei/zeroone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ADD: GUI to preview

Browse Source
This commit is contained in:
Robert Kossessa
2024-02-01 16:13:21 +01:00
parent 86f4bde5a4
commit 9e6f0ffa29
1 changed files with 15 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/device/DevicePreview.vue
View File

@@ -7,11 +7,24 @@
{{ $t('preview.title') }} {{ $t('preview.title') }}
</div> </div>
<div <div
class="rounded-full aspect-square absolute h-[30%] top-[30.5%] left-0 right-0 mx-auto overflow-hidden" class="rounded-full aspect-square absolute h-[30%] top-[30.5%] left-0 right-0 mx-auto flex flex-col justify-center items-center overflow-hidden"
style="background: linear-gradient(45deg, black 30%, #252525 50%, #232323 60%, black)" /> style="background: linear-gradient(45deg, black 30%, #252525 50%, #232323 60%, black)">
<div class="flex flex-col items-center text-center pb-2 mix-blend-screen">
<img :src="LogoMidi" alt="midi-logo" class="opacity-50 h-4">
<h2 class="font-pixellg text-5xl">101</h2>
<div class="font-pixelsm text-md">HIGH PASS</div>
<DeviceBar />
<span
class="w-36 font-pixelsm text-[7pt] text-muted-foreground">
KORG MINILOGUE HIGH PASS FILTER 0-127
</span>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import RenderNano from '@/assets/images/renderNano.png' import RenderNano from '@/assets/images/renderNano.png'
import LogoMidi from '@/assets/logos/logoMidi.svg'
import DeviceBar from '@/components/device/DeviceBar.vue'
</script> </script>