From 9e6f0ffa29ac0c72e2c4837d8a2b049ddd5cdf25 Mon Sep 17 00:00:00 2001
From: Robert Kossessa <github@kosro.de>
Date: Thu, 1 Feb 2024 16:13:21 +0100
Subject: [PATCH] ADD: GUI to preview

---
 src/components/device/DevicePreview.vue | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/device/DevicePreview.vue b/src/components/device/DevicePreview.vue
index f59be99..4dfe4fb 100644
--- a/src/components/device/DevicePreview.vue
+++ b/src/components/device/DevicePreview.vue
@@ -7,11 +7,24 @@
         {{ $t('preview.title') }}
       </div>
       <div
-        class="rounded-full aspect-square absolute h-[30%] top-[30.5%]  left-0 right-0 mx-auto overflow-hidden"
-        style="background: linear-gradient(45deg, black 30%, #252525 50%, #232323 60%, black)" />
+        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)">
+        <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>
 </template>
 <script setup>
 import RenderNano from '@/assets/images/renderNano.png'
+import LogoMidi from '@/assets/logos/logoMidi.svg'
+import DeviceBar from '@/components/device/DeviceBar.vue'
 </script>
\ No newline at end of file