first fork commit of interface overhaul

src/pages/index.astro

@@ -11,29 +11,60 @@ const tools = data.tools;
 ---
 
 <BaseLayout title="~/">
-<section style="padding: 2rem 0 1rem; border-bottom: 1px solid var(--color-border);">
+<section class="approach-hero">
-  <div style="text-align: center; margin-bottom: 2rem; padding: 2rem; background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-tertiary) 100%); border-radius: 1rem; border: 1px solid var(--color-border);">
+  <div class="approach-content">
-    <h1 style="margin-bottom: 1rem; font-size: 1.5rem; color: var(--color-primary);">ForensicPathways</h1>
+    <h1>ForensicPathways</h1>
-    
+    <p class="hero-tagline">Das richtige Werkzeug zur richtigen Zeit</p>
-    <p style="font-size: 1.25rem; margin-bottom: 1.125rem; color: var(--color-text);">
+    <p class="hero-subtitle">
-      <strong>Das richtige Werkzeug zur richtigen Zeit</strong> – in der digitalen Forensik entscheidet oft die Wahl der passenden Methode oder Software über Erfolg oder Misserfolg einer Untersuchung.
+      Systematische digitale Forensik nach bewährter NIST SP 800-86 Methodik.<br>
+      Wählen Sie Ihren Ansatz für die Werkzeugauswahl:
     </p>
 
-    <p class="text-muted" style="font-size: 1rem; margin-bottom: 1.5rem; line-height: 1.7;">
+    <div class="approach-selector">
-      Unser kuratiertes Verzeichnis bietet euch eine strukturierte Übersicht über bewährte Methoden und Tools, 
+      <div class="approach-card methodology" onclick="selectApproach('methodology')">
-      kategorisiert nach forensischen Domänen und Untersuchungsphasen nach Kent, Chevalier, Grance & Dang.
+        <div class="approach-header">
+          <div class="approach-icon">🔍</div>
+          <h3>Vollständige Ermittlung</h3>
+        </div>
+        <p class="approach-description">
+          Systematisches Vorgehen durch alle vier NIST-Phasen einer forensischen Untersuchung
         </p>
+        <ul class="approach-features">
+          <li>Methodische Schritt-für-Schritt Anleitung</li>
+          <li>Vollständige Dokumentationskette</li>
+          <li>Rechtssichere Beweisführung</li>
+          <li>Ideal für komplexe Fälle</li>
+        </ul>
+      </div>
 
-    <p class="text-muted" style="font-size: 0.9rem; margin-bottom: 2rem; line-height: 1.6;">
+      <div class="approach-card targeted" onclick="selectApproach('targeted')">
-      <span style="color: var(--color-primary); font-weight: 500;">Info:</span> 
+        <div class="approach-header">
+          <div class="approach-icon">🎯</div>
+          <h3>Gezieltes Problem lösen</h3>
+        </div>
+        <p class="approach-description">
+          Direkter Zugang zu spezifischen Tools und Methoden für bekannte Anforderungen
+        </p>
+        <ul class="approach-features">
+          <li>Schnelle Tool-Suche</li>
+          <li>Spezifische Problemlösungen</li>
+          <li>Erfahrene Anwender</li>
+          <li>Effizient für Einzelaufgaben</li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="approach-actions">
+      <p class="approach-info">
+        <span class="info-icon">ℹ️</span>
         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, <a href="/about#support">kontaktiert mich</a>. 
+        <a href="/about#support">Kontakt bei Problemen</a>
       </p>
       
-    <div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
+      <div class="quick-actions">
-      <a href="/about" class="btn btn-primary" style="padding: 0.75rem 1.5rem;">
+        <a href="/about" class="btn btn-secondary">
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem;">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <circle cx="12" cy="12" r="10"></circle>
             <path d="M12 16v-4"></path>
             <path d="M12 8h.01"></path>
@@ -41,16 +72,16 @@ const tools = data.tools;
           Infos zu SSO & Zugang
         </a>
         
-      <button id="ai-query-btn" class="btn btn-accent" style="padding: 0.75rem 1.5rem; background-color: var(--color-accent); color: white;">
+        <button id="ai-query-btn" class="btn btn-accent">
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem;">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <path d="M9 11H5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2h-4"/>
             <path d="M9 11V7a3 3 0 0 1 6 0v4"/>
           </svg>
           KI-Beratung
         </button>
         
-      <a href="/contribute" class="btn" style="padding: 0.75rem 1.5rem; background-color: var(--color-warning); color: white; border-color: var(--color-warning);" data-contribute-button="new">
+        <a href="/contribute" class="btn" style="background-color: var(--color-warning); color: white; border-color: var(--color-warning);" data-contribute-button="new">
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem;">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
             <circle cx="8.5" cy="7" r="4"/>
             <line x1="20" y1="8" x2="20" y2="14"/>
@@ -59,19 +90,26 @@ const tools = data.tools;
           Beitragen
         </a>
         
-      <a href="#filters-section" class="btn btn-secondary" style="padding: 0.75rem 1.5rem;">
+        <a href="#filters-section" class="btn btn-secondary">
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem;">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
             <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
             <line x1="12" y1="22.08" x2="12" y2="12"></line>
           </svg>
-        Entdecken
+          Direkt durchsuchen
         </a>
       </div>
     </div>
+  </div>
 </section>
   
   <section id="filters-section" style="padding: 2rem 0;">
+    <div style="text-align: center; margin-bottom: 2rem;">
+      <h3 style="color: var(--color-text); margin-bottom: 0.5rem;">Alle verfügbaren Werkzeuge durchsuchen</h3>
+      <p style="color: var(--color-text-secondary); margin: 0;">
+        Nutzen Sie die erweiterten Filter und Kategorien für eine detaillierte Suche
+      </p>
+    </div>
     <ToolFilters data={data} />
   </section>
 
@@ -94,7 +132,44 @@ const tools = data.tools;
 
 <script define:vars={{ toolsData: data.tools }}>
   window.toolsData = toolsData;
+  // Approach selection functionality
+  window.selectApproach = function(approach) {
+    console.log(`Selected approach: ${approach}`);
     
+    // Hide any existing results
+    const aiResults = document.getElementById('ai-results');
+    if (aiResults) aiResults.style.display = 'none';
+    
+    // Visual feedback for selection
+    document.querySelectorAll('.approach-card').forEach(card => {
+      card.classList.remove('selected');
+    });
+    document.querySelector(`.approach-card.${approach}`).classList.add('selected');
+    
+    if (approach === 'methodology') {
+      // Show NIST methodology section (implemented in Phase 2)
+      const methodologySection = document.getElementById('methodology-section');
+      if (methodologySection) {
+        methodologySection.classList.add('active');
+        methodologySection.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      } else {
+        // For now, show a placeholder message
+        alert('NIST-Methodologie wird in Phase 2 implementiert. Verwenden Sie vorerst die Standard-Werkzeugauswahl unten.');
+        document.getElementById('filters-section').scrollIntoView({ behavior: 'smooth' });
+      }
+    } else if (approach === 'targeted') {
+      // Show targeted scenarios section (implemented in Phase 3)
+      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' });
+      }
+    }
+  };
   document.addEventListener('DOMContentLoaded', () => {
     const toolsContainer = document.getElementById('tools-container');
     const toolsGrid = document.getElementById('tools-grid');

src/styles/global.css

@@ -1833,6 +1833,51 @@ footer {
     width: 100%;
     min-height: 100px;
   }
+  .approach-hero { 
+    padding: 2rem 1rem; 
+    margin: 1rem 0;
+  }
+  
+  .approach-content h1 { 
+    font-size: 2rem; 
+  }
+  
+  .hero-tagline {
+    font-size: 1.125rem;
+  }
+  
+  .approach-selector { 
+    grid-template-columns: 1fr; 
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+  }
+  
+  .approach-card { 
+    padding: 1.5rem; 
+  }
+  
+  .approach-header {
+    gap: 0.75rem;
+  }
+  
+  .approach-icon {
+    width: 2.5rem;
+    height: 2.5rem;
+    font-size: 1.25rem;
+  }
+  
+  .approach-card h3 {
+    font-size: 1.25rem;
+  }
+  
+  .quick-actions {
+    gap: 0.75rem;
+  }
+  
+  .quick-actions .btn {
+    padding: 0.625rem 1.25rem;
+    font-size: 0.8125rem;
+  }
 }
 
 @media (width <= 640px) {
@@ -1997,6 +2042,20 @@ footer {
   .hint-description {
     font-size: 0.625rem;
   }
+  .approach-info {
+    padding: 0.75rem;
+    font-size: 0.8125rem;
+  }
+  
+  .quick-actions {
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .quick-actions .btn {
+    width: 100%;
+    max-width: 280px;
+  }
 }
 
 /* Smart Prompting Styles - Simplified */
@@ -2407,3 +2466,169 @@ footer {
 .analysis-header.scenario { color: var(--color-primary); }
 .analysis-header.approach { color: var(--color-accent); }
 .analysis-header.critical { color: var(--color-warning); }
+
+/* Methodology-First Approach Styles */
+.approach-hero {
+  background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-tertiary) 100%);
+  border-radius: 1rem;
+  border: 1px solid var(--color-border);
+  padding: 3rem 2rem;
+  margin: 2rem 0;
+  text-align: center;
+}
+
+.approach-content h1 {
+  font-size: 2.5rem;
+  margin-bottom: 1rem;
+  color: var(--color-primary);
+}
+
+.hero-tagline {
+  font-size: 1.25rem;
+  color: var(--color-text);
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+}
+
+.hero-subtitle {
+  color: var(--color-text-secondary);
+  margin-bottom: 2rem;
+  line-height: 1.6;
+  max-width: 700px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.approach-selector {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2rem;
+  max-width: 900px;
+  margin: 0 auto 2rem;
+}
+
+.approach-card {
+  background: var(--color-bg);
+  border: 2px solid var(--color-border);
+  border-radius: 0.75rem;
+  padding: 2rem;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  text-align: left;
+  position: relative;
+  overflow: hidden;
+}
+
+.approach-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: var(--approach-color);
+  opacity: 0.7;
+}
+
+.approach-card.methodology { --approach-color: var(--color-primary); }
+.approach-card.targeted { --approach-color: var(--color-accent); }
+
+.approach-card:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-lg);
+  border-color: var(--approach-color);
+}
+
+.approach-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+  gap: 1rem;
+}
+
+.approach-icon {
+  width: 3rem;
+  height: 3rem;
+  background: var(--approach-color);
+  color: white;
+  border-radius: 0.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
+  flex-shrink: 0;
+}
+
+.approach-card h3 {
+  font-size: 1.375rem;
+  color: var(--color-text);
+  margin: 0;
+}
+
+.approach-card.selected {
+  border-color: var(--approach-color);
+  background: linear-gradient(135deg, var(--color-bg) 0%, color-mix(in srgb, var(--approach-color) 8%, transparent) 100%);
+  box-shadow: var(--shadow-md);
+}
+
+.approach-description {
+  color: var(--color-text-secondary);
+  margin-bottom: 1.5rem;
+  line-height: 1.6;
+}
+
+.approach-features {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.approach-features li {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+}
+
+.approach-features li::before {
+  content: '✓';
+  color: var(--approach-color);
+  font-weight: bold;
+  flex-shrink: 0;
+}
+
+.approach-actions {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.approach-info {
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: 0.5rem;
+  padding: 1rem;
+  margin-bottom: 1.5rem;
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+  line-height: 1.6;
+  text-align: left;
+}
+
+.info-icon {
+  margin-right: 0.5rem;
+  font-size: 1rem;
+}
+
+.quick-actions {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.quick-actions .btn {
+  padding: 0.75rem 1.5rem;
+  font-size: 0.875rem;
+}