admtracksteel/camila
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feature: Estudio de Cartazes profissional com templates BNCC/Educacao Infantil/MindLab, integracao de turma, live editor e exportacao PDF/PNG

Browse Source
This commit is contained in:
admtracksteel
2026-08-31 11:12:57 +00:00
parent 36f72f56dc
commit 1ef002ff1a
2 changed files with 521 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+106 -69
View File
@@ -1797,107 +1797,141 @@
<div class="settings-modal-body" style="padding: 20px; overflow-y: auto; flex: 1; display: flex; flex-direction: column;">
<!-- Conteúdo 1: Criador -->
<div id="panelCartazesCriar" style="display: flex; flex-direction: row; gap: 24px; height: 100%; flex-wrap: wrap;">
<div id="panelCartazesCriar" style="display: flex; flex-direction: row; gap: 20px; height: 100%; flex-wrap: wrap;">
<!-- Lado Esquerdo: Configurações -->
<div id="cartazLeftConfigPanel" style="flex: 1; min-width: 320px; display: flex; flex-direction: column; gap: 16px;">
<h4 style="margin: 0; color: var(--text-primary); border-bottom: 1px dashed var(--border-light); padding-bottom: 8px;">1. Definições do Cartaz</h4>
<!-- Lado Esquerdo: Configurações e Templates -->
<div id="cartazLeftConfigPanel" style="flex: 1; min-width: 300px; display: flex; flex-direction: column; gap: 14px;">
<div class="settings-group">
<label style="color: var(--text-secondary); font-size: 0.8rem; font-weight: 600; text-transform: uppercase;">Título do Cartaz</label>
<input type="text" id="cartazTituloInput" placeholder="Ex: Regras da Nossa Sala" class="obs-input" style="width: 100%; margin-top: 4px; padding: 10px;">
<div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dashed var(--border-light); padding-bottom: 8px;">
<h4 style="margin: 0; color: var(--text-primary);">📋 1. Modelo & Conteúdo</h4>
<button type="button" id="btnCartazResetTemplate" class="btn-music-option" style="padding: 2px 8px; font-size: 0.72rem; margin: 0;">Limpar</button>
</div>
<!-- SELETOR DE TEMPLATES PRÉ-CONFIGURADOS -->
<div class="settings-group">
<label style="color: var(--text-secondary); font-size: 0.8rem; font-weight: 600; text-transform: uppercase;">Tema / Objetivo Pedagógico</label>
<input type="text" id="cartazTemaInput" placeholder="Ex: Combinados positivos de convivência" class="obs-input" style="width: 100%; margin-top: 4px; padding: 10px;">
</div>
<div class="settings-group">
<label style="color: var(--text-secondary); font-size: 0.8rem; font-weight: 600; text-transform: uppercase;">Layout Visual</label>
<select id="cartazLayoutSelect" class="obs-select" style="width: 100%; margin-top: 4px;">
<option value="educativo">📚 Educativos e Pedagógicos (Alfabeto, regras, mapas)</option>
<option value="informativo">📌 Informativos e Institucionais (Avisos, recados, datas)</option>
<option value="conscientizacao">🌱 Conscientização e Campanhas (Saúde, bem-estar, bullying)</option>
<option value="cultural">🎨 Culturais e Esportivos (Feiras, campeonatos, teatros)</option>
<label style="color: var(--text-secondary); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">Modelos Rápidos (Templates)</label>
<select id="cartazTemplateSelect" class="obs-select" style="width: 100%; margin-top: 4px; font-weight: 600; color: var(--brand-pink, #db2777);">
<option value="">✨ Escolha um modelo pedagógico...</option>
<optgroup label="🌟 Educação Infantil (0 a 5 anos)">
<option value="combinados">🌟 Combinados & Convivência da Turma</option>
<option value="rotina">🍏 Rotina Diária & Lanche Saudável</option>
<option value="aniversarios">🎂 Mural dos Aniversariantes</option>
<option value="brinquedos">🧸 Organização dos Brinquedos e Cantos</option>
</optgroup>
<optgroup label="📚 Campos de Experiência (BNCC)">
<option value="bncc_eu_outro">🤝 O Eu, o Outro e o Nós (EI02EO / EI03EO)</option>
<option value="bncc_corpo">🏃 Corpo, Gestos e Movimentos (EI02CG / EI03CG)</option>
<option value="bncc_tracos">🎨 Traços, Sons, Cores e Formas (EI02TS / EI03TS)</option>
<option value="bncc_escuta">📖 Escuta, Fala e Imaginação (EI02EF / EI03EF)</option>
<option value="bncc_espacos">🔍 Espaços, Tempos e Relações (EI02ET / EI03ET)</option>
</optgroup>
<optgroup label="🧠 Metodologia Mind Lab">
<option value="mindlab_regras">♟️ Cantinho dos Jogos & Pensamento Estratégico</option>
<option value="mindlab_cooperacao">🧩 Desafios de Raciocínio & Trabalho em Equipe</option>
</optgroup>
<optgroup label="📢 Avisos & Famílias">
<option value="aviso_pais">📌 Recado Importante para as Famílias</option>
<option value="mostra_cultural">🎉 Convite para Mostra Pedagógica & Cultural</option>
</optgroup>
</select>
</div>
<div style="display: flex; gap: 12px; flex-wrap: wrap;">
<!-- VINCULAR TURMA -->
<div style="display: flex; gap: 10px; flex-wrap: wrap;">
<div class="settings-group" style="flex: 1; min-width: 140px;">
<label style="color: var(--text-secondary); font-size: 0.75rem; font-weight: 600; text-transform: uppercase;">Tamanho do Papel</label>
<select id="cartazTamanhoSelect" class="obs-select" style="width: 100%; margin-top: 4px;">
<option value="A4" selected>A4 (21 x 29,7 cm)</option>
<option value="A3">A3 (29,7 x 42 cm)</option>
<option value="A2">A2 (42 x 59,4 cm)</option>
<option value="A1">A1 (59,4 x 84,1 cm)</option>
<label style="color: var(--text-secondary); font-size: 0.75rem; font-weight: 600; text-transform: uppercase;">Vincular à Turma</label>
<select id="cartazTurmaSelect" class="obs-select" style="width: 100%; margin-top: 4px;">
<option value="">-- Selecionar Turma --</option>
</select>
</div>
<div class="settings-group" style="flex: 1; min-width: 140px;">
<label style="color: var(--text-secondary); font-size: 0.75rem; font-weight: 600; text-transform: uppercase;">Orientação</label>
<select id="cartazOrientacaoSelect" class="obs-select" style="width: 100%; margin-top: 4px;">
<option value="retrato">Retrato (Vertical)</option>
<option value="paisagem">Paisagem (Horizontal)</option>
<option value="retrato" selected>📄 Retrato (Vertical A4)</option>
<option value="paisagem">📃 Paisagem (Horizontal A4)</option>
</select>
</div>
</div>
<h4 style="margin: 0; color: var(--text-primary); border-bottom: 1px dashed var(--border-light); padding-bottom: 8px; margin-top: 8px;">2. Estilo e Cores</h4>
<div style="display: flex; gap: 12px; flex-wrap: wrap;">
<div class="settings-group" style="flex: 1; min-width: 140px;">
<label style="color: var(--text-secondary); font-size: 0.75rem; font-weight: 600; text-transform: uppercase;">Cor de Fundo</label>
<input type="color" id="cartazBgColor" value="#fff9eb" style="width: 100%; height: 38px; padding: 2px; border: 1px solid var(--border-light); border-radius: 6px; cursor: pointer; margin-top: 4px;">
</div>
<div class="settings-group" style="flex: 1; min-width: 140px;">
<label style="color: var(--text-secondary); font-size: 0.75rem; font-weight: 600; text-transform: uppercase;">Cor do Texto</label>
<input type="color" id="cartazTextColor" value="#2d3748" style="width: 100%; height: 38px; padding: 2px; border: 1px solid var(--border-light); border-radius: 6px; cursor: pointer; margin-top: 4px;">
</div>
<!-- CAMPOS EDITÁVEIS EM TEMPO REAL -->
<div class="settings-group">
<label style="color: var(--text-secondary); font-size: 0.75rem; font-weight: 600; text-transform: uppercase;">Título Principal</label>
<input type="text" id="cartazTituloInput" placeholder="Ex: Combinados da Nossa Turma" class="obs-input" style="width: 100%; margin-top: 4px; padding: 8px;">
</div>
<div class="settings-group">
<label style="color: var(--text-secondary); font-size: 0.8rem; font-weight: 600; text-transform: uppercase;">Paletas Rápidas</label>
<div style="display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap;">
<button type="button" class="btn-palette-preset" data-bg="#fff9eb" data-text="#2d3748" style="background: #fff9eb; color: #2d3748; padding: 6px; border: 1px solid #ddd; border-radius: 4px; font-size: 0.7rem; cursor: pointer; font-weight: bold;">Tons Pastéis</button>
<button type="button" class="btn-palette-preset" data-bg="#e6fffa" data-text="#004d40" style="background: #e6fffa; color: #004d40; padding: 6px; border: 1px solid #ddd; border-radius: 4px; font-size: 0.7rem; cursor: pointer; font-weight: bold;">Jardim Fresco</button>
<button type="button" class="btn-palette-preset" data-bg="#ebf8ff" data-text="#2b6cb0" style="background: #ebf8ff; color: #2b6cb0; padding: 6px; border: 1px solid #ddd; border-radius: 4px; font-size: 0.7rem; cursor: pointer; font-weight: bold;">Céu Azul</button>
<button type="button" class="btn-palette-preset" data-bg="#1a202c" data-text="#f7fafc" style="background: #1a202c; color: #f7fafc; padding: 6px; border: 1px solid #444; border-radius: 4px; font-size: 0.7rem; cursor: pointer; font-weight: bold;">Lousa Escura</button>
</div>
<label style="color: var(--text-secondary); font-size: 0.75rem; font-weight: 600; text-transform: uppercase;">Subtítulo / Faixa Etária</label>
<input type="text" id="cartazSubtituloInput" placeholder="Ex: Educação Infantil • Professora Camila" class="obs-input" style="width: 100%; margin-top: 4px; padding: 8px;">
</div>
<div style="display: flex; gap: 12px; flex-wrap: wrap;">
<div class="settings-group" style="flex: 1; min-width: 140px;">
<label style="color: var(--text-secondary); font-size: 0.75rem; font-weight: 600; text-transform: uppercase;">Fonte do Cartaz</label>
<div class="settings-group">
<label style="color: var(--text-secondary); font-size: 0.75rem; font-weight: 600; text-transform: uppercase;">Conteúdo / Destaques do Cartaz</label>
<textarea id="cartazCardsInput" placeholder="Digite os itens ou mensagens do cartaz (um por linha)..." class="obs-input" style="width: 100%; min-height: 80px; padding: 8px; margin-top: 4px; font-size: 0.82rem; resize: vertical;"></textarea>
</div>
<div class="settings-group">
<label style="color: var(--text-secondary); font-size: 0.75rem; font-weight: 600; text-transform: uppercase;">Rodapé / Mensagem de Apoio</label>
<input type="text" id="cartazRodapeInput" placeholder="Ex: EMEI São Bernardo do Campo • Projeto 2026" class="obs-input" style="width: 100%; margin-top: 4px; padding: 8px;">
</div>
<!-- ESTILO, CORES E FONTES -->
<h4 style="margin: 0; color: var(--text-primary); border-bottom: 1px dashed var(--border-light); padding-bottom: 8px; margin-top: 4px;">🎨 2. Estilo e Cores</h4>
<div style="display: flex; gap: 10px; flex-wrap: wrap;">
<div class="settings-group" style="flex: 1; min-width: 130px;">
<label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Fonte Lúdica</label>
<select id="cartazFontSelect" class="obs-select" style="width: 100%; margin-top: 4px;">
<option value="'Fredoka', sans-serif" selected>🎈 Fredoka (Fofa/Infantil)</option>
<option value="'Outfit', sans-serif">⚡ Outfit (Moderna)</option>
<option value="'Caveat', cursive">✍️ Caveat (Manuscrita)</option>
<option value="'Playfair Display', serif">📖 Playfair (Clássica)</option>
<option value="'Outfit', sans-serif">⚡ Outfit (Moderna)</option>
</select>
</div>
<div class="settings-group" style="flex: 1; min-width: 140px;">
<label style="color: var(--text-secondary); font-size: 0.75rem; font-weight: 600; text-transform: uppercase;">Estilo de Borda</label>
<div class="settings-group" style="flex: 1; min-width: 130px;">
<label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Moldura / Borda</label>
<select id="cartazBorderSelect" class="obs-select" style="width: 100%; margin-top: 4px;">
<option value="none">Nenhuma</option>
<option value="8px dashed">Pontilhada Colorida</option>
<option value="8px double">Linha Dupla Clássica</option>
<option value="12px solid">Borda Larga Colorida</option>
<option value="6px dashed" selected>Pontilhada Colorida</option>
<option value="6px double">Linha Dupla Clássica</option>
<option value="8px solid">Moldura de Gibi</option>
</select>
</div>
</div>
<!-- PALETAS RÁPIDAS -->
<div class="settings-group">
<label style="color: var(--text-secondary); font-size: 0.8rem; font-weight: 600; text-transform: uppercase;">Ilustração por IA (Opcional)</label>
<textarea id="cartazPromptImagem" placeholder="Ex: Desenho fofo de brinquedos sorridentes na caixa de brinquedos, aquarela, cores suaves..." class="obs-input" style="width: 100%; min-height: 60px; padding: 8px; margin-top: 4px; font-size: 0.85rem; resize: vertical;"></textarea>
<label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Paletas Pedagógicas</label>
<div style="display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap;">
<button type="button" class="btn-palette-preset" data-bg="#fff9eb" data-text="#2d3748" data-card="#ffffff" style="background: #fff9eb; color: #2d3748; padding: 4px 8px; border: 1px solid #ddd; border-radius: 6px; font-size: 0.72rem; cursor: pointer; font-weight: bold;">Tons Pastéis</button>
<button type="button" class="btn-palette-preset" data-bg="#f0fdf4" data-text="#166534" data-card="#ffffff" style="background: #f0fdf4; color: #166534; padding: 4px 8px; border: 1px solid #bbf7d0; border-radius: 6px; font-size: 0.72rem; cursor: pointer; font-weight: bold;">Jardim Verde</button>
<button type="button" class="btn-palette-preset" data-bg="#eff6ff" data-text="#1e40af" data-card="#ffffff" style="background: #eff6ff; color: #1e40af; padding: 4px 8px; border: 1px solid #bfdbfe; border-radius: 6px; font-size: 0.72rem; cursor: pointer; font-weight: bold;">Céu Azul</button>
<button type="button" class="btn-palette-preset" data-bg="#fdf2f8" data-text="#9d174d" data-card="#ffffff" style="background: #fdf2f8; color: #9d174d; padding: 4px 8px; border: 1px solid #fbcfe8; border-radius: 6px; font-size: 0.72rem; cursor: pointer; font-weight: bold;">Rosa Lúdico</button>
<button type="button" class="btn-palette-preset" data-bg="#1e293b" data-text="#f8fafc" data-card="#334155" style="background: #1e293b; color: #f8fafc; padding: 4px 8px; border: 1px solid #475569; border-radius: 6px; font-size: 0.72rem; cursor: pointer; font-weight: bold;">Lousa Escura</button>
</div>
</div>
<button type="button" id="btnGenerateCartaz" style="width: 100%; padding: 12px; background: #10b981; color: white; border: none; border-radius: 10px; font-weight: 700; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); transition: all 0.2s; margin-top: 8px;">
<span>🪄 Criar Cartaz Pedagógico</span>
<!-- ILUSTRAÇÃO POR IA -->
<div class="settings-group">
<label style="color: var(--text-secondary); font-size: 0.75rem; font-weight: 600; text-transform: uppercase;">Ilustração por IA (MiniMax T2I)</label>
<textarea id="cartazPromptImagem" placeholder="Ex: Ilustração 3D Pixar de crianças felizes brincando juntas na escola, cores vivas..." class="obs-input" style="width: 100%; min-height: 50px; padding: 6px; margin-top: 4px; font-size: 0.78rem; resize: vertical;"></textarea>
<div style="display: flex; gap: 8px; margin-top: 6px;">
<button type="button" id="btnGenerateCartazImage" class="btn-music-option" style="border-color: #8b5cf6; color: #a78bfa; background: rgba(139, 92, 246, 0.1); font-weight: 600; padding: 5px 10px; font-size: 0.78rem;">
<span>🪄 Gerar Ilustração com IA</span>
</button>
<button type="button" id="btnRemoveCartazImage" class="btn-music-option" style="color: var(--text-muted); font-size: 0.78rem; padding: 5px 10px;">
Remover Imagem
</button>
</div>
</div>
<!-- BOTÃO GERAR NOVO CARTAZ COM IA COMPLETA -->
<button type="button" id="btnGenerateCartaz" style="width: 100%; padding: 11px; background: #10b981; color: white; border: none; border-radius: 10px; font-weight: 700; font-size: 0.95rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); transition: all 0.2s; margin-top: 4px;">
<span>🤖 Redigir Conteúdo com PedagogIA</span>
</button>
<div id="cartazGenerateLoader" style="display: none; align-items: center; justify-content: center; gap: 10px; color: var(--text-secondary); font-size: 0.9rem; padding: 10px; background: rgba(255, 255, 255, 0.02); border-radius: 8px;">
<div class="record-spinner" style="width: 20px; height: 20px; border-width: 2px;"></div>
<span id="cartazLoaderText">Montando e diagramando cartaz...</span>
<div id="cartazGenerateLoader" style="display: none; align-items: center; justify-content: center; gap: 10px; color: var(--text-secondary); font-size: 0.85rem; padding: 10px; background: rgba(255, 255, 255, 0.02); border-radius: 8px;">
<div class="media-spinner" style="width: 18px; height: 18px; border-width: 2px; border-top-color: #10b981;"></div>
<span id="cartazLoaderText">Diagramando cartaz pedagógico...</span>
</div>
</div>
@@ -1963,12 +1997,14 @@
<!-- Lado Direito: Preview & Editor de Código -->
<div class="cartaz-preview-panel" style="flex: 1.3; min-width: 360px; display: flex; flex-direction: column; gap: 14px;">
<div class="cartaz-header-container" style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-light); padding-bottom: 8px;">
<h4 style="margin: 0; color: var(--text-primary);">👁️ Visualização do Cartaz</h4>
<div class="cartaz-header-actions" style="display: flex; gap: 8px;">
<button id="btnCanvasModeToggle" class="btn-save-settings" style="background: transparent; border: 1px solid var(--border-light); color: var(--text-secondary); padding: 5px 10px; font-size: 0.75rem;">🎨 Design Canvas</button>
<button id="btnEditCartazToggle" class="btn-save-settings" style="background: transparent; border: 1px solid var(--border-light); color: var(--text-secondary); padding: 5px 10px; font-size: 0.75rem;">✏️ Editar HTML</button>
<button id="btnPrintCartaz" class="btn-save-settings" style="background: #3b82f6; border: none; color: white; padding: 5px 12px; font-size: 0.75rem; font-weight: bold; border-radius: 6px;">🖨️ Imprimir Cartaz</button>
<div class="cartaz-header-container" style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-light); padding-bottom: 8px; flex-wrap: wrap; gap: 8px;">
<h4 style="margin: 0; color: var(--text-primary);">👁️ Visualização em Tempo Real</h4>
<div class="cartaz-header-actions" style="display: flex; gap: 6px; flex-wrap: wrap;">
<button type="button" id="btnExportCartazPNG" class="btn-save-settings" style="background: #10b981; border: none; color: white; padding: 5px 10px; font-size: 0.75rem; font-weight: 700; border-radius: 6px; cursor: pointer;" title="Baixar imagem PNG de alta resolução">🖼️ Baixar PNG</button>
<button type="button" id="btnExportCartazPDF" class="btn-save-settings" style="background: #8b5cf6; border: none; color: white; padding: 5px 10px; font-size: 0.75rem; font-weight: 700; border-radius: 6px; cursor: pointer;" title="Baixar documento PDF pronto para impressão">📄 Baixar PDF</button>
<button type="button" id="btnPrintCartaz" class="btn-save-settings" style="background: #3b82f6; border: none; color: white; padding: 5px 10px; font-size: 0.75rem; font-weight: 700; border-radius: 6px; cursor: pointer;">🖨️ Imprimir</button>
<button type="button" id="btnCanvasModeToggle" class="btn-save-settings" style="background: transparent; border: 1px solid var(--border-light); color: var(--text-secondary); padding: 5px 8px; font-size: 0.75rem;">🎨 Canvas</button>
<button type="button" id="btnEditCartazToggle" class="btn-save-settings" style="background: transparent; border: 1px solid var(--border-light); color: var(--text-secondary); padding: 5px 8px; font-size: 0.75rem;">✏️ HTML</button>
</div>
</div>
@@ -2090,7 +2126,8 @@
</div>
</div>
<!-- Bibliotecas externas para renderizar markdown, PDFs e compactação ZIP -->
<!-- Bibliotecas externas para renderizar markdown, PDFs, imagens e compactação ZIP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.1/marked.min.js"></script>