Especificação por tela. A maquete navegável (com os tokens reais aplicados) está em
wireframes.html— abrir no navegador. Componentes referem-se ao07-design-system.md. Estado: para revisão do Flavio.
W1 · Home#
┌────────────────────────────────────────────────────────────────┐
│ z-header: ZEIDE — eu sobrevivi só para contar [nav] [PT|EN]│
├────────────────────────────────────────────────────────────────┤
│ │
│ [ FOTO DE 1938 — full-bleed, sépia ] │
│ │
│ Kalisz, 25 de julho de 1938. Treze meses depois, │
│ começou a guerra. Um sobreviveu. │
│ │
│ ┌──────────────────────┐ ┌──────────────────────────┐ │
│ │ SENTIR │ │ EXPLORAR │ │
│ │ o memorial (10 min) │ │ a jornada completa │ │
│ └──────────────────────┘ └──────────────────────────┘ │
│ │
│ ▸ assistir à entrevista (2h17) ▸ faça pela sua família│
├────────────────────────────────────────────────────────────────┤
│ Abaixo do fold: "O arco em 7 linhas" (texto) → cards das │
│ seções (Pessoas · Arquivo · O que não sabemos) → z-footer │
└────────────────────────────────────────────────────────────────┘Notas: a legenda da foto identifica as pessoas ao hover/tap (mapa de áreas — as 7 posições estão identificadas desde 01/09/2026: em pé Szyja·Mojsie·Majer, sentados Marisha·noivo·Regina·Hersz). Duas portas = botões grandes (alvo ≥ 56px).
W2 · A Entrevista (o v1)#
Desktop ≥ 960px
┌────────────────────────────────────────────────────────────────┐
│ z-header │
├──────────────────────────────┬─────────────────────────────────┤
│ │ Abas: [ VERBATIM ] [ Revisada ]│
│ z-player (sticky) │ buscar na transcrição │
│ 16:9, legendas PT/EN │ Fitas: ① ② ③ ④ ⑤ │
│ ── barra de capítulos ── │ ┌─────────────────────────────┐ │
│ (5 fitas marcadas) │ │ z-turn ITA [00:51] │ │
│ │ │ — Por favor, queira se... │ │
│ Sob o player: │ │ z-turn MOJSIE [00:55] ◀────┼─┼── .is-current
│ "agora: FITA 1 — Kalisz" │ │ — Meu nome é Moisés... │ │ (acompanha o vídeo)
│ + link p/ evento na Jornada│ │ z-turn ITA [01:00] │ │
│ │ │ ... │ │
│ │ └─────────────────────────────┘ │
│ │ (clique no [mm:ss] → seek) │
└──────────────────────────────┴─────────────────────────────────┘
Mobile: player sticky no topo (16:9), abas abaixo, transcrição em coluna única.Notas: sincronização bidirecional (vídeo↔turno). Aba lembrada na URL. Botão "copiar link deste momento" em cada turno (deep-link #t=55m43s). Aviso curto sobre o método verbatim no topo da aba, com link "como ler".
W3 · A Jornada (o v2 — o coração)#
┌────────────────────────────────────────────────────────────────┐
│ z-header │
│ z-filterbar: [][][][] pessoas ▾ lugares ▾ [mundo ] │
│ [ mapa] │
├────────────────────────────────────────────────────────────────┤
│ z-ruler: 1914——1939 ▓▓ 1939———————1947 ▓▓▓▓▓▓ 1947——2000 │ ← escala distorcida,
│ (hachura nos trechos comprimidos) │ honesta no hover
├────────────────────────────────────────────────────────────────┤
│ CAP: KALISZ 1914–39 [+9 detalhes] │ A GUERRA 1939 [+6] … │ ← scroll-snap
│ │
│ VIDA ●────■───────●──────●───■────◇───────●─── → │ ● ■ ○ ◇
│ nasce KAP bar Beitar carteira… │
│ 12/12 1929 mitzvá │
│ ──────────────────────────────────────────────── │
│ MUNDO ○──────────○──────────○─────── │ (tom --c-historia)
│ censo 31 Hitler 33 fronteira… │
│ │
│ ┌─────────── z-pip ───┐ │
│ │ ▶ vídeo [–10][+10] │ │
│ └─────────────────────┘ │
└────────────────────────────────────────────────────────────────┘
Evento aberto → z-event-panel desliza da direita (timeline visível, escurecida):
┌─ z-event-panel ────────────────────────┐
│ │
│ 02/12/1939 · DOCUMENTO · │
│ **Os dois primeiros trens partem │
│ de Kalisz — um deles para Lublin** │
│ [foto/scan: lista dos transportes] │
│ Texto: o que se sabe (3–6 linhas) │
│ “ z-quote com ▶ [33:43] ” │
│ Fontes: Dean/USHMM · YV 12840003 │
│ → ver no arquivo (H01) · saiba mais │
│ ◀ evento anterior próximo ▶ │
└────────────────────────────────────────┘Notas: capítulos = Kalisz · A guerra 1939 · URSS 40–43 · O exército 43–45 · O retorno 45 · Alemanha 45–46 · Paris 46–47 · Brasil 47–50 · A vida 1950–2000 · Epílogo: O quinto milagre. +N detalhes expande o nível 2 dentro do capítulo (dots menores). Com o vídeo tocando, o evento .is-current pulsa suave (desligável). Mobile: coluna vertical única, capítulos como seções, painel vira bottom-sheet.
W4 · Memorial (o v3)#
Cena (1 de 14) [ pular para a Jornada]
┌────────────────────────────────────────────────────────────────┐
│ │
│ [imagem full-bleed, vinheta escura] │
│ │
│ "Eu acho que eu sobrevivi só para │
│ contar a história." │
│ — Mojsie, 1997 │
│ │
│ [ ▶ ouvir na voz dele · 22s ] ← z-audio-chip │
│ │
│ ● ● ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ (scroll ↓) │
└────────────────────────────────────────────────────────────────┘Notas: sequência A1–A12 conforme 04-curadoria-audio.md + telas 13–14 (O quinto milagre + frase final). Telas 7–8 (Majdanek/carroça): fundo estático, sem parallax, silêncio de 1s antes do áudio. Última tela: "E se Deus quiser, ainda tem muita coisa em frente." → duas portas (Jornada / Entrevista).
W5 · O Arquivo#
┌ z-filterbar: tipo ▾ · década ▾ · arquivo de origem ▾ · ────┐
│ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │
│ │ D01 │ │ D02 │ │ D07 │ │ D09 │ grid responsivo │
│ │[thumb│ │[thumb│ │[thumb│ │[thumb│ de z-doc-card │
│ │ 1929 │ │ 1934 │ │ 1946 │ │ 1947 │ │
│ └──────┘ └──────┘ └──────┘ └──────┘ │
└───────────────────────────────────────────────────────────────┘
Página do documento: visor com zoom · ficha de proveniência · "a voz dele" · fontes/termos.
z-cw antes dos documentos de morte (decisão 21).W6 · As Pessoas#
Grid de z-person-card em três grupos: A família (Hersz, Regina, Mojsie, Frania , Marjem, Szyja, Majer ) · Os tios e primos (Brana, Rafał, Szaja Majer, Ajzyk, Kasriel, o primo de Ebensee, Sala…) · A vida nova (Clara; a árvore — nomes completos só na área família). Página de pessoa: retrato/datas → "o que ele disse" → "o que os arquivos dizem" → árvore.
W7 · O que não sabemos · W8 · Guia · W9 · Sobre#
W7: lista de cartões-pergunta (Marisha · "Aser Hersz" · Kronstadt · tenaim), cada um com o estado da busca e "como você pode ajudar" + contato flavio@fpripas.com. W8: o guia (05-guia-pesquisa.md): passos 1–8 em âncoras, checklist PDF, modelos. W9: o método (00-como-ler adaptado), convenções, créditos, direitos das fontes, changelog.
Área da família#
Mesmo layout, banner discreto "área da família" no header; adiciona: árvore completa, fotos recentes (slides 10–14), downloads integrais. Basic Auth (decisão 19).