Bilder Aspect + name centered + Preview

2026-09-07 18:53:41 +02:00
parent a426d5d779
commit b639c03ef8
7 changed files with 130 additions and 14 deletions
--- a/backend/public/friend/friend.js
+++ b/backend/public/friend/friend.js
@@ -278,4 +278,80 @@ async function moveBlock(id, dir) {
  if (res.ok) { currentFriend = data.friend; renderBlocks(); }
 }

+// --- Vorschau: rendert die Seite genauso wie später im Freundesbuch-Viewer ---
+function randomRotation(seed) {
+  const angles = [-6, -4, -2, 2, 4, 6, -3, 3, 5, -5];
+  return angles[seed % angles.length];
+}
+
+function renderPreview() {
+  const f = currentFriend;
+  const container = document.getElementById('previewContent');
+
+  const profileHtml = f.profileImage
+    ? `<img class="page-profile-pic" src="${uploadUrl(f.profileImage)}" />`
+    : `<div class="page-profile-pic placeholder">${(f.name || '?')[0].toUpperCase()}</div>`;
+
+  const sbEntries = STECKBRIEF_FIELDS
+    .map(([key, label]) => [label, (f.steckbrief || {})[key]])
+    .filter(([, v]) => v && String(v).trim());
+  const sbHtml = sbEntries.length
+    ? `<div class="sb-grid">${sbEntries.map(([label, v]) => `
+        <div class="sb-row"><span class="sb-key">${escapeHtml(label)}</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(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);">
+            ${b.coverFilename ? `<img class="audio-cover" src="${uploadUrl(b.coverFilename)}" />` : ''}
+            <div>🎙️${b.caption ? ' ' + escapeHtml(b.caption) : ''}</div>
+            <audio controls src="${uploadUrl(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>';
+
+  container.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('previewBtn').addEventListener('click', () => {
+  renderPreview();
+  document.getElementById('previewModal').style.display = 'flex';
+});
+document.getElementById('previewCloseBtn').addEventListener('click', () => {
+  document.getElementById('previewModal').style.display = 'none';
+});
+document.getElementById('previewModal').addEventListener('click', (e) => {
+  if (e.target.id === 'previewModal') document.getElementById('previewModal').style.display = 'none';
+});
+
 init();