diff --git a/public/app.js b/public/app.js index 78f71f6..d2e4241 100644 --- a/public/app.js +++ b/public/app.js @@ -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"); + } + }); + } +}); diff --git a/public/index.html b/public/index.html index 737d347..db04be1 100644 --- a/public/index.html +++ b/public/index.html @@ -232,7 +232,7 @@ 🏃♂️ BrincarAtivo - + 🧠 Planejamento Mind Lab @@ -905,6 +905,87 @@ + + + + + 🧠 Planejador de Aulas Mind Lab + × + + + + + + 1. Faixa Etária (Ano Escolar) + + 🧸 Educação Infantil + 🎒 Fund I (1º ao 3º) + 📚 Fund I (4º e 5º) + 🎓 Fund II (6º ao 9º) + + + + + + + 2. Jogo de Raciocínio Escolhido + (Atualizado conforme a faixa etária) + + + + + + + + + + 3. Método Metacognitivo + + 🚦 Semáforo + 🌳 Árvore de Pensamentos + 🔍 A Lupa + 🦅 Pássaro Migratório + 🕵️ Detetive + ⚖️ Balança + + + + + + 4. Foco Socioemocional (Transferência) + + 😫 Lidar com a frustração + 🤝 Trabalho em equipe + 🎯 Foco e atenção + 🕊️ Resolução de conflitos + 🗺️ Planejamento + 📜 Respeito a regras + + + + + + 5. Duração e Tema de Fundo + + + Curta (30-40 min) + Padrão (50 min) + Dupla (1h40) + + + + + + 🧠 Criar Planejamento Mind Lab + + + + Elaborando metodologia e transferência... + + + + + diff --git a/public/style.css b/public/style.css index 5311d1d..f0d8647 100644 --- a/public/style.css +++ b/public/style.css @@ -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 {