carinha-control-panel/dashboard.html

<!doctype html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Visão Geral · Central Carinha IA</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:12px">
    <div>
      <h1>Central do Carinha</h1>
      <p style="margin:4px 0 0;font-size:15px">Supervisão em tempo real do Galaxy S10, telemetria de sensores, cérebro Gemini e robótica.</p>
    </div>
    <div style="display:flex;gap:10px;align-items:center">
      <span class="badge ativo" id="overviewSystemBadge"><span class="badge-dot"></span> Sistema Ativo</span>
    </div>
  </div>

  <div class="overview-grid">
    <!-- Card do Rosto do Robô com Visualizador Interativo -->
    <section class="card overview-face-card">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px">
        <h2>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--ciano)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
          Expressão do Personagem
        </h2>
        <span class="badge" style="font-size:11.5px">Prévia Sincronizada</span>
      </div>

      <iframe class="overview-face" id="overviewFace" title="Prévia do rosto do robô" src="/carinha.html?espelho=1&audio=0"></iframe>

      <!-- Mood Switches Rápidos -->
      <div style="margin:8px 0 16px">
        <label style="font-size:12px;text-transform:uppercase;letter-spacing:0.05em;color:var(--muito-fraco);margin-bottom:8px;display:block">Expressão Rápida</label>
        <div class="toolbar" style="margin:0;gap:8px">
          <button type="button" class="btn-mood" data-gesto="feliz" style="padding:7px 12px;font-size:13px">😊 Feliz</button>
          <button type="button" class="btn-mood" data-gesto="surpreso" style="padding:7px 12px;font-size:13px">😲 Surpreso</button>
          <button type="button" class="btn-mood" data-gesto="coracao" style="padding:7px 12px;font-size:13px">💖 Amor</button>
          <button type="button" class="btn-mood" data-gesto="piscar" style="padding:7px 12px;font-size:13px">😉 Piscar</button>
          <button type="button" class="btn-mood" data-gesto="dormir" style="padding:7px 12px;font-size:13px">🌙 Dormir</button>
          <button type="button" class="btn-mood" data-gesto="acordar" style="padding:7px 12px;font-size:13px;border-color:var(--ciano)">☀️ Acordar</button>
        </div>
      </div>

      <div class="actions" style="margin-top:auto;border-top:1px solid var(--borda);padding-top:16px">
        <a href="/painel" class="primary" style="display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:var(--raio-sm);font-weight:700">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
          Abrir Câmera & Rosto
        </a>
        <button id="overviewReload" type="button">🔄 Recarregar Tela Celular</button>
        <button id="overviewSfxHappy" type="button" title="Testar som procedural alegre">🎵 Tocar Bip</button>
      </div>
      <p id="overviewMessage" role="status" style="margin-top:10px;font-size:13px;min-height:20px;color:var(--ciano)"></p>
    </section>

    <!-- Grade de Métricas & Telemetria -->
    <div style="display:flex;flex-direction:column;gap:18px">
      <div class="metrics">
        <section class="card metric">
          <div style="display:flex;justify-content:space-between;align-items:center">
            <p>Galaxy S10</p>
            <span style="font-size:18px">📱</span>
          </div>
          <strong id="overviewPhone">—</strong>
          <small id="overviewIP">Aguardando conexão</small>
        </section>

        <section class="card metric">
          <div style="display:flex;justify-content:space-between;align-items:center">
            <p>Bateria</p>
            <span style="font-size:18px">🔋</span>
          </div>
          <strong id="overviewBattery">—</strong>
          <small id="overviewCharge">Aguardando dados</small>
        </section>

        <section class="card metric">
          <div style="display:flex;justify-content:space-between;align-items:center">
            <p>Inteligência IA</p>
            <span style="font-size:18px">🧠</span>
          </div>
          <strong id="overviewAI" style="font-size:22px">—</strong>
          <small id="overviewModel">Verificando API</small>
        </section>

        <section class="card metric">
          <div style="display:flex;justify-content:space-between;align-items:center">
            <p>Expressões</p>
            <span style="font-size:18px">🎨</span>
          </div>
          <strong id="overviewReactions">—</strong>
          <small>Reações na biblioteca</small>
        </section>
      </div>

      <!-- Feed de Atividades Recentes -->
      <section class="card" style="flex:1">
        <h2>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--ciano)" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
          Telemetria & Eventos
        </h2>
        <div id="overviewFeed" style="display:flex;flex-direction:column;gap:10px;margin-top:12px;font-size:13px;max-height:165px;overflow-y:auto">
          <div style="display:flex;align-items:center;gap:10px;color:var(--fraco)">
            <span class="badge-dot" style="background:var(--ciano)"></span>
            <span>Central inicializada no Orange Pi Zero 3</span>
            <span style="margin-left:auto;font-size:11px;font-family:monospace">agora</span>
          </div>
        </div>
      </section>
    </div>
  </div>

  <!-- Links Rápidos de Acesso com Visual Moderno -->
  <h2 style="margin:36px 0 16px">Navegação Rápida</h2>
  <div class="quick-links">
    <a class="card" href="/conversa">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">
        <h2>💬 Conversar</h2>
        <span class="badge" style="font-size:11px">Voz & Texto</span>
      </div>
      <p>Interaja por voz e texto com o Carinha usando Gemini e memória de longo prazo.</p>
    </a>

    <a class="card" href="/emojis">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">
        <h2>✨ Emojis & Reações</h2>
        <span class="badge" style="font-size:11px">Estúdio SVG</span>
      </div>
      <p>Desenhe novas reações com inteligência artificial e teste diretamente nos olhos do robô.</p>
    </a>

    <a class="card" href="/braco">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">
        <h2>🦾 Braço Robótico</h2>
        <span class="badge" style="font-size:11px">Cinemática</span>
      </div>
      <p>Controle ângulos, crie coreografias articuladas e coordene 8 canais de movimento.</p>
    </a>

    <a class="card" href="/treinamento">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">
        <h2>📚 Treinamento</h2>
        <span class="badge" style="font-size:11px">Personalidade</span>
      </div>
      <p>Defina rotinas, hábitos, prompts e consulte o diário de interações do robô.</p>
    </a>
  </div>

  <script src="/overview.js" defer></script>
</body>
</html>