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

style patches

Browse Source
This commit is contained in:
overcuriousity
2025-07-27 21:56:08 +02:00
parent 9cb4b7e72d
commit 68484fbe3f
13 changed files with 139 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/pages/about.astro
View File

@@ -3,36 +3,36 @@ import BaseLayout from '../layouts/BaseLayout.astro';
---
<BaseLayout title="Über das Projekt" description="ForensicPathways - Ein Projekt für die Seminargruppe CC24-w1">
<section style="padding: 2rem 0; max-width: 900px; margin: 0 auto;">
<div style="text-align: center; margin-bottom: 3rem; padding: 2rem; background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-tertiary) 100%); border-radius: 1rem; border: 1px solid var(--color-border);">
<h1 style="margin-bottom: 1rem; font-size: 2.5rem; color: var(--color-primary);">ForensicPathways</h1>
<p style="font-size: 1.25rem; color: var(--color-text-secondary); margin-bottom: 0.5rem;">
<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 style="font-size: 1rem; color: var(--color-text-secondary);">
<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 style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem;">
<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 style="margin: 0; color: var(--color-primary);">Das Ziel</h2>
<h2 class="m-0 text-primary">Das Ziel</h2>
</div>
<p style="margin-bottom: 1rem; line-height: 1.7;">
<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 style="margin-bottom: 1rem; line-height: 1.7;">
<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 style="background-color: var(--color-bg-secondary); padding: 1rem; border-radius: 0.5rem; margin-top: 1rem;">
<p style="margin: 0; font-size: 0.875rem; color: var(--color-text-secondary);">
<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>
@@ -40,42 +40,42 @@ import BaseLayout from '../layouts/BaseLayout.astro';
</div>
<div class="card" style="margin-bottom: 2rem; border-left: 4px solid var(--color-accent);">
<div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem;">
<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 style="margin-bottom: 1rem; line-height: 1.7;">
<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 style="margin-bottom: 1rem; line-height: 1.7;">
<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 style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin: 1.5rem 0; text-align: center;">
<div style="background-color: var(--color-bg-secondary); padding: 1rem; border-radius: 0.5rem; border: 2px solid var(--color-accent);">
<strong style="color: var(--color-accent);">Datensammlung</strong>
<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 style="background-color: var(--color-bg-secondary); padding: 1rem; border-radius: 0.5rem; border: 2px solid var(--color-accent);">
<strong style="color: var(--color-accent);">Auswertung</strong>
<div class="bg-secondary p-4 rounded-lg border-2 border-accent">
<strong class="text-accent">Auswertung</strong>
</div>
<div style="background-color: var(--color-bg-secondary); padding: 1rem; border-radius: 0.5rem; border: 2px solid var(--color-accent);">
<strong style="color: var(--color-accent);">Analyse</strong>
<div class="bg-secondary p-4 rounded-lg border-2 border-accent">
<strong class="text-accent">Analyse</strong>
</div>
<div style="background-color: var(--color-bg-secondary); padding: 1rem; border-radius: 0.5rem; border: 2px solid var(--color-accent);">
<strong style="color: var(--color-accent);">Bericht</strong>
<div class="bg-secondary p-4 rounded-lg border-2 border-accent">
<strong class="text-accent">Bericht</strong>
</div>
</div>
<p style="margin: 0; font-size: 0.875rem; color: var(--color-text-secondary);">
<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 style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem;">
<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"/>
@@ -83,9 +83,9 @@ import BaseLayout from '../layouts/BaseLayout.astro';
<h2 style="margin: 0; color: var(--color-warning);">Weshalb der Fokus auf Open Source?</h2>
</div>
<div style="background: linear-gradient(135deg, var(--color-warning) 0%, var(--color-accent) 100%); color: white; padding: 1.5rem; border-radius: 0.75rem; margin-bottom: 1.5rem;">
<h3 style="margin: 0 0 1rem 0; font-size: 1.125rem;">💡 Zentrale Hypothese</h3>
<p style="margin: 0; line-height: 1.6; font-style: italic;">
<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.
@@ -127,13 +127,13 @@ import BaseLayout from '../layouts/BaseLayout.astro';
</div>
<div id= "support" class="card" style="margin-bottom: 2rem; border-left: 4px solid var(--color-primary);">
<div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem;">
<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 style="margin: 0; color: var(--color-primary);">Unterstützung und Kontakt</h2>
<h2 class="m-0 text-primary">Unterstützung und Kontakt</h2>
</div>
<p style="margin-bottom: 1rem; line-height: 1.7;">
<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>
@@ -172,7 +172,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
</div>
<div class="card" style="margin-bottom: 2rem; border-left: 4px solid var(--color-accent);">
<div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem;">
<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"/>

2
src/pages/auth/callback.astro
View File

@@ -51,7 +51,7 @@
<div class="spinner"></div>
<h2>Processing authentication...</h2>
<p>Please wait while we complete your login.</p>
<div id="error-message" style="display: none;" class="error"></div>
<div id="error-message" class="hidden error"></div>
</div>
<script>

8
src/pages/contribute/index.astro
View File

@@ -15,7 +15,7 @@ const { authenticated, userEmail, userId } = authResult;
<BaseLayout title="Contribute" description="Inhalte zum ForensicPathways beitragen">
<section class="section-padding">
<div style="text-align: center; margin-bottom: 3rem; padding: 2rem; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%); color: white; border-radius: 1rem; border: 1px solid var(--color-border);">
<div class="header-center header-primary mb-8">
<h1 style="margin-bottom: 1rem; font-size: 2.5rem;">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.75rem; vertical-align: middle;">
<path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
@@ -49,7 +49,7 @@ const { authenticated, userEmail, userId } = authResult;
<div class="card"
style="padding: 2rem; border-left: 4px solid var(--color-primary); transition: var(--transition-fast);
display:flex; flex-direction:column;">
<div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem;">
<div class="flex items-center gap-4 mb-6">
<div style="width: 48px; height: 48px; background-color: var(--color-primary); border-radius: 0.5rem; display: flex; align-items: center; justify-content: center;">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
<path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>
@@ -108,7 +108,7 @@ const { authenticated, userEmail, userId } = authResult;
style="padding: 2rem; border-left: 4px solid var(--color-accent); cursor: pointer; transition: var(--transition-fast);
display:flex; flex-direction:column;"
onclick="window.location.href='/contribute/knowledgebase'">
<div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem;">
<div class="flex items-center gap-4 mb-6">
<div style="width: 48px; height: 48px; background-color: var(--color-accent); border-radius: 0.5rem; display: flex; align-items: center; justify-content: center;">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" 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"/>
@@ -142,7 +142,7 @@ const { authenticated, userEmail, userId } = authResult;
<div class="card"
style="padding: 2rem; border-left: 4px solid var(--color-accent); cursor: pointer; transition: var(--transition-fast);
display:flex; flex-direction:column;">
<div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem;">
<div class="flex items-center gap-4 mb-6">
<div style="width: 48px; height: 48px; background-color: var(--color-warning); border-radius: 0.5rem; display: flex; align-items: center; justify-content: center;">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
<circle cx="12" cy="12" r="10"/>

8
src/pages/contribute/knowledgebase.astro
View File

@@ -114,7 +114,7 @@ const sortedTools = data.tools.sort((a: any, b: any) => a.name.localeCompare(b.n
<div class="form-group">
<label class="form-label">Dokumente, Bilder, Videos (Optional)</label>
<div class="upload-area" id="upload-area">
<input type="file" id="file-input" multiple accept=".pdf,.doc,.docx,.txt,.md,.zip,.png,.jpg,.jpeg,.gif,.mp4,.webm" style="display: none;">
<input type="file" id="file-input" multiple accept=".pdf,.doc,.docx,.txt,.md,.zip,.png,.jpg,.jpeg,.gif,.mp4,.webm" class="hidden">
<div class="upload-placeholder">
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
@@ -125,7 +125,7 @@ const sortedTools = data.tools.sort((a: any, b: any) => a.name.localeCompare(b.n
<small>Die Dateien landen in der CC24-Cloud. Keine Malware.</small>
</div>
</div>
<div id="file-list" class="file-list" style="display: none;">
<div id="file-list" class="file-list hidden">
<h5>Ausgewählte Dateien</h5>
<div id="files-container"></div>
</div>
@@ -177,7 +177,7 @@ const sortedTools = data.tools.sort((a: any, b: any) => a.name.localeCompare(b.n
<a href="/" class="btn btn-secondary">Abbruch</a>
<button type="submit" id="submit-btn" class="btn btn-accent">
<span id="submit-text">Abschicken</span>
<span id="submit-spinner" style="display: none;">⏳</span>
<span id="submit-spinner" class="hidden">⏳</span>
</button>
</div>
</form>
@@ -193,7 +193,7 @@ const sortedTools = data.tools.sort((a: any, b: any) => a.name.localeCompare(b.n
Your knowledge‑base article has been submitted as an issue for review by maintainers.
</p>
<div style="display:flex; gap:1rem; justify-content:center;">
<a id="issue-link" href="#" target="_blank" class="btn btn-primary" style="display:none;">View Issue</a>
<a id="issue-link" href="#" target="_blank" class="btn btn-primary hidden">View Issue</a>
<a href="/" class="btn btn-secondary">Back to Home</a>
</div>
</div>

6
src/pages/contribute/tool.astro
View File

@@ -105,7 +105,7 @@ const isEdit = !!editTool;
<div style="border: 1px solid var(--color-border); border-radius: 0.5rem; padding: 1.5rem; margin-bottom: 2rem;">
<h3 style="margin: 0 0 1.5rem 0; color: var(--color-primary); border-bottom: 1px solid var(--color-border); padding-bottom: 0.5rem;">Kategorien</h3>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
<div class="grid-2 gap-8">
<div>
<label style="display: block; margin-bottom: 0.75rem; font-weight: 600;">Forensische Domänen</label>
<div style="display: grid; gap: 0.5rem;">
@@ -166,7 +166,7 @@ const isEdit = !!editTool;
</div>
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
<div class="grid-2 gap-8">
<div>
<label for="accessType" style="display: block; margin-bottom: 0.75rem; font-weight: 600;">Zugriff über:</label>
<select id="accessType" name="accessType">
@@ -257,7 +257,7 @@ const isEdit = !!editTool;
<h3 style="margin-bottom: 1rem;">Contribution Submitted!</h3>
<p id="success-message" style="margin-bottom: 1.5rem;">Your contribution has been submitted successfully.</p>
<div style="display: flex; gap: 1rem; justify-content: center;">
<a id="pr-link" href="#" target="_blank" class="btn btn-primary" style="display: none;">View Pull Request</a>
<a id="pr-link" href="#" target="_blank" class="btn btn-primary hidden">View Pull Request</a>
<a href="/" class="btn btn-secondary">Back to Home</a>
</div>
</div>

6
src/pages/impressum.astro
View File

@@ -3,8 +3,8 @@ import BaseLayout from '../layouts/BaseLayout.astro';
---
<BaseLayout title="Impressum" description="ForensicPathways - Impressum">
<section style="padding: 2rem 0; max-width: 900px; margin: 0 auto;">
<div style="text-align: center; margin-bottom: 3rem; padding: 2rem; background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-tertiary) 100%); border-radius: 1rem; border: 1px solid var(--color-border);">
<section class="section container-narrow">
<div class="header-center header-gradient mb-8">
<p>Bei dieser Webseite handelt es sich um ein privates Werk. Keine Bildungseinrichtung, kein Unternehmen sind finanziell oder moderierend Teil dieses Projekts.</p>
<h1>Impressum</h1>
<p>Angaben gemäß § 5 DDG</p>
@@ -16,7 +16,7 @@ Mario Stöckl<br>
</p>
<p><strong>Kontakt:</strong> <br>
Telefon: 01522-7086296<br>
E-Mail: <a href='mailto:mario.stoeckl@posteo.de'>mario.stoeckl@posteo.de</a>
E-Mail: <a href='mailto:mstoeck3@hs-mittweida.de'>mstoeck3@hs-mittweida.de</a>
</p>
<p><strong>PGP-Schlüssel:</strong><br>
Zur sicheren Kommunikation per E-Mail können Sie folgenden PGP-Schlüssel verwenden:<br><br>

2
src/pages/index.astro
View File

@@ -143,7 +143,7 @@ const phases = data.phases;
<TargetedScenarios />
<section id="filters-section" style="padding: 2rem 0;">
<section id="filters-section" class="section">
<div class="content-center-lg">
<h3 style="color: var(--color-text); margin-bottom: 0.5rem;">Alle verfügbaren Werkzeuge durchsuchen</h3>
<p style="color: var(--color-text-secondary); margin: 0;">

4
src/pages/knowledgebase.astro
View File

@@ -209,13 +209,13 @@ knowledgebaseEntries.sort((a: any, b: any) => a.title.localeCompare(b.title));
)}
</div>
<div id="no-kb-results" class="card text-center p-8" style="display: none;">
<div id="no-kb-results" class="card text-center p-8 hidden">
<h3 class="text-secondary mb-2">Keine Ergebnisse gefunden</h3>
<p class="text-secondary">Versuchen Sie es mit anderen Suchbegriffen.</p>
</div>
</section>
<div id="fab-container" class="fixed bottom-8 right-8 z-50" style="display: none;">
<div id="fab-container" class="fixed bottom-8 right-8 z-50 hidden">
<ContributionButton
type="write"
variant="primary"