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

Feature: Fabrica de Quadrinhos profissional com geracao paralela, modo apresentacao fullscreen, storyboard interativo, exportacao ZIP e adaptacao mobile

Browse Source
This commit is contained in:
admtracksteel
2026-08-31 11:05:03 +00:00
parent 665b9abe63
commit 36f72f56dc
3 changed files with 686 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+75 -20
View File
@@ -1400,9 +1400,10 @@
<!-- PERSONAGENS -->
<div class="settings-group">
<label style="color: var(--text-secondary); font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; display: flex; justify-content: space-between; align-items: center;">
<label style="color: var(--text-secondary); font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px;">
<span>5. Personagens da História</span>
<div style="display: flex; gap: 8px;">
<div style="display: flex; gap: 6px; flex-wrap: wrap;">
<button type="button" id="btnImportTurmaChars" class="btn-music-option" style="padding: 3px 8px; font-size: 0.72rem; border-color: #3b82f6; color: #60a5fa; background: rgba(59, 130, 246, 0.08); margin: 0;" title="Carregar crianças da turma atual como personagens">+ 🏫 Importar da Turma</button>
<button type="button" id="btnAddHumanChar" class="btn-music-option" style="padding: 3px 8px; font-size: 0.72rem; border-color: var(--brand-pink); color: var(--brand-pink); background: rgba(219, 39, 119, 0.05); margin: 0;">+ 🧒 Humano</button>
<button type="button" id="btnAddAnimalChar" class="btn-music-option" style="padding: 3px 8px; font-size: 0.72rem; border-color: var(--brand-pink); color: var(--brand-pink); background: rgba(219, 39, 119, 0.05); margin: 0;">+ 🐾 Animal</button>
</div>
@@ -1432,45 +1433,66 @@
<!-- BOTÃO DE AÇÃO -->
<button id="btnGenerateComics" style="width: 100%; padding: 12px; background: var(--brand-pink, #db2777); color: white; border: none; border-radius: 10px; font-weight: 700; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 4px 12px rgba(219, 39, 119, 0.3); transition: all 0.2s;">
<span>🎨 Criar Quadrinhos Pedagógicos</span>
<span>🎨 Criar Quadrinhos Pedagógicos (Geração Paralela ⚡)</span>
</button>
<!-- LOADING DE QUADRINHOS -->
<div id="comicsGenerateLoader" style="display: none; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 30px; background: var(--bg-secondary); border-radius: 12px; border: 1px dashed var(--border-light);">
<div class="media-spinner" style="border-top-color: var(--brand-pink, #db2777);"></div>
<p id="comicsLoaderText" style="color: var(--text-primary); font-weight: 600; font-size: 0.95rem; margin: 0; text-align: center;">Compondo a história pedagógica...</p>
<div style="width: 100%; max-width: 250px; height: 6px; background: var(--border-light); border-radius: 3px; overflow: hidden;">
<div id="comicsLoaderProgress" style="width: 0%; height: 100%; background: var(--brand-pink, #db2777); transition: width 0.4s ease;"></div>
<div style="width: 100%; max-width: 320px; height: 8px; background: var(--border-light); border-radius: 4px; overflow: hidden;">
<div id="comicsLoaderProgress" style="width: 0%; height: 100%; background: var(--brand-pink, #db2777); transition: width 0.3s ease;"></div>
</div>
<span id="comicsLoaderSubtext" style="font-size: 0.78rem; color: var(--text-muted);">Processando quadros em paralelo de alta performance...</span>
</div>
<!-- RESULTADOS DA HISTÓRIA -->
<div id="comicsResultArea" style="display: none; flex-direction: column; gap: 20px;">
<!-- RESULTADOS DA HISTÓRIA (STORYBOARD STUDIO) -->
<div id="comicsResultArea" style="display: none; flex-direction: column; gap: 18px;">
<h4 id="comicsResultTitle" style="font-family: 'Outfit', sans-serif; font-size: 1.15rem; color: var(--text-primary); margin: 0; text-align: center; font-weight: 700;">Título da História</h4>
<!-- BARRA DE CABEÇALHO DO STORYBOARD -->
<div style="display: flex; flex-direction: column; gap: 10px; background: var(--bg-secondary); padding: 14px 16px; border-radius: 10px; border: 1px solid var(--border-light);">
<div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;">
<h4 id="comicsResultTitle" style="font-family: 'Outfit', sans-serif; font-size: 1.2rem; color: var(--text-primary); margin: 0; font-weight: 700;">Título da História</h4>
<div style="display: flex; gap: 8px; flex-wrap: wrap;">
<button type="button" id="btnComicsPresentationMode" class="btn-music-option" style="border-color: #8b5cf6; color: #a78bfa; background: rgba(139, 92, 246, 0.1); font-weight: 600; display: flex; align-items: center; gap: 6px; padding: 6px 14px;">
<span>🎬 Apresentar em Tela Cheia</span>
</button>
<button type="button" id="btnExportComicsZIP" class="btn-music-option" style="border-color: #3b82f6; color: #60a5fa; background: rgba(59, 130, 246, 0.1); font-weight: 600; display: flex; align-items: center; gap: 6px; padding: 6px 14px;">
<span>📦 Baixar Todas as Imagens (ZIP)</span>
</button>
</div>
</div>
<div id="comicsResultMeta" style="font-size: 0.78rem; color: var(--text-muted); display: flex; gap: 14px; flex-wrap: wrap; border-top: 1px dashed var(--border-light); padding-top: 8px;">
<span>🤖 Criado por: <strong>PedagogIA</strong></span>
<span id="comicsMetaPanels">🖼️ 5 Quadros</span>
<span id="comicsMetaRatio">📐 16:9 HD</span>
<span>✨ Dica: Você pode editar o texto dos balões ou regenerar qualquer quadrinho individualmente abaixo!</span>
</div>
</div>
<!-- CONTÊINER DOS QUADRINHOS -->
<div id="comicsGridContainer" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px;">
<!-- Gerado dinamicamente: quadrinhos com as imagens e balões de fala correspondentes -->
<!-- CONTÊINER DOS QUADRINHOS EM STORYBOARD -->
<div id="comicsGridContainer" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px;">
<!-- Gerado dinamicamente: cards de quadrinhos interativos -->
</div>
<!-- OPÇÕES DE EXPORTAÇÃO -->
<!-- OPÇÕES DE EXPORTAÇÃO E VÍDEO -->
<div style="background: var(--bg-secondary); padding: 16px; border-radius: 12px; border: 1px solid var(--border-light); display: flex; flex-direction: column; gap: 14px;">
<h5 style="margin: 0; font-size: 0.9rem; font-weight: 700; text-transform: uppercase; color: var(--text-secondary); letter-spacing: 0.5px;">📥 Opções de Exportação</h5>
<h5 style="margin: 0; font-size: 0.9rem; font-weight: 700; text-transform: uppercase; color: var(--text-secondary); letter-spacing: 0.5px;">📥 Mais Formatos de Exportação</h5>
<!-- DOWNLOAD DE PDF -->
<div style="display: flex; flex-direction: column; gap: 6px;">
<span style="font-size: 0.8rem; font-weight: 600; color: var(--text-primary);">Salvar como Documento PDF:</span>
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;">
<button id="btnExportComicsPDFPortrait" class="btn-music-option" style="border-color: #10a37f; color: #10a37f; background: rgba(16, 163, 127, 0.05);">📄 PDF (1 por página - Retrato)</button>
<button id="btnExportComicsPDFLandscape" class="btn-music-option" style="border-color: #10a37f; color: #10a37f; background: rgba(16, 163, 127, 0.05);">📄 PDF (2 por página - Paisagem)</button>
<span style="font-size: 0.8rem; font-weight: 600; color: var(--text-primary);">Documento PDF para Impressão ou Registro Pedagógico:</span>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px;">
<button id="btnExportComicsPDFPortrait" class="btn-music-option" style="border-color: #10a37f; color: #10a37f; background: rgba(16, 163, 127, 0.05); font-weight: 600;">📄 PDF (1 por página - Retrato A4)</button>
<button id="btnExportComicsPDFLandscape" class="btn-music-option" style="border-color: #10a37f; color: #10a37f; background: rgba(16, 163, 127, 0.05); font-weight: 600;">📄 PDF (2 por página - Álbum Paisagem)</button>
</div>
</div>
<!-- APRESENTAÇÃO EM VÍDEO -->
<div style="display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--border-light); padding-top: 14px;">
<span style="font-size: 0.8rem; font-weight: 600; color: var(--text-primary);">Criar Apresentação de Vídeo Animada:</span>
<span style="font-size: 0.8rem; font-weight: 600; color: var(--text-primary);">Criar Apresentação de Vídeo Animada com Música:</span>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
<div class="settings-group" style="gap: 4px;">
@@ -1492,7 +1514,7 @@
</div>
<button id="btnCompileComicsVideo" style="padding: 10px; background: var(--brand-pink, #db2777); color: white; border: none; border-radius: 8px; font-weight: 600; font-size: 0.88rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 6px; transition: all 0.2s;">
<span>🎬 Gerar Apresentação de Vídeo (MP4)</span>
<span>🎬 Compilar Apresentação de Vídeo (MP4)</span>
</button>
<!-- Spinner do Vídeo -->
@@ -2036,7 +2058,40 @@
</div>
</div>
<!-- Bibliotecas externas para renderizar markdown e blocos de código -->
<!-- Modal: Apresentação em Tela Cheia dos Quadrinhos (Modo Leitura Infantil / Lousa / Mobile) -->
<div id="comicsPresentationModal" class="comics-presentation-modal" style="display: none;">
<div class="comics-pres-header">
<div style="display: flex; align-items: center; gap: 10px;">
<span style="font-size: 1.3rem;">📖</span>
<h3 id="comicsPresTitle" style="margin: 0; font-family: 'Outfit', sans-serif; font-size: 1.1rem; color: #fff;">História em Quadrinhos</h3>
</div>
<div style="display: flex; align-items: center; gap: 12px;">
<span id="comicsPresCounter" style="background: rgba(255,255,255,0.15); padding: 4px 12px; border-radius: 20px; font-size: 0.85rem; font-weight: 700; color: #fef08a;">1 / 5</span>
<button type="button" id="btnCloseComicsPresModal" style="background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: white; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; transition: all 0.2s;">✕</button>
</div>
</div>
<div class="comics-pres-stage">
<div class="comics-pres-card">
<img id="comicsPresImage" class="comics-pres-img" src="" alt="Quadrinho em Apresentação">
<div id="comicsPresCaption" class="comics-pres-caption">
Falas do quadrinho aparecerão aqui...
</div>
</div>
</div>
<div class="comics-pres-nav">
<button type="button" id="btnPresPrev" class="btn-pres-nav">
<span>⬅️ Anterior</span>
</button>
<button type="button" id="btnPresNext" class="btn-pres-nav" style="background: var(--brand-pink, #db2777); font-weight: 700;">
<span>Próximo ➡️</span>
</button>
</div>
</div>
<!-- Bibliotecas externas para renderizar markdown, PDFs e compactação ZIP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.1/marked.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>