Pixel Fitness Form
A retro 8-bit gaming themed fitness signup form that gamifies the registration experience.
Features
- Pixel aesthetic — Press Start 2P font, VT323 monospace labels, rounded-none corners, hard shadow offsets
- Form fields — Name, Email, Phone with VT323 styled labels and inputs
- Fitness goal selector — 5 toggle-style pixel buttons for quest selection
- Experience levels — 4-column grid with gaming-themed labels (Noob, Warrior, Elite, Legend)
- Neon green accent — #39ff14 on dark backgrounds for authentic retro gaming feel
- Stats bar — HP display and player count in footer
- Pixel decorations — Stepped pixel blocks as visual accents
- Dark mode — Black (#0a0a0a) with neon green text and borders; light mode uses gray-100 with black accents
Dependencies
@/components/vue-ui/badge — Badge@/components/vue-ui/button — Button@/components/vue-ui/card — Card, CardHeader, CardTitle, CardContent, CardFooter@/components/vue-ui/input — Input@/components/vue-ui/label — Label@/components/vue-ui/separator — Separatorlucide-vue-next — Gamepad2, Zap, Trophy, Heart
Customization
- Goals: Edit
fitnessGoals array for your program offerings
- Levels: Modify
experienceLevels for different skill tiers
- Colors: Swap #39ff14 for a different neon accent (magenta, cyan, etc.)
- Font: Replace Press Start 2P with another pixel font if desired
