init

frontend/src/App.vue

@@ -0,0 +1,127 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import { fetchHealth } from './api.js'
+
+const backendOk = ref(false)
+const darkMode = ref(
+  localStorage.getItem('darkMode') === null
+    ? window.matchMedia('(prefers-color-scheme: dark)').matches
+    : localStorage.getItem('darkMode') === 'true',
+)
+
+function applyTheme() {
+  document.documentElement.classList.toggle('dark', darkMode.value)
+}
+
+function toggleDark() {
+  darkMode.value = !darkMode.value
+  localStorage.setItem('darkMode', darkMode.value ? 'true' : 'false')
+  applyTheme()
+}
+
+applyTheme()
+
+onMounted(async () => {
+  try {
+    const res = await fetchHealth()
+    backendOk.value = res.ok === true
+  } catch (e) {
+    console.error('Backend nicht erreichbar:', e)
+  }
+})
+</script>
+
+<template>
+  <div class="layout">
+    <header class="topbar">
+      <h1>Creator</h1>
+      <button class="theme-toggle" @click="toggleDark">{{ darkMode ? '☀' : '☾' }}</button>
+    </header>
+    <main class="main">
+      <p>Backend: <span :class="backendOk ? 'ok' : 'err'">{{ backendOk ? 'verbunden' : 'nicht erreichbar' }}</span></p>
+    </main>
+  </div>
+</template>
+
+<style>
+:root {
+  --bg: #f8f9fb;
+  --panel: #ffffff;
+  --border: #e2e5e9;
+  --text: #1a1a1a;
+  --text-muted: #4b5563;
+  --accent: #6366f1;
+  --success: #065f46;
+  --danger: #991b1b;
+}
+
+html.dark {
+  --bg: #15171c;
+  --panel: #1c1f26;
+  --border: #2c3038;
+  --text: #e6e8ee;
+  --text-muted: #9aa3b2;
+  --accent: #6366f1;
+  --success: #34d399;
+  --danger: #f87171;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: -apple-system, 'Segoe UI', Roboto, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+}
+
+.layout {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+.topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1.25rem;
+  background: var(--panel);
+  border-bottom: 1px solid var(--border);
+
+  h1 {
+    font-size: 1.1rem;
+  }
+
+  .theme-toggle {
+    background: none;
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    color: var(--text);
+    cursor: pointer;
+    font-size: 1rem;
+    padding: 0.25rem 0.6rem;
+
+    &:hover {
+      border-color: var(--accent);
+    }
+  }
+}
+
+.main {
+  flex: 1;
+  padding: 1.25rem;
+  color: var(--text-muted);
+
+  .ok {
+    color: var(--success);
+  }
+
+  .err {
+    color: var(--danger);
+  }
+}
+</style>

frontend/src/api.js

@@ -0,0 +1,6 @@
+const BASE = '/api'
+
+export async function fetchHealth() {
+  const res = await fetch(`${BASE}/health`)
+  return res.json()
+}

frontend/src/main.js

@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')