Profile build-out (avatar + bio) + shareable bio page with QR

- Profile pane: avatar upload + bio, with a link to your public page
- Wall becomes a bio page: avatar, bio, scannable join QR, line ladder, join CTA
- qrcode npm dep; /api/qr renders SVG QR server-side (CSP-clean img)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
martbost
2026-09-06 08:49:20 -05:00
parent 9e05711f4e
commit 1aab52ca90
15 changed files with 601 additions and 33 deletions
+17 -5
View File
@@ -4,7 +4,7 @@
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Member area | InstantAdPay</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap">
<link rel="stylesheet" href="/assets/site.css?v=20260906a">
<link rel="stylesheet" href="/assets/site.css?v=20260906b">
</head>
<body class="bo-body">
@@ -486,6 +486,18 @@
<button class="btn" id="pfSaveBtn">Save username</button>
<p class="muted small" id="pfCurrent" style="margin-top:10px"></p>
</div>
<div class="card">
<h3>Avatar &amp; bio</h3>
<p class="muted small">Your face and your story, shown on your public profile page
(<span class="mono" id="pfBioLink">set a username to get your link</span>).</p>
<p><img id="pfAvatarPrev" alt="avatar" style="width:84px;height:84px;border-radius:50%;object-fit:cover;border:2px solid var(--line-strong)" hidden></p>
<p><input type="file" id="pfAvatarFile" accept="image/png,image/jpeg,image/webp,image/gif" hidden>
<button class="btn small sec" id="pfAvatarBtn" type="button">Upload avatar</button>
<span class="small muted" id="pfAvatarInfo"></span></p>
<p><textarea id="pfBio" rows="3" maxlength="600" placeholder="A short bio for your profile page…" style="width:100%"></textarea></p>
<p><button class="btn" id="pfDetailsSave">Save profile</button>
<a class="btn small sec" id="pfViewBio" target="_blank" rel="noopener" hidden>View my page</a></p>
</div>
<div class="card">
<h3>Your line banner</h3>
<p class="muted small">Set a destination link (and a banner image for your wall), and every new
@@ -533,9 +545,9 @@
</div>
</div>
<script src="/assets/common.js?v=20260906a"></script>
<script src="/assets/wallet.js?v=20260906a"></script>
<script src="/assets/my.js?v=20260906a"></script>
<script src="/assets/chat.js?v=20260906a"></script>
<script src="/assets/common.js?v=20260906b"></script>
<script src="/assets/wallet.js?v=20260906b"></script>
<script src="/assets/my.js?v=20260906b"></script>
<script src="/assets/chat.js?v=20260906b"></script>
</body>
</html>