335 lines
15 KiB
HTML
335 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pt-BR">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Cadastro de Paciente • HealthOne</title>
|
|
<!-- Se tiver um CSS externo, mantenha: -->
|
|
<link rel="stylesheet" href="../../assets/css/style-cadastro.css">
|
|
|
|
</head>
|
|
<body>
|
|
<header class="app-header" style="display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid #e5e7eb;background:#fff;position:sticky;top:0;z-index:10">
|
|
<div class="app-brand" style="display:flex;gap:10px;align-items:center">
|
|
<div class="brand-mark" style="width:28px;height:28px;border-radius:50%;background:#22c3b5"></div>
|
|
<div>
|
|
<div class="brand-title" style="font-weight:800">HealthOne</div>
|
|
<div class="muted" style="font-size:12px">Cadastro de Paciente</div>
|
|
</div>
|
|
</div>
|
|
<nav class="top-nav" aria-label="Navegação principal" style="display:flex;gap:8px">
|
|
<a href="crud-pacientes.html" data-page="pacientes">Pacientes</a>
|
|
<a href="laudos.html" data-page="laudos">Laudos</a>
|
|
<a href="cadastro.html" data-page="cadastro" class="active">Cadastro</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<main class="container" style="max-width:1100px;margin:20px auto;padding:0 12px">
|
|
<div class="card" style="background:#fff;border:1px solid #e5e7eb;border-radius:16px;overflow:hidden">
|
|
<div class="card-header" style="display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid #e5e7eb;background:#fff">
|
|
<div class="card-title" style="font-weight:800">Dados do Paciente</div>
|
|
<div class="card-actions" style="display:flex;gap:10px">
|
|
<button id="btnCancel" type="button" class="btn secondary">Cancelar</button>
|
|
<button id="btnSave" type="button" class="btn">Salvar</button>
|
|
</div>
|
|
</div>
|
|
|
|
<form id="patientForm" novalidate style="padding:16px">
|
|
<!-- 1. DADOS PESSOAIS -->
|
|
<section class="section" aria-labelledby="sec-pessoais">
|
|
<div class="section-header">
|
|
<div class="section-title" id="sec-pessoais" style="font-weight:800">1. Dados pessoais</div>
|
|
</div>
|
|
<div style="padding:16px" class="grid grid-cols-4">
|
|
|
|
<div class="field" style="grid-column: span 4">
|
|
<label>Foto do paciente</label>
|
|
<div class="avatar-uploader" style="display:flex;gap:12px;align-items:center">
|
|
<div class="avatar" id="avatarPreview" aria-label="Foto prévia"><span class="muted">Sem foto</span></div>
|
|
<div class="inline" style="display:flex;gap:8px;align-items:center">
|
|
<input type="file" accept="image/*" id="photo" />
|
|
<button class="btn secondary" type="button" id="btnUpload">Carregar</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field" style="grid-column: span 3">
|
|
<label for="nome">Nome <span class="error">*</span></label>
|
|
<input id="nome" name="nome" type="text" required placeholder="Nome completo" />
|
|
<div class="error" id="err-nome" aria-live="polite"></div>
|
|
</div>
|
|
<div class="field">
|
|
<label for="nomeSocial">Nome social</label>
|
|
<input id="nomeSocial" name="nomeSocial" type="text" placeholder="Apelido/nome social" />
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="cpf">CPF <span class="error">*</span></label>
|
|
<input id="cpf" name="cpf" type="text" inputmode="numeric" placeholder="000.000.000-00" maxlength="14" />
|
|
<div class="hint">Validação automática dos 11 dígitos</div>
|
|
<div class="error" id="err-cpf" aria-live="polite"></div>
|
|
</div>
|
|
<div class="field">
|
|
<label for="rg">RG</label>
|
|
<input id="rg" name="rg" type="text" placeholder="Documento de identidade" />
|
|
</div>
|
|
<div class="field">
|
|
<label for="docTipo">Outros documentos</label>
|
|
<select id="docTipo" name="docTipo">
|
|
<option value="">Selecione…</option>
|
|
<option>CNH</option>
|
|
<option>Passaporte</option>
|
|
<option>Título de eleitor</option>
|
|
<option>Certidão de nascimento</option>
|
|
<option>RNE/CRNM</option>
|
|
<option>Outro</option>
|
|
</select>
|
|
</div>
|
|
<div class="field">
|
|
<label for="docNumero">Número do documento</label>
|
|
<input id="docNumero" name="docNumero" type="text" placeholder="Preencha após selecionar o tipo" disabled />
|
|
</div>
|
|
|
|
<div class="field" style="grid-column: span 2">
|
|
<label>Sexo</label>
|
|
<div class="radio-group" role="radiogroup" aria-label="Sexo" style="display:flex;gap:10px;flex-wrap:wrap">
|
|
<label><input type="radio" name="sexo" value="Masculino"> Masculino</label>
|
|
<label><input type="radio" name="sexo" value="Feminino"> Feminino</label>
|
|
<label><input type="radio" name="sexo" value="Outro"> Outro</label>
|
|
<label><input type="radio" name="sexo" value="Prefiro não informar"> Prefiro não informar</label>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label for="nasc">Data de nascimento</label>
|
|
<input id="nasc" name="nasc" type="date" />
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="raca">Cor/raça (IBGE)</label>
|
|
<select id="raca" name="raca">
|
|
<option value="">Selecione…</option>
|
|
<option>Branca</option>
|
|
<option>Preta</option>
|
|
<option>Parda</option>
|
|
<option>Amarela</option>
|
|
<option>Indígena</option>
|
|
</select>
|
|
</div>
|
|
<div class="field">
|
|
<label for="etnia">Etnia</label>
|
|
<input id="etnia" name="etnia" type="text" placeholder="Ex.: Pomerana, Guarani, etc." />
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="naturalidade">Naturalidade (cidade)</label>
|
|
<input id="naturalidade" name="naturalidade" type="text" list="cidadesBR" placeholder="Cidade de nascimento" />
|
|
<datalist id="cidadesBR">
|
|
<option value="São Paulo (SP)"></option>
|
|
<option value="Rio de Janeiro (RJ)"></option>
|
|
<option value="Belo Horizonte (MG)"></option>
|
|
<option value="Salvador (BA)"></option>
|
|
<option value="Curitiba (PR)"></option>
|
|
</datalist>
|
|
</div>
|
|
<div class="field">
|
|
<label for="nacionalidade">Nacionalidade</label>
|
|
<select id="nacionalidade" name="nacionalidade">
|
|
<option value="">Selecione…</option>
|
|
<option value="Brasil">Brasil</option>
|
|
<option>Argentina</option>
|
|
<option>Portugal</option>
|
|
<option>Espanha</option>
|
|
<option>Estados Unidos</option>
|
|
<option>Outro</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="profissao">Profissão</label>
|
|
<input id="profissao" name="profissao" type="text" placeholder="Ex.: Professor(a)" />
|
|
</div>
|
|
<div class="field">
|
|
<label for="estadoCivil">Estado civil</label>
|
|
<select id="estadoCivil" name="estadoCivil">
|
|
<option value="">Selecione…</option>
|
|
<option>Solteiro(a)</option>
|
|
<option>Casado(a)</option>
|
|
<option>Divorciado(a)</option>
|
|
<option>Viúvo(a)</option>
|
|
<option>União estável</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="mae">Nome da mãe</label>
|
|
<input id="mae" name="mae" type="text" />
|
|
</div>
|
|
<div class="field">
|
|
<label for="profMae">Profissão da mãe</label>
|
|
<input id="profMae" name="profMae" type="text" />
|
|
</div>
|
|
<div class="field">
|
|
<label for="pai">Nome do pai</label>
|
|
<input id="pai" name="pai" type="text" />
|
|
</div>
|
|
<div class="field">
|
|
<label for="profPai">Profissão do pai</label>
|
|
<input id="profPai" name="profPai" type="text" />
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="temResponsavel">Possui responsável?</label>
|
|
<select id="temResponsavel">
|
|
<option value="nao">Não</option>
|
|
<option value="sim">Sim</option>
|
|
</select>
|
|
</div>
|
|
<div class="field">
|
|
<label for="responsavel">Nome do responsável</label>
|
|
<input id="responsavel" name="responsavel" type="text" disabled />
|
|
</div>
|
|
<div class="field">
|
|
<label for="cpfResponsavel">CPF do responsável</label>
|
|
<input id="cpfResponsavel" name="cpfResponsavel" type="text" placeholder="000.000.000-00" maxlength="14" disabled />
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="esposo">Nome do(a) esposo(a) (opcional)</label>
|
|
<input id="esposo" name="esposo" type="text" />
|
|
</div>
|
|
|
|
<div class="field" style="grid-column: span 2;display:flex;align-items:center;gap:10px">
|
|
<label>RN na guia do convênio</label>
|
|
<div id="rnToggle" class="toggle" role="switch" aria-checked="false" tabindex="0"></div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="codigoLegado">Código legado</label>
|
|
<input id="codigoLegado" name="codigoLegado" type="text" placeholder="ID de outro sistema" />
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 2. OBSERVAÇÕES E ANEXOS -->
|
|
<section class="section" aria-labelledby="sec-obs">
|
|
<div class="section-header">
|
|
<div class="section-title" id="sec-obs" style="font-weight:800">2. Observações e anexos</div>
|
|
</div>
|
|
<div style="padding:16px" class="grid" >
|
|
<div class="field" style="grid-column: 1 / -1">
|
|
<label for="obs">Observações</label>
|
|
<textarea id="obs" name="obs" placeholder="Alergias, restrições, medicações, observações clínicas…"></textarea>
|
|
</div>
|
|
|
|
<details class="section" style="grid-column: 1 / -1">
|
|
<summary class="section-header"><div class="section-title">Anexos do paciente</div></summary>
|
|
<div class="attachments" style="padding:12px 16px;border-top:1px dashed #e5e7eb">
|
|
<div class="inline" style="margin-bottom:10px;display:flex;gap:8px;align-items:center">
|
|
<input type="file" id="anexosInput" multiple />
|
|
<button class="btn secondary" type="button" id="btnAddAnexos">Adicionar</button>
|
|
</div>
|
|
<div id="anexosLista"></div>
|
|
<div class="hint">Os arquivos não são enviados (demo). Ficam listados localmente.</div>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 3. CONTATO -->
|
|
<section class="section" aria-labelledby="sec-contato">
|
|
<div class="section-header"><div class="section-title" id="sec-contato" style="font-weight:800">3. Contato</div></div>
|
|
<div style="padding:16px" class="grid" >
|
|
<div class="field">
|
|
<label for="email">E-mail</label>
|
|
<input id="email" name="email" type="email" placeholder="nome@exemplo.com" />
|
|
<div class="error" id="err-email" aria-live="polite"></div>
|
|
</div>
|
|
<div class="field">
|
|
<label for="celular">Celular</label>
|
|
<input id="celular" name="celular" type="tel" inputmode="numeric" placeholder="+55 (00) 00000-0000" maxlength="20" />
|
|
</div>
|
|
<div class="field">
|
|
<label for="tel1">Telefone 1</label>
|
|
<input id="tel1" name="tel1" type="tel" inputmode="numeric" placeholder="(00) 0000-0000" maxlength="18" />
|
|
</div>
|
|
<div class="field">
|
|
<label for="tel2">Telefone 2</label>
|
|
<input id="tel2" name="tel2" type="tel" inputmode="numeric" placeholder="(00) 0000-0000" maxlength="18" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 4. ENDEREÇO -->
|
|
<details class="section" open aria-labelledby="sec-endereco">
|
|
<summary class="section-header"><div class="section-title" id="sec-endereco" style="font-weight:800">4. Endereço</div></summary>
|
|
<div style="padding:16px" class="grid grid-cols-4">
|
|
<div class="field">
|
|
<label for="cep">CEP</label>
|
|
<input id="cep" name="cep" type="text" inputmode="numeric" placeholder="00000-000" maxlength="9" />
|
|
<div class="hint">Ao preencher, busca automática via API (ViaCEP)</div>
|
|
<div class="error" id="err-cep" aria-live="polite"></div>
|
|
</div>
|
|
<div class="field" style="grid-column: span 2">
|
|
<label for="logradouro">Logradouro</label>
|
|
<input id="logradouro" name="logradouro" type="text" />
|
|
</div>
|
|
<div class="field">
|
|
<label for="numero">Número</label>
|
|
<input id="numero" name="numero" type="text" />
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="complemento">Complemento</label>
|
|
<input id="complemento" name="complemento" type="text" />
|
|
</div>
|
|
<div class="field">
|
|
<label for="bairro">Bairro</label>
|
|
<input id="bairro" name="bairro" type="text" />
|
|
</div>
|
|
<div class="field">
|
|
<label for="cidade">Cidade</label>
|
|
<input id="cidade" name="cidade" type="text" />
|
|
</div>
|
|
<div class="field">
|
|
<label for="uf">Estado</label>
|
|
<input id="uf" name="uf" type="text" maxlength="2" placeholder="UF" />
|
|
</div>
|
|
|
|
<div class="field" style="grid-column: span 4">
|
|
<label for="referencia">Referência</label>
|
|
<input id="referencia" name="referencia" type="text" placeholder="Pontos de referência" />
|
|
</div>
|
|
</div>
|
|
</details>
|
|
<!-- Consultas -->
|
|
<fieldset class="grupo">
|
|
<legend>Consultas</legend>
|
|
|
|
<div class="field">
|
|
<label for="ultimaConsulta">Última consulta</label>
|
|
<input type="date" id="ultimaConsulta" name="ultimaConsulta" placeholder="dd/mm/aaaa">
|
|
<small class="hint">Use o seletor de data ou digite no formato dd/mm/aaaa</small>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="proximaConsulta">Próxima consulta</label>
|
|
<input type="date" id="proximaConsulta" name="proximaConsulta" placeholder="dd/mm/aaaa">
|
|
<small class="hint">Se já houver um retorno agendado</small>
|
|
</div>
|
|
</fieldset>
|
|
|
|
|
|
|
|
|
|
</form>
|
|
</div>
|
|
</main>
|
|
|
|
<div class="toast" id="toast" role="status" aria-live="polite"></div>
|
|
|
|
<script type="module" src="/../assets/js/cadastro.js"></script>
|
|
|
|
</body>
|
|
</html>
|