marty/instantadpay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ornate achievement badges (Spark/Surge/Circuit/Nexus) — kie.ai mint-teal trophies + name overlay

Browse Source 
- Named the milestone ladder: Spark (payouts) / Surge (first buyer) / Circuit (L2) / Nexus (L3)
- Overview badges strip now shows the ornate badge art (locked = dimmed); milestone stepper renamed
- Share button composites the badge template with the member's @username on the ribbon (JPEG, same-origin canvas)
- Badge art in public/badges/ (optimized JPG ~300KB each)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
martbost
2026-09-06 14:11:44 -05:00
parent 3c0e94f20f
commit 23136f4ba0
14 changed files with 68 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/site.css
+4 -2
View File
@@ -280,8 +280,10 @@ textarea{resize:vertical;font:inherit}
.feat-strip a:hover{border-color:var(--mint)}
.feat-strip .by{font-size:12px;color:var(--muted);font-weight:500;white-space:nowrap}
/* ── achievement badges ── */
.badges{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px}
.badge-a{display:flex;flex-direction:column;align-items:center;gap:8px;width:120px;text-align:center}
.badges{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px}
.badge-a{display:flex;flex-direction:column;align-items:center;gap:6px;width:150px;text-align:center}
.badge-a .badge-img{width:150px;height:150px;border-radius:14px;object-fit:cover;border:1px solid var(--line-strong)}
.badge-a.locked .badge-img{filter:grayscale(.85) brightness(.5);opacity:.7}
.badge-a .medal{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;position:relative;
background:radial-gradient(circle at 50% 35%,rgba(67,232,195,.28),rgba(9,26,19,.9));
border:2px solid var(--mint);box-shadow:0 0 18px rgba(67,232,195,.3)}