diff --git a/public/app.js b/public/app.js index 60b62f6..d569ec6 100644 --- a/public/app.js +++ b/public/app.js @@ -3775,7 +3775,7 @@ const initApp = () => { comicsResultTitle.textContent = project.titulo || 'História em Quadrinhos'; comicsGridContainer.innerHTML = ''; - generatedPanelsData.forEach(panel => { + generatedPanelsData.forEach((panel, index) => { const panelCard = document.createElement('div'); panelCard.className = 'comic-panel-card'; @@ -3793,21 +3793,27 @@ const initApp = () => { badge.textContent = panel.panel_number; imgContainer.appendChild(badge); - if (selectedComicsBubbles && panel.dialogue) { - const bubble = document.createElement('div'); - bubble.className = 'comic-speech-bubble'; - bubble.textContent = panel.dialogue; - imgContainer.appendChild(bubble); - } - panelCard.appendChild(imgContainer); - if (panel.dialogue) { - const caption = document.createElement('div'); - caption.className = 'comic-caption-text'; - caption.textContent = panel.dialogue; - panelCard.appendChild(caption); - } + const caption = document.createElement('div'); + caption.className = 'comic-caption-text'; + caption.style.cssText = 'padding: 10px 14px; background: var(--bg-primary); border-top: 1px solid var(--border-light);'; + + const textarea = document.createElement('textarea'); + textarea.className = 'comic-caption-input'; + textarea.value = panel.dialogue || ''; + textarea.placeholder = 'Digite a fala ou legenda do quadrinho...'; + textarea.style.cssText = 'width: 100%; border: 1px solid var(--border-light); background: var(--bg-secondary); color: var(--text-primary); border-radius: 6px; padding: 8px; font-family: inherit; font-size: 0.85rem; resize: vertical; box-sizing: border-box; min-height: 50px;'; + + textarea.addEventListener('input', (e) => { + panel.dialogue = e.target.value; + if (generatedPanelsData[index]) { + generatedPanelsData[index].dialogue = e.target.value; + } + }); + + caption.appendChild(textarea); + panelCard.appendChild(caption); comicsGridContainer.appendChild(panelCard); }); @@ -4093,7 +4099,7 @@ const initApp = () => { comicsResultTitle.textContent = scriptData.title || comicsResultTitle.textContent || 'Fábrica de Quadrinhos Camila'; comicsGridContainer.innerHTML = ''; - generatedPanelsData.forEach(panel => { + generatedPanelsData.forEach((panel, index) => { const panelCard = document.createElement('div'); panelCard.className = 'comic-panel-card'; @@ -4112,23 +4118,27 @@ const initApp = () => { badge.textContent = panel.panel_number; imgContainer.appendChild(badge); - // Balão de fala absoluto por cima se habilitado e houver diálogo - if (selectedComicsBubbles && panel.dialogue) { - const bubble = document.createElement('div'); - bubble.className = 'comic-speech-bubble'; - bubble.textContent = panel.dialogue; - imgContainer.appendChild(bubble); - } - panelCard.appendChild(imgContainer); - // Legenda do texto abaixo - if (panel.dialogue) { - const caption = document.createElement('div'); - caption.className = 'comic-caption-text'; - caption.textContent = panel.dialogue; - panelCard.appendChild(caption); - } + const caption = document.createElement('div'); + caption.className = 'comic-caption-text'; + caption.style.cssText = 'padding: 10px 14px; background: var(--bg-primary); border-top: 1px solid var(--border-light);'; + + const textarea = document.createElement('textarea'); + textarea.className = 'comic-caption-input'; + textarea.value = panel.dialogue || ''; + textarea.placeholder = 'Digite a fala ou legenda do quadrinho...'; + textarea.style.cssText = 'width: 100%; border: 1px solid var(--border-light); background: var(--bg-secondary); color: var(--text-primary); border-radius: 6px; padding: 8px; font-family: inherit; font-size: 0.85rem; resize: vertical; box-sizing: border-box; min-height: 50px;'; + + textarea.addEventListener('input', (e) => { + panel.dialogue = e.target.value; + if (generatedPanelsData[index]) { + generatedPanelsData[index].dialogue = e.target.value; + } + }); + + caption.appendChild(textarea); + panelCard.appendChild(caption); comicsGridContainer.appendChild(panelCard); }); diff --git a/public/index.html b/public/index.html index 8c24b83..cd43692 100644 --- a/public/index.html +++ b/public/index.html @@ -798,9 +798,9 @@