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:
parent
32b41f79d9
commit
5ae7040496
28 changed files with 1410 additions and 11 deletions
15
src/assets/flair/printer.svg
Normal file
15
src/assets/flair/printer.svg
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none">
|
||||
<!-- "PC Load Letter" - Printer with error -->
|
||||
<rect x="6" y="18" width="36" height="18" rx="3" fill="#64748b"/>
|
||||
<rect x="8" y="20" width="32" height="14" rx="2" fill="#475569"/>
|
||||
<!-- Paper tray top -->
|
||||
<rect x="12" y="8" width="24" height="12" rx="1" fill="#e2e8f0"/>
|
||||
<rect x="14" y="10" width="20" height="8" rx="1" fill="#f8fafc"/>
|
||||
<!-- Paper output slot -->
|
||||
<rect x="14" y="34" width="20" height="8" rx="1" fill="#f8fafc"/>
|
||||
<!-- Error light -->
|
||||
<circle cx="36" cy="24" r="3" fill="#dc2626"/>
|
||||
<!-- Error LCD display -->
|
||||
<rect x="12" y="22" width="18" height="6" rx="1" fill="#1e293b"/>
|
||||
<text x="14" y="27" font-size="5" fill="#dc2626" font-family="monospace">PC LOAD</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 783 B |
Loading…
Add table
Add a link
Reference in a new issue