mstoeck3/forensic-pathways
2
0
Fork 0
Code Issues 3 Pull Requests Projects Releases Activity

ajfppj

Browse Source
This commit is contained in:
user01 2025-07-13 16:49:25 +02:00
parent 340e33466f
commit a61870b802
9 changed files with 143 additions and 400 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/_layouts/base.njk
View File

@ -41,7 +41,7 @@
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
</svg> </svg>
Home Start
</a> </a>
<a href="/status/" <a href="/status/"
@ -59,7 +59,7 @@
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg> </svg>
About Über
</a> </a>
<a href="/privacy/" <a href="/privacy/"
@ -68,7 +68,7 @@
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
</svg> </svg>
Privacy Datenschutz
</a> </a>
</div> </div>

162
src/about/index.njk
View File

@ -1,164 +1,28 @@
--- ---
layout: base.njk layout: base.njk
title: "About" title: "Über"
description: "Learn about the FOSS DFIR Tools Framework and our mission" description: "Über DFIR Tools Hub"
--- ---
<div class="max-w-4xl mx-auto px-4 py-8"> <div class="max-w-4xl mx-auto px-4 py-8">
<div class="space-y-8"> <div class="space-y-6">
<div> <div>
<h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">About</h1> <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">Über</h1>
<p class="text-gray-600 dark:text-gray-300">
Learn more about the FOSS DFIR Tools Framework and our mission.
</p>
</div> </div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-8"> <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
<h2 class="text-2xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Our Mission</h2> <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-3">DFIR Tools Hub</h2>
<p class="text-gray-600 dark:text-gray-300 leading-relaxed mb-6"> <p class="text-gray-600 dark:text-gray-300 mb-4">
The FOSS DFIR Tools Framework serves as a comprehensive hub for digital forensics and incident response professionals. [Platzhalter für Projektbeschreibung]
We curate and organize open-source tools to make them easily discoverable and accessible to the security community.
Our platform bridges the gap between scattered tool documentation and practical implementation in academic and
professional environments.
</p> </p>
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">Framework Methodology</h3> <h3 class="text-md font-semibold text-gray-900 dark:text-gray-100 mb-2 mt-4">Technische Details</h3>
<p class="text-gray-600 dark:text-gray-300 leading-relaxed mb-6">
Our tool categorization follows the standard DFIR methodology established by Kent, Chevalier, Grance, and Dang
in the NIST Special Publication 800-86. This systematic approach ensures that tools are organized according to
their primary function within the investigation process:
</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<div class="bg-blue-50 dark:bg-blue-900 p-4 rounded-lg">
<h4 class="font-semibold text-blue-900 dark:text-blue-100 mb-2">Data Collection</h4>
<p class="text-blue-800 dark:text-blue-200 text-sm">
Tools for acquiring and preserving digital evidence while maintaining chain of custody and ensuring data integrity.
</p>
</div>
<div class="bg-green-50 dark:bg-green-900 p-4 rounded-lg">
<h4 class="font-semibold text-green-900 dark:text-green-100 mb-2">Examination</h4>
<p class="text-green-800 dark:text-green-200 text-sm">
Tools for extracting, parsing, and organizing data from collected evidence in preparation for analysis.
</p>
</div>
<div class="bg-purple-50 dark:bg-purple-900 p-4 rounded-lg">
<h4 class="font-semibold text-purple-900 dark:text-purple-100 mb-2">Analysis</h4>
<p class="text-purple-800 dark:text-purple-200 text-sm">
Tools for correlating, analyzing, and interpreting evidence to draw conclusions and identify patterns.
</p>
</div>
<div class="bg-yellow-50 dark:bg-yellow-900 p-4 rounded-lg">
<h4 class="font-semibold text-yellow-900 dark:text-yellow-100 mb-2">Reporting</h4>
<p class="text-yellow-800 dark:text-yellow-200 text-sm">
Tools for documenting findings, creating timelines, and generating comprehensive investigation reports.
</p>
</div>
</div>
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">Academic Focus</h3>
<p class="text-gray-600 dark:text-gray-300 leading-relaxed mb-6">
This framework was designed specifically for academic and laboratory environments where self-hosted solutions
are preferred over cloud-based services. We emphasize tools that can be deployed locally, ensuring data sovereignty
and compliance with institutional policies. Our "Self-Hosted Services" section provides access to powerful platforms
like Timesketch, TheHive, and MISP that can be deployed within your network perimeter.
</p>
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">Community Driven</h3>
<p class="text-gray-600 dark:text-gray-300 leading-relaxed mb-4">
This platform is maintained by the DFIR community, for the DFIR community. We welcome contributions,
suggestions, and feedback to help improve the framework and keep tool information current. The entire
platform is built using static site generation with YAML-driven content management, making it easy for
contributors to add new tools or update existing information through simple file edits.
</p>
<div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
<h4 class="font-semibold text-gray-900 dark:text-gray-100 mb-2">How to Contribute</h4>
<ul class="text-sm text-gray-600 dark:text-gray-300 space-y-1"> <ul class="text-sm text-gray-600 dark:text-gray-300 space-y-1">
<li>• Edit <code>src/_data/tools.yaml</code> to add or update tool information</li> <li>• Statische Website mit 11ty</li>
<li>• Modify <code>src/_data/services.yaml</code> to configure service monitoring</li> <li>• YAML-basierte Datenverwaltung</li>
<li>• Submit pull requests with tool suggestions or corrections</li> <li>• Keine externen Abhängigkeiten</li>
<li>• Report issues or suggest improvements via GitHub</li> <li>• Uptime Kuma Integration</li>
</ul> </ul>
</div> </div>
</div> </div>
<!-- Technical Implementation -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-8">
<h2 class="text-2xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Technical Implementation</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-3">Architecture</h3>
<ul class="text-gray-600 dark:text-gray-300 text-sm space-y-2">
<li>• <strong>Static Site Generator:</strong> 11ty (Eleventy)</li>
<li>• <strong>Content Management:</strong> YAML data files</li>
<li>• <strong>Styling:</strong> Sass with utility-first approach</li>
<li>• <strong>Interactivity:</strong> Vanilla JavaScript</li>
<li>• <strong>Monitoring:</strong> Uptime Kuma integration</li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-3">Features</h3>
<ul class="text-gray-600 dark:text-gray-300 text-sm space-y-2">
<li>• Sub-500ms search and filtering</li>
<li>• Dark/light/auto theme support</li>
<li>• Mobile-responsive design</li>
<li>• Zero external dependencies</li>
<li>• Real-time service status monitoring</li>
</ul>
</div>
</div>
<div class="mt-6 p-4 bg-blue-50 dark:bg-blue-900 rounded-lg">
<h4 class="font-semibold text-blue-900 dark:text-blue-100 mb-2">Performance Targets</h4>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
<div class="text-blue-800 dark:text-blue-200">
<strong>Initial Load:</strong><br>
&lt; 2 seconds
</div>
<div class="text-blue-800 dark:text-blue-200">
<strong>Search/Filter:</strong><br>
&lt; 500ms
</div>
<div class="text-blue-800 dark:text-blue-200">
<strong>Theme Switch:</strong><br>
&lt; 100ms
</div>
<div class="text-blue-800 dark:text-blue-200">
<strong>Modal Open:</strong><br>
&lt; 200ms
</div>
</div>
</div>
</div>
<!-- Credits and References -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-8">
<h2 class="text-2xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Credits and References</h2>
<div class="space-y-4">
<div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">Methodology Reference</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm">
Kent, K., Chevalier, S., Grance, T., & Dang, H. (2006).
<em>Guide to integrating forensic techniques into incident response.</em>
NIST Special Publication 800-86. National Institute of Standards and Technology.
</p>
</div>
<div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">Technology Stack</h3>
<div class="grid grid-cols-2 md:grid-cols-3 gap-4 text-sm text-gray-600 dark:text-gray-300">
<div>• <a href="https://11ty.dev" class="text-blue-600 dark:text-blue-400 hover:underline" target="_blank" rel="noopener">Eleventy (11ty)</a></div>
<div>• <a href="https://sass-lang.com" class="text-blue-600 dark:text-blue-400 hover:underline" target="_blank" rel="noopener">Sass</a></div>
<div>• <a href="https://uptime.kuma.pet" class="text-blue-600 dark:text-blue-400 hover:underline" target="_blank" rel="noopener">Uptime Kuma</a></div>
<div>• <a href="https://yaml.org" class="text-blue-600 dark:text-blue-400 hover:underline" target="_blank" rel="noopener">YAML</a></div>
<div>• <a href="https://mozilla.github.io/nunjucks/" class="text-blue-600 dark:text-blue-400 hover:underline" target="_blank" rel="noopener">Nunjucks</a></div>
<div>• JavaScript ES6+</div>
</div>
</div>
</div>
</div>
</div>
</div> </div>

47
src/css/main.css
View File

@ -297,13 +297,15 @@ body {
border-radius: 0.375rem; border-radius: 0.375rem;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 500; font-weight: 500;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out; transition: all 0.2s ease-in-out;
color: var(--gray-600); color: var(--gray-600);
text-decoration: none; text-decoration: none;
background-color: transparent;
} }
.nav-link:hover { .nav-link:hover {
color: var(--gray-900); color: var(--gray-900);
background-color: var(--gray-100);
} }
.dark .nav-link { .dark .nav-link {
@ -312,16 +314,18 @@ body {
.dark .nav-link:hover { .dark .nav-link:hover {
color: var(--gray-100); color: var(--gray-100);
background-color: var(--gray-700);
} }
.nav-link-active { .nav-link-active {
color: var(--blue-600) !important; color: var(--gray-900) !important;
background-color: var(--blue-50); background-color: var(--gray-200) !important;
font-weight: 600;
} }
.dark .nav-link-active { .dark .nav-link-active {
color: var(--blue-400) !important; color: var(--gray-100) !important;
background-color: var(--blue-900); background-color: var(--gray-700) !important;
} }
.view-mode-btn { .view-mode-btn {
@ -330,33 +334,50 @@ body {
gap: 0.5rem; gap: 0.5rem;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
border-radius: 0.5rem; border-radius: 0.5rem;
transition: all 0.15s ease-in-out; transition: all 0.2s ease-in-out;
background-color: var(--gray-200); background-color: white;
color: var(--gray-700); color: var(--gray-700);
border: none; border: 1px solid var(--gray-300);
cursor: pointer; cursor: pointer;
font-weight: 500;
} }
.view-mode-btn:hover { .view-mode-btn:hover {
background-color: var(--gray-300); background-color: var(--gray-50);
border-color: var(--gray-400);
} }
.dark .view-mode-btn { .dark .view-mode-btn {
background-color: var(--gray-700); background-color: var(--gray-800);
color: var(--gray-300); color: var(--gray-300);
border-color: var(--gray-600);
} }
.dark .view-mode-btn:hover { .dark .view-mode-btn:hover {
background-color: var(--gray-600); background-color: var(--gray-700);
border-color: var(--gray-500);
} }
.view-mode-active { .view-mode-active {
background-color: var(--blue-600) !important; background-color: var(--gray-900) !important;
color: white !important; color: white !important;
border-color: var(--gray-900) !important;
}
.dark .view-mode-active {
background-color: var(--gray-100) !important;
color: var(--gray-900) !important;
border-color: var(--gray-100) !important;
} }
.view-mode-active:hover { .view-mode-active:hover {
background-color: var(--blue-700) !important; background-color: var(--gray-800) !important;
border-color: var(--gray-800) !important;
}
.dark .view-mode-active:hover {
background-color: var(--gray-200) !important;
border-color: var(--gray-200) !important;
} }
.theme-btn { .theme-btn {

96
src/index.njk
View File

@ -1,21 +1,12 @@
--- ---
layout: base.njk layout: base.njk
title: "Home" title: "Start"
description: "Comprehensive directory of FOSS tools for Digital Forensics and Incident Response" description: "DFIR Tools Verzeichnis"
--- ---
<!-- Header Content --> <!-- Header Content -->
<div class="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700"> <div class="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700">
<div class="max-w-6xl mx-auto px-4 py-8"> <div class="max-w-6xl mx-auto px-4 py-6">
<!-- Introductory Text -->
<div class="prose prose-gray dark:prose-invert max-w-4xl mb-8">
<p class="text-lg text-gray-600 dark:text-gray-300 leading-relaxed">
Welcome to the comprehensive directory of Free and Open Source Software (FOSS) tools for Digital Forensics and Incident Response.
This framework organizes tools according to the standard DFIR methodology: Data Collection, Examination, Analysis, and Reporting.
Use the selectors below to discover tools that match your specific needs, or explore the complete matrix view to see the full ecosystem.
</p>
</div>
<!-- Search Bar --> <!-- Search Bar -->
<div class="mb-6"> <div class="mb-6">
<div class="relative max-w-md"> <div class="relative max-w-md">
@ -25,14 +16,14 @@ description: "Comprehensive directory of FOSS tools for Digital Forensics and In
<input <input
type="text" type="text"
id="search-input" id="search-input"
placeholder="Search tools, descriptions, tags..." placeholder="Tools suchen..."
class="pl-10 pr-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 w-full text-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100" class="pl-10 pr-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-gray-500 focus:border-gray-500 w-full bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
/> />
</div> </div>
</div> </div>
<!-- Navigation Links --> <!-- Navigation Links -->
<div class="flex flex-wrap gap-4 mb-6"> <div class="flex flex-wrap gap-3">
<button <button
id="mode-selector" id="mode-selector"
class="view-mode-btn view-mode-active" class="view-mode-btn view-mode-active"
@ -41,7 +32,7 @@ description: "Comprehensive directory of FOSS tools for Digital Forensics and In
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.207A1 1 0 013 6.5V4z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.207A1 1 0 013 6.5V4z"/>
</svg> </svg>
Tool Selector Tool Auswahl
</button> </button>
<button <button
@ -52,7 +43,7 @@ description: "Comprehensive directory of FOSS tools for Digital Forensics and In
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/>
</svg> </svg>
Matrix View Matrix Ansicht
</button> </button>
<button <button
@ -63,28 +54,27 @@ description: "Comprehensive directory of FOSS tools for Digital Forensics and In
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"/>
</svg> </svg>
Self-Hosted Services Dienste
</button> </button>
</div> </div>
</div> </div>
</div> </div>
<!-- Main Content --> <!-- Main Content -->
<div class="max-w-6xl mx-auto px-4 py-8"> <div class="max-w-6xl mx-auto px-4 py-6">
<!-- Tool Selector Mode --> <!-- Tool Selector Mode -->
<div id="view-selector" class="view-mode view-mode-active"> <div id="view-selector" class="view-mode view-mode-active">
<!-- Dimension Selectors --> <!-- Dimension Selectors -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6 mb-8"> <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6 mb-6">
<h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Select Tool Dimensions</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div> <div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Forensics Domain</label> <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Bereich</label>
<div class="relative"> <div class="relative">
<select <select
id="domain-select" id="domain-select"
class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 appearance-none bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-gray-500 appearance-none bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
> >
<option value="">Choose domain...</option> <option value="">Alle Bereiche</option>
{% for domain in domains %} {% for domain in domains %}
<option value="{{ domain }}">{{ domain }}</option> <option value="{{ domain }}">{{ domain }}</option>
{% endfor %} {% endfor %}
@ -96,13 +86,13 @@ description: "Comprehensive directory of FOSS tools for Digital Forensics and In
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">DFIR Phase</label> <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Phase</label>
<div class="relative"> <div class="relative">
<select <select
id="phase-select" id="phase-select"
class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 appearance-none bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-gray-500 appearance-none bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
> >
<option value="">Choose phase...</option> <option value="">Alle Phasen</option>
{% for phase in phases %} {% for phase in phases %}
<option value="{{ phase }}">{{ phase }}</option> <option value="{{ phase }}">{{ phase }}</option>
{% endfor %} {% endfor %}
@ -118,7 +108,7 @@ description: "Comprehensive directory of FOSS tools for Digital Forensics and In
id="reset-filters" id="reset-filters"
class="w-full px-4 py-3 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors" class="w-full px-4 py-3 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors"
> >
Reset Filters Zurücksetzen
</button> </button>
</div> </div>
</div> </div>
@ -126,24 +116,24 @@ description: "Comprehensive directory of FOSS tools for Digital Forensics and In
<!-- Results --> <!-- Results -->
<div id="tool-results" class="hidden"> <div id="tool-results" class="hidden">
<div class="mb-6"> <div class="mb-4">
<h2 id="results-title" class="text-2xl font-semibold text-gray-900 dark:text-gray-100 mb-2"> <h2 id="results-title" class="text-xl font-semibold text-gray-900 dark:text-gray-100">
Matching Tools (<span id="results-count">0</span>) Ergebnisse (<span id="results-count">0</span>)
</h2> </h2>
<p id="results-description" class="text-gray-600 dark:text-gray-300"></p> <p id="results-description" class="text-sm text-gray-600 dark:text-gray-400"></p>
</div> </div>
<div id="tools-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div id="tools-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- Tools will be populated by JavaScript --> <!-- Tools will be populated by JavaScript -->
</div> </div>
<div id="no-results" class="text-center py-12 hidden"> <div id="no-results" class="text-center py-12 hidden">
<p class="text-gray-500 dark:text-gray-400 text-lg">No tools found matching your criteria.</p> <p class="text-gray-500 dark:text-gray-400">Keine Tools gefunden.</p>
<button <button
id="reset-filters-empty" id="reset-filters-empty"
class="mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors" class="mt-4 px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors"
> >
Reset Filters Zurücksetzen
</button> </button>
</div> </div>
</div> </div>
@ -151,13 +141,11 @@ description: "Comprehensive directory of FOSS tools for Digital Forensics and In
<!-- Default State --> <!-- Default State -->
<div id="default-state" class="text-center py-16"> <div id="default-state" class="text-center py-16">
<div class="max-w-md mx-auto"> <div class="max-w-md mx-auto">
<svg class="w-16 h-16 text-gray-400 dark:text-gray-500 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-12 h-12 text-gray-400 dark:text-gray-500 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.207A1 1 0 013 6.5V4z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.207A1 1 0 013 6.5V4z"/>
</svg> </svg>
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">Select Your Criteria</h3>
<p class="text-gray-600 dark:text-gray-300"> <p class="text-gray-600 dark:text-gray-300">
Choose a forensics domain and/or DFIR phase above to discover relevant tools, Wählen Sie Bereich und/oder Phase aus.
or use the search bar to find specific tools.
</p> </p>
</div> </div>
</div> </div>
@ -165,20 +153,17 @@ description: "Comprehensive directory of FOSS tools for Digital Forensics and In
<!-- Matrix View Mode --> <!-- Matrix View Mode -->
<div id="view-matrix" class="view-mode hidden"> <div id="view-matrix" class="view-mode hidden">
<div class="mb-6"> <div class="mb-4">
<h2 class="text-2xl font-semibold text-gray-900 dark:text-gray-100 mb-2">Complete Tool Matrix</h2> <h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Tool Matrix</h2>
<p class="text-gray-600 dark:text-gray-300">
Overview of all FOSS DFIR tools organized by domain and phase. Click any tool name for details.
</p>
</div> </div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-x-auto"> <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-x-auto">
<table class="w-full"> <table class="w-full">
<thead> <thead>
<tr class="border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900"> <tr class="border-b border-gray-200 dark:border-gray-700">
<th class="p-4 text-left font-semibold text-gray-900 dark:text-gray-100 min-w-48">Domain / Phase</th> <th class="p-4 text-left font-semibold text-gray-900 dark:text-gray-100 min-w-48 bg-gray-50 dark:bg-gray-900">Bereich / Phase</th>
{% for phase in phases %} {% for phase in phases %}
<th class="p-4 text-center font-semibold min-w-64 text-gray-900 dark:text-gray-100"> <th class="p-4 text-center font-semibold min-w-64 text-gray-900 dark:text-gray-100 bg-gray-50 dark:bg-gray-900">
{{ phase }} {{ phase }}
</th> </th>
{% endfor %} {% endfor %}
@ -186,7 +171,7 @@ description: "Comprehensive directory of FOSS tools for Digital Forensics and In
</thead> </thead>
<tbody> <tbody>
{% for domain in domains %} {% for domain in domains %}
<tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700"> <tr class="border-b border-gray-200 dark:border-gray-700">
<td class="p-4 font-medium text-gray-900 dark:text-gray-100">{{ domain }}</td> <td class="p-4 font-medium text-gray-900 dark:text-gray-100">{{ domain }}</td>
{% for phase in phases %} {% for phase in phases %}
<td class="p-4 align-top"> <td class="p-4 align-top">
@ -204,21 +189,18 @@ description: "Comprehensive directory of FOSS tools for Digital Forensics and In
<!-- SaaS Tools Mode --> <!-- SaaS Tools Mode -->
<div id="view-saas" class="view-mode hidden"> <div id="view-saas" class="view-mode hidden">
<div class="mb-6"> <div class="mb-4">
<h2 class="text-2xl font-semibold text-gray-900 dark:text-gray-100 mb-2"> <h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">
Self-Hosted Services (<span id="saas-count">0</span>) Dienste (<span id="saas-count">0</span>)
</h2> </h2>
<p class="text-gray-600 dark:text-gray-300">
Self-hosted DFIR services available in your lab environment.
</p>
</div> </div>
<div id="saas-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div id="saas-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- SaaS tools will be populated by JavaScript --> <!-- SaaS tools will be populated by JavaScript -->
</div> </div>
<div id="no-saas-results" class="text-center py-12 hidden"> <div id="no-saas-results" class="text-center py-12 hidden">
<p class="text-gray-500 dark:text-gray-400 text-lg">No self-hosted services found matching your search.</p> <p class="text-gray-500 dark:text-gray-400">Keine Dienste gefunden.</p>
</div> </div>
</div> </div>
</div> </div>

20
src/js/modal.js
View File

@ -130,7 +130,7 @@
</div> </div>
<button <button
class="modal-close text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 text-2xl" class="modal-close text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 text-2xl"
aria-label="Close modal" aria-label="Schließen"
> >
× ×
</button> </button>
@ -142,16 +142,16 @@
<div class="grid grid-cols-2 gap-6 mb-6"> <div class="grid grid-cols-2 gap-6 mb-6">
<div> <div>
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">Domains</h3> <h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">Bereiche</h3>
<div class="space-y-2"> <div class="space-y-2">
${domains || '<span class="text-gray-500 dark:text-gray-400 text-sm">None specified</span>'} ${domains || '<span class="text-gray-500 dark:text-gray-400 text-sm">Keine angegeben</span>'}
</div> </div>
</div> </div>
<div> <div>
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">Phases</h3> <h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">Phasen</h3>
<div class="space-y-2"> <div class="space-y-2">
${phases || '<span class="text-gray-500 dark:text-gray-400 text-sm">None specified</span>'} ${phases || '<span class="text-gray-500 dark:text-gray-400 text-sm">Keine angegeben</span>'}
</div> </div>
</div> </div>
</div> </div>
@ -159,22 +159,22 @@
<div class="mb-6"> <div class="mb-6">
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">Tags</h3> <h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">Tags</h3>
<div class="flex flex-wrap"> <div class="flex flex-wrap">
${tags || '<span class="text-gray-500 dark:text-gray-400 text-sm">No tags</span>'} ${tags || '<span class="text-gray-500 dark:text-gray-400 text-sm">Keine Tags</span>'}
</div> </div>
</div> </div>
<div class="flex justify-between items-center pt-4 border-t border-gray-200 dark:border-gray-700"> <div class="flex justify-between items-center pt-4 border-t border-gray-200 dark:border-gray-700">
<div class="text-sm text-gray-600 dark:text-gray-400"> <div class="text-sm text-gray-600 dark:text-gray-400">
<div>Access: <span class="font-medium">${tool.accessType}</span></div> <div>Zugriff: <span class="font-medium">${tool.accessType}</span></div>
<div>Platforms: <span class="font-medium">${platforms}</span></div> <div>Plattformen: <span class="font-medium">${platforms}</span></div>
</div> </div>
<a <a
href="${tool.url}" href="${tool.url}"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="external-link flex items-center gap-2 px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors" class="external-link flex items-center gap-2 px-6 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors"
> >
Visit Project Projekt öffnen
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
</svg> </svg>

4
src/js/search.js
View File

@ -234,9 +234,9 @@
if (!resultsDescription) return; if (!resultsDescription) return;
const parts = []; const parts = [];
if (currentFilters.domain) parts.push(`Domain: ${currentFilters.domain}`); if (currentFilters.domain) parts.push(`Bereich: ${currentFilters.domain}`);
if (currentFilters.phase) parts.push(`Phase: ${currentFilters.phase}`); if (currentFilters.phase) parts.push(`Phase: ${currentFilters.phase}`);
if (currentFilters.search) parts.push(`Search: "${currentFilters.search}"`); if (currentFilters.search) parts.push(`Suche: "${currentFilters.search}"`);
resultsDescription.textContent = parts.join(' • '); resultsDescription.textContent = parts.join(' • ');
} }

2
src/js/status.js
View File

@ -151,7 +151,7 @@
if (!services || services.length === 0) { if (!services || services.length === 0) {
serviceList.innerHTML = ` serviceList.innerHTML = `
<div class="text-center py-8"> <div class="text-center py-8">
<p class="text-gray-500 dark:text-gray-400">No services configured</p> <p class="text-gray-500 dark:text-gray-400">Keine Dienste konfiguriert</p>
</div> </div>
`; `;
return; return;

156
src/privacy/index.njk
View File

@ -1,154 +1,42 @@
--- ---
layout: base.njk layout: base.njk
title: "Privacy Policy" title: "Datenschutz"
description: "Privacy policy and data handling practices for the DFIR Tools Hub" description: "Datenschutzerklärung"
--- ---
<div class="max-w-4xl mx-auto px-4 py-8"> <div class="max-w-4xl mx-auto px-4 py-8">
<div class="space-y-8"> <div class="space-y-6">
<div> <div>
<h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">Privatsphäre und Datenschutz</h1> <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">Datenschutz</h1>
<p class="text-gray-600 dark:text-gray-300"> <p class="text-sm text-gray-500 dark:text-gray-400">
Ich stehe für Privatsphäre und Datenschutz und gehe damit transparent um. Stand: 13.07.2025
</p>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-2">
Letztes Update: 13.07.2025
</p> </p>
</div> </div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-8"> <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
<div class="space-y-8">
<div>
<h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">Datensammlung</h2>
<p class="text-gray-600 dark:text-gray-300 leading-relaxed mb-4">
Auf dieser Webseite werden nur minimale technisch nicht vermeidbare Dsten gesammelt. Diese Plattform agiert nach dem Prinzip privacy-first und existiert als statische Website ohne Datenaggregation durch den Server.
</p>
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">Daten, die unweigerlich gespeichert werden:</h3>
<ul class="text-gray-600 dark:text-gray-300 space-y-2 ml-4">
<li class="flex items-start gap-2">
<span class="text-blue-600 dark:text-blue-400 mt-1">•</span>
<span><strong>Lokaler Browserspeicher:</strong> Präferenzen zum ausgewählten Farbschema (hell/dunkel) werden in Ihrem Browser gespeichert.</span>
</li>
<li class="flex items-start gap-2">
<span class="text-blue-600 dark:text-blue-400 mt-1">•</span>
<span><strong>Server Logs:</strong> Es werden standardisierte Accesslogs von NGINX undd HAProxy infrastrukturbedingt aufgezeichnet (IP-Adresse, Zeitstempel, HTTP-Endpunkt). Diese dienen ausschließlich der operativen Sicherheit und werden auf gerichtlichen Beschluss lediglich autorisierten Behörden ausgehändigt.</span>
</li>
</ul>
</div>
<div>
<h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">Was NICHT gesammelt wird:</h2>
<div class="bg-green-50 dark:bg-green-900 p-4 rounded-lg">
<ul class="text-green-800 dark:text-green-200 space-y-2">
<li class="flex items-start gap-2">
<span class="text-green-600 dark:text-green-400 mt-1">✓</span>
<span>Persönliche Informationen (Namen, E-Mails, Adressen)</span>
</li>
<li class="flex items-start gap-2">
<span class="text-green-600 dark:text-green-400 mt-1">✓</span>
<span>Nutzeraccounts oder Authentifizierungsdaten</span>
</li>
<li class="flex items-start gap-2">
<span class="text-green-600 dark:text-green-400 mt-1">✓</span>
<span>Jegliche Art von Tracking-Cookies oder sonstige Mechanismen zum Fingerprinting</span>
</li>
<li class="flex items-start gap-2">
<span class="text-green-600 dark:text-green-400 mt-1">✓</span>
<span>Verhaltensanalytische oder biometrische Daten</span>
</li>
<li class="flex items-start gap-2">
<span class="text-green-600 dark:text-green-400 mt-1">✓</span>
<span>Keine Interaktion mit kommerziellen Netzwerken, außer dem ISP zur Bereitstellung der Seite
</span>
</li>
</ul>
</div>
</div>
<div>
<h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">Cookies und lokaler Speicher Ihres Browsers</h2>
<p class="text-gray-600 dark:text-gray-300 leading-relaxed mb-4">
Der Browserspeicher wird minimalistisch und nur zu o.g. Zwecken genutzt. Wir speichern keine Cookies.
</p>
<div class="overflow-x-auto">
<table class="w-full border border-gray-200 dark:border-gray-700 rounded-lg">
<thead>
<tr class="bg-gray-50 dark:bg-gray-700">
<th class="p-3 text-left font-semibold text-gray-900 dark:text-gray-100">Storage Type</th>
<th class="p-3 text-left font-semibold text-gray-900 dark:text-gray-100">Purpose</th>
<th class="p-3 text-left font-semibold text-gray-900 dark:text-gray-100">Retention</th>
</tr>
</thead>
<tbody class="text-sm">
<tr class="border-t border-gray-200 dark:border-gray-700">
<td class="p-3 text-gray-900 dark:text-gray-100 font-medium">Theme Preference</td>
<td class="p-3 text-gray-600 dark:text-gray-300">Remember your dark/light mode choice</td>
<td class="p-3 text-gray-600 dark:text-gray-300">Until manually cleared</td>
</tr>
<tr class="border-t border-gray-200 dark:border-gray-700">
<td class="p-3 text-gray-900 dark:text-gray-100 font-medium">Search Filters</td>
<td class="p-3 text-gray-600 dark:text-gray-300">Maintain search state during session</td>
<td class="p-3 text-gray-600 dark:text-gray-300">Session only</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">Drittparteien und Dienste</h2>
<div class="space-y-4"> <div class="space-y-4">
<div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4"> <div>
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2">Externe Verlinkungen</h3> <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">Datensammlung</h2>
<p class="text-gray-600 dark:text-gray-300 text-sm"> <p class="text-sm text-gray-600 dark:text-gray-300">
Links to external tools (GitHub repositories, project websites) are provided for convenience. [Platzhalter für Datenschutzinformationen]
These external sites have their own privacy policies and data handling practices.
</p> </p>
</div> </div>
<div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2">Bereitgestellte Dienste</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm">
The "Self-Hosted Services" section links to services deployed within your local network.
Data handling for these services is governed by your institution's policies and the
specific configuration of each service.
Die als "on-premise" getaggten oder sonst offensichtlich gemachten Dienste werden innerhalb des CC24-Clusters (Teil des Mikoshi Compute Clusters) gehostet.
Jegliche Dateneingabe oder -verarbeitung unterliegt der Verantwortung des Nutzers, der die Daten erstmalig einbringt. Werden Vorschriften bestimmter Organisationen, die mit Ihnen in Verbindung stehen, berührt, sind Sie allein dafür verantwortlich, was Sie hochladen und verarbeiten.
Daten, deren Besitz strafbar ist, werden nicht toleriert.
</p>
</div>
</div>
</div>
<div> <div>
<h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">Data Security</h2> <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">Lokaler Speicher</h2>
<p class="text-gray-600 dark:text-gray-300 leading-relaxed mb-4"> <p class="text-sm text-gray-600 dark:text-gray-300">
Ich implementiere zeitgemäße technische Maßnahmen, um Ihre Daten zu schützen: • Theme-Einstellungen (hell/dunkel)<br>
• Keine Cookies<br>
• Keine Tracking-Mechanismen
</p> </p>
<ul class="text-gray-600 dark:text-gray-300 space-y-2 ml-4">
<li class="flex items-start gap-2">
<span class="text-blue-600 dark:text-blue-400 mt-1">•</span>
<span><strong>Transport Security:</strong> Alle Verbindungen werden TLS-verschlüsselt.</span>
</li>
<li class="flex items-start gap-2">
<span class="text-blue-600 dark:text-blue-400 mt-1">•</span>
<span><strong>Statische Architektur:</strong> Sofern es die Applikation nicht offensichtlich erfordert, werden serverseitig keine Daten gespeichert.</span>
</li>
<li class="flex items-start gap-2">
<span class="text-blue-600 dark:text-blue-400 mt-1">•</span>
<span><strong>Lokale Verarbeitung:</strong> Suche und Filterung dieser Seite werden lokal auf Ihrem Gerät durchgeführt (Browser-Funktion)</span>
</li>
<li class="flex items-start gap-2">
<span class="text-blue-600 dark:text-blue-400 mt-1">•</span>
<span><strong>Reguläre Updates:</strong> Abhängigkeiten und Sicherheitspatches werden regelmäßig geprüft und integriert.</span>
</li>
</ul>
</div> </div>
<div>
<h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">Externe Links</h2>
<p class="text-sm text-gray-600 dark:text-gray-300">
[Platzhalter für Informationen zu externen Links]
</p>
</div>
</div> </div>
</div> </div>
</div> </div>

52
src/status/index.njk
View File

@ -1,65 +1,53 @@
--- ---
layout: base.njk layout: base.njk
title: "Service Status" title: "Status"
description: "Real-time status of deployed DFIR services and infrastructure" description: "Service Status"
--- ---
<div class="max-w-6xl mx-auto px-4 py-8"> <div class="max-w-6xl mx-auto px-4 py-8">
<div class="space-y-8"> <div class="space-y-6">
<div> <div>
<h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">Service Status</h1> <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">Service Status</h1>
<p class="text-gray-600 dark:text-gray-300">
Real-time status of our deployed DFIR SaaS services and infrastructure components.
</p>
</div> </div>
<!-- Overall Status --> <!-- Overall Status -->
<div id="overall-status" class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6"> <div id="overall-status" class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
<div class="flex items-center justify-between mb-4"> <div class="flex items-center justify-between mb-3">
<h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Overall Status</h2> <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Gesamtstatus</h2>
<div id="overall-indicator" class="flex items-center gap-2"> <div id="overall-indicator" class="flex items-center gap-2">
<div class="status-indicator operational"></div> <div class="status-indicator operational"></div>
<span id="overall-text" class="text-green-600 dark:text-green-400 font-medium">Loading...</span> <span id="overall-text" class="text-green-600 dark:text-green-400 font-medium">Lädt...</span>
</div> </div>
</div> </div>
<p id="overall-summary" class="text-gray-600 dark:text-gray-300"> <p id="overall-summary" class="text-sm text-gray-600 dark:text-gray-300">
Checking service status... Status wird geprüft...
</p> </p>
</div> </div>
<!-- Uptime Kuma Connection Status --> <!-- Uptime Kuma Connection Status -->
<div id="uptime-kuma-status" class="bg-gray-100 dark:bg-gray-700 rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-600 p-6"> <div id="uptime-kuma-status" class="bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-300 dark:border-gray-600 p-4">
<div class="flex items-center gap-3 mb-3"> <div class="flex items-center gap-3 mb-2">
<svg class="w-6 h-6 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-5 h-5 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
</svg> </svg>
<h3 class="text-lg font-semibold text-gray-600 dark:text-gray-400">Uptime Kuma Integration</h3> <h3 class="text-md font-semibold text-gray-700 dark:text-gray-300">Uptime Kuma</h3>
<span id="kuma-connection-status" class="tag tag-gray">Checking...</span> <span id="kuma-connection-status" class="tag tag-gray text-xs">Prüft...</span>
</div> </div>
<p class="text-gray-500 dark:text-gray-400 mb-4"> <p class="text-xs text-gray-600 dark:text-gray-400">
Connect your Uptime Kuma instance for real-time monitoring data. Endpoint: <span id="kuma-endpoint">Nicht konfiguriert</span>
</p> </p>
<div class="text-sm text-gray-600 dark:text-gray-400">
<p><strong>Configuration:</strong> Edit <code>src/_data/services.yaml</code> to enable integration</p>
<p><strong>API Endpoint:</strong> <span id="kuma-endpoint">Not configured</span></p>
</div>
</div>
<!-- Service Categories -->
<div id="service-categories" class="space-y-6">
<!-- Categories will be populated by JavaScript -->
</div> </div>
<!-- Service List --> <!-- Service List -->
<div id="service-list" class="space-y-4"> <div id="service-list" class="space-y-3">
<!-- Services will be populated by JavaScript --> <!-- Services will be populated by JavaScript -->
</div> </div>
<!-- Last Updated --> <!-- Last Updated -->
<div class="text-center text-sm text-gray-500 dark:text-gray-400"> <div class="text-center text-sm text-gray-500 dark:text-gray-400">
<p>Last updated: <span id="last-updated">Never</span></p> <p>Aktualisiert: <span id="last-updated">Nie</span></p>
<button id="refresh-status" class="mt-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"> <button id="refresh-status" class="mt-2 px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors">
Refresh Status Aktualisieren
</button> </button>
</div> </div>
</div> </div>