🌳 Генеалогическое древо - PWA приложение

Прогрессивное веб-приложение (PWA) для создания и редактирования генеалогического древа. Работает полностью на стороне клиента без необходимости в серверной базе данных.

Сайт: https://jebance.github.io/family-tree/

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

• Визуальный редактор: Перетаскивайте карточки членов семьи (drag & drop), масштабируйте и перемещайтесь по холсту.
• Детальные профили:
  • ФИО (Фамилия, Имя, Отчество)
  • Девичья фамилия
  • Даты рождения и смерти
  • Пол
  • Биография / Заметки
• Фотогалерея:
  • Добавление неограниченного количества фото к одной персоне.
  • Подписи к фотографиям.
  • Основное фото (первое в списке) отображается в карточке на холсте.
  • Архивная галерея в режиме просмотра.
• Связи:
  • Установка родственных связей (Родители, Дети, Супруги).
  • Визуальное отображение связей линиями на холсте.
• Импорт / Экспорт:
  • Полное резервное копирование данных в JSON.
  • Восстановление из файла.
• PWA (Progressive Web App):
  • Работает офлайн.
  • Устанавливается на рабочий стол (компьютер или телефон).
  • Данные хранятся локально в браузере (IndexedDB).

⚙️ Технологии

Проект написан на "Vanilla JS" без использования тяжелых фреймворков и сборщиков.

• HTML5 — структура приложения.
• CSS3 — стилизация, анимации, адаптивность.
• JavaScript (ES6+) — логика приложения.
• IndexedDB — локальная база данных для хранения информации и фото.
• Service Worker — для работы офлайн.
• SVG — для отрисовки линий связей.

💾 Хранение данных

Данные хранятся в IndexedDB браузера. Это значит:

• Бесплатно и без сервера
• Данные остаются приватными на устройстве
• Для переноса используйте экспорт/импорт

📱 Установка PWA

iOS Safari:

1. Нажмите "Поделиться"
2. "На экран Домой"

Android Chrome:

1. Меню → "Установить приложение"

Desktop Chrome:

1. Иконка установки в адресной строке

🧩 Использование

Начало работы

1. Нажмите кнопку "Добавить" на панели инструментов.
2. Заполните данные о члене семьи.
3. Добавьте фотографии (первое фото станет основным).
4. Нажмите "Сохранить".

Управление карточками

• Перемещение: Зажмите левую кнопку мыши на карточке и перетащите.
• Масштаб: Используйте колесо мыши или кнопки + / - на панели.
• Навигация: Перетаскивайте пустое место на холсте, чтобы сдвинуть видимую область.

Связи

1. Нажмите кнопку "Связи" (иконка людей) на карточке или в контекстном меню (правый клик).
2. Перейдите на нужную вкладку (Родители, Дети, Супруг(а)).
3. Выберите персон из списка и сохраните.

Просмотр профиля

• Нажмите кнопку "Просмотр" (иконка глаза) на карточке.
• Откроется окно профиля с биографией и фото.
• Если фото несколько, появится кнопка "Архив фотографий".

Резервное копирование

• Экспорт: Нажмите кнопку "Экспорт" в шапке. Скачается файл .json со всеми данными.
• Импорт: Нажмите "Импорт" и выберите ранее сохраненный файл. Текущие данные будут заменены.

📃 Лицензия

MIT License. Свободно для использования и модификации.

---