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>Fabio Lemos</h2>
  </div>
  <div class="card">
    <div class="option-buttons" data-key="planType">
      <button data-tab="financial">Financeiro</button>
      <button data-tab="profile">Meu Perfil</button>
      <button data-tab="invoice">Enviar Nota</button>
    </div>
  </div>
<div class="card" id="dashboardContent">
 <button class="btn" id="submitForm">Enviar Perfil do Paciente</button>
  <div class="status" id="statusMsg"></div>
</div>
</main>

<script>
document.addEventListener("DOMContentLoaded", () => {
  const menuButtons = document.querySelectorAll(".option-buttons button");
  const content = document.getElementById("dashboardContent");
  
  async function renderTab(tab) {
  try {
    const res = await fetch(`/caregivers/${tab}`);
    if (!res.ok) throw new Error("Erro ao carregar conteúdo");

    const html = await res.text();
    content.innerHTML = html;
  } catch (err) {
    content.innerHTML = `
      <h2>Erro</h2>
      <p>Não foi possível carregar o conteúdo.</p>
    `;
  }
}

//   function renderTab(tab) {
//     if (tab === "financial") {
//       content.innerHTML = `
//        <div class="card">
//             <div class="option-buttons" data-key="planType">
//                 <button data-tab="shift">Plantao</button>
//                 <button data-tab="committion">Comissao</button>
//             </div>
//         </div>
//       `;
//     }

//     if (tab === "profile") {
//       content.innerHTML = `
//         <h2>Meu Perfil</h2>
//         <p>Conteúdo do perfil carregado.</p>
//       `;
//     }

//     if (tab === "invoice") {
//       content.innerHTML = `
//         <h2>Enviar Nota</h2>
//         <p>Conteúdo de envio de nota fiscal carregado.</p>
//       `;
//     }
//   }

  function setActive(tab) {
    menuButtons.forEach(btn => {
      btn.classList.toggle("selected", btn.dataset.tab === tab);
    });
    renderTab(tab);
  }

  menuButtons.forEach(btn => {
    btn.addEventListener("click", () => {
      setActive(btn.dataset.tab);
    });
  });

  // tab padrão
  setActive("login");
});
</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.