layout improvements
This commit is contained in:
overcuriousity
parent
25cdc64f99
commit
129a1b1a21
@ -29,7 +29,7 @@ const hasValidProjectUrl = tool.projectUrl !== undefined &&
|
|||||||
const hasKnowledgebase = tool.knowledgebase === true;
|
const hasKnowledgebase = tool.knowledgebase === true;
|
||||||
|
|
||||||
// Determine card styling based on hosting status (derived from projectUrl)
|
// Determine card styling based on hosting status (derived from projectUrl)
|
||||||
const cardClass = hasValidProjectUrl ? 'card card-hosted' : (tool.license !== 'Proprietary' ? 'card card-oss' : 'card');
|
const cardClass = hasValidProjectUrl ? 'card card-hosted tool-card' : (tool.license !== 'Proprietary' ? 'card card-oss tool-card' : 'card tool-card');
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class={cardClass} onclick={`window.showToolDetails('${tool.name}')`} style="cursor: pointer;">
|
<div class={cardClass} onclick={`window.showToolDetails('${tool.name}')`} style="cursor: pointer;">
|
||||||
@ -79,7 +79,7 @@ const cardClass = hasValidProjectUrl ? 'card card-hosted' : (tool.license !== 'P
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 1rem;">
|
<div class="tool-tags-container" style="display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 1rem;">
|
||||||
{tool.tags.map(tag => (
|
{tool.tags.map(tag => (
|
||||||
<span class="tag">{tag}</span>
|
<span class="tag">{tag}</span>
|
||||||
))}
|
))}
|
||||||
|
|||||||
@ -8,82 +8,59 @@ const yamlPath = path.join(process.cwd(), 'src/data/tools.yaml');
|
|||||||
const yamlContent = await fs.readFile(yamlPath, 'utf8');
|
const yamlContent = await fs.readFile(yamlPath, 'utf8');
|
||||||
const data = load(yamlContent) as any;
|
const data = load(yamlContent) as any;
|
||||||
|
|
||||||
const tools = data.tools;
|
|
||||||
const domains = data.domains;
|
const domains = data.domains;
|
||||||
const phases = data.phases.filter((p: any) => p.id !== 'collaboration-general'); // Exclude from matrix
|
const phases = data.phases;
|
||||||
|
const tools = data.tools;
|
||||||
|
|
||||||
// Filter collaboration tools (tools with "collaboration-general" phase)
|
// 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-general')
|
tool.phases && tool.phases.includes('collaboration-general')
|
||||||
);
|
);
|
||||||
|
|
||||||
// Filter regular tools for matrix (excluding collaboration-only tools from matrix display)
|
const domainTools = tools.filter((tool: any) =>
|
||||||
const matrixTools = tools.filter((tool: any) => {
|
!tool.phases || !tool.phases.includes('collaboration-general')
|
||||||
if (!tool.phases || tool.phases.length === 0) return false;
|
);
|
||||||
// Include if has non-collaboration phases and non-empty domains
|
|
||||||
const hasRegularPhases = tool.phases.some((phase: string) => phase !== 'collaboration-general');
|
|
||||||
const hasDomains = tool.domains && tool.domains.length > 0;
|
|
||||||
return hasRegularPhases && hasDomains;
|
|
||||||
});
|
|
||||||
|
|
||||||
// Also include collaboration tools in matrix if they have domains and regular phases
|
// Create matrix structure for domain-specific tools only
|
||||||
const collaborationToolsInMatrix = collaborationTools.filter((tool: any) => {
|
const matrix: Record<string, Record<string, any[]>> = {};
|
||||||
const hasRegularPhases = tool.phases && tool.phases.some((phase: string) => phase !== 'collaboration-general');
|
domains.forEach((domain: any) => {
|
||||||
const hasDomains = tool.domains && tool.domains.length > 0;
|
matrix[domain.id] = {};
|
||||||
return hasRegularPhases && hasDomains;
|
phases.filter((phase: any) => phase.id !== 'collaboration-general').forEach((phase: any) => {
|
||||||
|
matrix[domain.id][phase.id] = domainTools.filter((tool: any) =>
|
||||||
|
tool.domains && tool.domains.includes(domain.id) && tool.phases && tool.phases.includes(phase.id)
|
||||||
|
);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
// Combine for matrix display
|
|
||||||
const allMatrixTools = [...matrixTools, ...collaborationToolsInMatrix];
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<!-- Matrix View Container -->
|
<div id="matrix-container" class="matrix-wrapper" style="display: none;">
|
||||||
<section id="matrix-container" style="display: none; padding: 2rem 0;">
|
<!-- Collaboration Tools Section (compact horizontal layout for matrix view) -->
|
||||||
<div style="text-align: center; margin-bottom: 2rem;">
|
<div id="collaboration-tools-section" style="margin-bottom: 1.5rem;">
|
||||||
<h2 style="margin-bottom: 1rem;">Tool-Matrix nach NIST-Framework</h2>
|
<h3 style="margin-bottom: 0.75rem; color: var(--color-text); font-size: 1.125rem;">Übergreifend & Kollaboration</h3>
|
||||||
<p class="text-muted" style="max-width: 600px; margin: 0 auto;">
|
<div class="collaboration-tools-compact" id="collaboration-tools-container">
|
||||||
Übersicht der Tools nach forensischen Domänen und Untersuchungsphasen.
|
|
||||||
Bewegen Sie die Maus über Zeilen und Spalten für bessere Orientierung.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Collaboration Tools Section (above matrix) -->
|
|
||||||
<div id="collaboration-section" style="margin-bottom: 2rem;">
|
|
||||||
<h3 style="margin-bottom: 1rem; color: var(--color-accent); display: flex; align-items: center; gap: 0.5rem;">
|
|
||||||
<svg width="20" height="20" 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"/>
|
|
||||||
<line x1="23" y1="11" x2="17" y2="11"/>
|
|
||||||
</svg>
|
|
||||||
Übergreifende Tools & Kollaboration
|
|
||||||
</h3>
|
|
||||||
<div class="collaboration-tools-compact">
|
|
||||||
{collaborationTools.map((tool: any) => {
|
{collaborationTools.map((tool: any) => {
|
||||||
const hasValidProjectUrl = tool.projectUrl !== undefined &&
|
const hasValidProjectUrl = tool.projectUrl !== undefined &&
|
||||||
tool.projectUrl !== null &&
|
tool.projectUrl !== null &&
|
||||||
tool.projectUrl !== "" &&
|
tool.projectUrl !== "" &&
|
||||||
tool.projectUrl.trim() !== "";
|
tool.projectUrl.trim() !== "";
|
||||||
return (
|
return (
|
||||||
<div class={`collaboration-tool-compact ${hasValidProjectUrl ? 'hosted' : (tool.license !== 'Proprietary' ? 'oss' : '')}`}
|
<div class={`collaboration-tool-compact ${hasValidProjectUrl ? 'hosted' : tool.license !== 'Proprietary' ? 'oss' : ''}`}
|
||||||
onclick={`window.showToolDetails('${tool.name}')`}>
|
onclick={`window.showToolDetails('${tool.name}')`}>
|
||||||
<div class="tool-compact-header">
|
<div class="tool-compact-header">
|
||||||
<h4 style="margin: 0; font-size: 1rem;">{tool.name}</h4>
|
<h4 style="margin: 0; font-size: 0.875rem; font-weight: 600;">{tool.name}</h4>
|
||||||
<div style="display: flex; gap: 0.25rem;">
|
<div style="display: flex; gap: 0.25rem;">
|
||||||
{hasValidProjectUrl && <span class="badge-mini badge-primary">Self-Hosted</span>}
|
{hasValidProjectUrl && <span class="badge-mini badge-primary">Self-Hosted</span>}
|
||||||
{tool.license !== 'Proprietary' && <span class="badge-mini badge-success">OSS</span>}
|
{tool.license !== 'Proprietary' && <span class="badge-mini badge-success">OSS</span>}
|
||||||
|
{tool.knowledgebase === true && <span class="badge-mini badge-error">Infos 📖</span>}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p style="font-size: 0.8125rem; color: var(--color-text-secondary); margin-bottom: 0.75rem; line-height: 1.4;">
|
<p style="font-size: 0.75rem; color: var(--color-text-secondary); margin: 0.25rem 0; line-height: 1.3;">
|
||||||
{tool.description.length > 120 ? `${tool.description.substring(0, 120)}...` : tool.description}
|
{tool.description}
|
||||||
</p>
|
</p>
|
||||||
<div style="display: flex; flex-wrap: wrap; gap: 0.25rem;">
|
<div style="display: flex; gap: 0.75rem; font-size: 0.6875rem; color: var(--color-text-secondary);">
|
||||||
{tool.tags && tool.tags.slice(0, 3).map((tag: string) => (
|
<span>{tool.platforms.join(', ')}</span>
|
||||||
<span class="tag" style="font-size: 0.625rem;">{tag}</span>
|
<span>•</span>
|
||||||
))}
|
<span>{tool.skillLevel}</span>
|
||||||
{tool.tags && tool.tags.length > 3 && (
|
|
||||||
<span class="tag" style="font-size: 0.625rem; font-style: italic;">+{tool.tags.length - 3}</span>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@ -91,253 +68,372 @@ const allMatrixTools = [...matrixTools, ...collaborationToolsInMatrix];
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Matrix Table -->
|
<!-- DFIR Tools Matrix -->
|
||||||
<div class="matrix-wrapper">
|
<div id="dfir-matrix-section">
|
||||||
<table class="matrix-table" id="matrix-table">
|
<h2 style="margin-bottom: 1rem; color: var(--color-text);">DFIR Tools Matrix</h2>
|
||||||
|
<table class="matrix-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th style="background-color: var(--color-bg-secondary);">Domäne / Phase</th>
|
<th style="width: 200px;">Domain / Phase</th>
|
||||||
{phases.map((phase: any) => (
|
{phases.filter((phase: any) => phase.id !== 'collaboration-general').map((phase: any) => (
|
||||||
<th data-phase={phase.id} style="text-align: center; min-width: 150px;">
|
<th data-phase={phase.id}>{phase.name}</th>
|
||||||
{phase.name}
|
|
||||||
</th>
|
|
||||||
))}
|
))}
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{domains.map((domain: any) => (
|
{domains.map((domain: any) => (
|
||||||
<tr data-domain={domain.id}>
|
<tr data-domain={domain.id}>
|
||||||
<th data-domain={domain.id} style="background-color: var(--color-bg-secondary); font-weight: 600;">
|
<th>{domain.name}</th>
|
||||||
{domain.name}
|
{phases.filter((phase: any) => phase.id !== 'collaboration-general').map((phase: any) => (
|
||||||
</th>
|
<td class="matrix-cell" data-domain={domain.id} data-phase={phase.id}>
|
||||||
{phases.map((phase: any) => {
|
{matrix[domain.id][phase.id].map((tool: any) => {
|
||||||
// Find tools for this domain-phase combination
|
|
||||||
const cellTools = allMatrixTools.filter((tool: any) => {
|
|
||||||
const hasPhase = tool.phases && tool.phases.includes(phase.id);
|
|
||||||
const hasDomain = tool.domains && tool.domains.includes(domain.id);
|
|
||||||
return hasPhase && hasDomain;
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<td data-domain={domain.id} data-phase={phase.id} class="matrix-cell">
|
|
||||||
<div style="display: flex; flex-wrap: wrap; gap: 0.25rem;">
|
|
||||||
{cellTools.map((tool: any) => {
|
|
||||||
const hasValidProjectUrl = tool.projectUrl !== undefined &&
|
const hasValidProjectUrl = tool.projectUrl !== undefined &&
|
||||||
tool.projectUrl !== null &&
|
tool.projectUrl !== null &&
|
||||||
tool.projectUrl !== "" &&
|
tool.projectUrl !== "" &&
|
||||||
tool.projectUrl.trim() !== "";
|
tool.projectUrl.trim() !== "";
|
||||||
return (
|
return (
|
||||||
<span
|
<span
|
||||||
class={`tool-chip ${hasValidProjectUrl ? 'tool-chip-hosted' : (tool.license !== 'Proprietary' ? 'tool-chip-oss' : '')}`}
|
class={`tool-chip ${hasValidProjectUrl ? 'tool-chip-hosted' : tool.license !== 'Proprietary' ? 'tool-chip-oss' : ''}`}
|
||||||
|
data-tool-name={tool.name}
|
||||||
onclick={`window.showToolDetails('${tool.name}')`}
|
onclick={`window.showToolDetails('${tool.name}')`}
|
||||||
title={tool.description}
|
title={`${tool.name}${tool.knowledgebase === true ? ' (KB verfügbar)' : ''}`}
|
||||||
>
|
>
|
||||||
{tool.name}
|
{tool.name}
|
||||||
|
{tool.knowledgebase === true && <span style="margin-left: 0.25rem; font-size: 0.6875rem;">📖</span>}
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</div>
|
|
||||||
</td>
|
</td>
|
||||||
);
|
))}
|
||||||
})}
|
|
||||||
</tr>
|
</tr>
|
||||||
))}
|
))}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Matrix Statistics -->
|
<!-- Tool Details Modal -->
|
||||||
<div style="margin-top: 2rem; text-align: center;">
|
<div class="modal-overlay" id="modal-overlay" onclick="window.hideToolDetails()"></div>
|
||||||
<div style="display: inline-flex; gap: 2rem; background-color: var(--color-bg-secondary); padding: 1rem; border-radius: 0.5rem;">
|
<div class="tool-details" id="tool-details">
|
||||||
<div>
|
<div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 1rem;">
|
||||||
<strong style="color: var(--color-primary);" id="matrix-total-tools">{allMatrixTools.length}</strong>
|
<h2 id="tool-name" style="margin: 0;">Tool Name</h2>
|
||||||
<span class="text-muted" style="font-size: 0.875rem;">Tools in Matrix</span>
|
<button class="btn-icon" onclick="window.hideToolDetails()">
|
||||||
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||||||
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
|
||||||
<strong style="color: var(--color-accent);" id="collaboration-total-tools">{collaborationTools.length}</strong>
|
|
||||||
<span class="text-muted" style="font-size: 0.875rem;">Collaboration Tools</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<strong style="color: var(--color-text);" id="matrix-visible-tools">{allMatrixTools.length + collaborationTools.length}</strong>
|
|
||||||
<span class="text-muted" style="font-size: 0.875rem;">Gesamt sichtbar</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<script define:vars={{ allMatrixTools, collaborationTools, domains, phases }}>
|
<p id="tool-description" class="text-muted"></p>
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
const matrixTable = document.getElementById('matrix-table');
|
|
||||||
const collaborationSection = document.getElementById('collaboration-section');
|
|
||||||
|
|
||||||
if (!matrixTable || !collaborationSection) return;
|
<div id="tool-badges" style="display: flex; gap: 0.5rem; margin-bottom: 1rem;"></div>
|
||||||
|
|
||||||
// Store original tools data
|
<div id="tool-metadata" style="margin-bottom: 1rem;"></div>
|
||||||
let currentMatrixTools = [...allMatrixTools];
|
|
||||||
let currentCollaborationTools = [...collaborationTools];
|
|
||||||
|
|
||||||
// Matrix hover effects
|
<div id="tool-tags" style="margin-bottom: 1rem;"></div>
|
||||||
let hoveredRow = null;
|
|
||||||
let hoveredColumn = null;
|
|
||||||
|
|
||||||
function updateMatrixHighlight() {
|
<!-- Updated button container for dual buttons -->
|
||||||
// Clear all highlights
|
<div id="tool-links" style="display: flex; gap: 0.5rem; flex-direction: column;"></div>
|
||||||
matrixTable.querySelectorAll('tr').forEach(row => row.classList.remove('highlight-row'));
|
</div>
|
||||||
matrixTable.querySelectorAll('th, td').forEach(cell => cell.classList.remove('highlight-column'));
|
|
||||||
|
|
||||||
// Apply current highlights
|
<script define:vars={{ toolsData: tools, collaborationTools, domainTools }}>
|
||||||
if (hoveredRow !== null) {
|
// Helper function to get selected phase from active button
|
||||||
const rows = matrixTable.querySelectorAll('tr');
|
function getSelectedPhase() {
|
||||||
if (rows[hoveredRow]) {
|
const activePhaseButton = document.querySelector('.phase-button.active');
|
||||||
rows[hoveredRow].classList.add('highlight-row');
|
return activePhaseButton ? activePhaseButton.getAttribute('data-phase') : '';
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (hoveredColumn !== null) {
|
// Helper function to get selected domain from dropdown
|
||||||
const cells = matrixTable.querySelectorAll(`th:nth-child(${hoveredColumn + 1}), td:nth-child(${hoveredColumn + 1})`);
|
function getSelectedDomain() {
|
||||||
cells.forEach(cell => cell.classList.add('highlight-column'));
|
const domainSelect = document.getElementById('domain-select');
|
||||||
}
|
return domainSelect ? domainSelect.value : '';
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add hover listeners to matrix table
|
// Update matrix highlighting based on current filters
|
||||||
matrixTable.addEventListener('mouseover', (e) => {
|
function updateMatrixHighlighting() {
|
||||||
const target = e.target.closest('tr');
|
const matrixTable = document.querySelector('.matrix-table');
|
||||||
if (target) {
|
if (!matrixTable) return;
|
||||||
const rows = Array.from(matrixTable.querySelectorAll('tr'));
|
|
||||||
hoveredRow = rows.indexOf(target);
|
// Clear existing highlights
|
||||||
updateMatrixHighlight();
|
matrixTable.querySelectorAll('.highlight-row, .highlight-column').forEach(el => {
|
||||||
}
|
el.classList.remove('highlight-row', 'highlight-column');
|
||||||
});
|
});
|
||||||
|
|
||||||
matrixTable.addEventListener('mouseout', (e) => {
|
const selectedDomain = getSelectedDomain();
|
||||||
if (!e.relatedTarget || !matrixTable.contains(e.relatedTarget)) {
|
const selectedPhase = getSelectedPhase();
|
||||||
hoveredRow = null;
|
|
||||||
updateMatrixHighlight();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Add hover listeners to header cells
|
// Highlight selected domain row
|
||||||
matrixTable.addEventListener('mouseover', (e) => {
|
if (selectedDomain) {
|
||||||
if (e.target.matches('th[data-phase]')) {
|
const domainRow = matrixTable.querySelector(`tr[data-domain="${selectedDomain}"]`);
|
||||||
const headers = Array.from(matrixTable.querySelectorAll('thead th'));
|
if (domainRow) {
|
||||||
hoveredColumn = headers.indexOf(e.target);
|
domainRow.classList.add('highlight-row');
|
||||||
updateMatrixHighlight();
|
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
|
||||||
matrixTable.addEventListener('mouseout', (e) => {
|
|
||||||
if (e.target.matches('th[data-phase]') && (!e.relatedTarget || !matrixTable.contains(e.relatedTarget))) {
|
|
||||||
hoveredColumn = null;
|
|
||||||
updateMatrixHighlight();
|
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
|
||||||
// Function to update matrix display based on filtered tools
|
// Highlight selected phase column
|
||||||
function updateMatrixDisplay(filteredTools) {
|
if (selectedPhase) {
|
||||||
// Separate collaboration tools from matrix tools
|
const phaseHeaders = matrixTable.querySelectorAll('thead th[data-phase]');
|
||||||
const filteredCollaborationTools = filteredTools.filter(tool =>
|
const phaseIndex = Array.from(phaseHeaders).findIndex(th =>
|
||||||
tool.phases && tool.phases.includes('collaboration-general')
|
th.getAttribute('data-phase') === selectedPhase
|
||||||
);
|
);
|
||||||
|
|
||||||
const filteredMatrixTools = filteredTools.filter(tool => {
|
if (phaseIndex >= 0) {
|
||||||
if (!tool.phases || tool.phases.length === 0) return false;
|
const columnIndex = phaseIndex + 1; // +1 because first column is domain names
|
||||||
const hasRegularPhases = tool.phases.some(phase => phase !== 'collaboration-general');
|
matrixTable.querySelectorAll(`tr`).forEach(row => {
|
||||||
const hasDomains = tool.domains && tool.domains.length > 0;
|
const cell = row.children[columnIndex];
|
||||||
return hasRegularPhases && hasDomains;
|
if (cell) {
|
||||||
|
cell.classList.add('highlight-column');
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Update collaboration tools section visibility
|
// Helper function to create compact collaboration tool cards for matrix view
|
||||||
if (filteredCollaborationTools.length === 0) {
|
function createCollaborationToolCardCompact(tool) {
|
||||||
collaborationSection.style.display = 'none';
|
|
||||||
} else {
|
|
||||||
collaborationSection.style.display = 'block';
|
|
||||||
|
|
||||||
// Update collaboration tools display
|
|
||||||
const collaborationContainer = collaborationSection.querySelector('.collaboration-tools-compact');
|
|
||||||
if (collaborationContainer) {
|
|
||||||
collaborationContainer.innerHTML = '';
|
|
||||||
|
|
||||||
filteredCollaborationTools.forEach(tool => {
|
|
||||||
const hasValidProjectUrl = tool.projectUrl !== undefined &&
|
const hasValidProjectUrl = tool.projectUrl !== undefined &&
|
||||||
tool.projectUrl !== null &&
|
tool.projectUrl !== null &&
|
||||||
tool.projectUrl !== "" &&
|
tool.projectUrl !== "" &&
|
||||||
tool.projectUrl.trim() !== "";
|
tool.projectUrl.trim() !== "";
|
||||||
|
|
||||||
const toolDiv = document.createElement('div');
|
const cardDiv = document.createElement('div');
|
||||||
toolDiv.className = `collaboration-tool-compact ${hasValidProjectUrl ? 'hosted' : (tool.license !== 'Proprietary' ? 'oss' : '')}`;
|
const cardClass = `collaboration-tool-compact ${hasValidProjectUrl ? 'hosted' : tool.license !== 'Proprietary' ? 'oss' : ''}`;
|
||||||
toolDiv.onclick = () => window.showToolDetails(tool.name);
|
cardDiv.className = cardClass;
|
||||||
|
cardDiv.onclick = () => window.showToolDetails(tool.name);
|
||||||
|
|
||||||
toolDiv.innerHTML = `
|
cardDiv.innerHTML = `
|
||||||
<div class="tool-compact-header">
|
<div class="tool-compact-header">
|
||||||
<h4 style="margin: 0; font-size: 1rem;">${tool.name}</h4>
|
<h4 style="margin: 0; font-size: 0.875rem; font-weight: 600;">${tool.name}</h4>
|
||||||
<div style="display: flex; gap: 0.25rem;">
|
<div style="display: flex; gap: 0.25rem;">
|
||||||
${hasValidProjectUrl ? '<span class="badge-mini badge-primary">Self-Hosted</span>' : ''}
|
${hasValidProjectUrl ? '<span class="badge-mini badge-primary">Self-Hosted</span>' : ''}
|
||||||
${tool.license !== 'Proprietary' ? '<span class="badge-mini badge-success">OSS</span>' : ''}
|
${tool.license !== 'Proprietary' ? '<span class="badge-mini badge-success">OSS</span>' : ''}
|
||||||
|
${tool.knowledgebase === true ? '<span class="badge-mini badge-error">Infos 📖</span>' : ''}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p style="font-size: 0.8125rem; color: var(--color-text-secondary); margin-bottom: 0.75rem; line-height: 1.4;">
|
<p style="font-size: 0.75rem; color: var(--color-text-secondary); margin: 0.25rem 0; line-height: 1.3;">
|
||||||
${tool.description.length > 120 ? `${tool.description.substring(0, 120)}...` : tool.description}
|
${tool.description}
|
||||||
</p>
|
</p>
|
||||||
<div style="display: flex; flex-wrap: wrap; gap: 0.25rem;">
|
<div style="display: flex; gap: 0.75rem; font-size: 0.6875rem; color: var(--color-text-secondary);">
|
||||||
${tool.tags ? tool.tags.slice(0, 3).map(tag => `<span class="tag" style="font-size: 0.625rem;">${tag}</span>`).join('') : ''}
|
<span>${(tool.platforms || []).join(', ')}</span>
|
||||||
${tool.tags && tool.tags.length > 3 ? `<span class="tag" style="font-size: 0.625rem; font-style: italic;">+${tool.tags.length - 3}</span>` : ''}
|
<span>•</span>
|
||||||
|
<span>${tool.skillLevel}</span>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
collaborationContainer.appendChild(toolDiv);
|
return cardDiv;
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Update matrix cells
|
// Tool details functions
|
||||||
domains.forEach(domain => {
|
window.showToolDetails = function(toolName) {
|
||||||
phases.forEach(phase => {
|
const tool = toolsData.find(t => t.name === toolName);
|
||||||
const cell = matrixTable.querySelector(`td[data-domain="${domain.id}"][data-phase="${phase.id}"]`);
|
if (!tool) return;
|
||||||
if (!cell) return;
|
|
||||||
|
|
||||||
const cellTools = filteredMatrixTools.filter(tool => {
|
// Update modal content
|
||||||
const hasPhase = tool.phases && tool.phases.includes(phase.id);
|
document.getElementById('tool-name').textContent = tool.name;
|
||||||
const hasDomain = tool.domains && tool.domains.includes(domain.id);
|
document.getElementById('tool-description').textContent = tool.description;
|
||||||
return hasPhase && hasDomain;
|
|
||||||
});
|
|
||||||
|
|
||||||
const cellContent = cell.querySelector('div') || cell;
|
// Badges
|
||||||
cellContent.innerHTML = '';
|
const badgesContainer = document.getElementById('tool-badges');
|
||||||
|
|
||||||
cellTools.forEach(tool => {
|
|
||||||
const hasValidProjectUrl = tool.projectUrl !== undefined &&
|
const hasValidProjectUrl = tool.projectUrl !== undefined &&
|
||||||
tool.projectUrl !== null &&
|
tool.projectUrl !== null &&
|
||||||
tool.projectUrl !== "" &&
|
tool.projectUrl !== "" &&
|
||||||
tool.projectUrl.trim() !== "";
|
tool.projectUrl.trim() !== "";
|
||||||
|
|
||||||
const chip = document.createElement('span');
|
badgesContainer.innerHTML = '';
|
||||||
chip.className = `tool-chip ${hasValidProjectUrl ? 'tool-chip-hosted' : (tool.license !== 'Proprietary' ? 'tool-chip-oss' : '')}`;
|
if (hasValidProjectUrl) {
|
||||||
chip.onclick = () => window.showToolDetails(tool.name);
|
badgesContainer.innerHTML += '<span class="badge badge-primary">Self-Hosted</span>';
|
||||||
chip.title = tool.description;
|
}
|
||||||
chip.textContent = tool.name;
|
if (tool.license !== 'Proprietary') {
|
||||||
|
badgesContainer.innerHTML += '<span class="badge badge-success">Open Source</span>';
|
||||||
cellContent.appendChild(chip);
|
}
|
||||||
});
|
if (tool.knowledgebase === true) {
|
||||||
});
|
badgesContainer.innerHTML += '<span class="badge badge-error">Infos 📖</span>';
|
||||||
});
|
|
||||||
|
|
||||||
// Update statistics
|
|
||||||
const matrixTotalEl = document.getElementById('matrix-total-tools');
|
|
||||||
const collaborationTotalEl = document.getElementById('collaboration-total-tools');
|
|
||||||
const visibleTotalEl = document.getElementById('matrix-visible-tools');
|
|
||||||
|
|
||||||
if (matrixTotalEl) matrixTotalEl.textContent = filteredMatrixTools.length;
|
|
||||||
if (collaborationTotalEl) collaborationTotalEl.textContent = filteredCollaborationTools.length;
|
|
||||||
if (visibleTotalEl) visibleTotalEl.textContent = (filteredMatrixTools.length + filteredCollaborationTools.length);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Listen for filter events
|
// Metadata - safe array handling
|
||||||
window.addEventListener('toolsFiltered', (event) => {
|
const metadataContainer = document.getElementById('tool-metadata');
|
||||||
const filteredTools = event.detail;
|
const domains = tool.domains || [];
|
||||||
updateMatrixDisplay(filteredTools);
|
const phases = tool.phases || [];
|
||||||
|
const domainsText = domains.length > 0 ? domains.join(', ') : 'Domain-agnostic';
|
||||||
|
const phasesText = phases.join(', ');
|
||||||
|
metadataContainer.innerHTML = `
|
||||||
|
<div style="display: grid; gap: 0.5rem;">
|
||||||
|
<div><strong>Betriebssystem:</strong> ${(tool.platforms || []).join(', ')}</div>
|
||||||
|
<div><strong>Skill Level:</strong> ${tool.skillLevel}</div>
|
||||||
|
<div><strong>Lizenzmodell:</strong> ${tool.license}</div>
|
||||||
|
<div><strong>Deployment:</strong> ${tool.accessType}</div>
|
||||||
|
<div><strong>Einsatzgebiete:</strong> ${domainsText}</div>
|
||||||
|
<div><strong>Ermittlungsphasen:</strong> ${phasesText}</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
// Tags - safe array handling
|
||||||
|
const tagsContainer = document.getElementById('tool-tags');
|
||||||
|
const tags = tool.tags || [];
|
||||||
|
tagsContainer.innerHTML = `
|
||||||
|
<div style="display: flex; flex-wrap: wrap; gap: 0.25rem;">
|
||||||
|
${tags.map(tag => `<span class="tag">${tag}</span>`).join('')}
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
// Links - Updated to handle dual buttons for hosted tools AND knowledgebase links
|
||||||
|
const linksContainer = document.getElementById('tool-links');
|
||||||
|
|
||||||
|
let linksHTML = '';
|
||||||
|
|
||||||
|
// Main action buttons
|
||||||
|
if (hasValidProjectUrl) {
|
||||||
|
// Two buttons for tools we're hosting
|
||||||
|
linksHTML += `
|
||||||
|
<div style="display: flex; gap: 0.5rem;">
|
||||||
|
<a href="${tool.url}" target="_blank" rel="noopener noreferrer" class="btn btn-secondary" style="flex: 1;">
|
||||||
|
Software-Homepage
|
||||||
|
</a>
|
||||||
|
<a href="${tool.projectUrl}" target="_blank" rel="noopener noreferrer" class="btn btn-primary" style="flex: 1;">
|
||||||
|
Zugreifen
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
} else {
|
||||||
|
// Single button for tools we're not hosting
|
||||||
|
linksHTML += `
|
||||||
|
<a href="${tool.url}" target="_blank" rel="noopener noreferrer" class="btn btn-primary" style="width: 100%;">
|
||||||
|
Software-Homepage
|
||||||
|
</a>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add knowledgebase link if available
|
||||||
|
if (tool.knowledgebase === true) {
|
||||||
|
const kbId = tool.name.toLowerCase().replace(/\s+/g, '-');
|
||||||
|
linksHTML += `
|
||||||
|
<a href="/knowledgebase#kb-${kbId}" class="btn btn-secondary" style="width: 100%; margin-top: 0.5rem;">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem;">
|
||||||
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
|
||||||
|
<polyline points="14 2 14 8 20 8"/>
|
||||||
|
<line x1="16" y1="13" x2="8" y2="13"/>
|
||||||
|
<line x1="16" y1="17" x2="8" y2="17"/>
|
||||||
|
<polyline points="10 9 9 9 8 9"/>
|
||||||
|
</svg>
|
||||||
|
Knowledgebase anzeigen
|
||||||
|
</a>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
linksContainer.innerHTML = linksHTML;
|
||||||
|
|
||||||
|
// Show modal
|
||||||
|
document.getElementById('modal-overlay').classList.add('active');
|
||||||
|
document.getElementById('tool-details').classList.add('active');
|
||||||
|
};
|
||||||
|
|
||||||
|
window.hideToolDetails = function() {
|
||||||
|
document.getElementById('modal-overlay').classList.remove('active');
|
||||||
|
document.getElementById('tool-details').classList.remove('active');
|
||||||
|
};
|
||||||
|
|
||||||
|
// Listen for view changes to trigger highlighting
|
||||||
|
window.addEventListener('viewChanged', (event) => {
|
||||||
|
const view = event.detail;
|
||||||
|
if (view === 'matrix') {
|
||||||
|
// Delay highlighting to ensure matrix is visible
|
||||||
|
setTimeout(updateMatrixHighlighting, 100);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Initial display
|
// Listen for filter changes to update highlighting
|
||||||
updateMatrixDisplay([...allMatrixTools, ...collaborationTools]);
|
window.addEventListener('toolsFiltered', (event) => {
|
||||||
});
|
const currentView = document.querySelector('.view-toggle.active')?.getAttribute('data-view');
|
||||||
|
if (currentView === 'matrix') {
|
||||||
|
setTimeout(updateMatrixHighlighting, 50);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Update matrix on filter change
|
||||||
|
window.addEventListener('toolsFiltered', (event) => {
|
||||||
|
const filtered = event.detail;
|
||||||
|
const currentView = document.querySelector('.view-toggle.active')?.getAttribute('data-view');
|
||||||
|
|
||||||
|
if (currentView === 'matrix') {
|
||||||
|
// Get selected phase from active button instead of dropdown
|
||||||
|
const selectedPhase = getSelectedPhase();
|
||||||
|
|
||||||
|
// Handle collaboration tools section
|
||||||
|
const collaborationSection = document.getElementById('collaboration-tools-section');
|
||||||
|
const dfirMatrixSection = document.getElementById('dfir-matrix-section');
|
||||||
|
const collaborationContainer = document.getElementById('collaboration-tools-container');
|
||||||
|
|
||||||
|
if (selectedPhase === 'collaboration-general') {
|
||||||
|
// Show only collaboration tools, hide matrix
|
||||||
|
collaborationSection.style.display = 'block';
|
||||||
|
dfirMatrixSection.style.display = 'none';
|
||||||
|
|
||||||
|
// Filter collaboration tools
|
||||||
|
const filteredCollaboration = filtered.filter(tool => (tool.phases || []).includes('collaboration-general'));
|
||||||
|
collaborationContainer.innerHTML = '';
|
||||||
|
|
||||||
|
filteredCollaboration.forEach(tool => {
|
||||||
|
const toolCard = createCollaborationToolCardCompact(tool);
|
||||||
|
collaborationContainer.appendChild(toolCard);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// Show matrix, handle collaboration tools visibility
|
||||||
|
dfirMatrixSection.style.display = 'block';
|
||||||
|
|
||||||
|
if (selectedPhase === '' || selectedPhase === null) {
|
||||||
|
// Show collaboration tools when no specific phase is selected
|
||||||
|
collaborationSection.style.display = 'block';
|
||||||
|
|
||||||
|
// Show all collaboration tools that pass general filters
|
||||||
|
const filteredCollaboration = filtered.filter(tool => (tool.phases || []).includes('collaboration-general'));
|
||||||
|
collaborationContainer.innerHTML = '';
|
||||||
|
|
||||||
|
filteredCollaboration.forEach(tool => {
|
||||||
|
const toolCard = createCollaborationToolCardCompact(tool);
|
||||||
|
collaborationContainer.appendChild(toolCard);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// Hide collaboration tools when specific DFIR phase is selected
|
||||||
|
collaborationSection.style.display = 'none';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Clear and update matrix cells with DFIR tools only
|
||||||
|
document.querySelectorAll('.matrix-cell').forEach(cell => {
|
||||||
|
cell.innerHTML = '';
|
||||||
|
});
|
||||||
|
|
||||||
|
// Re-populate with filtered DFIR tools - with safe array handling
|
||||||
|
const filteredDfirTools = filtered.filter(tool => !(tool.phases || []).includes('collaboration-general'));
|
||||||
|
filteredDfirTools.forEach(tool => {
|
||||||
|
const hasValidProjectUrl = tool.projectUrl !== undefined &&
|
||||||
|
tool.projectUrl !== null &&
|
||||||
|
tool.projectUrl !== "" &&
|
||||||
|
tool.projectUrl.trim() !== "";
|
||||||
|
|
||||||
|
const domains = tool.domains || [];
|
||||||
|
const phases = tool.phases || [];
|
||||||
|
|
||||||
|
domains.forEach(domain => {
|
||||||
|
phases.forEach(phase => {
|
||||||
|
if (phase !== 'collaboration-general') {
|
||||||
|
const cell = document.querySelector(`[data-domain="${domain}"][data-phase="${phase}"]`);
|
||||||
|
if (cell) {
|
||||||
|
const chip = document.createElement('span');
|
||||||
|
chip.className = `tool-chip ${hasValidProjectUrl ? 'tool-chip-hosted' : tool.license !== 'Proprietary' ? 'tool-chip-oss' : ''}`;
|
||||||
|
chip.setAttribute('title', `${tool.name}${tool.knowledgebase === true ? ' (KB verfügbar)' : ''}`);
|
||||||
|
chip.innerHTML = `${tool.name}${tool.knowledgebase === true ? '<span style="margin-left: 0.25rem; font-size: 0.6875rem;">📖</span>' : ''}`;
|
||||||
|
chip.onclick = () => window.showToolDetails(tool.name);
|
||||||
|
cell.appendChild(chip);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Update highlighting after matrix content is updated
|
||||||
|
setTimeout(updateMatrixHighlighting, 50);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
@ -78,7 +78,7 @@ const tools = data.tools;
|
|||||||
|
|
||||||
<!-- Tools Grid -->
|
<!-- Tools Grid -->
|
||||||
<section id="tools-grid" style="padding-bottom: 2rem;">
|
<section id="tools-grid" style="padding-bottom: 2rem;">
|
||||||
<div class="grid grid-cols-3 gap-4" id="tools-container">
|
<div class="grid-auto-fit" id="tools-container">
|
||||||
{tools.map((tool: any) => (
|
{tools.map((tool: any) => (
|
||||||
<ToolCard tool={tool} />
|
<ToolCard tool={tool} />
|
||||||
))}
|
))}
|
||||||
@ -352,16 +352,16 @@ function createToolCard(tool) {
|
|||||||
cardDiv.style.cursor = 'pointer';
|
cardDiv.style.cursor = 'pointer';
|
||||||
cardDiv.onclick = () => (window as any).showToolDetails(tool.name);
|
cardDiv.onclick = () => (window as any).showToolDetails(tool.name);
|
||||||
|
|
||||||
// Create button HTML based on hosting status
|
// Create responsive button HTML
|
||||||
let buttonHTML;
|
let buttonHTML;
|
||||||
if (hasValidProjectUrl) {
|
if (hasValidProjectUrl) {
|
||||||
// Two buttons for tools we're hosting
|
// Two buttons for tools we're hosting - responsive layout
|
||||||
buttonHTML = `
|
buttonHTML = `
|
||||||
<div style="display: flex; gap: 0.5rem;" onclick="event.stopPropagation();">
|
<div class="button-container" style="display: flex; gap: 0.5rem;" onclick="event.stopPropagation();">
|
||||||
<a href="${tool.url}" target="_blank" rel="noopener noreferrer" class="btn btn-secondary" style="flex: 1;">
|
<a href="${tool.url}" target="_blank" rel="noopener noreferrer" class="btn btn-secondary" style="flex: 1; text-align: center;">
|
||||||
Software-Homepage
|
Software-Homepage
|
||||||
</a>
|
</a>
|
||||||
<a href="${tool.projectUrl}" target="_blank" rel="noopener noreferrer" class="btn btn-primary" style="flex: 1;">
|
<a href="${tool.projectUrl}" target="_blank" rel="noopener noreferrer" class="btn btn-primary" style="flex: 1; text-align: center;">
|
||||||
Zugreifen
|
Zugreifen
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
@ -369,28 +369,28 @@ function createToolCard(tool) {
|
|||||||
} else {
|
} else {
|
||||||
// Single button for tools we're not hosting
|
// Single button for tools we're not hosting
|
||||||
buttonHTML = `
|
buttonHTML = `
|
||||||
<a href="${tool.url}" target="_blank" rel="noopener noreferrer" class="btn btn-primary" style="width: 100%;" onclick="event.stopPropagation();">
|
<a href="${tool.url}" target="_blank" rel="noopener noreferrer" class="btn btn-primary" style="width: 100%; text-align: center;" onclick="event.stopPropagation();">
|
||||||
Software-Homepage
|
Software-Homepage
|
||||||
</a>
|
</a>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
cardDiv.innerHTML = `
|
cardDiv.innerHTML = `
|
||||||
<div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 0.75rem;">
|
<div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 0.75rem; flex-wrap: wrap; gap: 0.5rem;">
|
||||||
<h3 style="margin: 0;">${tool.name}</h3>
|
<h3 style="margin: 0; flex: 1; min-width: 0;">${tool.name}</h3>
|
||||||
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
|
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap; flex-shrink: 0;">
|
||||||
${hasValidProjectUrl ? '<span class="badge badge-primary">Self-Hosted</span>' : ''}
|
${hasValidProjectUrl ? '<span class="badge badge-primary">Self-Hosted</span>' : ''}
|
||||||
${tool.license !== 'Proprietary' ? '<span class="badge badge-success">Open Source</span>' : ''}
|
${tool.license !== 'Proprietary' ? '<span class="badge badge-success">Open Source</span>' : ''}
|
||||||
${hasKnowledgebase ? '<span class="badge badge-error">Infos 📖</span>' : ''}
|
${hasKnowledgebase ? '<span class="badge badge-error">Infos 📖</span>' : ''}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p class="text-muted" style="font-size: 0.875rem; margin-bottom: 1rem;">
|
<p class="text-muted" style="font-size: 0.875rem; margin-bottom: 1rem; line-height: 1.5;">
|
||||||
${tool.description}
|
${tool.description}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem;">
|
<div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem;">
|
||||||
<div style="display: flex; align-items: center; gap: 0.25rem;">
|
<div style="display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap;">
|
||||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
|
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
|
||||||
<line x1="9" y1="9" x2="15" y2="9"></line>
|
<line x1="9" y1="9" x2="15" y2="9"></line>
|
||||||
@ -401,7 +401,7 @@ function createToolCard(tool) {
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="display: flex; align-items: center; gap: 0.25rem;">
|
<div style="display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap;">
|
||||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
<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>
|
<circle cx="12" cy="12" r="10"></circle>
|
||||||
<path d="M12 6v6l4 2"></path>
|
<path d="M12 6v6l4 2"></path>
|
||||||
@ -411,7 +411,7 @@ function createToolCard(tool) {
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="display: flex; align-items: center; gap: 0.25rem;">
|
<div style="display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap;">
|
||||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
|
||||||
<polyline points="14 2 14 8 20 8"></polyline>
|
<polyline points="14 2 14 8 20 8"></polyline>
|
||||||
|
|||||||
@ -136,6 +136,8 @@ nav {
|
|||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
|
width: 100%;
|
||||||
|
overflow-x: hidden; /* Prevent horizontal overflow */
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-wrapper {
|
.nav-wrapper {
|
||||||
@ -143,12 +145,18 @@ nav {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 1rem 0;
|
padding: 1rem 0;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1280px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-brand {
|
.nav-brand {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
|
flex-shrink: 0; /* Prevent brand from shrinking */
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-logo {
|
.nav-logo {
|
||||||
@ -159,15 +167,20 @@ nav {
|
|||||||
.nav-links {
|
.nav-links {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 5rem;
|
gap: 2rem; /* Reduced from 5rem */
|
||||||
list-style: none;
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
flex-wrap: wrap; /* Allow wrapping on very small screens */
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-link {
|
.nav-link {
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
transition: color 0.2s ease;
|
transition: color 0.2s ease;
|
||||||
font-size: 1.2rem;
|
font-size: 1rem; /* Reduced from 1.2rem */
|
||||||
|
white-space: nowrap; /* Prevent text wrapping */
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-link:hover {
|
.nav-link:hover {
|
||||||
@ -296,11 +309,20 @@ input[type="checkbox"] {
|
|||||||
box-shadow: 0 0 0 1px var(--color-hosted);
|
box-shadow: 0 0 0 1px var(--color-hosted);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Adjust gradient for different card types */
|
||||||
|
.card-hosted .tool-tags-container::after {
|
||||||
|
background: linear-gradient(to bottom, transparent 0%, var(--color-hosted-bg) 80%);
|
||||||
|
}
|
||||||
|
|
||||||
.card-oss {
|
.card-oss {
|
||||||
background-color: var(--color-oss-bg);
|
background-color: var(--color-oss-bg);
|
||||||
border-color: var(--color-oss);
|
border-color: var(--color-oss);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card-oss .tool-tags-container::after {
|
||||||
|
background: linear-gradient(to bottom, transparent 0%, var(--color-oss-bg) 80%);
|
||||||
|
}
|
||||||
|
|
||||||
/* Grid and Layout */
|
/* Grid and Layout */
|
||||||
.grid {
|
.grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
@ -323,6 +345,19 @@ input[type="checkbox"] {
|
|||||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* NEW: Auto-responsive grid classes */
|
||||||
|
.grid-auto-fit {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-auto-fit-small {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
/* Tool Matrix */
|
/* Tool Matrix */
|
||||||
.matrix-wrapper {
|
.matrix-wrapper {
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
@ -421,6 +456,37 @@ input[type="checkbox"] {
|
|||||||
box-shadow: inset 0 0 0 1px rgb(59 130 246 / 40%);
|
box-shadow: inset 0 0 0 1px rgb(59 130 246 / 40%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Tool Card Description Truncation - 4 lines max */
|
||||||
|
.tool-card .text-muted {
|
||||||
|
display: -webkit-box !important;
|
||||||
|
-webkit-line-clamp: 4;
|
||||||
|
line-clamp: 4;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden !important;
|
||||||
|
line-height: 1.4;
|
||||||
|
max-height: calc(1.4em * 4);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tool Card Tags Truncation - 3 lines max (uses height approach since we need flex) */
|
||||||
|
.tool-card .tool-tags-container {
|
||||||
|
max-height: calc(1.5em * 3 + 0.5rem) !important; /* 3 lines + gap space */
|
||||||
|
overflow: hidden !important;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Add subtle fade for truncated tags */
|
||||||
|
.tool-card .tool-tags-container::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 1.2em;
|
||||||
|
background: linear-gradient(to bottom, transparent 0%, var(--color-bg) 80%);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.tool-chip {
|
.tool-chip {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0.25rem 0.5rem;
|
padding: 0.25rem 0.5rem;
|
||||||
@ -1007,23 +1073,43 @@ footer {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Responsive Design */
|
/* Responsive Design */
|
||||||
@media (width: 768px) {
|
@media (width <= 1200px) {
|
||||||
|
.grid-cols-4 {
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (width <= 900px) {
|
||||||
|
.grid-cols-3,
|
||||||
|
.grid-cols-4 {
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (width <= 768px) {
|
||||||
.grid-cols-2 {
|
.grid-cols-2 {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
.grid-cols-3 {
|
.grid-cols-3 {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
.grid-cols-4 {
|
.grid-cols-4 {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.nav-wrapper {
|
||||||
|
padding-left: 0.75rem;
|
||||||
|
padding-right: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
.nav-links {
|
.nav-links {
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.nav-link {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
}
|
}
|
||||||
@ -1143,13 +1229,21 @@ footer {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (width: 600px) {
|
|
||||||
.phase-tools {
|
|
||||||
grid-template-columns: 1fr !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (width: 640px) {
|
|
||||||
|
@media (width <= 640px) {
|
||||||
|
.grid-cols-2,
|
||||||
|
.grid-cols-3,
|
||||||
|
.grid-cols-4 {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid,
|
||||||
|
.grid-auto-fit,
|
||||||
|
.grid-auto-fit-small {
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
.phase-buttons {
|
.phase-buttons {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
@ -1167,9 +1261,35 @@ footer {
|
|||||||
.tag-cloud.expanded {
|
.tag-cloud.expanded {
|
||||||
max-height: 800px;
|
max-height: 800px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.nav-wrapper {
|
||||||
|
padding-left: 0.5rem;
|
||||||
|
padding-right: 0.5rem;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
padding-top: 0.75rem;
|
||||||
|
padding-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links {
|
||||||
|
gap: 0.75rem;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link {
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
padding: 0.25rem 0.5rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (width: 480px) {
|
@media (width <= 600px) {
|
||||||
|
.phase-tools {
|
||||||
|
grid-template-columns: 1fr !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (width <= 480px) {
|
||||||
.phase-buttons {
|
.phase-buttons {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 0.375rem;
|
gap: 0.375rem;
|
||||||
@ -1199,6 +1319,31 @@ footer {
|
|||||||
.phase-tools {
|
.phase-tools {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.nav-wrapper {
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links {
|
||||||
|
gap: 0.5rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
padding: 0.25rem 0.375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-brand h1 {
|
||||||
|
font-size: 1.25rem; /* Smaller brand text on very small screens */
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid,
|
||||||
|
.grid-auto-fit,
|
||||||
|
.grid-auto-fit-small {
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* AI Interface Container */
|
/* AI Interface Container */
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user