From 7a3412e02cbd5798c61dab06e80cf949d0b2bbf1 Mon Sep 17 00:00:00 2001 From: Kenneth Reitz Date: Sat, 29 Nov 2025 14:42:44 -0500 Subject: [PATCH] Redesign interactive tree with FamilySearch-inspired UI MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- .../templates/family_tree_interactive.html | 1037 ++++++++++++----- 1 file changed, 755 insertions(+), 282 deletions(-) diff --git a/kjvstudy_org/templates/family_tree_interactive.html b/kjvstudy_org/templates/family_tree_interactive.html index 0f66eba..fb9b2ee 100644 --- a/kjvstudy_org/templates/family_tree_interactive.html +++ b/kjvstudy_org/templates/family_tree_interactive.html @@ -5,377 +5,850 @@ {% block head %} {% endblock %} {% block content %} -

Interactive Family Tree

+
+
+

Interactive Family Tree

+

Explore the biblical genealogy from Adam to Jesus Christ. Click on any person to see their details.

+
-

- Explore the biblical genealogy from Adam to Jesus Christ. Click on any person to see details. - Use the controls below to navigate different views of the family tree. -

+
+
+ + +
-
- +
- +
+ + +
- - - - - -
+
-
- Click nodes to expand/collapse children • Hover for details • Drag to pan -
+
+ + + + +
-
- -
+
-
-

-
- -
+
+ + +
+
-
- ← Back to Family Tree +
+
+
Loading family tree...
+
+ +
+
+ + +
+
+
+
+
+
+
+
+
+ View Full Profile +
+
+
+ +
+ Scroll to zoom • Drag to pan • Click person for details +
+
+ +
+ ← Back to Family Tree +
{% endblock %}