Einstellungen
- -
-
-
-
- Leer lassen, um automatisch die aktuell aufgerufene Adresse zu verwenden.
- -
+
-
-
-
-
diff --git a/backend/public/admin/settings.html b/backend/public/admin/settings.html
new file mode 100644
index 0000000..d5b0bcf
--- /dev/null
+++ b/backend/public/admin/settings.html
@@ -0,0 +1,68 @@
+
+
+
+
+
+Freundesbuch – Einstellungen
+
+
+
+
+
+
+
+
+ })
`;
+ })
+ .join('');
+ }
+
+ root.innerHTML = `
+
Neuen Freund anlegen
Sichern & Wiederherstellen
-
-
-
-
- Ganzes Buch
- -
-
-
-
-
-
- -
-
-
- Einzelnen Freund importieren
-Legt einen neuen Freund aus einer zuvor exportierten ZIP-Datei an.
- - -Deine Freunde
+Die Reihenfolge hier bestimmt die Seitenfolge im Freundesbuch (nach dem Deckblatt). Mit den Pfeilen verschieben.
+
+
+
+
+
+
+
+
+
+
+
diff --git a/backend/public/admin/settings.js b/backend/public/admin/settings.js
new file mode 100644
index 0000000..302b82e
--- /dev/null
+++ b/backend/public/admin/settings.js
@@ -0,0 +1,92 @@
+let settings = { publicBaseUrl: '', bookTitle: '' };
+
+async function checkSession() {
+ const res = await fetch('/api/session');
+ const data = await res.json();
+ if (data.role !== 'admin') {
+ window.location.href = '/';
+ }
+}
+
+async function loadSettings() {
+ const res = await fetch('/api/settings');
+ if (!res.ok) return;
+ const data = await res.json();
+ settings = data.settings || { publicBaseUrl: '', bookTitle: '' };
+ document.getElementById('publicBaseUrl').value = settings.publicBaseUrl || '';
+ document.getElementById('bookTitle').value = settings.bookTitle || '';
+}
+
+document.getElementById('saveSettingsBtn').addEventListener('click', async () => {
+ const publicBaseUrl = document.getElementById('publicBaseUrl').value.trim();
+ const bookTitle = document.getElementById('bookTitle').value.trim();
+ const res = await fetch('/api/settings', {
+ method: 'PUT',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ publicBaseUrl, bookTitle }),
+ });
+ const data = await res.json();
+ if (res.ok) {
+ settings = data.settings;
+ const msg = document.getElementById('settingsSaved');
+ msg.textContent = 'Gespeichert ✓';
+ msg.classList.add('show');
+ setTimeout(() => msg.classList.remove('show'), 1800);
+ }
+});
+
+document.getElementById('logoutBtn').addEventListener('click', async () => {
+ await fetch('/api/logout', { method: 'POST' });
+ window.location.href = '/';
+});
+
+// --- Sichern & Wiederherstellen ---
+function showTransferMsg(text, isError) {
+ const box = document.getElementById('transferMsg');
+ box.innerHTML = isError ? `Einstellungen
+ + + +
+
+
+
+ Leer lassen, um automatisch die aktuell aufgerufene Adresse zu verwenden.
+ +Sichern & Wiederherstellen
+
+
+
+
+ Ganzes Buch
+ +
+
+
+
+
+
+ +
+
+
+ Einzelnen Freund importieren
+Legt einen neuen Freund aus einer zuvor exportierten ZIP-Datei an.
+ + +${text}
` : `${text}
`; +} + +document.getElementById('bookExportBtn').addEventListener('click', () => { + window.location.href = '/api/book/export'; +}); + +document.getElementById('bookImportBtn').addEventListener('click', async () => { + const fileInput = document.getElementById('bookImportFile'); + const file = fileInput.files[0]; + if (!file) { showTransferMsg('Bitte zuerst eine ZIP-Datei auswählen.', true); return; } + const replaceAll = document.getElementById('bookImportReplace').checked; + if (replaceAll && !confirm('Wirklich ALLE bestehenden Freunde vor dem Import löschen?')) return; + + const fd = new FormData(); + fd.append('file', file); + fd.append('replaceAll', replaceAll ? 'true' : 'false'); + showTransferMsg('Importiere...', false); + const res = await fetch('/api/book/import', { method: 'POST', body: fd }); + const data = await res.json(); + if (res.ok) { + showTransferMsg(`${data.imported.length} Freund(e) importiert: ${data.imported.join(', ') || '–'}`, false); + fileInput.value = ''; + } else { + showTransferMsg(data.error || 'Import fehlgeschlagen.', true); + } +}); + +document.getElementById('friendImportBtn').addEventListener('click', async () => { + const fileInput = document.getElementById('friendImportFile'); + const file = fileInput.files[0]; + if (!file) { showTransferMsg('Bitte zuerst eine ZIP-Datei auswählen.', true); return; } + const fd = new FormData(); + fd.append('file', file); + showTransferMsg('Importiere...', false); + const res = await fetch('/api/friends/import', { method: 'POST', body: fd }); + const data = await res.json(); + if (res.ok) { + showTransferMsg(`"${data.friend.name}" wurde importiert.`, false); + fileInput.value = ''; + } else { + showTransferMsg(data.error || 'Import fehlgeschlagen.', true); + } +}); + +checkSession(); +loadSettings(); diff --git a/backend/public/book/book.css b/backend/public/book/book.css index 2337373..ae2adcb 100644 --- a/backend/public/book/book.css +++ b/backend/public/book/book.css @@ -51,3 +51,45 @@ #pageIndicator { font-family: 'Caveat', cursive; font-size: 1.3rem; color: var(--ink-soft); } .empty-book { text-align: center; margin-top: 3em; } + +/* Deckblatt */ +.cover-page { + position: relative; + min-height: 640px; + border-radius: 18px; + background: var(--paper-2); + box-shadow: var(--shadow); + overflow: hidden; + border: 2px dashed var(--mustard); +} +.cover-stickers { position: absolute; inset: 0; } +.cover-sticker { + position: absolute; + object-fit: cover; + aspect-ratio: 1 / 1; + border: 6px solid #fff; + border-radius: 8px; + box-shadow: 0 6px 16px rgba(0,0,0,0.22); +} +.cover-title-wrap { + position: relative; + z-index: 5; + text-align: center; + top: 42%; + transform: translateY(-50%); + padding: 0.6em 1.2em; +} +.cover-title { + display: inline-block; + font-size: 3.6rem; + background: rgba(255,253,247,0.92); + padding: 0.25em 0.7em; + border-radius: 12px; + box-shadow: 0 6px 18px rgba(0,0,0,0.18); + transform: rotate(-2deg); + max-width: 90%; +} +@media (max-width: 640px) { + .cover-page { min-height: 460px; } + .cover-title { font-size: 2.3rem; } +} diff --git a/backend/public/book/book.js b/backend/public/book/book.js index 314c4ca..bc46e12 100644 --- a/backend/public/book/book.js +++ b/backend/public/book/book.js @@ -1,5 +1,6 @@ let friends = []; -let currentIndex = 0; +let bookTitle = 'Unser Freundesbuch'; +let currentIndex = -1; // -1 = Deckblatt, 0..n-1 = Freunde const STECKBRIEF_LABELS = { spitzname: 'Spitzname', @@ -17,6 +18,8 @@ const STECKBRIEF_LABELS = { sonstiges: 'Sonstiges', }; +const COVER_MAX_STICKERS = 24; + function escapeHtml(str) { const div = document.createElement('div'); div.textContent = str || ''; @@ -28,29 +31,86 @@ function randomRotation(seed) { 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 = ` -
-
`;
- return;
- }
- document.getElementById('bookNav').style.display = 'flex';
- renderPage();
+// Einfacher, deterministischer Pseudo-Zufallsgenerator (gleiche Seed -> gleiches Ergebnis),
+// damit das Deckblatt bei jedem Aufruf ähnlich aussieht statt bei jedem Reload zu "springen".
+function seededRandom(seed) {
+ let t = (seed += 0x6d2b79f5);
+ t = Math.imul(t ^ (t >>> 15), t | 1);
+ t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+ return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
}
function uploadUrl(folder, filename) {
return `/uploads/${encodeURIComponent(folder)}/${encodeURIComponent(filename)}`;
}
-function renderPage() {
- const f = friends[currentIndex];
+async function load() {
+ const [bookRes, settingsRes] = await Promise.all([fetch('/api/book'), fetch('/api/settings')]);
+ if (bookRes.status === 401 || settingsRes.status === 401) { window.location.href = '/'; return; }
+ const bookData = await bookRes.json();
+ const settingsData = await settingsRes.json();
+ friends = bookData.friends || [];
+ bookTitle = (settingsData.settings && settingsData.settings.bookTitle) || 'Unser Freundesbuch';
+
+ document.getElementById('bookNav').style.display = 'flex';
+ renderPage();
+}
+
+// --- Deckblatt: Titel + "sticker-gebombte" Foto-Collage ---
+function collectStickerImages() {
+ const imgs = [];
+ friends.forEach((f) => {
+ if (f.profileImage) imgs.push({ folder: f.folderName, filename: f.profileImage });
+ (f.blocks || []).forEach((b) => {
+ if (b.type === 'image' && b.filename) imgs.push({ folder: f.folderName, filename: b.filename });
+ if (b.type === 'audio' && b.coverFilename) imgs.push({ folder: f.folderName, filename: b.coverFilename });
+ });
+ });
+ return imgs;
+}
+
+function renderCoverPage() {
+ const root = document.getElementById('bookRoot');
+ let imgs = collectStickerImages();
+
+ if (imgs.length > COVER_MAX_STICKERS) {
+ const step = imgs.length / COVER_MAX_STICKERS;
+ imgs = Array.from({ length: COVER_MAX_STICKERS }, (_, i) => imgs[Math.floor(i * step)]);
+ }
+
+ let stickersHtml = '';
+ if (imgs.length) {
+ const cols = Math.min(6, Math.max(3, Math.ceil(Math.sqrt(imgs.length * 1.6))));
+ const rows = Math.ceil(imgs.length / cols);
+ stickersHtml = imgs
+ .map((img, i) => {
+ const cellX = i % cols;
+ const cellY = Math.floor(i / cols);
+ const rx = seededRandom(i * 13 + 1);
+ const ry = seededRandom(i * 17 + 2);
+ const rr = seededRandom(i * 7 + 3);
+ const rs = seededRandom(i * 5 + 4);
+ const leftPct = ((cellX + 0.1 + rx * 0.8) / cols) * 100;
+ const topPct = ((cellY + 0.1 + ry * 0.8) / rows) * 100;
+ const rot = (rr * 50 - 25).toFixed(1);
+ const size = Math.round(85 + rs * 65);
+ return `Noch ist dieses Buch leer 📖
-Lege im Admin-Bereich Freunde an und teile den Link mit ihnen.
-
+
+ `;
+}
+
+function renderFriendPage(f) {
const root = document.getElementById('bookRoot');
const profileHtml = f.profileImage
@@ -77,7 +137,7 @@ function renderPage() {
if (b.type === 'audio') {
return `${stickersHtml}
+
+
+
+ ${escapeHtml(bookTitle)}
+
${b.coverFilename ? `})
` : ''}
-
`;
}
@@ -104,14 +164,31 @@ function renderPage() {
🎙️ ${b.caption ? escapeHtml(b.caption) : 'Sprachnachricht'}
+ 🎙️${b.caption ? ' ' + escapeHtml(b.caption) : ''}