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

20
public/flair/oface.svg Normal file
View file

@ -0,0 +1,20 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none">
<!-- "O Face" - Surprised/amazed face -->
<!-- Face circle -->
<circle cx="24" cy="24" r="20" fill="#fef3c7"/>
<circle cx="24" cy="24" r="20" stroke="#f59e0b" stroke-width="2"/>
<!-- Eyebrows raised -->
<path d="M12 14 Q16 10 20 14" stroke="#78350f" stroke-width="2" fill="none" stroke-linecap="round"/>
<path d="M28 14 Q32 10 36 14" stroke="#78350f" stroke-width="2" fill="none" stroke-linecap="round"/>
<!-- Wide eyes -->
<ellipse cx="16" cy="20" rx="4" ry="5" fill="white"/>
<circle cx="16" cy="20" r="2.5" fill="#1e293b"/>
<ellipse cx="32" cy="20" rx="4" ry="5" fill="white"/>
<circle cx="32" cy="20" r="2.5" fill="#1e293b"/>
<!-- "O" mouth -->
<ellipse cx="24" cy="34" rx="6" ry="8" fill="#dc2626"/>
<ellipse cx="24" cy="33" rx="4" ry="5" fill="#991b1b"/>
<!-- Cheek blush -->
<ellipse cx="10" cy="26" rx="3" ry="2" fill="#fca5a5" opacity="0.6"/>
<ellipse cx="38" cy="26" rx="3" ry="2" fill="#fca5a5" opacity="0.6"/>
</svg>

After

Width:  |  Height:  |  Size: 1 KiB