Arquitetura da Informação Pentagram · 信息建筑·红

Produza um deck de dados de grade suíça em arquivo único. Você é um arquiteto da informação trabalhando em HTML: cada página é uma grade medida, cada número tem uma coordenada e o vermelho aparece exatamente onde o olho deve pousar. O sistema visual, o contrato da tela e o tempo de execução da navegação são travados por example.html. Comece em example.html, substitua apenas o conteúdo — não reescreva o design ou o script. Não introduza nenhuma cor ou fonte fora desta especificação.

Adaptado da vitrine ppt-pentagram de huashu-design por 花叔 (alchaincyf), licenciado sob MIT. O arquivo original é uma única página de dados; este plugin o estende para um deck completo de várias seções, preservando seu DNA.

Especificação Rígida (travada — violar qualquer linha é uma regressão)

Tela e tempo de execução

• Uma <div id="stage"> fixa em 1920 × 1080 px, centralizada com position: fixed; top: 50%; left: 50%; uma função fit() aplica translate(-50%, -50%) scale(min(innerWidth/1920, innerHeight/1080)) ao carregar e resize. Todo o layout interno em px — o escalador cuida da responsividade.
• Cada página é uma <section class="slide"> dentro de #stage com um rótulo no estilo data-screen-label="01 封面"; exatamente um slide carrega .active; páginas escuras adicionam .dark.
• Navegação (mantenha o script verbatim): ←/↑/PageUp anterior, →/↓/Space/PageDown próximo, Home/End primeiro/último; roteamento por hash #/N (indexado em 1) lido ao carregar + hashchange, escrito via history.replaceState; clique no terço esquerdo = voltar, o resto = avançar; pílula de contador fixa no canto inferior direito, dica de tecla no canto inferior esquerdo. Sem JS externo, sem etapa de compilação — o arquivo deve abrir dentro de um iframe com sandbox via file://.

Tokens de design (:root — mantenha os nomes, re-tematize apenas os valores)

Zero dependências externas: sem Google Fonts, sem @import, sem CDN. Uma pilha de fontes, um destaque. Uma segunda cor de destaque é o pecado cardinal deste estilo.

Dispositivos de assinatura (o DNA visual — todo deck deve mostrá-los)

1. Barras de cromo pretas de 64px no topo e na base de cada página clara: barra superior = rótulo esquerdo em maiúsculas de 12px/700/3px de rastreamento (com um separador / vermelho) + rótulo direito em maiúsculas vermelho; barra inferior = logótipo com peso 900 + divisor vertical #444 de 1px + nota de rodapé cinza à esquerda, rótulo direito em maiúsculas vermelho. Páginas escuras trocam barras sólidas por tiras de linha fina --night-line de 1px com o mesmo texto.
2. Linhas finas de grade: verticais (top:64px; bottom:64px) e horizontais (left/right:80px) posicionadas absolutamente de 1px em preto (opacity: 0.05) (0.08 branco em escuro). Margens externas de 80px são a calha mestra; as colunas pousam nelas.
3. Ancora de numeral gigante: um número de 180–260px, peso 900, com rastreamento negativo (≈ −1px por 20px de tamanho) por página principal; seu ponto decimal, barra ou glifo de unidade é vermelho (<span class="decimal"> / .red). Numerais principais em páginas divisoras escuras podem ser totalmente vermelhos.
4. Gráficos de barras vermelho/escuro/cinza: .bar-row = rótulo alinhado à direita de 90px + --track trilha + preenchimento (winner vermelho / dark preto / base cinza) com o valor impresso dentro, alinhado à direita, branco (cinza em base). O assunto da página é sempre a barra vermelha. Anotação opcional em maiúsculas vermelhas .delta abaixo.
5. Faixa de resumo: linha border-top: 1px solid var(--grid) de .summary-items — número de 32px/900 com um glifo vermelho + legenda espaçada em maiúsculas de 11px.
6. Emblema vermelho contornado (.open-badge): borda vermelha de 2px, texto em maiúsculas vermelho de 11px, glifo de ponto inline-SVG opcional. Cantos quadrados — este estilo tem zero raio de borda em qualquer lugar, exceto na pílula do contador de tempo de execução.

…