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

emojis.html

@@ -0,0 +1,148 @@
+<!doctype html>
+<html lang="pt-BR">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Emojis & Reações · Carinha</title>
+  <link rel="stylesheet" href="/dashboard.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:14px">
+    <div>
+      <h1>Biblioteca de Emojis & Reações</h1>
+      <p style="margin:4px 0 0">Gerencie expressões visuais, desenhos vetoriais e reações inteligentes para o Carinha.</p>
+    </div>
+    <div class="actions">
+      <button class="primary" id="emojiNew">✨ Criar Nova Reação</button>
+      <button id="emojiUndo" disabled>↩️ Desfazer</button>
+      <button id="emojiExport">📦 Exportar JSON</button>
+    </div>
+  </div>
+
+  <!-- WORKSPACE STICKY: O simulador fica fixado na tela enquanto a biblioteca rola ao lado -->
+  <div class="emojis-workspace" style="margin-top:16px">
+    
+    <!-- Coluna Fixa (Sticky Preview) -->
+    <aside class="sticky-preview-col">
+      <section class="card sticky-preview-card">
+        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px">
+          <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"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg>
+            Simulador ao Vivo
+          </h2>
+          <span class="badge ativo" style="font-size:11px">📌 Sempre Visível</span>
+        </div>
+
+        <iframe id="emojiPreview" title="Prévia de emoji no rosto" style="height:250px;border-radius:var(--raio-md);box-shadow:inset 0 0 30px rgba(0,0,0,0.8),0 0 15px var(--ciano-glow)" src="/carinha.html?espelho=1&audio=0"></iframe>
+        
+        <div class="actions" style="margin-top:14px">
+          <button id="emojiStop" class="danger" style="flex:1">🛑 Parar no Celular</button>
+          <a href="/treinamento" class="primary" style="display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:var(--raio-sm);font-size:13px">
+            <span>🎨 Gemini SVG</span>
+          </a>
+        </div>
+
+        <p class="code-label" style="margin-top:10px;font-size:11.5px;color:var(--muito-fraco);line-height:1.4">
+          Dica: Ao clicar em "Prévia" em qualquer cartão, a animação acontece aqui mesmo sem você perder a posição de rolagem!
+        </p>
+        <p id="emojiState" role="status" aria-live="polite" style="font-size:13px;color:var(--ciano);min-height:22px;margin:8px 0 0"></p>
+      </section>
+    </aside>
+
+    <!-- Coluna Rolável (Biblioteca de Emojis) -->
+    <main class="emojis-library-col" style="min-width:0">
+      <section class="card" style="margin-bottom:20px">
+        <div style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px">
+          <h2 style="margin:0">Catálogo de Reações do Robô</h2>
+          <span class="badge ativo" id="emojiCount">—</span>
+        </div>
+        <p style="margin:6px 0 12px;font-size:13px">Reações salvas entram no repertório da conversa com o Gemini ou podem ser chamadas manualmente.</p>
+        
+        <label for="emojiSearch">Filtrar por nome ou situação:</label>
+        <input id="emojiSearch" placeholder="Ex.: café, feliz, ideias, surpresa, música...">
+      </section>
+
+      <!-- Grade de Cartões de Emojis -->
+      <div id="emojiLibrary" class="library-grid"></div>
+    </main>
+
+  </div>
+
+  <!-- Modal / Dialog de Criação e Edição -->
+  <div id="emojiDialog" class="dialog-overlay" hidden role="dialog" aria-modal="true" aria-labelledby="emojiEditorTitle">
+    <form id="emojiEditForm" class="dialog-card">
+      <div style="display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--borda);padding-bottom:12px;margin-bottom:18px">
+        <h2 id="emojiEditorTitle" style="margin:0">Criar Emoji</h2>
+        <button type="button" id="emojiCancel" style="border:none;background:transparent;font-size:18px;cursor:pointer">✕</button>
+      </div>
+
+      <label for="emojiName">Nome da Reação</label>
+      <input id="emojiName" required maxlength="50" placeholder="Ex.: Café Matinal, Ideia Brilhante">
+
+      <label for="emojiReason">Quando Usar (Situação para o Gemini)</label>
+      <textarea id="emojiReason" required maxlength="200" rows="3" placeholder="Ex.: Quando o usuário falar sobre café, cansaço ou manhã"></textarea>
+
+      <label for="emojiCharacter">Caractere ou Desenho</label>
+      <select id="emojiCharacter">
+        <option value="">Manter desenho original</option>
+      </select>
+
+      <!-- Grade de Atalhos Rápidos de Emojis -->
+      <div style="margin:6px 0 16px">
+        <span style="font-size:12px;color:var(--fraco)">Atalhos rápidos:</span>
+        <div style="display:flex;gap:6px;flex-wrap:wrap;margin-top:6px" id="quickEmojiBar">
+          <button type="button" class="swatch" style="font-size:18px;display:grid;place-items:center" data-val="💡">💡</button>
+          <button type="button" class="swatch" style="font-size:18px;display:grid;place-items:center" data-val="☕">☕</button>
+          <button type="button" class="swatch" style="font-size:18px;display:grid;place-items:center" data-val="❤️">❤️</button>
+          <button type="button" class="swatch" style="font-size:18px;display:grid;place-items:center" data-val="⭐">⭐</button>
+          <button type="button" class="swatch" style="font-size:18px;display:grid;place-items:center" data-val="🚀">🚀</button>
+          <button type="button" class="swatch" style="font-size:18px;display:grid;place-items:center" data-val="🤖">🤖</button>
+          <button type="button" class="swatch" style="font-size:18px;display:grid;place-items:center" data-val="🕶️">🕶️</button>
+          <button type="button" class="swatch" style="font-size:18px;display:grid;place-items:center" data-val="🔥">🔥</button>
+          <button type="button" class="swatch" style="font-size:18px;display:grid;place-items:center" data-val="🐱">🐱</button>
+          <button type="button" class="swatch" style="font-size:18px;display:grid;place-items:center" data-val="😴">😴</button>
+        </div>
+      </div>
+
+      <label for="emojiLocation">Posição na Tela do Carinha</label>
+      <select id="emojiLocation">
+        <option value="olhos">Dentro dos dois olhos</option>
+        <option value="ao_redor">Ao lado do rosto</option>
+      </select>
+
+      <p class="code-label" style="font-size:12px;margin:12px 0 18px">
+        Escolher um emoji substitui o desenho SVG. Você poderá desfazer a qualquer momento.
+      </p>
+
+      <div class="actions" style="justify-content:flex-end">
+        <button type="button" onclick="document.getElementById('emojiCancel').click()">Cancelar</button>
+        <button class="primary" type="submit">Salvar Reação</button>
+      </div>
+      <p id="emojiEditState" role="status" style="margin-top:10px;font-size:13px;color:var(--vermelho)"></p>
+    </form>
+  </div>
+
+  <script src="/biblioteca.js" defer></script>
+  <script>
+    // Atalho para preencher emoji clicando na barra de atalhos rápidos
+    document.addEventListener('DOMContentLoaded', () => {
+      document.querySelectorAll('#quickEmojiBar button').forEach(btn => {
+        btn.onclick = () => {
+          const val = btn.getAttribute('data-val');
+          const sel = document.getElementById('emojiCharacter');
+          if (sel && val) {
+            let found = false;
+            for (let opt of sel.options) {
+              if (opt.value === val) { opt.selected = true; found = true; break; }
+            }
+            if (!found) {
+              sel.add(new Option(val, val, true, true));
+            }
+          }
+        };
+      });
+    });
+  </script>
+</body>
+</html>