---
import BaseLayout from '../layouts/BaseLayout.astro';
---

<BaseLayout title="Über das Projekt" description="ForensicPathways - Ein Projekt für die Seminargruppe CC24-w1">
  <section class="section container-narrow">
    <div class="header-center header-gradient mb-8">
      <h1 class="text-primary mb-4 text-2xl">ForensicPathways</h1>
      <p class="text-xl text-secondary mb-2">
        Forensik im Dienst der Transparenz
      </p>
      <p class="text-base text-secondary">
        Ein Studienprojekt
      </p>
    </div>

    <div class="card" style="margin-bottom: 2rem; border-left: 4px solid var(--color-primary);">
      <div class="flex items-center gap-3 mb-4">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--color-primary)" stroke-width="2">
          <path d="M9 11H5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2h-4"/>
          <path d="M9 11V7a3 3 0 0 1 6 0v4"/>
        </svg>
        <h2 class="m-0 text-primary">Das Ziel</h2>
      </div>
      <p class="mb-4 leading-relaxed">
        Diese Seite soll meinen Kommilitonen der Seminargruppe CC24-w1 und anderen interessierten Forensikbegeisterten eine <strong>einfache und übersichtliche Orientierung</strong> 
        bieten: Welches Werkzeug, welche Methode eignet sich für welchen Zweck in der digitalen Forensik?
      </p>
      <p class="mb-4 leading-relaxed">
        Ich stelle euch dafür <strong>Infrastruktur</strong> zur Verfügung, mit der ihr spezialisierte 
        Forensik-Software direkt einsetzen und erforschen könnt – sei es für <em>Bildungszwecke</em> oder im 
        <em>begrenzten Produktiveinsatz</em>.
      </p>
      <div class="bg-secondary p-4 rounded-lg mt-4">
        <p class="m-0 text-sm text-secondary">
          <strong>💡 Zugang:</strong> Die meisten Dienste sind bequem über das SSO der CC24-Cloud zugänglich, 
          mit nur wenigen Ausnahmen. Der Zugang ist entsprechend vorbehaltlich Absprache auf diesen Personenkreis limitiert.
        </p>
      </div>
    </div>

    <div class="card" style="margin-bottom: 2rem; border-left: 4px solid var(--color-accent);">
      <div class="flex items-center gap-3 mb-4">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--color-accent)" stroke-width="2">
          <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
          <polyline points="9,22 9,12 15,12 15,22"/>
        </svg>
        <h2 style="margin: 0; color: var(--color-accent);">Wissenschaftliche Grundlage</h2>
      </div>
      <p class="mb-4 leading-relaxed">
        Bei der vorgestellten Software handelt es sich um eine <strong>kuratierte Auswahl</strong> von Anwendungen, 
        vor allem aus dem Bereich der Open-Source-Software.
      </p>
      <p class="mb-4 leading-relaxed">
        Das zugrunde liegende Modell folgt dem bewährten <strong>NIST-Framework</strong> nach Kent, Chevalier, Grance und Dang 
        (NIST SP 800-86), das ich wegen seiner <em>Einfachheit</em> und <em>praktischen Adaptierbarkeit</em> schätze:
      </p>
      <div class="grid-4 gap-2 my-6 text-center">
        <div class="bg-secondary p-4 rounded-lg border-2 border-accent">
          <strong class="text-accent">Datensammlung</strong>
        </div>
        <div class="bg-secondary p-4 rounded-lg border-2 border-accent">
          <strong class="text-accent">Auswertung</strong>
        </div>
        <div class="bg-secondary p-4 rounded-lg border-2 border-accent">
          <strong class="text-accent">Analyse</strong>
        </div>
        <div class="bg-secondary p-4 rounded-lg border-2 border-accent">
          <strong class="text-accent">Bericht</strong>
        </div>
      </div>
      <p class="m-0 text-sm text-secondary">
        Diese Prozessphasen werden in der <strong>Matrix-Ansicht</strong> auf der Startseite mit forensischen Wissensdomänen verknüpft.
      </p>
    </div>

    <div class="card" style="margin-bottom: 2rem; border-left: 4px solid var(--color-warning);">
      <div class="flex items-center gap-3 mb-4">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--color-warning)" stroke-width="2">
          <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
          <path d="M9 12l2 2 4-4"/>
        </svg>
        <h2 style="margin: 0; color: var(--color-warning);">Weshalb der Fokus auf Open Source?</h2>
      </div>
      
      <div class="card-warning rounded-xl p-6 mb-6">
        <h3 class="m-0 mb-4 text-lg">💡 Zentrale Hypothese</h3>
        <p class="m-0 leading-normal italic">
          "Die IT-Forensik verlangt nach der Anwendung von wissenschaftlichen Methoden und Objektivität. 
          Die wissenschaftliche Methode verlangt einen transparenten Untersuchungsprozess, der in der Hauptverhandlung 
          bzw. dem Auftraggeber gegenüber stets nachvollziehbar und erklärbar sein muss. 
          <strong>Dieses Ziel ist mit proprietärer Software nicht zu erreichen</strong>, da der Quellcode nicht offen einsehbar ist."
        </p>
      </div>

      <h3 style="margin-bottom: 1rem; color: var(--color-warning);">Wissenschaftliche Argumente für Open Source:</h3>
      <div style="display: grid; gap: 1rem;">
        <div style="display: flex; gap: 0.75rem; align-items: start;">
          <span style="background-color: var(--color-accent); color: white; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.75rem; flex-shrink: 0;">1</span>
          <div>
            <strong>Code-Transparenz und Erklärbarkeit</strong><br>
            <span class="text-muted">Vollständige Nachvollziehbarkeit aller forensischen Prozesse</span>
          </div>
        </div>
        <div style="display: flex; gap: 0.75rem; align-items: start;">
          <span style="background-color: var(--color-accent); color: white; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.75rem; flex-shrink: 0;">2</span>
          <div>
            <strong>Falsifizierbarkeit</strong><br>
            <span class="text-muted">Ausschluss verdeckter Einflussnahmen auf Code-Ebene</span>
          </div>
        </div>
        <div style="display: flex; gap: 0.75rem; align-items: start;">
          <span style="background-color: var(--color-accent); color: white; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.75rem; flex-shrink: 0;">3</span>
          <div>
            <strong>Datenschutztransparenz</strong><br>
            <span class="text-muted">Vollständige Kenntnis der Datenverarbeitung durch Quelltexteinsicht</span>
          </div>
        </div>
        <div style="display: flex; gap: 0.75rem; align-items: start;">
          <span style="background-color: var(--color-accent); color: white; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.75rem; flex-shrink: 0;">4</span>
          <div>
            <strong>Kosteneffizienz & Gemeinschaftsbeitrag</strong><br>
            <span class="text-muted">Wirtschaftliche Vorteile und Unterstützung der wissenschaftlichen Gemeinschaft</span>
          </div>
        </div>
      </div>
    </div>

    <div id= "support" class="card" style="margin-bottom: 2rem; border-left: 4px solid var(--color-primary);">
      <div class="flex items-center gap-3 mb-4">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--color-primary)" stroke-width="2">
          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
        </svg>
        <h2 class="m-0 text-primary">Unterstützung und Kontakt</h2>
      </div>
      <p class="mb-4 leading-relaxed">
        Falls eine Anwendung nicht wie vorgesehen funktioniert, ihr Unterstützung braucht, der Speicherplatz ausgeht 
        oder sonstige Probleme auftreten: <strong>Schreibt mir einfach auf Signal</strong> oder an <a href="mailto:mstoeck3@hs-mittweida.de">mstoeck3@hs-mittweida.de</a>.
      </p>
      
      <div style="background-color: var(--color-warning); color: white; padding: 1.25rem; border-radius: 0.5rem; margin-top: 1.5rem;">
        <h4 style="margin: 0 0 0.75rem 0; 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">
            <circle cx="12" cy="12" r="10"/>
            <line x1="12" y1="8" x2="12" y2="12"/>
            <line x1="12" y1="16" x2="12.01" y2="16"/>
          </svg>
          Besonderer Hinweis zu Neo4j
        </h4>
        <p style="margin: 0; line-height: 1.6;">
          <strong>Neo4j</strong> unter <a href="https://graph.cc24.dev" style="color: white; text-decoration: underline;">https://graph.cc24.dev</a> 
          liegt nur in einer Community-Edition vor, die lediglich einen einzelnen Account zulässt. 
          <strong>Wir teilen uns daher alle zusammen den Account und die Datenbank.</strong><br>
          Zugangsdaten gibt es per Signal-Nachricht.
        </p>
      </div>
      <div style="background-color: var(--color-warning); color: white; padding: 1.25rem; border-radius: 0.5rem; margin-top: 1.5rem;">
        <h4 style="margin: 0 0 0.75rem 0; 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">
            <circle cx="12" cy="12" r="10"/>
            <line x1="12" y1="8" x2="12" y2="12"/>
            <line x1="12" y1="16" x2="12.01" y2="16"/>
          </svg>
          Besonderer Hinweis zu Velociraptor
        </h4>
        <p style="margin: 0; line-height: 1.6;">
          <strong>Velociraptor</strong> unter <a href="https://raptor.cc24.dev" style="color: white; text-decoration: underline;">https://raptor.cc24.dev</a> 
          unterstützt zwar SSO, die Accounts müssen aber einzeln veranlagt werden. Das habe ich gemacht, wenn es aber zu personellen Wechseln in unserer Gruppe kommt, werde ich das verpennen.
          Hilfe gibt es per Signal-Nachricht.
        </p>
      </div>
    </div>

    <div class="card" style="margin-bottom: 2rem; border-left: 4px solid var(--color-accent);">
      <div class="flex items-center gap-3 mb-4">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--color-accent)" 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>
        <h2 style="margin: 0; color: var(--color-accent);">Mitmachen &amp; Beitragen</h2>
      </div>

      <div style="display: grid; gap: 1.25rem;">
        <div style="background-color: var(--color-bg-secondary); padding: 1.25rem; border-radius: 0.5rem;">
          <h4 style="margin: 0 0 0.5rem 0; color: var(--color-accent);">🔍 Vorschläge</h4>
          <p style="margin: 0;">
            Du hast eine Idee, wie wir den Hub erweitern können? Reiche deinen Vorschlag unkompliziert
            über unsere <a href="/contribute#vorschlaege">/contribute</a>-Seite ein.
          </p>
        </div>

        <div style="background-color: var(--color-bg-secondary); padding: 1.25rem; border-radius: 0.5rem;">
          <h4 style="margin: 0 0 0.5rem 0; color: var(--color-accent);">🔧 Korrekturen &amp; Updates</h4>
          <p style="margin: 0;">
            Ist eine Anwendung veraltet oder falsch dargestellt? Teile uns das bitte direkt unter
            <a href="/contribute#korrekturen">/contribute</a> mit.
          </p>
        </div>

        <div style="background-color: var(--color-bg-secondary); padding: 1.25rem; border-radius: 0.5rem;">
          <h4 style="margin: 0 0 0.5rem 0; color: var(--color-accent);">💻 Code‑Beiträge</h4>
          <p style="margin-bottom: 0.75rem;">
            Möchtest du direkt am Sourcecode mitarbeiten? Schau dir die Anleitung unter
            <a href="/contribute#code">/contribute</a> an oder besuche unser Repository:
          </p>
          <a href="https://git.cc24.dev/mstoeck3/forensic-pathways" target="_blank" rel="noopener noreferrer"
            style="display: inline-flex; align-items: center; gap: 0.5rem; color: var(--color-accent); font-weight: 500;">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
              <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
            </svg>
            Git‑Repository besuchen
          </a>
        </div>        
        <div style="background-color: var(--color-bg-secondary); padding: 1.25rem; border-radius: 0.5rem;">
          <h4 style="margin: 0 0 0.5rem 0; color: var(--color-accent);">⚡ Unterstützung</h4>
          <p style="margin: 0;">
            Kleine Spenden zur Infrastruktur-Finanzierung nehme ich auch gerne an, wenn es sein muss. 
            Fragt einfach nach der Lightning-Adresse oder BTC-Adresse!
          </p>
        </div>
      </div>
    </div>

    <div style="text-align: center; padding: 2rem; background-color: var(--color-bg-secondary); border-radius: 0.75rem; border: 1px solid var(--color-border);">
      <p style="margin: 0; color: var(--color-text-secondary); font-size: 0.875rem;">
        <strong>Inoffizielles Studienprojekt</strong> | Mario Stöckl | 
        Alle dargestellte Software, Dienste und Methoden dienen Bildungs- und Forschungszwecken sowie der Weiterentwicklung der IT-forensischen Methodik.
        Bei dieser Webseite handelt es sich um ein privates Werk. Keine Bildungseinrichtung, kein Unternehmen sind finanziell oder moderierend Teil dieses Projekts.
      </p>
    </div>
  </section>
</BaseLayout>