prompt_template/web/index.html

106 lines
3.3 KiB
HTML
Raw Normal View History

<!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>
<link rel="stylesheet" href="css/variables.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- Modal -->
<div class="modal-overlay" id="modal" role="dialog" aria-label="Template anzeigen">
<div class="modal">
<div class="modal-header">
<h2 id="modal-title">Template</h2>
<button class="modal-close" onclick="closeModal()">&times;</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>
<!-- Edit Modal -->
<div class="modal-overlay" id="edit-modal" role="dialog" aria-label="Template bearbeiten">
<div class="modal" style="max-width: 800px;">
<div class="modal-header">
<h2 id="edit-title">Template bearbeiten</h2>
<button class="modal-close" onclick="closeEditModal()">&times;</button>
</div>
<div class="modal-body" id="edit-content-content" style="min-height: 300px; padding: 16px; overflow-y: auto;"></div>
<div class="modal-actions">
<button class="btn btn-primary" onclick="saveEditedContent()">Speichern</button>
<button class="btn" onclick="closeEditModal()">Abbrechen</button>
</div>
</div>
</div>
<!-- Toast -->
<div class="toast" id="toast"></div>
<div class="header">
<h1>Prompt Templates</h1>
<span class="badge">Git Managed</span>
<div class="actions"></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>
</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">
<div class="code-block"># Validierung
$ python scripts/validate.py templates/system/commit_analysis.json
# Alle validieren
$ python scripts/validate.py --all
# Server starten
$ python web/serve.py</div>
</div>
</div>
</div>
<!-- Load external JS modules in dependency order -->
<script src="js/utils.js"></script>
<script src="js/modal.js"></script>
<script src="js/editor.js"></script>
<script src="js/api.js"></script>
<script src="js/templates.js"></script>
<script src="js/main.js"></script>
</body>
</html>