2026-04-24 09:31:50 +02:00
<!DOCTYPE html>
< html lang = "de" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Prompt Templates< / title >
< style >
:root {
--bg-primary: #0f0f0f;
--bg-secondary: #1a1a1a;
--bg-card: #1e1e1e;
--bg-input: #262626;
--bg-hover: #2a2a2a;
--border: #2e2e2e;
--border-light: #3d3d3d;
--text-primary: #dbdbdb;
--text-secondary: #8b8b8b;
--text-muted: #5e5e5e;
--accent: #e24329;
--accent-hover: #fc6d26;
--accent-light: rgba(226, 67, 41, 0.12);
--green: #2da160;
--red: #dd3e31;
--yellow: #e0a118;
--gray: #737373;
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, sans-serif;
--mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: var(--bg-primary);
color: var(--text-primary);
font-family: var(--font);
font-size: 14px;
line-height: 1.5;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
}
2026-04-24 10:46:15 +02:00
/* Modal */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
display: none;
justify-content: center;
align-items: center;
z-index: 1000;
padding: 20px;
}
.modal-overlay.active {
display: flex;
}
.modal {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 8px;
max-width: 900px;
width: 100%;
max-height: 80vh;
overflow: hidden;
display: flex;
flex-direction: column;
}
.modal-header {
padding: 16px 20px;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
}
.modal-header h2 {
font-size: 16px;
font-weight: 600;
}
.modal-body {
padding: 20px;
overflow-y: auto;
}
.modal-close {
background: none;
border: none;
color: var(--text-secondary);
cursor: pointer;
font-size: 24px;
padding: 4px 8px;
border-radius: 4px;
}
.modal-close:hover {
color: var(--text-primary);
background: var(--bg-hover);
}
.modal-actions {
padding: 16px 20px;
border-top: 1px solid var(--border);
display: flex;
justify-content: flex-end;
gap: 8px;
}
2026-04-24 09:31:50 +02:00
.header {
background: var(--bg-secondary);
border-bottom: 1px solid var(--border);
padding: 16px 24px;
display: flex;
align-items: center;
gap: 16px;
}
.header h1 {
font-size: 18px;
font-weight: 600;
}
.header .badge {
background: var(--accent-light);
color: var(--accent);
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
}
.header .actions {
margin-left: auto;
display: flex;
gap: 8px;
}
.btn {
background: var(--bg-input);
color: var(--text-primary);
border: 1px solid var(--border);
padding: 8px 16px;
border-radius: 6px;
font-size: 13px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
}
.btn:hover {
background: var(--bg-hover);
border-color: var(--border-light);
}
.btn-primary {
background: var(--accent);
color: white;
border-color: var(--accent);
}
.btn-primary:hover {
background: var(--accent-hover);
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 24px;
}
.nav {
display: flex;
gap: 8px;
margin-bottom: 24px;
border-bottom: 1px solid var(--border);
padding-bottom: 16px;
}
.nav a {
color: var(--text-secondary);
padding: 8px 16px;
border-radius: 4px;
font-size: 13px;
text-decoration: none;
}
.nav a:hover {
color: var(--text-primary);
background: var(--bg-hover);
}
.nav a.active {
color: var(--accent);
background: var(--accent-light);
}
.card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
}
.card-header {
padding: 16px 20px;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
}
.card-header h2 {
font-size: 15px;
font-weight: 600;
}
.card-body {
padding: 20px;
}
.template-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 16px;
}
.template-item {
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 8px;
padding: 20px;
transition: border-color 0.15s;
}
.template-item:hover {
border-color: var(--border-light);
}
.template-item h3 {
font-size: 14px;
font-weight: 600;
margin-bottom: 8px;
color: var(--accent-hover);
}
.template-item .meta {
display: flex;
gap: 12px;
margin-bottom: 12px;
font-size: 12px;
color: var(--text-secondary);
}
.template-item .meta span {
display: inline-flex;
align-items: center;
gap: 4px;
}
.template-item p {
font-size: 13px;
color: var(--text-secondary);
margin-bottom: 12px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.template-item .tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.template-item .tag {
background: var(--bg-input);
color: var(--text-muted);
padding: 3px 8px;
border-radius: 4px;
font-size: 11px;
}
.template-item .actions {
display: flex;
gap: 8px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--border);
}
.template-item .btn-icon {
padding: 6px 12px;
font-size: 12px;
}
.empty-state {
text-align: center;
padding: 60px 20px;
color: var(--text-muted);
}
.empty-state h3 {
font-size: 16px;
font-weight: 500;
margin-bottom: 8px;
color: var(--text-secondary);
}
.code-block {
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 6px;
padding: 16px;
font-family: var(--mono);
font-size: 12px;
overflow-x: auto;
2026-04-24 10:46:15 +02:00
white-space: pre-wrap;
word-wrap: break-word;
2026-04-24 09:31:50 +02:00
margin-top: 12px;
color: var(--text-primary);
2026-04-24 10:46:15 +02:00
max-height: 400px;
overflow-y: auto;
2026-04-24 09:31:50 +02:00
}
/* Filter bar */
.filter-bar {
display: flex;
gap: 12px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.filter-bar input {
background: var(--bg-input);
border: 1px solid var(--border);
color: var(--text-primary);
padding: 8px 12px;
border-radius: 6px;
font-size: 13px;
flex: 1;
min-width: 200px;
}
.filter-bar input:focus {
outline: none;
border-color: var(--accent);
}
2026-04-24 10:46:15 +02:00
.toast {
position: fixed;
bottom: 20px;
right: 20px;
background: var(--bg-card);
border: 1px solid var(--border);
padding: 12px 16px;
border-radius: 6px;
font-size: 13px;
display: none;
z-index: 1001;
}
.toast.show {
display: block;
animation: fadeIn 0.2s;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
2026-04-24 09:31:50 +02:00
/* Responsive */
@media (max-width: 768px) {
.container {
padding: 16px;
}
.template-grid {
grid-template-columns: 1fr;
}
.header {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.nav {
overflow-x: auto;
padding-bottom: 8px;
}
2026-04-24 10:46:15 +02:00
.modal {
margin: 10px;
}
2026-04-24 09:31:50 +02:00
}
< / style >
< / head >
< body >
2026-04-24 10:46:15 +02:00
<!-- Modal -->
< div class = "modal-overlay" id = "modal" >
< div class = "modal" >
< div class = "modal-header" >
< h2 id = "modal-title" > Template< / h2 >
< button class = "modal-close" onclick = "closeModal()" > × < / button >
< / div >
< div class = "modal-body" >
< div class = "code-block" id = "modal-content" > Lädt...< / div >
< / div >
< div class = "modal-actions" >
< button class = "btn" onclick = "copyModalContent()" >
< svg width = "14" height = "14" viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" >
< rect x = "9" y = "9" width = "13" height = "13" rx = "2" ry = "2" / >
< path d = "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" / >
< / svg >
Inhalt kopieren
< / button >
< button class = "btn" onclick = "closeModal()" > Schließen< / button >
< / div >
< / div >
< / div >
<!-- Toast -->
< div class = "toast" id = "toast" > < / div >
2026-04-24 09:31:50 +02:00
< div class = "header" >
< h1 > Prompt Templates< / h1 >
< span class = "badge" > Git Managed< / span >
< div class = "actions" >
< button class = "btn btn-primary" >
< svg width = "16" height = "16" viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" >
< path d = "M12 5v14M5 12h14" / >
< / svg >
Neues Template
< / button >
< / div >
< / div >
< div class = "container" >
< nav class = "nav" >
< a href = "#" class = "active" > Alle< / a >
< a href = "#?type=system" > System< / a >
< a href = "#?type=user" > User< / a >
< a href = "#?type=custom" > Custom< / a >
< a href = "#?type=categories" > Kategorien< / a >
< / nav >
< div class = "filter-bar" >
< input type = "text" id = "search" placeholder = "Suche Templates... (Name, Beschreibung, Tags)" >
< / div >
< div class = "card" >
< div class = "card-header" >
< h2 > Templates< / h2 >
< span id = "count" > 0 Template(s)< / span >
< / div >
< div class = "card-body" >
< div class = "template-grid" id = "templates" > < / div >
< / div >
< / div >
< div class = "card" style = "margin-top: 16px;" >
< div class = "card-header" >
< h2 > Usage Beispiel< / h2 >
< / div >
< div class = "card-body" >
2026-04-24 10:46:15 +02:00
< div class = "code-block" > # Validierung
2026-04-24 09:31:50 +02:00
$ python scripts/validate.py templates/system/commit_analysis.json
# Alle validieren
2026-04-24 10:46:15 +02:00
$ python scripts/validate.py --all
# Server starten
$ python web/serve.py< / div >
2026-04-24 09:31:50 +02:00
< / div >
< / div >
< / div >
< script >
2026-04-24 10:46:15 +02:00
let allTemplates = [];
// Modal-Funktionen
function showModal(title, content) {
document.getElementById('modal-title').textContent = title;
document.getElementById('modal-content').textContent = content;
document.getElementById('modal').classList.add('active');
}
function closeModal() {
document.getElementById('modal').classList.remove('active');
}
function showToast(message) {
const toast = document.getElementById('toast');
toast.textContent = message;
toast.classList.add('show');
setTimeout(() => toast.classList.remove('show'), 3000);
}
async function copyModalContent() {
const content = document.getElementById('modal-content').textContent;
try {
await navigator.clipboard.writeText(content);
showToast('✓ Inhalt kopiert');
} catch (e) {
// Fallback für ältere Browser
const textarea = document.createElement('textarea');
textarea.value = content;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
showToast('✓ Inhalt kopiert');
}
}
// Template-Inhalt laden und anzeigen
async function viewTemplate(path) {
try {
const response = await fetch(path);
if (!response.ok) throw new Error('Datei nicht gefunden');
let content = await response.text();
// Für JSON: formatiert anzeigen
if (path.endsWith('.json')) {
try {
const data = JSON.parse(content);
content = JSON.stringify(data, null, 2);
} catch (e) {
// Nicht valides JSON, als Raw Text anzeigen
}
}
showModal(path.split('/').pop(), content);
} catch (e) {
showModal(path, `Fehler beim Laden: ${e.message}`);
}
}
// Template-Inhalt kopieren
async function copyContent(path) {
try {
const response = await fetch(path);
if (!response.ok) throw new Error('Datei nicht gefunden');
let content = await response.text();
// Für JSON: originalen Inhalt (nicht formatiert) kopieren
if (path.endsWith('.json')) {
try {
JSON.parse(content);
// Valides JSON - originalen Inhalt behalten
} catch (e) {
// Nicht valides JSON
}
}
await navigator.clipboard.writeText(content);
showToast('✓ Inhalt kopiert');
} catch (e) {
showToast(`✗ Fehler: ${e.message}`);
}
}
2026-04-24 09:31:50 +02:00
// Template-Daten laden
async function loadTemplates() {
2026-04-24 10:46:15 +02:00
const response = await fetch('/templates.json');
2026-04-24 09:31:50 +02:00
if (!response.ok) {
return await scanTemplates();
}
return response.json();
}
async function scanTemplates() {
const templates = [];
2026-04-24 10:46:15 +02:00
const systemFiles = ['commit_analysis', 'code_reviewer', 'summarizer'];
2026-04-24 09:31:50 +02:00
for (const file of systemFiles) {
try {
2026-04-24 10:46:15 +02:00
const response = await fetch(`/templates/system/${file}.json`);
2026-04-24 09:31:50 +02:00
if (response.ok) {
const data = await response.json();
templates.push({
2026-04-24 10:46:15 +02:00
path: `/templates/system/${file}.json`,
2026-04-24 09:31:50 +02:00
type: 'system',
name: data.name || file,
description: data.description || '',
version: data.version || '1.0',
tags: data.tags || [],
format: 'json'
});
}
} catch (e) {}
}
const userFiles = ['email_draft', 'brainstorming'];
for (const file of userFiles) {
try {
2026-04-24 10:46:15 +02:00
const response = await fetch(`/templates/user/${file}.md`);
2026-04-24 09:31:50 +02:00
if (response.ok) {
const text = await response.text();
const name = text.split('\n')[0].replace('# ', '');
templates.push({
2026-04-24 10:46:15 +02:00
path: `/templates/user/${file}.md`,
2026-04-24 09:31:50 +02:00
type: 'user',
name: name,
description: '',
version: '1.0',
tags: [],
format: 'md'
});
}
} catch (e) {}
}
return templates;
}
function renderTemplates(templates) {
const container = document.getElementById('templates');
const count = document.getElementById('count');
count.textContent = `${templates.length} Template(s)`;
if (templates.length === 0) {
container.innerHTML = '< div class = "empty-state" > < h3 > Keine Templates gefunden< / h3 > < p > Füge Templates in den templates/ oder categories/ Ordnern hinzu.< / p > < / div > ';
return;
}
container.innerHTML = templates.map(t => `
< div class = "template-item" >
< h3 > ${t.name}< / h3 >
< div class = "meta" >
< span > 🏷️ ${t.type}< / span >
< span > 📄 ${t.format}< / span >
< span > 📌 v${t.version}< / span >
< / div >
< p > ${t.description || 'Keine Beschreibung'}< / p >
< div class = "tags" >
${t.tags.map(tag => `< span class = "tag" > #${tag}< / span > `).join('')}
< / div >
< div class = "actions" >
< button class = "btn btn-icon" onclick = "viewTemplate('${t.path}')" > Anzeigen< / button >
2026-04-24 10:46:15 +02:00
< button class = "btn btn-icon" onclick = "copyContent('${t.path}')" > Inhalt kopieren< / button >
2026-04-24 09:31:50 +02:00
< / div >
< / div >
`).join('');
}
// Search
document.getElementById('search').addEventListener('input', async (e) => {
const query = e.target.value.toLowerCase();
const templates = await loadTemplates();
const filtered = templates.filter(t =>
t.name.toLowerCase().includes(query) ||
t.description.toLowerCase().includes(query) ||
t.tags.some(tag => tag.toLowerCase().includes(query))
);
renderTemplates(filtered);
});
2026-04-24 10:46:15 +02:00
// Close modal on overlay click
document.getElementById('modal').addEventListener('click', (e) => {
if (e.target === e.currentTarget) closeModal();
});
// Escape key closes modal
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') closeModal();
});
2026-04-24 09:31:50 +02:00
// Initial load
2026-04-24 10:46:15 +02:00
loadTemplates().then(t => {
allTemplates = t;
renderTemplates(t);
});
2026-04-24 09:31:50 +02:00
< / script >
< / body >
< / html >
