# Website Redesign — Design Spec ## Context The word search game has a functional but bare-bones frontend — two pages, a basic teal dark theme, no footer, no imagery. This redesign makes it visually polished and adds two new content pages, while keeping the existing Tornado template architecture. ## Decisions - **Palette:** Dark Indigo + Warm Pop — `#1a1a2e` base, `#16213e` navbar/cards, `#0f3460` borders/active states, `#e94560` coral accent, `#f5c518` gold highlights - **Approach:** Enhance in place — modify existing templates and CSS, add new templates and handlers - **Nav:** 4 links — Home, Play, How to Play, About — rendered as pill-style buttons with active state highlighting - **Footer:** Minimal — copyright line only - **Icons:** Bootstrap Icons (CDN) for UI elements (nav, buttons) - **Emoji:** In content headings and hero sections for personality ## Pages ### Home (`/`) - Hero section with puzzle piece emoji, heading, description, coral "Start Game" CTA button with gamepad emoji - Semantic: `
` for hero, `
` wrapper from base ### Play (`/game`) - Existing game board placeholder, restyled with new palette - No structural changes ### How to Play (`/howtoplay`) — NEW - Step-by-step instructions for word search: 1. Look at the word list on the side of the grid 2. Scan the grid for the first letter of a word 3. Words can run horizontally, vertically, or diagonally (forward or backward) 4. Click/tap the first letter, then the last letter to select a word 5. Found words are crossed off the list 6. Find all words to win - Use numbered steps with emoji accents (e.g. magnifying glass, eyes, checkmark) - Tips section at the bottom ### About (`/about`) — NEW - Short app description: what it is, what it's built with (Python, Tornado, Bootstrap) - Author: Claude (AI assistant by Anthropic) — listed as co-author with the project creator - Placeholder for git repo link (to be added later) - Use emoji accents (robot face, tools, etc.) ## Files to Modify ### `static/css/theme.css` - Replace teal CSS custom properties with indigo palette - Add navbar pill-button styles (`.nav-link` as rounded pills, active state with `#0f3460` fill) - Add footer styles (border-top, muted text, centered) - Add hero section styles - Style the new content pages (step lists, about section) ### `templates/base.html` - Add Bootstrap Icons CDN link in `` - Restructure navbar: brand gets magnifying glass icon, nav links get pill-button classes - Active-link logic: each child template sets `{% block active_page %}home{% end %}`, base template uses conditionals to add an `.active` class to the matching nav link - Wrap `
` content area properly - Add `