161 lines
7.5 KiB
PHP
161 lines
7.5 KiB
PHP
<?php
|
||
$base = rtrim(dirname($_SERVER['SCRIPT_NAME']), '/') ?: '';
|
||
$assetVersion = defined('ASSET_VERSION') ? ASSET_VERSION : time();
|
||
?>
|
||
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8"/>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||
<title>Email Template System – Admin</title>
|
||
|
||
<!-- UI bis zur Auth verdecken -->
|
||
<script>document.documentElement.classList.add('auth-pending');</script>
|
||
<style>
|
||
html.auth-pending body { visibility: hidden; }
|
||
</style>
|
||
|
||
<!-- Tailwind zuerst -->
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
|
||
<!-- Admin-Theme (neu) -->
|
||
<link rel="stylesheet" href="assets/css/admin.css?v=<?= htmlspecialchars($assetVersion, ENT_QUOTES) ?>">
|
||
|
||
<!-- Toast danach -->
|
||
<link rel="stylesheet" href="assets/css/toast.css?v=<?= htmlspecialchars($assetVersion, ENT_QUOTES) ?>">
|
||
|
||
<!-- Kleine Hilfs-Utilities (belassen, falls admin.css andere Werte hat) -->
|
||
<style>
|
||
:root { color-scheme: light; }
|
||
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .7rem;border-radius:.7rem;border:1px solid #e5e7eb;background:#fff;font-size:.9rem;cursor:pointer;}
|
||
.btn:hover{background:#f8fafc}.btn-danger{border-color:#fecaca;color:#b91c1c}.btn-danger:hover{background:#fef2f2}
|
||
.chip{display:inline-flex;align-items:center;gap:.35rem;padding:.15rem .5rem;border-radius:999px;background:#f1f5f9;color:#334155;font-size:.75rem;border:1px solid #e5e7eb}
|
||
.chip .dot{width:.5rem;height:.5rem;border-radius:999px;background:#64748b}
|
||
dialog::backdrop{background:rgba(15,23,42,.3)}
|
||
#toast-root{z-index:2147483647}
|
||
.truncate{max-width:22rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
|
||
.hidden{display:none}
|
||
</style>
|
||
</head>
|
||
<body class="page-admin bg-slate-50 text-slate-800">
|
||
<header class="sticky top-0 z-30 bg-white/90 backdrop-blur border-b">
|
||
<div class="max-w-6xl mx-auto px-4 py-3 flex items-center gap-3">
|
||
<h1 class="font-semibold text-lg">Email Template System</h1>
|
||
<nav class="isolate inline-flex rounded-2xl shadow-sm border bg-white overflow-hidden ms-6">
|
||
<button type="button" data-tab="templates" class="px-4 py-2 text-sm border-e bg-sky-50 text-sky-700">Templates</button>
|
||
<button type="button" data-tab="sections" class="px-4 py-2 text-sm border-e">Sections</button>
|
||
<button type="button" data-tab="blocks" class="px-4 py-2 text-sm border-e">Blocks</button>
|
||
<button type="button" data-tab="snippets" class="px-4 py-2 text-sm">Snippets</button>
|
||
</nav>
|
||
<div class="ms-auto flex gap-2">
|
||
<button id="btn-new" type="button" class="btn">Neu …</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="max-w-6xl mx-auto p-4">
|
||
<section id="view-templates" class="view"></section>
|
||
<section id="view-sections" class="view hidden"></section>
|
||
<section id="view-blocks" class="view hidden"></section>
|
||
<section id="view-snippets" class="view hidden"></section>
|
||
</main>
|
||
|
||
<!-- Create Dialog -->
|
||
<dialog id="createDialog" class="rounded-2xl p-0 w-[540px]">
|
||
<form id="createForm" method="dialog" class="p-4 bg-white rounded-2xl">
|
||
<h3 class="text-lg font-semibold mb-2">Neues Element erstellen</h3>
|
||
<p id="createHint" class="text-sm text-slate-600 mb-3"></p>
|
||
<div class="space-y-3" id="createFields"></div>
|
||
<div class="mt-4 flex justify-end gap-2">
|
||
<button type="button" id="createCancel" class="btn">Abbrechen</button>
|
||
<button type="submit" id="createSubmit" class="btn">Erstellen</button>
|
||
</div>
|
||
</form>
|
||
</dialog>
|
||
|
||
<!-- Delete Confirm Dialog -->
|
||
<dialog id="deleteDialog" class="rounded-2xl p-0 w-[520px]">
|
||
<form id="deleteForm" method="dialog" class="p-4 bg-white rounded-2xl">
|
||
<h3 class="text-lg font-semibold mb-2">Eintrag löschen?</h3>
|
||
<p id="deleteText" class="text-sm text-slate-600 mb-4"></p>
|
||
<div class="mt-1 flex justify-end gap-2">
|
||
<button type="button" id="deleteCancel" class="btn">Abbrechen</button>
|
||
<button type="submit" class="btn btn-danger">Löschen</button>
|
||
</div>
|
||
</form>
|
||
</dialog>
|
||
|
||
<!-- Editor Dialog -->
|
||
<dialog id="editorDialog" class="rounded-2xl p-0 w-[95vw] h-[90vh]">
|
||
<div class="h-full flex flex-col">
|
||
<div class="px-4 py-2 border-b flex items-center gap-2 bg-white/80 backdrop-blur">
|
||
<strong class="me-auto">E-Mail Editor</strong>
|
||
<button id="btn-clear-main" type="button" class="btn" title="Leeren">🧹</button>
|
||
<button id="btn-preview" type="button" class="btn">Vorschau</button>
|
||
<button id="btn-test" type="button" class="btn">Testversand</button>
|
||
<button id="btn-save" type="button" class="btn">Speichern</button>
|
||
<button id="btn-close" type="button" class="btn">Schließen</button>
|
||
</div>
|
||
<iframe id="editorFrame" src="about:blank" class="flex-1 w-full"></iframe>
|
||
</div>
|
||
</dialog>
|
||
|
||
<!-- Preview Dialog -->
|
||
<dialog id="previewDialog" class="rounded-2xl p-0 w-[90vw] h-[90vh]">
|
||
<div class="h-full flex flex-col">
|
||
<div class="px-4 py-2 border-b flex items-center gap-2 bg-white/80 backdrop-blur">
|
||
<strong class="me-auto">Vorschau</strong>
|
||
<button id="btn-close-preview" type="button" class="btn">Schließen</button>
|
||
</div>
|
||
<iframe id="previewFrame" class="flex-1 w-full"></iframe>
|
||
</div>
|
||
</dialog>
|
||
|
||
<!-- Test Send Dialog -->
|
||
<dialog id="sendTestDialog" class="rounded-2xl p-0 w-[480px]">
|
||
<form id="sendTestForm" method="dialog" class="p-4 bg-white rounded-2xl space-y-4">
|
||
<h3 class="text-lg font-semibold">Testversand</h3>
|
||
<p id="send_template_info" class="text-sm text-slate-600">Kein Template ausgewählt.</p>
|
||
<label class="block">
|
||
<span class="text-sm text-slate-600">Empfänger (E-Mail)</span>
|
||
<input id="send_to" type="email" required class="mt-1 w-full border rounded-lg px-3 py-2" placeholder="name@example.com" />
|
||
</label>
|
||
<label class="block">
|
||
<span class="text-sm text-slate-600">Betreff</span>
|
||
<input id="send_subject" type="text" class="mt-1 w-full border rounded-lg px-3 py-2" value="Testversand" />
|
||
</label>
|
||
<div class="flex justify-end gap-2">
|
||
<button type="button" id="btn-cancel-send" class="btn">Abbrechen</button>
|
||
<button type="submit" id="btn-send-now" class="btn">Senden</button>
|
||
</div>
|
||
</form>
|
||
</dialog>
|
||
|
||
<!-- Edit Snippet Dialog -->
|
||
<dialog id="editSnippetDialog" class="rounded-2xl p-0 w-[700px]">
|
||
<form id="editSnippetForm" method="dialog" class="p-4 bg-white rounded-2xl">
|
||
<h3 class="text-lg font-semibold mb-2">Snippet bearbeiten</h3>
|
||
<div class="space-y-3">
|
||
<label class="block">
|
||
<span class="text-sm text-slate-600">Name</span>
|
||
<input id="edit_snip_name" type="text" class="w-full border rounded-lg px-3 py-2" />
|
||
</label>
|
||
<label class="block">
|
||
<span class="text-sm text-slate-600">Content (HTML)</span>
|
||
<textarea id="edit_snip_content" class="w-full border rounded-lg px-3 py-2 h-64 font-mono text-sm"></textarea>
|
||
</label>
|
||
</div>
|
||
<div class="mt-4 flex justify-end gap-2">
|
||
<button type="button" id="editSnippetCancel" class="btn">Abbrechen</button>
|
||
<button type="submit" id="editSnippetSave" class="btn">Speichern</button>
|
||
</div>
|
||
</form>
|
||
</dialog>
|
||
|
||
<div id="toast-root"></div>
|
||
|
||
<script src="assets/js/toast.js?v=<?= htmlspecialchars($assetVersion, ENT_QUOTES) ?>"></script>
|
||
<script type="module" src="assets/js/app.js?v=<?= htmlspecialchars($assetVersion, ENT_QUOTES) ?>"></script>
|
||
</body>
|
||
</html>
|