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>Questionário – V2</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; --ring-strong:#619B7566;
      --green-soft:#cfe8da; --green-softer:#e7f2ec; --green-selected:#eaf6f0;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      color:var(--text);
      background:var(--bg);
    }
    .wrap{max-width:980px; margin:0 auto; padding:16px}
    .grid{display:grid; grid-template-columns:1fr; gap:16px}
    .card{
      background:var(--card);
      border:1px solid var(--ink-weak);
      border-radius:16px; padding:16px;
      box-shadow: 0 6px 22px rgba(63,71,60,.08);
    }
    .card h2{font-size:16px; margin:0 0 12px}
    .row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
    .field{display:grid; gap:6px}
    label{font-size:13px; color:var(--muted)}
    input[type="text"], input[type="tel"]{
      width:100%; padding:12px 14px; font-size:14px; border-radius:12px;
      border:1px solid var(--ink-weak); background:#fff; color:var(--text);
      outline:none; transition:border .2s ease, box-shadow .2s ease;
    }
    input:focus{
      border-color:var(--accent-2); box-shadow:0 0 0 3px var(--ring)
    }
    .q{
      padding:16px; border-radius:14px; border:1px solid var(--ink-weak); background:var(--green-softer);
    }
    .q + .q{margin-top:12px}
    .q-title{font-weight:700; margin-bottom:12px}
    .answers{display:grid; gap:8px}
    .answer{
      display:flex; gap:10px; align-items:flex-start; padding:10px 12px;
      border-radius:12px; border:1px solid var(--ink-weak);
      background:#fff; cursor:pointer;
      transition:transform .06s ease, box-shadow .15s ease;
    }
    .answer:hover{transform:translateY(-1px); box-shadow:0 6px 14px rgba(63,71,60,.08)}
    .answer input{margin-top:2px}
    .answer.selected{background:var(--green-selected); border-color:var(--accent-2)}
    .actions{display:flex; gap:12px; align-items:center; justify-content:space-between; margin-top:8px; flex-wrap:wrap}
    .btn{
      appearance:none; border:0; padding:12px 16px; border-radius:12px; font-weight:700;
      cursor:pointer; color:#fff; background:linear-gradient(135deg, var(--accent), var(--accent-2));
    }
    .btn[disabled]{opacity:.6; cursor:not-allowed}
    .status{min-height:24px; font-size:14px}
    .status.error{color:var(--danger)}
    .status.ok{color:var(--ok)}
    .q.error{border-color:var(--danger)!important; background:var(--green-soft)}
    .q .err{color:var(--danger); font-size:12px; margin-top:6px}
  </style>
</head>
<body>
  <main class="wrap">
    <div style="padding-bottom: 30px;">
      <h1>Questionário</h1>
      <div>Responda todas as perguntas e envie para avaliação</div>
    </div>

    <div class="grid" id="grid">
      <section class="card" id="card-ident">
        <h2>Identificação</h2>
        <div class="row">
          <div class="field">
            <label>Nome completo</label>
            <input id="name" type="text" placeholder="Digite seu nome" autocomplete="name" />
          </div>
          <div class="field">
            <label>Telefone</label>
            <input id="phone" type="tel" placeholder="27999998888" autocomplete="tel" />
          </div>
        </div>
      </section>

      <section class="card" id="card-quiz">
        <h2>Questionário</h2>
        <div id="questions"></div>
        <div class="actions">
          <div class="status" id="status"></div>
          <button class="btn" id="submit" type="button">Enviar Respostas</button>
        </div>
      </section>

      <section class="card" id="success-card" style="display:none;">
        <div class="success-wrap">
          <div class="title">Obrigado por participar do nosso processo!</div>
          <div class="msg">Suas respostas foram enviadas. Nossa equipe irá avaliar e em breve entraremos em contato com os próximos passos.</div>
        </div>
      </section>
    </div>
  </main>

  <script>
    const BASE = 'https://api.vitalassisthomecare.com.br/lifeassist/v1';
    const LIST_URL = BASE + '/caregivers/tests';
    const SUBMIT_URL = BASE + '/caregivers/score';

    const state = { tests: [], selections: new Map(), busy: false };
    const el = {
      name: document.getElementById('name'),
      phone: document.getElementById('phone'),
      questions: document.getElementById('questions'),
      status: document.getElementById('status'),
      submit: document.getElementById('submit'),
      successCard: document.getElementById('success-card')
    };

    // normalização do telefone
    el.phone.addEventListener('input', () => {
      let digits = el.phone.value.replace(/\D/g, '');
      if (digits.startsWith('55') && digits.length > 11) digits = digits.slice(2);
      el.phone.value = digits.slice(0, 11);
    });

    const fmt = v => String(v ?? '').trim();
    const showStatus = (msg, ok=false) => { 
      el.status.className = ok ? 'status ok' : 'status error'; 
      el.status.textContent = msg;
    };

    const validate = () => {
      const name = fmt(el.name.value);
      const phone = fmt(el.phone.value);

      if (!name) { showStatus('Informe seu nome'); return }
      if (phone.length !== 11) {
        showStatus('Telefone deve ter 11 dígitos (DDD + número)');
        return;
      }
      if (!state.tests.length) { showStatus('Sem perguntas para responder'); return }
      if (state.selections.size !== state.tests.length) {
        showStatus('Responda todas as perguntas');
        return;
      }
      return { name, phone };
    };

    const showSuccessOnly = () => {
      window.location.href = "https://vitalassisthomecare.com.br/welcome";
    };
  
    const submitAnswers = async () => {
      const id = validate();
      if (!id) return;

      const payload = { 
        name: id.name, 
        phone: id.phone, 
        items: state.tests.map(q => ({ id: q.id, answer: state.selections.get(q.id) }))
      };

      try {
        showStatus('Enviando...');
        const res = await fetch(SUBMIT_URL, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(payload)
        });
        if (!res.ok) throw new Error('Falha no envio');
        showStatus('Enviado com sucesso', true);
        showSuccessOnly();
      } catch (e) {
        showStatus(String(e.message || e), false);
      }
    };

    el.submit.addEventListener('click', submitAnswers);

    // carregar perguntas
    const loadTests = async () => {
      try {
        const res = await fetch(LIST_URL);
        const data = await res.json();
        state.tests = data;
        state.selections = new Map();

        el.questions.innerHTML = '';
        data.forEach((q, idx) => {
          const box = document.createElement('div');
          box.className = 'q';
          box.dataset.qid = q.id;

          const title = document.createElement('div');
          title.className = 'q-title';
          title.textContent = String(idx + 1).padStart(2,'0') + '. ' + q.description;
          box.appendChild(title);

          const answers = document.createElement('div');
          answers.className = 'answers';

          q.answers.forEach(a => {
            const lbl = document.createElement('label');
            lbl.className = 'answer';
            const radio = document.createElement('input');
            radio.type = 'radio';
            radio.name = 'q_' + q.id;
            radio.value = a.letter;

            radio.addEventListener('change', () => {
              state.selections.set(q.id, a.letter);
              answers.querySelectorAll('.answer').forEach(x => x.classList.remove('selected'));
              lbl.classList.add('selected');
            });

            lbl.appendChild(radio);
            lbl.appendChild(document.createTextNode(' ' + a.letter + ') ' + a.description));
            answers.appendChild(lbl);
          });

          box.appendChild(answers);
          el.questions.appendChild(box);
        });

      } catch (e) {
        showStatus('Erro ao carregar perguntas');
      }
    };

    // init
    loadTests();
  </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.