fix visual inconsistency

This commit is contained in:
overcuriousity 2025-07-19 22:25:43 +02:00
parent c280640dc1
commit 8cccb0f4a9
7 changed files with 57 additions and 25 deletions

View File

@ -458,7 +458,7 @@ document.addEventListener('DOMContentLoaded', () => {
};
return `
<div class="tool-recommendation ${hasValidProjectUrl ? 'hosted' : (tool.license !== 'Proprietary' ? 'oss' : '')}"
<div class="tool-recommendation ${tool.type === 'method' ? 'method' : hasValidProjectUrl ? 'hosted' : (tool.license !== 'Proprietary' ? 'oss' : '')}"
onclick="window.showToolDetails('${tool.name}')">
<div class="tool-rec-header">
<h4 class="tool-rec-name">${tool.name}</h4>
@ -474,12 +474,13 @@ document.addEventListener('DOMContentLoaded', () => {
<div class="tool-rec-metadata">
<div style="display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.5rem;">
${hasValidProjectUrl ? '<span class="badge badge-primary">CC24-Server</span>' : ''}
${tool.license !== 'Proprietary' ? '<span class="badge badge-success">Open Source</span>' : ''}
${tool.type === 'method' ? '<span class="badge" style="background-color: var(--color-method); color: white;">Methode</span>' : ''}
${tool.type !== 'method' && hasValidProjectUrl ? '<span class="badge badge-primary">CC24-Server</span>' : ''}
${tool.type !== 'method' && tool.license !== 'Proprietary' ? '<span class="badge badge-success">Open Source</span>' : ''}
<span class="badge" style="background-color: var(--color-bg-tertiary); color: var(--color-text);">${tool.skillLevel}</span>
</div>
<div style="font-size: 0.8125rem; color: var(--color-text-secondary);">
${tool.platforms.join(', ')} • ${tool.license}
${tool.type === 'method' ? 'Methode' : tool.platforms.join(', ') + ' • ' + tool.license}
</div>
</div>
</div>
@ -603,7 +604,7 @@ document.addEventListener('DOMContentLoaded', () => {
fullTool.projectUrl !== null &&
fullTool.projectUrl !== "" &&
fullTool.projectUrl.trim() !== "";
const isMethod = fullTool.type === 'method';
const suitabilityColors = {
high: 'var(--color-accent)',
medium: 'var(--color-warning)',
@ -617,7 +618,7 @@ document.addEventListener('DOMContentLoaded', () => {
};
return `
<div class="tool-detailed-recommendation card ${hasValidProjectUrl ? 'card-hosted' : (fullTool.license !== 'Proprietary' ? 'card-oss' : '')}"
<div class="tool-detailed-recommendation card ${isMethod ? 'card-method' : hasValidProjectUrl ? 'card-hosted' : (fullTool.license !== 'Proprietary' ? 'card-oss' : '')}"
style="cursor: pointer; position: relative;"
onclick="window.showToolDetails('${fullTool.name}')">
@ -631,8 +632,9 @@ document.addEventListener('DOMContentLoaded', () => {
<span class="badge" style="background-color: ${suitabilityColors[toolRec.suitability_score]}; color: white; font-size: 0.8125rem;">
${getSuitabilityText(toolRec.suitability_score)}
</span>
${hasValidProjectUrl ? '<span class="badge badge-primary">CC24-Server</span>' : ''}
${fullTool.license !== 'Proprietary' ? '<span class="badge badge-success">Open Source</span>' : ''}
${isMethod ? '<span class="badge" style="background-color: var(--color-method); color: white;">Methode</span>' : ''}
${!isMethod && hasValidProjectUrl ? '<span class="badge badge-primary">CC24-Server</span>' : ''}
${!isMethod && fullTool.license !== 'Proprietary' ? '<span class="badge badge-success">Open Source</span>' : ''}
${fullTool.knowledgebase === true ? '<span class="badge badge-error">📖</span>' : ''}
</div>
</div>
@ -706,10 +708,10 @@ document.addEventListener('DOMContentLoaded', () => {
` : ''}
<div class="tool-metadata" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; font-size: 0.8125rem; color: var(--color-text-secondary); margin-bottom: 1rem;">
<div><strong>Plattformen:</strong> ${fullTool.platforms.join(', ')}</div>
${!isMethod ? '<div><strong>Plattformen:</strong> ' + fullTool.platforms.join(', ') + '</div>' : ''}
<div><strong>Skill Level:</strong> ${fullTool.skillLevel}</div>
<div><strong>Lizenz:</strong> ${fullTool.license}</div>
<div><strong>Typ:</strong> ${fullTool.accessType}</div>
${!isMethod ? '<div><strong>Lizenz:</strong> ' + fullTool.license + '</div>' : ''}
<div><strong>Typ:</strong> ${isMethod ? 'Methode' : fullTool.accessType}</div>
</div>
${toolRec.alternatives ? `

View File

@ -44,7 +44,7 @@ const cardClass = isMethod ? 'card card-method tool-card' :
<h3>{tool.name}</h3>
<div class="tool-card-badges">
{isMethod && <span class="badge" style="background-color: var(--color-method); color: white;">Methode</span>}
{!isMethod && hasValidProjectUrl && <span class="badge badge-primary">Self-Hosted</span>}
{!isMethod && hasValidProjectUrl && <span class="badge badge-primary">CC24-Server</span>}
{!isMethod && tool.license !== 'Proprietary' && <span class="badge badge-success">OSS</span>}
{hasKnowledgebase && <span class="badge badge-error">📖</span>}
</div>

View File

@ -246,6 +246,8 @@ domains.forEach((domain: any) => {
const tool = toolsData.find(t => t.name === toolName);
if (!tool) return;
const isMethod = tool.type === 'method';
// Update modal content
document.getElementById('tool-name').textContent = tool.name;
document.getElementById('tool-description').textContent = tool.description;
@ -258,12 +260,16 @@ domains.forEach((domain: any) => {
tool.projectUrl.trim() !== "";
badgesContainer.innerHTML = '';
if (isMethod) {
badgesContainer.innerHTML += '<span class="badge" style="background-color: var(--color-method); color: white;">Methode</span>';
} else {
if (hasValidProjectUrl) {
badgesContainer.innerHTML += '<span class="badge badge-primary">CC24-Server</span>';
}
if (tool.license !== 'Proprietary') {
badgesContainer.innerHTML += '<span class="badge badge-success">Open Source</span>';
}
}
if (tool.knowledgebase === true) {
badgesContainer.innerHTML += '<span class="badge badge-error">Infos 📖</span>';
}
@ -299,7 +305,14 @@ domains.forEach((domain: any) => {
let linksHTML = '';
if (hasValidProjectUrl) {
if (isMethod) {
// For methods, show link to the method description/documentation
linksHTML += `
<a href="${tool.projectUrl || tool.url}" target="_blank" rel="noopener noreferrer" class="btn btn-primary" style="width: 100%; background-color: var(--color-method); border-color: var(--color-method);">
Zur Methode
</a>
`;
} else if (hasValidProjectUrl) {
linksHTML += `
<div style="display: flex; gap: 0.5rem;">
<a href="${tool.url}" target="_blank" rel="noopener noreferrer" class="btn btn-secondary" style="flex: 1;">

View File

@ -905,7 +905,7 @@ tools:
integrierter Hash-Verifizierung für die Beweiskette. Die kostenlose
Version reicht für die meisten Aufgaben, unterstützt alle gängigen
Image-Formate. Etwas angestaubt in der Oberfläche, aber bewährt in
tausenden Gerichtsverfahren.
tausenden Gerichtsverfahren. Freeware, aber nicht open source.
domains:
- law-enforcement
- incident-response
@ -918,7 +918,7 @@ tools:
accessType: download
url: https://www.exterro.com/digital-forensics-software/ftk-imager
projectUrl: ''
license: Freeware
license: Proprietary
knowledgebase: false
tags:
- gui
@ -1276,7 +1276,7 @@ tools:
Analyse. Unterstützt alle gängigen Formate von RAW über E01 bis zu
VM-Images. Der schreibgeschützte Modus garantiert forensische Integrität
der Beweise. Besonders praktisch für schnelle Triage ohne vollständige
Forensik-Suite.
Forensik-Suite. Freeware, aber nicht open source.
domains:
- incident-response
- law-enforcement
@ -1289,7 +1289,7 @@ tools:
accessType: download
url: https://www.osforensics.com/tools/mount-disk-images.html
projectUrl: ''
license: Freeware
license: Proprietary
knowledgebase: false
tags:
- gui
@ -1298,6 +1298,7 @@ tools:
- read-only
- virtual-drive
- format-support
- freeware
- name: Thumbcache Viewer
type: software
description: >-

View File

@ -358,7 +358,7 @@ function createToolCard(tool) {
<h3>${tool.name}</h3>
<div class="tool-card-badges">
${isMethod ? '<span class="badge" style="background-color: var(--color-method); color: white;">Methode</span>' : ''}
${!isMethod && hasValidProjectUrl ? '<span class="badge badge-primary">Self-Hosted</span>' : ''}
${!isMethod && hasValidProjectUrl ? '<span class="badge badge-primary">CC24-Server</span>' : ''}
${!isMethod && tool.license !== 'Proprietary' ? '<span class="badge badge-success">OSS</span>' : ''}
${hasKnowledgebase ? '<span class="badge badge-error">📖</span>' : ''}
</div>

View File

@ -1034,6 +1034,21 @@ Collaboration Section Collapse */
border-color: var(--color-oss);
}
.tool-recommendation.method {
background-color: var(--color-method-bg);
border-color: var(--color-method);
}
.tool-detailed-recommendation.card-method {
background-color: var(--color-method-bg);
border-color: var(--color-method);
}
.tool-detailed-recommendation.card-method:hover {
border-color: var(--color-method);
box-shadow: 0 0 0 1px var(--color-method), var(--shadow-lg);
}
.tool-rec-header {
display: flex;
justify-content: space-between;

View File

@ -5,6 +5,7 @@ import { z } from 'zod';
const ToolSchema = z.object({
name: z.string(),
icon: z.string().optional(),
type: z.string(),
description: z.string(),
domains: z.array(z.string()).optional().nullable().default([]),