localization

This commit is contained in:
overcuriousity
2025-07-26 00:31:23 +02:00
parent 4454046d22
commit 10331b9ece
8 changed files with 116 additions and 111 deletions

View File

@@ -23,10 +23,10 @@ const sortedTools = data.tools.sort((a: any, b: any) => a.name.localeCompare(b.n
<div class="container" style="max-width: 900px; margin: 0 auto; padding: 2rem 1rem;">
<!-- Header -->
<div class="hero-section">
<h1>Submit Knowledge Base Article</h1>
<p>Share documentation, tutorials, or insights about DFIR tools and methods. Your contribution will be submitted as an issue for maintainer review.</p>
{userEmail && <p><strong>Submitting as:</strong> {userEmail}</p>}
<div style="text-align: center; margin-bottom: 2rem; padding: 2rem; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%); color: white; border-radius: 1rem;">
<h1 style="margin-bottom: 1rem; font-size: 2rem;">Knowledgebase-Artikel</h1>
<p style="margin: 0.5rem 0; opacity: 0.9;">Danke für deinen Beitrag!</p>
{userEmail && <p style="margin: 0.5rem 0; opacity: 0.8;"><strong>Eingeloggt als:</strong> {userEmail}</p>}
</div>
<!-- Main Form -->
@@ -35,13 +35,13 @@ const sortedTools = data.tools.sort((a: any, b: any) => a.name.localeCompare(b.n
<!-- Basic Information -->
<div class="form-section">
<h3 class="section-title">Basic Information</h3>
<h3 class="section-title">Grundinformationen</h3>
<div class="form-grid-2">
<div class="form-group">
<label for="tool-name" class="form-label">Related Tool (Optional)</label>
<label for="tool-name" class="form-label">Zusammenhang zu Tool / Methode / Konzept (Optional)</label>
<select id="tool-name" name="toolName" class="form-input">
<option value="">Select a tool...</option>
<option value="">Auswählen...</option>
{sortedTools.map(tool => (
<option value={tool.name}>{tool.name} ({tool.type})</option>
))}
@@ -49,9 +49,9 @@ const sortedTools = data.tools.sort((a: any, b: any) => a.name.localeCompare(b.n
</div>
<div class="form-group">
<label for="difficulty" class="form-label">Difficulty Level (Optional)</label>
<label for="difficulty" class="form-label">Schwierigkeitsniveau (Optional)</label>
<select id="difficulty" name="difficulty" class="form-input">
<option value="">Select difficulty...</option>
<option value="">Niveau wählen...</option>
<option value="novice">Novice</option>
<option value="beginner">Beginner</option>
<option value="intermediate">Intermediate</option>
@@ -60,27 +60,28 @@ const sortedTools = data.tools.sort((a: any, b: any) => a.name.localeCompare(b.n
</select>
</div>
</div>
<br>
<div class="form-group">
<label for="title" class="form-label">Article Title (Optional)</label>
<label for="title" class="form-label">Titel des Artikels (Optional)</label>
<input
type="text"
id="title"
name="title"
maxlength="100"
placeholder="Clear, descriptive title for your article"
placeholder="Klarer, deskriptiver Titel"
class="form-input"
/>
</div>
<div class="form-group">
<label for="description" class="form-label">Description (Optional)</label>
<label for="description" class="form-label">Kurzbeschreibung (Optional)</label>
<textarea
id="description"
name="description"
maxlength="300"
rows="3"
placeholder="Brief summary of what this article covers"
placeholder="Kurze Zusammenfassung, worum es in dem Artikel geht"
class="form-input"
></textarea>
</div>
@@ -88,21 +89,21 @@ const sortedTools = data.tools.sort((a: any, b: any) => a.name.localeCompare(b.n
<!-- Content -->
<div class="form-section">
<h3 class="section-title">Content</h3>
<h3 class="section-title">Inhalt</h3>
<div class="form-group">
<label for="content" class="form-label">Article Content (Optional)</label>
<label for="content" class="form-label">Inhalt (Optional)</label>
<textarea
id="content"
name="content"
rows="8"
placeholder="Provide your content, documentation, tutorial steps, or notes here..."
placeholder="Schreibt hier so viel Text, wie ihr wollt. Die Formatierung wird später redaktionell angepasst."
class="form-input"
></textarea>
</div>
<div class="form-group">
<label for="external-link" class="form-label">External Link (Optional)</label>
<label for="external-link" class="form-label">Link (z.B. Primärquelle) (Optional)</label>
<input
type="url"
id="external-link"
@@ -115,10 +116,10 @@ const sortedTools = data.tools.sort((a: any, b: any) => a.name.localeCompare(b.n
<!-- File Upload -->
<div class="form-section">
<h3 class="section-title">Upload Files</h3>
<h3 class="section-title">Dateien hochladen</h3>
<div class="form-group">
<label class="form-label">Documents, Images, Videos (Optional)</label>
<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;">
<div class="upload-placeholder">
@@ -127,12 +128,12 @@ const sortedTools = data.tools.sort((a: any, b: any) => a.name.localeCompare(b.n
<polyline points="7 10 12 15 17 10"/>
<line x1="12" y1="15" x2="12" y2="3"/>
</svg>
<p>Click to select files or drag & drop</p>
<small>PDFs, documents, images, archives, etc.</small>
<p>Klicken, um Dateien auszuwählen oder Drag&Drop</p>
<small>Die Dateien landen in der CC24-Cloud. Keine Malware.</small>
</div>
</div>
<div id="file-list" class="file-list" style="display: none;">
<h5>Selected Files</h5>
<h5>Ausgewählte Dateien</h5>
<div id="files-container"></div>
</div>
</div>
@@ -140,11 +141,11 @@ const sortedTools = data.tools.sort((a: any, b: any) => a.name.localeCompare(b.n
<!-- Additional Information -->
<div class="form-section">
<h3 class="section-title">Additional Information</h3>
<h3 class="section-title">Zusatzinformation</h3>
<div class="form-grid-2">
<div class="form-group">
<label for="categories" class="form-label">Categories (Optional)</label>
<label for="categories" class="form-label">Kategorien (Optional)</label>
<input
type="text"
id="categories"
@@ -152,7 +153,7 @@ const sortedTools = data.tools.sort((a: any, b: any) => a.name.localeCompare(b.n
placeholder="setup, configuration, troubleshooting"
class="form-input"
/>
<small class="form-help">Comma-separated categories</small>
<small class="form-help">Komma-getrennte Kategorien</small>
</div>
<div class="form-group">
@@ -164,17 +165,17 @@ const sortedTools = data.tools.sort((a: any, b: any) => a.name.localeCompare(b.n
placeholder="installation, docker, linux, windows"
class="form-input"
/>
<small class="form-help">Comma-separated tags</small>
<small class="form-help">Komma-getrennte Tags</small>
</div>
</div>
<div class="form-group">
<label for="reason" class="form-label">Reason for Contribution (Optional)</label>
<label for="reason" class="form-label">Grund für den Beitrag (Optional)</label>
<textarea
id="reason"
name="reason"
rows="3"
placeholder="Why are you submitting this article? What problem does it solve?"
placeholder="Möchtest du sonst noch etwas mitteilen? Welches Problem wurde für dich gelöst??"
class="form-input"
></textarea>
</div>
@@ -182,9 +183,9 @@ const sortedTools = data.tools.sort((a: any, b: any) => a.name.localeCompare(b.n
<!-- Submit Button -->
<div class="form-actions">
<a href="/" class="btn btn-secondary">Cancel</a>
<a href="/" class="btn btn-secondary">Abbruch</a>
<button type="submit" id="submit-btn" class="btn btn-accent">
<span id="submit-text">Submit Article</span>
<span id="submit-text">Abschicken</span>
<span id="submit-spinner" style="display: none;">⏳</span>
</button>
</div>

View File

@@ -32,7 +32,7 @@ const isEdit = !!editTool;
<!-- Header -->
<div style="text-align: center; margin-bottom: 2rem; padding: 2rem; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%); color: white; border-radius: 1rem;">
<h1 style="margin-bottom: 1rem; font-size: 2rem;">{isEdit ? `Edit: ${editTool?.name}` : 'Contribute New Tool/Method/Concept'}</h1>
<h1 style="margin-bottom: 1rem; font-size: 2rem;">{isEdit ? `Edit: ${editTool?.name}` : 'Tool / Methode / Konzept beitragen'}</h1>
<p style="margin: 0.5rem 0; opacity: 0.9;">
{isEdit
? 'Passt die Informationen für dieses Tool/Methode/Konzept an. Dein Beitrag wird als Git-Issue veröffentlicht.'
@@ -58,9 +58,9 @@ const isEdit = !!editTool;
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem;">
<div>
<label for="type" style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Type <span style="color: var(--color-error);">*</span></label>
<label for="type" style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Typ <span style="color: var(--color-error);">*</span></label>
<select id="type" name="type" required>
<option value="">Select type...</option>
<option value="">Auswählen...</option>
<option value="software" selected={editTool?.type === 'software'}>Software/Tool</option>
<option value="method" selected={editTool?.type === 'method'}>Methode/Prozess</option>
<option value="concept" selected={editTool?.type === 'concept'}>Konzept/Wissen</option>
@@ -70,7 +70,7 @@ const isEdit = !!editTool;
<div>
<label for="skillLevel" style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Skill Level <span style="color: var(--color-error);">*</span></label>
<select id="skillLevel" name="skillLevel" required>
<option value="">Select level...</option>
<option value="">Auswählen...</option>
<option value="novice" selected={editTool?.skillLevel === 'novice'}>Novice</option>
<option value="beginner" selected={editTool?.skillLevel === 'beginner'}>Beginner</option>
<option value="intermediate" selected={editTool?.skillLevel === 'intermediate'}>Intermediate</option>
@@ -224,7 +224,7 @@ const isEdit = !!editTool;
<div style="margin-bottom: 1.5rem;">
<label for="tags" style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Tags</label>
<input type="text" id="tags" name="tags" value={editTool?.tags?.join(', ') || ''}
placeholder="Komma-getrennt: Passede Begriffe, nach denen ihr suchen würdet." />
placeholder="Komma-getrennt: Passende Begriffe, nach denen ihr suchen würdet." />
</div>
<div style="margin-bottom: 1.5rem;">