CasaDePrompt/atelier/static/index.html

<!doctype html>
<html lang="de"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="theme-color" content="#121413"><title>CasaDePrompt</title><link rel="icon" type="image/png" href="/static/icon.png"><link rel="stylesheet" href="/static/style.css"><script defer src="/static/app.js"></script></head>
<body>
<div id="login" class="login hidden"><div class="login-card"><div class="brand-mark">c<span>✳</span></div><p class="eyebrow">DEIN RAUM FÜR GUTE GEDANKEN</p><h1>Willkommen<br>zu Hause.</h1><p class="muted">Deine Prompts. Deine Modelle. Dein Archiv.</p><form id="login-form"><label>Zugangsschlüssel<input id="login-token" type="password" autocomplete="current-password" required placeholder="Schlüssel aus /data/admin-token"></label><button class="primary">Casa öffnen <span>↗</span></button><p id="login-error" role="alert"></p></form><small>Privat auf deinem Server · Keine Cloud erforderlich</small></div></div>
<div id="shell" class="shell hidden">
<aside class="sidebar"><a class="brand" href="/">c<span>✳</span><strong>CasaDe<br>Prompt<span class="brand-dot">.</span></strong></a><div class="workspace"><i class="status-dot"></i> Persönliches Archiv <span>LOCAL</span></div><p class="nav-label">BIBLIOTHEK</p><nav><button data-view="all" class="nav active"><span>▦</span> Alle Prompts <b id="all-count">0</b></button><button data-view="favorites" class="nav"><span>☆</span> Favoriten</button><button data-view="trash" class="nav"><span>⌫</span> Papierkorb</button></nav><div class="category-heading"><p class="nav-label">KATEGORIEN</p><span>↙</span></div><div id="categories"></div><div class="sidebar-bottom"><div class="local-note"><span>✧</span><strong>Gute Ideen bleiben.</strong><p>Ein Zuhause für die Prompts,<br>die wirklich funktionieren.</p></div><button id="settings-open" class="nav"><span>⚙</span> Einstellungen</button><button id="logout" class="nav subtle"><span>↪</span> Abmelden</button><div class="foot-brand">CASA DE PROMPT <span>v0.1</span></div></div></aside>
<main><header class="topbar"><span>Workspace <span class="slash">/</span> <b>Bibliothek</b></span><span class="private-pill"><i class="status-dot"></i> Privat & lokal</span></header><section class="library"><div class="page-heading"><div><p class="eyebrow">WENIGER SUCHEN. BESSER PROMPTEN.</p><h1 id="view-title">Deine besten Worte<span>.</span></h1><p class="muted" id="view-subtitle">Sammeln, verfeinern und genau dann wiederfinden, wenn du sie brauchst.</p></div><button id="new-prompt" class="primary">＋ Neuer Prompt</button></div><div class="search-row"><div class="search-box"><span>⌕</span><input id="search" placeholder="Was möchtest du erreichen?" aria-label="Prompts durchsuchen"><kbd>⌘ K</kbd></div><select id="search-mode" aria-label="Suchmodus"><option value="auto">✧ Intelligente Suche</option value="semantic">Nach Bedeutung</option><option value="text">Nach Wörtern</option></select></div><div class="library-meta"><div><b id="result-count">0 Prompts</b><span id="search-status">Deine persönliche Sammlung</span></div><select id="sort" aria-label="Sortieren"><option value="recent">Zuletzt bearbeitet</option><option value="title">Alphabetisch</option></select></div><div id="search-warning" class="notice hidden"></div><div id="cards" class="cards"></div><div id="empty" class="empty hidden"><div>✳</div><h2>Platz für deine nächste gute Idee.</h2><p>Lege deinen ersten Prompt an. Du kannst ihn später<br>mit deinem Modell verfeinern und nach Bedeutung finden.</p><button id="empty-new" class="primary">＋ Ersten Prompt anlegen</button></div><footer class="library-footer"><span>Ein guter Prompt ist zu wertvoll, um verloren zu gehen.</span><span>MADE FOR YOUR MIND ↗</span></footer></section></main>
</div>
<dialog id="editor"><form id="editor-form"><header class="dialog-header"><div><p class="eyebrow">PROMPT STUDIO</p><h2 id="editor-heading">Neuer Prompt</h2></div><button type="button" data-close="editor" class="icon" aria-label="Schließen">×</button></header><div class="editor-grid"><section><label>Titel<input id="p-title" required maxlength="200" placeholder="Gib deinem Prompt einen Namen"></label><label>Kurzbeschreibung<input id="p-description" maxlength="2000" placeholder="Wobei hilft dir dieser Prompt?"></label><div class="two-fields"><label>Kategorie<input id="p-category" maxlength="100" list="category-list" placeholder="z. B. Kommunikation"><datalist id="category-list"></datalist></label><label>Tags<input id="p-tags" placeholder="Kunde, E-Mail, Absage"></label></div><div class="body-label"><label for="p-body">Prompt</label><span id="char-count">0 Zeichen</span></div><textarea id="p-body" required maxlength="60000" placeholder="Beschreibe die Aufgabe, den Kontext und das gewünschte Ergebnis. Nutze {{Platzhalter}} für variable Inhalte."></textarea><div class="editor-options"><label class="check"><input type="checkbox" id="p-favorite"> Als Favorit markieren</label><button type="button" id="copy-body" class="text-button">Kopieren ↗</button></div><label>Versionsnotiz<input id="p-note" maxlength="300" placeholder="Was hat sich geändert?"></label></section><aside class="studio-panel"><div class="ai-heading"><span>✧</span><h3>Ein bisschen Feinschliff.</h3></div><p class="muted">Dein Modell macht einen Vorschlag. Du entscheidest, was bleibt.</p><label>Dein Wunsch<textarea id="ai-instruction">Verbessere ausschließlich Formulierung und Lesbarkeit. Bewahre Inhalt und Ton. Ergänze keine Anforderungen und triff keine zusätzlichen Entscheidungen.</textarea></label><button type="button" id="improve" class="secondary full">✧ Mit KI verfeinern</button><div id="ai-result" class="hidden"><p class="eyebrow">VORSCHLAG · NOCH NICHT GESPEICHERT</p><div id="ai-review" class="notice" role="status"></div><textarea id="ai-draft" aria-label="KI-Vorschlag"></textarea><button type="button" id="recheck-ai" class="secondary full">Aktuellen Vorschlag erneut prüfen</button><button type="button" id="accept-ai" class="secondary full">Vorschlag übernehmen ↓</button></div><button type="button" id="organize" class="text-button full">⌘ Kategorie &amp; Tags vorschlagen</button><div id="organize-result" class="hidden"><p id="organize-preview" class="muted"></p><button type="button" id="accept-organize" class="secondary full">Einordnung übernehmen</button></div><div class="history-heading"><h3>Versionsverlauf</h3><span id="current-version">Entwurf</span></div><div id="history" class="history"><p class="muted">Deine erste Version beginnt hier.</p></div></aside></div><footer class="dialog-footer"><span id="save-state">Änderungen werden als neue Version gespeichert.</span><div><button type="button" data-close="editor" class="secondary">Abbrechen</button><button class="primary" id="save-prompt">Prompt speichern ↗</button></div></footer></form></dialog>
<dialog id="settings"><header class="dialog-header"><div><p class="eyebrow">DEIN HAUS, DEINE REGELN</p><h2>Einstellungen</h2></div><button data-close="settings" class="icon" aria-label="Schließen">×</button></header><div class="settings-content"><section><h3>01 / Deine Modelle</h3><p class="muted">OpenAI-kompatibel, auch im lokalen Netz. Die Basis-URL enthält üblicherweise <code>/v1</code>.</p><form id="settings-form"><label>API-Basis-URL<input id="s-base_url" type="url" placeholder="http://192.168.1.20:1234/v1"></label><label>API-Key<input id="s-api_key" type="password" autocomplete="new-password" placeholder="Leer lassen, um vorhandenen Schlüssel zu behalten"></label><label class="check"><input id="clear-api-key" type="checkbox"> Gespeicherten API-Key entfernen</label><div class="model-row"><label>Chatmodell<input id="s-chat_model" list="chat-models" placeholder="Modell scannen oder ID eingeben"><datalist id="chat-models"></datalist></label><button type="button" id="scan-chat" class="secondary">Modelle scannen</button></div><details><summary>Separater Endpoint für Embeddings (optional)</summary><label>Embedding-Basis-URL<input id="s-embedding_url" type="url" placeholder="Leer = gleicher Endpoint wie Chatmodell"></label><label>Embedding-API-Key<input id="s-embedding_key" type="password" autocomplete="new-password" placeholder="Leer = gespeicherten Schlüssel behalten"></label><label class="check"><input id="clear-embedding-key" type="checkbox"> Embedding-Key entfernen</label></details><div class="model-row"><label>Embedding-Modell<input id="s-embedding_model" list="embedding-models" placeholder="Für Suche nach Bedeutung"><datalist id="embedding-models"></datalist></label><button type="button" id="scan-embedding" class="secondary">Modelle scannen</button></div><p class="hint">Ein Chatmodell verbessert Texte. Ein Embedding-Modell macht sie nach Bedeutung auffindbar. Die Modellliste sagt nicht automatisch, welcher Typ ein Modell ist.</p><button class="primary">Einstellungen speichern</button></form></section><section><h3>02 / Suche nach Bedeutung</h3><p class="muted">Neue und bearbeitete Prompts werden beim Speichern indexiert. Nach einem Modellwechsel bitte den Index ergänzen.</p><p id="index-status" class="index-status"></p><div class="button-row"><button id="index-fill" class="secondary">Index ergänzen</button><button id="index-rebuild" class="text-button">Komplett neu aufbauen</button></div><p class="hint">Hierbei werden Prompt-Inhalte an deinen eingestellten Embedding-Endpoint gesendet.</p></section><section><h3>03 / MCP für deine Assistenten</h3><p class="muted">Ein Assistent wie OpenClaw kann Prompts über MCP suchen und lesen. Transport: Streamable HTTP. Keine Schreibrechte.</p><label>Server-URL<input id="mcp-url" readonly></label><button id="mcp-reveal" class="secondary">Verbindungsdaten anzeigen</button><pre id="mcp-config" class="hidden"></pre><p class="hint">Der MCP-Schlüssel gewährt Lesezugriff auf dein Archiv. Nur an deine eigenen Clients weitergeben.</p></section><section><h3>04 / Dein Archiv bleibt deins</h3><p class="muted">JSON-Export inklusive aller Versionen. Ein Import legt neue Kopien an und überschreibt nichts. API-Keys sind nicht enthalten.</p><div class="button-row"><a class="secondary" href="/api/export" download>Archiv exportieren ↗</a><button id="import-button" class="secondary">Archiv importieren</button><input type="file" id="import-file" accept="application/json,.json" hidden></div></section></div></dialog>
<dialog id="revision"><header class="dialog-header"><h2 id="revision-title">Version</h2><button data-close="revision" class="icon" aria-label="Schließen">×</button></header><div class="revision-content"><p id="revision-description"></p><pre id="revision-body"></pre></div><footer class="dialog-footer"><span>Das Original bleibt im Verlauf erhalten.</span><button id="restore-version" class="primary">Als Entwurf übernehmen</button></footer></dialog>
<div id="toast" role="status" class="toast hidden"></div>
</body></html>