progress

2025-07-13 22:18:53 +02:00 · 2025-07-13 22:18:53 +02:00 · 64d5e75045
commit 64d5e75045
parent a61870b802
14 changed files with 195 additions and 89 deletions
--- a/.eleventy.js
+++ b/.eleventy.js
@ -1,3 +1,4 @@
+// File: ./eleventy.js
 const yaml = require('js-yaml');
 const fs = require('fs');

--- a/framework.md
+++ b/framework.md
@ -0,0 +1,47 @@
+Proposed Framework Categories (Y-axis):
+1. Storage & File System Artifacts
+
+Static file system analysis (encrypted/unencrypted)
+Registry analysis
+Database forensics
+
+2. Memory & Runtime Artifacts
+
+Memory forensics of live systems
+Process analysis
+Virtualization forensics
+
+3. Network & Communication Artifacts
+
+Webserver log analysis
+System log analysis
+PKI examination
+Radio signal analysis
+VoIP forensics
+Network packet analysis (PCAP)
+
+4. Application & Code Artifacts
+
+Malware analysis
+Darknet website source code analysis
+Browser forensics
+Email forensics
+
+5. Multimedia & Content Artifacts
+
+Video/image/audio authenticity analysis
+Steganography detection
+Content recovery
+
+6. Transaction & Financial Artifacts
+
+Blockchain payment analysis
+Cryptocurrency exchange analysis
+Financial transaction forensics
+
+7. Platform & Infrastructure Artifacts
+
+Mobile forensics
+Cloud forensics
+IoT device forensics
+Social media/OSINT analysis
--- a/src/_layouts/base.njk
+++ b/src/_layouts/base.njk
@ -1,3 +1,5 @@
+<!-- file: "./src/_layouts/base.njk" -->
+
 <!DOCTYPE html>
 <html lang="en" class="theme-auto">
 <head>
@ -28,20 +30,21 @@
    </script>
 </head>

-<body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-200">
+<body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-200 min-h-screen flex flex-col">
+    
    <!-- Navigation -->
    <nav class="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700">
-        <div class="max-w-7xl mx-auto px-4">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full">
            <div class="flex justify-between items-center h-16">
                <!-- Left Navigation -->
-                <div class="flex items-center space-x-8">
+                <div class="flex items-center space-x-4 md:space-x-8">
                    <a href="/" 
                       class="nav-link {% if page.url == '/' %}nav-link-active{% endif %}"
                       data-page="home">
                        <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"/>
                        </svg>
-                        Start
+                        <span class="hidden sm:inline">Start</span>
                    </a>
                    
                    <a href="/status/" 
@ -50,7 +53,7 @@
                        <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="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>
-                        Status
+                        <span class="hidden sm:inline">Status</span>
                    </a>
                    
                    <a href="/about/" 
@ -59,7 +62,7 @@
                        <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"/>
                        </svg>
-                        Über
+                        <span class="hidden sm:inline">Über</span>
                    </a>
                    
                    <a href="/privacy/" 
@ -68,13 +71,13 @@
                        <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"/>
                        </svg>
-                        Datenschutz
+                        <span class="hidden sm:inline">Datenschutz</span>
                    </a>
                </div>

                <!-- Center Logo -->
                <div class="flex items-center">
-                    <div class="bg-blue-600 dark:bg-blue-500 text-white px-4 py-2 rounded-lg font-bold text-lg">
+                    <div class="bg-blue-600 dark:bg-blue-500 text-white px-4 py-2 rounded-lg font-bold text-lg shadow-sm">
                        DFIR
                    </div>
                </div>
@ -104,13 +107,58 @@
    </nav>

    <!-- Main Content -->
-    <main class="min-h-screen">
-        {{ content | safe }}
+    <main class="flex-grow">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full py-8">
+            {{ content | safe }}
+        </div>
    </main>

+    <!-- Footer -->
+    <footer class="mt-auto">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full py-8">
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <!-- About Section -->
+                <div>
+                    <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">DFIR Tools Hub</h3>
+                    <p class="text-sm text-gray-600 dark:text-gray-400">
+                        Self-hosted directory for Digital Forensics and Incident Response tools. Built for academic and lab environments.
+                    </p>
+                </div>
+            
+                <!-- Quick Links -->
+                <div>
+                    <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">Quick Links</h3>
+                    <ul class="space-y-2 text-sm">
+                        <li>
+                            <a href="https://github.com/your-lab/dfir-tools-hub" class="footer-link">
+                                GitHub Repository
+                            </a>
+                        </li>
+                        <li>
+                            <a href="/api/tools.json" class="footer-link">
+                                Tools API
+                            </a>
+                        </li>
+                        <li>
+                            <a href="/api/status.json" class="footer-link">
+                                Status API
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            
+            <div class="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700">
+                <p class="text-center text-sm text-gray-500 dark:text-gray-400">
+                    © 2025 DFIR Lab. Open source under MIT License.
+                </p>
+            </div>
+        </div>
+    </footer>
+
    <!-- Tool Detail Modal (initially hidden) -->
    <div id="tool-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50 hidden">
-        <div class="bg-white dark:bg-gray-800 rounded-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto">
+        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
            <div class="p-6" id="tool-modal-content">
                <!-- Content will be populated by JavaScript -->
            </div>
@ -125,4 +173,4 @@
    <script src="/js/status.js"></script>
    {% endif %}
 </body>
-</html>
+</html>
--- a/src/about/index.njk
+++ b/src/about/index.njk
@ -3,26 +3,30 @@ layout: base.njk
 title: "Über"
 description: "Über DFIR Tools Hub"
 ---
+<!-- ffile: "./src/about/index.njk" -->

-<div class="max-w-4xl mx-auto px-4 py-8">
-    <div class="space-y-6">
-        <div>
-            <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">Über</h1>
-        </div>

-        <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-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 mb-4">
-                [Platzhalter für Projektbeschreibung]
-            </p>
-            
-            <h3 class="text-md font-semibold text-gray-900 dark:text-gray-100 mb-2 mt-4">Technische Details</h3>
-            <ul class="text-sm text-gray-600 dark:text-gray-300 space-y-1">
-                <li>• Statische Website mit 11ty</li>
-                <li>• YAML-basierte Datenverwaltung</li>
-                <li>• Keine externen Abhängigkeiten</li>
-                <li>• Uptime Kuma Integration</li>
-            </ul>
+<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    <div class="max-w-4xl">
+        <div class="space-y-6">
+            <div>
+                <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">Über</h1>
+            </div>
+
+            <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-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 mb-4">
+                    [Platzhalter für Projektbeschreibung]
+                </p>
+                
+                <h3 class="text-md font-semibold text-gray-900 dark:text-gray-100 mb-2 mt-4">Technische Details</h3>
+                <ul class="text-sm text-gray-600 dark:text-gray-300 space-y-1">
+                    <li>• Statische Website mit 11ty</li>
+                    <li>• YAML-basierte Datenverwaltung</li>
+                    <li>• Keine externen Abhängigkeiten</li>
+                    <li>• Uptime Kuma Integration</li>
+                </ul>
+            </div>
        </div>
    </div>
 </div>
--- a/src/css/main.css
+++ b/src/css/main.css
@ -1,3 +1,4 @@
+/* File: ./src/css/main.css */
 /* CSS Reset and Base Styles */
 * {
  box-sizing: border-box;
@ -294,11 +295,11 @@ body {
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
-  border-radius: 0.375rem;
+  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
-  color: var(--gray-600);
+  color: var(--gray-700);
  text-decoration: none;
  background-color: transparent;
 }
@ -309,7 +310,7 @@ body {
 }

 .dark .nav-link {
-  color: var(--gray-300);
+  color: var(--gray-400);
 }

 .dark .nav-link:hover {
@ -318,14 +319,14 @@ body {
 }

 .nav-link-active {
-  color: var(--gray-900) !important;
-  background-color: var(--gray-200) !important;
+  color: var(--blue-700) !important;
+  background-color: var(--blue-50) !important;
  font-weight: 600;
 }

 .dark .nav-link-active {
-  color: var(--gray-100) !important;
-  background-color: var(--gray-700) !important;
+  color: var(--blue-400) !important;
+  background-color: var(--blue-900) !important;
 }

 .view-mode-btn {
@ -349,7 +350,7 @@ body {

 .dark .view-mode-btn {
  background-color: var(--gray-800);
-  color: var(--gray-300);
+  color: var(--gray-400);
  border-color: var(--gray-600);
 }

@ -359,25 +360,26 @@ body {
 }

 .view-mode-active {
-  background-color: var(--gray-900) !important;
+  background-color: var(--blue-600) !important;
  color: white !important;
-  border-color: var(--gray-900) !important;
+  border-color: var(--blue-600) !important;
+  border-radius: 0.5rem !important;
 }

 .dark .view-mode-active {
-  background-color: var(--gray-100) !important;
-  color: var(--gray-900) !important;
-  border-color: var(--gray-100) !important;
+  background-color: var(--blue-500) !important;
+  color: white !important;
+  border-color: var(--blue-500) !important;
 }

 .view-mode-active:hover {
-  background-color: var(--gray-800) !important;
-  border-color: var(--gray-800) !important;
+  background-color: var(--blue-700) !important;
+  border-color: var(--blue-700) !important;
 }

 .dark .view-mode-active:hover {
-  background-color: var(--gray-200) !important;
-  border-color: var(--gray-200) !important;
+  background-color: var(--blue-600) !important;
+  border-color: var(--blue-600) !important;
 }

 .theme-btn {
--- a/src/data/services.yaml
+++ b/src/data/services.yaml
@ -1,3 +1,4 @@
+# File: ./src/data/services.yaml
 # Service Status Configuration
 # This file configures the services monitored on the status page
 # Connect to Uptime Kuma API for real-time data
--- a/src/data/tools.yaml
+++ b/src/data/tools.yaml
@ -1,3 +1,4 @@
+# File: ./src/data/tools.yaml
 # DFIR Tools Database
 # Edit this file to add, remove, or modify tools
 # Structure: Each tool should have required fields marked with *
--- a/src/index.njk
+++ b/src/index.njk
@ -3,10 +3,11 @@ layout: base.njk
 title: "Start"
 description: "DFIR Tools Verzeichnis"
 ---
+<!-- file: "./src/index.njk" -->

 <!-- Header Content -->
 <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-6">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        <!-- Search Bar -->
        <div class="mb-6">
            <div class="relative max-w-md">
@ -17,7 +18,7 @@ description: "DFIR Tools Verzeichnis"
                    type="text"
                    id="search-input"
                    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-gray-500 focus:border-gray-500 w-full 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-blue-500 focus:border-blue-500 w-full bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
                />
            </div>
        </div>
@ -61,7 +62,7 @@ description: "DFIR Tools Verzeichnis"
 </div>

 <!-- Main Content -->
-<div class="max-w-6xl mx-auto px-4 py-6">
+<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">`
    <!-- Tool Selector Mode -->
    <div id="view-selector" class="view-mode view-mode-active">
        <!-- Dimension Selectors -->
--- a/src/js/modal.js
+++ b/src/js/modal.js
@ -1,3 +1,4 @@
+// File: ./src/js/modal.js
 // Tool detail modal functionality
 (function() {
    'use strict';
--- a/src/js/search.js
+++ b/src/js/search.js
@ -1,3 +1,4 @@
+// File: ./src/js/search.js
 // Search and filtering functionality
 (function() {
    'use strict';
--- a/src/js/status.js
+++ b/src/js/status.js
@ -1,3 +1,4 @@
+// File: ./src/js/status.js
 // Status page functionality for Uptime Kuma integration
 (function() {
    'use strict';
--- a/src/js/theme.js
+++ b/src/js/theme.js
@ -1,3 +1,4 @@
+// File: ./src/js/theme.js
 // Theme management functionality
 (function() {
    'use strict';
--- a/src/privacy/index.njk
+++ b/src/privacy/index.njk
@ -3,39 +3,41 @@ layout: base.njk
 title: "Datenschutz"
 description: "Datenschutzerklärung"
 ---
+<!-- file: "./src/privacy/index.njk" -->
+<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    <div class="max-w-4xl">
+        <div class="space-y-6">
+            <div>
+                <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">Datenschutz</h1>
+                <p class="text-sm text-gray-500 dark:text-gray-400">
+                    Stand: 13.07.2025
+                </p>
+            </div>

-<div class="max-w-4xl mx-auto px-4 py-8">
-    <div class="space-y-6">
-        <div>
-            <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">Datenschutz</h1>
-            <p class="text-sm text-gray-500 dark:text-gray-400">
-                Stand: 13.07.2025
-            </p>
-        </div>
+            <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-4">
+                    <div>
+                        <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">Datensammlung</h2>
+                        <p class="text-sm text-gray-600 dark:text-gray-300">
+                            [Platzhalter für Datenschutzinformationen]
+                        </p>
+                    </div>

-        <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-4">
-                <div>
-                    <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">Datensammlung</h2>
-                    <p class="text-sm text-gray-600 dark:text-gray-300">
-                        [Platzhalter für Datenschutzinformationen]
-                    </p>
-                </div>
+                    <div>
+                        <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">Lokaler Speicher</h2>
+                        <p class="text-sm text-gray-600 dark:text-gray-300">
+                            • Theme-Einstellungen (hell/dunkel)<br>
+                            • Keine Cookies<br>
+                            • Keine Tracking-Mechanismen
+                        </p>
+                    </div>

-                <div>
-                    <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">Lokaler Speicher</h2>
-                    <p class="text-sm text-gray-600 dark:text-gray-300">
-                        • Theme-Einstellungen (hell/dunkel)<br>
-                        • Keine Cookies<br>
-                        • Keine Tracking-Mechanismen
-                    </p>
-                </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>
+                        <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>
--- a/src/status/index.njk
+++ b/src/status/index.njk
@ -3,8 +3,9 @@ layout: base.njk
 title: "Status"
 description: "Service Status"
 ---
+<!-- file: "./src/status/index.njk" -->

-<div class="max-w-6xl mx-auto px-4 py-8">
+<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <div class="space-y-6">
        <div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">Service Status</h1>
@ -46,15 +47,9 @@ description: "Service Status"
        <!-- Last Updated -->
        <div class="text-center text-sm text-gray-500 dark:text-gray-400">
            <p>Aktualisiert: <span id="last-updated">Nie</span></p>
-            <button id="refresh-status" class="mt-2 px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors">
+            <button id="refresh-status" class="mt-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                Aktualisieren
            </button>
        </div>
    </div>
-</div>
-
-<!-- Pass service data to JavaScript -->
-<script>
-    window.servicesData = {{ services | dump | safe }};
-    window.uptimeKumaConfig = {{ services.uptimeKuma | dump | safe }};
-</script>
+</div>