diff --git a/public/app.js b/public/app.js index 8dbe2a0..185cbf5 100644 --- a/public/app.js +++ b/public/app.js @@ -6998,7 +6998,51 @@ document.addEventListener('DOMContentLoaded', () => { cartazPrintableArea.style.backgroundColor = bg; cartazPrintableArea.style.color = text; cartazPrintableArea.style.fontFamily = font; - cartazPrintableArea.style.maxWidth = orientacao === 'paisagem' ? '800px' : '500px'; + + if (orientacao === 'paisagem') { + cartazPrintableArea.style.maxWidth = '800px'; + cartazPrintableArea.style.aspectRatio = '1.414 / 1'; + cartazPrintableArea.style.height = 'auto'; + 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 { + cartazPrintableArea.style.maxWidth = '500px'; + cartazPrintableArea.style.aspectRatio = '1 / 1.414'; + cartazPrintableArea.style.height = 'auto'; + 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; @@ -7124,7 +7168,7 @@ document.addEventListener('DOMContentLoaded', () => { const orientacao = document.getElementById('cartazOrientacaoSelect') ? document.getElementById('cartazOrientacaoSelect').value : 'retrato'; const imgContainerHtml = cartazPreviewImageContainer.style.display === 'block' - ? `
` + ? `
` : ''; const printWindow = window.open('', '_blank'); @@ -7157,9 +7201,12 @@ document.addEventListener('DOMContentLoaded', () => { border-radius: 16px; width: 100%; max-width: ${orientacao === 'paisagem' ? '1200px' : '800px'}; + aspect-ratio: ${orientacao === 'paisagem' ? '1.414 / 1' : '1 / 1.414'}; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); box-sizing: border-box; border: ${border === 'none' ? 'none' : `${border} ${text}`}; + display: flex; + flex-direction: column; } h1 { text-align: center; @@ -7173,17 +7220,21 @@ document.addEventListener('DOMContentLoaded', () => { font-size: 1.5rem; line-height: 1.6; display: flex; + flex-direction: ${orientacao === 'paisagem' ? 'row' : 'column'}; flex-wrap: wrap; gap: 20px; justify-content: center; } /* Suporte para cards na content-area */ .content-area > div, .content-area > p, .content-area > ul { + box-sizing: border-box; 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%; + width: ${orientacao === 'paisagem' ? 'calc(50% - 20px)' : '100%'}; + flex: ${orientacao === 'paisagem' ? '1 1 calc(50% - 20px)' : '0 0 auto'}; + margin: 0; } ul { margin-left: 20px; diff --git a/public/index.html b/public/index.html index 4545571..86910ab 100644 --- a/public/index.html +++ b/public/index.html @@ -1868,12 +1868,12 @@

Título do Cartaz

-