From 4edb0f0000714d7d39643880a5c4ea1001a8d982 Mon Sep 17 00:00:00 2001 From: overcuriousity Date: Sun, 27 Jul 2025 12:56:37 +0200 Subject: [PATCH 1/7] first fork commit of interface overhaul --- src/pages/index.astro | 185 ++++++++++++++++++++++++---------- src/styles/global.css | 227 +++++++++++++++++++++++++++++++++++++++++- 2 files changed, 356 insertions(+), 56 deletions(-) diff --git a/src/pages/index.astro b/src/pages/index.astro index f8592a4..3279f6c 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -11,67 +11,105 @@ const tools = data.tools; --- -
-
-

ForensicPathways

- -

- Das richtige Werkzeug zur richtigen Zeit – in der digitalen Forensik entscheidet oft die Wahl der passenden Methode oder Software über Erfolg oder Misserfolg einer Untersuchung. +

+
+

ForensicPathways

+

Das richtige Werkzeug zur richtigen Zeit

+

+ Systematische digitale Forensik nach bewährter NIST SP 800-86 Methodik.
+ Wählen Sie Ihren Ansatz für die Werkzeugauswahl:

- -

- Unser kuratiertes Verzeichnis bietet euch eine strukturierte Übersicht über bewährte Methoden und Tools, - kategorisiert nach forensischen Domänen und Untersuchungsphasen nach Kent, Chevalier, Grance & Dang. -

- -

- Info: - Die lila gekennzeichneten Einträge sind über das Single-Sign-On der CC24-Cloud direkt zugänglich. - Teilnehmer der Seminargruppe CC24-w1 können die gehostete Infrastruktur nutzen. - Sollten spezielle Berechtigungen für den Zugriff erforderlich sein oder etwas nicht funktionieren, kontaktiert mich. -

- -
- - - - - - - Infos zu SSO & Zugang - + +
+
+
+
🔍
+

Vollständige Ermittlung

+
+

+ Systematisches Vorgehen durch alle vier NIST-Phasen einer forensischen Untersuchung +

+
    +
  • Methodische Schritt-für-Schritt Anleitung
    • +
  • Vollständige Dokumentationskette
    • +
  • Rechtssichere Beweisführung
    • +
  • Ideal für komplexe Fälle
    • +
+
+ +
+
+
🎯
+

Gezieltes Problem lösen

+
+

+ Direkter Zugang zu spezifischen Tools und Methoden für bekannte Anforderungen +

+
    +
  • Schnelle Tool-Suche
    • +
  • Spezifische Problemlösungen
    • +
  • Erfahrene Anwender
    • +
  • Effizient für Einzelaufgaben
    • +
+
+
+ +
+

+ ℹ️ + Die lila gekennzeichneten Einträge sind über das Single-Sign-On der CC24-Cloud direkt zugänglich. + Teilnehmer der Seminargruppe CC24-w1 können die gehostete Infrastruktur nutzen. + Kontakt bei Problemen +

- - - - - - - - - - Beitragen - - - - - - - - - Entdecken - +
+ + + + + + + Infos zu SSO & Zugang + + + + + + + + + + + + Beitragen + + + + + + + + + Direkt durchsuchen + +
+
+

Alle verfügbaren Werkzeuge durchsuchen

+

+ Nutzen Sie die erweiterten Filter und Kategorien für eine detaillierte Suche +

+
@@ -94,7 +132,44 @@ const tools = data.tools; \ No newline at end of file diff --git a/src/data/tools.yaml b/src/data/tools.yaml index 983a535..2a53a74 100644 --- a/src/data/tools.yaml +++ b/src/data/tools.yaml @@ -2153,3 +2153,34 @@ domain-agnostic-software: - id: specific-os name: Betriebssysteme description: Operating Systems which focus on forensics +scenarios: + - id: registry + icon: 🗃️ + friendly_name: "Registry-Analyse" + - id: memory-forensics + icon: 🧠 + friendly_name: "Memory-Forensik" + - id: network-traffic + icon: 🌐 + friendly_name: "Netzwerk-Traffic" + - id: mobile-forensik + icon: 📱 + friendly_name: "Mobile Geräte" + - id: malware-analysis + icon: 🦠 + friendly_name: "Malware-Analyse" + - id: timeline-analysis + icon: ⏰ + friendly_name: "Timeline-Erstellung" + - id: file-recovery + icon: 💾 + friendly_name: "Datei-Wiederherstellung" + - id: browser-forensik + icon: 🌍 + friendly_name: "Browser-Forensik" + - id: email-forensik + icon: 📧 + friendly_name: "E-Mail-Forensik" + - id: log-analysis + icon: 📊 + friendly_name: "Log-Analyse" \ No newline at end of file diff --git a/src/pages/index.astro b/src/pages/index.astro index dd2f4c3..4c35bf2 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -4,6 +4,7 @@ import ToolCard from '../components/ToolCard.astro'; import ToolFilters from '../components/ToolFilters.astro'; import ToolMatrix from '../components/ToolMatrix.astro'; import AIQueryInterface from '../components/AIQueryInterface.astro'; +import TargetedScenarios from '../components/TargetedScenarios.astro'; import { getToolsData } from '../utils/dataService.js'; const data = await getToolsData(); @@ -139,7 +140,9 @@ const phases = data.phases;

- + + +

Alle verfügbaren Werkzeuge durchsuchen

@@ -192,15 +195,11 @@ const phases = data.phases; methodologySection.scrollIntoView({ behavior: 'smooth', block: 'start' }); } } else if (approach === 'targeted') { - // Show targeted scenarios section (implemented in Phase 3) + // Show targeted scenarios section const targetedSection = document.getElementById('targeted-section'); if (targetedSection) { targetedSection.classList.add('active'); targetedSection.scrollIntoView({ behavior: 'smooth', block: 'start' }); - } else { - // For now, show a placeholder message - alert('Gezielte Szenarien werden in Phase 3 implementiert. Verwenden Sie vorerst die Standard-Werkzeugauswahl unten.'); - document.getElementById('filters-section').scrollIntoView({ behavior: 'smooth' }); } } }; diff --git a/src/styles/global.css b/src/styles/global.css index 0dfc191..4f1952f 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -1928,6 +1928,26 @@ footer { grid-template-columns: 1fr 1fr; gap: 0.75rem; } + .search-suggestions { + gap: 0.5rem; + } + + .suggestion-chip { + padding: 0.5rem 0.75rem; + font-size: 0.8125rem; + } + + .scenario-emoji { + font-size: 1rem; + } + + .targeted-search-input { + padding: 0.875rem 0.875rem 0.875rem 2.75rem; + } + + .search-icon { + left: 0.875rem; + } } @media (width <= 640px) { @@ -2007,6 +2027,20 @@ footer { padding: 0.5rem 1rem; flex: 1; } + .search-suggestions { + justify-content: center; + } + + .suggestion-chip { + flex: 1; + min-width: 0; + max-width: calc(50% - 0.25rem); + justify-content: center; + } + + .targeted-section { + padding: 1.5rem; + } } @media (width <= 480px) { @@ -2324,6 +2358,80 @@ footer { margin-right: 0.5rem; } +.suggestion-chip { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.75rem 1rem; + background-color: var(--color-bg-secondary); + border: 1px solid var(--color-border); + border-radius: 2rem; + cursor: pointer; + transition: var(--transition-fast); + font-size: 0.875rem; + user-select: none; +} + +.suggestion-chip:hover { + background-color: var(--color-accent); + border-color: var(--color-accent); + color: white; + transform: translateY(-2px); + box-shadow: var(--shadow-md); +} + +.suggestion-chip.active { + background-color: var(--color-accent); + border-color: var(--color-accent); + color: white; +} + +.scenario-emoji { + font-size: 1.125rem; +} + +.scenario-text { + font-weight: 500; +} + +.more-scenarios { + text-align: center; + margin-top: 1rem; +} + +.btn-more-scenarios { + background: none; + border: 1px solid var(--color-border); + border-radius: 1rem; + padding: 0.5rem 1rem; + color: var(--color-text-secondary); + cursor: pointer; + font-size: 0.8125rem; + transition: var(--transition-fast); +} + +.btn-more-scenarios:hover { + background-color: var(--color-bg-secondary); + border-color: var(--color-accent); + color: var(--color-accent); +} + +.targeted-tip { + background-color: var(--color-bg-secondary); + border: 1px solid var(--color-border); + border-radius: 0.5rem; + padding: 1rem; + text-align: center; + max-width: 600px; + margin: 0 auto; +} + +.targeted-tip p { + margin: 0; + font-size: 0.875rem; + color: var(--color-text-secondary); +} + .dismiss-button { align-self: flex-end; background: none; @@ -2735,3 +2843,78 @@ footer { gap: 1rem; margin-bottom: 2rem; } + +.targeted-section { + background: var(--color-bg); + border: 1px solid var(--color-border); + border-radius: 0.75rem; + padding: 2rem; + margin: 2rem 0; + display: none; + animation: fadeInUp 0.5s ease-out; +} + +.targeted-section.active { + display: block; +} + +.targeted-header { + text-align: center; + margin-bottom: 2rem; +} + +.targeted-header h3 { + color: var(--color-accent); + font-size: 1.5rem; + margin-bottom: 0.5rem; +} + +.targeted-subtitle { + color: var(--color-text-secondary); + font-size: 0.875rem; + margin: 0; +} + +.search-interface { + max-width: 800px; + margin: 0 auto 2rem; +} + +.search-box { + position: relative; + margin-bottom: 1.5rem; +} + +.search-icon { + position: absolute; + left: 1rem; + top: 50%; + transform: translateY(-50%); + color: var(--color-text-secondary); + pointer-events: none; +} + +.targeted-search-input { + width: 100%; + padding: 1rem 1rem 1rem 3rem; + border: 2px solid var(--color-border); + border-radius: 0.5rem; + font-size: 0.875rem; + background-color: var(--color-bg); + color: var(--color-text); + transition: var(--transition-fast); +} + +.targeted-search-input:focus { + outline: none; + border-color: var(--color-accent); + box-shadow: 0 0 0 3px rgb(5 150 105 / 10%); +} + +.search-suggestions { + display: flex; + flex-wrap: wrap; + gap: 0.75rem; + margin-bottom: 1rem; + justify-content: center; +} \ No newline at end of file diff --git a/src/utils/dataService.ts b/src/utils/dataService.ts index 99043bb..d2b716c 100644 --- a/src/utils/dataService.ts +++ b/src/utils/dataService.ts @@ -39,6 +39,11 @@ const ToolsDataSchema = z.object({ name: z.string(), description: z.string().optional() })).optional().default([]), + scenarios: z.array(z.object({ + id: z.string(), + icon: z.string(), + friendly_name: z.string() + })).optional().default([]), }); interface ToolsData { @@ -46,11 +51,15 @@ interface ToolsData { domains: any[]; phases: any[]; 'domain-agnostic-software': any[]; + scenarios: any[]; } -interface CompressedToolsData extends Omit { +interface CompressedToolsData { tools: any[]; - concepts: any[]; + concepts: any[]; + domains: any[]; + phases: any[]; + 'domain-agnostic-software': any[]; } let cachedData: ToolsData | null = null; @@ -144,6 +153,7 @@ export async function getCompressedToolsDataForAI(): Promise Date: Sun, 27 Jul 2025 17:31:15 +0200 Subject: [PATCH 5/7] UI overhaul --- src/components/AIQueryInterface.astro | 41 +++++++----- src/components/TargetedScenarios.astro | 77 +++++++++++++--------- src/components/ToolFilters.astro | 88 ++++++++++++++------------ src/components/ToolMatrix.astro | 15 ++++- src/env.d.ts | 21 +++++- src/layouts/BaseLayout.astro | 29 +++++++++ src/pages/index.astro | 25 ++++---- 7 files changed, 192 insertions(+), 104 deletions(-) diff --git a/src/components/AIQueryInterface.astro b/src/components/AIQueryInterface.astro index 7e13157..66e0412 100644 --- a/src/components/AIQueryInterface.astro +++ b/src/components/AIQueryInterface.astro @@ -444,39 +444,46 @@ document.addEventListener('DOMContentLoaded', () => { } }; - // Smart Prompting Input Handling + // Smart Prompting Input Handling - Fixed Race Conditions aiInput.addEventListener('input', () => { console.log('[DEBUG] Input event triggered, length:', aiInput.value.trim().length); const inputLength = aiInput.value.trim().length; - // Clear existing timeout + // Clear ALL existing timeouts and abort controllers clearTimeout(enhancementTimeout); - - // Cancel any pending enhancement call if (enhancementAbortController) { enhancementAbortController.abort(); + enhancementAbortController = null; } - // Hide suggestions if input is too short + // Hide suggestions immediately if input is too short if (inputLength < 40) { showPromptingStatus('hidden'); return; } - // Show analyzing state after 1 second - setTimeout(() => { - if (aiInput.value.trim().length >= 50) { - showPromptingStatus('analyzing'); - } - }, 1000); - - // Trigger AI enhancement after 1.5 seconds + // Single consolidated timeout for all smart prompting logic enhancementTimeout = setTimeout(() => { - console.log('[DEBUG] Enhancement timeout fired, calling triggerSmartPrompting'); - if (aiInput.value.trim().length >= 40) { - triggerSmartPrompting(); + const currentLength = aiInput.value.trim().length; + + // Double-check length hasn't changed during timeout + if (currentLength < 40) { + showPromptingStatus('hidden'); + return; } - }, 1500); + + // Show analyzing state first + if (currentLength >= 50) { + showPromptingStatus('analyzing'); + + // Trigger enhancement after showing analyzing state + setTimeout(() => { + if (aiInput.value.trim().length >= 50) { + triggerSmartPrompting(); + } + }, 500); + } + }, 1000); // Single timeout instead of multiple }); aiInput.addEventListener('input', updateCharacterCount); diff --git a/src/components/TargetedScenarios.astro b/src/components/TargetedScenarios.astro index ed00221..a3c6282 100644 --- a/src/components/TargetedScenarios.astro +++ b/src/components/TargetedScenarios.astro @@ -68,40 +68,59 @@ const displayedScenarios = scenarios.slice(0, maxDisplayed);