3273 lines
258 KiB
HTML
3273 lines
258 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="pt-BR">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="theme-color" content="#10a37f">
|
||
<meta name="description" content="Assistente PedaGog - Profesora">
|
||
<!-- PWA Manifest -->
|
||
<link rel="manifest" href="/manifest.json">
|
||
<!-- iOS PWA Support -->
|
||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||
<meta name="apple-mobile-web-app-title" content="PedaGog">
|
||
<link rel="apple-touch-icon" href="/assets/apple-touch-icon.png">
|
||
<title>PedaGog</title>
|
||
<!-- Google Fonts Outfit & Inter -->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Outfit:wght@400;600;700&family=Fredoka:wght@400;600;700&family=Caveat:wght@400;700&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
|
||
<!-- Highlight.js para destaque de sintaxe em códigos -->
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
|
||
<link rel="stylesheet" href="style.css">
|
||
<!-- Favicon customizado -->
|
||
<link rel="icon" href="/assets/icon-192.png" type="image/png">
|
||
</head>
|
||
<body>
|
||
<div class="app-container">
|
||
<!-- Sidebar / Menu lateral (Deslizante no mobile) -->
|
||
<aside class="sidebar" id="sidebar">
|
||
<div class="sidebar-header">
|
||
<button class="btn-new-chat" id="btnNewChat">
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
||
</svg>
|
||
<span>Novo chat</span>
|
||
</button>
|
||
<button class="btn-close-sidebar" id="btnCloseSidebar" aria-label="Fechar menu">
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Busca no Histórico -->
|
||
<div class="sidebar-search">
|
||
<div class="sidebar-search-wrapper">
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="search-icon">
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
|
||
</svg>
|
||
<input type="text" id="searchInput" placeholder="Buscar conversas..." class="search-input" autocomplete="off">
|
||
<button class="search-clear" id="searchClear" aria-label="Limpar busca" style="display:none">
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
||
</svg>
|
||
</button>
|
||
<button class="search-filter-toggle" id="btnToggleSidebarTags" aria-label="Alternar filtros" style="background: none; border: none; cursor: pointer; color: var(--text-secondary); padding: 2px; display: flex; align-items: center;" title="Expandir/Recolher Filtros">
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" style="width: 20px; height: 20px;">
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5M12 17.25h8.25" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tags de filtro -->
|
||
<div class="sidebar-tags" id="sidebarTags">
|
||
<button class="tag-filter active" data-tag="all">Todas</button>
|
||
<button class="tag-filter" data-tag="relatorios">📋 Relatórios</button>
|
||
<button class="tag-filter" data-tag="planejamento">📝 Planejamento</button>
|
||
<button class="tag-filter" data-tag="mindlab">🧠 Mind Lab</button>
|
||
<button class="tag-filter" data-tag="estudos">📚 Estudos</button>
|
||
</div>
|
||
|
||
<!-- Divisor -->
|
||
<div class="sidebar-divider"></div>
|
||
|
||
<!-- Seção: Observações & Rotina -->
|
||
<div class="sidebar-actions-obs" style="display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 4px 16px;">
|
||
<!-- Botão: Minhas Observações -->
|
||
<button class="btn-observacoes" id="btnObservacoes" style="border-color: #f43f5e; color: #f43f5e; background: rgba(244, 63, 94, 0.05);" title="Ver e gerenciar observações registradas">
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25" />
|
||
</svg>
|
||
<span>Minhas Observações</span>
|
||
</button>
|
||
<!-- Botão: Obs. Especiais -->
|
||
<button class="btn-observacoes" id="btnObsEspeciais" style="border-color: #f59e0b; color: #f59e0b; background: rgba(245, 158, 11, 0.05);" title="Observações de Educação Especial e Inclusiva">
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
|
||
</svg>
|
||
<span>Obs. Especial</span>
|
||
</button>
|
||
<!-- Botão: Protocolo de Crises -->
|
||
<button class="btn-observacoes" id="btnProtocoloCrise" style="border-color: #ef4444; color: #ef4444; background: rgba(239, 68, 68, 0.08);" title="Protocolo de Acolhimento & Mediação de Crises">
|
||
<span style="font-size: 1rem;">🚨</span>
|
||
<span>Protocolo de Crise</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Divisor -->
|
||
<div class="sidebar-divider"></div>
|
||
|
||
<!-- Seção: Minha Turma & Gestão -->
|
||
<div class="sidebar-actions-turma" style="display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 4px 16px;">
|
||
<button class="btn-observacoes" id="btnMinhaTurma" style="border-color: #3b82f6; color: #3b82f6; background: rgba(59, 130, 246, 0.05);" title="Gerenciar turmas e lista de alunos">
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />
|
||
</svg>
|
||
<span>Minha Turma</span>
|
||
</button>
|
||
<!-- Botão: Stickers Gamificados -->
|
||
<button class="btn-observacoes" id="btnStickersConquistas" style="border-color: #f59e0b; color: #fbbf24; background: rgba(245, 158, 11, 0.08);" title="Stickers de Conquistas & Impressão com QR Code">
|
||
<span style="font-size: 1rem;">🌟</span>
|
||
<span>Stickers & Conquistas</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Divisor -->
|
||
<div class="sidebar-divider"></div>
|
||
|
||
<!-- Seção: Relatórios & Atas -->
|
||
<div class="sidebar-actions-reports" style="display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 4px 16px;">
|
||
<!-- Botão: Emitir Relatório -->
|
||
<button class="btn-observacoes" id="btnEmitirRelatorio" style="border-color: var(--brand-green); color: var(--brand-green); background: rgba(16, 163, 127, 0.05);" title="Gerar relatório individual ou em lote">
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
|
||
</svg>
|
||
<span>Emitir Relatórios</span>
|
||
</button>
|
||
|
||
<!-- Botão: Atas de Reunião -->
|
||
<button class="btn-observacoes" id="btnAtasReuniao" style="border-color: #8b5cf6; color: #a78bfa; background: rgba(139, 92, 246, 0.08);" title="Gerar e salvar Atas de Reuniões e Conselho">
|
||
<span style="font-size: 1rem;">📋</span>
|
||
<span>Atas de Reunião</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Divisor -->
|
||
<div class="sidebar-divider"></div>
|
||
|
||
<!-- Histórico de Conversas -->
|
||
<div class="chat-history" id="chatHistory">
|
||
<!-- Histórico filtrado/busca -->
|
||
<div class="search-results-header" id="searchResultsHeader" style="display:none">
|
||
<div class="search-results-info">
|
||
<span id="searchResultsCount"></span>
|
||
<button class="search-clear-all" id="searchClearAll">Limpar</button>
|
||
</div>
|
||
</div>
|
||
<!-- Items gerados por JS -->
|
||
<div id="historyItems"></div>
|
||
</div>
|
||
|
||
<!-- Rodapé do Menu Lateral -->
|
||
<div class="sidebar-footer">
|
||
<div class="user-profile">
|
||
<div class="avatar user-avatar sidebar-avatar-wrapper">
|
||
<img src="assets/pedagog_user.png" alt="Pedagog" class="sidebar-avatar-img" id="sidebarAvatarImg">
|
||
</div>
|
||
<div class="user-info">
|
||
<span class="user-name">Pedagog</span>
|
||
<span class="user-status">Online</span>
|
||
</div>
|
||
<button class="btn-settings" id="btnSettings" title="Configurações do Agente" style="background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 8px; border-radius: 8px; display: flex; align-items: center; justify-content: center; transition: color var(--transition-fast), background-color var(--transition-fast); margin-right: 4px;">
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" style="width: 20px; height: 20px;">
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.43l-1.003.828c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.43l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 0 1 0-.255c.007-.378-.138-.75-.43-.991l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.645-.869L9.594 3.94ZM12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" />
|
||
</svg>
|
||
</button>
|
||
<button class="btn-logout" id="btnLogout" title="Sair">
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 9V5.25A2.25 2.25 0 0 1 10.5 3h6a2.25 2.25 0 0 1 2.25 2.25v13.5A2.25 2.25 0 0 1 16.5 21h-6a2.25 2.25 0 0 1-2.25-2.25V15m-3 0-3-3m0 0 3-3m-3 3H15" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- FAB: Nova Observação por Voz -->
|
||
<button class="fab-record" id="fabRecord" title="Nova Observação (gravar)">
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 18.75a6 6 0 0 0 6-6v-1.5m-6 7.5a6 6 0 0 1-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" />
|
||
</svg>
|
||
</button>
|
||
|
||
<!-- FAB: Ferramentas e Recursos -->
|
||
<button class="fab-tools" id="fabTools" title="Ferramentas e Recursos">
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.43l-1.003.828c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.43l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.645-.869L9.594 3.94ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
|
||
</svg>
|
||
</button>
|
||
|
||
<!-- Overlay para fechar sidebar clicando fora no mobile -->
|
||
<div class="sidebar-overlay" id="sidebarOverlay"></div>
|
||
|
||
<!-- Área principal do Chat -->
|
||
<main class="chat-area">
|
||
<!-- Topo fixo / Header -->
|
||
<header class="chat-header">
|
||
<button class="btn-menu" id="btnMenu" aria-label="Abrir menu">
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
|
||
</svg>
|
||
</button>
|
||
|
||
<div class="model-badge">
|
||
<span id="modelBadgeText">GPT-4.1 Nano</span>
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="chevron">
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
|
||
</svg>
|
||
</div>
|
||
|
||
<div class="header-right">
|
||
<button class="btn-theme-toggle" id="btnThemeToggle" title="Alternar tema" aria-label="Alternar entre tema claro e escuro">
|
||
<!-- Sun icon (shown in dark mode, to switch to light) -->
|
||
<svg id="iconThemeSun" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M12 6.75a3.75 3.75 0 1 0 0 7.5 3.75 3.75 0 0 0 0-7.5Z" />
|
||
</svg>
|
||
<!-- Moon icon (shown in light mode, to switch to dark) -->
|
||
<svg id="iconThemeMoon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" style="display:none">
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<button class="btn-new-chat-mobile" id="btnNewChatMobile" aria-label="Novo chat">
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
||
</svg>
|
||
</button>
|
||
</header>
|
||
|
||
<!-- Mensagens da conversa -->
|
||
<div class="messages-container" id="messagesContainer">
|
||
<!-- Estado inicial / Bem-vindo (se não houver mensagens) -->
|
||
<div class="welcome-container" id="welcomeContainer">
|
||
<div class="welcome-logo">
|
||
<div class="logo-outer welcome-avatar-wrapper">
|
||
<img src="assets/pedagog_ia.png" alt="PedagogIA" class="welcome-avatar-img" id="welcomeAvatarImg">
|
||
</div>
|
||
</div>
|
||
<h2 id="welcomeTitle">Olá! Sou sua assistente virtual e me chamo PedagogIA. Como posso ajudar?</h2>
|
||
|
||
|
||
</div>
|
||
|
||
<!-- Lista de mensagens geradas dinamicamente -->
|
||
<div class="conversation-list" id="conversationList"></div>
|
||
</div>
|
||
|
||
<!-- Barra inferior com input de texto -->
|
||
<footer class="chat-footer">
|
||
<div class="input-container">
|
||
<div class="prompt-modes-bar">
|
||
<button type="button" class="btn-prompt-mode mode-music" id="barBtnEstudio" style="border-color: rgba(168, 85, 247, 0.4); color: #c084fc; background: rgba(168, 85, 247, 0.05);" title="Abrir painel de Estúdio Musical completo">
|
||
<span class="mode-icon">🎹</span> Estúdio Musical
|
||
</button>
|
||
<button type="button" class="btn-prompt-mode mode-comics" id="barBtnComics" style="border-color: rgba(236, 72, 153, 0.4); color: #f472b6; background: rgba(236, 72, 153, 0.05);" title="Abrir Fábrica de Quadrinhos Pedagógicos">
|
||
<span class="mode-icon">🎨</span> Fábrica de Quadrinhos
|
||
</button>
|
||
<button type="button" class="btn-prompt-mode mode-video" id="barBtnVideoMind" style="border-color: rgba(6, 182, 212, 0.4); color: #22d3ee; background: rgba(6, 182, 212, 0.05);" title="Análise pedagógica e resumo de vídeos do YouTube">
|
||
<span class="mode-icon">🎬</span> VideoMind
|
||
</button>
|
||
<button type="button" class="btn-prompt-mode mode-image" id="barBtnGaratujas" style="border-color: rgba(249, 115, 22, 0.4); color: #fdba74; background: rgba(249, 115, 22, 0.05);" title="Análise formativa de desenhos e rabiscos infantis">
|
||
<span class="mode-icon">🎨</span> Garatujas
|
||
</button>
|
||
<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" 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-fill="De acordo com o documento normativo da BNCC preciso " style="border-color: rgba(234, 179, 8, 0.4); color: #fef08a; background: rgba(234, 179, 8, 0.05);" title="Atividade BNCC">
|
||
<span class="mode-icon">🎨</span> Atividade BNCC
|
||
</button>
|
||
<button type="button" class="btn-prompt-mode mode-music" id="barBtnMusica" title="Compor e gerar uma música pedagógica">
|
||
<span class="mode-icon">🎵</span> Musicando Ideias
|
||
</button>
|
||
<button type="button" class="btn-prompt-mode mode-video" data-mode="VIDEO" title="Criar um roteiro ou animação de vídeo">
|
||
<span class="mode-icon">🎬</span> Criar Vídeo
|
||
</button>
|
||
<button type="button" class="btn-prompt-mode mode-image" data-mode="IMAGE" title="Gerar ou desenhar uma ilustração educativa">
|
||
<span class="mode-icon">🎨</span> Criar Imagem
|
||
</button>
|
||
<button type="button" class="btn-prompt-mode mode-poetry" id="barBtnPoesia" title="Escrever uma poesia infantil pedagógica">
|
||
<span class="mode-icon">📜</span> Estúdio de Poesia
|
||
</button>
|
||
<button type="button" class="btn-prompt-mode mode-text" id="barBtnHistoria" title="Escrever histórias, relatórios ou conversar">
|
||
<span class="mode-icon">✍️</span> Inventando Historias
|
||
</button>
|
||
<button type="button" class="btn-prompt-mode mode-comics" id="barBtnCartazes" style="border-color: rgba(16, 185, 129, 0.4); color: #34d399; background: rgba(16, 185, 129, 0.05);" title="Criar e armazenar cartazes para sala de aula">
|
||
<span class="mode-icon">🖼️</span> Criar Cartazes
|
||
</button>
|
||
</div>
|
||
<form id="chatForm">
|
||
<div class="input-box">
|
||
<button type="button" id="btnAttach" class="btn-attach" aria-label="Anexar arquivo" title="Anexar imagem ou documento">
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13" />
|
||
</svg>
|
||
</button>
|
||
<input type="file" id="fileInput" accept="image/*,.pdf,.doc,.docx,.txt" multiple style="display:none">
|
||
<textarea id="userInput" placeholder="Mensagem PedaGog..." rows="1" autocomplete="off"></textarea>
|
||
<button type="button" id="btnVoice" class="btn-voice" aria-label="Usar microfone" title="Ditar mensagem">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/>
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M19 10v2a7 7 0 0 1-14 0v-2"/>
|
||
<line stroke-linecap="round" stroke-linejoin="round" x1="12" x2="12" y1="19" y2="22"/>
|
||
</svg>
|
||
</button>
|
||
<button type="submit" id="btnSend" disabled aria-label="Enviar mensagem">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
|
||
<path fill-rule="evenodd" d="M11.47 2.47a.75.75 0 0 1 1.06 0l7.5 7.5a.75.75 0 1 1-1.06 1.06l-6.22-6.22V21a.75.75 0 0 1-1.5 0V4.81L5.03 11.03a.75.75 0 0 1-1.06-1.06l7.5-7.5Z" clip-rule="evenodd" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</form>
|
||
<p class="disclaimer">PedaGog pode cometer erros. Considere verificar informações importantes.</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- Modal de Tags -->
|
||
<div class="modal-overlay" id="modalTagOverlay">
|
||
<div class="modal-tag">
|
||
<div class="modal-tag-header">
|
||
<span class="modal-tag-title">Selecionar tags</span>
|
||
<button class="modal-tag-close" id="modalTagClose" aria-label="Fechar">
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" width="20" height="20">
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<div class="modal-tag-list" id="modalTagList"></div>
|
||
<div class="modal-tag-actions">
|
||
<button class="modal-tag-btn secondary" id="modalTagCancel">Cancelar</button>
|
||
<button class="modal-tag-btn primary" id="modalTagConfirm">Confirmar</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
<!-- Modal de Gravação de Observação -->
|
||
<div id="recordModal" class="settings-modal" style="display: none;">
|
||
<div class="settings-modal-content record-modal-content">
|
||
<div class="record-modal-header">
|
||
<button id="btnExitRecord" class="btn-exit-record" title="Sair e descartar">
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
||
</svg>
|
||
<span>Sair</span>
|
||
</button>
|
||
<h3>🎤 Nova Observação</h3>
|
||
<div style="width: 60px;"></div>
|
||
</div>
|
||
|
||
<div class="record-modal-body">
|
||
<!-- Estado: gravando -->
|
||
<div id="recordStateRecording" class="record-state" style="display: none;">
|
||
<div class="record-timer" id="recordTimer">00:00</div>
|
||
<div class="record-waveform" id="recordWaveform">
|
||
<div class="wave-bar"></div><div class="wave-bar"></div><div class="wave-bar"></div>
|
||
<div class="wave-bar"></div><div class="wave-bar"></div><div class="wave-bar"></div>
|
||
<div class="wave-bar"></div><div class="wave-bar"></div><div class="wave-bar"></div>
|
||
<div class="wave-bar"></div><div class="wave-bar"></div><div class="wave-bar"></div>
|
||
</div>
|
||
<p class="record-hint">Fale livremente sobre a observação...</p>
|
||
<button id="btnStopRecord" class="btn-stop-record">
|
||
<div class="stop-icon"></div>
|
||
<span>Parar</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Estado: processando -->
|
||
<div id="recordStateProcessing" class="record-state" style="display: none;">
|
||
<div class="record-spinner"></div>
|
||
<p id="recordProcessingText">Analisando sua observação...</p>
|
||
<small id="recordProcessingSubtext" style="color: var(--text-muted);">Transcrevendo e gerando relatório</small>
|
||
</div>
|
||
|
||
<!-- Estado: Transcrição Concluída (Revisão) -->
|
||
<div id="recordStateTranscribed" class="record-state" style="display: none; width: 100%;">
|
||
<h4 style="margin-bottom: 8px; color: var(--text-main); display: flex; align-items: center; gap: 8px; width: 100%; justify-content: flex-start;">
|
||
<span>✍️ Revisar Transcrição</span>
|
||
</h4>
|
||
<p class="record-hint" style="margin-bottom: 12px; text-align: left; width: 100%;">Você pode ajustar o texto abaixo antes da análise da IA:</p>
|
||
<textarea id="transcriptionTextarea" class="transcription-textarea" style="width: 100%; min-height: 120px; padding: 12px; border-radius: 8px; border: 1px solid var(--border-light); background-color: var(--bg-card); color: var(--text-main); font-family: inherit; font-size: 14px; line-height: 1.5; resize: vertical; margin-bottom: 16px;" placeholder="Digite ou ajuste o que foi falado..."></textarea>
|
||
<div class="preview-actions" style="display: flex; gap: 12px; width: 100%; justify-content: flex-end;">
|
||
<button id="btnDiscardTranscription" class="btn-discard" style="flex: 1; max-width: 150px;">Descartar</button>
|
||
<button id="btnAnalyzeTranscription" class="btn-save-report" style="flex: 1; max-width: 200px; display: flex; align-items: center; justify-content: center; gap: 8px;">
|
||
<span>Analisar com IA</span>
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" style="width: 16px; height: 16px;">
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Estado: prévia -->
|
||
<div id="recordStatePreview" class="record-state" style="display: none;">
|
||
<div class="preview-header">
|
||
<h4>📋 Relatório Gerado</h4>
|
||
<span id="previewDateTime"></span>
|
||
</div>
|
||
<div id="reportContent" class="report-content"></div>
|
||
<div class="preview-actions">
|
||
<button id="btnDiscardReport" class="btn-discard">Descartar</button>
|
||
<button id="btnSaveReport" class="btn-save-report">Salvar</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal de Configurações do Agente -->
|
||
<div id="settingsModal" class="settings-modal" style="display: none;">
|
||
<div class="settings-modal-content settings-modal-large">
|
||
<div class="settings-modal-header">
|
||
<h3>Configurações da Assistente</h3>
|
||
<button id="closeSettingsModal" class="close-settings-btn">×</button>
|
||
</div>
|
||
|
||
<!-- Tabs de navegação -->
|
||
<div class="settings-tabs">
|
||
<button class="settings-tab active" data-tab="tabIdentidade">👤 Identidade</button>
|
||
<button class="settings-tab" data-tab="tabEstilo">🎯 Estilo</button>
|
||
<button class="settings-tab" data-tab="tabConhecimento">📚 Conhecimento</button>
|
||
</div>
|
||
|
||
<div class="settings-modal-body">
|
||
<!-- Tab: Identidade -->
|
||
<div id="tabIdentidade" class="settings-tab-content active">
|
||
<div class="settings-group">
|
||
<label for="settingAgentName">Nome da Assistente</label>
|
||
<input type="text" id="settingAgentName" placeholder="Ex: PedagogIA">
|
||
<small style="color: var(--text-muted); margin-top: 4px; display: block;">Nome que aparece para a usuária na conversa</small>
|
||
</div>
|
||
|
||
<div class="settings-group">
|
||
<label>Avatar da Assistente</label>
|
||
<div class="avatar-preview-container">
|
||
<img id="previewIaAvatar" src="assets/pedagog_ia.png" alt="Assistente Preview" class="preview-avatar-img">
|
||
<input type="file" id="uploadIaAvatar" accept="image/*" style="display: none;">
|
||
<button type="button" class="btn-change-avatar" onclick="document.getElementById('uploadIaAvatar').click()">Escolher Imagem</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="settings-group">
|
||
<label>Avatar do Usuário</label>
|
||
<div class="avatar-preview-container">
|
||
<img id="previewUserAvatar" src="assets/pedagog_user.png" alt="Usuário Preview" class="preview-avatar-img">
|
||
<input type="file" id="uploadUserAvatar" accept="image/*" style="display: none;">
|
||
<button type="button" class="btn-change-avatar" onclick="document.getElementById('uploadUserAvatar').click()">Escolher Imagem</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tab: Estilo -->
|
||
<div id="tabEstilo" class="settings-tab-content">
|
||
<div class="settings-group">
|
||
<label>Modo de Resposta da IA</label>
|
||
<p style="color: var(--text-muted); margin-bottom: 16px; font-size: 13px;">Controla como a assistente se comporta nas respostas — mais técnica ou mais detalhista</p>
|
||
|
||
<div class="temperature-options" id="temperatureOptions">
|
||
<!-- Opções preenchidas via JS -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tab: Conhecimento -->
|
||
<div id="tabConhecimento" class="settings-tab-content">
|
||
<div class="settings-group">
|
||
<label>📖 Conhecimento Adquirido</label>
|
||
<p style="color: var(--text-muted); margin-bottom: 16px; font-size: 13px;">Informações que a assistente aprendeu com você ao longo das conversas. Você pode revisar e remover o que não for mais válido.</p>
|
||
|
||
<div id="knowledgeList" class="knowledge-list" style="max-height: 300px; overflow-y: auto; margin-bottom: 16px;">
|
||
<!-- Lista de fatos preenchida via JS -->
|
||
</div>
|
||
|
||
<div style="display: flex; gap: 8px; align-items: center;">
|
||
<input type="text" id="manualKnowledgeInput" placeholder="Adicionar conhecimento manualmente..." style="flex: 1; padding: 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text);">
|
||
<button type="button" id="btnAddKnowledge" class="btn-save-settings" style="padding: 10px 16px;">+ Adicionar</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="settings-modal-footer">
|
||
<button id="btnSaveSettings" class="btn-save-settings">Salvar Configurações</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal: Minhas Observações -->
|
||
<div id="obsModal" class="settings-modal" style="display: none;">
|
||
<div class="settings-modal-content obs-modal-content">
|
||
<div class="settings-modal-header">
|
||
<h3 id="obsModalTitle">📒 Minhas Observações</h3>
|
||
<button id="btnCloseObsModal" class="btn-close-modal">
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<div class="obs-modal-body">
|
||
<!-- Filtros -->
|
||
<div class="obs-filters" id="obsFilters">
|
||
<select id="obsFilterMes" class="obs-select">
|
||
<option value="">Todos os meses</option>
|
||
</select>
|
||
<select id="obsFilterTag" class="obs-select">
|
||
<option value="">Todas as tags</option>
|
||
<option value="social">Social</option>
|
||
<option value="cognitivo">Cognitivo</option>
|
||
<option value="motor">Motor</option>
|
||
<option value="linguagem">Linguagem</option>
|
||
<option value="emocional">Emocional</option>
|
||
<option value="colaborativo">Colaborativo</option>
|
||
<option value="autónomo">Autónomo</option>
|
||
</select>
|
||
<input type="text" id="obsSearchCrianca" class="obs-input" placeholder="Buscar por criança...">
|
||
</div>
|
||
<!-- Lista de observações -->
|
||
<div id="obsList" class="obs-list">
|
||
<div class="obs-empty">Carregando observações...</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal: Minha Turma -->
|
||
<div id="minhaTurmaModal" class="settings-modal" style="display: none;">
|
||
<div class="settings-modal-content" style="max-width: 800px; width: 95%; max-height: 90vh; display: flex; flex-direction: column;">
|
||
<div class="settings-modal-header">
|
||
<h3>🧑🤝🧑 Minha Turma</h3>
|
||
<button id="btnCloseMinhaTurmaModal" class="btn-close-modal">
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<div style="display: flex; border-bottom: 1px solid var(--border-light); padding: 0 16px;">
|
||
<button id="tabTurmaConfig" class="btn-music-option active" style="border-radius: 0; border: none; border-bottom: 2px solid var(--brand-green); padding: 12px 16px; font-weight: 600; color: var(--brand-green); background: transparent;">🏫 Dados da Turma</button>
|
||
<button id="tabTurmaAlunos" class="btn-music-option" style="border-radius: 0; border: none; border-bottom: 2px solid transparent; padding: 12px 16px; font-weight: 500; color: var(--text-secondary); background: transparent;">👧👦 Crianças da Turma</button>
|
||
</div>
|
||
|
||
<div class="settings-modal-body" style="padding: 16px; overflow: hidden; display: flex; flex-direction: column; flex: 1; min-height: 500px;">
|
||
|
||
<!-- SECÃO 1: CONFIGURAÇÕES DA TURMA -->
|
||
|
||
<!-- SECÃO 1: TURMAS (Múltiplas turmas) -->
|
||
<div id="turmaConfigSection" style="display: flex; flex-direction: row; gap: 16px; flex: 1; height: 100%; overflow: hidden;">
|
||
<!-- Lado Esquerdo: Lista de Turmas -->
|
||
<div style="flex: 1; border-right: 1px solid var(--border-light); padding-right: 16px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; height: 100%;">
|
||
<div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-light); padding-bottom: 8px;">
|
||
<h4 style="margin: 0; color: var(--text-primary);">Minhas Turmas</h4>
|
||
<button id="btnCreateTurma" style="background: var(--brand-green); color: white; border: none; padding: 6px 12px; border-radius: 6px; font-size: 0.85rem; font-weight: 600; cursor: pointer;">+ Nova Turma</button>
|
||
</div>
|
||
<div id="turmasList" style="display: flex; flex-direction: column; gap: 8px;">
|
||
<div style="color: var(--text-secondary); text-align: center; padding: 20px;">Carregando turmas...</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Lado Direito: Form Turma -->
|
||
<div id="turmaFormContainer" style="flex: 1.5; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; padding-left: 4px;">
|
||
<div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-light); padding-bottom: 8px;">
|
||
<h4 id="turmaFormTitle" style="margin: 0; color: var(--text-primary);">Cadastrar Turma</h4>
|
||
</div>
|
||
<input type="hidden" id="configTurmaId">
|
||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
|
||
<div class="settings-group">
|
||
<label>Nome da Turma</label>
|
||
<input type="text" id="configTurmaNome" placeholder="Ex: Berçário 2" class="obs-input" style="width: 100%;">
|
||
</div>
|
||
<div class="settings-group">
|
||
<label>Sala</label>
|
||
<input type="text" id="configTurmaSala" placeholder="Ex: Sala 4" class="obs-input" style="width: 100%;">
|
||
</div>
|
||
<div class="settings-group">
|
||
<label>Período</label>
|
||
<select id="configTurmaPeriodo" class="obs-select" style="width: 100%;">
|
||
<option value="Integral">Integral</option>
|
||
<option value="Matutino">Matutino</option>
|
||
<option value="Vespertino">Vespertino</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; border-top: 1px solid var(--border-light); padding-top: 16px;">
|
||
<div class="settings-group">
|
||
<label>Professora Titular</label>
|
||
<input type="text" id="configTurmaProfTitular" placeholder="Sua Titulação e Nome" class="obs-input" style="width: 100%;">
|
||
</div>
|
||
<div class="settings-group">
|
||
<label>Professora Auxiliar 1</label>
|
||
<input type="text" id="configTurmaProfAux1" placeholder="Nome da Prof. Auxiliar" class="obs-input" style="width: 100%;">
|
||
</div>
|
||
<div class="settings-group">
|
||
<label>Professora Auxiliar 2</label>
|
||
<input type="text" id="configTurmaProfAux2" placeholder="Nome da Prof. Auxiliar (Opcional)" class="obs-input" style="width: 100%;">
|
||
</div>
|
||
<div class="settings-group">
|
||
<label>Cuidadora</label>
|
||
<input type="text" id="configTurmaCuidadora" placeholder="Nome da Cuidadora (Opcional)" class="obs-input" style="width: 100%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display: flex; gap: 8px; justify-content: flex-end; border-top: 1px solid var(--border-light); padding-top: 16px; margin-top: auto;">
|
||
<button id="btnCancelTurma" style="background: none; border: 1px solid var(--border-light); color: var(--text-secondary); padding: 8px 16px; border-radius: 8px; cursor: pointer; font-size: 0.9rem;">Cancelar</button>
|
||
<button id="btnSaveTurmaConfig" style="background: var(--brand-green); border: none; color: white; padding: 10px 20px; border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 0.95rem;">Salvar Turma</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
<!-- SECÃO 2: ALUNOS DA TURMA -->
|
||
<div id="turmaAlunosSection" style="display: none; flex-direction: row; gap: 16px; flex: 1; height: 100%; overflow: hidden;">
|
||
<!-- Lado Esquerdo: Lista de Crianças e Filtro -->
|
||
<div style="flex: 1; border-right: 1px solid var(--border-light); padding-right: 16px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; height: 100%;">
|
||
<div style="display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--border-light); padding-bottom: 8px;">
|
||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||
<h4 style="margin: 0; color: var(--text-primary);">Lista de Crianças</h4>
|
||
<button id="btnCreateChild" style="background: var(--brand-green); color: white; border: none; padding: 6px 12px; border-radius: 6px; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: opacity 0.2s;">+ Nova Criança</button>
|
||
</div>
|
||
<div class="settings-group" style="margin-bottom: 0;">
|
||
<select id="filterAlunosTurma" class="obs-select" style="width: 100%; padding: 6px;">
|
||
<option value="">Todas as Turmas</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div id="childrenList" style="display: flex; flex-direction: column; gap: 8px;">
|
||
<!-- Carregado via JS -->
|
||
<div style="color: var(--text-secondary); text-align: center; padding: 20px;">Carregando alunos...</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Lado Direito: Formulário de Cadastro/Edição -->
|
||
<div id="childFormContainer" style="flex: 1.5; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; padding-left: 4px;">
|
||
<div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-light); padding-bottom: 8px;">
|
||
<h4 id="childFormTitle" style="margin: 0; color: var(--text-primary);">Cadastrar Criança</h4>
|
||
<button id="btnVoiceRecordChild" style="background: rgba(16, 163, 127, 0.1); border: 1px solid var(--brand-green); color: var(--brand-green); padding: 4px 8px; border-radius: 6px; font-size: 0.8rem; cursor: pointer; display: flex; align-items: center; gap: 4px;">
|
||
🎤 Preencher com Voz
|
||
</button>
|
||
</div>
|
||
<input type="hidden" id="childFormId">
|
||
|
||
<div class="settings-group" style="gap: 4px;">
|
||
<label style="color: var(--text-secondary); font-size: 0.8rem; font-weight: 500;">Turma do Aluno</label>
|
||
<select id="childFormTurma" class="obs-select" style="width: 100%;"></select>
|
||
</div>
|
||
|
||
<div class="settings-group" style="gap: 4px;">
|
||
<label style="color: var(--text-secondary); font-size: 0.8rem; font-weight: 500;">Nome Completo da Criança</label>
|
||
<input type="text" id="childFormNome" placeholder="Ex: João da Silva" class="obs-input" style="width: 100%;">
|
||
</div>
|
||
|
||
|
||
|
||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
|
||
<div class="settings-group" style="gap: 4px;">
|
||
<label style="color: var(--text-secondary); font-size: 0.8rem; font-weight: 500;">Apelido (Opcional)</label>
|
||
<input type="text" id="childFormApelido" placeholder="Ex: Joãozinho" class="obs-input" style="width: 100%;">
|
||
</div>
|
||
<div class="settings-group" style="gap: 4px;">
|
||
<label style="color: var(--text-secondary); font-size: 0.8rem; font-weight: 500;">Data de Nascimento</label>
|
||
<input type="date" id="childFormDataNasc" class="obs-input" style="width: 100%;">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="settings-group" style="gap: 4px;">
|
||
<label style="color: var(--text-secondary); font-size: 0.8rem; font-weight: 500;">Educação Especial?</label>
|
||
<div style="display: flex; gap: 10px; align-items: center; margin-top: 4px;">
|
||
<label style="display: flex; align-items: center; gap: 4px; color: var(--text-primary); cursor: pointer;"><input type="checkbox" id="childFormEspecial" style="cursor: pointer;"> Sim (Marcar se for Educação Especial)</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="settings-group" style="gap: 4px;" id="divEspecialDetalhes" style="display:none;">
|
||
<label style="color: var(--text-secondary); font-size: 0.8rem; font-weight: 500;">Diagnóstico / Observações da Educação Especial</label>
|
||
<input type="text" id="childFormEspecialDetalhes" placeholder="Ex: TEA, TDAH..." class="obs-input" style="width: 100%;">
|
||
</div>
|
||
|
||
<div class="settings-group" style="gap: 4px;">
|
||
<label style="color: var(--text-secondary); font-size: 0.8rem; font-weight: 500;">Nome dos Pais (Opcional)</label>
|
||
<input type="text" id="childFormPais" placeholder="Ex: Pedro e Ana" class="obs-input" style="width: 100%;">
|
||
</div>
|
||
|
||
<div class="settings-group" style="gap: 4px;">
|
||
<label style="color: var(--text-secondary); font-size: 0.8rem; font-weight: 500;">Autorizados a buscar (Máx 3: Nome e Parentesco)</label>
|
||
<textarea id="childFormAutorizados" placeholder="1. Carlos (Avô) 2. Maria (Tia) 3. ..." class="obs-input" style="width: 100%; min-height: 70px; resize: vertical;"></textarea>
|
||
</div>
|
||
|
||
<div style="display: flex; gap: 8px; justify-content: flex-end; border-top: 1px solid var(--border-light); padding-top: 12px; margin-top: auto;">
|
||
<button id="btnCancelChild" style="background: none; border: 1px solid var(--border-light); color: var(--text-secondary); padding: 8px 16px; border-radius: 8px; cursor: pointer; font-size: 0.9rem;">Cancelar</button>
|
||
<button id="btnSaveChild" style="background: var(--brand-green); border: none; color: white; padding: 8px 16px; border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 0.9rem;">Salvar Criança</button>
|
||
</div>
|
||
</div>
|
||
</div> <!-- Fim de turmaAlunosSection -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal: Modelos de Relatório (CRUD Templates) -->
|
||
<div id="modelosRelatorioModal" class="settings-modal" style="display: none;">
|
||
<div class="settings-modal-content" style="max-width: 800px; width: 95%; max-height: 90vh; display: flex; flex-direction: column;">
|
||
<div class="settings-modal-header">
|
||
<h3>📋 Modelos de Relatório</h3>
|
||
<button id="btnCloseModelosModal" class="btn-close-modal">
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<div class="settings-modal-body" style="padding: 16px; overflow: hidden; display: flex; flex-direction: row; gap: 16px; flex: 1; min-height: 420px;">
|
||
<!-- Lado Esquerdo: Lista de Modelos -->
|
||
<div style="flex: 1; border-right: 1px solid var(--border-light); padding-right: 16px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto;">
|
||
<div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-light); padding-bottom: 8px;">
|
||
<h4 style="margin: 0; color: var(--text-primary);">Modelos Salvos</h4>
|
||
<button id="btnCreateTemplate" style="background: var(--brand-green); color: white; border: none; padding: 6px 12px; border-radius: 6px; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: opacity 0.2s;">+ Novo Modelo</button>
|
||
</div>
|
||
<div id="templatesList" style="display: flex; flex-direction: column; gap: 8px;">
|
||
<!-- Carregado via JS -->
|
||
<div style="color: var(--text-secondary); text-align: center; padding: 20px;">Carregando modelos...</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Lado Direito: Formulário de Cadastro/Edição -->
|
||
<div id="templateFormContainer" style="flex: 1.2; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; padding-left: 4px;">
|
||
<h4 id="templateFormTitle" style="margin: 0; color: var(--text-primary); border-bottom: 1px solid var(--border-light); padding-bottom: 8px;">Editar Modelo</h4>
|
||
<input type="hidden" id="templateFormId">
|
||
|
||
<div class="settings-group" style="gap: 4px;">
|
||
<label style="color: var(--text-secondary); font-size: 0.8rem; font-weight: 500;">Nome do Modelo</label>
|
||
<input type="text" id="templateFormNome" placeholder="Ex: Relatório Semanal de Desenvolvimento" class="obs-input" style="width: 100%;">
|
||
</div>
|
||
|
||
<div class="settings-group" style="gap: 4px;">
|
||
<label style="color: var(--text-secondary); font-size: 0.8rem; font-weight: 500;">Finalidade</label>
|
||
<input type="text" id="templateFormFinalidade" placeholder="Ex: Avaliar a evolução socioemocional..." class="obs-input" style="width: 100%;">
|
||
</div>
|
||
|
||
<div class="settings-group" style="gap: 4px;">
|
||
<label style="color: var(--text-secondary); font-size: 0.8rem; font-weight: 500;">Periodicidade / Frequência</label>
|
||
<select id="templateFormPeriodicidade" class="obs-select" style="width: 100%;">
|
||
<option value="Semanal">Semanal</option>
|
||
<option value="Mensal">Mensal</option>
|
||
<option value="Semestral">Semestral</option>
|
||
<option value="Anual">Anual</option>
|
||
<option value="Outro">Outro</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="settings-group" style="flex: 1; display: flex; flex-direction: column; gap: 4px;">
|
||
<label style="color: var(--text-secondary); font-size: 0.8rem; font-weight: 500;">Estrutura do Relatório (Markdown / Diretrizes)</label>
|
||
<textarea id="templateFormEstrutura" placeholder="## Seção 1\n- Detalhe o comportamento...\n\n## Seção 2\n- Descreva a autonomia..." class="obs-input" style="width: 100%; flex: 1; min-height: 160px; font-family: monospace; resize: vertical; padding: 10px; line-height: 1.4;"></textarea>
|
||
</div>
|
||
|
||
<div style="display: flex; gap: 8px; justify-content: flex-end; border-top: 1px solid var(--border-light); padding-top: 12px; margin-top: auto;">
|
||
<button id="btnCancelTemplate" style="background: none; border: 1px solid var(--border-light); color: var(--text-secondary); padding: 8px 16px; border-radius: 8px; cursor: pointer; font-size: 0.9rem;">Cancelar</button>
|
||
<button id="btnSaveTemplate" style="background: var(--brand-green); border: none; color: white; padding: 8px 16px; border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 0.9rem;">Salvar Modelo</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal: Emitir Relatório (Geração com filtros e exportação) -->
|
||
<div id="emitirRelatorioModal" class="settings-modal" style="display: none;">
|
||
<div class="settings-modal-content" style="max-width: 800px; width: 95%; max-height: 90vh; display: flex; flex-direction: column;">
|
||
<div class="settings-modal-header">
|
||
<h3>📄 Emitir Relatório Pedagógico</h3>
|
||
<button id="btnCloseEmitirModal" class="btn-close-modal">
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<div class="settings-modal-body" style="padding: 16px; overflow: hidden; display: flex; flex-direction: column; gap: 12px; flex: 1;">
|
||
<!-- Filtros e Controles -->
|
||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; background: var(--bg-secondary); padding: 12px; border-radius: 12px; border: 1px solid var(--border-light);">
|
||
<div class="settings-group" style="gap: 4px;">
|
||
<label style="color: var(--text-secondary); font-size: 0.78rem; font-weight: 600;">Ano Letivo</label>
|
||
<select id="emitirFilterAno" class="obs-select" style="padding: 6px 10px;">
|
||
<option value="">Todos os anos</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="settings-group" style="gap: 4px;">
|
||
<label style="color: var(--text-secondary); font-size: 0.78rem; font-weight: 600;">Turma</label>
|
||
<select id="emitirFilterTurma" class="obs-select" style="padding: 6px 10px;">
|
||
<option value="">Todas as turmas</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="settings-group" style="gap: 4px;">
|
||
<label style="color: var(--text-secondary); font-size: 0.78rem; font-weight: 600;">Criança</label>
|
||
<select id="emitirFilterCrianca" class="obs-select" style="padding: 6px 10px;">
|
||
<option value="">Selecione a criança</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="settings-group" style="gap: 4px;">
|
||
<label style="color: var(--text-secondary); font-size: 0.78rem; font-weight: 600;">Data Início</label>
|
||
<input type="date" id="emitirFilterDataInicio" class="obs-input" style="padding: 5px 8px;">
|
||
</div>
|
||
|
||
<div class="settings-group" style="gap: 4px;">
|
||
<label style="color: var(--text-secondary); font-size: 0.78rem; font-weight: 600;">Data Fim</label>
|
||
<input type="date" id="emitirFilterDataFim" class="obs-input" style="padding: 5px 8px;">
|
||
</div>
|
||
|
||
<div class="settings-group" style="gap: 6px; grid-column: span 2;">
|
||
<label style="color: var(--text-secondary); font-size: 0.78rem; font-weight: 600;">Tags (Múltipla Seleção)</label>
|
||
<div id="emitirTagsContainer" style="display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0;">
|
||
<button type="button" class="tag-pill" data-tag="social">Social</button>
|
||
<button type="button" class="tag-pill" data-tag="cognitivo">Cognitivo</button>
|
||
<button type="button" class="tag-pill" data-tag="motor">Motor</button>
|
||
<button type="button" class="tag-pill" data-tag="linguagem">Linguagem</button>
|
||
<button type="button" class="tag-pill" data-tag="emocional">Emocional</button>
|
||
<button type="button" class="tag-pill" data-tag="colaborativo">Colaborativo</button>
|
||
<button type="button" class="tag-pill" data-tag="autônomo">Autônomo</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="settings-group" style="gap: 4px;">
|
||
<label style="color: var(--text-secondary); font-size: 0.78rem; font-weight: 600;">Modelo / Template</label>
|
||
<select id="emitirFilterTemplate" class="obs-select" style="padding: 6px 10px;">
|
||
<option value="">Selecione o modelo</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Estatísticas e Botão de Ação -->
|
||
<div style="display: flex; justify-content: space-between; align-items: center; padding: 0 4px;">
|
||
<span id="emitirObsCountInfo" style="color: var(--text-secondary); font-size: 0.88rem; font-weight: 500;">Selecione uma criança para buscar observações...</span>
|
||
<button id="btnGenerateCompiledReport" disabled style="background: var(--brand-green); color: white; border: none; padding: 8px 18px; border-radius: 8px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: opacity 0.2s; opacity: 0.6;">
|
||
<span>Gerar Relatório com IA</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Visualizador / Pré-visualização do Relatório Gerado -->
|
||
<div style="flex: 1; border: 1px solid var(--border-light); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; background: var(--bg-secondary);">
|
||
<div style="padding: 8px 16px; border-bottom: 1px solid var(--border-light); background: var(--bg-primary); display: flex; justify-content: space-between; align-items: center;">
|
||
<span style="font-weight: 600; font-size: 0.88rem; color: var(--text-primary);">Visualização do Relatório</span>
|
||
<div style="display: flex; gap: 8px;">
|
||
<button id="btnExportDocx" disabled style="background: none; border: 1px solid var(--border-light); color: var(--text-secondary); padding: 5px 12px; border-radius: 6px; font-size: 0.8rem; cursor: not-allowed; display: flex; align-items: center; gap: 4px; font-weight: 500; transition: all 0.2s;">
|
||
💾 DOCX
|
||
</button>
|
||
<button id="btnExportPdf" disabled style="background: none; border: 1px solid var(--border-light); color: var(--text-secondary); padding: 5px 12px; border-radius: 6px; font-size: 0.8rem; cursor: not-allowed; display: flex; align-items: center; gap: 4px; font-weight: 500; transition: all 0.2s;">
|
||
🖨️ PDF
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="emitirReportPreviewArea" style="flex: 1; padding: 16px; overflow-y: auto; color: var(--text-primary); line-height: 1.6; font-size: 0.95rem;">
|
||
<div style="color: var(--text-secondary); text-align: center; margin-top: 50px;">
|
||
Escolha uma criança e um modelo de relatório para começar.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Modal: Estúdio Musical (Criação de música cantada com MiniMax) -->
|
||
<div id="estudioMusicalModal" 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 Musical PedaGog</h3>
|
||
<div style="display: flex; gap: 10px; align-items: center;">
|
||
<button id="btnOpenEstudioHistory" class="btn-secondary" style="padding: 6px 12px; font-size: 0.85rem; border-radius: 6px; display: flex; align-items: center; gap: 6px; background: rgba(168, 85, 247, 0.1); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.2);">
|
||
🕒 Histórico
|
||
</button>
|
||
<button id="btnCloseEstudioModal" class="btn-close-modal" style="background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1.5rem;">×</button>
|
||
</div>
|
||
</div>
|
||
<div class="settings-modal-body" style="padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; flex: 1;">
|
||
|
||
<!-- VOZ -->
|
||
<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. Escolha a Voz do Canto</label>
|
||
<div class="music-option-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 8px; margin-top: 4px;">
|
||
<button type="button" class="btn-music-option active" data-voice="mulher">👩 Professora</button>
|
||
<button type="button" class="btn-music-option" data-voice="homem">👨 Professor</button>
|
||
<button type="button" class="btn-music-option" data-voice="crianca">🧒 Criança</button>
|
||
<button type="button" class="btn-music-option" data-voice="menina">👧 Menininha</button>
|
||
<button type="button" class="btn-music-option" data-voice="coral">🎶 Coral Infantil</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- RITMO -->
|
||
<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. Escolha o Ritmo da Cantiga</label>
|
||
<div class="music-option-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-top: 4px;">
|
||
<button type="button" class="btn-music-rhythm active" data-rhythm="roda">⭕ Cantiga de Roda</button>
|
||
<button type="button" class="btn-music-rhythm" data-rhythm="pop">⚡ Pop Infantil</button>
|
||
<button type="button" class="btn-music-rhythm" data-rhythm="ninar">🌙 Canção de Ninar</button>
|
||
<button type="button" class="btn-music-rhythm" data-rhythm="acustico">🎸 Alegre Acústico</button>
|
||
<button type="button" class="btn-music-rhythm" data-rhythm="marcha">🥁 Marcha Rítmica</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- DURAÇÃO -->
|
||
<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. Escolha a Duração da Música</label>
|
||
<div class="music-option-grid" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 4px;">
|
||
<button type="button" class="btn-music-duration active" data-duration="30s">⏱️ 30 segundos</button>
|
||
<button type="button" class="btn-music-duration" data-duration="1min">⏱️ 1 minuto</button>
|
||
<button type="button" class="btn-music-duration" data-duration="2min">⏱️ 2 minutos</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- TEMA -->
|
||
<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. Digite o Tema da Música</label>
|
||
<textarea id="musicTemaInput" placeholder="Ex: Higiene pessoal, lavar as mãos antes de comer, os sons dos 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>
|
||
|
||
<!-- BOTÃO GERAR E STATUS -->
|
||
<div style="display: flex; flex-direction: column; gap: 10px; margin-top: 8px;">
|
||
<button id="btnGenerateStudioMusic" style="background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%); color: white; border: none; padding: 12px; border-radius: 8px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: opacity 0.2s; box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25);">
|
||
<span>🎵 Gerar Canção Personalizada</span>
|
||
</button>
|
||
<div id="musicGenerateLoader" 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 id="musicLoaderText">Compondo a letra e gravando os vocais...</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ÁREA DE RESULTADO (INICIALMENTE OCULTA) -->
|
||
<div id="musicResultArea" 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 Canção Está Pronta!</h4>
|
||
|
||
<!-- Player de Áudio e Download MP3 -->
|
||
<div style="background: var(--bg-secondary); padding: 14px; border-radius: 12px; display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--border-light);">
|
||
<audio id="musicStudioAudioPlayer" controls style="width: 100%;"></audio>
|
||
<a id="musicStudioDownloadBtn" href="#" download="cantiga_pedagogica.mp3" class="btn-save-settings" style="display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; font-size: 0.9rem; padding: 10px; background: linear-gradient(135deg, var(--brand-green) 0%, #0a5f49 100%);">
|
||
📥 Baixar Música (MP3)
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Letra Transcrita -->
|
||
<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;">Letra da Música</label>
|
||
<div style="display: flex; gap: 8px;">
|
||
<button id="btnCopyMusicLyrics" 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 Letra</button>
|
||
<button id="btnDownloadMusicLyrics" 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 Letra (TXT)</button>
|
||
</div>
|
||
</div>
|
||
<pre id="musicStudioLyricsArea" style="background: var(--bg-secondary); padding: 14px; border-radius: 10px; max-height: 180px; overflow-y: auto; font-family: inherit; font-size: 0.92rem; line-height: 1.6; white-space: pre-wrap; border: 1px solid var(--border-light); color: var(--text-primary); margin: 0; box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);"></pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal: Histórico Estúdio Musical -->
|
||
<div id="estudioHistoryModal" class="settings-modal" style="display: none; z-index: 20000;">
|
||
<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 do Estúdio</h3>
|
||
<button id="btnCloseEstudioHistory" class="btn-close-modal" style="background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1.5rem;">×</button>
|
||
</div>
|
||
<div class="settings-modal-body" style="padding: 20px; overflow-y: auto; flex: 1;">
|
||
<div id="estudioHistoryList" style="display: flex; flex-direction: column; gap: 10px;">
|
||
<!-- Preenchido dinamicamente -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal: Estúdio de Poesia -->
|
||
<!-- ========================================== -->
|
||
<!-- MODAL: MUSICANDO IDEIAS (ESTÚDIO PROFISSIONAL) -->
|
||
<!-- ========================================== -->
|
||
<div id="musicaModal" class="settings-modal" style="display: none;">
|
||
<div class="settings-modal-content" style="max-width: 1050px; width: 95%; max-height: 92vh; display: flex; flex-direction: column;">
|
||
|
||
<!-- 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;">×</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 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;">
|
||
|
||
<!-- 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>
|
||
|
||
<!-- 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>
|
||
|
||
<!-- 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>
|
||
|
||
<!-- 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>👩 Professora Cantora (Doce & Acolhedora)</option>
|
||
<option value="homem">👨 Professor Cantor (Gentil & Melódico)</option>
|
||
<option value="crianca">🧒 Voz de Criança (Lúdica & Alegre)</option>
|
||
<option value="menina">👧 Menininha (Voz Infantil Meiga)</option>
|
||
<option value="coral">🎶 Coral das Crianças (Vozes em Coro)</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: 4px; height: 36px; padding: 6px 12px; background: rgba(0,0,0,0.3); border-radius: 8px; border: 1px solid rgba(168,85,247,0.25);">
|
||
<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: #c084fc; border-radius: 2px;"></div>
|
||
<div class="wave-bar" style="width: 4px; height: 90%; background: #e879f9; 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: #c084fc; border-radius: 2px;"></div>
|
||
<div class="wave-bar" style="width: 4px; height: 35%; background: #e879f9; 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: #c084fc; border-radius: 2px;"></div>
|
||
<div class="wave-bar" style="width: 4px; height: 95%; background: #e879f9; border-radius: 2px;"></div>
|
||
<div class="wave-bar" style="width: 4px; height: 40%; background: #a855f7; border-radius: 2px;"></div>
|
||
<div class="wave-bar" style="width: 4px; height: 70%; background: #c084fc; border-radius: 2px;"></div>
|
||
<div class="wave-bar" style="width: 4px; height: 30%; background: #a855f7; border-radius: 2px;"></div>
|
||
</div>
|
||
|
||
<!-- Barra de Progresso Roxo Vibrante Interativa -->
|
||
<div id="musicaProgressBox" style="display: flex; flex-direction: column; gap: 6px; margin-top: 4px;">
|
||
<div id="musicaCustomProgressContainer" style="position: relative; width: 100%; height: 10px; background: rgba(255,255,255,0.12); border-radius: 6px; cursor: pointer; overflow: hidden; border: 1px solid rgba(168,85,247,0.3); box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);">
|
||
<div id="musicaCustomProgressBar" style="position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: linear-gradient(90deg, #9333ea 0%, #a855f7 50%, #c084fc 100%); border-radius: 6px; box-shadow: 0 0 12px rgba(168,85,247,0.85); transition: width 0.1s linear;"></div>
|
||
</div>
|
||
<div style="display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; color: #c084fc; font-weight: 600;">
|
||
<span id="musicaCurrentTime">0:00</span>
|
||
<span style="font-size: 0.7rem; color: var(--text-secondary);">🟣 Barra de Reprodução Musical</span>
|
||
<span id="musicaDurationTime">0:00</span>
|
||
</div>
|
||
</div>
|
||
|
||
<audio id="musicaAudioPlayer" controls style="width: 100%; margin-top: 2px; accent-color: #a855f7;"></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: 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;">×</button>
|
||
</div>
|
||
<div id="musicaHistoryList" style="padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; flex: 1;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ========================================== -->
|
||
<!-- MODAL: INVENTANDO HISTÓRIAS (ESTÚDIO PROFISSIONAL) -->
|
||
<!-- ========================================== -->
|
||
<div id="historiaModal" class="settings-modal" style="display: none;">
|
||
<div class="settings-modal-content" style="max-width: 1080px; 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);">Inventando Histórias • Estúdio PedagogIA</h3>
|
||
<span style="font-size: 0.75rem; color: var(--text-secondary);">Narrativa em 3 atos, personagens da turma, ilustrações por cena e áudio narrado</span>
|
||
</div>
|
||
</div>
|
||
<div style="display: flex; gap: 8px; align-items: center;">
|
||
<button type="button" id="btnOpenHistoriaHistory" style="background: rgba(16, 185, 129, 0.12); border: 1px solid rgba(16, 185, 129, 0.3); color: #34d399; 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="btnCloseHistoriaModal" class="btn-close-modal" style="background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1.5rem; line-height: 1;">×</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 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;">
|
||
|
||
<!-- Lado Esquerdo: Criação & Parâmetros Narrativos -->
|
||
<div id="historiaLeftPanel" 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. Inspiração & Personagens</h4>
|
||
|
||
<!-- TEMPLATES RÁPIDOS DE HISTÓRIA -->
|
||
<div class="settings-group">
|
||
<label style="color: var(--text-secondary); font-size: 0.75rem; font-weight: 600; text-transform: uppercase;">Modelos de História (Templates)</label>
|
||
<select id="historiaTemplateSelect" class="obs-select" style="width: 100%; margin-top: 4px; color: #10b981; font-weight: 600;">
|
||
<option value="">✨ Escolha um modelo de história...</option>
|
||
<option value="arca">📦 A Arca da Imaginação e as Descobertas</option>
|
||
<option value="horta">🌱 O Mistério da Horta Encantada</option>
|
||
<option value="dinossauro">🦖 O Pequeno Dinossauro que Queria Amigos</option>
|
||
<option value="chuva">🌧️ O Dia em que a Chuva Dançou no Parque</option>
|
||
<option value="bolhas">🧼 O Reino Mágico das Bolhas de Sabão</option>
|
||
<option value="brinquedos">🧸 A Grande Aventura dos Brinquedos Perdidos</option>
|
||
<option value="emocoes">💖 O Monstrinho das Cores e dos Sentimentos</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- TURMA & PERSONAGEM PRINCIPAL -->
|
||
<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="historiaTurmaSelect" 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;">Personagem da Turma</label>
|
||
<input type="text" id="historiaPersonagemInput" placeholder="Ex: João, Maria, toda a turma..." class="obs-input" style="width: 100%; margin-top: 4px; padding: 8px;">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- OBJETO MÁGICO / ELEMENTO DISPARADOR -->
|
||
<div class="settings-group">
|
||
<label style="color: var(--text-secondary); font-size: 0.75rem; font-weight: 600; text-transform: uppercase;">Objeto Mágico ou Elemento Disparador</label>
|
||
<input type="text" id="historiaObjetoMagicoInput" value="Arca da Imaginação" placeholder="Ex: Arca mágica, semente brilhante, lupa encantada..." class="obs-input" style="width: 100%; margin-top: 4px; padding: 8px;">
|
||
</div>
|
||
|
||
<!-- TEMA / ENREDO -->
|
||
<div class="settings-group">
|
||
<label style="color: var(--text-secondary); font-size: 0.75rem; font-weight: 600; text-transform: uppercase;">Tema / Enredo da História</label>
|
||
<textarea id="historiaTemaInput" placeholder="Ex: Crianças encontram uma arca mágica no quintal da escola e precisam cooperar para descobrir os segredos..." class="obs-input" style="width: 100%; min-height: 55px; padding: 8px; margin-top: 4px; font-size: 0.85rem; resize: vertical;"></textarea>
|
||
</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 Narrativa & Estilo Visual</h4>
|
||
|
||
<!-- IDADE & ESTRUTURA DOS ATOS -->
|
||
<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;">Faixa Etária</label>
|
||
<select id="historiaFaixaEtaria" 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 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;">Cenas / Atos</label>
|
||
<select id="historiaParagrafos" class="obs-select" style="width: 100%; margin-top: 4px;">
|
||
<option value="3" selected>🎬 3 Cenas (Ato 1, Ato 2, Ato 3)</option>
|
||
<option value="4">🎬 4 Cenas Narrativas</option>
|
||
<option value="5">🎬 5 Cenas Detalhadas</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ESTILO NARRATIVO & ESTILO VISUAL -->
|
||
<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;">Estilo Narrativo</label>
|
||
<select id="historiaEstilo" class="obs-select" style="width: 100%; margin-top: 4px;">
|
||
<option value="Lúdico, Afetivo e Dialogado" selected>💬 Lúdico & Dialogado</option>
|
||
<option value="Contação Clássica com Suspense Leve">📖 Contação Clássica</option>
|
||
<option value="Roda de Conversa Interativa">🗣️ Interativo para Roda</option>
|
||
<option value="Aventura e Descoberta na Escola">🚀 Aventura & Cooperação</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 das Ilustrações</label>
|
||
<select id="historiaEstiloVisual" class="obs-select" style="width: 100%; margin-top: 4px;">
|
||
<option value="Cartoon colorido e acolhedor" selected>🎨 Cartoon Colorido</option>
|
||
<option value="Aquarela suave infantil">🖌️ Aquarela Suave</option>
|
||
<option value="Livro infantil clássico e detalhado">📚 Livro Infantil Clássico</option>
|
||
<option value="Giz de cera e textura lúdica">🖍️ Giz de Cera Infantil</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- BOTÃO GERAR HISTÓRIA -->
|
||
<button type="button" id="btnGenerateHistoria" style="width: 100%; padding: 12px; background: linear-gradient(135deg, #10b981 0%, #059669 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(16, 185, 129, 0.3); transition: all 0.2s; margin-top: 6px;">
|
||
<span>📖 Inventar História Mágica (3 Atos + Cenas)</span>
|
||
</button>
|
||
|
||
<div id="historiaGenerateLoader" 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: #10b981;"></div>
|
||
<span id="historiaLoaderText">Construindo narrativa em 3 atos e áudio...</span>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- Lado Direito: Visualizador de Cenas, Ilustrações e Leitor -->
|
||
<div id="historiaRightPanel" 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;">📚 Livro de Histórias & Cenas</h4>
|
||
<div id="historiaBnccBadge" style="display: none; font-size: 0.72rem; background: rgba(16, 185, 129, 0.15); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3); padding: 3px 8px; border-radius: 6px; font-weight: 600;">
|
||
BNCC: EI02EF04
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ÁREA DO PLAYER DE ÁUDIO NARRADO -->
|
||
<div id="historiaAudioPlayerBox" style="display: none; background: linear-gradient(135deg, rgba(16,185,129,0.12), rgba(59,130,246,0.08)); border: 1px solid rgba(16,185,129,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="historiaPlayerTitle">Narração por PedagogIA</div>
|
||
<div style="font-size: 0.72rem; color: var(--text-secondary);">Contação de Histórias • Formato MP3</div>
|
||
</div>
|
||
</div>
|
||
<div style="display: flex; gap: 6px; align-items: center;">
|
||
<a id="btnDownloadHistoriaAudio" href="#" download="historia_narrada.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 Narração
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Waveform / Equalizer Animado -->
|
||
<div id="historiaWaveformVisualizer" 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-historia" style="width: 4px; height: 30%; background: #10b981; border-radius: 2px;"></div>
|
||
<div class="wave-bar wave-bar-historia" style="width: 4px; height: 60%; background: #10b981; border-radius: 2px;"></div>
|
||
<div class="wave-bar wave-bar-historia" style="width: 4px; height: 90%; background: #10b981; border-radius: 2px;"></div>
|
||
<div class="wave-bar wave-bar-historia" style="width: 4px; height: 45%; background: #10b981; border-radius: 2px;"></div>
|
||
<div class="wave-bar wave-bar-historia" style="width: 4px; height: 75%; background: #10b981; border-radius: 2px;"></div>
|
||
<div class="wave-bar wave-bar-historia" style="width: 4px; height: 35%; background: #10b981; border-radius: 2px;"></div>
|
||
<div class="wave-bar wave-bar-historia" style="width: 4px; height: 85%; background: #10b981; border-radius: 2px;"></div>
|
||
<div class="wave-bar wave-bar-historia" style="width: 4px; height: 50%; background: #10b981; border-radius: 2px;"></div>
|
||
<div class="wave-bar wave-bar-historia" style="width: 4px; height: 95%; background: #10b981; border-radius: 2px;"></div>
|
||
<div class="wave-bar wave-bar-historia" style="width: 4px; height: 40%; background: #10b981; border-radius: 2px;"></div>
|
||
</div>
|
||
|
||
<audio id="historiaAudioPlayer" controls style="width: 100%; margin-top: 2px;"></audio>
|
||
</div>
|
||
|
||
<!-- ABAS DE NAVEGAÇÃO -->
|
||
<div id="historiaContentTabs" style="display: none; gap: 6px; border-bottom: 1px solid var(--border-light); padding-bottom: 8px;">
|
||
<button type="button" id="btnTabHistoriaCenas" class="tab-btn active" style="font-size: 0.78rem; padding: 6px 12px; background: rgba(16,185,129,0.15); border: none; cursor: pointer; color: #34d399; border-radius: 6px; font-weight: bold;">🎬 Cenas & Ilustrações</button>
|
||
<button type="button" id="btnTabHistoriaTexto" class="tab-btn" style="font-size: 0.78rem; padding: 6px 12px; background: transparent; border: none; cursor: pointer; color: var(--text-secondary); border-radius: 6px;">📖 História Completa</button>
|
||
<button type="button" id="btnTabHistoriaAtividades" class="tab-btn" style="font-size: 0.78rem; padding: 6px 12px; background: transparent; border: none; cursor: pointer; color: var(--text-secondary); border-radius: 6px;">🧩 Perguntas & BNCC</button>
|
||
</div>
|
||
|
||
<!-- ÁREA DO CONTEÚDO ATIVO -->
|
||
<div id="historiaDisplayArea" style="display: flex; flex-direction: column; gap: 12px; flex: 1;">
|
||
|
||
<div id="historiaPlaceholderText" 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 inventar uma história inesquecível?</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 "Inventar História" para gerar os atos narrativos, ilustrações e áudio narrado.</p>
|
||
</div>
|
||
|
||
<!-- CONTAINER DA HISTÓRIA ATIVA -->
|
||
<div id="historiaActiveBox" 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; flex-wrap: wrap; gap: 8px;">
|
||
<div>
|
||
<h4 id="historiaActiveTitle" style="margin: 0; color: #10b981; font-size: 1.05rem; font-family: 'Fredoka', sans-serif;">Título da História</h4>
|
||
<span id="historiaActiveSubtitle" style="font-size: 0.72rem; color: var(--text-secondary);">Personagem: João • 3 Cenas</span>
|
||
</div>
|
||
<div style="display: flex; gap: 6px;">
|
||
<button type="button" id="btnCopyActiveHistoria" 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 história">📋 Copiar</button>
|
||
<button type="button" id="btnDownloadActiveHistoriaTxt" 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="btnSendHistoriaToMusic" 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="Criar música desta história">🎵 Musicar</button>
|
||
<button type="button" id="btnExportActiveHistoriaPdf" style="background: #10b981; 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>
|
||
|
||
<!-- VIEW 1: LEITOR INTERATIVO DE CENAS COM ILUSTRAÇÕES -->
|
||
<div id="historiaCenasView" style="display: flex; flex-direction: column; gap: 12px;">
|
||
|
||
<!-- Barra de Navegação entre Cenas -->
|
||
<div style="display: flex; justify-content: space-between; align-items: center; background: rgba(0,0,0,0.12); padding: 6px 12px; border-radius: 8px;">
|
||
<button type="button" id="btnPrevCena" style="background: transparent; border: 1px solid var(--border-light); color: var(--text-primary); padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; cursor: pointer;">◀ Cena Anterior</button>
|
||
<span id="historiaCenaIndicator" style="font-size: 0.8rem; font-weight: 700; color: #34d399;">Cena 1 de 3</span>
|
||
<button type="button" id="btnNextCena" style="background: transparent; border: 1px solid var(--border-light); color: var(--text-primary); padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; cursor: pointer;">Próxima Cena ▶</button>
|
||
</div>
|
||
|
||
<!-- Card da Cena Atual -->
|
||
<div id="historiaCenaCard" style="display: flex; flex-direction: column; gap: 10px; background: rgba(0,0,0,0.06); padding: 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.05);">
|
||
|
||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||
<h5 id="historiaCenaTitle" style="margin: 0; color: #34d399; font-size: 0.95rem;">Ato 1: O Descobrimento</h5>
|
||
<button type="button" id="btnGenerateSceneImage" style="background: rgba(59,130,246,0.15); border: 1px solid rgba(59,130,246,0.3); color: #60a5fa; padding: 4px 8px; border-radius: 6px; font-size: 0.72rem; cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 4px;">
|
||
🎨 Gerar Ilustração
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Container da Imagem da Cena -->
|
||
<div id="historiaCenaImageContainer" style="display: none; width: 100%; border-radius: 10px; overflow: hidden; border: 1px solid var(--border-light); text-align: center; background: rgba(0,0,0,0.3); margin: 6px 0;">
|
||
<img id="historiaCenaImg" src="" alt="Ilustração da Cena" style="max-height: 280px; width: 100%; object-fit: contain; cursor: pointer; border-radius: 8px;" title="Clique para abrir imagem em tela cheia">
|
||
<div style="display: flex; justify-content: center; gap: 8px; padding: 6px; background: rgba(0,0,0,0.4);">
|
||
<a id="historiaCenaOpenBtn" href="#" target="_blank" class="btn-music-option" style="padding: 4px 10px; font-size: 0.75rem; margin: 0; text-decoration: none; color: #60a5fa; border-color: rgba(59,130,246,0.3);">🔍 Ver em Tela Cheia</a>
|
||
<a id="historiaCenaDownloadBtn" href="#" download="ilustracao_cena.jpg" class="btn-music-option" style="padding: 4px 10px; font-size: 0.75rem; margin: 0; text-decoration: none; color: #34d399; border-color: rgba(52,211,153,0.3);">📥 Baixar Ilustração</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Texto da Cena -->
|
||
<div id="historiaCenaText" style="font-family: 'Fredoka', 'Outfit', sans-serif; font-size: 1.05rem; line-height: 1.7; color: var(--text-primary); white-space: pre-wrap; max-height: 220px; overflow-y: auto;"></div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- VIEW 2: HISTÓRIA COMPLETA -->
|
||
<div id="historiaTextoView" style="display: none; 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: 300px; overflow-y: auto;"></div>
|
||
|
||
<!-- VIEW 3: ATIVIDADES & BNCC -->
|
||
<div id="historiaAtividadesView" style="display: none; flex-direction: column; gap: 12px;">
|
||
<div style="background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.2); border-radius: 8px; padding: 12px; font-size: 0.85rem; color: #a7f3d0; line-height: 1.5;">
|
||
<strong>🎯 Objetivos de Aprendizagem & BNCC:</strong><br>
|
||
<span id="historiaBnccDesc">EI02EF04 / EI03EF05 • Escuta, Fala, Pensamento e Imaginação</span>
|
||
</div>
|
||
<div style="background: rgba(255,255,255,0.03); border: 1px solid var(--border-light); border-radius: 8px; padding: 14px;">
|
||
<strong style="color: #34d399; font-size: 0.88rem; display: block; margin-bottom: 8px;">🧩 Perguntas de Compreensão & Roda de Conversa:</strong>
|
||
<div id="historiaPerguntasList" style="display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; color: var(--text-primary); line-height: 1.4;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal: Histórico de Histórias -->
|
||
<div id="historiaHistoryModal" 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: #34d399;">🕒 Histórico de Histórias Geradas</h3>
|
||
<button type="button" id="btnCloseHistoriaHistory" class="btn-close-modal" style="background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1.5rem; line-height: 1;">×</button>
|
||
</div>
|
||
<div id="historiaHistoryList" style="padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; flex: 1;"></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>
|
||
<div style="display: flex; gap: 10px; align-items: center;">
|
||
<button id="btnOpenMindLabHistory" class="btn-secondary" style="padding: 6px 12px; font-size: 0.85rem; border-radius: 6px; display: flex; align-items: center; gap: 6px; background: rgba(139, 92, 246, 0.1); color: #a78bfa; border: 1px solid rgba(139, 92, 246, 0.2);">
|
||
🕒 Histórico
|
||
</button>
|
||
<button id="btnCloseMindLabModal" class="btn-close-modal" style="background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1.5rem;">×</button>
|
||
</div>
|
||
</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 id="mindLabResultArea" style="display: none; margin-top: 15px; border-top: 1px solid var(--border-light); padding-top: 15px;">
|
||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
|
||
<label style="color: var(--text-secondary); font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">Planejamento Gerado:</label>
|
||
<div style="display: flex; gap: 8px;">
|
||
<button id="btnCopyMindLab" class="btn-secondary" style="padding: 6px 12px; font-size: 0.85rem;">📋 Copiar</button>
|
||
<button id="btnPdfMindLab" class="btn-secondary" style="padding: 6px 12px; font-size: 0.85rem;">📄 PDF</button>
|
||
</div>
|
||
</div>
|
||
<div id="mindLabOutput" style="background: var(--bg-tertiary); padding: 15px; border-radius: 8px; white-space: pre-wrap; font-size: 0.95rem; line-height: 1.5; color: var(--text-primary); max-height: 300px; overflow-y: auto;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal: Histórico Mind Lab -->
|
||
<div id="mindLabHistoryModal" class="settings-modal" style="display: none; z-index: 20000;">
|
||
<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 Mind Lab</h3>
|
||
<button id="btnCloseMindLabHistory" class="btn-close-modal" style="background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1.5rem;">×</button>
|
||
</div>
|
||
<div class="settings-modal-body" style="padding: 20px; overflow-y: auto; flex: 1;">
|
||
<div id="mindLabHistoryList" style="display: flex; flex-direction: column; gap: 10px;">
|
||
<!-- Preenchido dinamicamente -->
|
||
</div>
|
||
</div>
|
||
</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: 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;">×</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 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;">
|
||
|
||
<!-- Lado Esquerdo: Parâmetros & Criação -->
|
||
<div id="poesiaLeftPanel" 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. 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 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>
|
||
<option value="menina">👧 Menininha (Doce & Expressiva)</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: 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;">×</button>
|
||
</div>
|
||
<div id="poesiaHistoryList" style="padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; flex: 1;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal: Fábrica de Quadrinhos (Criação de histórias pedagógicas visuais) -->
|
||
<div id="fabricaQuadrinhosModal" class="settings-modal" style="display: none;">
|
||
<div class="settings-modal-content" style="max-width: 800px; 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;">🎨 Fábrica de Quadrinhos PedaGog</h3>
|
||
<button id="btnCloseComicsModal" class="btn-close-modal" style="background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1.5rem;">×</button>
|
||
</div>
|
||
<div class="settings-modal-body" style="padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; flex: 1;">
|
||
|
||
<!-- GERENCIADOR DE PROJETOS -->
|
||
<div style="background: rgba(255,255,255,0.03); border: 1px solid var(--border-light); padding: 14px; border-radius: 12px; display: flex; flex-direction: column; gap: 10px;">
|
||
<label style="color: var(--text-secondary); font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">📁 Meus Projetos de Quadrinhos</label>
|
||
<div class="comics-project-row" style="display: flex; gap: 10px; align-items: center;">
|
||
<select id="comicsProjectSelect" class="obs-select" style="flex: 1; padding: 8px 12px; font-size: 0.9rem;">
|
||
<option value="">-- Carregar projeto salvo... --</option>
|
||
</select>
|
||
<button type="button" id="btnNewComicsProject" class="btn-music-option" style="padding: 8px 14px; font-size: 0.82rem; border-color: var(--text-secondary); color: var(--text-primary); background: transparent; margin: 0; white-space: nowrap;">✨ Novo</button>
|
||
<button type="button" id="btnDeleteComicsProject" class="btn-music-option" style="padding: 8px 14px; font-size: 0.82rem; border-color: #ef4444; color: #ef4444; background: rgba(239, 68, 68, 0.05); margin: 0; white-space: nowrap; display: none;">🗑️ Excluir</button>
|
||
</div>
|
||
|
||
<div class="comics-project-row" style="display: flex; align-items: center; gap: 10px;">
|
||
<input type="text" id="comicsProjectTitleInput" class="obs-input" placeholder="Título do Projeto (Ex: Lucas e Mariana no Parque)" style="flex: 1; margin: 0; padding: 8px 12px; font-size: 0.9rem;">
|
||
<button type="button" id="btnSaveComicsProject" class="btn-music-option" style="padding: 8px 14px; font-size: 0.82rem; border-color: #10a37f; color: white; background: #10a37f; margin: 0; white-space: nowrap; font-weight: 600; display: none;">💾 Salvar Alterações</button>
|
||
<button type="button" id="btnSaveNewComicsProject" class="btn-music-option" style="padding: 8px 14px; font-size: 0.82rem; border-color: var(--brand-pink); color: white; background: var(--brand-pink); margin: 0; white-space: nowrap; font-weight: 600;">💾 Salvar como Novo</button>
|
||
</div>
|
||
|
||
<!-- MODO DE CONTINUIDADE (Apenas quando um projeto é carregado) -->
|
||
<div id="comicsGenerationModeContainer" style="display: none; border-top: 1px dashed var(--border-light); padding-top: 10px; flex-direction: column; gap: 8px;">
|
||
<label style="color: var(--text-secondary); font-size: 0.82rem; font-weight: 600;">AÇÃO PARA A PRÓXIMA GERAÇÃO:</label>
|
||
<div style="display: flex; flex-direction: column; gap: 8px; background: rgba(0,0,0,0.15); padding: 10px; border-radius: 8px;">
|
||
<label style="display: flex; align-items: center; gap: 8px; font-size: 0.85rem; cursor: pointer; color: var(--text-primary);">
|
||
<input type="radio" name="comicsGenMode" value="new_story" checked style="cursor: pointer;">
|
||
<span>🆕 <strong>Criar Nova História baseada neste Projeto</strong> (Começa do Quadro 1 com os mesmos personagens, salvando como outro projeto)</span>
|
||
</label>
|
||
<label style="display: flex; align-items: center; gap: 8px; font-size: 0.85rem; cursor: pointer; color: var(--text-primary);">
|
||
<input type="radio" name="comicsGenMode" value="extend" style="cursor: pointer;">
|
||
<span>➡️ <strong>Continuar a História Existente (Estender)</strong> (Cria mais 5 quadros sequenciais, dando sequência a esta história)</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- TEMA -->
|
||
<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. Tema da História</label>
|
||
<textarea id="comicsTemaInput" class="obs-textarea" placeholder="Ex: Lucas e Mariana aprendendo a compartilhar seus brinquedos..." style="margin-top: 4px; height: 60px; min-height: 60px;"></textarea>
|
||
</div>
|
||
|
||
<!-- OPÇÕES RÁPIDAS (QUANTIDADE, BALÕES, PROPORÇÃO) -->
|
||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px;">
|
||
|
||
<!-- QUANTIDADE -->
|
||
<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. Tamanho</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-comics-qty active" data-qty="5">5 Quadros</button>
|
||
<button type="button" class="btn-music-option btn-comics-qty" data-qty="10">10 Quadros</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- BALÕES DE FALAS -->
|
||
<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. Falas / Legendas</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-comics-bubbles active" data-bubbles="true">Com Falas</button>
|
||
<button type="button" class="btn-music-option btn-comics-bubbles" data-bubbles="false">Sem Texto</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- PROPORÇÃO -->
|
||
<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. Formato Visual</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-comics-ratio active" data-ratio="16:9">16:9 (HD)</button>
|
||
<button type="button" class="btn-music-option btn-comics-ratio" data-ratio="4:3">4:3 (Retrô)</button>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- 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; flex-wrap: wrap; gap: 6px;">
|
||
<span>5. Personagens da História</span>
|
||
<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>
|
||
</label>
|
||
|
||
<!-- Lista Dinâmica de Personagens -->
|
||
<div id="comicsCharListContainer" style="display: flex; flex-direction: column; gap: 8px; margin-top: 6px;">
|
||
<!-- Itens adicionados dinamicamente por JavaScript -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CENÁRIO -->
|
||
<div class="settings-group">
|
||
<label style="color: var(--text-secondary); font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">6. Cenário da História</label>
|
||
<div style="display: flex; gap: 10px; margin-top: 4px;">
|
||
<select id="comicsCenarioSelect" class="obs-select" style="flex: 1;">
|
||
<option value="no parque de diversões colorido">No Parque de Diversões</option>
|
||
<option value="na sala de aula da escola infantil">Na Sala de Aula</option>
|
||
<option value="em uma floresta encantada cheia de flores">Na Floresta Encantada</option>
|
||
<option value="no zoológico interagindo com animais">No Zoológico</option>
|
||
<option value="num jardim ensolarado de uma casa">No Jardim de Casa</option>
|
||
<option value="custom">Outro cenário (descreva abaixo)...</option>
|
||
</select>
|
||
</div>
|
||
<input type="text" id="comicsCenarioCustomInput" class="obs-input" placeholder="Descreva o cenário personalizado..." style="margin-top: 8px; display: none;">
|
||
</div>
|
||
|
||
<!-- 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 (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: 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 (STORYBOARD STUDIO) -->
|
||
<div id="comicsResultArea" style="display: none; flex-direction: column; gap: 18px;">
|
||
|
||
<!-- 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 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 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;">📥 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);">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 com Música:</span>
|
||
|
||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px;">
|
||
<div class="settings-group" style="gap: 4px;">
|
||
<label style="font-size: 0.72rem; color: var(--text-secondary); font-weight: 600;">🎙️ Voz da Narração (IA)</label>
|
||
<select id="comicsVideoVoice" class="obs-select" style="padding: 6px 10px; font-size: 0.8rem;">
|
||
<option value="mulher" selected>👩 Mulher (Voz da Assistente Pedagog)</option>
|
||
<option value="homem">👨 Homem (Voz do Antônio)</option>
|
||
<option value="none">🔇 Apenas Trilha Musical (Sem Voz)</option>
|
||
</select>
|
||
</div>
|
||
<div class="settings-group" style="gap: 4px;">
|
||
<label style="font-size: 0.72rem; color: var(--text-secondary); font-weight: 600; display: flex; justify-content: space-between; align-items: center;">
|
||
<span>🎵 Trilha Sonora de Fundo</span>
|
||
<span id="comicsMusicPlayingTag" style="font-size: 0.7rem; color: #10a37f; display: none;">🔊 Tocando...</span>
|
||
</label>
|
||
<div style="display: flex; gap: 6px; align-items: center;">
|
||
<select id="comicsVideoMusic" class="obs-select" style="padding: 6px 8px; font-size: 0.8rem; flex: 1;">
|
||
<optgroup label="🎸 Alegres & Brincalhonas">
|
||
<option value="alegre" selected>🎸 Alegre e Brincalhona</option>
|
||
<option value="festa">🎈 Dia de Festa & Balões</option>
|
||
<option value="pipoca">🍿 Pula Pula Pipoquinha</option>
|
||
<option value="passeio">🚲 Passeio no Parque</option>
|
||
</optgroup>
|
||
<optgroup label="🌙 Calmas & Canções de Ninar">
|
||
<option value="calma">🌙 Calma e Relaxante</option>
|
||
<option value="ninar">⭐ Estrelinha Brilhante (Ninar)</option>
|
||
<option value="bebes">🍼 Melodia Suave do Berço</option>
|
||
<option value="amizade">🤝 Abraço de Amigo & Carinho</option>
|
||
</optgroup>
|
||
<optgroup label="✨ Contos de Fadas & Magia">
|
||
<option value="magica">✨ Terra da Fantasia & Magia</option>
|
||
<option value="castelo">🏰 Castelo dos Contos de Fadas</option>
|
||
<option value="carrossel">🎠 Carrossel Encantado</option>
|
||
<option value="brinquedos">🧸 Fábrica de Brinquedos</option>
|
||
<option value="circo">🎪 Circo Encantado & Palhacinhos</option>
|
||
</optgroup>
|
||
<optgroup label="🎮 Aventuras & Curiosidade">
|
||
<option value="aventura">🎮 Aventura na Floresta</option>
|
||
<option value="curiosa">🔍 Pequenos Detetives</option>
|
||
<option value="herois">🦸 Mini Super-Heróis</option>
|
||
<option value="espaco">🚀 Viagem ao Espaço Sideral</option>
|
||
</optgroup>
|
||
<optgroup label="🍃 Natureza & Bichinhos">
|
||
<option value="animais">🐾 Fazendinha dos Bichinhos</option>
|
||
<option value="jardim">🌸 Jardim das Borboletas</option>
|
||
<option value="mar">🐬 Ondinhas do Mar & Golfinhos</option>
|
||
<option value="natureza">🍃 Sons Doces da Natureza</option>
|
||
<option value="chuva">🌧️ Gotinhas de Chuva Dançantes</option>
|
||
</optgroup>
|
||
<optgroup label="🔇 Sem Áudio">
|
||
<option value="sem_musica">🔇 Sem Música de Fundo</option>
|
||
</optgroup>
|
||
</select>
|
||
<button type="button" id="btnPreviewComicsMusic" class="btn-music-option" style="padding: 6px 10px; font-size: 0.8rem; margin: 0; background: rgba(219, 39, 119, 0.1); border-color: var(--brand-pink); color: var(--brand-pink); font-weight: 600; white-space: nowrap; display: flex; align-items: center; gap: 4px;" title="Ouvir prévia desta trilha sonora">
|
||
<span id="comicsMusicPreviewIcon">▶️</span> <span id="comicsMusicPreviewText">Ouvir</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="settings-group" style="gap: 4px;">
|
||
<label style="font-size: 0.72rem; color: var(--text-secondary); font-weight: 600;">⏱️ Tempo Mínimo / Cena</label>
|
||
<select id="comicsVideoDuration" class="obs-select" style="padding: 6px 10px; font-size: 0.8rem;">
|
||
<option value="5" selected>⏱️ 5 segundos</option>
|
||
<option value="8">⏱️ 8 segundos</option>
|
||
<option value="10">⏱️ 10 segundos</option>
|
||
</select>
|
||
</div>
|
||
</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>🎬 Compilar Apresentação de Vídeo (MP4)</span>
|
||
</button>
|
||
|
||
<!-- Spinner do Vídeo -->
|
||
<div id="comicsVideoLoader" style="display: none; align-items: center; gap: 10px; justify-content: center; padding: 12px; background: var(--bg-primary); border-radius: 8px; border: 1px dashed var(--border-light);">
|
||
<div class="media-spinner" style="width: 20px; height: 20px; border-width: 2.5px; border-top-color: var(--brand-pink, #db2777);"></div>
|
||
<span style="font-size: 0.82rem; color: var(--text-secondary); font-weight: 500;">FFmpeg compilando a apresentação musical...</span>
|
||
</div>
|
||
|
||
<!-- Vídeo Player de Saída -->
|
||
<div id="comicsVideoResult" style="display: none; flex-direction: column; align-items: center; gap: 10px; margin-top: 10px;">
|
||
<video id="comicsVideoPlayer" controls style="width: 100%; max-width: 480px; border-radius: 8px; border: 1px solid var(--border-light); background: black;"></video>
|
||
<a id="comicsVideoDownloadBtn" href="" download="apresentacao_quadrinhos.mp4" class="btn-music-option" style="width: 100%; max-width: 480px; text-decoration: none; border-color: var(--brand-pink); color: var(--brand-pink); background: rgba(219, 39, 119, 0.05); justify-content: center;">
|
||
📥 Baixar Vídeo MP4
|
||
</a>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal: VideoMind (Transcrição e Resumo Pedagógico de Vídeos) -->
|
||
<div id="videoMindModal" 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;">🎬 VideoMind - Transcrição & Análise de Vídeo</h3>
|
||
<button id="btnCloseVideoMindModal" class="btn-close-modal" style="background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1.5rem;">×</button>
|
||
</div>
|
||
<div class="settings-modal-body" style="padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; flex: 1;">
|
||
|
||
<!-- INPUT URL YOUTUBE -->
|
||
<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. Link do Vídeo no YouTube</label>
|
||
<input type="text" id="videoMindUrlInput" placeholder="Ex: https://www.youtube.com/watch?v=..." class="obs-input" style="width: 100%; margin-top: 4px; padding: 10px;">
|
||
</div>
|
||
|
||
<!-- INPUT TRANSCRICAO (OPCIONAL) -->
|
||
<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. Colar Transcrição Manual (Opcional)</label>
|
||
<div style="font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; margin-bottom: 6px; line-height: 1.3;">
|
||
⚠️ O YouTube costuma bloquear a extração automática. Se ocorrer erro de bloqueio, use a extensão <b>NoteGPT</b> no seu navegador, copie toda a transcrição e cole aqui para uma análise perfeita.
|
||
</div>
|
||
<textarea id="videoMindPastedTranscriptInput" placeholder="Cole o texto bruto da transcrição do vídeo aqui..." class="obs-input" style="width: 100%; margin-top: 4px; padding: 10px; min-height: 80px; resize: vertical; font-family: inherit;"></textarea>
|
||
</div>
|
||
|
||
<!-- TAMANHO DO RESUMO -->
|
||
<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. Tamanho do Resumo Desejado</label>
|
||
<div class="music-option-grid" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 4px;">
|
||
<button type="button" class="btn-music-option btn-videomind-lines active" data-lines="20">📝 Curto (~20 linhas)</button>
|
||
<button type="button" class="btn-music-option btn-videomind-lines" data-lines="50">📄 Médio (~50 linhas)</button>
|
||
<button type="button" class="btn-music-option btn-videomind-lines" data-lines="100">📚 Longo (~100 linhas)</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- BOTÃO ANALISAR E STATUS -->
|
||
<div style="display: flex; flex-direction: column; gap: 10px; margin-top: 8px;">
|
||
<button id="btnGenerateVideoMind" style="background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); color: white; border: none; padding: 12px; border-radius: 8px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: opacity 0.2s; box-shadow: 0 4px 12px rgba(6, 182, 212, 0.25);">
|
||
<span>🎬 Analisar e Transcrever Vídeo</span>
|
||
</button>
|
||
<div id="videoMindLoader" 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 id="videoMindLoaderText">Buscando informações do vídeo...</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ÁREA DE RESULTADO (INICIALMENTE OCULTA) -->
|
||
<div id="videoMindResultArea" style="display: none; border-top: 1px solid var(--border-light); padding-top: 16px; flex-direction: column; gap: 18px;">
|
||
|
||
<!-- Metadados do Vídeo -->
|
||
<div style="background: var(--bg-secondary); padding: 14px; border-radius: 12px; display: flex; gap: 14px; border: 1px solid var(--border-light); align-items: center;">
|
||
<img id="videoMindThumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="Thumbnail" style="width: 120px; aspect-ratio: 16/9; object-fit: cover; border-radius: 8px; border: 1px solid var(--border-light);">
|
||
<div style="display: flex; flex-direction: column; gap: 4px;">
|
||
<h4 id="videoMindTitle" style="margin: 0; color: var(--text-primary); font-size: 1rem; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">Título do Vídeo</h4>
|
||
<span id="videoMindAuthor" style="font-size: 0.85rem; color: var(--text-secondary);">Canal</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Ações da Análise -->
|
||
<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;">Resumo & Parecer Pedagógico</label>
|
||
<div style="display: flex; gap: 8px;">
|
||
<button id="btnCopyVideoMindReport" 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 Parecer</button>
|
||
<button id="btnDownloadVideoMindReport" 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 TXT</button>
|
||
<button id="btnPdfVideoMindReport" 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>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Corpo da Análise em Markdown -->
|
||
<div id="videoMindReportArea" class="report-content-body" style="background: var(--bg-secondary); padding: 16px; border-radius: 10px; max-height: 350px; overflow-y: auto; font-family: inherit; font-size: 0.95rem; line-height: 1.6; border: 1px solid var(--border-light); color: var(--text-primary); margin: 0; box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);"></div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal: Garatujas (Análise de Desenhos) -->
|
||
<div id="garatujasModal" class="settings-modal" style="display: none;">
|
||
<div class="settings-modal-content" style="max-width: 750px; 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;">🎨 Garatujas - Análise de Traçado Infantil</h3>
|
||
<button id="btnCloseGaratujasModal" class="btn-close-modal" style="background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1.5rem;">×</button>
|
||
</div>
|
||
|
||
<!-- Abas do Modal -->
|
||
<div class="settings-tabs" style="padding: 12px 20px 0;">
|
||
<button type="button" class="settings-tab active" id="tabGaratujasNova">Nova Análise</button>
|
||
<button type="button" class="settings-tab" id="tabGaratujasHistorico">Histórico</button>
|
||
</div>
|
||
|
||
<div class="settings-modal-body" style="padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; flex: 1;">
|
||
|
||
<!-- CONTEÚDO: NOVA ANÁLISE -->
|
||
<div id="contentGaratujasNova" class="tab-content-panel">
|
||
<div style="display: flex; flex-direction: column; gap: 16px;">
|
||
<!-- NOME DO ALUNO -->
|
||
<!-- NOME E IDADE DO ALUNO -->
|
||
<div style="display: flex; gap: 12px; align-items: flex-start;">
|
||
<div class="settings-group" style="flex: 2;">
|
||
<label style="color: var(--text-secondary); font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">Nome do Aluno</label>
|
||
<input type="text" id="garatujasAlunoInput" placeholder="Ex: Joãozinho Silva" class="obs-input" style="width: 100%; margin-top: 4px; padding: 10px;">
|
||
</div>
|
||
<div class="settings-group" style="flex: 1;">
|
||
<label style="color: var(--text-secondary); font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">Idade (Ex: 2a 3m)</label>
|
||
<input type="text" id="garatujasIdadeInput" placeholder="Ex: 2 anos" class="obs-input" style="width: 100%; margin-top: 4px; padding: 10px;">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- FOTO DO DESENHO -->
|
||
<div class="settings-group">
|
||
<label style="color: var(--text-secondary); font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">Foto do Desenho / Rabisco</label>
|
||
<div style="display: flex; gap: 12px; align-items: center; margin-top: 6px;">
|
||
<button type="button" id="btnUploadGaratuja" class="btn-change-avatar" style="background: rgba(255,255,255,0.02); display: flex; align-items: center; gap: 8px;">
|
||
📁 Escolher Imagem
|
||
</button>
|
||
<input type="file" id="garatujaFileInput" accept="image/*" style="display: none;">
|
||
<span id="garatujaFileStatus" style="font-size: 0.85rem; color: var(--text-muted); font-style: italic;">Nenhum arquivo selecionado</span>
|
||
</div>
|
||
<div id="garatujaPreviewContainer" style="display: none; margin-top: 10px; border: 1px solid var(--border-light); border-radius: 8px; overflow: hidden; max-width: 250px; aspect-ratio: 4/3; background: rgba(0,0,0,0.1);">
|
||
<img id="garatujaImgPreview" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="width: 100%; height: 100%; object-fit: contain;">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- BOTÃO GERAR -->
|
||
<div style="display: flex; flex-direction: column; gap: 10px; margin-top: 8px;">
|
||
<button id="btnGenerateGaratuja" style="background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); color: white; border: none; padding: 12px; border-radius: 8px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: opacity 0.2s; box-shadow: 0 4px 12px rgba(249, 115, 22, 0.25);">
|
||
<span>🎨 Enviar & Analisar Desenho</span>
|
||
</button>
|
||
<div id="garatujaLoader" 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; border-top-color: #f97316;"></div>
|
||
<span id="garatujaLoaderText">Processando imagem...</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ÁREA DE RESULTADO (INICIALMENTE OCULTA) -->
|
||
<div id="garatujaResultArea" style="display: none; border-top: 1px solid var(--border-light); padding-top: 16px; flex-direction: column; gap: 18px;">
|
||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||
<h4 style="margin: 0; color: var(--text-primary); font-size: 1rem; font-weight: 600;">Laudo de Desenvolvimento</h4>
|
||
<div style="display: flex; gap: 8px;">
|
||
<button id="btnCopyGaratujaReport" 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;">📋 Copiar</button>
|
||
<button id="btnPdfGaratujaReport" 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;">📄 PDF</button>
|
||
</div>
|
||
</div>
|
||
<div id="garatujaReportArea" class="report-content-body" style="background: var(--bg-secondary); padding: 16px; border-radius: 10px; max-height: 350px; overflow-y: auto; border: 1px solid var(--border-light); color: var(--text-primary); font-size: 0.95rem; line-height: 1.6;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CONTEÚDO: HISTÓRICO -->
|
||
<div id="contentGaratujasHistorico" class="tab-content-panel" style="display: none;">
|
||
<div id="garatujasListContainer" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; width: 100%;">
|
||
<!-- Itens de lista injetados via JS -->
|
||
</div>
|
||
<div id="garatujasNoData" style="text-align: center; color: var(--text-muted); font-style: italic; padding: 40px 0; width: 100%;">
|
||
Nenhum desenho analisado ainda.
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal: BrincarAtivo (Circuitos e Brincadeiras) -->
|
||
<div id="brincarAtivoModal" class="settings-modal" style="display: none;">
|
||
<div class="settings-modal-content" style="max-width: 750px; 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;">🏃♂️ BrincarAtivo - Fábrica de Brincadeiras & Circuitos</h3>
|
||
<button id="btnCloseBrincarAtivoModal" class="btn-close-modal" style="background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1.5rem;">×</button>
|
||
</div>
|
||
|
||
<!-- Abas do Modal -->
|
||
<div class="settings-tabs" style="padding: 12px 20px 0;">
|
||
<button type="button" class="settings-tab active" id="tabBrincarAtivoNova">Nova Atividade</button>
|
||
<button type="button" class="settings-tab" id="tabBrincarAtivoHistorico">Histórico</button>
|
||
</div>
|
||
|
||
<div class="settings-modal-body" style="padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; flex: 1;">
|
||
|
||
<!-- CONTEÚDO: NOVA ATIVIDADE -->
|
||
<div id="contentBrincarAtivoNova" class="tab-content-panel">
|
||
<div style="display: flex; flex-direction: column; gap: 16px;">
|
||
<!-- 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;">Faixa Etária (BNCC)</label>
|
||
<select id="brincarAtivoFaixaSelect" class="obs-input" style="width: 100%; margin-top: 4px; padding: 10px; background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-light); border-radius: 8px;">
|
||
<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)">👧 Crianças bem pequenas (1 ano e 7 meses a 3 anos)</option>
|
||
<option value="Crianças pequenas (4 anos a 5 anos e 11 meses)">👦 Crianças pequenas (4 anos a 5 anos e 11 meses)</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- RECURSOS DISPONÍVEIS -->
|
||
<div class="settings-group">
|
||
<label style="color: var(--text-secondary); font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">Recursos / Materiais Disponíveis</label>
|
||
<textarea id="brincarAtivoRecursosInput" placeholder="Ex: Caixas de papelão, garrafas plásticas vazias, giz para riscar o chão, cones e bambolês." class="obs-input" rows="3" style="width: 100%; margin-top: 4px; padding: 10px; font-family: inherit; resize: vertical;"></textarea>
|
||
</div>
|
||
|
||
<!-- BOTÃO GERAR -->
|
||
<div style="display: flex; flex-direction: column; gap: 10px; margin-top: 8px;">
|
||
<button id="btnGenerateBrincarAtivo" style="background: linear-gradient(135deg, #10a37f 0%, #0a5f49 100%); color: white; border: none; padding: 12px; border-radius: 8px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: opacity 0.2s; box-shadow: 0 4px 12px rgba(16, 163, 127, 0.25);">
|
||
<span>🏃♂️ Criar Circuito / Brincadeira</span>
|
||
</button>
|
||
<div id="brincarAtivoLoader" 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 id="brincarAtivoLoaderText">Montando planejamento psicomotor...</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ÁREA DE RESULTADO (INICIALMENTE OCULTA) -->
|
||
<div id="brincarAtivoResultArea" style="display: none; border-top: 1px solid var(--border-light); padding-top: 16px; flex-direction: column; gap: 18px;">
|
||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||
<h4 style="margin: 0; color: var(--text-primary); font-size: 1rem; font-weight: 600;">Planejamento Pedagógico</h4>
|
||
<div style="display: flex; gap: 8px;">
|
||
<button id="btnCopyBrincarAtivoReport" 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;">📋 Copiar</button>
|
||
<button id="btnPdfBrincarAtivoReport" 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;">📄 PDF</button>
|
||
</div>
|
||
</div>
|
||
<div id="brincarAtivoReportArea" class="report-content-body" style="background: var(--bg-secondary); padding: 16px; border-radius: 10px; max-height: 350px; overflow-y: auto; border: 1px solid var(--border-light); color: var(--text-primary); font-size: 0.95rem; line-height: 1.6;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CONTEÚDO: HISTÓRICO -->
|
||
<div id="contentBrincarAtivoHistorico" class="tab-content-panel" style="display: none;">
|
||
<div id="brincarAtivoListContainer" style="display: flex; flex-direction: column; gap: 12px; width: 100%;">
|
||
<!-- Itens de lista injetados via JS -->
|
||
</div>
|
||
<div id="brincarAtivoNoData" style="text-align: center; color: var(--text-muted); font-style: italic; padding: 40px 0; width: 100%;">
|
||
Nenhuma atividade gerada ainda.
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ========================================== -->
|
||
<!-- MODAL: CRIAR CARTAZES -->
|
||
<!-- ========================================== -->
|
||
<div id="cartazesModal" class="settings-modal" style="display: none;">
|
||
<div class="settings-modal-content" style="max-width: 1180px; width: 96%; max-height: 94vh; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);">
|
||
|
||
<!-- Cabeçalho do Estúdio de Cartazes -->
|
||
<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;">
|
||
<div style="display: flex; align-items: center; gap: 10px;">
|
||
<div style="background: rgba(16, 185, 129, 0.15); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); border-radius: 8px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem;">
|
||
🖼️
|
||
</div>
|
||
<div>
|
||
<h3 style="margin: 0; font-family: 'Outfit', sans-serif; font-size: 1.15rem; color: var(--text-primary); display: flex; align-items: center; gap: 8px;">
|
||
Estúdio de Cartazes Pedagógicos
|
||
<span style="font-size: 0.68rem; font-weight: 700; background: linear-gradient(135deg, rgba(16,185,129,0.2), rgba(59,130,246,0.2)); color: #34d399; border: 1px solid rgba(16,185,129,0.4); padding: 2px 8px; border-radius: 12px;">BNCC & Design IA</span>
|
||
</h3>
|
||
<p style="margin: 2px 0 0 0; font-size: 0.76rem; color: var(--text-secondary);">Crie, personalize e imprima cartazes educativos, combinados de rotina e avisos em alta resolução</p>
|
||
</div>
|
||
</div>
|
||
<button id="btnCloseCartazesModal" class="btn-close-modal" style="background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1.6rem; padding: 4px; line-height: 1; transition: color 0.2s;" title="Fechar estúdio">×</button>
|
||
</div>
|
||
|
||
<!-- Abas do Modal -->
|
||
<div style="padding: 10px 20px; display: flex; gap: 10px; border-bottom: 1px solid var(--border-light); background: var(--bg-primary);">
|
||
<button id="tabCartazesCriar" class="tab-btn active" style="background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.3); color: #10b981; font-weight: 700; padding: 7px 16px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; gap: 6px; font-size: 0.84rem;">
|
||
<span>✨ Criador & Diagramação</span>
|
||
</button>
|
||
<button id="tabCartazesHistorico" class="tab-btn" style="background: transparent; border: 1px solid transparent; color: var(--text-secondary); font-weight: 600; padding: 7px 16px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; gap: 6px; font-size: 0.84rem;">
|
||
<span>🕒 Seus Cartazes Salvos</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="settings-modal-body" style="padding: 18px 20px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; background: var(--bg-secondary);">
|
||
|
||
<!-- Conteúdo 1: Criador -->
|
||
<div id="panelCartazesCriar" style="display: flex; flex-direction: row; gap: 22px; height: 100%; flex-wrap: wrap;">
|
||
|
||
<!-- Lado Esquerdo: Configurações e Inteligência Pedagógica -->
|
||
<div id="cartazLeftConfigPanel" style="flex: 1; min-width: 320px; 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: 8px;">
|
||
<h4 style="margin: 0; color: var(--text-primary); font-size: 0.95rem; display: flex; align-items: center; gap: 6px;">
|
||
<span>📋</span> 1. Foco & Estrutura Pedagógica
|
||
</h4>
|
||
<button type="button" id="btnCartazResetTemplate" class="btn-music-option" style="padding: 3px 10px; font-size: 0.72rem; margin: 0; border-color: rgba(239, 68, 68, 0.3); color: #f87171;">
|
||
🔄 Limpar Campos
|
||
</button>
|
||
</div>
|
||
|
||
<!-- SELETOR DE TEMPLATES PRÉ-CONFIGURADOS -->
|
||
<div class="settings-group">
|
||
<label style="color: var(--text-secondary); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">Modelos Rápidos Pedagógicos</label>
|
||
<select id="cartazTemplateSelect" class="obs-select" style="width: 100%; margin-top: 4px; font-weight: 600; color: var(--brand-pink, #db2777); background: var(--bg-tertiary); border: 1px solid rgba(219, 39, 119, 0.3);">
|
||
<option value="">✨ Escolha um modelo pedagógico...</option>
|
||
<optgroup label="🌟 Educação Infantil (Rotina e Convivência)">
|
||
<option value="combinados">🌟 Combinados & Convivência da Turma</option>
|
||
<option value="rotina">🍏 Rotina Diária & Lanche Saudável</option>
|
||
<option value="aniversarios">🎂 Mural dos Aniversariantes</option>
|
||
<option value="brinquedos">🧸 Organização dos Brinquedos e Cantinhos</option>
|
||
</optgroup>
|
||
<optgroup label="📚 Campos de Experiência (BNCC)">
|
||
<option value="bncc_eu_outro">🤝 O Eu, o Outro e o Nós (EI02EO / EI03EO)</option>
|
||
<option value="bncc_corpo">🏃 Corpo, Gestos e Movimentos (EI02CG / EI03CG)</option>
|
||
<option value="bncc_tracos">🎨 Traços, Sons, Cores e Formas (EI02TS / EI03TS)</option>
|
||
<option value="bncc_escuta">📖 Escuta, Fala, Pensamento e Imaginação (EI02EF)</option>
|
||
<option value="bncc_espacos">🔍 Espaços, Tempos, Quantidades e Relações (EI02ET)</option>
|
||
</optgroup>
|
||
<optgroup label="🧠 Metodologia Mind Lab & Jogos">
|
||
<option value="mindlab_regras">♟️ Cantinho dos Jogos & Pensamento Estratégico</option>
|
||
<option value="mindlab_cooperacao">🧩 Desafios de Raciocínio & Trabalho em Equipe</option>
|
||
</optgroup>
|
||
<optgroup label="📢 Avisos, Família & Comunidade">
|
||
<option value="aviso_pais">📌 Recado Importante para as Famílias</option>
|
||
<option value="mostra_cultural">🎉 Convite para Mostra Pedagógica & Cultural</option>
|
||
</optgroup>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- VINCULAR TURMA E FORMATO -->
|
||
<div style="display: flex; gap: 10px; flex-wrap: wrap;">
|
||
<div class="settings-group" style="flex: 1.2; min-width: 140px;">
|
||
<label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Turma Escolar</label>
|
||
<select id="cartazTurmaSelect" 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;">Formato / Papel</label>
|
||
<select id="cartazOrientacaoSelect" class="obs-select" style="width: 100%; margin-top: 4px;">
|
||
<option value="retrato" selected>📄 Retrato (A4 Vertical)</option>
|
||
<option value="paisagem">📃 Paisagem (A4 Horizontal)</option>
|
||
<option value="quadrado">📱 Quadrado (1:1 WhatsApp/Post)</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- FAIXA ETÁRIA E CAMPO BNCC -->
|
||
<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;">Faixa Etária</label>
|
||
<select id="cartazFaixaEtaria" class="obs-select" style="width: 100%; margin-top: 4px;">
|
||
<option value="Bebês e Bem Pequenas (0 a 3 anos)">Berçário & Maternal (0 a 3 anos)</option>
|
||
<option value="Crianças Pequenas (4 a 5 anos e 11 meses)" selected>Pré-Escola (4 e 5 anos)</option>
|
||
<option value="Ensino Fundamental I">Ensino Fundamental (Anos Iniciais)</option>
|
||
<option value="Geral da Escola">Toda a Comunidade 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;">Eixo BNCC / Tom</label>
|
||
<select id="cartazCampoBncc" class="obs-select" style="width: 100%; margin-top: 4px;">
|
||
<option value="Convivência e Interações">🤝 Convivência & Afeto</option>
|
||
<option value="Rotina e Autonomia">🍏 Rotina & Autonomia</option>
|
||
<option value="Linguagem e Oralidade">📖 Letramento & Histórias</option>
|
||
<option value="Corpo e Movimento">🏃 Movimento & Expressão</option>
|
||
<option value="Artes e Expressão">🎨 Arte, Sons e Cores</option>
|
||
<option value="Investigação da Natureza">🌱 Natureza & Ciências</option>
|
||
<option value="Avisos às Famílias">📌 Avisos & Comunicados</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CAMPOS EDITÁVEIS EM TEMPO REAL -->
|
||
<div class="settings-group">
|
||
<label style="color: var(--text-secondary); font-size: 0.75rem; font-weight: 600; text-transform: uppercase;">Título Principal do Cartaz</label>
|
||
<input type="text" id="cartazTituloInput" placeholder="Ex: Combinados da Nossa Turma" class="obs-input" style="width: 100%; margin-top: 4px; padding: 9px; font-weight: 700; font-size: 0.95rem;">
|
||
</div>
|
||
|
||
<div style="display: flex; gap: 10px; flex-wrap: wrap;">
|
||
<div class="settings-group" style="flex: 1.3; min-width: 160px;">
|
||
<label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Subtítulo / Descrição</label>
|
||
<input type="text" id="cartazSubtituloInput" placeholder="Ex: Educação Infantil • Professora Camila" class="obs-input" style="width: 100%; margin-top: 4px; padding: 8px;">
|
||
</div>
|
||
<div class="settings-group" style="flex: 0.8; min-width: 110px;">
|
||
<label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Etiqueta / Badge</label>
|
||
<input type="text" id="cartazBadgeInput" placeholder="Ex: 🌟 BNCC EI02" class="obs-input" style="width: 100%; margin-top: 4px; padding: 8px;">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- DESTAQUES / ITENS DO CARTAZ COM EMOJIS RÁPIDOS -->
|
||
<div class="settings-group">
|
||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||
<label style="color: var(--text-secondary); font-size: 0.75rem; font-weight: 600; text-transform: uppercase;">Itens & Destaques (um por linha)</label>
|
||
<button type="button" id="btnCartazAddLine" style="background: none; border: none; color: #10b981; font-size: 0.72rem; font-weight: 700; cursor: pointer; padding: 2px 6px;">+ Adicionar Linha</button>
|
||
</div>
|
||
<textarea id="cartazCardsInput" placeholder="Digite os itens ou mensagens do cartaz (um por linha)..." class="obs-input" style="width: 100%; min-height: 90px; padding: 9px; margin-top: 4px; font-size: 0.84rem; resize: vertical; line-height: 1.4;"></textarea>
|
||
<!-- Atalhos rápidos de emojis -->
|
||
<div style="display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; align-items: center;">
|
||
<span style="font-size: 0.68rem; color: var(--text-muted); margin-right: 4px;">Inserir:</span>
|
||
<button type="button" class="btn-emoji-insert" data-emoji="🤝" style="background: rgba(255,255,255,0.06); border: 1px solid var(--border-light); border-radius: 4px; padding: 1px 5px; cursor: pointer;">🤝</button>
|
||
<button type="button" class="btn-emoji-insert" data-emoji="🌟" style="background: rgba(255,255,255,0.06); border: 1px solid var(--border-light); border-radius: 4px; padding: 1px 5px; cursor: pointer;">🌟</button>
|
||
<button type="button" class="btn-emoji-insert" data-emoji="🧸" style="background: rgba(255,255,255,0.06); border: 1px solid var(--border-light); border-radius: 4px; padding: 1px 5px; cursor: pointer;">🧸</button>
|
||
<button type="button" class="btn-emoji-insert" data-emoji="🧼" style="background: rgba(255,255,255,0.06); border: 1px solid var(--border-light); border-radius: 4px; padding: 1px 5px; cursor: pointer;">🧼</button>
|
||
<button type="button" class="btn-emoji-insert" data-emoji="🍎" style="background: rgba(255,255,255,0.06); border: 1px solid var(--border-light); border-radius: 4px; padding: 1px 5px; cursor: pointer;">🍎</button>
|
||
<button type="button" class="btn-emoji-insert" data-emoji="🎨" style="background: rgba(255,255,255,0.06); border: 1px solid var(--border-light); border-radius: 4px; padding: 1px 5px; cursor: pointer;">🎨</button>
|
||
<button type="button" class="btn-emoji-insert" data-emoji="📚" style="background: rgba(255,255,255,0.06); border: 1px solid var(--border-light); border-radius: 4px; padding: 1px 5px; cursor: pointer;">📚</button>
|
||
<button type="button" class="btn-emoji-insert" data-emoji="🎵" style="background: rgba(255,255,255,0.06); border: 1px solid var(--border-light); border-radius: 4px; padding: 1px 5px; cursor: pointer;">🎵</button>
|
||
<button type="button" class="btn-emoji-insert" data-emoji="🌿" style="background: rgba(255,255,255,0.06); border: 1px solid var(--border-light); border-radius: 4px; padding: 1px 5px; cursor: pointer;">🌿</button>
|
||
<button type="button" class="btn-emoji-insert" data-emoji="🧩" style="background: rgba(255,255,255,0.06); border: 1px solid var(--border-light); border-radius: 4px; padding: 1px 5px; cursor: pointer;">🧩</button>
|
||
<button type="button" class="btn-emoji-insert" data-emoji="💖" style="background: rgba(255,255,255,0.06); border: 1px solid var(--border-light); border-radius: 4px; padding: 1px 5px; cursor: pointer;">💖</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="settings-group">
|
||
<label style="color: var(--text-secondary); font-size: 0.75rem; font-weight: 600; text-transform: uppercase;">Rodapé / Mensagem Institucional</label>
|
||
<input type="text" id="cartazRodapeInput" placeholder="Ex: EMEI São Bernardo do Campo • Projeto 2026" class="obs-input" style="width: 100%; margin-top: 4px; padding: 8px;">
|
||
</div>
|
||
|
||
<!-- ESTILO, CORES E FONTES -->
|
||
<h4 style="margin: 6px 0 0 0; color: var(--text-primary); font-size: 0.95rem; border-bottom: 1px solid var(--border-light); padding-bottom: 8px; display: flex; align-items: center; gap: 6px;">
|
||
<span>🎨</span> 2. Estilo Visual & Paletas
|
||
</h4>
|
||
|
||
<div style="display: flex; gap: 10px; flex-wrap: wrap;">
|
||
<div class="settings-group" style="flex: 1; min-width: 130px;">
|
||
<label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Tipografia</label>
|
||
<select id="cartazFontSelect" class="obs-select" style="width: 100%; margin-top: 4px;">
|
||
<option value="'Fredoka', sans-serif" selected>🎈 Fredoka (Fofa/Infantil)</option>
|
||
<option value="'Outfit', sans-serif">⚡ Outfit (Moderna/Limpa)</option>
|
||
<option value="'Caveat', cursive">✍️ Caveat (Manuscrita)</option>
|
||
<option value="'Playfair Display', serif">📖 Playfair (Clássica)</option>
|
||
</select>
|
||
</div>
|
||
<div class="settings-group" style="flex: 1; min-width: 130px;">
|
||
<label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Moldura / Borda</label>
|
||
<select id="cartazBorderSelect" class="obs-select" style="width: 100%; margin-top: 4px;">
|
||
<option value="none">Nenhuma</option>
|
||
<option value="6px dashed" selected>Pontilhada Colorida</option>
|
||
<option value="6px double">Linha Dupla Clássica</option>
|
||
<option value="8px solid">Moldura de Gibi</option>
|
||
<option value="4px solid">Borda Fina Delicada</option>
|
||
</select>
|
||
</div>
|
||
<div class="settings-group" style="flex: 1; min-width: 130px;">
|
||
<label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Estilo dos Cartões</label>
|
||
<select id="cartazCardStyleSelect" class="obs-select" style="width: 100%; margin-top: 4px;">
|
||
<option value="glass" selected>Transparente Suave (Glass)</option>
|
||
<option value="solid">Branco Sólido com Sombra</option>
|
||
<option value="postit">Estilo Post-it Colorido</option>
|
||
<option value="minimal">Borda Minimalista</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- PALETAS RÁPIDAS -->
|
||
<div class="settings-group">
|
||
<label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Paletas Pedagógicas</label>
|
||
<div style="display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap;">
|
||
<button type="button" class="btn-palette-preset" data-bg="#fff9eb" data-text="#2d3748" data-card="#ffffff" style="background: #fff9eb; color: #2d3748; padding: 5px 9px; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 0.72rem; cursor: pointer; font-weight: bold; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">Tons Pastéis</button>
|
||
<button type="button" class="btn-palette-preset" data-bg="#f0fdf4" data-text="#166534" data-card="#ffffff" style="background: #f0fdf4; color: #166534; padding: 5px 9px; border: 1px solid #bbf7d0; border-radius: 6px; font-size: 0.72rem; cursor: pointer; font-weight: bold; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">Jardim Verde</button>
|
||
<button type="button" class="btn-palette-preset" data-bg="#eff6ff" data-text="#1e40af" data-card="#ffffff" style="background: #eff6ff; color: #1e40af; padding: 5px 9px; border: 1px solid #bfdbfe; border-radius: 6px; font-size: 0.72rem; cursor: pointer; font-weight: bold; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">Céu Azul</button>
|
||
<button type="button" class="btn-palette-preset" data-bg="#fdf2f8" data-text="#9d174d" data-card="#ffffff" style="background: #fdf2f8; color: #9d174d; padding: 5px 9px; border: 1px solid #fbcfe8; border-radius: 6px; font-size: 0.72rem; cursor: pointer; font-weight: bold; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">Rosa Lúdico</button>
|
||
<button type="button" class="btn-palette-preset" data-bg="#fef3c7" data-text="#92400e" data-card="#ffffff" style="background: #fef3c7; color: #92400e; padding: 5px 9px; border: 1px solid #fde68a; border-radius: 6px; font-size: 0.72rem; cursor: pointer; font-weight: bold; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">Sol da Manhã</button>
|
||
<button type="button" class="btn-palette-preset" data-bg="#1e293b" data-text="#f8fafc" data-card="#334155" style="background: #1e293b; color: #f8fafc; padding: 5px 9px; border: 1px solid #475569; border-radius: 6px; font-size: 0.72rem; cursor: pointer; font-weight: bold; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">Lousa Escura</button>
|
||
</div>
|
||
<div style="display: flex; gap: 12px; margin-top: 8px; align-items: center;">
|
||
<div style="display: flex; align-items: center; gap: 6px;">
|
||
<label style="font-size: 0.75rem; color: var(--text-secondary);">Fundo:</label>
|
||
<input type="color" id="cartazBgColor" value="#fff9eb" style="width: 28px; height: 28px; border: 1px solid var(--border-light); border-radius: 6px; cursor: pointer; background: transparent;">
|
||
</div>
|
||
<div style="display: flex; align-items: center; gap: 6px;">
|
||
<label style="font-size: 0.75rem; color: var(--text-secondary);">Texto:</label>
|
||
<input type="color" id="cartazTextColor" value="#2d3748" style="width: 28px; height: 28px; border: 1px solid var(--border-light); border-radius: 6px; cursor: pointer; background: transparent;">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ILUSTRAÇÃO & IMAGEM (IA OU FOTO PRÓPRIA) -->
|
||
<div class="settings-group" style="background: rgba(255,255,255,0.02); border: 1px solid var(--border-light); border-radius: 10px; padding: 12px;">
|
||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
|
||
<label style="color: var(--text-primary); font-size: 0.78rem; font-weight: 700; text-transform: uppercase;">🖼️ Ilustração do Cartaz</label>
|
||
<span style="font-size: 0.7rem; color: var(--text-muted);">IA Pixar ou Foto Própria</span>
|
||
</div>
|
||
|
||
<textarea id="cartazPromptImagem" placeholder="Descreva a cena desejada (ex: Crianças de diferentes origens brincando juntas em roda no jardim florido)..." class="obs-input" style="width: 100%; min-height: 52px; padding: 7px; font-size: 0.8rem; resize: vertical;"></textarea>
|
||
|
||
<div style="display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap;">
|
||
<button type="button" id="btnGenerateCartazImage" class="btn-music-option" style="border-color: #8b5cf6; color: #a78bfa; background: rgba(139, 92, 246, 0.12); font-weight: 600; padding: 6px 12px; font-size: 0.8rem;">
|
||
<span>🪄 Gerar com IA</span>
|
||
</button>
|
||
<label class="btn-music-option" style="border-color: #3b82f6; color: #60a5fa; background: rgba(59, 130, 246, 0.12); font-weight: 600; padding: 6px 12px; font-size: 0.8rem; cursor: pointer; margin: 0; display: inline-flex; align-items: center; gap: 4px;">
|
||
<span>📷 Usar Foto Própria</span>
|
||
<input type="file" id="cartazImageUploadInput" accept="image/*" style="display: none;">
|
||
</label>
|
||
<button type="button" id="btnRemoveCartazImage" class="btn-music-option" style="color: var(--text-muted); font-size: 0.78rem; padding: 6px 10px; margin-left: auto;">
|
||
🗑️ Remover
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- BOTÃO GERAR NOVO CARTAZ COM IA COMPLETA -->
|
||
<button type="button" id="btnGenerateCartaz" style="width: 100%; padding: 13px; background: linear-gradient(135deg, #10b981, #059669); color: white; border: none; border-radius: 12px; font-weight: 700; font-size: 0.96rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35); transition: all 0.2s; margin-top: 6px;">
|
||
<span>🤖 Redigir Conteúdo com PedagogIA</span>
|
||
</button>
|
||
|
||
<div id="cartazGenerateLoader" style="display: none; align-items: center; justify-content: center; gap: 10px; color: var(--text-secondary); font-size: 0.85rem; padding: 12px; background: rgba(16, 185, 129, 0.05); border: 1px solid rgba(16, 185, 129, 0.2); border-radius: 8px;">
|
||
<div class="media-spinner" style="width: 18px; height: 18px; border-width: 2px; border-top-color: #10b981;"></div>
|
||
<span id="cartazLoaderText">Diagramando cartaz com inteligência pedagógica...</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Lado Esquerdo: Painel de Assets para Canvas (Modo Interativo) -->
|
||
<div id="cartazLeftCanvasPanel" style="display: none; flex: 1; min-width: 320px; flex-direction: column; gap: 16px; padding-right: 12px;">
|
||
<h4 style="margin: 0; color: var(--text-primary); border-bottom: 1px dashed var(--border-light); padding-bottom: 8px;">🎨 Elementos do Canvas</h4>
|
||
|
||
<!-- 🎬 ESTÚDIO DE CENAS EM CAMADAS -->
|
||
<div id="scenesStudioPanel" style="background: linear-gradient(135deg, rgba(139,92,246,0.12), rgba(59,130,246,0.08)); border: 1px solid rgba(139,92,246,0.3); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px;">
|
||
|
||
<!-- Header -->
|
||
<div style="display: flex; align-items: center; gap: 8px;">
|
||
<span style="font-size: 1.3rem;">🎬</span>
|
||
<div style="flex:1;">
|
||
<div style="font-weight: 700; color: var(--text-primary); font-size: 0.9rem;">Estúdio de Cenas em Camadas</div>
|
||
<div style="font-size: 0.72rem; color: var(--text-secondary); margin-top: 1px;">Cada linha = uma camada gerada separadamente pela IA</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Lista dinâmica de camadas -->
|
||
<div id="sceneLayerManagerList" style="display: flex; flex-direction: column; gap: 6px;">
|
||
<!-- Camadas inseridas por JS -->
|
||
</div>
|
||
|
||
<!-- Botão Adicionar Camada -->
|
||
<button id="btnAddSceneLayer" style="background: rgba(139,92,246,0.15); border: 1px dashed rgba(139,92,246,0.5); color: rgba(139,92,246,1); padding: 7px; font-size: 0.82rem; font-weight: 600; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: all 0.2s; width: 100%;">
|
||
➕ Adicionar Camada
|
||
</button>
|
||
|
||
<!-- Botão Criar Cena -->
|
||
<button id="btnDecomposeScene" style="background: linear-gradient(135deg, #8b5cf6, #3b82f6); color: white; border: none; padding: 9px 14px; font-size: 0.85rem; font-weight: 700; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: opacity 0.2s;">
|
||
✨ Criar Cena
|
||
</button>
|
||
|
||
<!-- Loading state -->
|
||
<div id="sceneDecomposeLoader" style="display: none; flex-direction: column; gap: 8px; align-items: center; padding: 10px; background: rgba(0,0,0,0.15); border-radius: 8px;">
|
||
<div style="display: flex; gap: 6px; align-items: center;">
|
||
<div class="loading-dot" style="width:8px;height:8px;border-radius:50%;background:#8b5cf6;animation:dot-pulse 1.2s ease-in-out infinite;"></div>
|
||
<div class="loading-dot" style="width:8px;height:8px;border-radius:50%;background:#8b5cf6;animation:dot-pulse 1.2s ease-in-out 0.4s infinite;"></div>
|
||
<div class="loading-dot" style="width:8px;height:8px;border-radius:50%;background:#8b5cf6;animation:dot-pulse 1.2s ease-in-out 0.8s infinite;"></div>
|
||
</div>
|
||
<div id="sceneDecomposeStatus" style="font-size: 0.78rem; color: var(--text-secondary); text-align: center;">Gerando camadas...</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="settings-group">
|
||
<input type="text" id="canvasAssetSearch" placeholder="🔍 Buscar elementos..." class="obs-input" style="width: 100%; padding: 10px;">
|
||
</div>
|
||
|
||
<!-- Abas do Painel de Assets -->
|
||
<div style="display: flex; gap: 8px; border-bottom: 1px solid var(--border-light); padding-bottom: 8px;">
|
||
<button id="btnTabAssetPostits" class="tab-btn active" style="font-size: 0.8rem; padding: 6px 12px; background: rgba(59,130,246,0.1); border: none; cursor: pointer; color: var(--text-primary); border-radius: 4px; font-weight: bold;">📌 Post-its</button>
|
||
<button id="btnTabAssetStickers" class="tab-btn" style="font-size: 0.8rem; padding: 6px 12px; background: transparent; border: none; cursor: pointer; color: var(--text-secondary); border-radius: 4px;">🎈 Stickers</button>
|
||
<button id="btnTabAssetFormas" class="tab-btn" style="font-size: 0.8rem; padding: 6px 12px; background: transparent; border: none; cursor: pointer; color: var(--text-secondary); border-radius: 4px;">📐 Formas</button>
|
||
</div>
|
||
|
||
<!-- Container dos Assets -->
|
||
<div id="canvasAssetsContainer" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(75px, 1fr)); gap: 10px; overflow-y: auto; flex: 1; max-height: 480px; padding: 5px; background: rgba(0,0,0,0.05); border-radius: 8px; min-height: 250px;">
|
||
<!-- Preenchido via JS -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Lado Direito: Preview & Suite de Exportação de Alta Resolução -->
|
||
<div class="cartaz-preview-panel" style="flex: 1.4; min-width: 380px; display: flex; flex-direction: column; gap: 12px;">
|
||
<div class="cartaz-header-container" style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-light); padding-bottom: 10px; flex-wrap: wrap; gap: 10px;">
|
||
<div>
|
||
<h4 style="margin: 0; color: var(--text-primary); font-size: 0.95rem; display: flex; align-items: center; gap: 6px;">
|
||
<span>👁️</span> Visualização do Cartaz
|
||
</h4>
|
||
<span style="font-size: 0.72rem; color: var(--text-secondary);">Clique diretamente no texto para editar</span>
|
||
</div>
|
||
|
||
<!-- AÇÕES DE EXPORTAÇÃO E FERRAMENTAS -->
|
||
<div class="cartaz-header-actions" style="display: flex; gap: 6px; flex-wrap: wrap; align-items: center;">
|
||
<button type="button" id="btnCopyCartazClipboard" class="btn-save-settings" style="background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.4); color: #10b981; padding: 6px 10px; font-size: 0.76rem; font-weight: 700; border-radius: 8px; cursor: pointer;" title="Copiar imagem para colar direto no WhatsApp, Word ou Canva">
|
||
📋 Copiar Imagem
|
||
</button>
|
||
<button type="button" id="btnExportCartazPNG" class="btn-save-settings" style="background: #10b981; border: none; color: white; padding: 6px 11px; font-size: 0.76rem; font-weight: 700; border-radius: 8px; cursor: pointer; box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);" title="Baixar imagem PNG de alta resolução">
|
||
🖼️ PNG
|
||
</button>
|
||
<button type="button" id="btnExportCartazPDF" class="btn-save-settings" style="background: #8b5cf6; border: none; color: white; padding: 6px 11px; font-size: 0.76rem; font-weight: 700; border-radius: 8px; cursor: pointer; box-shadow: 0 2px 6px rgba(139, 92, 246, 0.3);" title="Baixar documento PDF pronto para impressão">
|
||
📄 PDF
|
||
</button>
|
||
<button type="button" id="btnPrintCartaz" class="btn-save-settings" style="background: #3b82f6; border: none; color: white; padding: 6px 11px; font-size: 0.76rem; font-weight: 700; border-radius: 8px; cursor: pointer;" title="Abrir janela de impressão">
|
||
🖨️ Imprimir
|
||
</button>
|
||
<button type="button" id="btnCanvasModeToggle" class="btn-save-settings" style="background: transparent; border: 1px solid var(--border-light); color: var(--text-secondary); padding: 6px 9px; font-size: 0.76rem; border-radius: 8px;" title="Alternar modo de design livre com arrastar e soltar">
|
||
🎨 Canvas
|
||
</button>
|
||
<button type="button" id="btnEditCartazToggle" class="btn-save-settings" style="background: transparent; border: 1px solid var(--border-light); color: var(--text-secondary); padding: 6px 9px; font-size: 0.76rem; border-radius: 8px;" title="Ver ou editar código HTML">
|
||
✏️ HTML
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Painel de Controle do Canvas (Apenas visível no Modo Canvas) -->
|
||
<div id="canvasControlPanel" style="display: none; background: var(--bg-tertiary); border: 1px solid var(--border-light); padding: 8px 12px; border-radius: 10px; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; position: sticky; top: 0; z-index: 100; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 4px 16px rgba(0,0,0,0.3);">
|
||
<button id="btnCanvasAddText" class="btn-save-settings" style="background: #10a37f; color: white; border: none; padding: 5px 11px; font-size: 0.74rem; font-weight: 600; border-radius: 6px; cursor: pointer;">➕ Texto</button>
|
||
<button id="btnCanvasAddCard" class="btn-save-settings" style="background: #a855f7; color: white; border: none; padding: 5px 11px; font-size: 0.74rem; font-weight: 600; border-radius: 6px; cursor: pointer;">➕ Card</button>
|
||
|
||
<div style="height: 18px; width: 1px; background: var(--border-light);"></div>
|
||
|
||
<!-- Controles do Item Selecionado -->
|
||
<span style="font-size: 0.73rem; color: var(--text-secondary);">Item:</span>
|
||
<select id="canvasFontFamily" class="obs-select" style="padding: 2px 6px; font-size: 0.74rem; min-width: 85px; margin: 0;">
|
||
<option value="Fredoka">Fredoka</option>
|
||
<option value="Outfit">Outfit</option>
|
||
<option value="Caveat">Caveat</option>
|
||
<option value="Playfair Display">Playfair</option>
|
||
<option value="Arial">Arial</option>
|
||
</select>
|
||
|
||
<input type="number" id="canvasFontSize" class="obs-input" style="width: 50px; padding: 2px 5px; font-size: 0.74rem; margin: 0;" min="8" max="72" value="16" title="Tamanho da fonte (px)">
|
||
|
||
<!-- 1. Cor do Texto / Ícone -->
|
||
<div style="display: flex; align-items: center; gap: 4px;">
|
||
<label style="font-size: 0.7rem; color: var(--text-secondary);">Texto:</label>
|
||
<input type="color" id="canvasTextColor" style="width: 22px; height: 22px; border: 1px solid var(--border-light); border-radius: 4px; padding: 0; cursor: pointer; background: transparent; margin: 0;" title="Cor do texto ou ícone">
|
||
</div>
|
||
|
||
<!-- 2. Cor da Linha de Contorno (Solicitado pelo usuário) -->
|
||
<div style="display: flex; align-items: center; gap: 4px;">
|
||
<label style="font-size: 0.7rem; color: var(--text-secondary);" title="Cor da linha de contorno">Linha:</label>
|
||
<input type="color" id="canvasBorderColor" value="#2d3748" style="width: 22px; height: 22px; border: 1px solid var(--border-light); border-radius: 4px; padding: 0; cursor: pointer; background: transparent; margin: 0;" title="Cor da linha / contorno">
|
||
</div>
|
||
|
||
<!-- 3. Espessura da Linha (Alargar / Afinar, solicitado pelo usuário) -->
|
||
<div style="display: flex; align-items: center; gap: 4px;">
|
||
<label style="font-size: 0.7rem; color: var(--text-secondary);" title="Alargar ou afinar as linhas">Espessura:</label>
|
||
<input type="number" id="canvasBorderWidth" class="obs-input" style="width: 44px; padding: 2px 4px; font-size: 0.74rem; margin: 0;" min="0" max="40" value="3" title="Espessura da linha em pixels">
|
||
</div>
|
||
|
||
<!-- 4. Preenchimento de Cor (Solicitado pelo usuário) -->
|
||
<div style="display: flex; align-items: center; gap: 4px;">
|
||
<label style="font-size: 0.7rem; color: var(--text-secondary);" title="Preencher com cor">Preencher:</label>
|
||
<input type="color" id="canvasBgColor" value="#ffffff" style="width: 22px; height: 22px; border: 1px solid var(--border-light); border-radius: 4px; padding: 0; cursor: pointer; background: transparent; margin: 0;" title="Cor de preenchimento">
|
||
<button type="button" id="btnCanvasBgTransparent" class="btn-save-settings" style="background: transparent; border: 1px dashed var(--border-light); color: var(--text-secondary); padding: 2px 6px; font-size: 0.66rem; border-radius: 4px; cursor: pointer;" title="Tornar o preenchimento transparente (vazado)">🚫 Sem Cor</button>
|
||
</div>
|
||
|
||
<div style="display: flex; align-items: center; gap: 4px;">
|
||
<label style="font-size: 0.7rem; color: var(--text-secondary);" title="Rotação">Giro:</label>
|
||
<input type="range" id="canvasRotation" min="-180" max="180" value="0" style="width: 50px; height: 4px; cursor: pointer; margin: 0;">
|
||
</div>
|
||
|
||
<div style="display: flex; align-items: center; gap: 4px;">
|
||
<label style="font-size: 0.7rem; color: var(--text-secondary);" title="Opacidade">Opac.:</label>
|
||
<input type="range" id="canvasOpacity" min="10" max="100" value="100" style="width: 50px; height: 4px; cursor: pointer; margin: 0;">
|
||
</div>
|
||
|
||
<!-- CONTROLE AVANÇADO DE CAMADAS / PROFUNDIDADE (Z-INDEX) -->
|
||
<div style="display: flex; gap: 3px; align-items: center; background: rgba(0,0,0,0.25); padding: 3px 6px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.08);">
|
||
<span id="canvasItemZIndexBadge" style="font-size: 0.68rem; font-weight: 700; color: #a78bfa; padding: 1px 4px;" title="Ordem da camada do elemento">Camada: --</span>
|
||
<button id="btnCanvasZIndexFront" class="btn-save-settings" style="background: rgba(139,92,246,0.25); border: 1px solid rgba(139,92,246,0.4); color: #c4b5fd; padding: 2px 6px; font-size: 0.68rem; cursor: pointer; border-radius: 4px;" title="Trazer para Frente de Tudo (Topo)">⏫</button>
|
||
<button id="btnCanvasZIndexUp" class="btn-save-settings" style="background: transparent; border: 1px solid var(--border-light); color: var(--text-secondary); padding: 2px 6px; font-size: 0.68rem; cursor: pointer; border-radius: 4px;" title="Avançar 1 Nível">🔺</button>
|
||
<button id="btnCanvasZIndexDown" class="btn-save-settings" style="background: transparent; border: 1px solid var(--border-light); color: var(--text-secondary); padding: 2px 6px; font-size: 0.68rem; cursor: pointer; border-radius: 4px;" title="Recuar 1 Nível">🔻</button>
|
||
<button id="btnCanvasZIndexBack" class="btn-save-settings" style="background: rgba(100,116,139,0.25); border: 1px solid rgba(100,116,139,0.4); color: #94a3b8; padding: 2px 6px; font-size: 0.68rem; cursor: pointer; border-radius: 4px;" title="Enviar para Trás de Tudo (Fundo)">⏬</button>
|
||
<button id="btnCanvasDelete" class="btn-save-settings" style="background: #ef4444; color: white; border: none; padding: 2px 7px; font-size: 0.68rem; font-weight: bold; border-radius: 4px; cursor: pointer; margin-left: 2px;" title="Excluir Elemento">🗑️</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Área de Edição de Código HTML (Opcional) -->
|
||
<div id="cartazEditArea" style="display: none; flex-direction: column; gap: 8px;">
|
||
<label style="color: var(--text-secondary); font-size: 0.78rem; font-weight: 600; text-transform: uppercase;">Editor HTML Direto</label>
|
||
<textarea id="cartazHtmlEditor" class="obs-input" style="width: 100%; min-height: 120px; font-family: monospace; font-size: 0.85rem; padding: 10px;"></textarea>
|
||
<button type="button" id="btnUpdateCartazPreview" style="padding: 6px 14px; align-self: flex-end; background: #10b981; border: none; border-radius: 6px; cursor: pointer; color: white; font-weight: 700; font-size: 0.8rem;">Atualizar Preview</button>
|
||
</div>
|
||
|
||
<!-- Caixa de Preview Imprimível em Escala Real -->
|
||
<div id="cartazPreviewScrollContainer" style="background: #0f172a; padding: 24px; border-radius: 14px; border: 1px solid var(--border-light); overflow: auto; display: flex; justify-content: center; align-items: flex-start; flex: 1; min-height: 520px; max-height: 70vh;">
|
||
|
||
<div id="cartazPrintableArea" style="background: #fff9eb; color: #2d3748; padding: 32px 28px; border-radius: 12px; width: 100%; max-width: 500px; box-sizing: border-box; box-shadow: 0 15px 35px rgba(0,0,0,0.4); transition: all 0.3s; min-height: 620px; display: flex; flex-direction: column; font-family: 'Fredoka', sans-serif; position: relative;">
|
||
|
||
<!-- Selo / Badge Superior (Opcional) -->
|
||
<div id="cartazPreviewBadge" style="display: none; align-self: center; margin-bottom: 12px; background: rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.12); padding: 3px 12px; border-radius: 20px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.4px;">
|
||
🌟 BNCC • EDUCAÇÃO INFANTIL
|
||
</div>
|
||
|
||
<!-- Título do Cartaz (Com suporte a edição direta no preview) -->
|
||
<h1 id="cartazPreviewTitle" contenteditable="true" spellcheck="false" style="text-align: center; margin-top: 0; font-size: 2.2rem; border-bottom: 2px solid; padding-bottom: 12px; margin-bottom: 18px; outline: none; transition: background 0.2s;" title="Clique para editar o título diretamente">Título do Cartaz</h1>
|
||
|
||
<!-- Área da Imagem no Cartaz -->
|
||
<div id="cartazPreviewImageContainer" style="display: none; width: 100%; margin-bottom: 18px; border-radius: 10px; border: 2px solid rgba(0,0,0,0.1); background: rgba(0,0,0,0.02); text-align: center; overflow: hidden; position: relative;">
|
||
<img id="cartazPreviewImage" src="" style="max-width: 100%; max-height: 250px; object-fit: contain; display: inline-block; vertical-align: middle;">
|
||
</div>
|
||
|
||
<!-- Conteúdo de Texto do Cartaz -->
|
||
<div id="cartazPreviewContent" style="font-size: 1.1rem; line-height: 1.6; flex: 1; display: flex; flex-direction: column; gap: 12px; outline: none;">
|
||
<p style="text-align: center; color: #718096; font-style: italic; padding: 40px 10px;">
|
||
Clique em <strong>"Redigir Conteúdo com PedagogIA"</strong> ou escolha um <strong>Modelo Rápido</strong> ao lado para ver o cartaz diagramado instantaneamente.
|
||
</p>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Conteúdo 2: Histórico de Cartazes Salvos -->
|
||
<div id="panelCartazesHistorico" style="display: none; flex-direction: column; gap: 16px;">
|
||
<div id="cartazesHistoryContainer" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px;">
|
||
<!-- Preenchido via JS -->
|
||
</div>
|
||
<div id="cartazesNoData" style="text-align: center; color: var(--text-muted); font-style: italic; padding: 50px 0;">
|
||
Nenhum cartaz gerado ainda. Crie seu primeiro cartaz na aba acima!
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 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>
|
||
<!-- ========================================== -->
|
||
<!-- MODAL: PROTOCOLO DE CRISES & MEDIAÇÃO -->
|
||
<!-- ========================================== -->
|
||
<div id="criseModal" class="settings-modal" style="display: none;">
|
||
<div class="settings-modal-content" style="max-width: 900px; width: 95%; max-height: 92vh; 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;">
|
||
<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: #ef4444;">Protocolo de Acolhimento & Mediação de Crise</h3>
|
||
<span style="font-size: 0.75rem; color: var(--text-secondary);">Registro seguro de ocorrência, checklist de intervenção e mensagem acolhedora para WhatsApp dos pais</span>
|
||
</div>
|
||
</div>
|
||
<div style="display: flex; gap: 8px; align-items: center;">
|
||
<button type="button" id="btnOpenCrisesHistory" style="background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.3); color: #f87171; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 0.82rem; font-weight: 600;">🕒 Histórico</button>
|
||
<button type="button" id="btnCloseCriseModal" class="btn-close-modal" style="background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1.5rem; line-height: 1;">×</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="settings-modal-body" style="padding: 20px; overflow-y: auto; display: flex; flex-direction: row; gap: 20px; flex: 1; flex-wrap: wrap;">
|
||
|
||
<!-- Formulário de Registro -->
|
||
<div style="flex: 1.1; min-width: 300px; display: flex; flex-direction: column; gap: 12px;">
|
||
|
||
<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;">Turma</label>
|
||
<select id="criseTurmaSelect" 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;">Nome da Criança</label>
|
||
<input type="text" id="criseAlunoInput" placeholder="Ex: Lucas, Sofia..." class="obs-input" style="width: 100%; margin-top: 4px; padding: 8px;">
|
||
</div>
|
||
</div>
|
||
|
||
<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;">Tipo de Ocorrência</label>
|
||
<select id="criseTipoSelect" class="obs-select" style="width: 100%; margin-top: 4px;">
|
||
<option value="Desregulação Sensorial / Emocional">Desregulação Sensorial / Emocional</option>
|
||
<option value="Conflito Físico / Mordida">Conflito Físico / Disputa / Mordida</option>
|
||
<option value="Queda / Pequeno Acidente">Queda / Pequeno Acidente / Arranhão</option>
|
||
<option value="Choro Intenso / Adaptação">Choro Intenso / Adaptação Escolar</option>
|
||
<option value="Recusa Alimentar / Sono">Recusa Alimentar / Sono</option>
|
||
<option value="Outro">Outro Comportamento Atípico</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="criseIntensidadeSelect" class="obs-select" style="width: 100%; margin-top: 4px;">
|
||
<option value="Leve">🟢 Leve (Resolvido rápido)</option>
|
||
<option value="Moderada" selected>🟡 Moderada (Exigiu acolhimento)</option>
|
||
<option value="Alta">🔴 Alta (Necessitou apoio coordenador)</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Checklist de Ação Imediata -->
|
||
<div style="background: rgba(239,68,68,0.06); border: 1px solid rgba(239,68,68,0.2); border-radius: 8px; padding: 10px;">
|
||
<label style="color: #f87171; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; display: block; margin-bottom: 6px;">⚡ Checklist de Ação Imediata:</label>
|
||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font-size: 0.75rem; color: var(--text-primary);">
|
||
<label><input type="checkbox" id="chkSeguranca" checked> 1. Garantir segurança física</label>
|
||
<label><input type="checkbox" id="chkReduzirEstimulos" checked> 2. Reduzir barulho/luz</label>
|
||
<label><input type="checkbox" id="chkAgua"> 3. Oferecer água / respirar</label>
|
||
<label><input type="checkbox" id="chkAcolhimento" checked> 4. Abraço / Escuta afetiva</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="settings-group">
|
||
<label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Descrição do Ocorrido & Gatilho</label>
|
||
<textarea id="criseDescricaoInput" placeholder="Descreva brevemente o que aconteceu e o que disparou o momento..." class="obs-input" style="width: 100%; min-height: 55px; padding: 8px; font-size: 0.85rem; resize: vertical;"></textarea>
|
||
</div>
|
||
|
||
<div class="settings-group">
|
||
<label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Medidas Tomadas & Acolhimento</label>
|
||
<input type="text" id="criseMedidasInput" placeholder="Ex: Criança conduzida ao cantinho da leitura, acalmou-se em 5 min..." class="obs-input" style="width: 100%; padding: 8px; font-size: 0.85rem;">
|
||
</div>
|
||
|
||
<button type="button" id="btnSalvarCrise" style="width: 100%; padding: 10px; background: #ef4444; color: white; border: none; border-radius: 8px; font-weight: 700; font-size: 0.9rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;">
|
||
<span>🛡️ Registrar & Gerar Mensagem WhatsApp</span>
|
||
</button>
|
||
|
||
</div>
|
||
|
||
<!-- Lado Direito: Mensagem para a Família & Resolução -->
|
||
<div style="flex: 1; min-width: 280px; display: flex; flex-direction: column; gap: 12px; background: rgba(0,0,0,0.08); padding: 14px; border-radius: 10px; border: 1px solid var(--border-light);">
|
||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||
<strong style="color: #34d399; font-size: 0.85rem;">📱 Mensagem Humanizada para a Família:</strong>
|
||
<button type="button" id="btnCopyCriseWhatsapp" style="background: rgba(16,185,129,0.15); border: 1px solid rgba(16,185,129,0.3); color: #34d399; padding: 3px 8px; border-radius: 4px; font-size: 0.72rem; cursor: pointer;">📋 Copiar Texto</button>
|
||
</div>
|
||
<div id="criseWhatsappOutput" style="font-size: 0.85rem; line-height: 1.5; color: var(--text-primary); white-space: pre-wrap; background: rgba(255,255,255,0.03); padding: 12px; border-radius: 8px; border: 1px dashed var(--border-light); flex: 1; min-height: 140px;">
|
||
A mensagem para os pais aparecerá aqui com tom acolhedor e transparente após clicar em "Registrar".
|
||
</div>
|
||
<a id="btnSendWhatsappDirect" href="#" target="_blank" style="display: none; background: #10b981; color: white; text-decoration: none; padding: 8px; border-radius: 6px; font-size: 0.8rem; font-weight: 700; text-align: center;">
|
||
💬 Abrir no WhatsApp Web / Celular
|
||
</a>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal: Histórico de Crises -->
|
||
<div id="criseHistoryModal" class="settings-modal" style="display: none; z-index: 10001;">
|
||
<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); padding: 14px 20px; display: flex; justify-content: space-between; align-items: center;">
|
||
<h3 style="margin: 0; font-family: 'Outfit', sans-serif; font-size: 1.1rem; color: #f87171;">🕒 Histórico de Ocorrências e Mediações</h3>
|
||
<button type="button" id="btnCloseCriseHistory" class="btn-close-modal" style="background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1.5rem; line-height: 1;">×</button>
|
||
</div>
|
||
<div id="criseHistoryList" style="padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; flex: 1;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ========================================== -->
|
||
<!-- MODAL: ATAS DE REUNIÃO & CONSELHO -->
|
||
<!-- ========================================== -->
|
||
<div id="ataModal" class="settings-modal" style="display: none;">
|
||
<div class="settings-modal-content" style="max-width: 950px; width: 95%; max-height: 92vh; 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;">
|
||
<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: #a78bfa;">Atas de Reunião & Conselho de Classe</h3>
|
||
<span style="font-size: 0.75rem; color: var(--text-secondary);">Geração de atas escolares formais, deliberações e pautas com formatação oficial</span>
|
||
</div>
|
||
</div>
|
||
<div style="display: flex; gap: 8px; align-items: center;">
|
||
<button type="button" id="btnOpenAtasHistory" style="background: rgba(139, 92, 246, 0.12); border: 1px solid rgba(139, 92, 246, 0.3); color: #c084fc; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 0.82rem; font-weight: 600;">🕒 Histórico de Atas</button>
|
||
<button type="button" id="btnCloseAtaModal" class="btn-close-modal" style="background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1.5rem; line-height: 1;">×</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="settings-modal-body" style="padding: 20px; overflow-y: auto; display: flex; flex-direction: row; gap: 20px; flex: 1; flex-wrap: wrap;">
|
||
|
||
<!-- Formulário da Ata -->
|
||
<div style="flex: 1; min-width: 320px; display: flex; flex-direction: column; gap: 10px;">
|
||
|
||
<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;">Tipo de Reunião</label>
|
||
<select id="ataTipoSelect" class="obs-select" style="width: 100%; margin-top: 4px;">
|
||
<option value="Reunião de Pais e Mestres">Reunião de Pais e Mestres</option>
|
||
<option value="Conselho de Classe / Avaliação">Conselho de Classe / Avaliação</option>
|
||
<option value="HTPC / Formação Continuada">HTPC / Formação Continuada</option>
|
||
<option value="Alinhamento Pedagógico Interno">Alinhamento Pedagógico Interno</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;">Turma</label>
|
||
<select id="ataTurmaSelect" class="obs-select" style="width: 100%; margin-top: 4px;">
|
||
<option value="">-- Geral / Toda a Escola --</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="settings-group">
|
||
<label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Título da Reunião</label>
|
||
<input type="text" id="ataTituloInput" placeholder="Ex: Reunião de Acolhimento do 1º Bimestre..." class="obs-input" style="width: 100%; padding: 8px; font-size: 0.85rem;">
|
||
</div>
|
||
|
||
<div class="settings-group">
|
||
<label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Participantes Presentes</label>
|
||
<input type="text" id="ataParticipantesInput" placeholder="Ex: Professora Camila, Coordenação, Famílias..." class="obs-input" style="width: 100%; padding: 8px; font-size: 0.85rem;">
|
||
</div>
|
||
|
||
<div class="settings-group">
|
||
<label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Pauta da Reunião</label>
|
||
<input type="text" id="ataPautaInput" placeholder="Ex: Adaptação das crianças, rotina de alimentação, passeios..." class="obs-input" style="width: 100%; padding: 8px; font-size: 0.85rem;">
|
||
</div>
|
||
|
||
<div class="settings-group">
|
||
<label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Discussões & Tópicos Abordados</label>
|
||
<textarea id="ataDiscussoesInput" placeholder="Resuma os pontos tratados na reunião..." class="obs-input" style="width: 100%; min-height: 60px; padding: 8px; font-size: 0.85rem; resize: vertical;"></textarea>
|
||
</div>
|
||
|
||
<div class="settings-group">
|
||
<label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Deliberações & Decisões Acordadas</label>
|
||
<input type="text" id="ataDeliberacoesInput" placeholder="Ex: Combinados de pontualidade, envio de agenda..." class="obs-input" style="width: 100%; padding: 8px; font-size: 0.85rem;">
|
||
</div>
|
||
|
||
<button type="button" id="btnGerarAta" style="width: 100%; padding: 10px; background: #8b5cf6; color: white; border: none; border-radius: 8px; font-weight: 700; font-size: 0.9rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;">
|
||
<span>📋 Gerar Ata Oficial Formatada</span>
|
||
</button>
|
||
|
||
</div>
|
||
|
||
<!-- Visualizador da Ata Formatada -->
|
||
<div style="flex: 1.2; min-width: 320px; display: flex; flex-direction: column; gap: 10px; background: rgba(0,0,0,0.08); padding: 14px; border-radius: 10px; border: 1px solid var(--border-light);">
|
||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||
<strong style="color: #a78bfa; font-size: 0.85rem;">📄 Documento Oficial da Ata:</strong>
|
||
<div style="display: flex; gap: 6px;">
|
||
<button type="button" id="btnCopyAta" style="background: transparent; border: 1px solid var(--border-light); color: var(--text-secondary); padding: 3px 8px; border-radius: 4px; font-size: 0.72rem; cursor: pointer;">📋 Copiar</button>
|
||
<button type="button" id="btnPrintAtaPdf" style="background: #8b5cf6; color: white; border: none; padding: 3px 10px; border-radius: 4px; font-size: 0.72rem; font-weight: 700; cursor: pointer;">📄 Imprimir PDF</button>
|
||
</div>
|
||
</div>
|
||
<div id="ataOutputText" style="font-family: 'Outfit', sans-serif; font-size: 0.88rem; line-height: 1.6; color: var(--text-primary); white-space: pre-wrap; background: rgba(255,255,255,0.03); padding: 14px; border-radius: 8px; border: 1px solid var(--border-light); flex: 1; min-height: 240px; overflow-y: auto;">
|
||
Preencha os dados da reunião e clique em "Gerar Ata Oficial" para redigir o documento formal.
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal: Histórico de Atas -->
|
||
<div id="atasHistoryModal" class="settings-modal" style="display: none; z-index: 10001;">
|
||
<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); padding: 14px 20px; display: flex; justify-content: space-between; align-items: center;">
|
||
<h3 style="margin: 0; font-family: 'Outfit', sans-serif; font-size: 1.1rem; color: #a78bfa;">🕒 Histórico de Atas de Reunião</h3>
|
||
<button type="button" id="btnCloseAtasHistory" class="btn-close-modal" style="background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1.5rem; line-height: 1;">×</button>
|
||
</div>
|
||
<div id="atasHistoryList" style="padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; flex: 1;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ========================================== -->
|
||
<!-- MODAL: STICKERS GAMIFICADOS & SHEET A4 -->
|
||
<!-- ========================================== -->
|
||
<div id="stickerModal" class="settings-modal" style="display: none;">
|
||
<div class="settings-modal-content" style="max-width: 980px; width: 95%; max-height: 92vh; 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;">
|
||
<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: #fbbf24;">Stickers Gamificados & Conquistas Pedagógicas</h3>
|
||
<span style="font-size: 0.75rem; color: var(--text-secondary);">Emissão de badges de conquistas, cartela de adesivos A4 para impressão e QR Code para os pais</span>
|
||
</div>
|
||
</div>
|
||
<button type="button" id="btnCloseStickerModal" class="btn-close-modal" style="background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1.5rem; line-height: 1;">×</button>
|
||
</div>
|
||
|
||
<div class="settings-modal-body" style="padding: 20px; overflow-y: auto; display: flex; flex-direction: row; gap: 20px; flex: 1; flex-wrap: wrap;">
|
||
|
||
<!-- Conceder Sticker -->
|
||
<div style="flex: 1; min-width: 300px; display: flex; flex-direction: column; gap: 12px;">
|
||
<h4 style="margin: 0; color: var(--text-primary); font-size: 0.92rem; border-bottom: 1px dashed var(--border-light); padding-bottom: 4px;">🏆 Conceder Conquista</h4>
|
||
|
||
<div style="display: flex; gap: 10px;">
|
||
<div class="settings-group" style="flex: 1;">
|
||
<label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Turma</label>
|
||
<select id="stickerTurmaSelect" class="obs-select" style="width: 100%; margin-top: 4px;">
|
||
<option value="">-- Selecionar Turma --</option>
|
||
</select>
|
||
</div>
|
||
<div class="settings-group" style="flex: 1;">
|
||
<label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Criança</label>
|
||
<input type="text" id="stickerAlunoInput" placeholder="Ex: Arthur, Valentina..." class="obs-input" style="width: 100%; margin-top: 4px; padding: 8px;">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="settings-group">
|
||
<label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Categoria do Sticker</label>
|
||
<select id="stickerCategoriaSelect" class="obs-select" style="width: 100%; margin-top: 4px;">
|
||
<option value="Cooperação & Gentileza">🤝 Cooperação & Gentileza (Ajudou o colega)</option>
|
||
<option value="Curiosidade & Ciência">🔬 Curiosidade & Ciência (Explorador nato)</option>
|
||
<option value="Autonomia & Cuidado">🌱 Autonomia & Cuidado (Guardou os brinquedos)</option>
|
||
<option value="Expressão Artística">🎨 Expressão Artística (Criatividade e cores)</option>
|
||
<option value="Superação & Coragem">⭐ Superação & Coragem (Tentou algo novo)</option>
|
||
<option value="Roda de Conversa">🗣️ Roda de Conversa (Ótimo ouvinte e narrador)</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="settings-group">
|
||
<label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Título do Sticker</label>
|
||
<input type="text" id="stickerTituloInput" value="Guardião da Gentileza" class="obs-input" style="width: 100%; margin-top: 4px; padding: 8px;">
|
||
</div>
|
||
|
||
<div class="settings-group">
|
||
<label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Descrição da Conquista</label>
|
||
<textarea id="stickerDescricaoInput" placeholder="Ex: Hoje o Arthur compartilhou os blocos e acolheu um amigo que estava triste..." class="obs-input" style="width: 100%; min-height: 50px; padding: 8px; font-size: 0.85rem; resize: vertical;"></textarea>
|
||
</div>
|
||
|
||
<button type="button" id="btnEmitirSticker" style="width: 100%; padding: 10px; background: #f59e0b; color: white; border: none; border-radius: 8px; font-weight: 700; font-size: 0.9rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;">
|
||
<span>🌟 Salvar Conquista & Gerar Badge</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Visualizador da Cartela de Impressão A4 -->
|
||
<div style="flex: 1.2; min-width: 320px; display: flex; flex-direction: column; gap: 10px; background: rgba(0,0,0,0.08); padding: 14px; border-radius: 10px; border: 1px solid var(--border-light);">
|
||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||
<strong style="color: #fbbf24; font-size: 0.85rem;">🖨️ Cartela de Adesivos A4 (Papel Autocolante):</strong>
|
||
<button type="button" id="btnPrintStickerSheet" style="background: #f59e0b; color: white; border: none; padding: 4px 10px; border-radius: 4px; font-size: 0.75rem; font-weight: 700; cursor: pointer;">📄 Imprimir Cartela A4</button>
|
||
</div>
|
||
|
||
<div id="stickersListGrid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; max-height: 380px; overflow-y: auto; padding: 6px;">
|
||
<!-- Stickers renderizados dinamicamente -->
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ========================================== -->
|
||
<!-- MODAL: IMPORTAÇÃO CSV DE ALUNOS -->
|
||
<!-- ========================================== -->
|
||
<div id="csvImportModal" class="settings-modal" style="display: none; z-index: 20002;">
|
||
<div class="settings-modal-content" style="max-width: 550px; width: 95%; max-height: 85vh; 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; font-family: 'Outfit', sans-serif; font-size: 1.1rem; color: #3b82f6;">📊 Importação de Alunos via CSV</h3>
|
||
<button type="button" id="btnCloseCsvImport" class="btn-close-modal" style="background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1.5rem; line-height: 1;">×</button>
|
||
</div>
|
||
<div class="settings-modal-body" style="padding: 20px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto;">
|
||
<p style="margin: 0; font-size: 0.82rem; color: var(--text-secondary);">
|
||
Carregue o arquivo CSV da secretaria ou cole a lista de chamada abaixo. O sistema reconhece colunas como: <strong>Nome, Data Nasc, Responsáveis, Contato, Alergias</strong>.
|
||
</p>
|
||
<div class="settings-group">
|
||
<label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Turma Destino</label>
|
||
<select id="csvImportTurmaSelect" class="obs-select" style="width: 100%; margin-top: 4px;"></select>
|
||
</div>
|
||
<div class="settings-group">
|
||
<label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Arquivo CSV</label>
|
||
<input type="file" id="csvFileInput" accept=".csv,.txt" style="width: 100%; margin-top: 4px; font-size: 0.85rem;">
|
||
</div>
|
||
<div class="settings-group">
|
||
<label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Ou cole o conteúdo CSV:</label>
|
||
<textarea id="csvTextContent" placeholder="Nome,Data_Nasc,Pais,Alergias Arthur Silva,15/03/2020,Maria Silva,Nenhuma Valentina Santos,22/07/2020,Carlos Santos,Alergia a lactose" class="obs-input" style="width: 100%; min-height: 100px; padding: 8px; font-size: 0.8rem; font-family: monospace;"></textarea>
|
||
</div>
|
||
<button type="button" id="btnProcessCsvImport" style="width: 100%; padding: 10px; background: #3b82f6; color: white; border: none; border-radius: 8px; font-weight: 700; font-size: 0.9rem; cursor: pointer;">
|
||
📥 Importar Alunos
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ========================================== -->
|
||
<!-- MODAL: TIMELINE DO ALUNO & DOSSIÊ -->
|
||
<!-- ========================================== -->
|
||
<div id="alunoTimelineModal" class="settings-modal" style="display: none; z-index: 20002;">
|
||
<div class="settings-modal-content" style="max-width: 750px; width: 95%; max-height: 88vh; 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;">
|
||
<div>
|
||
<h3 id="timelineAlunoNome" style="margin: 0; font-family: 'Outfit', sans-serif; font-size: 1.15rem; color: #3b82f6;">Dossiê & Linha do Tempo da Criança</h3>
|
||
<span id="timelineAlunoInfo" style="font-size: 0.75rem; color: var(--text-secondary);">Observações, Conquistas, Histórias e Relatórios</span>
|
||
</div>
|
||
<div style="display: flex; gap: 8px;">
|
||
<button type="button" id="btnExportFichaConselho" style="background: rgba(59,130,246,0.15); border: 1px solid rgba(59,130,246,0.3); color: #60a5fa; padding: 4px 8px; border-radius: 6px; font-size: 0.72rem; font-weight: 600; cursor: pointer;">📄 Ficha Conselho</button>
|
||
<button type="button" id="btnCloseAlunoTimeline" class="btn-close-modal" style="background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1.5rem; line-height: 1;">×</button>
|
||
</div>
|
||
</div>
|
||
<div class="settings-modal-body" style="padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; flex: 1;">
|
||
<div id="timelineContentArea" style="display: flex; flex-direction: column; gap: 10px;">
|
||
<!-- Itens da timeline renderizados dinamicamente -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Bibliotecas externas para renderizar markdown, PDFs, imagens e compactação ZIP -->
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
|
||
<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>
|
||
<!-- V2 cache-busting: version timestamp -->
|
||
<script>
|
||
document.write('<script src="app.js?v=' + Date.now() + '"><\/script>');
|
||
</script>
|
||
<!-- Service Worker Registration for PWA -->
|
||
<script>
|
||
if ('serviceWorker' in navigator) {
|
||
window.addEventListener('load', () => {
|
||
navigator.serviceWorker.register('/sw.js')
|
||
.then((registration) => {
|
||
console.log('PedaGog SW registered:', registration.scope);
|
||
})
|
||
.catch((error) => {
|
||
console.log('PedaGog SW registration failed:', error);
|
||
});
|
||
});
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|