# Árvore do Apadrinhamento
Entrega local em HTML, CSS e JavaScript, baseada nos Illustrator, JPG, Word, SVG e fontes fornecidos. As páginas são HTML independentes, com conteúdo editável e folhas de estilo externas. Não é necessária compilação nem instalação de pacotes.
## Entrega para a equipa de TI
Este pacote destina-se à implementação dos layouts no sistema e na base de dados existentes. A equipa de TI pode reutilizar os HTML ou convertê-los em templates/componentes da sua aplicação. A documentação não impõe uma tecnologia de backend.
Começar por `docs/GUIA-PARA-TI.md`. A explicação visual está em `docs/apresentacao/Arvore-do-Apadrinhamento-Guia-TI.pdf`, acompanhada do PPTX editável. `apresentacao.html` é o índice navegável de revisão, distinto da apresentação de diapositivos.
O guia técnico descreve as dependências e os pontos de ligação do código. `docs/CONTRATOS-DE-DADOS.md` identifica os dados esperados e `docs/CENARIOS-DE-ACEITACAO.md` reúne 30 cenários para homologação. Os contratos são propostas adaptáveis ao sistema existente.
## Abrir
Para rever a entrega, abra `apresentacao.html` no navegador. Para percorrer o fluxo público, comece por `index.html`.
Recomenda-se servir por HTTP para manter a sessão de demonstração consistente entre páginas:
```sh
python3 scripts/serve.py
```
Abra `http://127.0.0.1:8877/apresentacao.html`. Executar o comando acima a partir da pasta `site-arvore`. O script resolve os recursos pela sua própria localização. Para terminar, use Ctrl+C no terminal.
## Páginas
| Ficheiro | Conteúdo |
| ------------------------ | -------------------------------------------------- |
| `index.html` | Landing page de scroll vertical |
| `login.html` | Login, consentimento e estados de integração |
| `empresa-jm.html` | José de Mello |
| `empresa-familia.html` | Família José de Mello |
| `empresa-bondalti.html` | Três locais Bondalti |
| `empresa-winestone.html` | Quatro locais WineStone |
| `empresa-cuf.html` | Quatro grupos CUF permanentemente abertos |
| `escolhas.html` | Filtros, cartões, confirmação e afilhados |
| `apresentacao.html` | Índice de revisão e acesso aos estados dos modelos |
## Organização
- `assets/css/base.css`: fontes, cores, estrutura, cabeçalhos, contactos e rodapés.
- `assets/css/pages.css`: landing, login, empresas e índice de revisão.
- `assets/css/components.css`: filtros, cartões, estados e modais.
- `assets/js/common.js`: infraestrutura de modais e sessão de demonstração.
- `assets/js/data.js`: dados de exemplo, separados da apresentação.
- `assets/js/login.js`, `company.js`, `choices.js`: comportamentos de cada página-base.
- `assets/js/review.js`: reposição dos dados de demonstração.
- `assets/images`: três fotografias convertidas para WebP.
- `assets/icons`: logos e ícones SVG fornecidos; logo de cabeçalho derivado do SVG original.
- `assets/fonts`: Montserrat local, fornecida no material.
- `docs`: guias para TI, contratos, aceitação, apresentação e validação.
- `docs/referencias`: JPG dos modelos e Word fornecidos, para comparação durante a implementação.
- `scripts`: servidor local e verificação dos recursos.
## Comportamentos
Hover com opacidade de 80%, equivalente a 20% de transparência. Conteúdo central limitado a 1120 px (1180 px em ecrãs a partir de 1800 px). Layout responsivo, fontes locais, animação de abertura dos modais, respeito pela preferência de movimento reduzido, foco visível, modais com Escape e navegação por teclado.
Na CUF, os cabeçalhos são informativos: não são accordions. Os locais indisponíveis são texto cinzento sem ação. Nas outras empresas, os locais são botões diretos sem subescolhas.
Os filtros são cumulativos: género, intervalo de idades e instituições. Voltar a clicar no género selecionado limpa esse filtro. O dropdown permite várias instituições. A paginação mostra quatro cartões por página e desativa as setas quando não existem mais resultados.
O apadrinhamento atualiza as listas e contadores, bloqueia a mudança de local e permite alterar o nome do padrinho ou cancelar um presente ainda não entregue. O local permanece bloqueado após o primeiro apadrinhamento, mesmo após cancelamento. A sessão é conservada ao recarregar a página e termina ao encerrar a sessão do navegador. Pode usar “Repor dados de demonstração” no índice para recomeçar.
## Limite da entrega
Esta entrega implementa o front-end navegável. A autenticação não verifica credenciais. OKTA, registo, recuperação, emails, dados reais, permissões por empresa e reservas concorrentes necessitam dos serviços descritos em `docs/INTEGRACAO.md`. Não existe publicação ou backend nesta entrega.
Utilize apenas valores fictícios nos testes. As palavras-passe nunca são lidas pelo código, guardadas ou enviadas. Os nomes de teste ficam em `sessionStorage`. Não existe serviço de email; o agradecimento explica isso para não simular um envio real.
Para validar o login de demonstração, use um email fictício e qualquer valor no campo de password. O domínio encaminha para JM, Bondalti ou WineStone; os restantes encaminham para a CUF. A Família José de Mello está acessível no índice de revisão. Esta regra serve apenas a demonstração e não representa autorização.
Os cartões disponíveis são os quatro do layout; as duas linhas de apadrinhamento são exemplos iniciais do Hospital CUF Porto. Ao escolher outro local antes de apadrinhar, essas linhas não são transportadas. O mesmo catálogo de quatro cartões serve à revisão visual dos outros locais; não representa distribuição real de crianças. Consulte as divergências das fontes em `docs/MAPA-DOS-MODELOS.md`.
## Conferência do recebimento
Depois de descompactar, a equipa pode conferir os ficheiros do pacote original:
```sh
python3 scripts/check_delivery.py
python3 scripts/check_assets.py
```
O manifesto `docs/MANIFESTO-DE-ENTREGA.json` lista os caminhos, tamanhos e hashes SHA-256. O próprio manifesto fica fora da sua lista para evitar autorreferência. A conferência serve para o recebimento do pacote. Depois de alterações feitas pela TI, é esperado que os hashes dos ficheiros modificados deixem de coincidir.