style adjustments

This commit is contained in:
overcuriousity 2025-07-16 23:59:43 +02:00
parent 2b061db94e
commit 612536b7c5
3 changed files with 16 additions and 20 deletions

View File

@ -134,7 +134,7 @@ Beispiele:
{index < phases.length - 1 && ( {index < phases.length - 1 && (
<div class="workflow-arrow"> <div class="workflow-arrow">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--color-primary)" stroke-width="2"> <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="var(--color-primary)" stroke-width="2">
<path d="M5 12h14"/> <path d="M5 12h14"/>
<path d="M12 5l7 7-7 7"/> <path d="M12 5l7 7-7 7"/>
</svg> </svg>

View File

@ -14,18 +14,18 @@ const tools = data.tools;
// Separate collaboration tools from domain-specific tools // Separate collaboration tools from domain-specific tools
const collaborationTools = tools.filter((tool: any) => const collaborationTools = tools.filter((tool: any) =>
tool.phases && tool.phases.includes('collaboration') tool.phases && tool.phases.includes('collaboration-general')
); );
const domainTools = tools.filter((tool: any) => const domainTools = tools.filter((tool: any) =>
!tool.phases || !tool.phases.includes('collaboration') !tool.phases || !tool.phases.includes('collaboration-general')
); );
// Create matrix structure for domain-specific tools only // Create matrix structure for domain-specific tools only
const matrix: Record<string, Record<string, any[]>> = {}; const matrix: Record<string, Record<string, any[]>> = {};
domains.forEach((domain: any) => { domains.forEach((domain: any) => {
matrix[domain.id] = {}; matrix[domain.id] = {};
phases.filter((phase: any) => phase.id !== 'collaboration').forEach((phase: any) => { phases.filter((phase: any) => phase.id !== 'collaboration-general').forEach((phase: any) => {
matrix[domain.id][phase.id] = domainTools.filter((tool: any) => matrix[domain.id][phase.id] = domainTools.filter((tool: any) =>
tool.domains && tool.domains.includes(domain.id) && tool.phases && tool.phases.includes(phase.id) tool.domains && tool.domains.includes(domain.id) && tool.phases && tool.phases.includes(phase.id)
); );
@ -75,7 +75,7 @@ domains.forEach((domain: any) => {
<thead> <thead>
<tr> <tr>
<th style="width: 200px;">Domain / Phase</th> <th style="width: 200px;">Domain / Phase</th>
{phases.filter((phase: any) => phase.id !== 'collaboration').map((phase: any) => ( {phases.filter((phase: any) => phase.id !== 'collaboration-general').map((phase: any) => (
<th data-phase={phase.id}>{phase.name}</th> <th data-phase={phase.id}>{phase.name}</th>
))} ))}
</tr> </tr>
@ -84,7 +84,7 @@ domains.forEach((domain: any) => {
{domains.map((domain: any) => ( {domains.map((domain: any) => (
<tr data-domain={domain.id}> <tr data-domain={domain.id}>
<th>{domain.name}</th> <th>{domain.name}</th>
{phases.filter((phase: any) => phase.id !== 'collaboration').map((phase: any) => ( {phases.filter((phase: any) => phase.id !== 'collaboration-general').map((phase: any) => (
<td class="matrix-cell" data-domain={domain.id} data-phase={phase.id}> <td class="matrix-cell" data-domain={domain.id} data-phase={phase.id}>
{matrix[domain.id][phase.id].map((tool: any) => { {matrix[domain.id][phase.id].map((tool: any) => {
const hasValidProjectUrl = tool.projectUrl !== undefined && const hasValidProjectUrl = tool.projectUrl !== undefined &&
@ -364,13 +364,13 @@ domains.forEach((domain: any) => {
const dfirMatrixSection = document.getElementById('dfir-matrix-section'); const dfirMatrixSection = document.getElementById('dfir-matrix-section');
const collaborationContainer = document.getElementById('collaboration-tools-container'); const collaborationContainer = document.getElementById('collaboration-tools-container');
if (selectedPhase === 'collaboration') { if (selectedPhase === 'collaboration-general') {
// Show only collaboration tools, hide matrix // Show only collaboration tools, hide matrix
collaborationSection.style.display = 'block'; collaborationSection.style.display = 'block';
dfirMatrixSection.style.display = 'none'; dfirMatrixSection.style.display = 'none';
// Filter collaboration tools // Filter collaboration tools
const filteredCollaboration = filtered.filter(tool => (tool.phases || []).includes('collaboration')); const filteredCollaboration = filtered.filter(tool => (tool.phases || []).includes('collaboration-general'));
collaborationContainer.innerHTML = ''; collaborationContainer.innerHTML = '';
filteredCollaboration.forEach(tool => { filteredCollaboration.forEach(tool => {
@ -386,7 +386,7 @@ domains.forEach((domain: any) => {
collaborationSection.style.display = 'block'; collaborationSection.style.display = 'block';
// Show all collaboration tools that pass general filters // Show all collaboration tools that pass general filters
const filteredCollaboration = filtered.filter(tool => (tool.phases || []).includes('collaboration')); const filteredCollaboration = filtered.filter(tool => (tool.phases || []).includes('collaboration-general'));
collaborationContainer.innerHTML = ''; collaborationContainer.innerHTML = '';
filteredCollaboration.forEach(tool => { filteredCollaboration.forEach(tool => {
@ -404,7 +404,7 @@ domains.forEach((domain: any) => {
}); });
// Re-populate with filtered DFIR tools - with safe array handling // Re-populate with filtered DFIR tools - with safe array handling
const filteredDfirTools = filtered.filter(tool => !(tool.phases || []).includes('collaboration')); const filteredDfirTools = filtered.filter(tool => !(tool.phases || []).includes('collaboration-general'));
filteredDfirTools.forEach(tool => { filteredDfirTools.forEach(tool => {
const hasValidProjectUrl = tool.projectUrl !== undefined && const hasValidProjectUrl = tool.projectUrl !== undefined &&
tool.projectUrl !== null && tool.projectUrl !== null &&
@ -416,7 +416,7 @@ domains.forEach((domain: any) => {
domains.forEach(domain => { domains.forEach(domain => {
phases.forEach(phase => { phases.forEach(phase => {
if (phase !== 'collaboration') { if (phase !== 'collaboration-general') {
const cell = document.querySelector(`[data-domain="${domain}"][data-phase="${phase}"]`); const cell = document.querySelector(`[data-domain="${domain}"][data-phase="${phase}"]`);
if (cell) { if (cell) {
const chip = document.createElement('span'); const chip = document.createElement('span');

View File

@ -988,7 +988,7 @@ footer {
} }
/* Responsive Design */ /* Responsive Design */
@media (width <= 768px) { @media (width: 768px) {
.grid-cols-2 { .grid-cols-2 {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
@ -1099,13 +1099,13 @@ footer {
} }
} }
@media (width <= 600px) { @media (width: 600px) {
.phase-tools { .phase-tools {
grid-template-columns: 1fr !important; grid-template-columns: 1fr !important;
} }
} }
@media (width <= 640px) { @media (width: 640px) {
.phase-buttons { .phase-buttons {
justify-content: center; justify-content: center;
} }
@ -1125,7 +1125,7 @@ footer {
} }
} }
@media (width <= 480px) { @media (width: 480px) {
.phase-buttons { .phase-buttons {
flex-direction: column; flex-direction: column;
gap: 0.375rem; gap: 0.375rem;
@ -1251,7 +1251,6 @@ footer {
margin: 0.5rem 0; margin: 0.5rem 0;
} }
/* Tool Recommendation Cards */
.tool-recommendation { .tool-recommendation {
background-color: var(--color-bg); background-color: var(--color-bg);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
@ -1263,6 +1262,7 @@ footer {
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
min-height: 200px; min-height: 200px;
animation: fadeInUp 0.3s ease-out;
} }
.tool-recommendation:hover { .tool-recommendation:hover {
@ -1367,10 +1367,6 @@ footer {
animation: fadeInUp 0.5s ease-out; animation: fadeInUp 0.5s ease-out;
} }
.tool-recommendation {
animation: fadeInUp 0.3s ease-out;
}
.tool-recommendation:nth-child(1) { .tool-recommendation:nth-child(1) {
animation-delay: 0.1s; animation-delay: 0.1s;
} }