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

Feature: Musicando Ideias profissional com gerador de 3 versoes, sintese de audio MiniMax music-2.0, player com loop/equalizer, mapeamento BNCC e exportacao PDF/TXT/MP3

Browse Source
This commit is contained in:
admtracksteel
2026-08-31 11:17:02 +00:00
parent 1ef002ff1a
commit 88d7163b9f
4 changed files with 1016 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+228 -61
View File
@@ -958,85 +958,252 @@
<!-- Modal: Estúdio de Poesia -->
<!-- ========================================== -->
<!-- MODAL: MUSICANDO IDEIAS -->
<!-- MODAL: MUSICANDO IDEIAS (ESTÚDIO PROFISSIONAL) -->
<!-- ========================================== -->
<div id="musicaModal" 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;">🎵 Musicando Ideias PedaGog</h3>
<button id="btnCloseMusicaModal" 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-content" style="max-width: 1050px; width: 95%; max-height: 92vh; display: flex; flex-direction: column;">
<div style="padding: 12px 20px; display: flex; justify-content: flex-end; border-bottom: 1px solid var(--border-light);">
<button id="btnOpenMusicaHistory" style="background: transparent; border: 1px solid var(--border-light); color: var(--text-primary); padding: 6px 12px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; gap: 6px; font-size: 0.85rem;">🕒 Ver Histórico</button>
<!-- Modal 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);">Musicando Ideias • Estúdio PedagogIA</h3>
<span style="font-size: 0.75rem; color: var(--text-secondary);">Composição de cantigas personalizadas, 3 versões pedagógicas e áudio cantado</span>
</div>
</div>
<div style="display: flex; gap: 8px; align-items: center;">
<button type="button" id="btnOpenMusicaHistory" style="background: rgba(168, 85, 247, 0.1); border: 1px solid rgba(168, 85, 247, 0.3); color: #c084fc; 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="btnCloseMusicaModal" 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;">
<!-- Modal Body com 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="musicaFaixaEtaria" 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>
<!-- Lado Esquerdo: Parâmetros e Ideia -->
<div id="musicaLeftPanel" style="flex: 1; min-width: 320px; display: flex; flex-direction: column; gap: 14px;">
<h4 style="margin: 0; color: var(--text-primary); border-bottom: 1px dashed var(--border-light); padding-bottom: 6px; font-size: 0.92rem;">📝 1. Descrição da Ideia Musical</h4>
<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. Ritmo Musical</label>
<select id="musicaRitmo" class="obs-select" style="width: 100%; margin-top: 4px;">
<option value="Cantiga de Roda">Cantiga de Roda</option>
<option value="Pop Infantil">Pop Infantil</option>
<option value="Samba/Pagode">Samba/Pagode</option>
<option value="Forró">Forró</option>
<option value="Rock">Rock</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;">3. 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-musica-estrofes" data-estrofes="2">2 Estrofes</button>
<button type="button" class="btn-music-option btn-musica-estrofes active" data-estrofes="3">3 Estrofes</button>
<button type="button" class="btn-music-option btn-musica-estrofes" data-estrofes="4">4 Estrofes</button>
<button type="button" class="btn-music-option btn-musica-estrofes" data-estrofes="5">5 Estrofes</button>
<!-- TEMPLATES RÁPIDOS -->
<div class="settings-group">
<label style="color: var(--text-secondary); font-size: 0.75rem; font-weight: 600; text-transform: uppercase;">Modelos de Ideias (Templates)</label>
<select id="musicaTemplateSelect" class="obs-select" style="width: 100%; margin-top: 4px; color: #a855f7; font-weight: 600;">
<option value="">✨ Escolha um modelo temático...</option>
<option value="horta">🌱 Horta Escolar e Alimentação Consciente</option>
<option value="familia">👨‍👩‍👧‍👦 Dia da Família e Vínculos de Afeto</option>
<option value="higiene">🧼 Higiene das Mãos e Autocuidado</option>
<option value="mindlab">🧩 Jogos, Cooperação e Raciocínio (Mind Lab)</option>
<option value="verao">🌞 Projeto de Verão, Sol e Natureza</option>
<option value="alfabeto">🔤 Brincando com Rimas, Letras e Sons</option>
<option value="emocoes">💖 Roda dos Sentimentos e Acolhimento</option>
</select>
</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;">4. Tema da Música</label>
<input type="text" id="musicaTemaInput" placeholder="Ex: amizade na escola, lavar as mãos, alfabeto..." class="obs-input" style="width: 100%; margin-top: 4px; padding: 10px;">
</div>
<button type="button" id="btnGenerateMusica" style="width: 100%; padding: 12px; background: #a855f7; 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(168, 85, 247, 0.3); transition: all 0.2s;">🎵 Compor Música Pedagógica</button>
<div id="musicaGenerateLoader" style="display: none; align-items: center; justify-content: center; gap: 10px; margin-top: 15px;">
<div class="spinner"></div>
<span style="color: var(--text-secondary); font-size: 0.9rem;">Compondo a letra...</span>
</div>
<div id="musicaResultArea" style="display: none; flex-direction: column; gap: 12px; margin-top: 20px;">
<div style="background: rgba(16, 185, 129, 0.05); border: 1px solid rgba(16, 185, 129, 0.2); padding: 15px; border-radius: 8px;">
<h4 style="color: var(--brand-green); margin-top: 0; margin-bottom: 10px;">Letra Gerada:</h4>
<div id="musicaTextOutput" style="font-size: 0.95rem; line-height: 1.6; white-space: pre-wrap; color: var(--text-primary);"></div>
<!-- TEMA / DESCRIÇÃO -->
<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="musicaTemaInput" placeholder="Ex: Plantar sementinhas na horta da escola, regar com carinho e colher juntos..." class="obs-input" style="width: 100%; min-height: 60px; padding: 8px; margin-top: 4px; font-size: 0.85rem; resize: vertical;"></textarea>
</div>
<div style="display: flex; gap: 10px; justify-content: flex-end;">
<button id="btnCopyMusica" style="background: var(--bg-secondary); border: 1px solid var(--border-light); color: var(--text-primary); padding: 8px 16px; border-radius: 6px; cursor: pointer;">📋 Copiar</button>
<button id="btnDownloadMusicaPdf" style="background: var(--brand-green); border: none; color: white; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-weight: bold;">📄 Salvar PDF</button>
<!-- 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="musicaTurmaSelect" 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="musicaFaixaEtaria" 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>
<!-- RITMO & INTENSIDADE -->
<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. Parâmetros Técnicos & Estilo</h4>
<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;">Ritmo / Gênero</label>
<select id="musicaRitmo" class="obs-select" style="width: 100%; margin-top: 4px;">
<option value="Cantiga de Roda" selected>⭕ Cantiga de Roda</option>
<option value="Pop Infantil Alegre">⚡ Pop Infantil Alegre</option>
<option value="Canção de Ninar">🌙 Canção de Ninar / Calma</option>
<option value="Forrózinho Lúdico">🪗 Forrózinho Lúdico</option>
<option value="Samba Infantil">🥁 Samba Infantil</option>
<option value="Rockzinho Infantil">🎸 Rockzinho Alegre</option>
<option value="Marchinha Escolar">🎺 Marchinha Escolar</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;">Intensidade</label>
<select id="musicaIntensidade" class="obs-select" style="width: 100%; margin-top: 4px;">
<option value="calma">🍃 Calma / Suave</option>
<option value="moderada" selected>🌟 Moderada / Aconchegante</option>
<option value="dancante">🎉 Dançante / Energética</option>
</select>
</div>
</div>
<!-- INSTRUMENTOS (CHECKBOXES VISUAIS) -->
<div class="settings-group">
<label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Instrumentos Empregados</label>
<div id="musicaInstrumentsContainer" style="display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px;">
<label class="tag-checkbox"><input type="checkbox" value="Violão acústico" checked> 🎸 Violão</label>
<label class="tag-checkbox"><input type="checkbox" value="Pandeiro e percussão" checked> 🪘 Pandeiro</label>
<label class="tag-checkbox"><input type="checkbox" value="Flauta doce" checked> 🪈 Flauta</label>
<label class="tag-checkbox"><input type="checkbox" value="Xilofone infantil"> 🪵 Xilofone</label>
<label class="tag-checkbox"><input type="checkbox" value="Metalofone e sinos"> 🔔 Sinos</label>
<label class="tag-checkbox"><input type="checkbox" value="Acordeon"> 🪗 Acordeon</label>
<label class="tag-checkbox"><input type="checkbox" value="Teclado e sintetizador"> 🎹 Teclado</label>
<label class="tag-checkbox"><input type="checkbox" value="Palmas e coro de crianças"> 👏 Palmas</label>
</div>
</div>
<!-- VOZ & DURAÇÃO -->
<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;">Voz Cantada</label>
<select id="musicaVozSelect" class="obs-select" style="width: 100%; margin-top: 4px;">
<option value="mulher" selected>👩 Voz Feminina (Acolhedora)</option>
<option value="homem">👨 Voz Masculina (Gentil)</option>
<option value="crianca">🧒 Voz de Criança (Lúdica)</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;">Duração Recomendada</label>
<select id="musicaDuracaoSelect" class="obs-select" style="width: 100%; margin-top: 4px;">
<option value="30s">⏱️ 30s (Rascunho Rápido)</option>
<option value="1min" selected>⏱️ 1 a 2 min (Ideal 0-5 anos)</option>
<option value="2min">⏱️ 2 a 3 min (Completa)</option>
</select>
</div>
</div>
<!-- BOTÃO GERAR MÚSICA -->
<button type="button" id="btnGenerateMusica" style="width: 100%; padding: 12px; background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%); color: white; 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(124, 58, 237, 0.3); transition: all 0.2s; margin-top: 6px;">
<span>🎵 Compor Músicas (3 Versões + Áudio)</span>
</button>
<div id="musicaGenerateLoader" 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: #a855f7;"></div>
<span id="musicaLoaderText">Compondo 3 versões e sintetizando áudio...</span>
</div>
</div>
<!-- Lado Direito: Apresentação em Cards das 3 Versões -->
<div id="musicaRightPanel" 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;">🎼 Resultados & Versões Pedagógicas</h4>
<div id="musicaBnccBadge" style="display: none; font-size: 0.72rem; background: rgba(59, 130, 246, 0.15); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.3); padding: 3px 8px; border-radius: 6px; font-weight: 600;">
BNCC: EI02TS02
</div>
</div>
<!-- ÁREA DE REPRODUÇÃO DE ÁUDIO COM EQUALIZER / WAVEFORM -->
<div id="musicaAudioPlayerBox" style="display: none; background: linear-gradient(135deg, rgba(168,85,247,0.12), rgba(59,130,246,0.08)); border: 1px solid rgba(168,85,247,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="musicaPlayerTitle">Música Gerada por PedagogIA</div>
<div style="font-size: 0.72rem; color: var(--text-secondary);" id="musicaPlayerSubtitle">Áudio Cantado • Formato MP3</div>
</div>
</div>
<div style="display: flex; gap: 6px; align-items: center;">
<button type="button" id="btnToggleMusicLoop" class="btn-music-option" style="padding: 4px 8px; font-size: 0.72rem; margin: 0;" title="Repetir em loop na sala de aula">
🔁 Loop: Desligado
</button>
<a id="btnDownloadMusicaAudio" href="#" download="musica_pedagogica.mp3" style="background: #10b981; color: white; 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 MP3
</a>
</div>
</div>
<!-- Waveform / Equalizer Animado -->
<div id="musicaWaveformVisualizer" style="display: flex; align-items: center; justify-content: center; gap: 3px; height: 32px; padding: 4px; background: rgba(0,0,0,0.15); border-radius: 6px;">
<div class="wave-bar" style="width: 4px; height: 30%; background: #a855f7; border-radius: 2px;"></div>
<div class="wave-bar" style="width: 4px; height: 60%; background: #a855f7; border-radius: 2px;"></div>
<div class="wave-bar" style="width: 4px; height: 90%; background: #a855f7; border-radius: 2px;"></div>
<div class="wave-bar" style="width: 4px; height: 45%; background: #a855f7; border-radius: 2px;"></div>
<div class="wave-bar" style="width: 4px; height: 75%; background: #a855f7; border-radius: 2px;"></div>
<div class="wave-bar" style="width: 4px; height: 35%; background: #a855f7; border-radius: 2px;"></div>
<div class="wave-bar" style="width: 4px; height: 85%; background: #a855f7; border-radius: 2px;"></div>
<div class="wave-bar" style="width: 4px; height: 50%; background: #a855f7; border-radius: 2px;"></div>
<div class="wave-bar" style="width: 4px; height: 95%; background: #a855f7; border-radius: 2px;"></div>
<div class="wave-bar" style="width: 4px; height: 40%; background: #a855f7; border-radius: 2px;"></div>
</div>
<audio id="musicaAudioPlayer" controls style="width: 100%; margin-top: 2px;"></audio>
</div>
<!-- ABAS DAS 3 VERSÕES -->
<div id="musicaVersionsTabs" style="display: none; gap: 6px; border-bottom: 1px solid var(--border-light); padding-bottom: 8px;">
<button type="button" id="btnTabVersaoPrincipal" class="tab-btn active" style="font-size: 0.78rem; padding: 6px 12px; background: rgba(168,85,247,0.15); border: none; cursor: pointer; color: #c084fc; border-radius: 6px; font-weight: bold;">🌟 Versão Principal</button>
<button type="button" id="btnTabVersaoCurta" class="tab-btn" style="font-size: 0.78rem; padding: 6px 12px; background: transparent; border: none; cursor: pointer; color: var(--text-secondary); border-radius: 6px;">⚡ Rascunho / Curta</button>
<button type="button" id="btnTabVersaoDancante" class="tab-btn" style="font-size: 0.78rem; padding: 6px 12px; background: transparent; border: none; cursor: pointer; color: var(--text-secondary); border-radius: 6px;">🎉 Dançante / Roda</button>
</div>
<!-- ÁREA DO CONTEÚDO DA VERSÃO ATIVA -->
<div id="musicaVersionDisplayArea" style="display: flex; flex-direction: column; gap: 12px; flex: 1;">
<div id="musicaPlaceholderText" 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 música?</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 Músicas" para gerar as 3 versões com áudio e referências BNCC.</p>
</div>
<!-- CONTAINER DA LETRA ATIVA -->
<div id="musicaActiveContentBox" 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="musicaActiveTitle" style="margin: 0; color: #a855f7; font-size: 1.05rem; font-family: 'Fredoka', sans-serif;">Título da Música</h4>
<span id="musicaActiveBadge" style="font-size: 0.72rem; color: var(--text-secondary);">Versão Principal</span>
</div>
<div style="display: flex; gap: 6px;">
<button type="button" id="btnCopyActiveLyrics" 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 letra">📋 Copiar</button>
<button type="button" id="btnDownloadActiveTxt" 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="btnExportActivePdf" style="background: #3b82f6; color: white; 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>
<!-- Letra Formatada -->
<div id="musicaActiveLyrics" style="font-family: 'Fredoka', 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="musicaPedagogicalTipBox" style="background: rgba(16, 185, 129, 0.08); border: 1px solid rgba(16, 185, 129, 0.2); border-radius: 8px; padding: 10px 14px; font-size: 0.8rem; color: #a7f3d0; line-height: 1.4;">
💡 <strong>Dica Pedagógica:</strong> <span id="musicaPedagogicalTipText">Estimule a coordenação motora das crianças durante o refrão.</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal: Histórico de Músicas -->
<div id="musicaHistoryModal" class="settings-modal" style="display: none; z-index: 10001;">
<div class="settings-modal-content" style="max-width: 500px; 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 Músicas</h3>
<button id="btnCloseMusicaHistory" 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: 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;">🕒 Histórico de Músicas Geradas</h3>
<button type="button" id="btnCloseMusicaHistory" 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="musicaHistoryList" style="padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px;"></div>
<div id="musicaHistoryList" style="padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; flex: 1;"></div>
</div>
</div>