experiment: svelte ui

frontend/src/components/Overview.svelte

@@ -0,0 +1,57 @@
+<!-- components/Overview.svelte -->
+<script>
+import StatusPanel from './StatusPanel.svelte';
+import Terminal from './Terminal.svelte';
+
+export let status = 'Looking for QR-codes';
+export let uptime = '1h 12m 15s';
+export let qrCodesFound = 12;
+
+const terminalLines = [
+    'Window()',
+    '[Fx] INVOKE main.main.func1()',
+    '[Fx] BEFORE RUN provide: git.weirdcat.su/weirdcat/auto-attendance/internal/ui.NewBuilder()',
+    '[Fx] RUN provide: git.weirdcat.su/weirdcat/auto-attendance/internal/ui.NewBuilder() in',
+    '46.723905ms',
+    '[Fx] BEFORE RUN provide: git.weirdcat.su/weirdcat/auto-attendance/internal/ui.NewMainWindow()',
+    '[Fx] RUN provide: git.weirdcat.su/weirdcat/auto-attendance/internal/ui.NewMainWindow()',
+    'in 11.655448ms',
+    '[Fx] RUNNING',
+    ' '
+];
+</script>
+
+<div class="overview-layout">
+    <div class="grid-layout">
+        <!-- QR Code Section -->
+        <!-- <div class="qr-container"> -->
+        <!--     <div class="qr-placeholder"> -->
+        <!--         QR Code Display -->
+        <!--     </div> -->
+        <!-- </div> -->
+
+        <!-- Status Panel -->
+        <StatusPanel {status} {uptime} {qrCodesFound} />
+    </div>
+
+    <!-- Terminal Output -->
+    <Terminal {terminalLines} />
+</div>
+
+<style>
+.overview-layout {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-lg);
+    height: 100%;
+
+}
+
+.grid-layout {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xl);
+    align-items: center;
+    height: 100%;
+}
+</style>