thomasandClaude Opus 4.8
65a5943993
Rolle, Tonfall und Regeln der KI (Unterlagen, Chat, E-Mail-Antwort, E-Mail-Absage, gemeinsame Stilregeln) lagen fest im Code. Sie liegen jetzt als Defaults in lib/prompts.js und lassen sich auf der Vorlagen-Seite je Prompt anpassen und wieder zuruecksetzen. Nur die System-Prompts sind editierbar. Die User-Prompts tragen das JSON-Skeleton, gegen das die Antwort geparst wird - ein Tippfehler dort wuerde die Generierung lahmlegen, also bleiben sie im Code. Gespeichert wird nur, was abweicht: ein Override ist eine Zeile in der neuen Tabelle `prompts`, "Zuruecksetzen" loescht sie. Damit bleiben die Defaults im Code die Wahrheit und wandern bei Updates automatisch mit. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
342 lines
22 KiB
Plaintext
342 lines
22 KiB
Plaintext
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<%- include('partials/head') %>
|
||
</head>
|
||
<body class="min-h-screen flex flex-col transition-colors duration-300 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100" id="body">
|
||
<%- include('partials/header', { hideSettings: true }) %>
|
||
|
||
<main class="flex-1 container mx-auto px-4 py-8 max-w-3xl">
|
||
<!-- Back link -->
|
||
<a href="/" class="inline-flex items-center gap-2 text-sm text-blue-600 dark:text-blue-400 hover:underline mb-6">
|
||
<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 19l-7-7m0 0l7-7m-7 7h18"></path>
|
||
</svg>
|
||
Zurück zur Übersicht
|
||
</a>
|
||
|
||
<h1 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Basis-Unterlagen (Vorlagen)</h1>
|
||
<p class="text-sm text-gray-500 dark:text-gray-400 mb-6">
|
||
Diese Unterlagen dienen der KI als Faktengrundlage. Beim Import einer Stelle über die Browser-Erweiterung
|
||
werden daraus automatisch zugeschnittene Bewerbungsunterlagen erstellt – es werden ausschließlich die
|
||
hier hinterlegten Informationen verwendet, es wird nichts hinzuerfunden. Füge z. B. dein
|
||
Standard-Anschreiben und deinen Lebenslauf als Text ein.
|
||
</p>
|
||
|
||
<!-- API key warning -->
|
||
<% if (!hasApiKey) { %>
|
||
<div class="rounded-lg bg-amber-50 dark:bg-amber-900/30 border border-amber-200 dark:border-amber-800 px-4 py-3 mb-6">
|
||
<div class="flex items-start gap-2">
|
||
<svg class="w-5 h-5 text-amber-600 dark:text-amber-400 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
|
||
</svg>
|
||
<div class="text-sm text-amber-800 dark:text-amber-200">
|
||
<p class="font-semibold">Kein API-Schlüssel konfiguriert</p>
|
||
<p>Setze die Umgebungsvariable <code class="px-1 rounded bg-amber-100 dark:bg-amber-800">OLLAMA_API_KEY</code>
|
||
(z. B. in einer <code class="px-1 rounded bg-amber-100 dark:bg-amber-800">.env</code>-Datei),
|
||
damit Bewerbungsunterlagen automatisch generiert werden können.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<% } %>
|
||
|
||
<!-- Existing base documents -->
|
||
<section class="space-y-4 mb-8">
|
||
<% if (basisDokumente.length === 0) { %>
|
||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 text-center text-gray-500 dark:text-gray-400">
|
||
Noch keine Basis-Unterlagen hinterlegt. Füge unten dein erstes Dokument hinzu.
|
||
</div>
|
||
<% } %>
|
||
<% basisDokumente.forEach(doc => { %>
|
||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
|
||
<form action="/vorlagen/<%= doc.id %>" method="POST" class="space-y-3">
|
||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
|
||
<div>
|
||
<label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Typ</label>
|
||
<select name="typ" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-800 dark:text-white">
|
||
<% basisTypOptions.forEach(opt => { %>
|
||
<option value="<%= opt %>" <%= doc.typ === opt ? 'selected' : '' %>><%= opt %></option>
|
||
<% }); %>
|
||
</select>
|
||
</div>
|
||
<div class="sm:col-span-2">
|
||
<label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Bezeichnung</label>
|
||
<input type="text" name="name" value="<%= doc.name || '' %>"
|
||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-800 dark:text-white"
|
||
placeholder="z. B. Standard-Anschreiben">
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Inhalt (Text)</label>
|
||
<textarea name="inhalt" rows="8"
|
||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-800 dark:text-white leading-relaxed font-mono text-sm"><%= doc.inhalt %></textarea>
|
||
</div>
|
||
<div class="flex justify-end gap-2">
|
||
<button type="submit"
|
||
class="px-3 py-1.5 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded-md transition-colors">
|
||
Speichern
|
||
</button>
|
||
</div>
|
||
</form>
|
||
<form action="/vorlagen/<%= doc.id %>/delete" method="POST" class="mt-1 text-right"
|
||
onsubmit="return confirm('Dieses Basis-Dokument löschen?');">
|
||
<button type="submit"
|
||
class="text-xs text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300 hover:underline">
|
||
Dokument löschen
|
||
</button>
|
||
</form>
|
||
</div>
|
||
<% }); %>
|
||
</section>
|
||
|
||
<!-- Add new base document -->
|
||
<section class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
|
||
<h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Basis-Dokument hinzufügen</h2>
|
||
<form action="/vorlagen" method="POST" class="space-y-3">
|
||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
|
||
<div>
|
||
<label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Typ</label>
|
||
<select name="typ" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-800 dark:text-white">
|
||
<% basisTypOptions.forEach(opt => { %>
|
||
<option value="<%= opt %>"><%= opt %></option>
|
||
<% }); %>
|
||
</select>
|
||
</div>
|
||
<div class="sm:col-span-2">
|
||
<label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Bezeichnung</label>
|
||
<input type="text" name="name"
|
||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-800 dark:text-white"
|
||
placeholder="z. B. Standard-Anschreiben">
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Inhalt (Text)</label>
|
||
<textarea name="inhalt" rows="10" required
|
||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-800 dark:text-white leading-relaxed font-mono text-sm"
|
||
placeholder="Füge hier den vollständigen Text deines Anschreibens oder Lebenslaufs ein…"></textarea>
|
||
</div>
|
||
<div class="flex justify-end">
|
||
<button type="submit" class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-md transition-colors">
|
||
Hinzufügen
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</section>
|
||
|
||
<!-- Static extra attachments (Zeugnisse etc.) -->
|
||
<h2 class="text-xl font-bold text-gray-800 dark:text-white mt-10 mb-2">Zusätzliche Anlagen</h2>
|
||
<p class="text-sm text-gray-500 dark:text-gray-400 mb-6">
|
||
Feste Dateien (z. B. Arbeitszeugnisse, Zertifikate), die jeder generierten Bewerbung
|
||
automatisch als Anhang beigelegt und im Anschreiben unter „Anlagen" aufgeführt werden.
|
||
Für einzelne Bewerbungen kannst du den Anhang später auf der Bewerbungsseite wieder entfernen.
|
||
</p>
|
||
|
||
<section class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 mb-6">
|
||
<% if (basisAnhaenge.length === 0) { %>
|
||
<p class="text-sm text-gray-500 dark:text-gray-400 mb-4">Noch keine zusätzlichen Anlagen hinterlegt.</p>
|
||
<% } else { %>
|
||
<ul class="space-y-2 mb-2">
|
||
<% basisAnhaenge.forEach(a => { %>
|
||
<li class="flex items-center justify-between gap-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/40 px-4 py-3">
|
||
<div class="flex items-center gap-3 min-w-0">
|
||
<svg class="w-6 h-6 text-red-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
|
||
</svg>
|
||
<div class="min-w-0">
|
||
<p class="text-sm font-medium text-gray-800 dark:text-gray-100 truncate"><%= a.name || a.dateiname %></p>
|
||
<p class="text-xs text-gray-500 dark:text-gray-400 truncate"><%= a.dateiname %></p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center gap-3 shrink-0">
|
||
<a href="/anlagen/<%= a.id %>/download" class="text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400 hover:underline">Download</a>
|
||
<form action="/anlagen/<%= a.id %>/delete" method="POST" onsubmit="return confirm('Diese Anlage löschen?');">
|
||
<button type="submit" class="text-red-500 hover:text-red-700 dark:text-red-400" aria-label="Anlage löschen">
|
||
<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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
|
||
</svg>
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</li>
|
||
<% }); %>
|
||
</ul>
|
||
<% } %>
|
||
|
||
<form action="/anlagen" method="POST" enctype="multipart/form-data" class="border-t border-gray-200 dark:border-gray-700 pt-4 mt-4 space-y-3">
|
||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||
<div>
|
||
<label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Datei (PDF)</label>
|
||
<input type="file" name="datei" accept="application/pdf,image/*" required
|
||
class="w-full text-sm text-gray-700 dark:text-gray-300 file:mr-3 file:py-2 file:px-3 file:rounded-md file:border-0 file:bg-blue-600 file:text-white hover:file:bg-blue-700">
|
||
</div>
|
||
<div>
|
||
<label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Bezeichnung (optional)</label>
|
||
<input type="text" name="name"
|
||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-800 dark:text-white"
|
||
placeholder="z. B. Arbeitszeugnis">
|
||
</div>
|
||
</div>
|
||
<div class="flex justify-end">
|
||
<button type="submit" class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-md transition-colors">
|
||
Anlage hochladen
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</section>
|
||
|
||
<!-- Signature -->
|
||
<h2 class="text-xl font-bold text-gray-800 dark:text-white mt-10 mb-2">Unterschrift</h2>
|
||
<p class="text-sm text-gray-500 dark:text-gray-400 mb-6">
|
||
Lade dein Unterschriftsbild (PNG/JPG, am besten mit transparentem Hintergrund) hoch. Es wird im
|
||
Anschreiben direkt unter „Mit freundlichen Grüßen" anstelle des getippten Namens eingefügt.
|
||
</p>
|
||
|
||
<section class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 mb-6">
|
||
<% if (hasSignatur) { %>
|
||
<div class="flex items-center justify-between gap-4 mb-4">
|
||
<div class="rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/40 p-3">
|
||
<img src="/unterschrift?t=<%= Date.now() %>" alt="Unterschrift" class="max-h-24 max-w-[240px] object-contain">
|
||
</div>
|
||
<form action="/unterschrift/delete" method="POST" onsubmit="return confirm('Unterschrift entfernen?');">
|
||
<button type="submit" class="text-sm text-red-600 hover:text-red-800 dark:text-red-400 hover:underline">Entfernen</button>
|
||
</form>
|
||
</div>
|
||
<% } else { %>
|
||
<p class="text-sm text-gray-500 dark:text-gray-400 mb-4">Noch keine Unterschrift hinterlegt.</p>
|
||
<% } %>
|
||
|
||
<form action="/unterschrift" method="POST" enctype="multipart/form-data"
|
||
class="border-t border-gray-200 dark:border-gray-700 pt-4 mt-2 flex flex-wrap items-end gap-3">
|
||
<div class="flex-1 min-w-[220px]">
|
||
<label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Unterschrift-Bild (PNG/JPG)</label>
|
||
<input type="file" name="signatur" accept="image/png,image/jpeg" required
|
||
class="w-full text-sm text-gray-700 dark:text-gray-300 file:mr-3 file:py-2 file:px-3 file:rounded-md file:border-0 file:bg-blue-600 file:text-white hover:file:bg-blue-700">
|
||
</div>
|
||
<button type="submit" class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-md transition-colors">
|
||
<%= hasSignatur ? 'Ersetzen' : 'Hochladen' %>
|
||
</button>
|
||
</form>
|
||
</section>
|
||
|
||
<!-- Applicant photo (Bewerberfoto) -->
|
||
<h2 class="text-xl font-bold text-gray-800 dark:text-white mt-10 mb-2">Bewerberfoto</h2>
|
||
<p class="text-sm text-gray-500 dark:text-gray-400 mb-6">
|
||
Lade optional dein Bewerbungsfoto (PNG/JPG, Hochformat) hoch. Es wird oben rechts im
|
||
Lebenslauf platziert; ohne Foto bleibt der Lebenslauf textlich wie bisher.
|
||
</p>
|
||
|
||
<section class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 mb-6">
|
||
<% if (hasFoto) { %>
|
||
<div class="flex items-center justify-between gap-4 mb-4">
|
||
<div class="rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/40 p-3">
|
||
<img src="/bewerbungsfoto?t=<%= Date.now() %>" alt="Bewerberfoto" class="max-h-40 max-w-[120px] object-contain">
|
||
</div>
|
||
<form action="/bewerbungsfoto/delete" method="POST" onsubmit="return confirm('Bewerberfoto entfernen?');">
|
||
<button type="submit" class="text-sm text-red-600 hover:text-red-800 dark:text-red-400 hover:underline">Entfernen</button>
|
||
</form>
|
||
</div>
|
||
<% } else { %>
|
||
<p class="text-sm text-gray-500 dark:text-gray-400 mb-4">Noch kein Bewerberfoto hinterlegt.</p>
|
||
<% } %>
|
||
|
||
<form action="/bewerbungsfoto" method="POST" enctype="multipart/form-data"
|
||
class="border-t border-gray-200 dark:border-gray-700 pt-4 mt-2 flex flex-wrap items-end gap-3">
|
||
<div class="flex-1 min-w-[220px]">
|
||
<label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Bewerberfoto (PNG/JPG, Hochformat)</label>
|
||
<input type="file" name="foto" accept="image/png,image/jpeg" required
|
||
class="w-full text-sm text-gray-700 dark:text-gray-300 file:mr-3 file:py-2 file:px-3 file:rounded-md file:border-0 file:bg-blue-600 file:text-white hover:file:bg-blue-700">
|
||
</div>
|
||
<button type="submit" class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-md transition-colors">
|
||
<%= hasFoto ? 'Ersetzen' : 'Hochladen' %>
|
||
</button>
|
||
</form>
|
||
</section>
|
||
|
||
<!-- Editable KI prompts -->
|
||
<h2 id="prompts" class="text-xl font-bold text-gray-800 dark:text-white mt-10 mb-2 scroll-mt-4">KI-Prompts</h2>
|
||
<p class="text-sm text-gray-500 dark:text-gray-400 mb-6">
|
||
Hier steht, <em>wie</em> die KI schreibt: Rolle, Tonfall und Regeln für Unterlagen, Chat und E-Mails.
|
||
Du kannst jeden Text anpassen – etwa um zu duzen, Formulierungen zu verbieten oder eine andere
|
||
Sprache zu verlangen. Der technische Aufbau (Aufbau des Lebenslaufs, Felder der E-Mail) ist fest
|
||
verdrahtet und wird davon nicht berührt, damit nichts kaputtgehen kann.
|
||
Mit <strong>Zurücksetzen</strong> holst du jederzeit den Standardtext zurück.
|
||
</p>
|
||
|
||
<section class="space-y-4 mb-8">
|
||
<% prompts.forEach(p => { %>
|
||
<details class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden" <%= p.angepasst ? 'open' : '' %>>
|
||
<summary class="cursor-pointer select-none px-6 py-4 flex items-center gap-3">
|
||
<span class="font-semibold text-gray-800 dark:text-white"><%= p.titel %></span>
|
||
<% if (p.angepasst) { %>
|
||
<span class="text-xs px-2 py-0.5 rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900/50 dark:text-blue-300">angepasst</span>
|
||
<% } else { %>
|
||
<span class="text-xs px-2 py-0.5 rounded-full bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-400">Standard</span>
|
||
<% } %>
|
||
</summary>
|
||
|
||
<div class="px-6 pb-6 border-t border-gray-200 dark:border-gray-700 pt-4">
|
||
<p class="text-sm text-gray-500 dark:text-gray-400 mb-3"><%= p.beschreibung %></p>
|
||
|
||
<% if (p.platzhalter && p.platzhalter.length) { %>
|
||
<p class="text-xs text-gray-500 dark:text-gray-400 mb-3">
|
||
Platzhalter:
|
||
<% p.platzhalter.forEach(ph => { %>
|
||
<code class="px-1 rounded bg-gray-100 dark:bg-gray-700">{{<%= ph %>}}</code>
|
||
<% }) %>
|
||
– wird beim Generieren automatisch ersetzt (Name aus den Einstellungen).
|
||
</p>
|
||
<% } %>
|
||
|
||
<form action="/vorlagen/prompts/<%= p.key %>" method="POST" class="space-y-3">
|
||
<textarea name="inhalt" rows="9"
|
||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white font-mono text-xs leading-relaxed"><%= p.inhalt %></textarea>
|
||
<div class="flex items-center gap-3">
|
||
<button type="submit" class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-md transition-colors">
|
||
Speichern
|
||
</button>
|
||
<% if (p.angepasst) { %>
|
||
<button type="submit" formaction="/vorlagen/prompts/<%= p.key %>/reset"
|
||
formnovalidate
|
||
onclick="return confirm('Diesen Prompt auf den Standardtext zurücksetzen? Deine Änderungen gehen verloren.');"
|
||
class="text-sm text-gray-600 dark:text-gray-400 hover:underline">
|
||
Auf Standard zurücksetzen
|
||
</button>
|
||
<% } %>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</details>
|
||
<% }) %>
|
||
</section>
|
||
</main>
|
||
|
||
<%- include('partials/footer') %>
|
||
|
||
<script>
|
||
(function () {
|
||
const root = document.documentElement;
|
||
const dm = localStorage.getItem('darkMode');
|
||
if (dm === 'enabled' || (!dm && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||
root.classList.add('dark');
|
||
}
|
||
const toggle = document.getElementById('darkModeToggle');
|
||
const sun = document.getElementById('sunIcon');
|
||
const moon = document.getElementById('moonIcon');
|
||
function sync() {
|
||
const d = root.classList.contains('dark');
|
||
if (sun) sun.classList.toggle('hidden', d);
|
||
if (moon) moon.classList.toggle('hidden', !d);
|
||
}
|
||
sync();
|
||
if (toggle) toggle.addEventListener('click', () => {
|
||
root.classList.toggle('dark');
|
||
localStorage.setItem('darkMode', root.classList.contains('dark') ? 'enabled' : 'disabled');
|
||
sync();
|
||
});
|
||
const cy = document.getElementById('currentYear');
|
||
if (cy) cy.textContent = new Date().getFullYear();
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|