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/app.js
+412 -121
View File
@@ -7368,16 +7368,25 @@ document.addEventListener('DOMContentLoaded', () => {
const panelCartazesHistorico = document.getElementById('panelCartazesHistorico');
const cartazTituloInput = document.getElementById('cartazTituloInput');
const cartazTemaInput = document.getElementById('cartazTemaInput');
const cartazLayoutSelect = document.getElementById('cartazLayoutSelect');
const cartazSubtituloInput = document.getElementById('cartazSubtituloInput');
const cartazCardsInput = document.getElementById('cartazCardsInput');
const cartazRodapeInput = document.getElementById('cartazRodapeInput');
const cartazTemplateSelect = document.getElementById('cartazTemplateSelect');
const cartazTurmaSelect = document.getElementById('cartazTurmaSelect');
const btnCartazResetTemplate = document.getElementById('btnCartazResetTemplate');
const cartazBgColor = document.getElementById('cartazBgColor');
const cartazTextColor = document.getElementById('cartazTextColor');
const cartazFontSelect = document.getElementById('cartazFontSelect');
const cartazBorderSelect = document.getElementById('cartazBorderSelect');
const cartazPromptImagem = document.getElementById('cartazPromptImagem');
const btnGenerateCartazImage = document.getElementById('btnGenerateCartazImage');
const btnRemoveCartazImage = document.getElementById('btnRemoveCartazImage');
const btnGenerateCartaz = document.getElementById('btnGenerateCartaz');
const cartazGenerateLoader = document.getElementById('cartazGenerateLoader');
const btnExportCartazPNG = document.getElementById('btnExportCartazPNG');
const btnExportCartazPDF = document.getElementById('btnExportCartazPDF');
const btnEditCartazToggle = document.getElementById('btnEditCartazToggle');
const btnPrintCartaz = document.getElementById('btnPrintCartaz');
const cartazEditArea = document.getElementById('cartazEditArea');
@@ -7395,31 +7404,206 @@ document.addEventListener('DOMContentLoaded', () => {
let activeCartazData = null;
// Toggle Modal
if (barBtnCartazes) {
barBtnCartazes.addEventListener('click', () => {
cartazesModal.style.display = 'flex';
switchCartazTab('criar');
});
// DICIONÁRIO DE TEMPLATES PEDAGÓGICOS PRÉ-CONFIGURADOS
const CARTAZ_TEMPLATES = {
combinados: {
titulo: "🌟 Combinados da Nossa Turma",
subtitulo: "Educação Infantil • Convivência e Respeito",
cards: [
"🤝 Cuidamos dos nossos amigos com carinho",
"🧸 Guardamos os brinquedos nos cantos certos",
"🤫 Falamos baixinho na roda de conversa",
"🧼 Lavamos as mãos antes do lanche",
"👂 Ouvimos a professora e os colegas com atenção"
],
rodape: "Educando com afeto, empatia e respeito mútuo",
bg: "#fff9eb",
text: "#2d3748",
font: "'Fredoka', sans-serif",
prompt: "Children holding hands happily in a colorful kindergarten classroom, cute 3D Pixar illustration, bright warm colors, no text"
},
rotina: {
titulo: "🍏 Rotina Diária & Lanche Saudável",
subtitulo: "Desenvolvimento de Autonomia e Hábitos Saudáveis",
cards: [
"🌅 Roda de Acolhida e Canções do Bom Dia",
"🧼 Higiene e Lavagem Cuidadosa das Mãos",
"🍎 Hora do Lanche: Servir-se sem desperdícios",
"🌳 Vivências no Parque, Areia e Natureza",
"😴 Roda de Histórias, Livros e Relaxamento"
],
rodape: "Promovendo a autonomia e o autocuidado no cotidiano",
bg: "#f0fdf4",
text: "#166534",
font: "'Fredoka', sans-serif",
prompt: "Cute children having healthy fruit snack at kindergarten table, friendly cartoon vector style, bright colors, no text"
},
aniversarios: {
titulo: "🎂 Mural dos Aniversariantes",
subtitulo: "Celebrando a vida e o crescimento das nossas crianças!",
cards: [
"🎈 Que cada dia seja repleto de brincadeiras!",
"🎉 Parabéns aos aniversariantes do mês!",
"🌟 Muita saúde, descobertas e sorrisos!"
],
rodape: "Com todo carinho da Professora e dos Colegas",
bg: "#fdf2f8",
text: "#9d174d",
font: "'Fredoka', sans-serif",
prompt: "Festive colorful birthday balloons and confetti with smiling animal mascots, cute 3D Pixar illustration, no text"
},
brinquedos: {
titulo: "🧸 Organização dos Brinquedos e Cantos",
subtitulo: "Nosso espaço escolar é de todos nós!",
cards: [
"🧩 Blocos de montar: Caixa Azul",
"🚗 Carrinhos e transportes: Caixa Verde",
"📚 Livros de histórias: Estante Baixa",
"🎨 Tintas e massinhas: Armário de Artes"
],
rodape: "Cuidar dos materiais é um ato de carinho e respeito",
bg: "#eff6ff",
text: "#1e40af",
font: "'Fredoka', sans-serif",
prompt: "Cute organized classroom toy shelf with colorful wooden blocks and teddy bears, cartoon style, no text"
},
bncc_eu_outro: {
titulo: "🤝 O Eu, o Outro e o Nós",
subtitulo: "Campo de Experiência BNCC • EI02EO / EI03EO",
cards: [
"🌟 Reconhecer e valorizar suas próprias qualidades",
"💖 Desenvolver empatia e respeito aos sentimentos alheios",
"🗣️ Resolver pequenos conflitos através do diálogo",
"🎨 Compartilhar materiais e respeitar a vez dos amigos"
],
rodape: "BNCC Educação Infantil • Identidade, Autonomia e Convivência",
bg: "#eff6ff",
text: "#1e40af",
font: "'Outfit', sans-serif",
prompt: "Children of diverse backgrounds smiling together and sharing toys, gentle watercolor illustration, no text"
},
bncc_corpo: {
titulo: "🏃 Corpo, Gestos e Movimentos",
subtitulo: "Campo de Experiência BNCC • EI02CG / EI03CG",
cards: [
"🤸 Circuitos motores, equilíbrio, saltos e giros",
"🎶 Cantigas de roda e expressão corporal rítmica",
"🚲 Deslocamentos espaciais e controle corporal",
"⚽ Gincanas cooperativas e respeito a regras"
],
rodape: "BNCC Educação Infantil • Corporeidade, Saúde e Movimento",
bg: "#fdf2f8",
text: "#9d174d",
font: "'Fredoka', sans-serif",
prompt: "Cute children running, jumping, and playing ring around the rosie outdoors, lively vibrant illustration, no text"
},
bncc_tracos: {
titulo: "🎨 Traços, Sons, Cores e Formas",
subtitulo: "Campo de Experiência BNCC • EI02TS / EI03TS",
cards: [
"🖌️ Pinturas com texturas e tintas naturais",
"🥁 Exploração de instrumentos musicais e ritmos",
"🖍️ Desenhos livres de observação e imaginação",
"🎭 Esculturas com massinha, argila e sucatas"
],
rodape: "BNCC Educação Infantil • Sensibilidade, Expressão e Arte",
bg: "#fff9eb",
text: "#b45309",
font: "'Caveat', cursive",
prompt: "Children happily painting on big canvases with colorful paint splashes, cute art studio, no text"
},
bncc_escuta: {
titulo: "📖 Escuta, Fala, Pensamento e Imaginação",
subtitulo: "Campo de Experiência BNCC • EI02EF / EI03EF",
cards: [
"📚 Roda de contação e manuseio de livros infantis",
"🗣️ Expressão oral de ideias, sentimentos e histórias",
"🎵 Cantigas, parlendas, rimas e trava-línguas",
"✍️ Contato lúdico com a função social da escrita"
],
rodape: "BNCC Educação Infantil • Linguagem e Letramento Inicial",
bg: "#f0fdf4",
text: "#15803d",
font: "'Fredoka', sans-serif",
prompt: "Teacher reading an open fairy tale storybook to cozy circle of children, magical soft glow, Pixar 3D, no text"
},
bncc_espacos: {
titulo: "🔍 Espaços, Tempos, Quantidades e Relações",
subtitulo: "Campo de Experiência BNCC • EI02ET / EI03ET",
cards: [
"🌱 Observação do plantio na horta e natureza",
"🔢 Contagem lúdica com elementos concretos",
"📐 Identificação de formas geométricas no ambiente",
"⏳ Noções de tempo: ontem, hoje, amanhã e rotina"
],
rodape: "BNCC Educação Infantil • Curiosidade e Investigação Científica",
bg: "#eff6ff",
text: "#1e3a8a",
font: "'Outfit', sans-serif",
prompt: "Kids exploring green garden with magnifying glass and planting flowers, vibrant clean illustration, no text"
},
mindlab_regras: {
titulo: "♟️ Cantinho dos Jogos Mind Lab",
subtitulo: "Metodologia de Jogos & Desenvolvimento Socioemocional",
cards: [
"🎯 Pensar antes de agir e planejar sua jogada",
"🤝 Saber ganhar e saber perder com elegância",
"⏳ Aguardar a sua vez com calma e autocontrole",
"💡 Aprender com as tentativas e criar novas estratégias"
],
rodape: "Mind Lab Brasil • Jogos Pedagógicos e Habilidades do Século XXI",
bg: "#f8fafc",
text: "#1e293b",
font: "'Outfit', sans-serif",
prompt: "Children happily playing a wooden tabletop board game together, focus and teamwork, 3D Pixar, no text"
},
mindlab_cooperacao: {
titulo: "🧩 Desafios de Raciocínio & Cooperação",
subtitulo: "Metodologia Mind Lab • Resolução de Problemas",
cards: [
"👥 O trabalho em equipe nos leva mais longe",
"🔍 Escuta atenta das ideias dos colegas",
"🚀 Cada desafio é uma oportunidade de aprender"
],
rodape: "Desenvolvendo liderança, empatia e tomada de decisão",
bg: "#f0fdf4",
text: "#166534",
font: "'Fredoka', sans-serif",
prompt: "Children putting together giant colorful puzzle pieces together, cooperation, joyful 3D illustration, no text"
},
aviso_pais: {
titulo: "📌 Recado Importante para as Famílias",
subtitulo: "Comunicação Escola & Comunidade Escolar",
cards: [
"📅 Próxima Reunião Pedagógica: Sexta-feira às 17h",
"🎒 Trazer uma muda de roupa extra identificada",
"👟 Uso de calçado confortável para o dia de parque",
"💧 Manter a garrafinha de água individual na mochila"
],
rodape: "A parceria entre escola e família é fundamental para o sucesso das crianças!",
bg: "#fff9eb",
text: "#1e293b",
font: "'Outfit', sans-serif",
prompt: "Friendly cartoon school bulletin board with colorful notes and cheerful mascot, clean vector, no text"
},
mostra_cultural: {
titulo: "🎉 Convite: Mostra Pedagógica & Cultural",
subtitulo: "Venha prestigiar as produções e vivências dos nossos pequenos!",
cards: [
"🎨 Exposição dos Painéis de Arte e Garatujas",
"📸 Linha do Tempo das Descobertas do Semestre",
"🎶 Apresentação Musical e Parlendas da Turma",
"🌿 Visitação guiada à Horta e Projetos Coletivos"
],
rodape: "Contamos com a presença de todas as famílias!",
bg: "#fdf2f8",
text: "#831843",
font: "'Playfair Display', serif",
prompt: "Joyful school festival decoration with colorful bunting banners and children artworks, vibrant light, no text"
}
};
if (btnCloseCartazesModal) {
btnCloseCartazesModal.addEventListener('click', () => {
if (canvasModeActive) {
exitCanvasMode();
}
cartazesModal.style.display = 'none';
});
}
cartazesModal.addEventListener('click', (e) => {
if (e.target === cartazesModal) {
if (canvasModeActive) {
exitCanvasMode();
}
cartazesModal.style.display = 'none';
}
});
// Switch Tab
function switchCartazTab(tab) {
@@ -7428,7 +7612,6 @@ document.addEventListener('DOMContentLoaded', () => {
tabCartazesHistorico.classList.remove('active');
panelCartazesCriar.style.display = 'flex';
panelCartazesHistorico.style.display = 'none';
tabCartazesCriar.style.color = 'var(--text-primary)';
tabCartazesHistorico.style.color = 'var(--text-secondary)';
} else {
@@ -7436,7 +7619,6 @@ document.addEventListener('DOMContentLoaded', () => {
tabCartazesHistorico.classList.add('active');
panelCartazesCriar.style.display = 'none';
panelCartazesHistorico.style.display = 'flex';
tabCartazesCriar.style.color = 'var(--text-secondary)';
tabCartazesHistorico.style.color = 'var(--text-primary)';
loadCartazesHistory();
@@ -7446,6 +7628,39 @@ document.addEventListener('DOMContentLoaded', () => {
if (tabCartazesCriar) tabCartazesCriar.addEventListener('click', () => switchCartazTab('criar'));
if (tabCartazesHistorico) tabCartazesHistorico.addEventListener('click', () => switchCartazTab('historico'));
// RENDERIZAR CONTEÚDO DO CARTAZ EM TEMPO REAL
function renderCartazContentFromInputs() {
const rawCards = (cartazCardsInput?.value || '').split('\n').map(l => l.trim()).filter(l => l.length > 0);
const subtitulo = (cartazSubtituloInput?.value || '').trim();
const rodape = (cartazRodapeInput?.value || '').trim();
let html = '';
if (subtitulo) {
html += `<div style="text-align: center; font-size: 1.15rem; font-weight: 600; opacity: 0.9; margin-bottom: 12px; letter-spacing: 0.3px;">${subtitulo}</div>`;
}
if (rawCards.length > 0) {
html += `<div style="display: flex; flex-direction: column; gap: 10px; width: 100%;">`;
rawCards.forEach((line) => {
html += `
<div style="background: rgba(255, 255, 255, 0.4); backdrop-filter: blur(4px); border: 2px solid rgba(0, 0, 0, 0.08); border-radius: 12px; padding: 12px 16px; font-size: 1.05rem; font-weight: 600; display: flex; align-items: center; gap: 10px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);">
<span>${line}</span>
</div>
`;
});
html += `</div>`;
} else {
html += `<p style="text-align: center; color: rgba(0,0,0,0.4); font-style: italic; padding: 20px 0;">Digite os destaques ou escolha um modelo ao lado.</p>`;
}
if (rodape) {
html += `<div style="margin-top: auto; padding-top: 14px; text-align: center; font-size: 0.85rem; font-weight: 600; opacity: 0.75; border-top: 1px dashed rgba(0,0,0,0.15);">${rodape}</div>`;
}
cartazPreviewContent.innerHTML = html;
if (cartazHtmlEditor) cartazHtmlEditor.value = html;
}
// Live Style Updates
function updateLivePreview() {
const bg = cartazBgColor.value;
@@ -7459,60 +7674,11 @@ document.addEventListener('DOMContentLoaded', () => {
cartazPrintableArea.style.color = text;
cartazPrintableArea.style.fontFamily = font;
const tamanho = document.getElementById('cartazTamanhoSelect') ? document.getElementById('cartazTamanhoSelect').value : 'A4';
const FORMAT_SIZES = {
'A4': { retrato: 380, paisagem: 537 },
'A3': { retrato: 480, paisagem: 679 },
'A2': { retrato: 580, paisagem: 820 },
'A1': { retrato: 680, paisagem: 962 }
};
const maxW = FORMAT_SIZES[tamanho]?.[orientacao] || FORMAT_SIZES['A4']['retrato'];
cartazPrintableArea.style.width = '100%';
cartazPrintableArea.style.maxWidth = `${maxW}px`;
cartazPrintableArea.style.maxWidth = orientacao === 'paisagem' ? '680px' : '480px';
cartazPrintableArea.style.aspectRatio = orientacao === 'paisagem' ? '1.414 / 1' : '1 / 1.414';
cartazPrintableArea.style.height = 'auto';
if (orientacao === 'paisagem') {
cartazPreviewContent.style.flexDirection = 'row';
cartazPreviewContent.style.flexWrap = 'wrap';
cartazPreviewContent.style.justifyContent = 'center';
cartazPreviewContent.style.alignContent = 'flex-start';
cartazPreviewContent.style.gap = '12px';
setTimeout(() => {
Array.from(cartazPreviewContent.children).forEach(child => {
child.style.flex = '1 1 calc(50% - 12px)';
child.style.boxSizing = 'border-box';
child.style.margin = '0';
child.style.background = 'rgba(255,255,255,0.25)';
child.style.padding = '12px';
child.style.borderRadius = '8px';
child.style.border = '1px solid rgba(0,0,0,0.05)';
});
}, 0);
} else {
cartazPreviewContent.style.flexDirection = 'column';
cartazPreviewContent.style.flexWrap = 'nowrap';
cartazPreviewContent.style.justifyContent = 'flex-start';
cartazPreviewContent.style.gap = '12px';
setTimeout(() => {
Array.from(cartazPreviewContent.children).forEach(child => {
child.style.flex = '0 0 auto';
child.style.width = '100%';
child.style.boxSizing = 'border-box';
child.style.margin = '0';
child.style.background = 'rgba(255,255,255,0.25)';
child.style.padding = '12px';
child.style.borderRadius = '8px';
child.style.border = '1px solid rgba(0,0,0,0.05)';
});
}, 0);
}
cartazPreviewTitle.textContent = title;
cartazPreviewTitle.style.borderColor = text;
@@ -7523,14 +7689,27 @@ document.addEventListener('DOMContentLoaded', () => {
}
}
// Event Listeners para inputs em tempo real
[
cartazTituloInput,
cartazSubtituloInput,
cartazCardsInput,
cartazRodapeInput
].forEach(elem => {
if (elem) {
elem.addEventListener('input', () => {
renderCartazContentFromInputs();
updateLivePreview();
});
}
});
[
cartazBgColor,
cartazTextColor,
cartazFontSelect,
cartazBorderSelect,
cartazTituloInput,
document.getElementById('cartazOrientacaoSelect'),
document.getElementById('cartazTamanhoSelect')
document.getElementById('cartazOrientacaoSelect')
].forEach(elem => {
if (elem) elem.addEventListener('input', updateLivePreview);
if (elem && elem.tagName === 'SELECT') elem.addEventListener('change', updateLivePreview);
@@ -7539,67 +7718,96 @@ document.addEventListener('DOMContentLoaded', () => {
// Preset Palettes
document.querySelectorAll('.btn-palette-preset').forEach(btn => {
btn.addEventListener('click', (e) => {
const bg = e.target.dataset.bg;
const text = e.target.dataset.text;
const bg = btn.dataset.bg;
const text = btn.dataset.text;
cartazBgColor.value = bg;
cartazTextColor.value = text;
updateLivePreview();
});
});
// Toggle HTML Editor
if (btnEditCartazToggle) {
btnEditCartazToggle.addEventListener('click', () => {
if (cartazEditArea.style.display === 'none') {
cartazEditArea.style.display = 'flex';
btnEditCartazToggle.textContent = '👁️ Ocultar Editor';
} else {
cartazEditArea.style.display = 'none';
btnEditCartazToggle.textContent = '✏️ Editar Conteúdo';
// Gerar Ilustração com IA (MiniMax T2I)
if (btnGenerateCartazImage) {
btnGenerateCartazImage.addEventListener('click', async () => {
const prompt = (cartazPromptImagem?.value || '').trim();
if (!prompt) {
await showCustomAlert('Aviso', 'Digite uma descrição para a ilustração no campo acima.');
return;
}
try {
btnGenerateCartazImage.disabled = true;
btnGenerateCartazImage.textContent = '⏳ Gerando com IA...';
const fullPrompt = `${prompt}, high resolution children book illustration, cute Pixar 3D, colorful, no text, clean vector`;
const resp = await fetch('/api/comics/generate-frame', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ prompt: fullPrompt })
});
if (!resp.ok) {
const err = await resp.json();
throw new Error(err.error || 'Falha ao gerar ilustração');
}
const data = await resp.json();
if (data.imageUrl) {
cartazPreviewImage.src = data.imageUrl;
cartazPreviewImageContainer.style.display = 'block';
updateLivePreview();
await showCustomAlert('Ilustração Pronta!', 'A imagem foi gerada e adicionada ao cartaz com sucesso.');
}
} catch (err) {
console.error('Erro ao gerar ilustração do cartaz:', err);
await showCustomAlert('Erro', 'Não foi possível gerar a ilustração: ' + err.message);
} finally {
btnGenerateCartazImage.disabled = false;
btnGenerateCartazImage.innerHTML = '<span>🪄 Gerar Ilustração com IA</span>';
}
});
}
// Update from Editor
if (btnUpdateCartazPreview) {
btnUpdateCartazPreview.addEventListener('click', () => {
cartazPreviewContent.innerHTML = cartazHtmlEditor.value;
if (btnRemoveCartazImage) {
btnRemoveCartazImage.addEventListener('click', () => {
cartazPreviewImage.src = '';
cartazPreviewImageContainer.style.display = 'none';
if (cartazPromptImagem) cartazPromptImagem.value = '';
updateLivePreview();
});
}
// Generate Poster
// --- GERAR CONTEÚDO COM PEDAGOGIA (IA) ---
if (btnGenerateCartaz) {
btnGenerateCartaz.addEventListener('click', async () => {
const titulo = cartazTituloInput.value.trim();
const tema = cartazTemaInput.value.trim();
const layout = cartazLayoutSelect.value;
const promptImagem = cartazPromptImagem.value.trim();
const tamanho = document.getElementById('cartazTamanhoSelect') ? document.getElementById('cartazTamanhoSelect').value : 'A4';
const orientacao = document.getElementById('cartazOrientacaoSelect') ? document.getElementById('cartazOrientacaoSelect').value : 'retrato';
const titulo = (cartazTituloInput?.value || '').trim();
const subtitulo = (cartazSubtituloInput?.value || '').trim();
const promptImagem = (cartazPromptImagem?.value || '').trim();
const orientacao = document.getElementById('cartazOrientacaoSelect')?.value || 'retrato';
if (!titulo || !tema) {
showToast('Por favor, defina o Título e o Tema do Cartaz.', 'error');
if (!titulo) {
await showCustomAlert('Aviso', 'Por favor, informe ao menos o Título Principal do Cartaz.');
return;
}
btnGenerateCartaz.disabled = true;
cartazGenerateLoader.style.display = 'flex';
if (cartazGenerateLoader) cartazGenerateLoader.style.display = 'flex';
try {
const res = await fetch('/api/cartazes/generate', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${localStorage.getItem('token')}`
'Content-Type': 'application/json'
},
body: JSON.stringify({
titulo,
tema,
corFundo: cartazBgColor.value,
corTexto: cartazTextColor.value,
layout,
tema: subtitulo || titulo,
corFundo: cartazBgColor?.value || '#fff9eb',
corTexto: cartazTextColor?.value || '#2d3748',
layout: 'educativo',
promptImagem,
tamanho,
tamanho: 'A4',
orientacao
})
});
@@ -7608,28 +7816,111 @@ document.addEventListener('DOMContentLoaded', () => {
if (res.ok) {
activeCartazData = data;
// Preencher Preview
cartazPreviewContent.innerHTML = data.conteudo;
cartazHtmlEditor.value = data.conteudo;
if (data.conteudo) {
// Extrair texto limpo de tópicos/cards para o input editável
const tempDiv = document.createElement('div');
tempDiv.innerHTML = data.conteudo;
const items = Array.from(tempDiv.querySelectorAll('li, p, div')).map(el => el.textContent.trim()).filter(t => t.length > 5 && !t.toLowerCase().includes(titulo.toLowerCase()));
if (items.length > 0) {
cartazCardsInput.value = items.slice(0, 6).join('\n');
} else {
cartazCardsInput.value = tempDiv.textContent.trim();
}
}
if (data.imagemUrl) {
cartazPreviewImage.src = data.imagemUrl;
cartazPreviewImageContainer.style.display = 'block';
} else {
cartazPreviewImageContainer.style.display = 'none';
}
renderCartazContentFromInputs();
updateLivePreview();
showToast('Cartaz criado e salvo com sucesso!', 'success');
showToast('Cartaz diagramado pela PedagogIA com sucesso!', 'success');
} else {
showToast(data.error || 'Erro ao gerar cartaz.', 'error');
await showCustomAlert('Erro', data.error || 'Erro ao gerar cartaz com IA.');
}
} catch (err) {
console.error(err);
showToast('Erro ao se conectar com o servidor.', 'error');
console.error('Erro ao gerar cartaz:', err);
await showCustomAlert('Erro', 'Não foi possível conectar ao assistente: ' + err.message);
} finally {
btnGenerateCartaz.disabled = false;
cartazGenerateLoader.style.display = 'none';
if (cartazGenerateLoader) cartazGenerateLoader.style.display = 'none';
}
});
}
// --- EXPORTAR PNG EM ALTA RESOLUÇÃO ---
if (btnExportCartazPNG) {
btnExportCartazPNG.addEventListener('click', async () => {
try {
btnExportCartazPNG.disabled = true;
btnExportCartazPNG.textContent = '⏳ Gerando PNG...';
if (typeof html2canvas === 'undefined') {
throw new Error('Biblioteca html2canvas não disponível.');
}
const canvas = await html2canvas(cartazPrintableArea, {
scale: 3, // Alta resolução 300 DPI equivalente
useCORS: true,
logging: false,
backgroundColor: cartazBgColor.value || '#fff9eb'
});
const title = (cartazTituloInput.value || 'cartaz_pedagog').replace(/[^a-zA-Z0-9_-]/g, '_').toLowerCase();
const link = document.createElement('a');
link.download = `${title}.png`;
link.href = canvas.toDataURL('image/png');
document.body.appendChild(link);
link.click();
link.remove();
} catch (err) {
console.error('Erro ao exportar PNG:', err);
await showCustomAlert('Erro', 'Não foi possível gerar o PNG: ' + err.message);
} finally {
btnExportCartazPNG.disabled = false;
btnExportCartazPNG.textContent = '🖼️ Baixar PNG';
}
});
}
// --- EXPORTAR PDF IMPRIMÍVEL ---
if (btnExportCartazPDF) {
btnExportCartazPDF.addEventListener('click', async () => {
try {
btnExportCartazPDF.disabled = true;
btnExportCartazPDF.textContent = '⏳ Criando PDF...';
if (typeof html2canvas === 'undefined' || typeof window.jspdf === 'undefined') {
throw new Error('Bibliotecas de PDF necessárias não disponíveis.');
}
const orientacao = document.getElementById('cartazOrientacaoSelect')?.value === 'paisagem' ? 'l' : 'p';
const canvas = await html2canvas(cartazPrintableArea, {
scale: 3,
useCORS: true,
logging: false,
backgroundColor: cartazBgColor.value || '#fff9eb'
});
const imgData = canvas.toDataURL('image/jpeg', 0.95);
const { jsPDF } = window.jspdf;
const pdf = new jsPDF(orientacao, 'pt', 'a4');
const pdfWidth = orientacao === 'l' ? 842 : 595;
const pdfHeight = orientacao === 'l' ? 595 : 842;
pdf.addImage(imgData, 'JPEG', 0, 0, pdfWidth, pdfHeight);
const title = (cartazTituloInput.value || 'cartaz_pedagog').replace(/[^a-zA-Z0-9_-]/g, '_').toLowerCase();
pdf.save(`${title}.pdf`);
} catch (err) {
console.error('Erro ao exportar PDF:', err);
await showCustomAlert('Erro', 'Não foi possível gerar o PDF: ' + err.message);
} finally {
btnExportCartazPDF.disabled = false;
btnExportCartazPDF.textContent = '📄 Baixar PDF';
}
});
}
public/index.html
+105 -68
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>