iteration 2
This commit is contained in:
overcuriousity
parent
4edb0f0000
commit
4ba29227ab
@ -103,6 +103,61 @@ const tools = data.tools;
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- NIST Methodology Section -->
|
||||
<section id="methodology-section" class="methodology-section">
|
||||
<div class="methodology-header">
|
||||
<h3>NIST SP 800-86 Forensische Methodik</h3>
|
||||
<p class="methodology-subtitle">
|
||||
Wählen Sie eine Phase aus dem bewährten Vier-Phasen-Modell
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="nist-workflow">
|
||||
<div class="phase-card collection" onclick="selectPhase('data-collection')">
|
||||
<div class="phase-number">1</div>
|
||||
<div class="phase-title">Datensammlung</div>
|
||||
<p class="phase-description">
|
||||
Beweismittel identifizieren, sichern und für die Analyse vorbereiten
|
||||
</p>
|
||||
<span class="tool-count">{tools.filter(t => t.phases?.includes('data-collection')).length} Tools</span>
|
||||
</div>
|
||||
|
||||
<div class="phase-card examination" onclick="selectPhase('examination')">
|
||||
<div class="phase-number">2</div>
|
||||
<div class="phase-title">Auswertung</div>
|
||||
<p class="phase-description">
|
||||
Daten extrahieren, strukturiert aufbereiten und zugänglich machen
|
||||
</p>
|
||||
<span class="tool-count">{tools.filter(t => t.phases?.includes('examination')).length} Tools</span>
|
||||
</div>
|
||||
|
||||
<div class="phase-card analysis" onclick="selectPhase('analysis')">
|
||||
<div class="phase-number">3</div>
|
||||
<div class="phase-title">Analyse</div>
|
||||
<p class="phase-description">
|
||||
Beweise bewerten, Zusammenhänge erkennen und Hypothesen prüfen
|
||||
</p>
|
||||
<span class="tool-count">{tools.filter(t => t.phases?.includes('analysis')).length} Tools</span>
|
||||
</div>
|
||||
|
||||
<div class="phase-card reporting" onclick="selectPhase('reporting')">
|
||||
<div class="phase-number">4</div>
|
||||
<div class="phase-title">Bericht</div>
|
||||
<p class="phase-description">
|
||||
Ergebnisse dokumentieren, visualisieren und präsentieren
|
||||
</p>
|
||||
<span class="tool-count">{tools.filter(t => t.phases?.includes('reporting')).length} Tools</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="methodology-tip">
|
||||
<p>
|
||||
<strong>Tipp:</strong> Für komplexe Ermittlungen empfiehlt sich das sequenzielle Durchlaufen aller Phasen.
|
||||
Jede Phase baut methodisch auf der vorherigen auf.
|
||||
</p>
|
||||
</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>
|
||||
@ -132,6 +187,7 @@ 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}`);
|
||||
@ -147,15 +203,11 @@ const tools = data.tools;
|
||||
document.querySelector(`.approach-card.${approach}`).classList.add('selected');
|
||||
|
||||
if (approach === 'methodology') {
|
||||
// Show NIST methodology section (implemented in Phase 2)
|
||||
// Show NIST methodology section
|
||||
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)
|
||||
@ -170,6 +222,40 @@ const tools = data.tools;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Phase selection function (integrates with existing ToolFilters)
|
||||
window.selectPhase = function(phase) {
|
||||
console.log(`Selected NIST phase: ${phase}`);
|
||||
|
||||
// Remove active class from all phase cards
|
||||
document.querySelectorAll('.phase-card').forEach(card => {
|
||||
card.classList.remove('active');
|
||||
});
|
||||
|
||||
// Add active class to selected phase
|
||||
document.querySelector(`.phase-card.${phase.replace('data-', '')}`).classList.add('active');
|
||||
|
||||
// Use existing phase filter functionality
|
||||
const existingPhaseButton = document.querySelector(`[data-phase="${phase}"]`);
|
||||
if (existingPhaseButton && !existingPhaseButton.classList.contains('active')) {
|
||||
existingPhaseButton.click();
|
||||
}
|
||||
|
||||
// Switch to grid view to show results
|
||||
const gridToggle = document.querySelector('.view-toggle[data-view="grid"]');
|
||||
if (gridToggle && !gridToggle.classList.contains('active')) {
|
||||
gridToggle.click();
|
||||
}
|
||||
|
||||
// Scroll to results after a short delay
|
||||
setTimeout(() => {
|
||||
const toolsGrid = document.getElementById('tools-grid');
|
||||
if (toolsGrid) {
|
||||
toolsGrid.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
}
|
||||
}, 300);
|
||||
};
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const toolsContainer = document.getElementById('tools-container');
|
||||
const toolsGrid = document.getElementById('tools-grid');
|
||||
|
||||
@ -954,6 +954,15 @@ input[type="checkbox"] {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.tool-count {
|
||||
background: var(--color-bg-tertiary);
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 1rem;
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-text-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* AI Interface - Consolidated */
|
||||
.ai-interface {
|
||||
padding: 2rem 0;
|
||||
@ -1071,26 +1080,31 @@ input[type="checkbox"] {
|
||||
}
|
||||
|
||||
.phase-number {
|
||||
background-color: var(--color-primary);
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
background: var(--phase-color);
|
||||
color: white;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
font-size: 1.125rem;
|
||||
flex-shrink: 0;
|
||||
margin: 0 auto 0.75rem;
|
||||
}
|
||||
|
||||
.phase-info { flex: 1; min-width: 0; }
|
||||
|
||||
.phase-title {
|
||||
margin: 0 0 1rem;
|
||||
color: var(--color-text);
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.phase-description {
|
||||
font-size: 0.8125rem;
|
||||
color: var(--color-text-secondary);
|
||||
margin-bottom: 0.75rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.phase-tools {
|
||||
@ -1099,6 +1113,43 @@ input[type="checkbox"] {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.phase-card {
|
||||
background: var(--color-bg-secondary);
|
||||
border: 2px solid var(--color-border);
|
||||
border-radius: 0.5rem;
|
||||
padding: 1.5rem;
|
||||
cursor: pointer;
|
||||
transition: var(--transition-fast);
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.phase-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: var(--phase-color);
|
||||
}
|
||||
|
||||
.phase-card.collection { --phase-color: #3b82f6; }
|
||||
.phase-card.examination { --phase-color: #8b5cf6; }
|
||||
.phase-card.analysis { --phase-color: #f59e0b; }
|
||||
.phase-card.reporting { --phase-color: #ef4444; }
|
||||
|
||||
.phase-card:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: var(--phase-color);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.phase-card.active {
|
||||
border-color: var(--phase-color);
|
||||
background: linear-gradient(135deg, var(--color-bg) 0%, color-mix(in srgb, var(--phase-color) 8%, transparent) 100%);
|
||||
}
|
||||
|
||||
.workflow-arrow {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -1878,6 +1929,10 @@ footer {
|
||||
padding: 0.625rem 1.25rem;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
.nist-workflow {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width <= 640px) {
|
||||
@ -2056,6 +2111,9 @@ footer {
|
||||
width: 100%;
|
||||
max-width: 280px;
|
||||
}
|
||||
.nist-workflow {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* Smart Prompting Styles - Simplified */
|
||||
@ -2632,3 +2690,53 @@ footer {
|
||||
padding: 0.75rem 1.5rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.methodology-section {
|
||||
background: var(--color-bg);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 0.75rem;
|
||||
padding: 2rem;
|
||||
margin: 2rem 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.methodology-section.active {
|
||||
display: block;
|
||||
animation: fadeInUp 0.5s ease-out;
|
||||
}
|
||||
|
||||
.methodology-header {
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.methodology-header h3 {
|
||||
color: var(--color-primary);
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.methodology-subtitle {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.methodology-tip {
|
||||
text-align: center;
|
||||
padding: 1.5rem;
|
||||
background: var(--color-bg-secondary);
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.methodology-tip p {
|
||||
color: var(--color-text-secondary);
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.nist-workflow {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user