Erster Commit

2026-08-22 08:40:29 +02:00
commit 875477d425
1961 changed files with 930336 additions and 0 deletions
@@ -0,0 +1,200 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Anmerkungen</title>
+<style>
+    body {
+        margin: 0;
+        background: #111;
+        color: #eee;
+        font-family: Arial, sans-serif;
+        padding: 20px;
+    }
+    h1 { margin-top: 0; }
+    a.back { color: #6fbf73; text-decoration: none; font-size: 14px; }
+    a.back:hover { text-decoration: underline; }
+
+    main { max-width: 700px; margin: 20px auto 0; }
+
+    .panel {
+        background: #1a1a1a;
+        border: 1px solid #333;
+        border-radius: 8px;
+        padding: 20px;
+        margin-bottom: 20px;
+    }
+    .panel h2 { margin-top: 0; }
+
+    textarea {
+        width: 100%;
+        min-height: 100px;
+        background: #222;
+        border: 1px solid #444;
+        color: #eee;
+        padding: 8px 10px;
+        border-radius: 4px;
+        font-size: 14px;
+        box-sizing: border-box;
+        font-family: inherit;
+        resize: vertical;
+    }
+
+    button {
+        background: #2c7a3d;
+        border: none;
+        color: white;
+        padding: 8px 14px;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 14px;
+        margin-top: 10px;
+    }
+    button.danger { background: #a83232; padding: 4px 8px; font-size: 12px; margin-top: 0; }
+    button:hover { opacity: 0.85; }
+
+    .remark-item {
+        border-bottom: 1px solid #2a2a2a;
+        padding: 12px 0;
+        display: flex;
+        justify-content: space-between;
+        gap: 10px;
+    }
+    .remark-item:last-child { border-bottom: none; }
+    .remark-meta { color: #777; font-size: 12px; margin-bottom: 4px; }
+    .remark-content { white-space: pre-wrap; line-height: 1.5; }
+
+    .msg { font-size: 13px; color: #6fbf73; min-height: 18px; margin-top: 8px; }
+    .empty-hint { color: #666; padding: 10px 0; }
+    .hidden { display: none !important; }
+</style>
+</head>
+<body>
+
+<a class="back" href="/index.html">&larr; zurück zur Startseite</a>
+<h1>📝 Anmerkungen</h1>
+
+<main>
+    <div class="panel">
+        <h2>Anmerkung schreiben</h2>
+        <p style="color:#888; font-size:13px; margin-top:0;">
+            Geht direkt und privat an die Admins - z.B. Bug-Meldungen, Kritik, Lob.
+        </p>
+        <textarea id="remarkContent" placeholder="Deine Anmerkung..."></textarea>
+        <button onclick="submitRemark()">Absenden</button>
+        <div class="msg" id="remarkMsg"></div>
+    </div>
+
+    <div class="panel hidden" id="adminPanel">
+        <h2>Eingegangene Anmerkungen (nur Admins)</h2>
+        <div id="remarkList"></div>
+        <div class="empty-hint hidden" id="remarkEmpty">Noch keine Anmerkungen vorhanden.</div>
+    </div>
+</main>
+
+<script>
+const token = localStorage.getItem("token");
+const isAdmin = localStorage.getItem("isAdmin") === "true";
+
+if (!token) {
+    alert("Bitte zuerst auf der Startseite einloggen.");
+    location.href = "/index.html";
+}
+
+async function authFetch(url, options = {}) {
+    options.headers = { ...(options.headers || {}), "Authorization": "Bearer " + token };
+    const res = await fetch(url, options);
+    if (res.status === 401) {
+        alert("Sitzung abgelaufen. Bitte erneut einloggen.");
+        location.href = "/index.html";
+        throw new Error("Nicht autorisiert");
+    }
+    return res;
+}
+
+function escapeHtml(str) {
+    const div = document.createElement("div");
+    div.textContent = str;
+    return div.innerHTML;
+}
+
+async function submitRemark() {
+    const content = document.getElementById("remarkContent").value.trim();
+    if (!content) {
+        showMsg("Bitte einen Text eingeben.", true);
+        return;
+    }
+
+    const res = await authFetch("/api/remarks", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ content })
+    });
+    const data = await res.json();
+
+    if (data.ok) {
+        showMsg("Danke, deine Anmerkung wurde übermittelt!");
+        document.getElementById("remarkContent").value = "";
+        if (isAdmin) loadRemarks();
+    } else {
+        showMsg("Fehler: " + (data.error || "unbekannt"), true);
+    }
+}
+
+async function loadRemarks() {
+    if (!isAdmin) return;
+    document.getElementById("adminPanel").classList.remove("hidden");
+
+    const res = await authFetch("/api/admin/remarks");
+    const data = await res.json();
+    renderRemarks(data.remarks || []);
+}
+
+function renderRemarks(items) {
+    const list = document.getElementById("remarkList");
+    const empty = document.getElementById("remarkEmpty");
+    list.innerHTML = "";
+
+    if (items.length === 0) {
+        empty.classList.remove("hidden");
+        return;
+    }
+    empty.classList.add("hidden");
+
+    items.forEach(r => {
+        const date = new Date(r.created_at).toLocaleString("de-DE");
+        const div = document.createElement("div");
+        div.className = "remark-item";
+        div.innerHTML = `
+            <div>
+                <div class="remark-meta">${date} — ${escapeHtml(r.username)}</div>
+                <div class="remark-content">${escapeHtml(r.content)}</div>
+            </div>
+            <button class="danger deleteBtn" data-id="${r.id}">Löschen</button>
+        `;
+        list.appendChild(div);
+    });
+
+    list.querySelectorAll(".deleteBtn").forEach(btn => {
+        btn.onclick = () => deleteRemark(btn.dataset.id);
+    });
+}
+
+async function deleteRemark(id) {
+    if (!confirm("Diese Anmerkung wirklich löschen?")) return;
+    await authFetch("/api/admin/remarks/" + id, { method: "DELETE" });
+    loadRemarks();
+}
+
+function showMsg(text, isError) {
+    const el = document.getElementById("remarkMsg");
+    el.style.color = isError ? "#e06c6c" : "#6fbf73";
+    el.textContent = text;
+    setTimeout(() => { el.textContent = ""; }, 4000);
+}
+
+loadRemarks();
+</script>
+
+</body>
+</html>