864be54646
- 3 Sichtbarkeitsstufen für Vorlagen: Persönlich / Abteilung / Alle
- Persönliche Vorlagen werden in _benutzer/{email}/ synchronisiert
- Sichtbarkeit direkt in der Liste per Dropdown änderbar
- Warnung beim Verringern der Sichtbarkeit (Server-Löschung)
- Auto-Erkennung von Abteilung + E-Mail via _config/abteilungen.json
- Toast-Benachrichtigungen statt unsichtbare Status-Badges
- Lade-Spinner bei Sync-Operationen
- Sync-Dots mit Symbolen (nicht nur Farbe) für Barrierefreiheit
- Custom Delete-Modal statt browser confirm()
- Collapsible-Sections visuell als klickbar erkennbar
- Token-Feld mit Show/Hide-Toggle
- Inline-Validierung für Template-Namen
- Checkbox-Klickflächen vergrößert + Label-Klick
- Offline-Erkennung mit Banner
- Font-Dropdown Viewport-Fix
- Popup: Prefix-Dropdown verständlicher
- Signaturen: erste Identität automatisch ausgewählt
- README komplett neu geschrieben
1067 lines
40 KiB
HTML
1067 lines
40 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Vorlagen verwalten</title>
|
||
<link rel="stylesheet" href="../lib/mdi/mdi-editor.css">
|
||
<style>
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
body {
|
||
font-family: "Segoe UI", -apple-system, sans-serif;
|
||
background: #f5f5f5;
|
||
color: #333;
|
||
padding: 24px 32px;
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
h2 {
|
||
font-size: 22px;
|
||
font-weight: 600;
|
||
color: #4a7c59;
|
||
margin-bottom: 20px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 2px solid #4a7c59;
|
||
}
|
||
|
||
/* Tabs */
|
||
.tab-bar {
|
||
display: flex;
|
||
gap: 0;
|
||
margin-bottom: 24px;
|
||
border-bottom: 2px solid #e0e0e0;
|
||
}
|
||
|
||
.tab-btn {
|
||
padding: 10px 20px;
|
||
border: none;
|
||
background: none;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #777;
|
||
cursor: pointer;
|
||
border-bottom: 2px solid transparent;
|
||
margin-bottom: -2px;
|
||
transition: color 0.15s, border-color 0.15s;
|
||
}
|
||
|
||
.tab-btn:hover { color: #4a7c59; }
|
||
|
||
.tab-btn.active {
|
||
color: #4a7c59;
|
||
border-bottom-color: #4a7c59;
|
||
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; }
|
||
|
||
/* Cards */
|
||
.card {
|
||
background: white;
|
||
border: 1px solid #e0e0e0;
|
||
border-radius: 8px;
|
||
padding: 18px 20px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.card-title {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: #4a7c59;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.card-desc {
|
||
font-size: 12.5px;
|
||
color: #777;
|
||
margin-bottom: 12px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* Form elements */
|
||
label {
|
||
display: block;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
color: #555;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
input[type="text"], input[type="password"], textarea {
|
||
width: 100%;
|
||
padding: 8px 10px;
|
||
border: 1px solid #d0d0d0;
|
||
border-radius: 6px;
|
||
font-family: inherit;
|
||
font-size: 13px;
|
||
margin-bottom: 10px;
|
||
transition: border-color 0.15s;
|
||
}
|
||
|
||
input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
|
||
outline: none;
|
||
border-color: #4a7c59;
|
||
box-shadow: 0 0 0 2px rgba(74, 124, 89, 0.15);
|
||
}
|
||
|
||
input[type="file"] {
|
||
font-size: 13px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
select {
|
||
padding: 8px 10px;
|
||
border: 1px solid #d0d0d0;
|
||
border-radius: 6px;
|
||
font-size: 13px;
|
||
background: white;
|
||
}
|
||
|
||
/* Editor */
|
||
.editor-toolbar {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 2px;
|
||
padding: 6px 8px;
|
||
background: #fafafa;
|
||
border: 1px solid #d0d0d0;
|
||
border-bottom: none;
|
||
border-radius: 6px 6px 0 0;
|
||
}
|
||
|
||
.editor-toolbar button {
|
||
padding: 4px 8px;
|
||
border: 1px solid transparent;
|
||
border-radius: 4px;
|
||
background: none;
|
||
cursor: pointer;
|
||
font-size: 13px;
|
||
color: #555;
|
||
transition: background 0.1s, border-color 0.1s;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.editor-toolbar button:hover {
|
||
background: #e8f0eb;
|
||
border-color: #c0d4c7;
|
||
}
|
||
|
||
.editor-toolbar .sep {
|
||
width: 1px;
|
||
background: #ddd;
|
||
margin: 2px 4px;
|
||
}
|
||
|
||
.editor-toolbar select {
|
||
padding: 3px 6px;
|
||
border: 1px solid #d0d0d0;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
cursor: pointer;
|
||
color: #555;
|
||
}
|
||
|
||
.font-combo {
|
||
position: relative;
|
||
display: inline-block;
|
||
}
|
||
|
||
.font-combo input {
|
||
width: 140px;
|
||
padding: 3px 6px;
|
||
border: 1px solid #d0d0d0;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
color: #555;
|
||
background: white;
|
||
}
|
||
|
||
.font-combo input:focus {
|
||
outline: none;
|
||
border-color: #4a7c59;
|
||
}
|
||
|
||
.font-dropdown {
|
||
display: none;
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 0;
|
||
width: 200px;
|
||
max-height: 200px;
|
||
overflow-y: auto;
|
||
background: white;
|
||
border: 1px solid #d0d0d0;
|
||
border-radius: 4px;
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
|
||
z-index: 100;
|
||
}
|
||
|
||
.font-dropdown.open { display: block; }
|
||
|
||
.font-option {
|
||
padding: 5px 8px;
|
||
font-size: 12px;
|
||
cursor: pointer;
|
||
color: #333;
|
||
}
|
||
|
||
.font-option:hover, .font-option.active {
|
||
background: #e8f0eb;
|
||
color: #4a7c59;
|
||
}
|
||
|
||
.editor-area {
|
||
width: 100%;
|
||
min-height: 220px;
|
||
max-height: 500px;
|
||
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;
|
||
}
|
||
|
||
.editor-area:focus {
|
||
border-color: #4a7c59;
|
||
box-shadow: 0 0 0 2px rgba(74, 124, 89, 0.15);
|
||
}
|
||
|
||
.editor-area:empty::before {
|
||
content: "Sehr geehrte/r ...";
|
||
color: #aaa;
|
||
}
|
||
|
||
.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;
|
||
width: 10px;
|
||
height: 10px;
|
||
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; }
|
||
|
||
/* Buttons */
|
||
.btn {
|
||
display: inline-block;
|
||
padding: 8px 16px;
|
||
border: none;
|
||
border-radius: 6px;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: background 0.15s, box-shadow 0.15s;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: #4a7c59;
|
||
color: white;
|
||
}
|
||
.btn-primary:hover { background: #3d6a4b; }
|
||
|
||
.btn-secondary {
|
||
background: #e8e8e8;
|
||
color: #333;
|
||
}
|
||
.btn-secondary:hover { background: #d8d8d8; }
|
||
|
||
.btn-danger {
|
||
background: white;
|
||
color: #c0392b;
|
||
border: 1px solid #e0b4b0;
|
||
}
|
||
.btn-danger:hover { background: #fdf0ef; border-color: #c0392b; }
|
||
|
||
.btn-sm {
|
||
padding: 5px 10px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.btn + .btn { margin-left: 8px; }
|
||
|
||
/* Template list */
|
||
#templates-list {
|
||
background: white;
|
||
border: 1px solid #e0e0e0;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.template-item {
|
||
padding: 12px 16px;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
display: flex;
|
||
align-items: center;
|
||
transition: background 0.1s;
|
||
}
|
||
|
||
.template-item:last-child { border-bottom: none; }
|
||
.template-item:hover { background: #fafff8; }
|
||
|
||
.template-item input[type="checkbox"] {
|
||
width: 18px;
|
||
height: 18px;
|
||
margin-right: 0;
|
||
accent-color: #4a7c59;
|
||
cursor: pointer;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.template-label {
|
||
display: flex;
|
||
align-items: center;
|
||
flex: 1;
|
||
cursor: pointer;
|
||
gap: 10px;
|
||
}
|
||
|
||
.template-name {
|
||
font-weight: 500;
|
||
font-size: 13.5px;
|
||
}
|
||
|
||
.template-actions { display: flex; gap: 6px; }
|
||
|
||
.template-actions button {
|
||
padding: 5px 10px;
|
||
border: 1px solid #e0e0e0;
|
||
border-radius: 5px;
|
||
background: white;
|
||
font-size: 12px;
|
||
cursor: pointer;
|
||
transition: background 0.1s, border-color 0.1s;
|
||
}
|
||
|
||
.template-actions .push-btn,
|
||
.template-actions .pull-btn {
|
||
font-weight: 500;
|
||
font-size: 12px;
|
||
white-space: nowrap;
|
||
}
|
||
.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;
|
||
text-align: center;
|
||
color: #999;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.status-badge {
|
||
margin-left: 10px;
|
||
font-size: 12.5px;
|
||
font-weight: 500;
|
||
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;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 10px 14px;
|
||
border-radius: 6px;
|
||
font-size: 13px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.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 .form-group { flex: 1; }
|
||
|
||
.sync-actions {
|
||
display: flex;
|
||
gap: 8px;
|
||
align-items: center;
|
||
margin-top: 16px;
|
||
}
|
||
|
||
#sync-log {
|
||
margin-top: 12px;
|
||
font-size: 12px;
|
||
color: #777;
|
||
max-height: 120px;
|
||
overflow-y: auto;
|
||
font-family: monospace;
|
||
background: #fafafa;
|
||
padding: 8px 10px;
|
||
border-radius: 6px;
|
||
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;
|
||
}
|
||
|
||
/* Badges for shared/private */
|
||
.badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 3px;
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
padding: 2px 8px;
|
||
border-radius: 10px;
|
||
margin-left: 8px;
|
||
white-space: nowrap;
|
||
}
|
||
.badge-shared { background: #e3f2fd; color: #1565c0; }
|
||
.badge-dept { background: #fff3e0; color: #e65100; }
|
||
.badge-private { background: #f3e5f5; color: #7b1fa2; }
|
||
|
||
/* Badge as inline select */
|
||
select.scope-select {
|
||
border: none;
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
padding: 2px 4px 2px 8px;
|
||
border-radius: 10px;
|
||
cursor: pointer;
|
||
margin-left: 8px;
|
||
outline: none;
|
||
}
|
||
select.scope-select.badge-shared { background: #e3f2fd; color: #1565c0; }
|
||
select.scope-select.badge-dept { background: #fff3e0; color: #e65100; }
|
||
select.scope-select.badge-private { background: #f3e5f5; color: #7b1fa2; }
|
||
|
||
/* Toast notifications */
|
||
#toast-container {
|
||
position: fixed;
|
||
bottom: 20px;
|
||
right: 20px;
|
||
z-index: 9999;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
max-width: 320px;
|
||
}
|
||
.toast {
|
||
padding: 12px 16px;
|
||
border-radius: 8px;
|
||
font-size: 13px;
|
||
color: white;
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||
animation: toast-in 0.3s ease;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.toast-success { background: #43a047; }
|
||
.toast-error { background: #e53935; }
|
||
.toast-info { background: #1e88e5; }
|
||
.toast-out { animation: toast-out 0.3s ease forwards; }
|
||
@keyframes toast-in { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
|
||
@keyframes toast-out { from { opacity: 1; } to { opacity: 0; transform: translateY(10px); } }
|
||
|
||
/* Spinner */
|
||
.spinner {
|
||
display: inline-block;
|
||
width: 14px;
|
||
height: 14px;
|
||
border: 2px solid rgba(255,255,255,0.3);
|
||
border-top-color: currentColor;
|
||
border-radius: 50%;
|
||
animation: spin 0.6s linear infinite;
|
||
vertical-align: middle;
|
||
}
|
||
.spinner-dark {
|
||
border-color: rgba(0,0,0,0.15);
|
||
border-top-color: #4a7c59;
|
||
}
|
||
@keyframes spin { to { transform: rotate(360deg); } }
|
||
|
||
/* Improved sync dots */
|
||
.sync-dot.in-sync::after {
|
||
content: "✓";
|
||
font-size: 8px;
|
||
color: white;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
.sync-dot.out-of-sync::after {
|
||
content: "!";
|
||
font-size: 8px;
|
||
font-weight: bold;
|
||
color: white;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
.sync-dot {
|
||
position: relative;
|
||
width: 14px;
|
||
height: 14px;
|
||
}
|
||
|
||
/* Collapsible improvements */
|
||
.collapsible-header {
|
||
background: #f9f9f9;
|
||
border: 1px solid #e8e8e8;
|
||
border-radius: 6px;
|
||
padding: 8px 12px;
|
||
margin-bottom: 4px;
|
||
}
|
||
.collapsible-header:hover {
|
||
background: #f0f5f1;
|
||
border-color: #c0d4c7;
|
||
}
|
||
.collapsible-header .arrow { font-size: 13px; }
|
||
|
||
/* Token toggle */
|
||
.password-wrapper {
|
||
position: relative;
|
||
}
|
||
.password-wrapper input {
|
||
padding-right: 36px;
|
||
}
|
||
.password-toggle {
|
||
position: absolute;
|
||
right: 8px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
border: none;
|
||
background: none;
|
||
cursor: pointer;
|
||
color: #999;
|
||
padding: 2px;
|
||
line-height: 1;
|
||
}
|
||
.password-toggle:hover { color: #555; }
|
||
|
||
/* Offline banner */
|
||
.offline-banner {
|
||
display: none;
|
||
background: #ff9800;
|
||
color: white;
|
||
text-align: center;
|
||
padding: 10px;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 9998;
|
||
}
|
||
.offline-banner.visible { display: block; }
|
||
|
||
/* Confirm modal */
|
||
.modal-backdrop {
|
||
display: none;
|
||
position: fixed;
|
||
inset: 0;
|
||
background: rgba(0,0,0,0.4);
|
||
z-index: 10000;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.modal-backdrop.open { display: flex; }
|
||
.modal-card {
|
||
background: white;
|
||
border-radius: 10px;
|
||
padding: 24px;
|
||
max-width: 400px;
|
||
width: 90%;
|
||
box-shadow: 0 8px 32px rgba(0,0,0,0.2);
|
||
}
|
||
.modal-card h3 {
|
||
font-size: 16px;
|
||
margin-bottom: 12px;
|
||
color: #333;
|
||
}
|
||
.modal-card p {
|
||
font-size: 13px;
|
||
color: #666;
|
||
margin-bottom: 20px;
|
||
line-height: 1.5;
|
||
}
|
||
.modal-actions {
|
||
display: flex;
|
||
gap: 8px;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
/* Validation */
|
||
.input-error { border-color: #e53935 !important; }
|
||
.input-valid { border-color: #43a047 !important; }
|
||
.validation-msg {
|
||
font-size: 11px;
|
||
margin-top: -6px;
|
||
margin-bottom: 8px;
|
||
}
|
||
.validation-msg.error { color: #e53935; }
|
||
.validation-msg.success { color: #43a047; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<h2>Vorlagen verwalten</h2>
|
||
|
||
<!-- Tab Navigation -->
|
||
<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 tab-btn-settings" data-tab="sync" title="Einstellungen">⚙</button>
|
||
</div>
|
||
|
||
<!-- ═══════════ Tab: Vorlagen ═══════════ -->
|
||
<div id="tab-templates" class="tab-content active">
|
||
|
||
<!-- 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>
|
||
<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 class="form-group">
|
||
<label for="tpl-scope-select">Sichtbarkeit</label>
|
||
<select id="tpl-scope-select" style="width:100%;">
|
||
<option value="private" selected>Persönlich (nur ich, auf allen meinen Geräten)</option>
|
||
<option value="department">Meine Abteilung</option>
|
||
<option value="shared">Alle Abteilungen</option>
|
||
</select>
|
||
</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 -->
|
||
<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">▶</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 ═══════════ -->
|
||
<div id="tab-signatures" class="tab-content">
|
||
|
||
<!-- 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>
|
||
<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">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%;">
|
||
<option value="">— Bitte wählen —</option>
|
||
</select>
|
||
</div>
|
||
|
||
<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>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>
|
||
<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 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 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">▶</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 & 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: Einstellungen (⚙) ═══════════ -->
|
||
<div id="tab-sync" class="tab-content">
|
||
|
||
<!-- Benutzer & Abteilung -->
|
||
<div class="card">
|
||
<div class="card-title">Benutzer & Abteilung</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">
|
||
<label for="sync-author-name">Dein Name</label>
|
||
<input type="text" id="sync-author-name" placeholder="z.B. Max Mustermann">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="sync-author-email">Deine E-Mail (optional)</label>
|
||
<input type="text" id="sync-author-email" placeholder="z.B. max@hotel-park-soltau.de">
|
||
</div>
|
||
</div>
|
||
|
||
<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;">
|
||
<option value="">— Bitte wählen —</option>
|
||
</select>
|
||
<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>
|
||
</div>
|
||
|
||
<!-- 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.</div>
|
||
|
||
<div id="sync-status-bar" class="sync-status disconnected">
|
||
Nicht verbunden
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="sync-url">Server-URL</label>
|
||
<input type="text" id="sync-url" placeholder="https://git.example.com">
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="sync-owner">Repository-Besitzer</label>
|
||
<input type="text" id="sync-owner" placeholder="z.B. benutzername">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="sync-repo">Repository-Name</label>
|
||
<input type="text" id="sync-repo" placeholder="z.B. email-vorlagen">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="sync-branch">Branch</label>
|
||
<input type="text" id="sync-branch" placeholder="main" value="main">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="sync-token">API-Token</label>
|
||
<div class="password-wrapper">
|
||
<input type="password" id="sync-token" placeholder="Token aus Gitea-Einstellungen">
|
||
<button type="button" class="password-toggle" id="token-toggle" title="Token anzeigen/verbergen"><span class="mdi mdi-eye"></span></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sync-actions">
|
||
<button type="button" class="btn btn-primary" id="save-sync-config">Verbindung speichern</button>
|
||
<button type="button" class="btn btn-secondary" id="test-sync-connection">Verbindung testen</button>
|
||
<span id="sync-action-status" class="status-badge"></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="sync-log"></div>
|
||
</div>
|
||
|
||
<!-- Offline Banner -->
|
||
<div id="offline-banner" class="offline-banner">Keine Internetverbindung – Synchronisation nicht möglich</div>
|
||
|
||
<!-- Toast Container -->
|
||
<div id="toast-container"></div>
|
||
|
||
<!-- Confirm Modal -->
|
||
<div id="confirm-modal" class="modal-backdrop">
|
||
<div class="modal-card">
|
||
<h3 id="modal-title"></h3>
|
||
<p id="modal-message"></p>
|
||
<div class="modal-actions">
|
||
<button type="button" class="btn btn-secondary" id="modal-cancel">Abbrechen</button>
|
||
<button type="button" class="btn btn-danger" id="modal-confirm">Löschen</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="templates_options.js"></script>
|
||
</body>
|
||
</html>
|