init

client/src/App.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import Dashboard from './views/Dashboard.vue'
+
+const dark = ref(window.matchMedia('(prefers-color-scheme: dark)').matches)
+
+function toggleDark() { dark.value = !dark.value }
+</script>
+
+<style lang="scss">
+:root {
+  --bg:         #ffffff;
+  --surface:    #f8fafc;
+  --border:     #e2e8f0;
+  --text:       #0f172a;
+  --text-muted: #64748b;
+  --hover:      #f1f5f9;
+  --accent:     #3b82f6;
+}
+
+.dark {
+  --bg:         #0a0a0a;
+  --surface:    #111111;
+  --border:     #222222;
+  --text:       #f1f5f9;
+  --text-muted: #64748b;
+  --hover:      #1a1a1a;
+  --accent:     #3b82f6;
+}
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  height: 100vh;
+  overflow: hidden;
+}
+
+.fade-enter-active, .fade-leave-active { transition: opacity 0.2s; }
+.fade-enter-from,  .fade-leave-to      { opacity: 0; }
+</style>
+
+<style scoped lang="scss">
+.app-wrap {
+  height: 100vh;
+  overflow: hidden;
+}
+
+.theme-toggle {
+  position: fixed;
+  top: 16px;
+  right: 16px;
+  z-index: 500;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 99px;
+  padding: 6px 12px;
+  cursor: pointer;
+  font-size: 18px;
+  color: var(--text);
+  transition: background 0.15s;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+
+  &:hover { background: var(--hover); }
+}
+</style>
+
+<template>
+  <div class="app-wrap" :class="{ dark }">
+    <button class="theme-toggle" @click="toggleDark">
+      {{ dark ? '☀️' : '🌙' }}
+    </button>
+    <Dashboard :dark="dark" />
+  </div>
+</template>