Text + image

<h2 style="white-space:pre-line">Cuidados do seu jeito</h2>
<p>Conte para a gente suas preferências, necessidades e rotina.<br />Com essas informações, vamos encontrar o cuidador ideal para o seu perfil.</p>
<p>💚 Para cuidar de quem você ama, tecnologia é Vital.</p>

Embed

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=3, user-scalable=yes, viewport-fit=cover">
  <title>Formulário do Paciente</title>
  <style>
    :root {
      --bg:#F1F8F4; --card:#ffffff; --muted:#6b7368; --text:#3F473C;
      --accent:#567861; --accent-2:#619B75; --danger:#c14254; --ok:#2e8053;
      --ink-weak:#3F473C22; --ring:#619B7533;
    }
    *{box-sizing:border-box; margin:0; padding:0}
    body{
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      color:var(--text);
      background:var(--bg);
    }
    main{min-width:70%; max-width:900px; margin:0 auto; padding:20px;}
    h1{text-align:center; margin-bottom:20px}
    .card{
      background:var(--card);
      border:1px solid var(--ink-weak);
      border-radius:16px;
      padding:20px;
      margin-bottom:20px;
      box-shadow:0 6px 22px rgba(63,71,60,.08);
    }
    .card h2{font-size:18px; margin-bottom:12px}
    .option-buttons{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:12px;}
    .option-buttons button{flex:1; padding:10px; font-size:14px; font-weight:600; border-radius:12px; border:1px solid var(--ink-weak); background:#fff; cursor:pointer; transition:all .2s ease; text-align:center;}
    .option-buttons button.selected{background:var(--accent-2); color:#fff; border-color:var(--accent);}
    input[type="tel"], input[type="text"], input[type="number"], input[type="email"], input[type="date"], select {
      width:100%; padding:12px; font-size:15px; margin-top:6px; margin-bottom:12px;
      border:1px solid var(--ink-weak); border-radius:12px; background:#fff; color:var(--text);
    }
    input:focus, select:focus {border-color:var(--accent-2); box-shadow:0 0 0 3px var(--ring)}
.greenCheck{color:rgb(95,148,113)!important; accent-color: var(--ok);}
    label{font-size:15px; font-weight:500; margin-bottom:6px; display:block;}
    .check-group label{margin:10px 0; display: flex; align-items: center; gap: 8px;}
    .btn{width:100%; padding:14px; font-size:16px; font-weight:700; border:0; border-radius:12px; cursor:pointer; color:#fff; background:linear-gradient(135deg, var(--accent), var(--accent-2)); margin-top:10px;}
    .hidden{display:none;}
    .combo {margin-top: 5px;margin-bottom: 10px;}
    .status{margin-top:10px;font-size:15px;font-weight:600;text-align:center;}
    .status.error{color:var(--danger);} .status.ok{color:var(--ok);}
    input[type="tel"], input[type="text"], input[type="number"], input[type="email"], input[type="date"], select, textarea {
  width:100%;
  padding:12px;
  font-size:15px;
  margin-top:6px;
  margin-bottom:12px;
  border:1px solid var(--ink-weak);
  border-radius:12px;
  background:#fff;
  color:var(--text);
}
textarea:focus {
  border-color:var(--accent-2);
  box-shadow:0 0 0 3px var(--ring);
}
  </style>
</head>
<body>
<main>
 <div class="card">
    <h2>Dados do Paciente</h2>
    <label>Nome completo</label>
    <input type="text" id="patientName" placeholder="Nome do paciente" />
    <label>Idade</label>
    <input type="number" id="patientAge" placeholder="Ex.: 87" />
    <label>Gênero</label>
    <div class="option-buttons" data-key="gender">
      <button data-value="patientGenderMale">Masculino</button>
      <button data-value="patientGenderFemale">Feminino</button>
      <button data-value="patientGenderOther">Outro</button>
    </div>
  </div>

  <div class="card">
    <h2>Local do Atendimento</h2>
     <label>Estado</label>
    <select id="stateSelect" class="combo">
      <option value="">Selecione um estado</option>
    </select>

    <label>Cidade</label>
    <select id="citySelect" class="combo">
      <option value="">Selecione uma cidade</option>
    </select>

    <label>Bairro</label>
    <input type="text" id="district" placeholder="Ex.: Jardim Camburi" />
  </div>

  <div class="card">
    <h2>Tipo de Plantão Desejado</h2>
    <label>Tipo de atendimento</label>
    <div class="option-buttons" data-key="planType">
      <button data-value="punctualShiftType">Hospitalar</button>
      <button data-value="continuousShiftType">Domiciliar</button>
    </div>
    <label>Data de início</label>
      <input type="date" id="startDate" />
    <label>Detalhes do plantão</label>
    <textarea id="shiftDetails" placeholder="Digite aqui detalhes importantes sobre o plantão..." rows="4"></textarea> 
  </div>

  <div class="card">
    <h2>Permissões durante o plantão</h2>
    <div class="check-group">
      <label><input type="checkbox" id="allowSleep" class="greenCheck" /> Permite que o cuidador durma no local, se necessário</label>
      <label><input type="checkbox" id="allowMeals" class="greenCheck" /> Permite que o cuidador se alimente na residência durante o plantão</label>
    </div>
  </div>

  <div class="card">
    <h2>Estilo de Cuidador Preferido</h2>
    <label>Energia</label>
    <div class="option-buttons" data-key="energy">
      <button data-value="styleEnergyCalm">Calmo(a)</button>
      <button data-value="styleEnergyEnergetic">Energético(a)</button>
    </div>
    <label>Organização</label>
    <div class="option-buttons" data-key="organization">
      <button data-value="styleOrganizationOrganized">Organizado(a)</button>
      <button data-value="styleOrganizationFlexible">Flexível</button>
    </div>
  </div>

  <div class="card">
    <h2>Condições de Saúde do Paciente</h2>
    <div class="check-group" id="conditionsGroup">
      <label><input type="checkbox" class="greenCheck" value="conditionBedridden" /> Acamado</label>
      <label><input type="checkbox" class="greenCheck" value="conditionWheelchair" /> Cadeirante</label>
      <label><input type="checkbox" class="greenCheck" value="conditionHypertensive" /> Hipertenso</label>
      <label><input type="checkbox" class="greenCheck" value="conditionDiabetic" /> Diabético</label>
      <label><input type="checkbox" class="greenCheck" value="conditionDementia" /> Demência</label>
      <label><input type="checkbox" class="greenCheck" value="conditionAlzheimer" /> Alzheimer</label>
      <label><input type="checkbox" class="greenCheck" value="conditionDepression" /> Depressão</label>
      <label><input type="checkbox" class="greenCheck" value="conditionAggressiveness" /> Agressividade</label>
      <label><input type="checkbox" class="greenCheck" value="conditionParkinson" /> Parkinson</label>
    </div>
  </div>

  <div class="card">
    <h2>Necessidades com Alimentação</h2>
    <div class="check-group" id="feedingGroup">
      <label><input type="checkbox" class="greenCheck" value="feedingOral" /> Dieta via oral</label>
      <label><input type="checkbox" class="greenCheck" value="feedingSNE" /> Dieta por SNE</label>
      <label><input type="checkbox" class="greenCheck" value="feedingGastrostomy" /> Gastrostomia</label>
    </div>
  </div>

  <div class="card">
    <h2>Tipo de Banho Requerido</h2>
    <div class="check-group" id="bathingGroup">
      <label><input type="checkbox" class="greenCheck" value="bathingBed" /> Banho no leito</label>
      <label><input type="checkbox" class="greenCheck" value="bathingChair" /> Banho na cadeira</label>
      <label><input type="checkbox" class="greenCheck" value="bathingShower" /> Banho no chuveiro</label>
    </div>
  </div>

  <div class="card">
    <h2>Procedimentos Necessários</h2>
    <div class="check-group" id="proceduresGroup">
      <label><input type="checkbox" class="greenCheck" value="procedureColostomy" /> Cuidados com colostomia</label>
      <label><input type="checkbox" class="greenCheck" value="procedureSubcutaneousMedication" /> Medicação Subcutânea</label>
      <label><input type="checkbox" class="greenCheck" value="procedureInsulin" /> Aplicação de insulina</label>
      <label><input type="checkbox" class="greenCheck" value="procedureOralMedication" /> Administração de medicação oral</label>
    </div>
  </div>

  <div class="card">
    <h2>Contato do Responsável</h2>
    <label>Nome completo</label>
    <input type="text" id="contactName" placeholder="Ex.: João Silva" />
    <label>WhatsApp</label>
    <input type="tel" id="whatsapp" placeholder="27999998888" />
    <label>E-mail (opcional)</label>
    <input type="email" id="email" placeholder="responsavel@email.com" />
  </div>

  <button class="btn" id="submitForm">Enviar Perfil do Paciente</button>
  <div class="status" id="statusMsg"></div>
</main>

<script>
const BASE = "https://api.vitalassisthomecare.com.br/lifeassist/v1";
const PREFERENCES_URL = BASE + "/sales/preferences";

document.addEventListener("DOMContentLoaded", () => {
  const stateSelect = document.getElementById("stateSelect");
  const citySelect = document.getElementById("citySelect");
  const statusMsg = document.getElementById("statusMsg");
 // variável para armazenar o código do vendedor vindo da URL
  let referralCode = null; // <--

  const showError = msg => {
    statusMsg.textContent = msg;
    statusMsg.className = "status error";
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  const showSuccess = msg => {
    statusMsg.textContent = msg;
    statusMsg.className = "status ok";
  };

  document.querySelectorAll('.option-buttons').forEach(group => {
    const buttons = group.querySelectorAll('button');
    buttons.forEach(button => {
      button.addEventListener('click', () => {
        buttons.forEach(b => b.classList.remove('selected'));
        button.classList.add('selected');
      });
    });
  });

  async function loadStates() {
    const res = await fetch(BASE + "/domain/states");
    const data = await res.json();
    stateSelect.innerHTML = '<option value="">Selecione um estado</option>';
    data.forEach(s => {
      const opt = document.createElement("option");
      opt.value = s.id;
      opt.textContent = s.name;
      stateSelect.appendChild(opt);
    });
  }

  async function loadCities(stateId) {
    const res = await fetch(BASE + "/domain/cities/" + stateId);
    const data = await res.json();
    citySelect.innerHTML = '<option value="">Selecione uma cidade</option>';
    data.forEach(c => {
      const opt = document.createElement("option");
      opt.value = c.id;
      opt.textContent = c.name;
      citySelect.appendChild(opt);
    });
  }

  stateSelect.addEventListener("change", () => {
    if (stateSelect.value) loadCities(stateSelect.value);
    citySelect.innerHTML = '<option value="">Selecione uma cidade</option>';
  });

  // Auto-preencher WhatsApp se ?phone= estiver na URL
  const params = new URLSearchParams(window.location.search);
  if (params.has("phone")) {
    const phone = params.get("phone").replace(/\D/g, "");
    document.getElementById("whatsapp").value = phone;
  }
   if (params.has("code")) {                 // <--
    referralCode = params.get("code");      // <--
  }

  document.getElementById("submitForm").addEventListener("click", async () => {
    const getVal = id => document.getElementById(id).value.trim();
    const selectedValue = key => {
      const selected = document.querySelector(`[data-key="${key}"] .selected`);
      return selected ? selected.dataset.value : null;
    };

    // Validação dos campos obrigatórios
    if (!getVal("patientName")) return showError("Informe o nome do paciente.");
    if (!getVal("patientAge")) return showError("Informe a idade do paciente.");
    if (!selectedValue("gender")) return showError("Selecione o gênero do paciente.");
    if (!stateSelect.value) return showError("Selecione o estado.");
    if (!citySelect.value) return showError("Selecione a cidade.");
    if (!getVal("district")) return showError("Informe o bairro.");
    if (!selectedValue("planType")) return showError("Selecione o tipo de atendimento desejado.");
    if (!getVal("startDate")) return showError("Informe a data de início.");
    // if (!selectedValue("energy")) return showError("Selecione o estilo de energia desejado.");
    // if (!selectedValue("organization")) return showError("Selecione o estilo de organização desejado.");
    const checkRequired = (id, msg) => {
      if (document.querySelectorAll(`#${id} input:checked`).length === 0)
        throw new Error(msg);
    };
    try {
      checkRequired("conditionsGroup", "Selecione ao menos uma condição de saúde.");
      checkRequired("feedingGroup", "Selecione ao menos uma necessidade de alimentação.");
      checkRequired("bathingGroup", "Selecione ao menos um tipo de banho.");
      checkRequired("proceduresGroup", "Selecione ao menos um procedimento.");
    } catch (err) { return showError(err.message); }

    if (!getVal("contactName")) return showError("Informe o nome do responsável.");
    if (!getVal("whatsapp")) return showError("Informe o WhatsApp do responsável.");

    // Montar payload
    const payload = {
      patientName: getVal("patientName"),
      patientAge: parseInt(getVal("patientAge") || 0),
      stateId: stateSelect.value,
      cityId: citySelect.value,
      district: getVal("district"),
      startDate: getVal("startDate"),
      shiftDetails: getVal("shiftDetails"),
      allowSleep: document.getElementById("allowSleep").checked,
      allowMeals: document.getElementById("allowMeals").checked,
      contactName: getVal("contactName"),
      whatsapp: getVal("whatsapp"),
      email: getVal("email")
    };

    // incluir code no payload se vier na URL
    if (referralCode) {            // <--
      payload.code = referralCode; // <--
    }
  
    // Adicionar botões selecionados
    ["gender", "planType", "energy", "organization"].forEach(k => {
      const v = selectedValue(k);
      if (v) payload[v] = true;
    });

    // Adicionar checkboxes
    document.querySelectorAll('input.greenCheck[value]').forEach(cb => {
      payload[cb.value] = cb.checked;
    });

    showSuccess("Enviando...");
    try {
      const res = await fetch(PREFERENCES_URL, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload)
      });
      if (res.ok) window.location.href = "https://vitalassisthomecare.com.br/customer-profile-complete";
      else showError("Erro ao enviar o formulário. Tente novamente mais tarde.");
    } catch {
      showError("Erro de conexão. Verifique sua internet.");
    }
  });

  loadStates();
});
</script>
</body>
</html>

Vital Assist - Home Care

We offer a new standard in care: we find, train, and empower the best caregivers, supported by a system that records all tasks in real time and generates transparent reports.

All to provide comfort, care, and safety for those receiving care—and peace of mind for those accompanying care.