diff --git a/public/app.js b/public/app.js index 3c2e169..d3609ec 100644 --- a/public/app.js +++ b/public/app.js @@ -6933,10 +6933,12 @@ document.addEventListener('DOMContentLoaded', () => { const font = cartazFontSelect.value; const border = cartazBorderSelect.value; const title = cartazTituloInput.value.trim() || 'Título do Cartaz'; + const orientacao = document.getElementById('cartazOrientacaoSelect') ? document.getElementById('cartazOrientacaoSelect').value : 'retrato'; cartazPrintableArea.style.backgroundColor = bg; cartazPrintableArea.style.color = text; cartazPrintableArea.style.fontFamily = font; + cartazPrintableArea.style.maxWidth = orientacao === 'paisagem' ? '800px' : '500px'; cartazPreviewTitle.textContent = title; cartazPreviewTitle.style.borderColor = text; @@ -6947,8 +6949,9 @@ document.addEventListener('DOMContentLoaded', () => { } } - [cartazBgColor, cartazTextColor, cartazFontSelect, cartazBorderSelect, cartazTituloInput].forEach(elem => { + [cartazBgColor, cartazTextColor, cartazFontSelect, cartazBorderSelect, cartazTituloInput, document.getElementById('cartazOrientacaoSelect')].forEach(elem => { if (elem) elem.addEventListener('input', updateLivePreview); + if (elem && elem.tagName === 'SELECT') elem.addEventListener('change', updateLivePreview); }); // Preset Palettes @@ -6989,6 +6992,8 @@ document.addEventListener('DOMContentLoaded', () => { 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'; if (!titulo || !tema) { showToast('Por favor, defina o Título e o Tema do Cartaz.', 'error'); @@ -7011,7 +7016,9 @@ document.addEventListener('DOMContentLoaded', () => { corFundo: cartazBgColor.value, corTexto: cartazTextColor.value, layout, - promptImagem + promptImagem, + tamanho, + orientacao }) }); @@ -7053,8 +7060,11 @@ document.addEventListener('DOMContentLoaded', () => { const text = cartazTextColor.value; const font = cartazFontSelect.value; const border = cartazBorderSelect.value; + const tamanho = document.getElementById('cartazTamanhoSelect') ? document.getElementById('cartazTamanhoSelect').value : 'A4'; + const orientacao = document.getElementById('cartazOrientacaoSelect') ? document.getElementById('cartazOrientacaoSelect').value : 'retrato'; + const imgContainerHtml = cartazPreviewImageContainer.style.display === 'block' - ? `
` + ? `
` : ''; const printWindow = window.open('', '_blank'); @@ -7066,10 +7076,14 @@ document.addEventListener('DOMContentLoaded', () => { diff --git a/public/index.html b/public/index.html index a0a0ea5..6662005 100644 --- a/public/index.html +++ b/public/index.html @@ -1733,6 +1733,25 @@ +
+
+ + +
+
+ + +
+
+

2. Estilo e Cores

diff --git a/server.js b/server.js index fffc1b1..0381364 100644 --- a/server.js +++ b/server.js @@ -1377,7 +1377,7 @@ app.delete('/api/poesias/:id', requireAuth, async (req, res) => { // ROTAS DO CRIAR CARTAZES // ============================================================ app.post('/api/cartazes/generate', requireAuth, async (req, res) => { - const { titulo, tema, corFundo, corTexto, layout, promptImagem } = req.body; + const { titulo, tema, corFundo, corTexto, layout, promptImagem, tamanho, orientacao } = req.body; const usuarioId = req.user?.id || '00000000-0000-0000-0000-000000000000'; if (!titulo || !tema || !layout) { @@ -1396,17 +1396,19 @@ Detalhes do Cartaz: - Título: "${titulo}" - Tema / Foco Pedagógico: "${tema}" - Layout Selecionado: "${layout}" (Opções: regras, mural, calendario, livre) +- Tamanho: "${tamanho || 'A4'}" +- Orientação: "${orientacao === 'paisagem' ? 'Paisagem/Horizontal' : 'Retrato/Vertical'}" -Por favor, gere o CONTEÚDO textual estruturado do cartaz. -REGRAS: -- Deve ser acolhedor, lúdico e muito bem estruturado. +Por favor, gere o CONTEÚDO textual e estrutural do cartaz em HTML. +REGRAS FUNDAMENTAIS E ESTÉTICAS: +- Distribua a informação em CARDS (pequenos cartões ou blocos curtos) bem espaçados, parecidos com pôsteres infantis modernos, onde o texto NÃO ocupa uma folha corrida. +- Os textos devem ser extremamente curtos, visuais e fáceis de ler. - Use emojis apropriados para crianças. -- Se for layout "regras", crie uma lista de combinados da sala (max 5) de forma positiva (ex: "Cuidar dos nossos brinquedos" ao invés de "Não quebrar os brinquedos"). -- Se for "calendario", estruture áreas para o dia da semana, ajudante do dia e tempo (ensolarado, chuvoso). -- Se for "mural", crie seções de recados e novidades da semana. -- Se for "livre", crie um texto poético ou explicativo baseado no tema. -- Mantenha os textos curtos, visuais e fáceis de ler para crianças ou pais. -- Retorne apenas o conteúdo em formato HTML simples (use tags como

,

,