First

2026-09-07 12:21:53 +02:00
commit 93051f791d
25 changed files with 4226 additions and 0 deletions
--- a/backend/public/admin/admin.css
+++ b/backend/public/admin/admin.css
@@ -0,0 +1,46 @@
+.inline-form { display: flex; gap: 0.6em; flex-wrap: wrap; margin-top: 0.6em; }
+.inline-form input { flex: 1; min-width: 220px; }
+
+.friend-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 1.2em;
+  margin-top: 1em;
+}
+
+.friend-card {
+  background: var(--paper-2);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  padding: 1.2em;
+  position: relative;
+  text-align: center;
+}
+.friend-card .tape { top: -10px; left: 50%; transform: translateX(-50%) rotate(-3deg); }
+
+.friend-thumb {
+  width: 84px; height: 84px; border-radius: 50%;
+  object-fit: cover; border: 4px solid #fff; box-shadow: var(--shadow);
+  margin-bottom: 0.5em;
+}
+.friend-thumb.placeholder {
+  display: flex; align-items: center; justify-content: center;
+  background: var(--rose); color: #fff; font-size: 1.8rem; font-family: 'Caveat', cursive;
+}
+
+.friend-card h3 { margin-bottom: 0.15em; }
+.badge {
+  display: inline-block; font-size: 0.72rem; font-weight: 700; border-radius: 999px;
+  padding: 0.15em 0.7em; margin-bottom: 0.6em;
+}
+.badge.on { background: var(--sage); color: #245a3a; }
+.badge.off { background: #eee; color: #888; }
+
+.friend-actions { display: flex; gap: 0.4em; justify-content: center; flex-wrap: wrap; margin-top: 0.6em; }
+.friend-actions button, .friend-actions a.btn { font-size: 0.85rem; padding: 0.5em 1em; }
+
+.modal-backdrop {
+  position: fixed; inset: 0; background: rgba(75,59,107,0.35);
+  display: flex; align-items: center; justify-content: center; z-index: 50; padding: 1em;
+}
+.modal { width: 100%; max-width: 420px; }
--- a/backend/public/admin/admin.js
+++ b/backend/public/admin/admin.js
@@ -0,0 +1,158 @@
+let friends = [];
+let shareTargetId = null;
+
+async function checkSession() {
+  const res = await fetch('/api/session');
+  const data = await res.json();
+  if (data.role !== 'admin') {
+    window.location.href = '/';
+  }
+}
+
+async function loadFriends() {
+  const res = await fetch('/api/friends');
+  if (res.status === 401) { window.location.href = '/'; return; }
+  const data = await res.json();
+  friends = data.friends || [];
+  renderFriends();
+}
+
+function renderFriends() {
+  const grid = document.getElementById('friendGrid');
+  const emptyMsg = document.getElementById('emptyMsg');
+  grid.innerHTML = '';
+  emptyMsg.style.display = friends.length ? 'none' : 'block';
+
+  friends.forEach((f) => {
+    const el = document.createElement('div');
+    el.className = 'friend-card';
+    const thumbHtml = f.profileImage
+      ? `<img class="friend-thumb" src="/uploads/${encodeURIComponent(folderFor(f))}/${encodeURIComponent(f.profileImage)}" />`
+      : `<div class="friend-thumb placeholder">${(f.name || '?')[0].toUpperCase()}</div>`;
+    el.innerHTML = `
+      <div class="tape"></div>
+      ${thumbHtml}
+      <h3>${escapeHtml(f.name)}</h3>
+      <span class="badge ${f.shareEnabled ? 'on' : 'off'}">${f.shareEnabled ? 'Freigegeben' : 'Nicht freigegeben'}</span>
+      <div class="friend-actions">
+        <a class="btn" href="/friend/${f.id}">✏️ Bearbeiten</a>
+        <button class="secondary" data-share="${f.id}">🔗 Freigabe</button>
+        <button class="danger" data-delete="${f.id}">🗑️</button>
+      </div>
+    `;
+    grid.appendChild(el);
+  });
+
+  grid.querySelectorAll('[data-share]').forEach((btn) => {
+    btn.addEventListener('click', () => openShareModal(btn.dataset.share));
+  });
+  grid.querySelectorAll('[data-delete]').forEach((btn) => {
+    btn.addEventListener('click', () => deleteFriend(btn.dataset.delete));
+  });
+}
+
+// wir brauchen den vollen Ordnernamen für Bild-URLs; da wir ihn nicht separat liefern,
+// nutzen wir /uploads/<id>-Lookup über eine kleine Konvention: Backend akzeptiert auch
+// reine IDs nicht direkt, daher holen wir folderName aus friend-detail bei Bedarf.
+// Einfachere Lösung: Backend liefert profileImage-Pfad bereits vollständig auf.
+function folderFor(f) {
+  return f.folderName || f.id;
+}
+
+function escapeHtml(str) {
+  const div = document.createElement('div');
+  div.textContent = str || '';
+  return div.innerHTML;
+}
+
+document.getElementById('createForm').addEventListener('submit', async (e) => {
+  e.preventDefault();
+  const name = document.getElementById('newName').value.trim();
+  const errBox = document.getElementById('createErr');
+  errBox.innerHTML = '';
+  if (!name) return;
+  const res = await fetch('/api/friends', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ name }),
+  });
+  const data = await res.json();
+  if (!res.ok) {
+    errBox.innerHTML = `<p class="error-msg">${data.error}</p>`;
+    return;
+  }
+  document.getElementById('newName').value = '';
+  loadFriends();
+});
+
+async function deleteFriend(id) {
+  const f = friends.find((x) => x.id === id);
+  if (!confirm(`"${f ? f.name : 'Freund'}" wirklich löschen? Alle Fotos und Einträge gehen dabei verloren.`)) return;
+  const res = await fetch(`/api/friends/${id}`, { method: 'DELETE' });
+  if (res.ok) loadFriends();
+}
+
+function openShareModal(id) {
+  shareTargetId = id;
+  const f = friends.find((x) => x.id === id);
+  document.getElementById('shareFriendName').textContent = f ? f.name : '';
+  document.getElementById('sharePw').value = '';
+  document.getElementById('shareErr').innerHTML = '';
+  const linkBox = document.getElementById('shareLinkBox');
+  if (f && f.shareEnabled) {
+    linkBox.style.display = 'block';
+    document.getElementById('shareLinkInput').value = `${window.location.origin}/share/${id}`;
+  } else {
+    linkBox.style.display = 'none';
+  }
+  document.getElementById('shareModal').style.display = 'flex';
+}
+
+document.getElementById('shareCloseBtn').addEventListener('click', () => {
+  document.getElementById('shareModal').style.display = 'none';
+});
+
+document.getElementById('shareEnableBtn').addEventListener('click', async () => {
+  const pw = document.getElementById('sharePw').value;
+  const errBox = document.getElementById('shareErr');
+  errBox.innerHTML = '';
+  const res = await fetch(`/api/friends/${shareTargetId}/share`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ enabled: true, password: pw }),
+  });
+  const data = await res.json();
+  if (!res.ok) {
+    errBox.innerHTML = `<p class="error-msg">${data.error}</p>`;
+    return;
+  }
+  document.getElementById('shareLinkBox').style.display = 'block';
+  document.getElementById('shareLinkInput').value = `${window.location.origin}/share/${shareTargetId}`;
+  await loadFriends();
+});
+
+document.getElementById('shareDisableBtn').addEventListener('click', async () => {
+  const res = await fetch(`/api/friends/${shareTargetId}/share`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ enabled: false }),
+  });
+  if (res.ok) {
+    document.getElementById('shareLinkBox').style.display = 'none';
+    await loadFriends();
+  }
+});
+
+document.getElementById('copyLinkBtn').addEventListener('click', () => {
+  const input = document.getElementById('shareLinkInput');
+  input.select();
+  navigator.clipboard.writeText(input.value).catch(() => {});
+});
+
+document.getElementById('logoutBtn').addEventListener('click', async () => {
+  await fetch('/api/logout', { method: 'POST' });
+  window.location.href = '/';
+});
+
+checkSession();
+loadFriends();
--- a/backend/public/admin/index.html
+++ b/backend/public/admin/index.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Freundesbuch – Admin</title>
+<link rel="stylesheet" href="/assets/style.css" />
+<link rel="stylesheet" href="/admin/admin.css" />
+</head>
+<body>
+  <div class="top-bar card" style="border-radius:0;">
+    <h1 style="margin:0;">📖 Freundesbuch</h1>
+    <div style="display:flex; gap:0.6em; flex-wrap:wrap;">
+      <a class="btn" href="/book" target="_blank" rel="noopener">🎠 Freundesbuch anschauen</a>
+      <button class="secondary" id="logoutBtn">Abmelden</button>
+    </div>
+  </div>
+
+  <div class="container">
+    <section class="card" id="createCard">
+      <h2>Neuen Freund anlegen</h2>
+      <form id="createForm" class="inline-form">
+        <input type="text" id="newName" placeholder="Name des Freundes" required />
+        <button type="submit">+ Anlegen</button>
+      </form>
+      <div id="createErr"></div>
+    </section>
+
+    <section style="margin-top:2em;">
+      <h2>Deine Freunde</h2>
+      <div id="friendGrid" class="friend-grid"></div>
+      <p id="emptyMsg" class="muted" style="display:none;">Noch keine Freunde angelegt – leg oben den ersten an!</p>
+    </section>
+  </div>
+
+  <!-- Share-Dialog -->
+  <div id="shareModal" class="modal-backdrop" style="display:none;">
+    <div class="card modal">
+      <h3>Freigabe für <span id="shareFriendName"></span></h3>
+      <p class="muted">Vergib ein eigenes Passwort. Dein Freund kann sich über den Link damit anmelden und nur seine eigene Seite bearbeiten.</p>
+      <label for="sharePw">Freigabe-Passwort</label>
+      <input type="text" id="sharePw" placeholder="z. B. Sommerferien2026" />
+      <div style="display:flex; gap:0.6em; margin-top:1em; flex-wrap:wrap;">
+        <button id="shareEnableBtn">Freigabe aktivieren / Passwort setzen</button>
+        <button class="danger" id="shareDisableBtn">Freigabe beenden</button>
+        <button class="secondary" id="shareCloseBtn">Schließen</button>
+      </div>
+      <div id="shareLinkBox" style="margin-top:1em; display:none;">
+        <label>Link zum Teilen</label>
+        <div style="display:flex; gap:0.5em;">
+          <input type="text" id="shareLinkInput" readonly />
+          <button type="button" id="copyLinkBtn" class="secondary">Kopieren</button>
+        </div>
+      </div>
+      <div id="shareErr"></div>
+    </div>
+  </div>
+
+<script src="/admin/admin.js"></script>
+</body>
+</html>
--- a/backend/public/book/book.css
+++ b/backend/public/book/book.css
@@ -0,0 +1,52 @@
+.book-root { max-width: 1000px; margin: 0 auto; padding: 2em 1.2em 6em; min-height: 60vh; }
+
+.friend-page { position: relative; }
+
+.page-head { text-align: center; margin-bottom: 1.4em; position: relative; }
+.page-head .tape { top: -10px; left: 50%; transform: translateX(-50%) rotate(-4deg); }
+.page-profile-pic {
+  width: 150px; height: 150px; border-radius: 50%; object-fit: cover;
+  border: 8px solid #fff; box-shadow: var(--shadow); transform: rotate(-3deg);
+}
+.page-profile-pic.placeholder {
+  display: flex; align-items: center; justify-content: center;
+  background: var(--rose); color: #fff; font-size: 3rem; font-family: 'Caveat', cursive;
+}
+.page-head h1 { font-size: 3.2rem; margin-top: 0.3em; }
+
+.steckbrief-card {
+  background: var(--paper-2); border: 2px dashed var(--mustard); border-radius: 14px;
+  padding: 1.2em 1.6em; margin: 0 auto 2em; max-width: 640px; transform: rotate(-0.4deg);
+  box-shadow: var(--shadow);
+}
+.steckbrief-card h2 { color: var(--rust); }
+.sb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.6em 1.2em; }
+.sb-row .sb-key { font-weight: 700; color: var(--ink-soft); font-size: 0.82rem; display: block; }
+.sb-row .sb-val { font-size: 0.95rem; }
+
+.scrap-grid {
+  display: flex; flex-wrap: wrap; gap: 2em 1.6em; justify-content: center; padding: 1em 0.5em;
+}
+
+.scrap-item { background: #fff; box-shadow: 0 6px 16px rgba(0,0,0,0.16); transition: transform 0.15s ease; }
+.scrap-item:hover { transform: scale(1.04) rotate(0deg) !important; z-index: 2; }
+
+.scrap-item.polaroid { padding: 10px 10px 30px; width: 220px; }
+.scrap-item.polaroid img { width: 100%; height: 190px; object-fit: cover; display: block; }
+
+.scrap-item.text-note { width: 220px; min-height: 160px; padding: 1.2em; background: #fef7d6; font-family: Georgia, serif; }
+
+.scrap-item.audio-note { width: 220px; padding: 1.2em; background: #e8f3ec; text-align: center; }
+.scrap-item.audio-note audio { width: 100%; margin-top: 0.6em; }
+
+.scrap-caption { font-family: 'Caveat', cursive; font-size: 1.2rem; text-align: center; margin-top: 0.4em; color: var(--ink-soft); }
+
+.book-nav {
+  position: fixed; bottom: 0; left: 0; right: 0;
+  background: var(--paper-2); border-top: 2px solid var(--line);
+  display: flex; align-items: center; justify-content: center; gap: 1.4em;
+  padding: 0.8em; box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
+}
+#pageIndicator { font-family: 'Caveat', cursive; font-size: 1.3rem; color: var(--ink-soft); }
+
+.empty-book { text-align: center; margin-top: 3em; }
--- a/backend/public/book/book.js
+++ b/backend/public/book/book.js
@@ -0,0 +1,147 @@
+let friends = [];
+let currentIndex = 0;
+
+const STECKBRIEF_LABELS = {
+  spitzname: 'Spitzname',
+  geburtstag: 'Geburtstag',
+  adresse: 'Adresse / Wohnort',
+  lieblingsfarbe: 'Lieblingsfarbe',
+  lieblingsessen: 'Lieblingsessen',
+  lieblingstier: 'Lieblingstier',
+  hobbys: 'Hobbys',
+  lieblingsmusik: 'Lieblingsmusik',
+  lieblingsfilm: 'Lieblingsfilm/-serie',
+  traumberuf: 'Traumberuf',
+  bestefreunde: 'Beste Freunde',
+  motto: 'Motto / Lebensweisheit',
+  sonstiges: 'Sonstiges',
+};
+
+function escapeHtml(str) {
+  const div = document.createElement('div');
+  div.textContent = str || '';
+  return div.innerHTML;
+}
+
+function randomRotation(seed) {
+  const angles = [-6, -4, -2, 2, 4, 6, -3, 3, 5, -5];
+  return angles[seed % angles.length];
+}
+
+async function load() {
+  const res = await fetch('/api/book');
+  if (res.status === 401) { window.location.href = '/'; return; }
+  const data = await res.json();
+  friends = data.friends || [];
+  if (!friends.length) {
+    document.getElementById('bookRoot').innerHTML = `
+      <div class="empty-book">
+        <h2>Noch ist dieses Buch leer 📖</h2>
+        <p class="muted">Lege im Admin-Bereich Freunde an und teile den Link mit ihnen.</p>
+      </div>`;
+    return;
+  }
+  document.getElementById('bookNav').style.display = 'flex';
+  renderPage();
+}
+
+function uploadUrl(folder, filename) {
+  return `/uploads/${encodeURIComponent(folder)}/${encodeURIComponent(filename)}`;
+}
+
+function renderPage() {
+  const f = friends[currentIndex];
+  const root = document.getElementById('bookRoot');
+
+  const profileHtml = f.profileImage
+    ? `<img class="page-profile-pic" src="${uploadUrl(f.folderName, f.profileImage)}" />`
+    : `<div class="page-profile-pic placeholder">${(f.name || '?')[0].toUpperCase()}</div>`;
+
+  const sbEntries = Object.entries(f.steckbrief || {}).filter(([, v]) => v && String(v).trim());
+  const sbHtml = sbEntries.length
+    ? `<div class="sb-grid">${sbEntries.map(([k, v]) => `
+        <div class="sb-row"><span class="sb-key">${escapeHtml(STECKBRIEF_LABELS[k] || k)}</span><span class="sb-val">${escapeHtml(v)}</span></div>
+      `).join('')}</div>`
+    : `<p class="muted">Noch nichts eingetragen.</p>`;
+
+  const blocks = [...(f.blocks || [])].sort((a, b) => a.order - b.order);
+  const blocksHtml = blocks.length
+    ? blocks.map((b, i) => {
+        const rot = randomRotation(i + f.id.length);
+        if (b.type === 'image') {
+          return `<div class="scrap-item polaroid" style="transform: rotate(${rot}deg);">
+            <img src="${uploadUrl(f.folderName, b.filename)}" />
+            ${b.caption ? `<div class="scrap-caption">${escapeHtml(b.caption)}</div>` : ''}
+          </div>`;
+        }
+        if (b.type === 'audio') {
+          return `<div class="scrap-item audio-note" style="transform: rotate(${rot * 0.5}deg);">
+            <div>🎙️ ${b.caption ? escapeHtml(b.caption) : 'Sprachnachricht'}</div>
+            <audio controls src="${uploadUrl(f.folderName, b.filename)}"></audio>
+          </div>`;
+        }
+        return `<div class="scrap-item text-note" style="transform: rotate(${rot * 0.5}deg);">
+          <p>${escapeHtml(b.content).replace(/\n/g, '<br/>')}</p>
+          ${b.caption ? `<div class="scrap-caption">${escapeHtml(b.caption)}</div>` : ''}
+        </div>`;
+      }).join('')
+    : '<p class="muted">Noch keine Erinnerungen hinzugefügt.</p>';
+
+  root.innerHTML = `
+    <div class="friend-page">
+      <div class="page-head">
+        <div class="tape"></div>
+        ${profileHtml}
+        <h1>${escapeHtml(f.name)}</h1>
+      </div>
+      <div class="steckbrief-card">
+        <h2>Steckbrief</h2>
+        ${sbHtml}
+      </div>
+      <div class="scrap-grid">
+        ${blocksHtml}
+      </div>
+    </div>
+  `;
+
+  document.getElementById('pageIndicator').textContent = `Seite ${currentIndex + 1} von ${friends.length}`;
+  document.getElementById('prevBtn').disabled = currentIndex === 0;
+  document.getElementById('nextBtn').disabled = currentIndex === friends.length - 1;
+}
+
+document.getElementById('prevBtn').addEventListener('click', () => {
+  if (currentIndex > 0) { currentIndex--; renderPage(); window.scrollTo({ top: 0, behavior: 'smooth' }); }
+});
+document.getElementById('nextBtn').addEventListener('click', () => {
+  if (currentIndex < friends.length - 1) { currentIndex++; renderPage(); window.scrollTo({ top: 0, behavior: 'smooth' }); }
+});
+document.addEventListener('keydown', (e) => {
+  if (e.key === 'ArrowLeft') document.getElementById('prevBtn').click();
+  if (e.key === 'ArrowRight') document.getElementById('nextBtn').click();
+});
+
+document.getElementById('pdfBtn').addEventListener('click', async () => {
+  const btn = document.getElementById('pdfBtn');
+  btn.disabled = true;
+  btn.textContent = 'Erzeuge PDF...';
+  try {
+    const res = await fetch('/api/book/pdf');
+    if (!res.ok) throw new Error('PDF-Export fehlgeschlagen.');
+    const blob = await res.blob();
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'freundesbuch.pdf';
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    URL.revokeObjectURL(url);
+  } catch (err) {
+    alert(err.message);
+  } finally {
+    btn.disabled = false;
+    btn.textContent = '⬇️ Als PDF exportieren';
+  }
+});
+
+load();
--- a/backend/public/book/index.html
+++ b/backend/public/book/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Freundesbuch – Ansicht</title>
+<link rel="stylesheet" href="/assets/style.css" />
+<link rel="stylesheet" href="/book/book.css" />
+</head>
+<body>
+
+<div class="top-bar card" style="border-radius:0;">
+  <h1 style="margin:0;">🎠 Freundesbuch</h1>
+  <div style="display:flex; gap:0.6em; flex-wrap:wrap;">
+    <button class="secondary" id="pdfBtn">⬇️ Als PDF exportieren</button>
+    <a class="btn secondary" href="/admin">← Zur Übersicht</a>
+  </div>
+</div>
+
+<div id="bookRoot" class="book-root">
+  <p class="muted" style="text-align:center; margin-top:3em;">Lädt...</p>
+</div>
+
+<div class="book-nav" id="bookNav" style="display:none;">
+  <button id="prevBtn" class="secondary">← Zurück</button>
+  <span id="pageIndicator"></span>
+  <button id="nextBtn" class="secondary">Weiter →</button>
+</div>
+
+<script src="/book/book.js"></script>
+</body>
+</html>
--- a/backend/public/friend/friend.css
+++ b/backend/public/friend/friend.css
@@ -0,0 +1,38 @@
+.profile-preview {
+  width: 140px; height: 140px; border-radius: 50%;
+  object-fit: cover; border: 6px solid #fff; box-shadow: var(--shadow);
+  margin: 0.4em auto 0; display: block;
+}
+.profile-preview.placeholder {
+  display: flex; align-items: center; justify-content: center;
+  font-size: 2.4rem; background: var(--paper); color: var(--rose);
+}
+
+.steckbrief-form {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 1em;
+}
+
+.saved-msg { margin-left: 0.8em; color: #3a8a5a; font-weight: 700; opacity: 0; transition: opacity 0.3s; }
+.saved-msg.show { opacity: 1; }
+
+.add-block-tabs { display: flex; gap: 0.5em; margin: 0.8em 0; flex-wrap: wrap; }
+.tab-btn { background: #fff; color: var(--ink-soft); border: 2px solid var(--line); box-shadow: none; padding: 0.5em 1em; }
+.tab-btn.active { background: var(--ink-soft); color: #fff; border-color: var(--ink-soft); }
+
+.blocks-list { display: flex; flex-wrap: wrap; gap: 1.2em; margin-top: 1.4em; }
+.block-item {
+  background: var(--paper-2); border-radius: 10px; box-shadow: var(--shadow);
+  padding: 1em; width: 220px; position: relative;
+}
+.block-item img { width: 100%; height: 140px; object-fit: cover; border-radius: 6px; }
+.block-item audio { width: 100%; margin-top: 0.4em; }
+.block-item textarea { min-height: 4em; font-size: 0.9rem; }
+.block-item .block-caption { font-size: 0.82rem; margin-top: 0.5em; }
+.block-item .block-actions { display: flex; justify-content: space-between; margin-top: 0.6em; gap: 0.4em; }
+.block-item .block-actions button { font-size: 0.78rem; padding: 0.35em 0.7em; }
+.block-type-tag {
+  position: absolute; top: -8px; left: 10px; font-size: 0.7rem; font-weight: 700;
+  background: var(--mustard); color: #533; padding: 0.1em 0.6em; border-radius: 999px;
+}
--- a/backend/public/friend/friend.js
+++ b/backend/public/friend/friend.js
@@ -0,0 +1,270 @@
+const STECKBRIEF_FIELDS = [
+  ['spitzname', 'Spitzname'],
+  ['geburtstag', 'Geburtstag'],
+  ['adresse', 'Adresse / Wohnort'],
+  ['lieblingsfarbe', 'Lieblingsfarbe'],
+  ['lieblingsessen', 'Lieblingsessen'],
+  ['lieblingstier', 'Lieblingstier'],
+  ['hobbys', 'Hobbys'],
+  ['lieblingsmusik', 'Lieblingsmusik'],
+  ['lieblingsfilm', 'Lieblingsfilm/-serie'],
+  ['traumberuf', 'Traumberuf'],
+  ['bestefreunde', 'Beste Freunde'],
+  ['motto', 'Motto / Lebensweisheit'],
+  ['sonstiges', 'Sonstiges'],
+];
+
+const pathParts = window.location.pathname.split('/').filter(Boolean); // ['friend', ':id'] or ['share', ':id']
+const mode = pathParts[0]; // 'friend' | 'share'
+const friendId = pathParts[1];
+
+let currentFriend = null;
+let currentFolder = null;
+let selectedType = 'image';
+
+function escapeHtml(str) {
+  const div = document.createElement('div');
+  div.textContent = str || '';
+  return div.innerHTML;
+}
+
+async function init() {
+  const sessionRes = await fetch('/api/session');
+  const session = await sessionRes.json();
+
+  const isAdmin = session.role === 'admin';
+  const isMatchingFriend = session.role === 'friend' && session.friendId === friendId;
+
+  document.getElementById('adminBackWrap').style.display = isAdmin ? 'block' : 'none';
+
+  if (isAdmin || isMatchingFriend) {
+    loadFriend();
+  } else if (mode === 'share') {
+    showLoginGate();
+  } else {
+    // /friend/:id ohne Admin-Session -> zur Startseite
+    window.location.href = '/';
+  }
+}
+
+function showLoginGate() {
+  document.getElementById('loginGate').style.display = 'block';
+  document.getElementById('editorRoot').style.display = 'none';
+}
+
+document.getElementById('gateForm').addEventListener('submit', async (e) => {
+  e.preventDefault();
+  const password = document.getElementById('gatePassword').value;
+  const errBox = document.getElementById('gateErr');
+  errBox.innerHTML = '';
+  const res = await fetch(`/api/share/${friendId}/login`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ password }),
+  });
+  const data = await res.json();
+  if (!res.ok) {
+    errBox.innerHTML = `<p class="error-msg">${data.error}</p>`;
+    return;
+  }
+  loadFriend();
+});
+
+async function loadFriend() {
+  const res = await fetch(`/api/friends/${friendId}`);
+  if (res.status === 401) { showLoginGate(); return; }
+  if (res.status === 404) { document.body.innerHTML = '<div class="container"><p class="error-msg">Diesen Freund gibt es nicht (mehr).</p></div>'; return; }
+  const data = await res.json();
+  currentFriend = data.friend;
+  currentFolder = currentFriend.folderName;
+
+  document.getElementById('loginGate').style.display = 'none';
+  document.getElementById('editorRoot').style.display = 'block';
+  document.getElementById('pageTitle').textContent = `📖 ${currentFriend.name}`;
+
+  renderProfileImage();
+  renderSteckbrief();
+  renderBlocks();
+}
+
+function uploadUrl(filename) {
+  return `/uploads/${encodeURIComponent(currentFolder)}/${encodeURIComponent(filename)}`;
+}
+
+function renderProfileImage() {
+  const img = document.getElementById('profileImg');
+  const placeholder = document.getElementById('profilePlaceholder');
+  if (currentFriend.profileImage) {
+    img.src = uploadUrl(currentFriend.profileImage) + `?t=${Date.now()}`;
+    img.style.display = 'block';
+    placeholder.style.display = 'none';
+  } else {
+    img.style.display = 'none';
+    placeholder.style.display = 'flex';
+  }
+}
+
+document.getElementById('profileInput').addEventListener('change', async (e) => {
+  const file = e.target.files[0];
+  if (!file) return;
+  const fd = new FormData();
+  fd.append('image', file);
+  const res = await fetch(`/api/friends/${friendId}/profileimage`, { method: 'POST', body: fd });
+  const data = await res.json();
+  if (res.ok) {
+    currentFriend = data.friend;
+    renderProfileImage();
+  } else {
+    alert(data.error || 'Upload fehlgeschlagen.');
+  }
+});
+
+function renderSteckbrief() {
+  const form = document.getElementById('steckbriefForm');
+  form.innerHTML = '';
+  STECKBRIEF_FIELDS.forEach(([key, label]) => {
+    const wrap = document.createElement('div');
+    const val = (currentFriend.steckbrief && currentFriend.steckbrief[key]) || '';
+    wrap.innerHTML = `<label>${label}</label><input type="text" data-key="${key}" value="${escapeHtml(val)}" />`;
+    form.appendChild(wrap);
+  });
+}
+
+document.getElementById('steckbriefForm').addEventListener('submit', async (e) => {
+  e.preventDefault();
+  const inputs = document.querySelectorAll('#steckbriefForm input');
+  const payload = {};
+  inputs.forEach((inp) => { payload[inp.dataset.key] = inp.value; });
+  const res = await fetch(`/api/friends/${friendId}/steckbrief`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  });
+  const data = await res.json();
+  if (res.ok) {
+    currentFriend = data.friend;
+    const savedEl = document.getElementById('sbSaved');
+    savedEl.textContent = 'Gespeichert ✓';
+    savedEl.classList.add('show');
+    setTimeout(() => savedEl.classList.remove('show'), 1800);
+  } else {
+    alert(data.error || 'Speichern fehlgeschlagen.');
+  }
+});
+
+// --- Block-Typ-Auswahl ---
+document.querySelectorAll('.tab-btn').forEach((btn) => {
+  btn.addEventListener('click', () => {
+    selectedType = btn.dataset.type;
+    document.querySelectorAll('.tab-btn').forEach((b) => b.classList.toggle('active', b === btn));
+    document.getElementById('blockType').value = selectedType;
+    const fileWrap = document.getElementById('blockFileWrap');
+    const textWrap = document.getElementById('blockTextWrap');
+    const fileLabel = document.getElementById('blockFileLabel');
+    const fileInput = document.getElementById('blockFile');
+    if (selectedType === 'text') {
+      fileWrap.style.display = 'none';
+      textWrap.style.display = 'block';
+    } else {
+      fileWrap.style.display = 'block';
+      textWrap.style.display = 'none';
+      fileLabel.textContent = selectedType === 'image' ? 'Bild auswählen' : 'MP3 auswählen';
+      fileInput.accept = selectedType === 'image' ? 'image/*' : 'audio/*';
+    }
+  });
+});
+
+document.getElementById('blockForm').addEventListener('submit', async (e) => {
+  e.preventDefault();
+  const fd = new FormData();
+  fd.append('type', selectedType);
+  fd.append('caption', document.getElementById('blockCaption').value);
+  if (selectedType === 'text') {
+    fd.append('content', document.getElementById('blockContent').value);
+  } else {
+    const file = document.getElementById('blockFile').files[0];
+    if (!file) { alert('Bitte eine Datei auswählen.'); return; }
+    fd.append('file', file);
+  }
+  const res = await fetch(`/api/friends/${friendId}/blocks`, { method: 'POST', body: fd });
+  const data = await res.json();
+  if (res.ok) {
+    currentFriend = data.friend;
+    document.getElementById('blockForm').reset();
+    renderBlocks();
+  } else {
+    alert(data.error || 'Hinzufügen fehlgeschlagen.');
+  }
+});
+
+function renderBlocks() {
+  const list = document.getElementById('blocksList');
+  list.innerHTML = '';
+  const blocks = [...(currentFriend.blocks || [])].sort((a, b) => a.order - b.order);
+  blocks.forEach((b, idx) => {
+    const el = document.createElement('div');
+    el.className = 'block-item';
+    const tag = { image: '🖼️ Bild', text: '📝 Text', audio: '🎙️ Audio' }[b.type] || b.type;
+    let inner = `<div class="block-type-tag">${tag}</div>`;
+    if (b.type === 'image') {
+      inner += `<img src="${uploadUrl(b.filename)}" />`;
+    } else if (b.type === 'audio') {
+      inner += `<audio controls src="${uploadUrl(b.filename)}"></audio>`;
+    } else {
+      inner += `<textarea data-content-for="${b.id}">${escapeHtml(b.content)}</textarea>`;
+    }
+    inner += `<input type="text" class="block-caption" placeholder="Bildunterschrift" data-caption-for="${b.id}" value="${escapeHtml(b.caption)}" />`;
+    inner += `<div class="block-actions">
+      <button type="button" class="secondary" data-save="${b.id}">💾</button>
+      <button type="button" class="secondary" data-up="${b.id}" ${idx === 0 ? 'disabled' : ''}>↑</button>
+      <button type="button" class="secondary" data-down="${b.id}" ${idx === blocks.length - 1 ? 'disabled' : ''}>↓</button>
+      <button type="button" class="danger" data-del="${b.id}">🗑️</button>
+    </div>`;
+    el.innerHTML = inner;
+    list.appendChild(el);
+  });
+
+  list.querySelectorAll('[data-save]').forEach((btn) => btn.addEventListener('click', () => saveBlock(btn.dataset.save)));
+  list.querySelectorAll('[data-del]').forEach((btn) => btn.addEventListener('click', () => deleteBlock(btn.dataset.del)));
+  list.querySelectorAll('[data-up]').forEach((btn) => btn.addEventListener('click', () => moveBlock(btn.dataset.up, -1)));
+  list.querySelectorAll('[data-down]').forEach((btn) => btn.addEventListener('click', () => moveBlock(btn.dataset.down, 1)));
+}
+
+async function saveBlock(id) {
+  const captionInput = document.querySelector(`[data-caption-for="${id}"]`);
+  const contentInput = document.querySelector(`[data-content-for="${id}"]`);
+  const payload = { caption: captionInput ? captionInput.value : '' };
+  if (contentInput) payload.content = contentInput.value;
+  const res = await fetch(`/api/friends/${friendId}/blocks/${id}`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  });
+  const data = await res.json();
+  if (res.ok) { currentFriend = data.friend; renderBlocks(); }
+}
+
+async function deleteBlock(id) {
+  if (!confirm('Diesen Block wirklich löschen?')) return;
+  const res = await fetch(`/api/friends/${friendId}/blocks/${id}`, { method: 'DELETE' });
+  const data = await res.json();
+  if (res.ok) { currentFriend = data.friend; renderBlocks(); }
+}
+
+async function moveBlock(id, dir) {
+  const blocks = [...(currentFriend.blocks || [])].sort((a, b) => a.order - b.order);
+  const idx = blocks.findIndex((b) => b.id === id);
+  const swapIdx = idx + dir;
+  if (swapIdx < 0 || swapIdx >= blocks.length) return;
+  [blocks[idx], blocks[swapIdx]] = [blocks[swapIdx], blocks[idx]];
+  const order = blocks.map((b) => b.id);
+  const res = await fetch(`/api/friends/${friendId}/blocks/reorder`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ order }),
+  });
+  const data = await res.json();
+  if (res.ok) { currentFriend = data.friend; renderBlocks(); }
+}
+
+init();
--- a/backend/public/friend/index.html
+++ b/backend/public/friend/index.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Freundesbuch</title>
+<link rel="stylesheet" href="/assets/style.css" />
+<link rel="stylesheet" href="/friend/friend.css" />
+</head>
+<body>
+
+<div id="loginGate" class="container" style="display:none; max-width:380px; text-align:center;">
+  <div class="card" style="position:relative;">
+    <div class="tape" style="top:-10px; left:50%; transform:translateX(-50%) rotate(-3deg);"></div>
+    <span style="font-size:2.6rem;">🔒</span>
+    <h1 id="gateFriendName">Seite gesperrt</h1>
+    <p class="muted">Gib das Freigabe-Passwort ein, um deine Seite zu bearbeiten.</p>
+    <form id="gateForm" style="display:flex; flex-direction:column; gap:0.8em; margin-top:1em;">
+      <input type="password" id="gatePassword" placeholder="Passwort" required autofocus />
+      <button type="submit">Öffnen</button>
+    </form>
+    <div id="gateErr"></div>
+  </div>
+</div>
+
+<div id="editorRoot" style="display:none;">
+  <div class="top-bar card" style="border-radius:0;">
+    <h1 style="margin:0;" id="pageTitle">📖 Freund</h1>
+    <div id="adminBackWrap"><a class="btn secondary" href="/admin">← Zur Übersicht</a></div>
+  </div>
+
+  <div class="container">
+    <section class="card" style="text-align:center; position:relative;">
+      <div class="tape" style="top:-10px; left:50%; transform:translateX(-50%) rotate(-2deg);"></div>
+      <h2>Profilbild</h2>
+      <img id="profileImg" class="profile-preview" style="display:none;" />
+      <div id="profilePlaceholder" class="profile-preview placeholder">📷</div>
+      <div style="margin-top:0.8em;">
+        <input type="file" id="profileInput" accept="image/*" />
+      </div>
+    </section>
+
+    <section class="card" style="margin-top:1.4em;">
+      <h2>Steckbrief</h2>
+      <form id="steckbriefForm" class="steckbrief-form"></form>
+      <button type="submit" form="steckbriefForm" style="margin-top:1em;">Steckbrief speichern</button>
+      <span id="sbSaved" class="saved-msg"></span>
+    </section>
+
+    <section class="card" style="margin-top:1.4em;">
+      <h2>Erinnerungen &amp; Blöcke</h2>
+      <p class="muted">Füge Bilder, Texte oder Sprachnachrichten hinzu.</p>
+
+      <div class="add-block-tabs">
+        <button type="button" class="tab-btn active" data-type="image">🖼️ Bild</button>
+        <button type="button" class="tab-btn" data-type="text">📝 Text</button>
+        <button type="button" class="tab-btn" data-type="audio">🎙️ Audio</button>
+      </div>
+
+      <form id="blockForm">
+        <input type="hidden" id="blockType" value="image" />
+        <div id="blockFileWrap">
+          <label id="blockFileLabel">Bild auswählen</label>
+          <input type="file" id="blockFile" accept="image/*" />
+        </div>
+        <div id="blockTextWrap" style="display:none;">
+          <label>Text</label>
+          <textarea id="blockContent" placeholder="Schreib etwas Schönes..."></textarea>
+        </div>
+        <label style="margin-top:0.8em;">Bildunterschrift (optional)</label>
+        <input type="text" id="blockCaption" placeholder="z. B. Sommer 2026" />
+        <button type="submit" style="margin-top:0.8em;">+ Hinzufügen</button>
+      </form>
+
+      <div id="blocksList" class="blocks-list"></div>
+    </section>
+  </div>
+</div>
+
+<script src="/friend/friend.js"></script>
+</body>
+</html>
--- a/backend/public/login/index.html
+++ b/backend/public/login/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Freundesbuch</title>
+<link rel="stylesheet" href="/assets/style.css" />
+<style>
+  body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
+  .login-card { width: 100%; max-width: 380px; text-align: center; position: relative; }
+  .login-card .tape { top: -12px; left: 50%; transform: translateX(-50%) rotate(-3deg); }
+  .book-emoji { font-size: 3rem; display: block; margin-bottom: 0.1em; }
+  form { margin-top: 1.2em; display: flex; flex-direction: column; gap: 0.8em; }
+</style>
+</head>
+<body>
+  <div class="card login-card">
+    <div class="tape"></div>
+    <span class="book-emoji">📖</span>
+    <h1>Freundesbuch</h1>
+    <p class="muted">Gib das Passwort ein, um hineinzuschauen.</p>
+    <form id="loginForm">
+      <input type="password" id="password" placeholder="Passwort" autofocus required />
+      <button type="submit">Aufschlagen</button>
+    </form>
+    <div id="err"></div>
+  </div>
+
+<script>
+document.getElementById('loginForm').addEventListener('submit', async (e) => {
+  e.preventDefault();
+  const password = document.getElementById('password').value;
+  const errBox = document.getElementById('err');
+  errBox.innerHTML = '';
+  try {
+    const res = await fetch('/api/login', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ password }),
+    });
+    const data = await res.json();
+    if (!res.ok) {
+      errBox.innerHTML = `<p class="error-msg">${data.error || 'Fehler beim Anmelden.'}</p>`;
+      return;
+    }
+    window.location.href = '/admin';
+  } catch (err) {
+    errBox.innerHTML = '<p class="error-msg">Verbindung fehlgeschlagen.</p>';
+  }
+});
+</script>
+</body>
+</html>
--- a/backend/public/shared/style.css
+++ b/backend/public/shared/style.css
@@ -0,0 +1,126 @@
+@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Nunito:ital,wght@0,400;0,600;0,700;1,600&display=swap');
+
+:root {
+  --paper: #faf3e6;
+  --paper-2: #fffdf7;
+  --ink: #4b3b6b;
+  --ink-soft: #6b4f8c;
+  --rust: #c9622f;
+  --mustard: #e8b84b;
+  --sage: #a8d5bA;
+  --rose: #e8a0bf;
+  --line: #d9c9a8;
+  --radius: 14px;
+  --shadow: 0 6px 18px rgba(75, 59, 107, 0.14);
+}
+
+* { box-sizing: border-box; }
+
+html, body {
+  margin: 0;
+  min-height: 100%;
+  background: var(--paper);
+  background-image:
+    radial-gradient(circle at 8% 12%, rgba(232, 160, 191, 0.14), transparent 38%),
+    radial-gradient(circle at 92% 88%, rgba(168, 213, 186, 0.16), transparent 42%);
+  color: var(--ink);
+  font-family: 'Nunito', sans-serif;
+  font-size: 16px;
+  line-height: 1.5;
+}
+
+h1, h2, h3, .display {
+  font-family: 'Caveat', cursive;
+  color: var(--ink-soft);
+  font-weight: 700;
+  margin: 0 0 0.3em;
+  letter-spacing: 0.2px;
+}
+
+h1 { font-size: 2.6rem; }
+h2 { font-size: 1.9rem; }
+h3 { font-size: 1.5rem; }
+
+a { color: var(--rust); }
+
+button, .btn {
+  font-family: 'Nunito', sans-serif;
+  font-weight: 700;
+  border: none;
+  border-radius: 999px;
+  padding: 0.65em 1.4em;
+  cursor: pointer;
+  background: var(--ink-soft);
+  color: #fff;
+  box-shadow: var(--shadow);
+  transition: transform 0.12s ease, box-shadow 0.12s ease;
+}
+button:hover, .btn:hover { transform: translateY(-1px); }
+button:active, .btn:active { transform: translateY(0); }
+button:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
+
+button.secondary { background: #fff; color: var(--ink-soft); border: 2px solid var(--ink-soft); box-shadow: none; }
+button.danger { background: var(--rust); }
+button.ghost { background: transparent; color: var(--ink-soft); box-shadow: none; padding: 0.4em 0.8em; }
+
+input[type="text"], input[type="password"], textarea, select {
+  font-family: 'Nunito', sans-serif;
+  font-size: 1rem;
+  padding: 0.6em 0.8em;
+  border: 2px solid var(--line);
+  border-radius: 10px;
+  background: var(--paper-2);
+  color: var(--ink);
+  width: 100%;
+}
+textarea { resize: vertical; min-height: 5em; }
+input:focus, textarea:focus, select:focus, button:focus-visible {
+  outline: 3px solid var(--rose);
+  outline-offset: 1px;
+}
+label { font-weight: 700; font-size: 0.85rem; display: block; margin-bottom: 0.3em; color: var(--ink-soft); }
+
+.card {
+  background: var(--paper-2);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  padding: 1.4em;
+}
+
+.tape {
+  position: absolute;
+  width: 60px;
+  height: 22px;
+  background: rgba(232, 184, 75, 0.55);
+  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
+}
+
+.error-msg {
+  background: #fce8e8;
+  color: #a33;
+  border-radius: 10px;
+  padding: 0.6em 1em;
+  font-weight: 600;
+  font-size: 0.9rem;
+}
+
+.muted { color: #9a8fb0; font-style: italic; }
+
+.top-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1em 1.5em;
+  flex-wrap: wrap;
+  gap: 0.6em;
+}
+
+.container {
+  max-width: 980px;
+  margin: 0 auto;
+  padding: 1em 1.2em 4em;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  * { transition: none !important; animation: none !important; }
+}