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>Avaliação – Vital Assist</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);
    }

    .section-eval{
      width:100%;
      padding:40px 20px;
      background:var(--bg);
      display:flex;
      justify-content:center;
    }
    .card{
      background:var(--card);
      border:1px solid var(--ink-weak);
      border-radius:16px;
      padding:32px;
      box-shadow:0 6px 22px rgba(63,71,60,.08);
      width:100%;
      max-width:800px;
    }

    h2{font-size:24px; margin-bottom:16px; text-align:center}
    label{font-size:14px; color:var(--muted)}
    input[type="tel"], textarea{
      width:100%; padding:12px 14px; font-size:15px; border-radius:12px;
      border:1px solid var(--ink-weak); background:#fff; color:var(--text);
      outline:none; transition:border .2s ease, box-shadow .2s ease;
      margin-top:6px; margin-bottom:16px;
    }
    input[type="tel"]:focus, textarea:focus{
      border-color:var(--accent-2); box-shadow:0 0 0 3px var(--ring)
    }
    textarea{min-height:120px; resize:vertical}
    .input-error{border-color:var(--danger)!important; box-shadow:0 0 0 2px rgba(193,66,84,.25)}

    .stars{display:flex; justify-content:center; gap:10px; font-size:40px; cursor:pointer; margin:12px 0 20px; flex-wrap:wrap}
    .star{color:#ccc; transition:color .2s ease}
    .star.selected{color:var(--accent-2)}

    .buttons{display:flex; gap:12px; flex-wrap:wrap; margin-top:12px}
    .btn{
      flex:1;
      appearance:none; border:0; padding:16px; border-radius:12px; font-weight:700;
      cursor:pointer; font-size:16px;
      box-shadow:0 6px 18px rgba(97,155,117,.25);
    }
    .btn.primary{color:#fff; background:linear-gradient(135deg, var(--accent), var(--accent-2))}
    .btn.secondary{background:#eee; color:var(--text); border:1px solid var(--ink-weak)}

    .status{margin-top:16px; font-size:14px; text-align:center}
    .status.error{color:var(--danger)}
    .status.ok{color:var(--ok)}

    @media (max-width:720px){
      .card{padding:20px}
      h2{font-size:20px}
      .stars{font-size:32px}
    }
  </style>
</head>
<body>
  <section class="section-eval">
    <div class="card">
      <h2>Deixe sua avaliação</h2>
      <div class="field">
        <label>Telefone</label>
        <input id="phone" type="tel" placeholder="27999998888" autocomplete="tel" />
      </div>

      <div class="field">
        <label>Sua nota</label>
        <div class="stars" id="stars">
          <span class="star" data-val="1">★</span>
          <span class="star" data-val="2">★</span>
          <span class="star" data-val="3">★</span>
          <span class="star" data-val="4">★</span>
          <span class="star" data-val="5">★</span>
        </div>
      </div>

      <div class="field">
        <label>Comentários</label>
        <textarea id="comments" placeholder="Digite seus comentários"></textarea>
      </div>

      <div class="buttons">
        <button class="btn primary" id="submit">Avaliar</button>
        <button class="btn secondary" id="skip">Pular Avaliação</button>
      </div>

      <div class="status" id="status"></div>
    </div>
  </section>

  <script>
    const API_URL = 'https://api.vitalassisthomecare.com.br/lifeassist/v1/reviews';
    const REDIRECT_URL = 'https://vitalassisthomecare.com.br/caregivers/curso-concluido';

    const el = {
      phone: document.getElementById('phone'),
      stars: document.querySelectorAll('.star'),
      comments: document.getElementById('comments'),
      submit: document.getElementById('submit'),
      skip: document.getElementById('skip'),
      status: document.getElementById('status')
    };
    let score = 0;

    el.phone.addEventListener('input', () => {
      el.phone.value = el.phone.value.replace(/\D/g, '').slice(0, 11);
    });

    el.stars.forEach(star => {
      star.addEventListener('click', () => {
        score = parseInt(star.dataset.val);
        el.stars.forEach(s => s.classList.remove('selected'));
        for(let i=0;i<score;i++) el.stars[i].classList.add('selected');
      });
    });

    // Avaliar
    el.submit.addEventListener('click', async () => {
      const phone = el.phone.value.replace(/\D/g, '');
      if (phone.length !== 11) {
        el.status.textContent = 'Informe um telefone válido (11 dígitos)';
        el.status.className = 'status error';
        return;
      }
      if (!score) {
        el.status.textContent = 'Selecione uma nota de 1 a 5';
        el.status.className = 'status error';
        return;
      }
      const review = el.comments.value.trim();

      try {
        el.status.textContent = 'Enviando...';
        el.status.className = 'status';

        const res = await fetch(API_URL, {
          method: 'PUT',
          headers: { 'Content-Type': 'application/json', 'Accept': '*/*' },
          body: JSON.stringify({
            feature: 1,
            phone,
            score,
            review
          })
        });

        if (res.ok) {
          window.location.href = REDIRECT_URL;
        } else if (res.status === 400) {
          el.status.textContent = 'Telefone inválido. Verifique e tente novamente.';
          el.status.className = 'status error';
        } else {
          el.status.textContent = 'Erro ao enviar avaliação. Tente novamente.';
          el.status.className = 'status error';
        }
      } catch (e) {
        el.status.textContent = 'Erro de conexão. Tente novamente.';
        el.status.className = 'status error';
      }
    });

    // Pular Avaliação
    el.skip.addEventListener('click', () => {
      window.location.href = REDIRECT_URL;
    });
  </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.