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

Modifica a exibição de diálogos para caixa editável embaixo dos quadrinhos, remove balões internos e atualiza prompts

Browse Source
This commit is contained in:
admtracksteel
2026-06-03 19:59:40 +00:00
parent 133bf185e9
commit b3191fda47
3 changed files with 45 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app.js
+40 -30
View File
@@ -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);
});
public/index.html
+2 -2
View File
@@ -798,9 +798,9 @@
<!-- BALÕES DE FALAS -->
<div class="settings-group">
<label style="color: var(--text-secondary); font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">3. Falas/Diálogos</label>
<label style="color: var(--text-secondary); font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">3. Falas / Legendas</label>
<div class="music-option-grid" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 4px;">
<button type="button" class="btn-music-option btn-comics-bubbles active" data-bubbles="true">Com Balões</button>
<button type="button" class="btn-music-option btn-comics-bubbles active" data-bubbles="true">Com Falas</button>
<button type="button" class="btn-music-option btn-comics-bubbles" data-bubbles="false">Sem Texto</button>
</div>
</div>