portal_publico/docs/temas-sazonais/CHANGELOG.md

Changelog — Temas Sazonais

Histórico específico desta aplicação, extraído de plano.md. Rodadas que mudaram mais de uma aplicação ao mesmo tempo continuam em plano.md.

Formato: uma entrada por rodada, ### Rodada N — Título; quando a rodada não tem número registrado, ### Título só. A numeração de rodada não é global — cada aplicação conta as próprias, e o mesmo número designa trabalhos diferentes em arquivos diferentes. Ao citar uma rodada, sempre nomear o arquivo. Ver o topo de plano.md.

Rodada 94 — Tema sazonal Halloween: logo/mascote vampiro, intro de abertura e "susto" ao clicar

Pedido (2026-09-15): deixar uma logo e uma introdução de abertura com tema de Halloween, aplicadas só durante outubro, revertendo pro P.I.D. normal depois — sem descartar nada do que já existe. Mascote (a marca P.I.D. fantasiada de vampiro) e a composição da intro foram desenhados fora do repositório, em C:\Users\Depaula\Documents\Logos\P.I.D. Logo Design Halloween\ (pid-marca-halloween/ + Logo intro animation Halloween/export-halloween/pid-intro-halloween.html, mesmo formato de bundle "Design Canvas" da intro original) e portados fielmente pra vanilla JS/CSS, mesma técnica já usada na intro normal (ver CLAUDE.md raiz → "Animação de intro do login" → "Origem do arquivo"). Implementado como mecanismo 100% runtime, sem editar nenhum arquivo original: static/js/seasonal-theme.js (novo, incluído em toda página) decide se o tema está ativo (pidIsHalloweenActive(), janela de outubro) e, se sim, troca em memória o favicon, o ícone/assinatura da sidebar e o ícone do login pelo vampiro, e troca a piscada de olhos ao clicar por uma animação de "susto" (capa se abre, rosto fica raivoso, tremida + brilho vermelho — .is-scaring em base.css); static/css/login-intro-halloween.css + static/js/login-intro-halloween.js são uma intro de abertura completa alternativa (cenas Rise/Scare/Settle/Wordmark + uma cena "Fly" acrescentada pra aterrissar na sidebar, mesmo espírito da intro normal), escolhida por auth.js no lugar da intro normal quando o tema está ativo. Detalhe técnico completo em temas-sazonais.md.

Ainda em preview, não confirmado: PID_HALLOWEEN_PREVIEW_FORCE = true (em seasonal-theme.js) força o tema ligado agora só pra essa revisão visual — o usuário ainda precisa (a) rodar o runserver e conferir a logo/intro/susto nos dois temas, (b) confirmar se a janela é outubro inteiro (já implementado) ou um recorte diferente, e (c) desligar essa constante depois de validado (daí em diante só a data decide, sem mais nenhuma mudança de código). Depois de outubro, tudo volta ao P.I.D. normal sozinho, sem nenhuma ação manual — nenhum arquivo original (login-intro.js/.css, ícones pid-icone*/pid-logo-horizontal*, pid-icon-eye/is-blinking) foi alterado ou removido.

Ajuste na mesma rodada: o usuário reportou o favicon aparecendo na cor errada (branco, destoando do resto da marca) — pidApplySeasonalFavicon() trocava pra pid-halloween-favicon.svg (variante simplificada, sem capa/gola/cores completas); corrigido pra usar pid-halloween-icone-escuro.svg (o mesmo ícone/cores do resto da UI), mesmo padrão que o P.I.D. normal já seguia.

Rodada 95 — Teias de aranha nos cantos do login e da tela Principal

Pedido (2026-09-15, mesma rodada do tema Halloween acima): teias de aranha com aranha animada nos cantos do login e da tela Principal, marcados pelo usuário em prints da tela real. Antes de aplicar, foi publicado um protótipo isolado (Artifact "Cantos Assombrados") com 4 vs 2 cantos e aranha andando vs parada, pra decidir o desenho sem mexer no Portal de verdade — o usuário confirmou 2 cantos (superior-esquerdo/inferior-direito, os mesmos dos prints) e pediu a teia da tela Principal menor que a do login, "evitando cobrir muito as informações que constam na página" (a Principal tem cards/widgets perto das bordas; o login só tem o card centralizado).

Aplicado só em index.html e portal.html (nenhum outro shell), mesmo mecanismo 100% runtime do resto do tema: static/css/halloween-cobweb.css (novo) define a teia (6 fios + 3 anéis, coordenadas por trigonometria) e a aranha (corpo+8 pernas, anda e volta ao longo de um fio via @keyframes puro CSS, pernas mexendo continuamente); o markup (PID_COBWEB_SVG em seasonal-theme.js) só é injetado num container já presente e hidden no template (#pw-cobwebs-login/#pw-cobwebs-portal) quando pidIsHalloweenActive(), chamado por login-logo-blink.js/sidebar-brand.js. Na Principal, a teia é ancorada em .main-content, não no viewport — a sidebar já é sólida e cobriria o canto esquerdo de qualquer jeito. Detalhe técnico completo em temas-sazonais.md → "Teias de aranha de canto".

Ajuste na mesma rodada: a teia do login não aparecia de jeito nenhum, e a da Principal ficou "muito pequena". Causa raiz do primeiro: z-index:-1 só funciona dentro de um contexto de empilhamento isolado — sem isso, o próprio fundo em tela cheia de .login-page (conteúdo estático normal) pintava por cima da teia, escondendo-a por completo; corrigido com isolation:isolate em .login-page (login.css) e em .main-content (layout.css), que tinha o mesmo problema de raiz (só não percebido porque a Principal não tem um fundo cobrindo tudo). Tamanho aumentado nas duas telas (clamp(120px,14vw,190px) → clamp(160px,17vw,240px) no login; clamp(80px,8vw,120px) → clamp(110px,11vw,170px) na Principal), mantendo a Principal um pouco menor que o login.

Mais um ajuste, ainda na mesma rodada: (a) a topbar da Principal (position:sticky, fundo opaco) cobria a metade de cima da teia do canto superior-esquerdo — .pw-corner--tl na Principal ganhou top:var(--topbar-height) pra começar logo abaixo dela; (b) tamanho aumentado de novo nas duas telas (login → clamp(220px,22vw,320px), Principal → clamp(160px,15vw,230px)); (c) contraste por tema: no escuro, a aranha (quase a mesma cor do fundo) ganhou um drop-shadow branco pra não sumir, sobrando só o olho vermelho visível como antes; no claro, a teia (creme, pensada pro fundo escuro) viraria invisível no fundo branco — agora fica cinza-chumbo escuro nesse tema, e o brilho branco da aranha é desligado (já contrasta sozinha, escura sobre claro).

Rodada 96 — Opt-out de temas sazonais (menu da conta)

Pedido (2026-09-15, mesma rodada do tema Halloween): um jeito do próprio usuário desligar temas sazonais (hoje só o Halloween), "caso o usuário tenha alguma preferência com relação aos temas, ou no caso do halloween, se tiver aracnofobia". Botão-toggle "Temas sazonais" (.seasonal-theme-toggle, components.css) no dropdown da conta, logo abaixo de "Tema de cores", com dois estados "Ativo"/"Inativo" — duplicado nos 13 shells, mesmo padrão dos demais elementos replicados por template. Preferência salva em localStorage (pid_seasonal_theme_opt_out), mesmo padrão do tema claro/escuro (nunca migrada pro banco — é preferência de navegador). pidIsHalloweenActive() (seasonal-theme.js) checa essa preferência antes de qualquer outra coisa, inclusive antes do PID_HALLOWEEN_PREVIEW_FORCE (prioridade máxima: se o usuário desligou, fica desligado). Alternar o toggle recarrega a página (account.js) — o tema sazonal já foi aplicado via substituição de markup no carregamento atual, não dá pra desfazer in-place, e pra quem desligou por aracnofobia a aranha precisa sumir na hora. Detalhe técnico completo em temas-sazonais.md → "Opt-out do usuário".

Rodada 97 — Clicar na aranha da teia mata ela

Pedido (2026-09-15, mesma rodada): "ao clicar nas aranhas, deve sair uma pequena caveirinha dela (como se tivesse morrido) e ela cair, deixando a teia vazia. Ao atualizar a página, deve voltar como estava." A aranha (única parte da teia com pointer-events:auto) ganhou um listener de clique {once:true} que dispara duas animações CSS em paralelo: a própria aranha cai girando e some (pwSpiderDie, pernas encolhendo numa animação própria, pwLegsDie) enquanto uma caveirinha (<g class="pw-skull">, novo, sempre presente mas invisível) sobe e desaparece (pwSkullRise), como se a alma saísse do corpo. Sem nenhum estado salvo nesta rodada — a teia ficava vazia só até a página ser recarregada, já que pidApplyHalloweenCobwebs() reconstruía tudo do zero a cada carregamento (persistência veio na rodada 99). Detalhe técnico completo em temas-sazonais.md → "Teias de aranha de canto" → "Clicar mata a aranha".

Rodada 98 — Teia mais profissional + correção da aranha/caveira invertidas no canto inferior-direito

Pedido (2026-09-15, mesma rodada): (a) o desenho da teia (6 fios retos + 3 anéis poligonais) estava "muito bruto", o usuário anexou uma referência visual e pediu algo "nesse sentido", mais profissional, "para que não fique parecendo que só foi colado um PNG bruto"; (b) no canto inferior-direito, a aranha caía pra cima ao morrer e a caveira aparecia de cabeça pra baixo.

Teia redesenhada: agora 8 fios (ângulos irregulares, não uniformes — mais parecido com uma teia real) + 5 anéis em espiral levemente arqueados (<path class="pw-ring"> com curvas Q, controle empurrado ~8% mais longe do centro que o ponto médio da corda — simula a curva natural de uma espiral de captura, em vez de segmentos retos ligando os pontos) + 1 fio "perdido" bem mais comprido que os demais, se estendendo pra fora do canto (detalhe da referência do usuário) e cortado naturalmente pela borda da página (.pw-corners{overflow:hidden}).

Causa raiz do bug do canto inferior-direito: esse canto reaproveitava o mesmo desenho do superior-esquerdo com transform:scale(-1,-1) no <div> inteiro — um jeito simples de não duplicar o markup, mas que vira tudo de cabeça pra baixo, inclusive a orientação da aranha/caveira e a direção "pra baixo"/"pra cima" das animações de queda/subida. Corrigido separando as duas coisas: só a teia (.pw-strands, que não tem um "lado certo pra cima") continua espelhada, com transform-box:view-box;transform-origin:100px 100px (o centro do viewBox autorado — não a caixa delimitadora dos fios, que o fio "perdido" deslocaria); a aranha e a caveira passaram a usar variáveis CSS (--rx/--ry/--rr/--ox/--oy/--sx/--sy) redefinidas com os valores espelhados só para .pw-corner--br, sem nenhum scale/rotate extra nelas — ficam sempre em pé e caem/sobem na direção real da tela nos dois cantos. Detalhe técnico completo em temas-sazonais.md → "Teias de aranha de canto".

Rodada 99 — Aranha morta persiste entre carregamentos + atalho Tab+B pra resetar

Pedido (2026-09-15, mesma rodada): "guardar que a aranha foi morta na memória... até executar o comando tab+b que reseta a aranha". Cada aranha ganhou um id próprio (${containerId}__tl/__br, 4 possíveis — 2 cantos × 2 páginas) guardado num array em localStorage (pid_seasonal_dead_spiders, pidMarkSpiderDead()/pidGetDeadSpiders()/pidResetDeadSpiders() em seasonal-theme.js) — mesmo padrão de armazenamento das outras preferências sazonais, nunca no banco. pidApplyHalloweenCobwebs() agora checa essa lista a cada carregamento: aranha já morta nasce direto com .is-dead (invisível, sem tocar a animação de queda nem a caveira de novo), em vez de ligar o clique. Segurar Tab e apertar B (sem interceptar o Tab em si — a navegação por foco continua normal) limpa a lista e recarrega a página, trazendo todas de volta. Detalhe técnico completo em temas-sazonais.md → "Teias de aranha de canto".

Rodada 100 — Documentação separada em docs/temas-sazonais/

Pedido (2026-09-15): "gerar um changelog específico para esta questão dos temas sazonais... estruturar suas informações como se fossem aplicação específica". Seguindo o mesmo padrão das demais aplicações sem pacote Python dedicado (docs/<app>/<app>.md+README.md+CHANGELOG.md), o conteúdo técnico detalhado que vivia na seção "Tema sazonal (Halloween)" do CLAUDE.md raiz foi movido pra este arquivo/temas-sazonais.md/README.md; o histórico rodada a rodada (94-99) foi extraído de plano.md pra este CHANGELOG.md (mesma numeração). CLAUDE.md e plano.md ficaram só com a parte estrutural (a existência do mecanismo + onde encontrar o resto), sem duplicar o detalhe aqui.

Rodada 101 — Preview confirmado, tema programado pra outubro de verdade

Pedido (2026-09-15): "pode parar de forçar o tema e deixar somente programado para aplicar a partir de outubro". PID_HALLOWEEN_PREVIEW_FORCE (seasonal-theme.js) virou false — mantida na constante (não removida), documentando a decisão em vez de apagar o rastro. A partir daqui, pidIsHalloweenActive() decide só pela data (PID_HALLOWEEN_MES = 9, outubro inteiro, todo ano), sem nenhuma ação manual pra ligar/desligar. Encerra o período de preview aberto na rodada 94.