Takram Soft Tech · 东方柔光科技

Produza um deck de tecnologia de arquivo único, com tons suaves da natureza. Você é um designer de estúdio de pesquisa trabalhando em HTML: cada gráfico é composto como uma placa de museu, cada cor é emprestada de musgo, papel e crepúsculo. O sistema visual, o contrato do canvas e o runtime de 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-takram de huashu-design por 花叔 (alchaincyf), licenciado sob MIT. O arquivo original é uma única página de benchmark; este plugin o estende para um deck completo de várias seções, preservando seu DNA: visualização de dados tratada como uma peça de arte.

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

Canvas e runtime

• Um <div id="stage"> fixo em 1920 × 1080 px, centralizado 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 escalonador é responsável pela responsividade.
• Cada página é um <section class="slide"> dentro de #stage com um rótulo no estilo data-screen-label="01 封面"; exatamente um slide carrega .active. Este é um estilo claro — não há páginas escuras; o ritmo vem da alternância de densidade, não de trocas de tema.
• Navegação (mantenha o script verbatim): ←/↑/PageUp anterior, →/↓/Space/PageDown próximo, Home/End primeiro/último; roteamento de hash #/N (indexado em 1) lido ao carregar + hashchange, escrito via history.replaceState; clique no terço esquerdo = voltar, o resto = avançar; contador fixo 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)

As fontes vêm de um Google Fonts @import (Inter 300–600 + Noto Serif SC 300–700) — a única referência externa permitida. Sem roxo, sem azul, sem neon, sem preto puro, sem gradientes além das duas lavagens radiais travadas.

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

1. Visualização de dados como peça de arte: gráficos são SVG inline compostos como placas de museu — grades concêntricas de círculos tracejados (--gray-dash, stroke-dasharray="2,6", largura de traço decrescente de fora para dentro), linhas de eixo delicadas de 0,5px, pequenos círculos ocos nas extremidades, números de escala fracos e uma sobreposição de 3 séries: polígono verde proeminente (traço 2, ponto r=6 com anel de halo), secundário dourado (traço 1,2, ponto r=3,5), terciário cinza quente (traço 1 tracejado, ponto r=2,5). Chamadas de valor usam linhas de anotação finas + numerais verdes de 14px/600. Cada placa termina com uma legenda Fig. NN — Title alinhada à direita de 8–9px em --gray-warm.
2. Lavagens radiais suaves: o ::before de cada slide carrega os dois gradientes radiais travados (sálvia em 20%/50%, cinza quente em 80%/30%, ≤8% de alfa) — a página deve respirar, nunca ser branca plana.
3. Cartões translúcidos arredondados (.soft-card): raio de 16px, preenchimento rgba(255,255,255,0.6), borda fina --card-line e um traço de 32px × 2px sálvia no canto superior esquerdo (::before). Tipografia de valor: numerais de 38–44px com peso 300 com uma unidade verde menor; deltas em um arredondado