Redesign interactive tree with FamilySearch-inspired UI

Browse Source

Completely rewrote the interactive family tree visualization with a
much more polished, professional design inspired by FamilySearch and
MacFamilyTree applications.

Visual improvements:
- Person cards with gender-based color coding (blue for male, pink for female)
- Rounded card corners with subtle shadows and gradients
- Generation badges on each card
- Birth/death dates displayed on cards
- Smooth hover effects with border highlighting
- Clean, modern control bar with grouped buttons
- Slide-out info sidebar instead of inline panel

Functional improvements:
- Multiple starting points (Adam, Noah, Abraham, David, Jesus ancestors)
- Adjustable generation depth (3-10)
- Horizontal and vertical layout options
- Zoom controls (+, -, reset, fit to view)
- Scroll to zoom, drag to pan
- Click any person to see detailed info in sidebar
- Responsive design for mobile

Technical changes:
- Custom SVG card rendering with D3.js
- Dynamic tree building with direction support (descendants/ancestors)
- Fit-to-view algorithm for automatic centering
- Window resize handling
- Gender inference from name database

This provides a much better user experience for exploring the biblical
genealogy, matching the quality expected from professional genealogy
applications.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

...

This commit is contained in:

Kenneth Reitz

2025-11-29 14:42:44 -05:00

parent 2a23a35ac5

commit 7a3412e02c

1 changed files with 755 additions and 282 deletions

Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL

Download Patch File Download Diff File Expand all files Collapse all files

kjvstudy_org/templates/family_tree_interactive.html

+755 -282

File diff suppressed because it is too large Load Diff