2026-09-07 12:21:53 +02:00
<!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" / >
2026-09-07 18:53:41 +02:00
< link rel = "stylesheet" href = "/book/book.css" / >
2026-09-07 12:21:53 +02:00
< / 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 >
2026-09-07 18:53:41 +02:00
< div style = "display:flex; gap:0.6em; flex-wrap:wrap;" >
< button type = "button" class = "secondary" id = "previewBtn" > 👀 Vorschau< / button >
< div id = "adminBackWrap" > < a class = "btn secondary" href = "/admin" > ← Zur Übersicht< / a > < / div >
< / div >
2026-09-07 12:21:53 +02:00
< / 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 & 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 >
2026-09-07 12:46:58 +02:00
< div id = "blockCoverWrap" style = "display:none; margin-top:0.8em;" >
< label > Cover-Bild (optional)< / label >
< input type = "file" id = "blockCover" accept = "image/*" / >
< p class = "muted" style = "margin:0.3em 0 0; font-size:0.82rem;" > Wird kein Cover ausgewählt, versuchen wir automatisch ein in der MP3 eingebettetes Cover zu verwenden.< / p >
< / div >
2026-09-07 12:21:53 +02:00
< 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 >
2026-09-07 18:53:41 +02:00
<!-- Vorschau - Modal: zeigt die Seite so, wie sie später im Freundesbuch aussieht -->
< div id = "previewModal" class = "preview-modal-backdrop" style = "display:none;" >
< div class = "preview-modal" >
< div class = "preview-modal-head" >
< h2 style = "margin:0;" > 👀 So sieht deine Seite im Freundesbuch aus< / h2 >
< button type = "button" class = "secondary" id = "previewCloseBtn" > Schließen< / button >
< / div >
< div class = "preview-modal-body" >
< div id = "previewContent" class = "book-root" style = "padding:1.5em 0.5em;" > < / div >
< / div >
< / div >
< / div >
2026-09-07 12:21:53 +02:00
< script src = "/friend/friend.js" > < / script >
< / body >
< / html >
