kendrick.bollens/hps-thunderbird-templates
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UX-Überarbeitung, Signatur-Bausteine, QoL-Verbesserungen

Browse Source 
- Neues Layout: Inline-Editor, aufklappbarer Import, ⚙-Tab
- Signatur Header/Footer Baustein-System (Footer pro Abteilung)
- Signatur-Quelle Dropdown (Eigene / = andere@)
- "Vorlage laden" mit Platzhalter-Ersetzung (Name, Email, Abteilung, Tel, Fax)
- "Signatur speichern" pusht automatisch zum Server
- Footer-Editor mit auto-load beim Aufklappen
- Abteilungswechsel synct Footer + Templates neu
- "Aktualisieren" Button = Pull + Push in einem Schritt
- Vorlagen: Checkbox "Für alle Abteilungen"
- Löschen vom Server für alle möglich
- Toolbar für Signaturen gleichwertig mit Vorlagen-Toolbar
- Base64 whitespace-Fix für Gitea API
- Offline-resilient (Cache-Fallback, graceful error handling)
This commit is contained in:
Kendrick Bollens
2026-04-20 22:46:54 +02:00
parent f87258498d
commit 78a6310424
5 changed files with 1117 additions and 536 deletions
Download Patch File Download Diff File Expand all files Collapse all files

488
templates_options/templates_options.html
View File

@@ -25,14 +25,6 @@
border-bottom: 2px solid #4a7c59;
}
h3 {
font-size: 16px;
font-weight: 600;
color: #333;
margin-top: 24px;
margin-bottom: 12px;
}
/* Tabs */
.tab-bar {
display: flex;
@@ -62,6 +54,15 @@
font-weight: 600;
}
.tab-btn-settings {
margin-left: auto;
font-size: 16px;
padding: 10px 14px;
color: #aaa;
}
.tab-btn-settings.active { color: #4a7c59; }
.tab-content { display: none; }
.tab-content.active { display: block; }
@@ -119,6 +120,14 @@
margin-bottom: 10px;
}
select {
padding: 8px 10px;
border: 1px solid #d0d0d0;
border-radius: 6px;
font-size: 13px;
background: white;
}
/* Editor */
.editor-toolbar {
display: flex;
@@ -159,7 +168,6 @@
border: 1px solid #d0d0d0;
border-radius: 4px;
font-size: 12px;
background: white;
cursor: pointer;
color: #555;
}
@@ -213,7 +221,7 @@
color: #4a7c59;
}
#editor-area {
.editor-area {
width: 100%;
min-height: 220px;
max-height: 500px;
@@ -228,21 +236,25 @@
color: #333;
}
#editor-area:focus {
.editor-area:focus {
border-color: #4a7c59;
box-shadow: 0 0 0 2px rgba(74, 124, 89, 0.15);
}
#editor-area:empty::before {
.editor-area:empty::before {
content: "Sehr geehrte/r ...";
color: #aaa;
}
#editor-area ul, #editor-area ol {
.editor-area ul, .editor-area ol {
padding-left: 24px;
margin-left: 8px;
}
.editor-wrapper {
margin-bottom: 10px;
}
/* Sync indicator dot */
.sync-dot {
display: inline-block;
@@ -251,23 +263,12 @@
border-radius: 50%;
margin-right: 6px;
vertical-align: middle;
flex-shrink: 0;
}
.sync-dot.in-sync { background: #4caf50; }
.sync-dot.out-of-sync { background: #f44336; }
.sync-dot.unknown { background: #bbb; }
.sync-indicator {
display: flex;
align-items: center;
font-size: 12px;
color: #777;
margin-bottom: 12px;
}
.editor-wrapper {
margin-bottom: 10px;
}
/* Buttons */
.btn {
display: inline-block;
@@ -299,6 +300,11 @@
}
.btn-danger:hover { background: #fdf0ef; border-color: #c0392b; }
.btn-sm {
padding: 5px 10px;
font-size: 12px;
}
.btn + .btn { margin-left: 8px; }
/* Template list */
@@ -318,7 +324,6 @@
}
.template-item:last-child { border-bottom: none; }
.template-item:hover { background: #fafff8; }
.template-item input[type="checkbox"] {
@@ -352,40 +357,13 @@
font-weight: bold;
font-size: 14px;
}
.template-actions .push-btn {
color: #4a7c59;
}
.template-actions .push-btn:hover {
background: #e8f0eb;
border-color: #4a7c59;
}
.template-actions .pull-btn {
color: #2874a6;
}
.template-actions .pull-btn:hover {
background: #e8f0fb;
border-color: #2874a6;
}
.template-actions .edit-btn:hover {
background: #e8f0eb;
border-color: #4a7c59;
color: #4a7c59;
}
.template-actions .delete-btn {
color: #c0392b;
}
.template-actions .delete-btn:hover {
background: #fdf0ef;
border-color: #c0392b;
}
.toolbar {
display: flex;
gap: 8px;
margin-bottom: 12px;
}
.template-actions .push-btn { color: #4a7c59; }
.template-actions .push-btn:hover { background: #e8f0eb; border-color: #4a7c59; }
.template-actions .pull-btn { color: #2874a6; }
.template-actions .pull-btn:hover { background: #e8f0fb; border-color: #2874a6; }
.template-actions .edit-btn:hover { background: #e8f0eb; border-color: #4a7c59; color: #4a7c59; }
.template-actions .delete-btn { color: #c0392b; }
.template-actions .delete-btn:hover { background: #fdf0ef; border-color: #c0392b; }
#no-templates {
padding: 24px;
@@ -401,6 +379,84 @@
display: none;
}
/* Sync bar */
.sync-bar {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
background: white;
border: 1px solid #e0e0e0;
border-radius: 8px;
margin-bottom: 16px;
font-size: 13px;
}
.sync-bar-label {
flex: 1;
display: flex;
align-items: center;
gap: 6px;
color: #777;
font-size: 12.5px;
}
/* Inline editor (hidden by default) */
#tpl-editor-panel {
display: none;
margin-bottom: 16px;
}
#tpl-editor-panel.open {
display: block;
}
/* Collapsible import */
.collapsible-header {
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
font-size: 13px;
color: #777;
padding: 8px 0;
user-select: none;
}
.collapsible-header:hover { color: #4a7c59; }
.collapsible-header .arrow {
transition: transform 0.15s;
font-size: 11px;
}
.collapsible-header.open .arrow {
transform: rotate(90deg);
}
.collapsible-body {
display: none;
padding: 12px 0;
}
.collapsible-body.open {
display: block;
}
/* List header */
.list-header {
display: flex;
align-items: center;
margin-bottom: 12px;
}
.list-header h3 {
font-size: 16px;
font-weight: 600;
color: #333;
flex: 1;
}
/* Sync settings */
.sync-status {
display: flex;
@@ -412,29 +468,14 @@
margin-bottom: 16px;
}
.sync-status.connected {
background: #e8f5e9;
color: #2e7d32;
}
.sync-status.disconnected {
background: #fff3e0;
color: #e65100;
}
.sync-status.error {
background: #ffebee;
color: #c62828;
}
.sync-status.connected { background: #e8f5e9; color: #2e7d32; }
.sync-status.disconnected { background: #fff3e0; color: #e65100; }
.sync-status.error { background: #ffebee; color: #c62828; }
.form-group { margin-bottom: 12px; }
.form-group label { margin-bottom: 4px; }
.form-row {
display: flex;
gap: 12px;
}
.form-row { display: flex; gap: 12px; }
.form-row .form-group { flex: 1; }
.sync-actions {
@@ -457,6 +498,18 @@
border: 1px solid #e0e0e0;
display: none;
}
/* Footer info text */
.footer-info {
font-size: 12px;
color: #999;
font-style: italic;
margin-top: 6px;
padding: 8px 12px;
background: #f9f9f9;
border: 1px dashed #e0e0e0;
border-radius: 6px;
}
</style>
</head>
<body>
@@ -467,162 +520,241 @@
<div class="tab-bar">
<button class="tab-btn active" data-tab="templates">Vorlagen</button>
<button class="tab-btn" data-tab="signatures">Signaturen</button>
<button class="tab-btn" data-tab="sync">Synchronisierung</button>
<button class="tab-btn tab-btn-settings" data-tab="sync" title="Einstellungen">&#9881;</button>
</div>
<!-- Tab: Vorlagen -->
<!-- ═══════════ Tab: Vorlagen ═══════════ -->
<div id="tab-templates" class="tab-content active">
<!-- Import Section -->
<div class="card">
<div class="card-title">HTML-Dateien importieren</div>
<div class="card-desc">Wähle eine oder mehrere .html Dateien aus (z.B. vom Netzlaufwerk).<br>Dateiname = Vorlagen-Name. Bestehende Vorlagen mit gleichem Namen werden überschrieben.</div>
<input type="file" id="import-files" accept=".html,.htm" multiple>
<br>
<button type="button" class="btn btn-primary" id="import-button">Importieren</button>
<span id="import-status" class="status-badge"></span>
</div>
<!-- Add/Edit Section -->
<div class="card">
<div class="card-title" id="form-legend">Neue Vorlage erstellen</div>
<form id="template-form">
<input type="hidden" id="template-id">
<label for="template-name">Titel</label>
<input type="text" id="template-name" required placeholder="z.B. Buchungsbestätigung">
<label>Inhalt</label>
<div class="editor-wrapper">
<div class="editor-toolbar">
<button type="button" data-cmd="bold" title="Fett"><span class="mdi mdi-format-bold"></span></button>
<button type="button" data-cmd="italic" title="Kursiv"><span class="mdi mdi-format-italic"></span></button>
<button type="button" data-cmd="underline" title="Unterstrichen"><span class="mdi mdi-format-underline"></span></button>
<button type="button" data-cmd="strikeThrough" title="Durchgestrichen"><span class="mdi mdi-format-strikethrough"></span></button>
<div class="sep"></div>
<select data-cmd="fontSize" title="Schriftgröße">
<option value="">Größe</option>
<option value="1">Klein</option>
<option value="2">Normal</option>
<option value="3">Mittel</option>
<option value="4">Groß</option>
<option value="5">Sehr groß</option>
</select>
<div class="font-combo" id="font-combo">
<input type="text" id="font-input" title="Schriftart" placeholder="Schriftart" autocomplete="off">
<div class="font-dropdown" id="font-dropdown"></div>
</div>
<div class="sep"></div>
<button type="button" data-cmd="foreColor" data-val="ask" title="Textfarbe"><span class="mdi mdi-format-color-text"></span></button>
<button type="button" data-cmd="hiliteColor" data-val="ask" title="Hintergrundfarbe"><span class="mdi mdi-format-color-highlight"></span></button>
<div class="sep"></div>
<button type="button" data-cmd="insertOrderedList" title="Nummerierte Liste"><span class="mdi mdi-format-list-numbered"></span></button>
<button type="button" data-cmd="insertUnorderedList" title="Aufzählung"><span class="mdi mdi-format-list-bulleted"></span></button>
<div class="sep"></div>
<button type="button" data-cmd="justifyLeft" title="Links ausrichten"><span class="mdi mdi-format-align-left"></span></button>
<button type="button" data-cmd="justifyCenter" title="Zentrieren"><span class="mdi mdi-format-align-center"></span></button>
<button type="button" data-cmd="justifyRight" title="Rechts ausrichten"><span class="mdi mdi-format-align-right"></span></button>
<div class="sep"></div>
<button type="button" data-cmd="createLink" data-val="ask" title="Link einfügen"><span class="mdi mdi-link"></span></button>
<button type="button" data-cmd="removeFormat" title="Formatierung entfernen"><span class="mdi mdi-format-clear"></span></button>
</div>
<div id="editor-area" contenteditable="true"></div>
</div>
<button type="submit" class="btn btn-primary" id="save-button">Speichern</button>
<button type="button" class="btn btn-secondary" id="cancel-edit" style="display: none;">Abbrechen</button>
</form>
</div>
<!-- Sync actions for templates -->
<div class="card">
<div class="sync-indicator" id="tpl-sync-indicator">
<!-- Sync bar -->
<div class="sync-bar">
<div class="sync-bar-label" id="tpl-sync-indicator">
<span class="sync-dot unknown"></span>
<span>Sync-Status unbekannt</span>
</div>
<div style="display:flex;gap:8px;align-items:center;">
<button type="button" class="btn btn-secondary" id="sync-pull-button">Vom Server laden</button>
<button type="button" class="btn btn-primary" id="sync-push-button">Änderungen hochladen</button>
<span id="sync-sync-status" class="status-badge"></span>
<button type="button" class="btn btn-secondary btn-sm" id="sync-refresh-button">Aktualisieren</button>
<span id="sync-sync-status" class="status-badge"></span>
</div>
<!-- Inline editor (hidden until edit/new) -->
<div id="tpl-editor-panel">
<div class="card">
<div class="card-title" id="form-legend">Neue Vorlage erstellen</div>
<form id="template-form">
<input type="hidden" id="template-id">
<label for="template-name">Titel</label>
<input type="text" id="template-name" required placeholder="z.B. Buchungsbestätigung">
<label>Inhalt</label>
<div class="editor-wrapper">
<div class="editor-toolbar" id="tpl-toolbar">
<button type="button" data-cmd="bold" title="Fett"><span class="mdi mdi-format-bold"></span></button>
<button type="button" data-cmd="italic" title="Kursiv"><span class="mdi mdi-format-italic"></span></button>
<button type="button" data-cmd="underline" title="Unterstrichen"><span class="mdi mdi-format-underline"></span></button>
<button type="button" data-cmd="strikeThrough" title="Durchgestrichen"><span class="mdi mdi-format-strikethrough"></span></button>
<div class="sep"></div>
<select data-cmd="fontSize" title="Schriftgröße">
<option value="">Größe</option>
<option value="1">Klein</option>
<option value="2">Normal</option>
<option value="3">Mittel</option>
<option value="4">Groß</option>
<option value="5">Sehr groß</option>
</select>
<div class="font-combo" id="font-combo">
<input type="text" id="font-input" title="Schriftart" placeholder="Schriftart" autocomplete="off">
<div class="font-dropdown" id="font-dropdown"></div>
</div>
<div class="sep"></div>
<button type="button" data-cmd="foreColor" data-val="ask" title="Textfarbe"><span class="mdi mdi-format-color-text"></span></button>
<button type="button" data-cmd="hiliteColor" data-val="ask" title="Hintergrundfarbe"><span class="mdi mdi-format-color-highlight"></span></button>
<div class="sep"></div>
<button type="button" data-cmd="insertOrderedList" title="Nummerierte Liste"><span class="mdi mdi-format-list-numbered"></span></button>
<button type="button" data-cmd="insertUnorderedList" title="Aufzählung"><span class="mdi mdi-format-list-bulleted"></span></button>
<div class="sep"></div>
<button type="button" data-cmd="justifyLeft" title="Links ausrichten"><span class="mdi mdi-format-align-left"></span></button>
<button type="button" data-cmd="justifyCenter" title="Zentrieren"><span class="mdi mdi-format-align-center"></span></button>
<button type="button" data-cmd="justifyRight" title="Rechts ausrichten"><span class="mdi mdi-format-align-right"></span></button>
<div class="sep"></div>
<button type="button" data-cmd="createLink" data-val="ask" title="Link einfügen"><span class="mdi mdi-link"></span></button>
<button type="button" id="tpl-insert-image" title="Bild einfügen"><span class="mdi mdi-image"></span></button>
<button type="button" data-cmd="removeFormat" title="Formatierung entfernen"><span class="mdi mdi-format-clear"></span></button>
</div>
<div id="editor-area" class="editor-area" contenteditable="true"></div>
<input type="file" id="tpl-image-file" accept="image/*" style="display:none;">
</div>
<div style="display:flex;align-items:center;gap:8px;margin-bottom:10px;">
<input type="checkbox" id="tpl-shared-toggle" style="width:16px;height:16px;accent-color:#4a7c59;">
<label for="tpl-shared-toggle" style="margin-bottom:0;cursor:pointer;">Für alle Abteilungen (<code>_gemeinsam</code>)</label>
</div>
<button type="submit" class="btn btn-primary" id="save-button">Speichern</button>
<button type="button" class="btn btn-secondary" id="cancel-edit">Abbrechen</button>
</form>
</div>
</div>
<!-- Template List -->
<h3>Gespeicherte Vorlagen</h3>
<div class="toolbar">
<button type="button" class="btn btn-secondary" id="select-all-button">Alle auswählen</button>
<button type="button" class="btn btn-danger" id="delete-selected-button">Ausgewählte löschen</button>
<div class="list-header">
<h3>Vorlagen</h3>
<button type="button" class="btn btn-primary btn-sm" id="new-template-button">+ Neue Vorlage</button>
</div>
<div id="templates-list">
<p id="no-templates">Keine Vorlagen vorhanden.</p>
</div>
<div style="margin-top:8px;display:flex;gap:8px;">
<button type="button" class="btn btn-secondary btn-sm" id="select-all-button">Alle auswählen</button>
<button type="button" class="btn btn-danger btn-sm" id="delete-selected-button">Ausgewählte löschen</button>
</div>
<!-- Collapsible import -->
<div style="margin-top:16px;">
<div class="collapsible-header" id="import-toggle">
<span class="arrow">&#9654;</span> Aus Dateien importieren
</div>
<div class="collapsible-body" id="import-body">
<div class="card-desc">Wähle eine oder mehrere .html Dateien aus (z.B. vom Netzlaufwerk). Dateiname = Vorlagen-Name.</div>
<input type="file" id="import-files" accept=".html,.htm" multiple>
<br>
<button type="button" class="btn btn-secondary btn-sm" id="import-button">Importieren</button>
<span id="import-status" class="status-badge"></span>
</div>
</div>
</div>
<!-- Tab: Signaturen -->
<!-- ═══════════ Tab: Signaturen ═══════════ -->
<div id="tab-signatures" class="tab-content">
<!-- Sync actions for signatures -->
<div class="card">
<div class="sync-indicator" id="sig-sync-indicator">
<!-- Sync bar -->
<div class="sync-bar">
<div class="sync-bar-label" id="sig-sync-indicator">
<span class="sync-dot unknown"></span>
<span>Sync-Status unbekannt</span>
</div>
<div style="display:flex;gap:8px;align-items:center;">
<button type="button" class="btn btn-secondary" id="sig-sync-pull">Vom Server laden</button>
<button type="button" class="btn btn-primary" id="sig-sync-push">Signaturen hochladen</button>
<span id="sig-sync-status" class="status-badge"></span>
</div>
<button type="button" class="btn btn-secondary btn-sm" id="sig-sync-refresh">Aktualisieren</button>
<span id="sig-sync-status" class="status-badge"></span>
</div>
<div class="card">
<div class="card-title">E-Mail Signaturen verwalten</div>
<div class="card-desc">Hier kannst du die Signaturen deiner Thunderbird-Identitäten bearbeiten. Änderungen werden direkt in Thunderbird übernommen.</div>
<div class="card-desc">Bearbeite hier den persönlichen Teil deiner Signatur (Name, Abteilung, Kontaktdaten). Der gemeinsame Fußbereich (Infoblock, Links, Banner) wird automatisch angefügt.</div>
<div class="form-group">
<label for="sig-identity-select">Identität / E-Mail-Adresse</label>
<select id="sig-identity-select" style="width:100%;padding:8px 10px;border:1px solid #d0d0d0;border-radius:6px;font-size:13px;">
<select id="sig-identity-select" style="width:100%;">
<option value="">— Bitte wählen —</option>
</select>
</div>
<div class="form-group" style="display:flex;align-items:center;gap:8px;">
<input type="checkbox" id="sig-personal-toggle" style="width:16px;height:16px;accent-color:#4a7c59;">
<label for="sig-personal-toggle" style="margin-bottom:0;cursor:pointer;">Persönliche Signatur verwenden</label>
<span id="sig-personal-info" style="font-size:11px;color:#999;"></span>
<div class="form-group">
<label for="sig-source-select">Signatur-Quelle</label>
<div style="display:flex;gap:8px;align-items:center;">
<select id="sig-source-select" style="flex:1;">
<option value="own">Eigene Signatur</option>
</select>
<button type="button" class="btn btn-secondary btn-sm" id="sig-load-template" title="Standard-Vorlage vom Server als Startpunkt laden">Vorlage laden</button>
</div>
<span id="sig-source-info" style="font-size:11px;color:#999;display:block;margin-top:4px;margin-bottom:8px;"></span>
</div>
<label>Signatur</label>
<label>Persönlicher Signatur-Kopf</label>
<div class="editor-wrapper">
<div class="editor-toolbar" id="sig-toolbar">
<button type="button" data-cmd="bold" title="Fett"><span class="mdi mdi-format-bold"></span></button>
<button type="button" data-cmd="italic" title="Kursiv"><span class="mdi mdi-format-italic"></span></button>
<button type="button" data-cmd="underline" title="Unterstrichen"><span class="mdi mdi-format-underline"></span></button>
<button type="button" data-cmd="strikeThrough" title="Durchgestrichen"><span class="mdi mdi-format-strikethrough"></span></button>
<div class="sep"></div>
<select data-cmd="fontSize" title="Schriftgröße">
<option value="">Größe</option>
<option value="1">Klein</option>
<option value="2">Normal</option>
<option value="3">Mittel</option>
<option value="4">Groß</option>
<option value="5">Sehr groß</option>
</select>
<div class="font-combo" id="sig-font-combo">
<input type="text" id="sig-font-input" title="Schriftart" placeholder="Schriftart" autocomplete="off">
<div class="font-dropdown" id="sig-font-dropdown"></div>
</div>
<div class="sep"></div>
<button type="button" data-cmd="foreColor" data-val="ask" title="Textfarbe"><span class="mdi mdi-format-color-text"></span></button>
<button type="button" data-cmd="hiliteColor" data-val="ask" title="Hintergrundfarbe"><span class="mdi mdi-format-color-highlight"></span></button>
<div class="sep"></div>
<button type="button" data-cmd="insertOrderedList" title="Nummerierte Liste"><span class="mdi mdi-format-list-numbered"></span></button>
<button type="button" data-cmd="insertUnorderedList" title="Aufzählung"><span class="mdi mdi-format-list-bulleted"></span></button>
<div class="sep"></div>
<button type="button" data-cmd="justifyLeft" title="Links ausrichten"><span class="mdi mdi-format-align-left"></span></button>
<button type="button" data-cmd="justifyCenter" title="Zentrieren"><span class="mdi mdi-format-align-center"></span></button>
<button type="button" data-cmd="justifyRight" title="Rechts ausrichten"><span class="mdi mdi-format-align-right"></span></button>
<div class="sep"></div>
<button type="button" data-cmd="createLink" data-val="ask" title="Link einfügen"><span class="mdi mdi-link"></span></button>
<button type="button" id="sig-insert-image" title="Bild einfügen"><span class="mdi mdi-image"></span></button>
<button type="button" data-cmd="removeFormat" title="Formatierung entfernen"><span class="mdi mdi-format-clear"></span></button>
</div>
<div id="sig-editor-area" contenteditable="true" style="min-height:120px;max-height:400px;overflow-y:auto;border:1px solid #d0d0d0;border-radius:0 0 6px 6px;background:white;padding:10px 12px;outline:none;font-family:'Segoe UI',Verdana,sans-serif;font-size:13px;color:#333;"></div>
<input type="file" id="sig-image-file" accept="image/*" style="display:none;">
<div id="sig-editor-area" class="editor-area" contenteditable="true" style="min-height:120px;max-height:400px;"></div>
</div>
<div style="margin-top:10px;display:flex;gap:8px;align-items:center;">
<div class="footer-info">
Der gemeinsame Fußbereich (Infoblock, Links, rechtliche Angaben, Banner) wird beim Speichern und Synchronisieren automatisch angefügt.
</div>
<div style="margin-top:12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;">
<button type="button" class="btn btn-primary" id="sig-save-button">Signatur speichern</button>
<button type="button" class="btn btn-secondary" id="sig-import-file-btn">Aus Datei laden</button>
<input type="file" id="sig-import-file" accept=".html,.htm" style="display:none;">
<button type="button" class="btn btn-secondary btn-sm" id="sig-import-file-btn">Aus Datei laden (HTML + Bilder)</button>
<input type="file" id="sig-import-file" accept=".html,.htm,image/*" multiple style="display:none;">
<span id="sig-status" class="status-badge"></span>
</div>
</div>
<!-- Footer Editor (collapsible) -->
<div style="margin-top:16px;">
<div class="collapsible-header" id="footer-toggle">
<span class="arrow">&#9654;</span> Gemeinsamer Fußbereich bearbeiten
</div>
<div class="collapsible-body" id="footer-body">
<div class="card">
<div class="card-desc">Der Fußbereich wird automatisch an alle Signaturen deiner Abteilung angefügt (Banner, Links, rechtliche Angaben). Änderungen gelten für alle Mitarbeiter der Abteilung.</div>
<label>Fußbereich</label>
<div class="editor-wrapper">
<div class="editor-toolbar" id="footer-toolbar">
<button type="button" data-cmd="bold" title="Fett"><span class="mdi mdi-format-bold"></span></button>
<button type="button" data-cmd="italic" title="Kursiv"><span class="mdi mdi-format-italic"></span></button>
<button type="button" data-cmd="underline" title="Unterstrichen"><span class="mdi mdi-format-underline"></span></button>
<div class="sep"></div>
<button type="button" data-cmd="foreColor" data-val="ask" title="Textfarbe"><span class="mdi mdi-format-color-text"></span></button>
<button type="button" data-cmd="hiliteColor" data-val="ask" title="Hintergrundfarbe"><span class="mdi mdi-format-color-highlight"></span></button>
<div class="sep"></div>
<button type="button" data-cmd="createLink" data-val="ask" title="Link einfügen"><span class="mdi mdi-link"></span></button>
<button type="button" id="footer-insert-image" title="Bild einfügen"><span class="mdi mdi-image"></span></button>
<button type="button" data-cmd="removeFormat" title="Formatierung entfernen"><span class="mdi mdi-format-clear"></span></button>
</div>
<input type="file" id="footer-image-file" accept="image/*" style="display:none;">
<div id="footer-editor-area" class="editor-area" contenteditable="true" style="min-height:150px;max-height:500px;"></div>
</div>
<div style="margin-top:10px;display:flex;gap:8px;align-items:center;">
<button type="button" class="btn btn-primary" id="footer-save-button">Fußbereich speichern &amp; hochladen</button>
<button type="button" class="btn btn-secondary btn-sm" id="footer-load-button">Vom Server laden</button>
<span id="footer-status" class="status-badge"></span>
</div>
</div>
</div>
</div>
</div>
<!-- Tab: Synchronisierung -->
<!-- ═══════════ Tab: Einstellungen (⚙) ═══════════ -->
<div id="tab-sync" class="tab-content">
<!-- Benutzer & Abteilung -->
<div class="card">
<div class="card-title">Benutzer &amp; Abteilung</div>
<div class="card-desc">Dein Name wird bei Änderungen im Commit gespeichert, damit nachvollziehbar ist wer was geändert hat.</div>
<div class="card-desc">Dein Name wird bei Änderungen gespeichert, damit nachvollziehbar ist wer was geändert hat.</div>
<div class="form-row">
<div class="form-group">
@@ -637,11 +769,11 @@
<div class="form-group">
<label for="sync-department">Abteilung</label>
<div style="display:flex; gap:8px; align-items:start;">
<select id="sync-department" style="flex:1; padding:8px 10px; border:1px solid #d0d0d0; border-radius:6px; font-size:13px;">
<div style="display:flex;gap:8px;align-items:start;">
<select id="sync-department" style="flex:1;">
<option value="">— Bitte wählen —</option>
</select>
<button type="button" class="btn btn-secondary" id="refresh-departments" title="Abteilungen neu laden" style="white-space:nowrap;">Aktualisieren</button>
<button type="button" class="btn btn-secondary btn-sm" id="refresh-departments" title="Abteilungen neu laden">Aktualisieren</button>
</div>
<div class="card-desc" style="margin-top:6px;">Du erhältst Vorlagen aus deiner Abteilung + dem gemeinsamen Ordner (<code>_gemeinsam</code>).</div>
</div>
@@ -650,7 +782,7 @@
<!-- Repository-Verbindung -->
<div class="card">
<div class="card-title">Git-Repository Verbindung</div>
<div class="card-desc">Verbinde das Plugin mit einem Gitea/Forgejo Repository, um Vorlagen zentral zu verwalten und zwischen Mitarbeitern zu synchronisieren.</div>
<div class="card-desc">Verbinde das Plugin mit einem Gitea/Forgejo Repository, um Vorlagen zentral zu verwalten.</div>
<div id="sync-status-bar" class="sync-status disconnected">
Nicht verbunden