🌳 Build your family tree offline — no server, no database, no tracking.
🌳 Создавайте семейное древо офлайн — без сервера, без базы данных, без слежки.

---

📑 Table of Contents / Оглавление

• ✨ Features / Возможности
• 🖼️ Demo / Демо
• 🚀 Quick Start / Быстрый старт
• 🛠️ Tech Stack / Стек технологий
• 📁 Project Structure / Структура проекта
• ⚙️ Configuration / Конфигурация
• 🤝 Contributing / Участие в проекте
• 📜 License / Лицензия

---

✨ Features / Возможности

#	English	Русский
1	Visual tree editor — interactive SVG family tree with pan & zoom (mouse + touch)	Визуальный редактор древа — интерактивное SVG-семейное древо с панорамированием и масштабированием (мышь + тач)
2	Person management — add, edit, delete persons with detailed profiles	Управление персонами — добавление, редактирование, удаление людей с детальными профилями
3	Relationships — parent, child, spouse, sibling connections	Родственные связи — родители, дети, супруги, братья и сёстры
4	Local storage — data auto-saves to browser localStorage	Локальное хранение — данные автоматически сохраняются в localStorage браузера
5	Backup system — import/export JSON files for safe offline backup	Система бэкапов — импорт/экспорт JSON-файлов для надёжного офлайн-архивирования
6	Save as image — export your tree as PNG	Сохранить как изображение — экспорт древа в PNG
7	Dark / Light theme — toggle in the navbar, remembers your preference	Тёмная / светлая тема — переключение в панели, запоминает предпочтения
8	Bilingual UI — Russian and English interface, switch anytime	Двуязычный интерфейс — русский и английский, переключение в любой момент
9	Patronymic support — middle name field for Russian naming conventions	Поддержка отчества — поле отчества для русских имён
10	Responsive design — works on phones, tablets, and desktops	Адаптивный дизайн — работает на телефонах, планшетах и десктопах
11	Zero dependencies — pure HTML, CSS, JavaScript. No build step	Нулевые зависимости — чистый HTML, CSS, JavaScript. Без сборки

🎯 Ideal for / Идеально для

• Genealogy enthusiasts / Любителей генеалогии
• Family historians / Семейных историков
• Privacy-conscious users / Пользователей, заботящихся о приватности
• Offline-first workflows / Оффлайн-ориентированных сценариев
• Quick GitHub Pages demos / Быстрых демонстраций на GitHub Pages

---

🖼️ Demo / Демо

Click the card above to launch the live demo / Нажмите на карточку выше, чтобы открыть живое демо

---

🚀 Quick Start / Быстрый старт

Option 1: GitHub Pages / Вариант 1: GitHub Pages

1. Fork this repository: BOSSincrypto/family-tree-local-editor
2. Go to Settings → Pages → Source and select Deploy from a branch → main
3. Your site will be live at:

   https://<your-username>.github.io/family-tree-local-editor/
   

RU: Форкните репозиторий, включите GitHub Pages в настройках и получите свой личный редактор семейного древа.

Option 2: Local / Вариант 2: Локально

# Clone the repo
gh repo clone BOSSincrypto/family-tree-local-editor

# Or use git
git clone https://github.com/BOSSincrypto/family-tree-local-editor.git

# Navigate and start a static server
cd family-tree-local-editor
python3 -m http.server 8080
# Open http://localhost:8080

Any static file server works: VS Code Live Server, npx serve, nginx, etc.
RU: Подойдёт любой статический сервер: VS Code Live Server, npx serve, nginx и т.д.

---

🛠️ Tech Stack / Стек технологий

Category / Категория	Technologies / Технологии
Markup / Разметка
Styling / Стили
Logic / Логика
Graphics / Графика	SVG, Canvas (PNG export)
Storage / Хранение	Browser localStorage
Hosting / Хостинг
Fonts / Шрифты	Inter (Google Fonts)

---

📁 Project Structure / Структура проекта

family-tree-local-editor/
├── index.html              # Single-page application entry / Точка входа SPA
├── css/
│   └── style.css           # Styles + CSS variables for themes / Стили и CSS-переменные
├── js/
│   ├── app.js              # Main controller / Главный контроллер
│   ├── data-manager.js     # Data CRUD & localStorage / CRUD и localStorage
│   ├── tree-renderer.js    # Tree layout & SVG rendering / Раскладка и SVG-рендеринг
│   ├── person-editor.js    # Sidebar person view/edit / Просмотр/редактирование персоны
│   ├── i18n.js             # Translations RU/EN / Переводы RU/EN
│   └── theme.js            # Dark/light theme manager / Менеджер тёмной/светлой темы
├── img/                    # Static assets (empty by default) / Статические ресурсы
├── LICENSE                 # MIT License / Лицензия MIT
├── robots.txt              # SEO crawlers directive / Инструкции для краулеров
├── sitemap.xml             # Sitemap for search engines / Карта сайта
├── AGENTS.md               # Project rules for AI agents / Правила для AI-агентов
└── README.md               # This file / Этот файл

---

⚙️ Configuration / Конфигурация

No build step or config file is required. The app reads/writes the following localStorage keys:

RU: Сборка и конфигурация не требуются. Приложение использует следующие ключи localStorage:

Key / Ключ	Purpose / Назначение
familyTreeData	Tree data: persons, relationships, root id / Данные древа: персоны, связи, корневой id
familyTreeLang	UI language (ru or en) / Язык интерфейса (ru или en)
familyTreeTheme	Theme preference (light or dark) / Предпочтение темы (light или dark)

💾 Backup JSON format / Формат бэкапа JSON

{
  "version": "1.0",
  "meta": {
    "createdAt": "2025-01-01T00:00:00.000Z",
    "updatedAt": "2025-01-01T12:00:00.000Z",
    "treeName": "Family Tree"
  },
  "persons": {
    "p_abc123": {
      "id": "p_abc123",
      "firstName": "Ivan",
      "lastName": "Petrov",
      "middleName": "Sergeevich",
      "gender": "male",
      "birthDate": "1990-05-15",
      "birthPlace": "Moscow",
      "deathDate": null,
      "deathPlace": "",
      "biography": "",
      "photo": null
    }
  },
  "relationships": [
    { "person1": "p_abc123", "person2": "p_def456", "type": "parent-child" }
  ],
  "rootPersonId": "p_abc123"
}

---

🤝 Contributing / Участие в проекте

Contributions are welcome! Please follow these steps / Приветствуется участие! Следуйте этим шагам:

1. Fork the repository / Форкните репозиторий
2. Create a branch / Создайте ветку: git checkout -b feature/amazing-feature
3. Commit your changes / Зафиксируйте изменения: git commit -m 'feat: add amazing feature'
4. Push to the branch / Запушьте ветку: git push origin feature/amazing-feature
5. Open a Pull Request / Откройте Pull Request

Please read AGENTS.md for project conventions before coding.
RU: Перед началом работы ознакомьтесь с AGENTS.md.

---

📜 License / Лицензия

This project is licensed under the MIT License.
Этот проект распространяется под лицензией MIT.

---

_{Built with ❤️ by @BOSSincrypto
Сделано с ❤️ @BOSSincrypto}

🌐 Live Demo • 🐛 Issues • 💬 Discussions