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

Feat: ferramenta Planejamento Mind Lab ganha modal próprio com faixas etárias, lista de jogos específicos e métodos metacognitivos

Browse Source
This commit is contained in:
admtracksteel
2026-06-05 18:32:37 +00:00
parent 6e16a16867
commit 0015de9d20
3 changed files with 231 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app.js
+133
View File
@@ -2303,6 +2303,7 @@ const initApp = () => {
if (btn.id === 'barBtnComics') return; // Manipulado separadamente
if (btn.id === 'barBtnMusica') return;
if (btn.id === 'barBtnHistoria') return;
if (btn.id === 'barBtnMindLab') return;
const mode = btn.dataset.mode;
const text = userInput.value.trim();
@@ -6119,3 +6120,135 @@ if (document.readyState === 'loading') {
} else {
initApp();
}
// ==========================================================================
// PLANEJAMENTO MIND LAB
// ==========================================================================
document.addEventListener('DOMContentLoaded', () => {
const barBtnMindLab = document.getElementById('barBtnMindLab');
const mindLabModal = document.getElementById('mindLabModal');
const btnCloseMindLabModal = document.getElementById('btnCloseMindLabModal');
const mindLabGamesGrid = document.getElementById('mindLabGamesGrid');
const mindLabOutroJogoInput = document.getElementById('mindLabOutroJogoInput');
const btnGenerateMindLab = document.getElementById('btnGenerateMindLab');
const mindLabJogos = {
infantil: [
"Gato e Rato", "Cães e Gatos", "Dominó de Cores", "Quebra-cabeças", "Jogos de Encaixe", "Castelo Lógico", "Safari", "Outro"
],
fund1_inicio: [
"Mancala", "Quoridor", "Hora do Rush", "Bloqueio", "Lig 4", "Pinguins Numa Fria", "Encruzilhada", "Lince", "Outro"
],
fund1_fim: [
"Abalone", "Quarto", "Octógono Fantástico", "Sudoku", "Damas", "Resta Um", "Xadrez Chinês", "Cilada", "Outro"
],
fund2: [
"Xadrez", "Mastermind (Senha)", "Abalone Avançado", "Go", "Hex", "Reversi (Othello)", "Blokus", "Outro"
]
};
function renderMindLabGames(faixa) {
mindLabGamesGrid.innerHTML = '';
const jogos = mindLabJogos[faixa] || [];
jogos.forEach((jogo, index) => {
const btn = document.createElement('button');
btn.type = 'button';
btn.className = `btn-music-option btn-mindlab-jogo ${index === 0 ? 'active' : ''}`;
btn.dataset.jogo = jogo;
btn.textContent = jogo === 'Outro' ? '✏️ Outro...' : `🎲 ${jogo}`;
btn.addEventListener('click', () => {
document.querySelectorAll('.btn-mindlab-jogo').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
if (jogo === 'Outro') {
mindLabOutroJogoInput.style.display = 'block';
mindLabOutroJogoInput.focus();
} else {
mindLabOutroJogoInput.style.display = 'none';
}
});
mindLabGamesGrid.appendChild(btn);
});
mindLabOutroJogoInput.style.display = 'none';
}
// Setup Faixa Etária
document.querySelectorAll('.btn-mindlab-faixa').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelectorAll('.btn-mindlab-faixa').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
renderMindLabGames(btn.dataset.faixa);
});
});
// Setup Método e Foco
document.querySelectorAll('.btn-mindlab-metodo').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelectorAll('.btn-mindlab-metodo').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
});
});
document.querySelectorAll('.btn-mindlab-foco').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelectorAll('.btn-mindlab-foco').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
});
});
if (barBtnMindLab) {
barBtnMindLab.addEventListener('click', () => {
mindLabModal.style.display = 'flex';
renderMindLabGames('infantil');
document.getElementById('mindLabTemaLivreInput').value = '';
});
}
if (btnCloseMindLabModal) {
btnCloseMindLabModal.addEventListener('click', () => {
mindLabModal.style.display = 'none';
});
mindLabModal.addEventListener('click', (e) => {
if (e.target === mindLabModal) mindLabModal.style.display = 'none';
});
}
if (btnGenerateMindLab) {
btnGenerateMindLab.addEventListener('click', () => {
const activeFaixa = document.querySelector('.btn-mindlab-faixa.active');
const activeJogoBtn = document.querySelector('.btn-mindlab-jogo.active');
const activeMetodo = document.querySelector('.btn-mindlab-metodo.active');
const activeFoco = document.querySelector('.btn-mindlab-foco.active');
const faixaStr = activeFaixa ? activeFaixa.textContent.replace('🧸 ', '').replace('🎒 ', '').replace('📚 ', '').replace('🎓 ', '') : '';
let jogoStr = activeJogoBtn ? activeJogoBtn.dataset.jogo : '';
if (jogoStr === 'Outro') {
jogoStr = mindLabOutroJogoInput.value.trim() || 'Jogo não especificado';
}
const metodoStr = activeMetodo ? activeMetodo.dataset.metodo : '';
const focoStr = activeFoco ? activeFoco.dataset.foco : '';
const duracaoStr = document.getElementById('mindLabDuracaoSelect').value;
const temaLivre = document.getElementById('mindLabTemaLivreInput').value.trim();
const promptText = `Atue como um especialista na metodologia educacional Mente Inovadora (Mind Lab). Crie um planejamento de aula super detalhado e engajador com os seguintes parâmetros:
- *Faixa Etária:* ${faixaStr}
- *Jogo de Raciocínio:* ${jogoStr}
- *Método Metacognitivo Foco:* ${metodoStr}
- *Foco de Transferência (Socioemocional):* ${focoStr}
- *Duração:* ${duracaoStr}${temaLivre ? '\n- *Tema Contextual:* ' + temaLivre : ''}
Por favor, estruture a aula com:
1. *Abertura (Contextualização):* Como introduzir o método e o tema.
2. *Jogo (Aplicação):* Orientações para a mediação durante a partida.
3. *Reflexão (Mediação Transcendental):* Perguntas provocativas para fazer as crianças refletirem.
4. *Transferência:* Como conectar o que aprenderam no jogo e o método escolhido (ex: Semáforo) com situações reais da vida deles.`;
mindLabModal.style.display = 'none';
if (typeof handleSendMessage === 'function') {
handleSendMessage(promptText);
} else {
console.error("handleSendMessage not found");
}
});
}
});
public/index.html
+82 -1
View File
@@ -232,7 +232,7 @@
<button type="button" class="btn-prompt-mode mode-text" id="barBtnBrincarAtivo" style="border-color: rgba(16, 163, 127, 0.4); color: #a7f3d0; background: rgba(16, 163, 127, 0.05);" title="Criar circuitos psicomotores e brincadeiras ativas">
<span class="mode-icon">🏃‍♂️</span> BrincarAtivo
</button>
<button type="button" class="btn-prompt-mode mode-mindlab" data-prompt="Crie um planejamento de aula inspirado no Mind Lab para trabalhar educação socioemocional e cooperação." style="border-color: rgba(139, 92, 246, 0.4); color: #a78bfa; background: rgba(139, 92, 246, 0.05);" title="Planejamento Mind Lab">
<button type="button" id="barBtnMindLab" class="btn-prompt-mode mode-mindlab" style="border-color: rgba(139, 92, 246, 0.4); color: #a78bfa; background: rgba(139, 92, 246, 0.05);" title="Planejamento Mind Lab">
<span class="mode-icon">🧠</span> Planejamento Mind Lab
</button>
<button type="button" class="btn-prompt-mode mode-bncc" data-prompt="Crie um planejamento pedagógico de artes alinhado à BNCC para o campo 'Traços, sons, cores e formas'." style="border-color: rgba(234, 179, 8, 0.4); color: #fef08a; background: rgba(234, 179, 8, 0.05);" title="Atividade BNCC">
@@ -905,6 +905,87 @@
<div id="historiaHistoryList" style="padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px;"></div>
</div>
</div>
<!-- Modal: Planejamento Mind Lab -->
<div id="mindLabModal" class="settings-modal" style="display: none;">
<div class="settings-modal-content" style="max-width: 700px; 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;">🧠 Planejador de Aulas Mind Lab</h3>
<button id="btnCloseMindLabModal" 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: 18px; flex: 1;">
<!-- FAIXA ETÁRIA -->
<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 (Ano Escolar)</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-mindlab-faixa active" data-faixa="infantil">🧸 Educação Infantil</button>
<button type="button" class="btn-music-option btn-mindlab-faixa" data-faixa="fund1_inicio">🎒 Fund I (1º ao 3º)</button>
<button type="button" class="btn-music-option btn-mindlab-faixa" data-faixa="fund1_fim">📚 Fund I (4º e 5º)</button>
<button type="button" class="btn-music-option btn-mindlab-faixa" data-faixa="fund2">🎓 Fund II (6º ao 9º)</button>
</div>
</div>
<!-- JOGO DE RACIOCÍNIO -->
<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;">
2. Jogo de Raciocínio Escolhido
<span style="font-size: 0.7rem; color: #8b5cf6;">(Atualizado conforme a faixa etária)</span>
</label>
<div id="mindLabGamesGrid" class="music-option-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-top: 4px;">
<!-- Preenchido via JavaScript -->
</div>
<input type="text" id="mindLabOutroJogoInput" placeholder="Ou digite outro jogo..." class="obs-input" style="width: 100%; margin-top: 8px; padding: 10px; display: none;">
</div>
<!-- MÉTODO METACOGNITIVO -->
<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. Método Metacognitivo</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-mindlab-metodo active" data-metodo="Semáforo">🚦 Semáforo</button>
<button type="button" class="btn-music-option btn-mindlab-metodo" data-metodo="Árvore de Pensamentos">🌳 Árvore de Pensamentos</button>
<button type="button" class="btn-music-option btn-mindlab-metodo" data-metodo="A Lupa">🔍 A Lupa</button>
<button type="button" class="btn-music-option btn-mindlab-metodo" data-metodo="Pássaro Migratório">🦅 Pássaro Migratório</button>
<button type="button" class="btn-music-option btn-mindlab-metodo" data-metodo="Detetive">🕵️ Detetive</button>
<button type="button" class="btn-music-option btn-mindlab-metodo" data-metodo="Balança">⚖️ Balança</button>
</div>
</div>
<!-- FOCO SOCIOEMOCIONAL -->
<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. Foco Socioemocional (Transferência)</label>
<div class="music-option-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-top: 4px;">
<button type="button" class="btn-music-option btn-mindlab-foco active" data-foco="Lidar com a frustração (perder/ganhar)">😫 Lidar com a frustração</button>
<button type="button" class="btn-music-option btn-mindlab-foco" data-foco="Trabalho em equipe e cooperação">🤝 Trabalho em equipe</button>
<button type="button" class="btn-music-option btn-mindlab-foco" data-foco="Foco, atenção e evitar distrações">🎯 Foco e atenção</button>
<button type="button" class="btn-music-option btn-mindlab-foco" data-foco="Resolução de conflitos">🕊️ Resolução de conflitos</button>
<button type="button" class="btn-music-option btn-mindlab-foco" data-foco="Planejamento e visão de futuro">🗺️ Planejamento</button>
<button type="button" class="btn-music-option btn-mindlab-foco" data-foco="Respeitar regras e combinados">📜 Respeito a regras</button>
</div>
</div>
<!-- DETALHES ADICIONAIS -->
<div class="settings-group">
<label style="color: var(--text-secondary); font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">5. Duração e Tema de Fundo</label>
<div style="display: flex; gap: 10px; margin-top: 4px;">
<select id="mindLabDuracaoSelect" class="obs-select" style="flex: 1;">
<option value="Curta (30 a 40 min)">Curta (30-40 min)</option>
<option value="Padrão (50 min)" selected>Padrão (50 min)</option>
<option value="Dupla (1h40)">Dupla (1h40)</option>
</select>
<input type="text" id="mindLabTemaLivreInput" placeholder="Ex: amizade, regras de convivência..." class="obs-input" style="flex: 2;">
</div>
</div>
<button type="button" id="btnGenerateMindLab" style="width: 100%; padding: 12px; background: #8b5cf6; 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(139, 92, 246, 0.3); transition: all 0.2s;">🧠 Criar Planejamento Mind Lab</button>
<div id="mindLabGenerateLoader" 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;">Elaborando metodologia e transferência...</span>
</div>
</div>
</div>
</div>
<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);">
public/style.css
+16
View File
@@ -3214,6 +3214,22 @@ code {
color: #10a37f;
}
/* Planejamento Mind Lab (Violeta #8b5cf6) */
#mindLabModal .btn-music-option:hover,
#mindLabModal .btn-music-rhythm:hover {
border-color: rgba(139, 92, 246, 0.5);
}
#mindLabModal .btn-music-option.active,
#mindLabModal .btn-music-rhythm.active {
background-color: rgba(139, 92, 246, 0.15);
border-color: #8b5cf6;
color: #a78bfa;
box-shadow: 0 0 8px rgba(139, 92, 246, 0.2);
}
#mindLabModal .settings-modal-header h3 {
color: #8b5cf6;
}
/* Musicando Ideias (Roxo #a855f7) */
#musicaModal .settings-modal-header h3,
#musicaHistoryModal .settings-modal-header h3 {