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

Adiciona configurações de tamanho e layout em formato de cards para cartazes

Browse Source
This commit is contained in:
admtracksteel
2026-06-07 15:26:11 +00:00
parent 00bd9ecace
commit 9bc47ed258
3 changed files with 76 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app.js
+45 -11
View File
@@ -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'
? `<div style="width: 100%; margin-bottom: 20px; border-radius: 8px; overflow: hidden; max-height: 350px; border: 2px solid rgba(0,0,0,0.1);"><img src="${cartazPreviewImage.src}" style="width: 100%; height: 100%; object-fit: cover;"></div>`
? `<div style="width: 100%; margin-bottom: 20px; border-radius: 8px; overflow: hidden; max-height: 400px; border: 2px solid rgba(0,0,0,0.1);"><img src="${cartazPreviewImage.src}" style="width: 100%; height: 100%; object-fit: cover;"></div>`
: '';
const printWindow = window.open('', '_blank');
@@ -7066,10 +7076,14 @@ document.addEventListener('DOMContentLoaded', () => {
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&family=Caveat:wght@400;700&family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Outfit:wght@400;600;700&display=swap" rel="stylesheet">
<style>
@page {
size: ${tamanho} ${orientacao === 'paisagem' ? 'landscape' : 'portrait'};
margin: 10mm;
}
body {
font-family: ${font};
margin: 0;
padding: 40px;
padding: 20px;
background-color: #f7fafc;
display: flex;
justify-content: center;
@@ -7079,10 +7093,10 @@ document.addEventListener('DOMContentLoaded', () => {
.cartaz-frame {
background-color: ${bg};
color: ${text};
padding: 50px;
padding: 40px;
border-radius: 16px;
width: 100%;
max-width: 800px;
max-width: ${orientacao === 'paisagem' ? '1200px' : '800px'};
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
box-sizing: border-box;
border: ${border === 'none' ? 'none' : `${border} ${text}`};
@@ -7090,14 +7104,26 @@ document.addEventListener('DOMContentLoaded', () => {
h1 {
text-align: center;
margin-top: 0;
font-size: 3rem;
font-size: 3.5rem;
border-bottom: 3px solid ${text};
padding-bottom: 16px;
margin-bottom: 30px;
}
.content-area {
font-size: 1.4rem;
line-height: 1.8;
font-size: 1.5rem;
line-height: 1.6;
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}
/* Suporte para cards na content-area */
.content-area > div, .content-area > p, .content-area > ul {
background: rgba(255, 255, 255, 0.3);
padding: 20px;
border-radius: 12px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
width: 100%;
}
ul {
margin-left: 20px;
@@ -7106,8 +7132,16 @@ document.addEventListener('DOMContentLoaded', () => {
margin-bottom: 12px;
}
@media print {
body { background: transparent; padding: 0; }
.cartaz-frame { box-shadow: none; border-radius: 0; max-width: 100%; width: 100%; height: 100%; padding: 30px; }
body { background: transparent; padding: 0; display: block; }
.cartaz-frame {
box-shadow: none;
border-radius: 0;
max-width: 100%;
width: 100%;
height: auto;
min-height: 100%;
padding: 30px;
}
button { display: none; }
}
</style>