diff --git a/.beans/nuzlocke-tracker-9c8d--rebrand-to-another-nuzlocke-tracker-ant.md b/.beans/nuzlocke-tracker-9c8d--rebrand-to-another-nuzlocke-tracker-ant.md index 74be907..fb0a289 100644 --- a/.beans/nuzlocke-tracker-9c8d--rebrand-to-another-nuzlocke-tracker-ant.md +++ b/.beans/nuzlocke-tracker-9c8d--rebrand-to-another-nuzlocke-tracker-ant.md @@ -1,11 +1,11 @@ --- # nuzlocke-tracker-9c8d title: Rebrand to Another Nuzlocke Tracker (ANT) -status: in-progress +status: completed type: task priority: normal created_at: 2026-02-10T14:46:09Z -updated_at: 2026-02-17T19:08:18Z +updated_at: 2026-02-17T19:17:22Z --- Adopt the new branding: **Another Nuzlocke Tracker**, abbreviated **ANT**. diff --git a/.beans/nuzlocke-tracker-dpw7--modernize-website-design-and-look-and-feel.md b/.beans/nuzlocke-tracker-dpw7--modernize-website-design-and-look-and-feel.md new file mode 100644 index 0000000..2511457 --- /dev/null +++ b/.beans/nuzlocke-tracker-dpw7--modernize-website-design-and-look-and-feel.md @@ -0,0 +1,104 @@ +--- +# nuzlocke-tracker-dpw7 +title: Modernize website design and look-and-feel +status: in-progress +type: feature +priority: normal +created_at: 2026-02-17T19:16:39Z +updated_at: 2026-02-17T19:45:49Z +--- + +Overhaul the UI to a dark-first, techy aesthetic with a cohesive brand identity derived from the ANT steel ant logo. + +## Design direction + +**Dark & techy** — dark-first surfaces, subtle glow/accent effects, code-editor-influenced aesthetic. Think GitHub dark, Discord, or Linear dark mode. Light mode becomes the secondary theme. + +## 1. Brand palette + Tailwind theme + +Define custom Tailwind v4 theme tokens in `index.css` using `@theme`: + +- **Surfaces:** dark navy/charcoal base (`#0f1117`, `#161b22`, `#1c2128`) with layered elevation (darker = further back, lighter = elevated) +- **Accent:** steel blue from the logo (`#395E73`, `#7EB0CE`) as the primary interactive color +- **Text:** off-white primary (`#e6edf3`), muted gray secondary (`#7d8590`) +- **Status colors:** keep green/red/blue semantics but shift to darker, more saturated variants that work on dark surfaces +- **Borders:** subtle (`rgba(255,255,255,0.08)`) instead of gray-200/700 + +Replace ad-hoc Tailwind color classes throughout all components with theme tokens. + +## 2. Typography + +Self-host **Geist** (or Inter/JetBrains Mono pairing): + +- Geist Sans for UI text (headings, labels, body) +- Geist Mono for data-heavy elements (stats numbers, encounter rates, levels) +- Set up via `@font-face` in `index.css`, configure in Tailwind `@theme` +- Establish clear size/weight hierarchy: page titles (2xl bold), section headers (lg semibold), body (sm regular), labels (xs medium) + +## 3. Navigation redesign + +- Add the ant SVG logo mark next to "ANT" in the nav +- Active route indicator (accent-colored underline or background highlight) +- Subtle bottom border glow or gradient accent line +- Slightly translucent/backdrop-blur nav background for depth +- Better mobile menu transitions (slide or fade instead of instant toggle) + +## 4. Home page hero + +- Full-width dark gradient hero section with the ant logo as a subtle watermark/background element +- Tagline with stronger typography hierarchy +- Stats summary (total runs, completion rate) as glowing stat pills if the user has data +- CTA button with accent glow/gradient + +## 5. Cards & surfaces + +- Dark elevated cards (`bg-[#161b22]`) with subtle border (`border-white/[0.06]`) +- Hover state: slight border brightness increase + subtle shadow glow in accent color +- Active/selected states with accent border +- Pokemon cards: dark backgrounds make sprites pop better, accent ring on hover +- Stat cards: accent-colored left border or top gradient +- Modals: dark overlay with backdrop-blur, card-style modal surface + +## 6. Status indicators & badges + +- Status badges: more vibrant on dark backgrounds (alive=emerald glow, dead=red glow, caught=blue) +- Type badges: use the established Pokemon type colors but tuned for dark surfaces +- Encounter method badges: same treatment +- Pulse animation on active run indicators + +## 7. Micro-interactions + +- Smooth transitions on all interactive elements (`transition-all duration-150`) +- Hover lift on cards (`hover:-translate-y-0.5`) +- Button press feedback (`active:scale-[0.98]`) +- Loading spinners in accent color +- Skeleton loading states for data-heavy pages + +## 8. Dark/light mode + +- Dark is the default and primary design target +- Light mode: invert surfaces to white/gray-50, keep accent colors, adjust contrast +- Toggle in nav (sun/moon icon) +- Persist preference in localStorage, respect `prefers-color-scheme` + +## Checklist + +- [x] Define Tailwind v4 `@theme` tokens (colors, fonts, spacing) in `index.css` +- [x] Self-host Geist font family, configure in theme +- [x] Redesign nav bar (logo mark, active states, backdrop blur, dark surface) +- [x] Redesign home page hero section +- [x] Update card/surface styles globally (Layout, PokemonCard, StatCard, GameCard) +- [x] Update all page-level backgrounds and containers +- [ ] Update modal styles (EncounterModal, StatusChangeModal, etc.) +- [ ] Update badge/indicator styles (TypeBadge, RuleBadges, EncounterMethodBadge) +- [ ] Add dark/light mode toggle to nav +- [ ] Polish hover states and transitions across all interactive elements +- [ ] Verify mobile layout and touch targets +- [ ] Verify accessibility (contrast ratios, focus indicators) + +## Constraints + +- Tailwind-only (no additional CSS frameworks or component libraries) +- Self-hosted fonts only (no Google Fonts CDN) +- Maintain accessibility (WCAG AA contrast ratios, visible focus indicators) +- No performance regression (fonts loaded with `font-display: swap`, no layout shift) \ No newline at end of file diff --git a/frontend/public/fonts/GeistMono-Variable.woff2 b/frontend/public/fonts/GeistMono-Variable.woff2 new file mode 100644 index 0000000..dbdb8c2 Binary files /dev/null and b/frontend/public/fonts/GeistMono-Variable.woff2 differ diff --git a/frontend/public/fonts/GeistSans-Variable.woff2 b/frontend/public/fonts/GeistSans-Variable.woff2 new file mode 100644 index 0000000..b2f0121 Binary files /dev/null and b/frontend/public/fonts/GeistSans-Variable.woff2 differ diff --git a/frontend/public/fonts/LICENSE-Geist.txt b/frontend/public/fonts/LICENSE-Geist.txt new file mode 100644 index 0000000..8d003fe --- /dev/null +++ b/frontend/public/fonts/LICENSE-Geist.txt @@ -0,0 +1,92 @@ +Copyright (c) 2023 Vercel, in collaboration with basement.studio + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +http://scripts.sil.org/OFL + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION AND CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/frontend/src/components/BossDefeatModal.tsx b/frontend/src/components/BossDefeatModal.tsx index 6def625..ab07a00 100644 --- a/frontend/src/components/BossDefeatModal.tsx +++ b/frontend/src/components/BossDefeatModal.tsx @@ -66,15 +66,15 @@ export function BossDefeatModal({ return (
-
-
+
+

Battle: {boss.name}

-

{boss.location}

+

{boss.location}

{/* Boss team preview */} {boss.pokemon.length > 0 && ( -
+
{showPills && (
{variantLabels.map((label) => ( @@ -85,7 +85,7 @@ export function BossDefeatModal({ className={`px-2 py-0.5 text-xs font-medium rounded-full transition-colors ${ selectedVariant === label ? 'bg-blue-600 text-white' - : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600' + : 'bg-surface-2 text-text-secondary hover:bg-surface-3' }`} > {label} @@ -101,14 +101,10 @@ export function BossDefeatModal({ {bp.pokemon.spriteUrl ? ( {bp.pokemon.name} ) : ( -
+
)} - - {bp.pokemon.name} - - - Lv.{bp.level} - + {bp.pokemon.name} + Lv.{bp.level}
))} @@ -127,7 +123,7 @@ export function BossDefeatModal({ className={`flex-1 px-3 py-2 text-sm font-medium rounded-md border transition-colors ${ result === 'won' ? 'bg-green-600 text-white border-green-600' - : 'border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700' + : 'border-border-default hover:bg-surface-2' }`} > Won @@ -139,7 +135,7 @@ export function BossDefeatModal({ className={`flex-1 px-3 py-2 text-sm font-medium rounded-md border transition-colors ${ result === 'lost' ? 'bg-red-600 text-white border-red-600' - : 'border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700' + : 'border-border-default hover:bg-surface-2' }`} > Lost @@ -156,24 +152,24 @@ export function BossDefeatModal({ min={1} value={attempts} onChange={(e) => setAttempts(e.target.value)} - className="w-full px-3 py-2 border rounded-md dark:bg-gray-700 dark:border-gray-600" + className="w-full px-3 py-2 border rounded-md bg-surface-2 border-border-default" />
)}
-
+
diff --git a/frontend/src/components/EggEncounterModal.tsx b/frontend/src/components/EggEncounterModal.tsx index 004824b..628ab26 100644 --- a/frontend/src/components/EggEncounterModal.tsx +++ b/frontend/src/components/EggEncounterModal.tsx @@ -76,17 +76,14 @@ export function EggEncounterModal({ return (
-
-
+
+
-

+

🥚 Log Egg Hatch

-
-

+

Egg hatches bypass the one-per-route rule

@@ -105,13 +102,13 @@ export function EggEncounterModal({
{/* Route selector */}
- -