forestflow - GitLite

KO | EN

gitlite — search

#privacy #claude-code #typescript #markdown #html #ui #automation #macos #pdf #ai

forestflow

(★ 9)

ForestFlow: Plataforma web interativa de árvore genealógica focada na evolução histórica familiar. O sistema mapeia e rastreia visualmente o fluxo, a fusão e a interrupção na transmissão de linhagens e sobrenomes ao longo das gerações devido a casamentos e registros.

File Explorer

ZIP Download

- styles.css
- ARCHITECTURE.md
- CHANGELOG.md
- CONTRIBUTING.md
- android-icon-144x144.png
- android-icon-192x192.png
- android-icon-36x36.png
- android-icon-48x48.png
- android-icon-72x72.png
- android-icon-96x96.png
- apple-icon-114x114.png
- apple-icon-120x120.png
- apple-icon-144x144.png
- apple-icon-152x152.png
- apple-icon-180x180.png
- apple-icon-57x57.png
- apple-icon-60x60.png
- apple-icon-72x72.png
- apple-icon-76x76.png
- apple-icon-precomposed.png
- apple-icon.png
- browserconfig.xml
- favicon-16x16.png
- favicon-32x32.png
- favicon-96x96.png
- logo.jpg
- manifest.json
- ms-icon-144x144.png
- ms-icon-150x150.png
- ms-icon-310x310.png
- ms-icon-70x70.png
- script.js
- data.json
ABOUT.md
favicon.ico
index.html
LICENSE
README.md

# Use via CDN

jsDelivr

jsDelivr serves any public GitHub repository as a CDN with zero setup. Pick a version and a file to get a ready-to-paste link and snippet.

Version

File

Link

Example

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

## Descrição

ForestFlow é uma aplicação web interativa de árvore genealógica focada no rastreamento e visualização de sobrenomes através das gerações. O sistema resolve o problema de organizar e compreender a linhagem familiar, permitindo que usuários cadastrem membros da família, visualizem conexões genealógicas e acompanhem a transmissão de sobrenomes ao longo do tempo. Com uma interface intuitiva e visualização gráfica, ForestFlow transforma dados genealógicos complexos em insights claros sobre herança e linhagem.

## Stack

### Frontend
- HTML5
- CSS3 (com design system personalizado e tema escuro)
- JavaScript (ES6+)
- SVG para conexões visuais

### Backend
- Arquitetura Local-First (sem servidor)
- localStorage para persistência de dados
- JSON para exportação/importação de dados

### Banco de Dados
- JSON (armazenamento local via localStorage)
- Estrutura de dados relacional em memória

### Bibliotecas e Ferramentas
- Navegador moderno (Chrome, Firefox, Edge, Safari)
- Sistema de zoom e pan nativo
- Design responsivo

## Funcionalidades

### Cadastro e Gestão
- **Cadastro de Membros**: Adicione novos membros com informações completas (nome, data de nascimento completa, data de falecimento, gênero, pais, cônjuge)
- **Campos de Texto Livre**: Todos os campos usam inputs de texto para flexibilidade máxima (DD/MM/AAAA para datas)
- **Estado Inicial Vazio**: Sistema inicia limpo, sem dados de exemplo, permitindo criar sua própria árvore do zero

### Relacionamentos
- **Registro de Casamento**: Selecione marido e mulher separadamente, registre data do casamento e alterações de sobrenome para ambos
- **Registro de Divórcio**: Registre divórcios com data e opção de retorno ao sobrenome de solteiro
- **Visualização de Casamentos**: Linhas horizontais azuis conectando cônjuges casados
- **Visualização de Divórcios**: Linhas tracejadas vermelhas indicando uniões desfeitas (mantendo histórico de filhos)

### Persistência de Dados
- **Local-First Architecture**: Dados salvos automaticamente no localStorage do navegador
- **Exportação JSON**: Baixe sua árvore genealógica completa como arquivo JSON
- **Importação JSON**: Carregue árvores genealógicas de arquivos JSON com validação
- **Salvamento Manual**: Botão para salvar explicitamente o estado atual

### Visualização e Navegação
- **Visualização em Árvore**: Interface gráfica interativa mostrando conexões genealógicas entre gerações
- **Rastreamento de Sobrenomes**: Sistema detalhado para acompanhar sobrenomes herdados, atuais e transmitidos
- **Filtragem por Sobrenome**: Filtre a visualização da árvore por sobrenomes específicos
- **Alertas de Linhagem**: Identificação visual de membros cuja linhagem foi interrompida
- **Zoom e Pan**: Controles intuitivos para navegar por árvores genealógicas extensas
- **Painel de Detalhes**: Visualização completa das informações e relacionamentos de cada membro

### Interface
- **Interface Dark Mode**: Design profissional com tema escuro para reduzir fadiga visual
- **Painel de Relacionamentos**: Visualização de todos os casamentos e divórcios de cada membro
- **Tags de Data**: Datas exibidas como tags visuais destacadas

## Como Rodar

### Pré-requisitos
- Navegador web moderno
- Conexão com internet (apenas para carregar recursos externos, se necessário)

### Passo a Passo

1. **Clone o repositório**
   ```bash
   git clone [URL do repositório]
   cd forestflow
   ```

2. **Abra o projeto**
   - Simplesmente abra o arquivo `index.html` no seu navegador
   - Ou use um servidor local para desenvolvimento:
     ```bash
     # Usando Python
     python -m http.server 8000
     
     # Usando Node.js (com http-server)
     npx http-server
     ```

3. **Comece a usar**
   - O sistema inicia com estado vazio
   - Clique em "Adicionar Membro" para cadastrar novos familiares
   - Use os controles de zoom para navegar pela árvore
   - Clique em membros para ver detalhes completos e gerenciar relacionamentos
   - Use os botões Exportar/Importar/Salvar para gerenciar seus dados

### Desenvolvimento

Para desenvolvimento local, recomenda-se usar um servidor local:

```bash
# Opção 1: Python
python -m http.server 8000

# Opção 2: Node.js
npx http-server -p 8000

# Opção 3: VS Code Live Server
# Instale a extensão "Live Server" e clique com botão direito em index.html
```

Acesse `http://localhost:8000` no seu navegador.

## Estrutura de Dados

### Membro
```json
{
  "id": 1234567890,
  "name": "Nome Completo",
  "birthDate": "01/01/1950",
  "deathDate": "01/01/2020",
  "gender": "male",
  "fatherId": null,
  "motherId": null,
  "spouseId": null,
  "inheritedSurnames": ["Silva"],
  "currentSurnames": ["Silva"],
  "passedSurnames": ["Silva"],
  "childrenIds": [],
  "relationships": [
    {
      "type": "marriage",
      "partnerId": 1234567891,
      "marriageDate": "01/01/1975",
      "surnameChange": true,
      "newSurname": "Silva",
      "divorceDate": null
    }
  ]
}
```

---

**PROPRIETÁRIO**: Mauricio Spark  
**LINHAGEM**: SPARK  
**COPYRIGHT**: © 2026 / Mauricio Spark. Todos os direitos reservados.