From 614bce2c89713d13e0ddc90bf5be309f40080d4a Mon Sep 17 00:00:00 2001 From: team3 Date: Thu, 4 Jun 2026 00:26:05 +0200 Subject: [PATCH] update --- frontend/index.html | 11 +- frontend/src/App.vue | 104 ++++++++++++++- frontend/src/components/BausteineView.vue | 100 +++++++------- frontend/src/components/HelpChat.vue | 40 +++--- frontend/src/components/TopicDetail.vue | 111 ++++++++++----- frontend/src/components/TopicSidebar.vue | 156 ++++++++++++---------- templates/Format/Cheatsheet.md | 19 ++- templates/Format/EndGuide.md | 19 ++- templates/Format/Guide.md | 23 +++- templates/Format/MiniGuide.md | 19 ++- templates/Format/OnePager.md | 19 ++- templates/Referenz/Cheatsheet.md | 11 ++ templates/Referenz/EndGuide.md | 11 ++ templates/Referenz/Guide.md | 11 ++ templates/Referenz/MiniGuide.md | 11 ++ templates/Referenz/OnePager.md | 11 ++ 16 files changed, 491 insertions(+), 185 deletions(-) diff --git a/frontend/index.html b/frontend/index.html index b19040a..e8b949b 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -4,7 +4,16 @@ - Vite App + Guides +
diff --git a/frontend/src/App.vue b/frontend/src/App.vue index e1caaae..c1dd099 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -16,8 +16,25 @@ const showHelp = ref(false) const bausteineRefreshKey = ref(0) const sidebarPinned = ref(localStorage.getItem('sidebarPinned') !== 'false') const sidebarSticky = ref(false) +const darkMode = ref( + localStorage.getItem('darkMode') === null + ? window.matchMedia('(prefers-color-scheme: dark)').matches + : localStorage.getItem('darkMode') === 'true', +) let pollTimer = null +function applyTheme() { + document.documentElement.classList.toggle('dark', darkMode.value) +} + +function toggleDark() { + darkMode.value = !darkMode.value + localStorage.setItem('darkMode', darkMode.value ? 'true' : 'false') + applyTheme() +} + +applyTheme() + function toggleSidebarPin() { sidebarPinned.value = !sidebarPinned.value localStorage.setItem('sidebarPinned', sidebarPinned.value ? 'true' : 'false') @@ -113,6 +130,7 @@ function selectTopic(topic) { previewGuide.value = null showBausteine.value = false showHelp.value = false + sidebarSticky.value = false nextTick(autoPreview) } @@ -234,6 +252,7 @@ onUnmounted(() => { diff --git a/frontend/src/components/BausteineView.vue b/frontend/src/components/BausteineView.vue index c2fa59b..ec7cb39 100644 --- a/frontend/src/components/BausteineView.vue +++ b/frontend/src/components/BausteineView.vue @@ -331,8 +331,8 @@ onUnmounted(stopPolling) } .card { - background: #fff; - border: 1px solid #e2e5e9; + background: var(--panel); + border: 1px solid var(--border); border-radius: 8px; padding: 1rem; display: flex; @@ -344,26 +344,26 @@ onUnmounted(stopPolling) } .new-card { - background: #f8f9fb; + background: var(--bg); border-style: dashed; } .new-card h3 { font-size: 0.95rem; - color: #1a1a1a; + color: var(--text); margin: 0; } .new-card-section { margin-top: 0.75rem; padding-top: 0.75rem; - border-top: 1px solid #e2e5e9; + border-top: 1px solid var(--border); } .new-card input { width: 100%; padding: 8px 10px; - border: 1px solid #d8dde3; + border: 1px solid var(--border-strong); border-radius: 6px; font-size: 0.85rem; font-family: inherit; @@ -371,13 +371,13 @@ onUnmounted(stopPolling) } .new-card input:focus { - border-color: #6366f1; + border-color: var(--accent); } .new-btn { padding: 8px 12px; border: none; - background: #6366f1; + background: var(--accent); color: white; border-radius: 6px; font-size: 0.85rem; @@ -398,14 +398,14 @@ onUnmounted(stopPolling) .card-header h3 { font-size: 0.95rem; - color: #1a1a1a; + color: var(--text); margin: 0; } .card-delete { background: none; border: none; - color: #991b1b; + color: var(--danger); font-size: 1.2rem; cursor: pointer; line-height: 1; @@ -419,12 +419,12 @@ onUnmounted(stopPolling) .desc { font-size: 0.85rem; - color: #4b5563; + color: var(--text-muted); } .purpose { font-size: 0.8rem; - color: #6b7280; + color: var(--text-muted); font-style: italic; } @@ -435,8 +435,8 @@ onUnmounted(stopPolling) } .code-block { - background: #1e2a3a; - color: #e6e6e6; + background: var(--code-bg); + color: var(--code-fg); font-family: "SF Mono", Consolas, monospace; font-size: 12px; line-height: 1.5; @@ -468,11 +468,11 @@ onUnmounted(stopPolling) .code-block :deep(.t) { color: #8be9fd; } .code-block :deep(.c) { color: #6b8aae; font-style: italic; } .code-block :deep(.n) { color: #ffb86c; } -.code-block :deep(.p) { color: #e6e6e6; } +.code-block :deep(.p) { color: var(--code-fg); } .loading-text { font-size: 0.8rem; - color: #9ca3af; + color: var(--text-faint); font-style: italic; } @@ -486,35 +486,35 @@ onUnmounted(stopPolling) .rework-row input { flex: 1; padding: 5px 8px; - border: 1px solid #d8dde3; + border: 1px solid var(--border-strong); border-radius: 4px; font-size: 0.8rem; outline: none; } .rework-row input:focus { - border-color: #6366f1; + border-color: var(--accent); } .rework-row input:disabled { - background: #f3f4f6; + background: var(--panel-soft); cursor: not-allowed; } .rework-btn { width: 28px; height: 28px; - border: 1px solid #d8dde3; + border: 1px solid var(--border-strong); border-radius: 4px; - background: #fff; - color: #4b5563; + background: var(--panel); + color: var(--text-muted); font-size: 0.9rem; cursor: pointer; } .rework-btn:hover:not(:disabled) { - border-color: #6366f1; - color: #6366f1; + border-color: var(--accent); + color: var(--accent); } .rework-btn:disabled { @@ -524,14 +524,14 @@ onUnmounted(stopPolling) .divider { border: none; - border-top: 1px solid #e2e5e9; + border-top: 1px solid var(--border); margin: 1.5rem 0; } .loading-indicator { font-size: 0.85rem; - color: #92400e; - background: #fef3c7; + color: var(--warning); + background: var(--warning-soft); padding: 0.5rem 1rem; border-radius: 6px; margin-bottom: 1rem; @@ -547,23 +547,23 @@ onUnmounted(stopPolling) .section-header h3 { font-size: 0.9rem; - color: #4b5563; + color: var(--text-muted); margin: 0; } .regenerate-btn { padding: 4px 10px; - border: 1px solid #d8dde3; + border: 1px solid var(--border-strong); border-radius: 4px; - background: #fff; + background: var(--panel); font-size: 0.8rem; cursor: pointer; - color: #4b5563; + color: var(--text-muted); } .regenerate-btn:hover { - border-color: #6366f1; - color: #6366f1; + border-color: var(--accent); + color: var(--accent); } .regenerate-btn:disabled { @@ -572,8 +572,8 @@ onUnmounted(stopPolling) } .suggestion-card { - border-color: #c7d2fe; - background: #fafafe; + border-color: var(--accent-border); + background: var(--panel-soft); } .suggestion-actions { @@ -585,35 +585,35 @@ onUnmounted(stopPolling) .btn-add { padding: 4px 10px; - border: 1px solid #34d399; + border: 1px solid var(--success-border); border-radius: 4px; - background: #d1fae5; - color: #065f46; + background: var(--success-soft); + color: var(--success); font-size: 0.8rem; cursor: pointer; } .btn-add:hover { - background: #a7f3d0; + background: var(--success-soft-hover); } .btn-ignore { padding: 4px 10px; - border: 1px solid #d8dde3; + border: 1px solid var(--border-strong); border-radius: 4px; - background: #fff; - color: #6b7280; + background: var(--panel); + color: var(--text-muted); font-size: 0.8rem; cursor: pointer; } .btn-ignore:hover { - background: #f3f4f6; + background: var(--panel-soft); } .ignored-section h3 { font-size: 0.85rem; - color: #9ca3af; + color: var(--text-faint); margin-bottom: 0.5rem; } @@ -623,22 +623,22 @@ onUnmounted(stopPolling) align-items: center; padding: 0.4rem 0; font-size: 0.85rem; - color: #9ca3af; + color: var(--text-faint); } .btn-restore { padding: 2px 8px; - border: 1px solid #d8dde3; + border: 1px solid var(--border-strong); border-radius: 4px; - background: #fff; - color: #6b7280; + background: var(--panel); + color: var(--text-muted); font-size: 0.75rem; cursor: pointer; } .btn-restore:hover { - border-color: #34d399; - color: #065f46; + border-color: var(--success-border); + color: var(--success); } @keyframes pulse { diff --git a/frontend/src/components/HelpChat.vue b/frontend/src/components/HelpChat.vue index adcb223..114ae80 100644 --- a/frontend/src/components/HelpChat.vue +++ b/frontend/src/components/HelpChat.vue @@ -76,7 +76,7 @@ function pick(title) { height: 100vh; display: flex; flex-direction: column; - background: #f8f9fb; + background: var(--bg); overflow: hidden; } @@ -85,14 +85,14 @@ function pick(title) { align-items: center; justify-content: space-between; padding: 1rem 1.5rem; - background: #fff; - border-bottom: 1px solid #e2e5e9; + background: var(--panel); + border-bottom: 1px solid var(--border); } .help-header h2 { font-size: 1.1rem; font-weight: 700; - color: #1a1a1a; + color: var(--text); } .close-btn { @@ -100,13 +100,13 @@ function pick(title) { background: none; font-size: 1.6rem; line-height: 1; - color: #4b5563; + color: var(--text-muted); cursor: pointer; padding: 0 6px; } .close-btn:hover { - color: #6366f1; + color: var(--accent); } .help-body { @@ -119,7 +119,7 @@ function pick(title) { } .hint { - color: #5a6470; + color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1rem; } @@ -135,7 +135,7 @@ function pick(title) { min-height: 70px; resize: vertical; padding: 8px 10px; - border: 1px solid #d8dde3; + border: 1px solid var(--border-strong); border-radius: 6px; font-size: 0.9rem; font-family: inherit; @@ -143,18 +143,18 @@ function pick(title) { } .input-row textarea:focus { - border-color: #6366f1; + border-color: var(--accent); } .input-row textarea:disabled { - background: #f3f4f6; + background: var(--panel-soft); } .send-btn { padding: 8px 14px; border: none; - background: #6366f1; - color: #fff; + background: var(--accent); + color: var(--on-accent); border-radius: 6px; font-size: 0.9rem; font-weight: 600; @@ -169,12 +169,12 @@ function pick(title) { .status { margin-top: 1.25rem; - color: #5a6470; + color: var(--text-muted); font-size: 0.9rem; } .status.error { - color: #991b1b; + color: var(--danger); } .suggestions { @@ -190,25 +190,25 @@ function pick(title) { flex-direction: column; gap: 4px; padding: 10px 14px; - background: #d1fae5; - border: 1px solid #34d399; + background: var(--success-soft); + border: 1px solid var(--success-border); border-radius: 8px; cursor: pointer; transition: background 0.12s, border-color 0.12s; } .suggestion:hover { - background: #a7f3d0; - border-color: #059669; + background: var(--success-soft-hover); + border-color: var(--success); } .suggestion-title { font-weight: 700; - color: #065f46; + color: var(--success); } .suggestion-reason { font-size: 0.82rem; - color: #047857; + color: var(--success); } diff --git a/frontend/src/components/TopicDetail.vue b/frontend/src/components/TopicDetail.vue index 44db5b4..d5143d8 100644 --- a/frontend/src/components/TopicDetail.vue +++ b/frontend/src/components/TopicDetail.vue @@ -1,5 +1,5 @@