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

Feature: Estúdio de Poesias profissional com dual-stage engine, analise de metricas literarias, guia fonetico, audio TTS narrado, player com equalizer e exportacao PDF/TXT

Browse Source
This commit is contained in:
admtracksteel
2026-08-31 11:21:33 +00:00
parent 88d7163b9f
commit 3931af93db
4 changed files with 1086 additions and 255 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+271 -63
View File
@@ -1404,84 +1404,292 @@
</div>
</div>
<!-- ========================================== -->
<!-- MODAL: ESTÚDIO DE POESIAS (PROFISSIONAL) -->
<!-- ========================================== -->
<div id="poesiaModal" class="settings-modal" style="display: none;">
<div class="settings-modal-content" style="max-width: 600px; width: 95%; max-height: 90vh; display: flex; flex-direction: column;">
<div class="settings-modal-header" style="background: var(--bg-secondary); border-bottom: 1px solid var(--border-light);">
<h3 style="display: flex; align-items: center; gap: 8px; font-family: 'Outfit', sans-serif;">📜 Estúdio de Poesia PedaGog</h3>
<div style="display: flex; gap: 10px;">
<button id="btnOpenPoesiaHistory" class="btn-save-settings" style="background: transparent; border: 1px solid var(--border-light); color: var(--text-primary); padding: 6px 12px; font-size: 0.8rem;">
🕒 Histórico
</button>
<button id="btnClosePoesiaModal" class="btn-close-modal" style="background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1.5rem;">&times;</button>
<div class="settings-modal-content" style="max-width: 1050px; width: 95%; max-height: 92vh; display: flex; flex-direction: column;">
<!-- Header -->
<div class="settings-modal-header" style="background: var(--bg-secondary); border-bottom: 1px solid var(--border-light); padding: 14px 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;">
<div style="display: flex; align-items: center; gap: 10px;">
<span style="font-size: 1.4rem;">📜</span>
<div>
<h3 style="margin: 0; font-family: 'Outfit', sans-serif; font-size: 1.15rem; color: var(--text-primary);">Estúdio de Poesias • PedagogIA</h3>
<span style="font-size: 0.75rem; color: var(--text-secondary);">Composição de poesias ritmadas, métrica literária, guia fonético e áudio recitado</span>
</div>
</div>
<div style="display: flex; gap: 8px; align-items: center;">
<button type="button" id="btnOpenPoesiaHistory" style="background: rgba(234, 179, 8, 0.12); border: 1px solid rgba(234, 179, 8, 0.3); color: #fbbf24; padding: 6px 12px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 600;">🕒 Histórico</button>
<button type="button" id="btnClosePoesiaModal" class="btn-close-modal" style="background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1.5rem; line-height: 1;">&times;</button>
</div>
</div>
<div class="settings-modal-body" style="padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; flex: 1;">
<!-- Body em 2 Colunas -->
<div class="settings-modal-body" style="padding: 20px; overflow-y: auto; display: flex; flex-direction: row; gap: 24px; flex: 1; flex-wrap: wrap;">
<div class="settings-group">
<label style="color: var(--text-secondary); font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">1. Faixa Etária (Idade da Criança)</label>
<select id="poesiaFaixaEtaria" class="obs-select" style="width: 100%; margin-top: 4px;">
<option value="Bebês (0 a 1 ano e 6 meses)">Bebês (0 a 1 ano e 6 meses)</option>
<option value="Crianças bem pequenas (1 ano e 7 meses a 3 anos e 11 meses)">Crianças bem pequenas (1 ano e 7 meses a 3 anos e 11 meses)</option>
<option value="Crianças pequenas (4 anos a 5 anos e 11 meses)" selected>Crianças pequenas (4 anos a 5 anos e 11 meses)</option>
<option value="Ensino Fundamental I (6 a 10 anos)">Ensino Fundamental I (6 a 10 anos)</option>
</select>
</div>
<div class="settings-group">
<label style="color: var(--text-secondary); font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">2. Quantidade de Estrofes</label>
<div class="music-option-grid" style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 4px;">
<button type="button" class="btn-music-option btn-poesia-estrofes" data-estrofes="2">2 Estrofes</button>
<button type="button" class="btn-music-option btn-poesia-estrofes active" data-estrofes="3">3 Estrofes</button>
<button type="button" class="btn-music-option btn-poesia-estrofes" data-estrofes="4">4 Estrofes</button>
<button type="button" class="btn-music-option btn-poesia-estrofes" data-estrofes="5">5 Estrofes</button>
</div>
</div>
<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. Tema da Poesia</label>
<textarea id="poesiaTemaInput" placeholder="Ex: Higiene pessoal, amizade na escola, os animais da fazenda..." class="obs-input" style="width: 100%; min-height: 80px; padding: 10px; resize: vertical; margin-top: 4px; line-height: 1.4;"></textarea>
</div>
<div style="display: flex; flex-direction: column; gap: 10px; margin-top: 8px;">
<button id="btnGeneratePoesia" style="width: 100%; padding: 12px; background: #eab308; color: #1e293b; 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(234, 179, 8, 0.3); transition: all 0.2s;">
<span>📜 Criar Poesia Personalizada</span>
</button>
<div id="poesiaGenerateLoader" style="display: none; align-items: center; justify-content: center; gap: 10px; color: var(--text-secondary); font-size: 0.9rem; padding: 10px; background: rgba(255, 255, 255, 0.02); border-radius: 8px;">
<div class="record-spinner" style="width: 20px; height: 20px; border-width: 2px;"></div>
<span>A IA está buscando inspiração e compondo sua poesia...</span>
</div>
</div>
<div id="poesiaResultArea" style="display: none; border-top: 1px solid var(--border-light); padding-top: 16px; flex-direction: column; gap: 14px;">
<h4 style="margin: 0; color: var(--text-primary); font-size: 1rem; display: flex; align-items: center; gap: 6px;">✨ Sua Poesia Está Pronta!</h4>
<!-- Lado Esquerdo: Parâmetros & Criação -->
<div id="poesiaLeftPanel" style="flex: 1; min-width: 320px; display: flex; flex-direction: column; gap: 14px;">
<div style="display: flex; flex-direction: column; gap: 8px;">
<div style="display: flex; justify-content: space-between; align-items: center;">
<label style="color: var(--text-secondary); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">Poesia Gerada</label>
<div style="display: flex; gap: 8px;">
<button id="btnCopyPoesia" style="background: none; border: 1px solid var(--border-light); color: var(--text-secondary); padding: 5px 10px; border-radius: 6px; font-size: 0.75rem; cursor: pointer; transition: all 0.2s;">📋 Copiar</button>
<button id="btnDownloadPoesiaPdf" style="background: none; border: 1px solid var(--border-light); color: var(--text-secondary); padding: 5px 10px; border-radius: 6px; font-size: 0.75rem; cursor: pointer; transition: all 0.2s;">💾 Baixar PDF</button>
<h4 style="margin: 0; color: var(--text-primary); border-bottom: 1px dashed var(--border-light); padding-bottom: 6px; font-size: 0.92rem;">✍️ 1. Inspiração & Tema Poético</h4>
<!-- TEMPLATES RÁPIDOS DE POESIA -->
<div class="settings-group">
<label style="color: var(--text-secondary); font-size: 0.75rem; font-weight: 600; text-transform: uppercase;">Modelos Temáticos (Templates)</label>
<select id="poesiaTemplateSelect" class="obs-select" style="width: 100%; margin-top: 4px; color: #eab308; font-weight: 600;">
<option value="">✨ Escolha um modelo temático...</option>
<option value="horta">🌱 Minha Horta e a Terra Fértil</option>
<option value="animais">🐾 Bichinhos da Fazenda e seus Sons</option>
<option value="familia">👨‍👩‍👧‍👦 O Abraço e o Afeto da Família</option>
<option value="higiene">🧼 Bolhas de Sabão e Banho Gostoso</option>
<option value="chuva">🌧️ Gotinhas de Chuva na Janela</option>
<option value="alfabeto">🔤 O Reino das Letras e Palavrinhas</option>
<option value="cores">🎨 As Cores Mágicas do Nosso Mundo</option>
</select>
</div>
<!-- TEMA / IDEIA CENTRAL -->
<div class="settings-group">
<label style="color: var(--text-secondary); font-size: 0.75rem; font-weight: 600; text-transform: uppercase;">Tema ou Ideia Central</label>
<textarea id="poesiaTemaInput" placeholder="Ex: Plantar sementinhas na horta da escola, regar as folhinhas e ver o tomatinho nascer..." class="obs-input" style="width: 100%; min-height: 60px; padding: 8px; margin-top: 4px; font-size: 0.85rem; resize: vertical;"></textarea>
</div>
<!-- TURMA & FAIXA ETÁRIA -->
<div style="display: flex; gap: 10px; flex-wrap: wrap;">
<div class="settings-group" style="flex: 1; min-width: 140px;">
<label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Vincular à Turma</label>
<select id="poesiaTurmaSelect" class="obs-select" style="width: 100%; margin-top: 4px;">
<option value="">-- Selecionar Turma --</option>
</select>
</div>
<div class="settings-group" style="flex: 1; min-width: 140px;">
<label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Público / Idade</label>
<select id="poesiaFaixaEtaria" class="obs-select" style="width: 100%; margin-top: 4px;">
<option value="Bebês (0 a 1 ano e 6 meses)">Bebês (0 a 1a6m)</option>
<option value="Crianças bem pequenas (1 ano e 7 meses a 3 anos e 11 meses)">Bem pequenas (1a7m a 3a11m)</option>
<option value="Crianças pequenas (4 anos a 5 anos e 11 meses)" selected>Crianças pequenas (4 a 5a11m)</option>
<option value="Ensino Fundamental I (6 a 10 anos)">Ensino Fundamental I</option>
</select>
</div>
</div>
<h4 style="margin: 0; color: var(--text-primary); border-bottom: 1px dashed var(--border-light); padding-bottom: 6px; margin-top: 4px; font-size: 0.92rem;">📐 2. Estrutura Poética & Estilo Camila</h4>
<!-- ESTRUTURA & ESTILO -->
<div style="display: flex; gap: 10px; flex-wrap: wrap;">
<div class="settings-group" style="flex: 1; min-width: 140px;">
<label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Estrutura Poética</label>
<select id="poesiaEstruturaSelect" class="obs-select" style="width: 100%; margin-top: 4px;">
<option value="Quadras (Rimas A-B-A-B)" selected>📜 Quadras (Rimas A-B-A-B)</option>
<option value="Redondilhas (7 sílabas poéticas)">🎶 Redondilhas (Versos de 7 Sílabas)</option>
<option value="Haiku Infantil (5-7-5 sílabas)">🌸 Haiku Infantil (5-7-5 Sílabas)</option>
<option value="Poema Livre & Cantado">⚡ Poema Livre & Cantado</option>
<option value="Soneto Infantil (2 quartetos + 2 tercetos)">🏛️ Soneto Infantil Clássico</option>
</select>
</div>
<div class="settings-group" style="flex: 1; min-width: 140px;">
<label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Estilo Camila</label>
<select id="poesiaEstiloSelect" class="obs-select" style="width: 100%; margin-top: 4px;">
<option value="Lúdico-cantado e sonoro" selected>🌟 Lúdico-cantado e Sonoro</option>
<option value="Narrativo-infantil com história">📖 Narrativo-infantil (Contação)</option>
<option value="Sensorial, suave e afetivo">💖 Sensorial, Suave & Afetivo</option>
<option value="Formal-pedagógico reflexivo">🎓 Formal-pedagógico (Escrita Guiada)</option>
</select>
</div>
</div>
<!-- ESTROFES & VOZ NARRADA -->
<div style="display: flex; gap: 10px; flex-wrap: wrap;">
<div class="settings-group" style="flex: 1; min-width: 140px;">
<label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Quantidade de Estrofes</label>
<div class="music-option-grid" style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 4px;">
<button type="button" class="btn-music-option btn-poesia-estrofes" data-estrofes="2">2</button>
<button type="button" class="btn-music-option btn-poesia-estrofes active" data-estrofes="3">3</button>
<button type="button" class="btn-music-option btn-poesia-estrofes" data-estrofes="4">4</button>
<button type="button" class="btn-music-option btn-poesia-estrofes" data-estrofes="5">5</button>
</div>
</div>
<div id="poesiaTextOutput" class="markdown-body" style="background: var(--bg-secondary); padding: 16px; border-radius: 10px; font-size: 1rem; line-height: 1.6; border: 1px solid var(--border-light); color: var(--text-primary); margin: 0; min-height: 150px;"></div>
<div class="settings-group" style="flex: 1; min-width: 140px;">
<label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Voz de Recitação</label>
<select id="poesiaVozSelect" class="obs-select" style="width: 100%; margin-top: 4px;">
<option value="mulher" selected>👩 Professora Camila (Acolhedora)</option>
<option value="homem">👨 Professor (Gentil & Firme)</option>
<option value="crianca">🧒 Criança (Lúdica & Espontânea)</option>
</select>
</div>
</div>
<!-- BOTÃO GERAR POESIA -->
<button type="button" id="btnGeneratePoesia" style="width: 100%; padding: 12px; background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%); color: #1e293b; border: none; border-radius: 10px; font-weight: 700; font-size: 0.95rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 4px 14px rgba(234, 179, 8, 0.3); transition: all 0.2s; margin-top: 6px;">
<span>📜 Compor Poesia & Análise Literária</span>
</button>
<div id="poesiaGenerateLoader" style="display: none; align-items: center; justify-content: center; gap: 10px; color: var(--text-secondary); font-size: 0.85rem; padding: 10px; background: rgba(255, 255, 255, 0.02); border-radius: 8px;">
<div class="media-spinner" style="width: 18px; height: 18px; border-width: 2px; border-top-color: #eab308;"></div>
<span id="poesiaLoaderText">Compondo versos, métrica e áudio recitado...</span>
</div>
</div>
<!-- Lado Direito: Análise Literária, Áudio & Conteúdo -->
<div id="poesiaRightPanel" style="flex: 1.3; min-width: 360px; display: flex; flex-direction: column; gap: 14px;">
<div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-light); padding-bottom: 6px;">
<h4 style="margin: 0; color: var(--text-primary); font-size: 0.95rem;">📖 Poema & Análise Literária</h4>
<div id="poesiaBnccBadge" style="display: none; font-size: 0.72rem; background: rgba(234, 179, 8, 0.15); color: #fbbf24; border: 1px solid rgba(234, 179, 8, 0.3); padding: 3px 8px; border-radius: 6px; font-weight: 600;">
BNCC: EI02EF01
</div>
</div>
<!-- CARD DE ANÁLISE LITERÁRIA (MÉTRICAS POÉTICAS) -->
<div id="poesiaMetricsBox" style="display: none; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-light); border-radius: 12px; padding: 12px 16px; flex-direction: column; gap: 10px;">
<div style="display: flex; justify-content: space-between; align-items: center;">
<span style="font-size: 0.75rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase;">📊 Análise Poética & Musicalidade</span>
<span id="poesiaEsquemaBadge" style="font-size: 0.72rem; background: rgba(255,255,255,0.06); padding: 2px 6px; border-radius: 4px; color: var(--text-secondary);">Esquema: A-B-A-B</span>
</div>
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;">
<!-- Rima -->
<div>
<div style="display: flex; justify-content: space-between; font-size: 0.72rem; margin-bottom: 3px;">
<span style="color: var(--text-primary);">Rima</span>
<span id="poesiaMetricRimaVal" style="color: #38bdf8; font-weight: bold;">85%</span>
</div>
<div style="background: rgba(255,255,255,0.08); height: 6px; border-radius: 3px; overflow: hidden;">
<div id="poesiaMetricRimaBar" style="width: 85%; height: 100%; background: #38bdf8; border-radius: 3px; transition: width 0.4s ease;"></div>
</div>
</div>
<!-- Ritmo -->
<div>
<div style="display: flex; justify-content: space-between; font-size: 0.72rem; margin-bottom: 3px;">
<span style="color: var(--text-primary);">Ritmo & Métrica</span>
<span id="poesiaMetricRitmoVal" style="color: #4ade80; font-weight: bold;">80%</span>
</div>
<div style="background: rgba(255,255,255,0.08); height: 6px; border-radius: 3px; overflow: hidden;">
<div id="poesiaMetricRitmoBar" style="width: 80%; height: 100%; background: #4ade80; border-radius: 3px; transition: width 0.4s ease;"></div>
</div>
</div>
<!-- Aliteração -->
<div>
<div style="display: flex; justify-content: space-between; font-size: 0.72rem; margin-bottom: 3px;">
<span style="color: var(--text-primary);">Aliteração & Sons</span>
<span id="poesiaMetricAliteracaoVal" style="color: #fb923c; font-weight: bold;">65%</span>
</div>
<div style="background: rgba(255,255,255,0.08); height: 6px; border-radius: 3px; overflow: hidden;">
<div id="poesiaMetricAliteracaoBar" style="width: 65%; height: 100%; background: #fb923c; border-radius: 3px; transition: width 0.4s ease;"></div>
</div>
</div>
<!-- Musicalidade -->
<div>
<div style="display: flex; justify-content: space-between; font-size: 0.72rem; margin-bottom: 3px;">
<span style="color: var(--text-primary);">Musicalidade</span>
<span id="poesiaMetricMusicalidadeVal" style="color: #f472b6; font-weight: bold;">90%</span>
</div>
<div style="background: rgba(255,255,255,0.08); height: 6px; border-radius: 3px; overflow: hidden;">
<div id="poesiaMetricMusicalidadeBar" style="width: 90%; height: 100%; background: #f472b6; border-radius: 3px; transition: width 0.4s ease;"></div>
</div>
</div>
</div>
<div id="poesiaMetricaDesc" style="font-size: 0.75rem; color: var(--text-secondary); line-height: 1.4; border-top: 1px dashed var(--border-light); padding-top: 6px;"></div>
</div>
<!-- ÁREA DE REPRODUÇÃO DE ÁUDIO RECITADO -->
<div id="poesiaAudioPlayerBox" style="display: none; background: linear-gradient(135deg, rgba(234,179,8,0.12), rgba(245,158,11,0.08)); border: 1px solid rgba(234,179,8,0.3); border-radius: 12px; padding: 14px; flex-direction: column; gap: 10px;">
<div style="display: flex; justify-content: space-between; align-items: center;">
<div style="display: flex; align-items: center; gap: 8px;">
<span style="font-size: 1.2rem;">🎙️</span>
<div>
<div style="font-size: 0.85rem; font-weight: 700; color: var(--text-primary);" id="poesiaPlayerTitle">Recitação por PedagogIA</div>
<div style="font-size: 0.72rem; color: var(--text-secondary);">Leitura Poética Narrada • Formato MP3</div>
</div>
</div>
<div style="display: flex; gap: 6px; align-items: center;">
<a id="btnDownloadPoesiaAudio" href="#" download="poesia_pedagogica.mp3" style="background: #eab308; color: #1e293b; border: none; padding: 5px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 700; text-decoration: none; display: flex; align-items: center; gap: 4px;">
📥 Baixar Áudio
</a>
</div>
</div>
<!-- Waveform / Equalizer Animado -->
<div id="poesiaWaveformVisualizer" style="display: flex; align-items: center; justify-content: center; gap: 3px; height: 28px; padding: 4px; background: rgba(0,0,0,0.15); border-radius: 6px;">
<div class="wave-bar wave-bar-poesia" style="width: 4px; height: 30%; background: #eab308; border-radius: 2px;"></div>
<div class="wave-bar wave-bar-poesia" style="width: 4px; height: 60%; background: #eab308; border-radius: 2px;"></div>
<div class="wave-bar wave-bar-poesia" style="width: 4px; height: 90%; background: #eab308; border-radius: 2px;"></div>
<div class="wave-bar wave-bar-poesia" style="width: 4px; height: 45%; background: #eab308; border-radius: 2px;"></div>
<div class="wave-bar wave-bar-poesia" style="width: 4px; height: 75%; background: #eab308; border-radius: 2px;"></div>
<div class="wave-bar wave-bar-poesia" style="width: 4px; height: 35%; background: #eab308; border-radius: 2px;"></div>
<div class="wave-bar wave-bar-poesia" style="width: 4px; height: 85%; background: #eab308; border-radius: 2px;"></div>
<div class="wave-bar wave-bar-poesia" style="width: 4px; height: 50%; background: #eab308; border-radius: 2px;"></div>
<div class="wave-bar wave-bar-poesia" style="width: 4px; height: 95%; background: #eab308; border-radius: 2px;"></div>
<div class="wave-bar wave-bar-poesia" style="width: 4px; height: 40%; background: #eab308; border-radius: 2px;"></div>
</div>
<audio id="poesiaAudioPlayer" controls style="width: 100%; margin-top: 2px;"></audio>
</div>
<!-- ABAS DE VISUALIZAÇÃO -->
<div id="poesiaContentTabs" style="display: none; gap: 6px; border-bottom: 1px solid var(--border-light); padding-bottom: 8px;">
<button type="button" id="btnTabPoesiaOriginal" class="tab-btn active" style="font-size: 0.78rem; padding: 6px 12px; background: rgba(234,179,8,0.15); border: none; cursor: pointer; color: #fbbf24; border-radius: 6px; font-weight: bold;">📜 Poema Original</button>
<button type="button" id="btnTabPoesiaFonetica" class="tab-btn" style="font-size: 0.78rem; padding: 6px 12px; background: transparent; border: none; cursor: pointer; color: var(--text-secondary); border-radius: 6px;">🗣️ Guia Fonético / Leitura</button>
<button type="button" id="btnTabPoesiaPedagogica" class="tab-btn" style="font-size: 0.78rem; padding: 6px 12px; background: transparent; border: none; cursor: pointer; color: var(--text-secondary); border-radius: 6px;">💡 Vivência & BNCC</button>
</div>
<!-- ÁREA DO CONTEÚDO POÉTICO -->
<div id="poesiaDisplayArea" style="display: flex; flex-direction: column; gap: 12px; flex: 1;">
<div id="poesiaPlaceholderText" style="text-align: center; padding: 40px 20px; color: var(--text-secondary); background: rgba(255,255,255,0.02); border: 1px dashed var(--border-light); border-radius: 10px;">
<span style="font-size: 2.5rem; display: block; margin-bottom: 10px;">📜</span>
<strong style="color: var(--text-primary); font-size: 0.95rem;">Pronto para transformar sua ideia em poesia?</strong>
<p style="font-size: 0.82rem; margin-top: 6px; opacity: 0.8;">Escolha um modelo ou digite o tema ao lado e clique em "Compor Poesia" para gerar a análise literária, guia fonético e áudio recitado.</p>
</div>
<!-- CONTAINER DO CONTEÚDO ATIVO -->
<div id="poesiaActiveBox" style="display: none; background: rgba(255,255,255,0.03); border: 1px solid var(--border-light); border-radius: 12px; padding: 16px; flex-direction: column; gap: 12px;">
<div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dashed var(--border-light); padding-bottom: 8px;">
<div>
<h4 id="poesiaActiveTitle" style="margin: 0; color: #eab308; font-size: 1.05rem; font-family: 'Fredoka', sans-serif;">Título da Poesia</h4>
<span id="poesiaActiveSubtitle" style="font-size: 0.72rem; color: var(--text-secondary);">Quadras • Rimas A-B-A-B</span>
</div>
<div style="display: flex; gap: 6px;">
<button type="button" id="btnCopyActivePoesia" style="background: transparent; border: 1px solid var(--border-light); color: var(--text-secondary); padding: 4px 8px; border-radius: 6px; font-size: 0.72rem; cursor: pointer;" title="Copiar poema">📋 Copiar</button>
<button type="button" id="btnDownloadActivePoesiaTxt" style="background: transparent; border: 1px solid var(--border-light); color: var(--text-secondary); padding: 4px 8px; border-radius: 6px; font-size: 0.72rem; cursor: pointer;" title="Baixar TXT">💾 TXT</button>
<button type="button" id="btnSendPoesiaToMusic" style="background: rgba(168,85,247,0.15); border: 1px solid rgba(168,85,247,0.3); color: #c084fc; padding: 4px 8px; border-radius: 6px; font-size: 0.72rem; cursor: pointer; font-weight: 600;" title="Enviar para Musicando Ideias">🎵 Musicar</button>
<button type="button" id="btnExportActivePoesiaPdf" style="background: #eab308; color: #1e293b; border: none; padding: 4px 10px; border-radius: 6px; font-size: 0.72rem; font-weight: 700; cursor: pointer;" title="Salvar PDF formatado">📄 PDF</button>
</div>
</div>
<!-- Texto do Poema ou Guia Fonético -->
<div id="poesiaActiveContent" style="font-family: 'Fredoka', 'Outfit', sans-serif; font-size: 1.05rem; line-height: 1.7; color: var(--text-primary); white-space: pre-wrap; background: rgba(0,0,0,0.08); padding: 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.05); max-height: 280px; overflow-y: auto;"></div>
<!-- Dica Pedagógica -->
<div id="poesiaPedagogicalTipBox" style="background: rgba(234, 179, 8, 0.08); border: 1px solid rgba(234, 179, 8, 0.2); border-radius: 8px; padding: 10px 14px; font-size: 0.8rem; color: #fde047; line-height: 1.4;">
💡 <strong>Vivência & Roda de Conversa:</strong> <span id="poesiaPedagogicalTipText">Estimule as crianças a recitarem as rimas finais com palmas.</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal: Histórico de Poesias -->
<div id="poesiaHistoryModal" class="settings-modal" style="display: none; z-index: 1002;">
<div class="settings-modal-content" style="max-width: 600px; width: 95%; max-height: 80vh; display: flex; flex-direction: column;">
<div class="settings-modal-header" style="background: var(--bg-secondary); border-bottom: 1px solid var(--border-light);">
<h3 style="display: flex; align-items: center; gap: 8px; font-family: 'Outfit', sans-serif;">🕒 Histórico de Poesias</h3>
<button id="btnClosePoesiaHistory" class="btn-close-modal" style="background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1.5rem;">&times;</button>
</div>
<div class="settings-modal-body" style="padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; flex: 1;">
<div id="poesiaHistoryList" style="display: flex; flex-direction: column; gap: 10px;">
<p style="color: var(--text-secondary); font-size: 0.9rem; text-align: center; margin-top: 20px;">Carregando histórico...</p>
</div>
<div id="poesiaHistoryModal" class="settings-modal" style="display: none; z-index: 10001;">
<div class="settings-modal-content" style="max-width: 540px; width: 95%; max-height: 80vh; display: flex; flex-direction: column;">
<div class="settings-modal-header" style="background: var(--bg-secondary); border-bottom: 1px solid var(--border-light); padding: 14px 20px; display: flex; justify-content: space-between; align-items: center;">
<h3 style="margin: 0; display: flex; align-items: center; gap: 8px; font-family: 'Outfit', sans-serif; font-size: 1.1rem; color: #fbbf24;">🕒 Histórico de Poesias Geradas</h3>
<button type="button" id="btnClosePoesiaHistory" class="btn-close-modal" style="background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1.5rem; line-height: 1;">&times;</button>
</div>
<div id="poesiaHistoryList" style="padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; flex: 1;"></div>
</div>
</div>