89a7a9250b
Stack:
- Tailwind 4 via @tailwindcss/vite (oklch-Theme + Dark-Mode-Auto)
- marked + DOMPurify für Markdown (sanitized, SSR-Safe)
- Svelte 5 runes durchgängig ($state, $derived, $effect)
- @sveltejs/adapter-node für Production-Build
Infrastruktur:
- $lib/auth/dev-stub.svelte.ts: User-ID via sessionStorage (Phase 2
ersetzt durch echtes JWT via @mana/shared-auth)
- $lib/api/{client,decks,cards,reviews}.ts: typed Fetch-Wrapper, ruft
cards-api auf 3081 mit X-User-Id-Header
- $lib/stores/toasts.svelte.ts: Toast-Store mit info/success/warning/error
- $lib/markdown.ts: marked → DOMPurify-Pipeline
- $lib/components/{Header,ToastStack}.svelte: Layout-Shell
Routes:
- / → Dev-Login-Form oder Redirect zu /decks (wenn eingeloggt)
- /decks → Liste mit Color-Dot, Hover-Delete-Button
- /decks/new → Create-Form (Name, Beschreibung, Color-Picker)
- /decks/[id] → Detail mit Cards-Liste + dueCount + "Lernen"-Button
- /cards/new?deck=... → Type-Picker (basic|basic-reverse) +
Side-by-Side Markdown-Editor mit Live-Preview
- /study → Übersicht aller Decks mit Due-Counts
- /study/[deckId] → Session-View mit Queue-Snapshot, Reveal/Grade,
Hotkeys (Space/Enter=Reveal & Good, 1-4=Again/Hard/Good/Easy),
INPUT-Skip im Keyboard-Handler
CORS auf cards-api für localhost-Origins + cardecky.mana.how.
Verifiziert:
- pnpm run type-check ✅ 4/4 packages, svelte-check 0 errors
- pnpm build (cards-web) ✅ adapter-node bundle 140 kB server,
alle Routen bundled
- Tailwind-CSS inlined in SSR-HTML, oklch-Theme korrekt
- CORS-Preflight funktioniert (OPTIONS 204 mit korrekten Allow-*-Headers)
- Live-Smoke-Test gegen localhost:3081 (cards-api) + localhost:3082
(cards-web): Beide laufen parallel, Web → API CORS-fetch grün
Outside scope (Phase 4):
- Card-Edit-Page (/cards/[id]/edit) — heute nur Create + Delete
- Settings/Account/Credits/DSGVO-Pages — Phase 9 (Polish)
- Anki-Import — Phase 8
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
41 lines
1.1 KiB
CSS
41 lines
1.1 KiB
CSS
@import 'tailwindcss';
|
|
|
|
@theme {
|
|
--color-bg: oklch(0.99 0.005 240);
|
|
--color-fg: oklch(0.20 0.02 240);
|
|
--color-muted: oklch(0.55 0.02 240);
|
|
--color-border: oklch(0.92 0.01 240);
|
|
--color-card: oklch(1 0 0);
|
|
--color-primary: oklch(0.55 0.15 250);
|
|
--color-primary-fg: oklch(1 0 0);
|
|
--color-success: oklch(0.6 0.15 145);
|
|
--color-warning: oklch(0.75 0.15 75);
|
|
--color-danger: oklch(0.55 0.18 25);
|
|
|
|
--font-sans:
|
|
ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
}
|
|
|
|
@layer base {
|
|
html {
|
|
background-color: var(--color-bg);
|
|
color: var(--color-fg);
|
|
font-family: var(--font-sans);
|
|
}
|
|
body {
|
|
min-height: 100dvh;
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
@theme {
|
|
--color-bg: oklch(0.18 0.02 240);
|
|
--color-fg: oklch(0.95 0.01 240);
|
|
--color-muted: oklch(0.65 0.02 240);
|
|
--color-border: oklch(0.30 0.02 240);
|
|
--color-card: oklch(0.22 0.02 240);
|
|
--color-primary: oklch(0.70 0.18 250);
|
|
--color-primary-fg: oklch(0.18 0.02 240);
|
|
}
|
|
}
|