feat: initial commit - Carinha Control Panel v1.0 com UI glassmorphism, watch-bar, emojis, braco robotico e conversa IA

treinamento.html

@@ -0,0 +1,116 @@
+<!doctype html>
+<html lang="pt-BR">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Treinamento & Personalidade · Carinha</title>
+  <link rel="stylesheet" href="/dashboard.css">
+  <link rel="stylesheet" href="/treinamento.css">
+  <script src="/dashboard.js" defer></script>
+</head>
+<body>
+  <div style="display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:16px;margin-bottom:12px">
+    <div>
+      <h1>Treinamento & Personalidade</h1>
+      <p style="margin:4px 0 0">Ensine novos hábitos, registre preferências e crie desenhos dinâmicos com o Gemini.</p>
+    </div>
+    <div>
+      <a href="/emojis" class="primary" style="display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--raio-sm)">
+        <span>✨ Ver Biblioteca de Emojis</span>
+      </a>
+    </div>
+  </div>
+
+  <div class="treinamento-grid">
+    <!-- Seção de Rotina e Preferências -->
+    <section class="card rotina">
+      <h2>
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--ciano)" stroke-width="2"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
+        Rotina & Preferências
+      </h2>
+      <p>Hábitos e gostos que moldam a convivência com o Carinha.</p>
+
+      <form id="rotinaForm" style="margin-top:10px">
+        <label for="rotinaTexto">O que o Carinha deve saber?</label>
+        <input id="rotinaTexto" type="text" maxlength="300" required placeholder="Ex.: De manhã gosto de café preto e notícias">
+        <button class="primary" style="width:100%">Registrar Preferência</button>
+      </form>
+
+      <div id="rotinas"></div>
+    </section>
+
+    <!-- Laboratório de Criação de Desenhos SVG com Gemini -->
+    <section class="card laboratorio">
+      <div style="display:flex;justify-content:space-between;align-items:center">
+        <h2>
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--ciano)" stroke-width="2"><circle cx="12" cy="12" r="10"/><polygon points="12 8 8 12 12 16 16 12 12 8"/></svg>
+          Laboratório de Expressão IA
+        </h2>
+        <span class="badge" style="font-size:11px">Gemini SVG Studio</span>
+      </div>
+
+      <iframe id="previa" title="Prévia animada do Carinha" src="/carinha.html?espelho=1&audio=0"></iframe>
+      
+      <p style="font-size:13px;color:var(--fraco)">
+        Descreva uma ideia visual para o Gemini sintetizar em formas vetoriais no rosto do robô.
+      </p>
+
+      <form id="figurinhaForm" style="margin:8px 0 14px">
+        <label for="figurinhaTexto">O que você quer desenhar?</label>
+        <input id="figurinhaTexto" type="text" maxlength="1000" required placeholder="Ex.: Uma lâmpada acendendo com brilhos ou um coração pulsando nos olhos">
+        <div class="actions" style="margin-top:6px">
+          <button class="primary" id="criarFigurinha" type="submit">✨ Desenhar e Mostrar</button>
+          <button id="gerar" type="button">Gerar Reações Automáticas</button>
+        </div>
+      </form>
+
+      <details class="opcoes" style="margin-top:4px">
+        <summary>Criação Automática Periódica</summary>
+        <label style="display:flex;align-items:center;gap:10px;margin-top:10px">
+          <input id="automatico" type="checkbox">
+          <span>Criar novas reações a cada hora quando houver conversas ativas</span>
+        </label>
+      </details>
+
+      <details style="margin-top:12px">
+        <summary>Prompt enviado ao Gemini (Inspeção Técnica)</summary>
+        <p style="font-size:12.5px">Orientação de sistema para os desenhos vetoriais:</p>
+        <pre id="promptOrientacao"></pre>
+        <h3 style="margin-top:14px">Último Prompt Enviado</h3>
+        <pre id="ultimoPrompt">Nenhum pedido enviado ainda.</pre>
+      </details>
+
+      <p id="estado" role="status" style="margin-top:12px">Carregando…</p>
+    </section>
+  </div>
+
+  <!-- Diário & Resumo de Sessões -->
+  <div class="grid" style="margin-top:24px">
+    <section class="card">
+      <details>
+        <summary>
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--ciano)" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
+          Resumo das Sessões de Treino
+        </summary>
+        <div id="resumos" style="margin-top:12px"></div>
+      </details>
+    </section>
+
+    <section class="card">
+      <details>
+        <summary>
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--ciano)" stroke-width="2"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
+          Diário de Conversas do Robô
+        </summary>
+        <p style="font-size:13px;margin:8px 0 12px">Registros gerados a partir dos diálogos anteriores.</p>
+        <div class="actions" style="margin-bottom:12px">
+          <button id="limparDiario" type="button" class="danger" style="font-size:12px">🗑️ Apagar Diário e Resumos</button>
+        </div>
+        <div id="diario"></div>
+      </details>
+    </section>
+  </div>
+
+  <script src="/treinamento.js"></script>
+</body>
+</html>