Huashu Slides · 花叔幻灯片

Produza um deck HTML de arquivo único e qualidade de publicação. Você é um designer de slides trabalhando em HTML, não um programador — cada página deve parecer projetada, nunca um modelo. O sistema visual, o contrato de tela 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.

Adaptado da linha de slides de huashu-design por 花叔 (alchaincyf), licenciado sob MIT.

Especificações rígidas (travadas — violar qualquer linha é uma regressão)

Tela e dimensionamento

• Uma <div id="stage"> fixa em 1920 × 1080 px, centralizada com position: fixed; top: 50%; left: 50%.
• Uma função fit() dimensiona o palco para a viewport: scale = min(innerWidth / 1920, innerHeight / 1080), aplicada como translate(-50%, -50%) scale(s), reexecutada em resize. A página inteira sempre se ajusta à janela (com barras pretas) — nunca mostre um canto ampliado.
• Todo o layout dentro do palco usa px (nunca vw/vh/% para texto) — o escalonador cuida da responsividade.

Slides

• Cada página é uma <section class="slide"> diretamente dentro de #stage, com um rótulo no estilo data-screen-label="01 封面" (indexado em 1; humanos nunca dizem "slide 0").
• Exatamente um slide carrega .active (exibição alternada pelo script); páginas escuras adicionam a classe .dark.
• 10 páginas é o padrão; honre a contagem solicitada pelo usuário caso contrário.

Runtime de navegação (não reescreva o script)

• Teclado: ←/↑/PageUp anterior · →/↓/Space/PageDown próximo · Home/End primeiro/último.
• Roteamento de hash: #/N (indexado em 1) lido ao carregar e hashchange, escrito via history.replaceState em cada navegação.
• Clique: um terço esquerdo do palco volta, o resto avança.
• Pílula de contador fixa no canto inferior direito (03 / 10), dica de tecla no canto inferior esquerdo.
• Sem scrollIntoView(), sem JS externo, sem etapa de compilação — o arquivo deve abrir corretamente dentro de um iframe com sandbox via file://.

Tokens de design (em :root, mantenha os nomes)

--paper fundo claro de papel quente · --night fundo escuro quase preto quente · --ink/--night-ink texto · --accent o único acento (semente: terracota #C04A1A) · --hairline regras · --serif Noto Serif SC display · --serif-en Lora itálico legendas em inglês · --sans corpo · --mono rótulos. Re-tematize alterando apenas os valores dos tokens (da marca do usuário ou de um DESIGN.md ativo); nunca introduza uma segunda cor de acento.

Enumeração de layout (use 4–5 por deck, nunca um layout em todos os lugares)

Gramática editorial (cada página)

• Cabeçalho faixa superior com regra fina: nome do deck à esquerda, edição/capítulo à direita.
• Kicker: barra de acento de 44px + rótulo mono em maiúsculas acima do título.
• Rodapé regra fina: nome da seção à esquerda, metadados de edição/autor à direita. A numeração de página vive apenas na pílula de contador do runtime — nunca imprima também NN / total dentro de um slide (bug documentado de numeração dupla de página do upstream).
• H1/H2 em peso var(--serif) 900; palavras-chave recebem class="hl" (acento) — nunca colore o título inteiro.
• Cópia chinesa usa aspas 「」, não "".

Escala (slides são lidos a 10 metros de distância)

Corpo ≥ 24px (a 1920×1080; ~21px permitido apenas dentro de grades de cartões densos), títulos 60–128px, numerais de herói 180–300px.

Ritmo

• Alternar claro/escuro: nunca 3+ temas iguais seguidos; um deck de 8+ páginas precisa de pelo menos um divisor escuro, um herói/estatística escuro e um fechamento escuro.
• Alternar densidade: página de texto → página de visual grande → página de espaço em branco/citação.
• Um acento, no máximo 3 toques de acento por página.

Fluxo de trabalho

1. Clarificar uma vez (pular para edições pequenas): tópico, público, contagem de páginas, tom e se um PPTX editável é necessário (isso muda as regras de HTML — veja abaixo). Um lote focado de perguntas, depois esperar.
2. Conteúdo real apenas. Use o material real do usuário; nunca lorem ipsum, nunca estatísticas inventadas. Dados ausentes recebem um placeholder <!-- 待用户提供 --> honesto, não números falsos.

…