113bc1bc20
- TinyMCE (selbst gehostet) mit Base64-Bildeinbettung statt contenteditable - Kategorie-Tabs Vorlagen/Fußzeilen/Signaturen + Verwaltung (Übersicht, Abteilungen, E-Mail-Zuordnung, Schlagwörter) - /api/tree über rekursive git/trees-API (1 statt ~17 Anfragen) - Plus-Jakarta-Sans-Font, SVG-Icons, farbige Abteilungs-Badges - Platzhalter-Hinweis (nur in Signatur-Vorlage _vorlage.html) - LOCAL- und DEMO-Modus im Server Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
147 lines
6.7 KiB
HTML
147 lines
6.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>HPS Vorlagen & Signaturen</title>
|
||
<link rel="stylesheet" href="style.css" />
|
||
<link rel="icon" href="logo.svg" />
|
||
</head>
|
||
<body>
|
||
<!-- ── Topbar ── -->
|
||
<header class="topbar">
|
||
<div class="brand">
|
||
<span class="brand-logo"><img src="logo.svg" alt="Hotel Park Soltau" /></span>
|
||
<span class="brand-divider" aria-hidden="true"></span>
|
||
<span class="brand-title">Vorlagen & Signaturen</span>
|
||
</div>
|
||
<div class="topbar-right">
|
||
<span id="status-pill" class="status-pill status-unknown" title="Verbindungsstatus">
|
||
<span class="status-dot"></span>
|
||
<span id="status-text">Verbinde…</span>
|
||
</span>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ── Config-Banner ── -->
|
||
<div id="config-banner" class="config-banner" hidden>
|
||
<strong>Verbindung nicht konfiguriert.</strong>
|
||
<span>
|
||
Bitte die Umgebungsvariablen <code>GITEA_URL</code>, <code>GITEA_OWNER</code>,
|
||
<code>GITEA_REPO</code> und <code>GITEA_TOKEN</code> setzen (siehe <code>.env.example</code>)
|
||
und den Dienst neu starten.
|
||
</span>
|
||
</div>
|
||
|
||
<!-- ── App ── -->
|
||
<div class="app">
|
||
<!-- Kategorie-Navigation -->
|
||
<nav class="cat-tabs" role="tablist">
|
||
<button class="cat-tab is-active" data-cat="templates" role="tab"><span class="ic" data-icon="file-text"></span><span>Vorlagen</span></button>
|
||
<button class="cat-tab" data-cat="footers" role="tab"><span class="ic" data-icon="panel-bottom"></span><span>Fußzeilen</span></button>
|
||
<button class="cat-tab" data-cat="headers" role="tab"><span class="ic" data-icon="pen-line"></span><span>Signaturen</span></button>
|
||
<button class="cat-tab" data-cat="admin" role="tab"><span class="ic" data-icon="settings"></span><span>Verwaltung</span></button>
|
||
<span class="cat-spacer"></span>
|
||
<button id="btn-refresh" class="icon-btn" title="Liste neu laden"><span class="ic" data-icon="refresh"></span></button>
|
||
</nav>
|
||
|
||
<div class="workspace">
|
||
<!-- Listen-Spalte -->
|
||
<aside class="listpane">
|
||
<div class="listpane-head">
|
||
<div class="search-wrap">
|
||
<span class="ic search-ic" data-icon="search"></span>
|
||
<input type="search" id="tree-search" class="tree-search" placeholder="Suchen…" autocomplete="off" />
|
||
</div>
|
||
<button id="btn-list-add" class="btn btn-primary btn-sm"><span class="ic" data-icon="plus"></span><span id="btn-list-add-label">Neu</span></button>
|
||
</div>
|
||
<div id="list-body" class="list-body"></div>
|
||
</aside>
|
||
|
||
<!-- Inhalts-Spalte -->
|
||
<main class="editorpane">
|
||
<!-- Leerzustand -->
|
||
<div class="empty-state" id="empty-state">
|
||
<div class="empty-illu" aria-hidden="true">
|
||
<svg viewBox="0 0 24 24" width="60" height="60" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M9 13h6"/><path d="M9 17h4"/>
|
||
</svg>
|
||
</div>
|
||
<h2>Wähle links einen Eintrag</h2>
|
||
<p>Vorlage, Fußzeile oder Signatur anklicken zum Bearbeiten – oder über <strong>＋ Neu</strong> einen neuen Eintrag anlegen.</p>
|
||
</div>
|
||
|
||
<!-- Datei-Editor -->
|
||
<div class="editor-panel" id="editor-panel" hidden>
|
||
<div class="editor-head">
|
||
<div class="editor-titles">
|
||
<h2 id="file-friendly">—</h2>
|
||
<code id="file-path" class="file-path">—</code>
|
||
</div>
|
||
<div class="editor-head-actions">
|
||
<span id="dirty-badge" class="dirty-badge" hidden>Nicht gespeichert</span>
|
||
<button class="btn btn-ghost" id="btn-reload" title="Vom Server neu laden"><span class="ic" data-icon="reload"></span><span>Neu laden</span></button>
|
||
<button class="btn btn-danger-ghost" id="btn-delete"><span class="ic" data-icon="trash"></span><span>Löschen</span></button>
|
||
<button class="btn btn-primary" id="btn-save"><span class="ic" data-icon="save"></span><span>Speichern</span></button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ph-bar" id="ph-bar" hidden></div>
|
||
<div class="ph-details" id="ph-details" hidden></div>
|
||
|
||
<div class="editor-tabs" role="tablist">
|
||
<button class="editor-tab is-active" id="tab-visual" data-view="visual" role="tab">Bearbeiten</button>
|
||
<button class="editor-tab" id="tab-html" data-view="html" role="tab">HTML</button>
|
||
<button class="editor-tab" id="tab-preview" data-view="preview" role="tab">Vorschau</button>
|
||
</div>
|
||
|
||
<div class="editor-body">
|
||
<div class="epane" id="pane-visual"><textarea id="visual-editor"></textarea></div>
|
||
<div class="epane" id="pane-html" hidden><textarea class="html-editor" id="html-editor" spellcheck="false" wrap="soft"></textarea></div>
|
||
<div class="epane" id="pane-preview" hidden>
|
||
<div class="preview-frame-wrap"><iframe class="preview-frame" id="preview-frame" title="Vorschau" sandbox=""></iframe></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Verwaltung -->
|
||
<div class="admin-panel" id="admin-panel" hidden></div>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ── Toasts ── -->
|
||
<div class="toast-stack" id="toast-stack" aria-live="polite"></div>
|
||
|
||
<!-- ── Lade-Overlay ── -->
|
||
<div class="loading-overlay" id="loading-overlay" hidden><div class="spinner" aria-label="Lädt"></div></div>
|
||
|
||
<!-- ── Confirm-Modal ── -->
|
||
<div class="modal-backdrop" id="confirm-backdrop" hidden>
|
||
<div class="modal" role="dialog" aria-modal="true" aria-labelledby="confirm-title">
|
||
<h3 id="confirm-title">Bestätigen</h3>
|
||
<p id="confirm-message">Bist du sicher?</p>
|
||
<div class="modal-actions">
|
||
<button class="btn btn-ghost" id="confirm-cancel">Abbrechen</button>
|
||
<button class="btn btn-danger" id="confirm-ok">Bestätigen</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ── Prompt-Modal ── -->
|
||
<div class="modal-backdrop" id="prompt-backdrop" hidden>
|
||
<form class="modal" id="prompt-form" role="dialog" aria-modal="true" aria-labelledby="prompt-title">
|
||
<h3 id="prompt-title">Eingabe</h3>
|
||
<div id="prompt-fields"></div>
|
||
<div class="modal-actions">
|
||
<button type="button" class="btn btn-ghost" id="prompt-cancel">Abbrechen</button>
|
||
<button type="submit" class="btn btn-primary" id="prompt-ok">OK</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<script src="/vendor/tinymce/tinymce.min.js"></script>
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|