From bfb3b0109c611f4ba26747c09a718aed31cd1746 Mon Sep 17 00:00:00 2001
From: Felipe de Moraes Gomes <felipe.gomes@sothis.com.br>
Date: Wed, 22 Jul 2026 14:28:53 -0300
Subject: [PATCH] =?UTF-8?q?FEAT:=20mudan=C3=A7a=20nas=20cores=20dos=20bot?=
 =?UTF-8?q?=C3=B5es=20e=20mudan=C3=A7a=20em=20alguns=20elementos=20do=20te?=
 =?UTF-8?q?xto=20e=20adi=C3=A7=C3=A3o=20dos=20dois=20pontos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 233 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 233 insertions(+)
 create mode 100644 index.html

diff --git a/index.html b/index.html
new file mode 100644
index 0000000..6fc8920
--- /dev/null
+++ b/index.html
@@ -0,0 +1,233 @@
+<div id="sothis-leads">
+<style>
+#sothis-leads { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #1f2933; line-height: 1.5; }
+#sothis-leads * { box-sizing: border-box; }
+#sothis-leads .sl-wrap { max-width: 880px; margin: 0 auto; }
+#sothis-leads h1 { font-size: 22px; margin-bottom: 4px; }
+#sothis-leads .sl-sub { color: #61707d; font-size: 14px; margin-bottom: 20px; }
+#sothis-leads .sl-card {
+  background: #fff; border: 1px solid #e1e7ed; border-radius: 12px;
+  padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,.05); margin-bottom: 24px;
+}
+#sothis-leads .sl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
+#sothis-leads .sl-full { grid-column: 1 / -1; }
+#sothis-leads label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
+#sothis-leads label .sl-req { color: #d93025; }
+#sothis-leads input, #sothis-leads select, #sothis-leads textarea {
+  width: 100%; padding: 10px 12px; border: 1px solid #cbd5dd; border-radius: 8px;
+  font-size: 14px; font-family: inherit; background: #fff; color: #1f2933;
+}
+#sothis-leads input:focus, #sothis-leads select:focus, #sothis-leads textarea:focus { outline: 2px solid #ff7a59; border-color: #ff7a59; outline-offset: -1px; }
+#sothis-leads textarea { min-height: 110px; resize: vertical; }
+#sothis-leads .sl-hint { font-size: 12px; color: #8795a1; margin-top: 4px; }
+#sothis-leads .sl-actions { display: flex; gap: 12px; align-items: center; margin-top: 20px; }
+#sothis-leads button {
+  background: #31a3b5; color: #fff; border: none; border-radius: 20px;
+  padding: 12px 28px; font-size: 15px; font-weight: 600; cursor: pointer;
+}
+#sothis-leads button:hover { background: #1d6570; }
+#sothis-leads button:disabled { background: #cbd5dd; cursor: not-allowed; }
+#sothis-leads .sl-btn-sec { background: #fff; color: #45535e; border: 1px solid #cbd5dd; }
+#sothis-leads .sl-btn-sec:hover { background: #f5f7fa; }
+#sothis-leads #sl-status { font-size: 14px; }
+#sothis-leads .sl-ok { color: #0b8043; } #sothis-leads .sl-err { color: #d93025; white-space: pre-wrap; }
+#sothis-leads .sl-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid #ff7a59;
+  border-top-color: transparent; border-radius: 50%; animation: sl-sp .7s linear infinite; vertical-align: -2px; margin-right: 6px; }
+@keyframes sl-sp { to { transform: rotate(360deg); } }
+#sothis-leads h2 { font-size: 16px; margin-bottom: 12px; }
+#sothis-leads table { width: 100%; border-collapse: collapse; font-size: 13px; }
+#sothis-leads th, #sothis-leads td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #eef1f4; vertical-align: top; }
+#sothis-leads th { color: #61707d; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
+#sothis-leads .sl-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
+#sothis-leads .sl-b-lead { background: #e8f0fe; color: #1a56db; }
+#sothis-leads .sl-b-prospect { background: #fef3e2; color: #b45309; }
+#sothis-leads .sl-empty { color: #8795a1; text-align: center; padding: 16px; }
+#sothis-leads .sl-steps { font-size: 13px; color: #61707d; margin-top: 10px; }
+#sothis-leads .sl-steps span { margin-right: 14px; }
+#sothis-leads .sl-done::before { content: "✓ "; color: #0b8043; }
+#sothis-leads .sl-pend::before { content: "○ "; color: #cbd5dd; }
+#sothis-leads .sl-fail::before { content: "✗ "; color: #d93025; }
+#sothis-leads .sl-hp { position: absolute; left: -9999px; top: -9999px; height: 0; width: 0; overflow: hidden; }
+</style>
+ 
+<div class="sl-wrap">
+  <h1>Cadastro de Leads</h1>
+  <div class="sl-sub">Preencha os dados do novo lead ou prospect. Ao enviar, serão criados no HubSpot: a <b>Empresa</b>, o <b>Contato</b> (vinculado à empresa) e um <b>Negócio</b> no pipeline Sales Process.</div>
+ 
+  <div class="sl-card">
+    <form id="sl-leadForm">
+      <div class="sl-grid">
+        <div>
+          <label>Nome do Cliente (empresa) Oportunidade: <span class="sl-req">*</span></label>
+          <input id="sl-empresa" required placeholder="Ex.: ACME Ltda">
+        </div>
+        <div>
+          <label>Tipo: <span class="sl-req">*</span></label>
+          <select id="sl-tipo">
+            <option value="lead">Lead</option>
+            <option value="prospect">Prospect</option>
+          </select>
+          <div class="sl-hint">Define o estágio inicial do negócio no pipeline</div>
+        </div>
+        <div>
+          <label>Nome do Contato da Oportunidade: <span class="sl-req">*</span></label>
+          <input id="sl-contato" required placeholder="Ex.: Maria Silva">
+        </div>
+        <div>
+          <label>Telefone / WhatsApp: <span class="sl-req">*</span></label>
+          <input type="number" id="sl-telefone" required placeholder="Ex.: +55 11 99999-9999">
+        </div>
+        <div class="sl-full">
+          <label>E-mail do Contato: <span class="sl-req">*</span></label>
+          <input id="sl-email" type="email" required placeholder="Ex.: maria@acme.com.br">
+        </div>
+        <div>
+          <label>Nome do Canal de Venda:</label>
+          <input id="sl-canalNome" placeholder="Ex.: Parceiro / Revenda XYZ">
+        </div>
+        <div>
+          <label>Contato do Canal de Venda:</label>
+          <input id="sl-canalContato" placeholder="Ex.: João Souza">
+        </div>
+        <div>
+          <label>Telefone / WhatsApp:</label>
+          <input type="number" id="sl-telefoneOpp" placeholder="Ex.: +55 11 99999-9999">
+        </div>
+        <div>
+          <label>Telefone / WhatsApp do Canal de Venda:</label>
+          <input type="number" id="sl-canalTelefone" placeholder="Ex.: +55 11 99999-9999">
+        </div>
+        <div class="sl-full">
+          <label>Escopo / Serviço / Necessidade: <span class="sl-req">*</span></label>
+          <textarea id="sl-escopo" required placeholder="Detalhe o que o cliente precisa: serviço de interesse, contexto, urgência, orçamento estimado, etc."></textarea>
+        </div>
+      </div>
+      <div class="sl-hp"><label>Não preencha<input id="sl-_gotcha" tabindex="-1" autocomplete="off"></label></div>
+      <div class="sl-actions">
+        <button type="submit" id="sl-btnSalvar">Cadastrar</button>
+        <button type="button" class="sl-btn-sec" id="sl-btnLimpar">Apagar tudo</button>
+        <span id="sl-status"></span>
+      </div>
+      <div class="sl-steps" id="sl-steps" style="display:none">
+        <span id="sl-st-emp" class="sl-pend">Empresa</span>
+        <span id="sl-st-con" class="sl-pend">Contato</span>
+        <span id="sl-st-neg" class="sl-pend">Negócio</span>
+      </div>
+    </form>
+  </div>
+ 
+  <div class="sl-card">
+    <h2>Leads cadastrados nessa sessão</h2>
+    <table>
+      <thead><tr><th>Data</th><th>Cliente</th><th>Contato</th><th>Tipo</th><th>Escopo</th><th>Status</th></tr></thead>
+      <tbody id="sl-histBody"><tr><td colspan="6" class="sl-empty">Nenhum lead cadastrado ainda.</td></tr></tbody>
+    </table>
+  </div>
+</div>
+ 
+<script>
+(function () {
+  // Endpoint criado pelo snippet PHP (leads-backend.php) via WPCode.
+  // Como a pagina e o endpoint estao no mesmo dominio, o caminho relativo funciona.
+  var ENDPOINT = "/wp-json/sothis/v1/leads";
+ 
+  var TIPO_LABEL = { lead: "Lead", prospect: "Prospect" };
+  var TIPO_CLASS = { lead: "sl-b-lead", prospect: "sl-b-prospect" };
+ 
+  function getHist() { try { return JSON.parse(localStorage.getItem("sothisLeadsHist") || "[]"); } catch (e) { return []; } }
+  function saveHist(h) { localStorage.setItem("sothisLeadsHist", JSON.stringify(h.slice(0, 50))); }
+  function esc(s) { var d = document.createElement("div"); d.textContent = s || ""; return d.innerHTML; }
+ 
+  function renderHist() {
+    var h = getHist();
+    var tb = document.getElementById("sl-histBody");
+    if (!h.length) { tb.innerHTML = '<tr><td colspan="6" class="sl-empty">Nenhum lead cadastrado ainda.</td></tr>'; return; }
+    tb.innerHTML = h.map(function (r) {
+      return '<tr>' +
+        '<td>' + esc(r.data) + '</td><td>' + esc(r.empresa) + '</td>' +
+        '<td>' + esc(r.contato) + '<br><span style="color:#8795a1">' + esc(r.email) + '</span></td>' +
+        '<td><span class="sl-badge ' + (TIPO_CLASS[r.tipo] || "sl-b-lead") + '">' + esc(TIPO_LABEL[r.tipo] || r.tipo) + '</span></td>' +
+        '<td>' + esc((r.escopo || "").length > 80 ? r.escopo.slice(0, 80) + "…" : r.escopo) + '</td>' +
+        '<td class="' + (r.ok ? "sl-ok" : "sl-err") + '">' + (r.ok ? "Enviado ✓" : "Falhou") + '</td>' +
+      '</tr>';
+    }).join("");
+  }
+ 
+  function setStep(id, cls) { document.getElementById(id).className = cls; }
+ 
+  document.getElementById("sl-btnLimpar").onclick = function () {
+    document.getElementById("sl-leadForm").reset();
+    document.getElementById("sl-status").textContent = "";
+    document.getElementById("sl-steps").style.display = "none";
+  };
+ 
+  document.getElementById("sl-leadForm").addEventListener("submit", function (e) {
+    e.preventDefault();
+    var payload = {
+      empresa: document.getElementById("sl-empresa").value.trim(),
+      contato: document.getElementById("sl-contato").value.trim(),
+      telefone: document.getElementById("sl-telefone").value.trim(),
+      email: document.getElementById("sl-email").value.trim(),
+      escopo: document.getElementById("sl-escopo").value.trim(),
+      tipo: document.getElementById("sl-tipo").value,
+      canalNome: document.getElementById("sl-canalNome").value.trim(),
+      canalContato: document.getElementById("sl-canalContato").value.trim(),
+      telefoneOpp: document.getElementById("sl-telefoneOpp").value.trim(),
+      canalTelefone: document.getElementById("sl-canalTelefone").value.trim(),
+      _gotcha: document.getElementById("sl-_gotcha").value
+    };
+ 
+    var btn = document.getElementById("sl-btnSalvar");
+    var status = document.getElementById("sl-status");
+    var steps = document.getElementById("sl-steps");
+    btn.disabled = true;
+    steps.style.display = "block";
+    ["sl-st-emp", "sl-st-con", "sl-st-neg"].forEach(function (i) { setStep(i, "sl-pend"); });
+    status.className = "";
+    status.innerHTML = '<span class="sl-spinner"></span>Enviando para a Sothis…';
+ 
+    var ok = false;
+    fetch(ENDPOINT, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(payload)
+    }).then(function (r) {
+      return r.json().catch(function () { return {}; }).then(function (res) { return { r: r, res: res }; });
+    }).then(function (result) {
+      var r = result.r, res = result.res;
+      var st = res.steps || {};
+      setStep("sl-st-emp", st.company ? "sl-done" : "sl-fail");
+      setStep("sl-st-con", st.contact ? "sl-done" : "sl-fail");
+      setStep("sl-st-neg", st.deal ? "sl-done" : "sl-fail");
+ 
+      if (r.ok && res.ok) {
+        ok = true;
+        status.className = "sl-ok";
+        status.textContent = "✓ Lead enviado com sucesso!";
+        document.getElementById("sl-leadForm").reset();
+      } else {
+        status.className = "sl-err";
+        status.textContent = "Erro ao enviar: " + String(res.error || ("HTTP " + r.status)).slice(0, 300);
+      }
+    }).catch(function (err) {
+      ["sl-st-emp", "sl-st-con", "sl-st-neg"].forEach(function (i) {
+        if (document.getElementById(i).className === "sl-pend") setStep(i, "sl-fail");
+      });
+      status.className = "sl-err";
+      status.textContent = "Erro de conexão: " + String((err && err.message) || err).slice(0, 300);
+    }).finally(function () {
+      var h = getHist();
+      h.unshift({
+        data: new Date().toLocaleString("pt-BR", { day: "2-digit", month: "2-digit", year: "2-digit", hour: "2-digit", minute: "2-digit" }),
+        empresa: payload.empresa, contato: payload.contato, email: payload.email, tipo: payload.tipo, escopo: payload.escopo, ok: ok
+      });
+      saveHist(h);
+      renderHist();
+      btn.disabled = false;
+    });
+  });
+ 
+  renderHist();
+})();
+</script>
+</div>
\ No newline at end of file