Add flair badge gamification system with custom SVG badges

- Create 12 Office Space themed SVG badges (extraction, basement, printer,
  coffee, tps, bobs, memo, oface, stapler, conclusions, spreadsheet, flair-badge)
- Implement FlairBadge.astro component with localStorage persistence
- Add 15-second timer per page to earn flair
- Create floating counter, modal flair board, toast notifications
- Override Starlight Footer to inject flair system globally
- Add name capture dialog on first flair earned

Features:
- Badges glow golden when earned, grayscale when locked
- Progress persists across browser sessions
- Stan quote: "We need to talk about your document processing..."
This commit is contained in:
Ryan Malloy 2026-01-11 14:24:39 -07:00
parent 32b41f79d9
commit 5ae7040496
28 changed files with 1410 additions and 11 deletions

View file

@ -0,0 +1,16 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none">
<!-- "37 Pieces of Flair" - Championship medal -->
<!-- Ribbon -->
<polygon points="16,4 20,4 24,16 28,4 32,4 26,20 22,20" fill="#dc2626"/>
<polygon points="16,4 20,4 22,12" fill="#b91c1c"/>
<polygon points="32,4 28,4 26,12" fill="#b91c1c"/>
<!-- Medal circle -->
<circle cx="24" cy="30" r="14" fill="#f59e0b"/>
<circle cx="24" cy="30" r="14" stroke="#b45309" stroke-width="2"/>
<circle cx="24" cy="30" r="11" fill="#fbbf24"/>
<circle cx="24" cy="30" r="11" stroke="#f59e0b" stroke-width="1"/>
<!-- "37" on medal -->
<text x="24" y="34" font-size="12" fill="#78350f" font-family="sans-serif" font-weight="bold" text-anchor="middle">37</text>
<!-- Star accent -->
<polygon points="24,18 25,21 28,21 25.5,23 26.5,26 24,24 21.5,26 22.5,23 20,21 23,21" fill="#fef3c7"/>
</svg>

After

Width:  |  Height:  |  Size: 874 B