83 lines
3.3 KiB
HTML
83 lines
3.3 KiB
HTML
<!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 & 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>
|