forked from RiseUP/riseup-squad21
Compare commits
No commits in common. "main" and "crud-medico-js-incompleto" have entirely different histories.
main
...
crud-medic
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
BIN
Squad-21/clinicApp/assets/layoutIcons/icons8-ajuda-50.png
Normal file
BIN
Squad-21/clinicApp/assets/layoutIcons/icons8-ajuda-50.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 828 B |
@ -0,0 +1 @@
|
||||
<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50px" height="50px"> <path d="M47.16,21.221l-5.91-0.966c-0.346-1.186-0.819-2.326-1.411-3.405l3.45-4.917c0.279-0.397,0.231-0.938-0.112-1.282 l-3.889-3.887c-0.347-0.346-0.893-0.391-1.291-0.104l-4.843,3.481c-1.089-0.602-2.239-1.08-3.432-1.427l-1.031-5.886 C28.607,2.35,28.192,2,27.706,2h-5.5c-0.49,0-0.908,0.355-0.987,0.839l-0.956,5.854c-1.2,0.345-2.352,0.818-3.437,1.412l-4.83-3.45 c-0.399-0.285-0.942-0.239-1.289,0.106L6.82,10.648c-0.343,0.343-0.391,0.883-0.112,1.28l3.399,4.863 c-0.605,1.095-1.087,2.254-1.438,3.46l-5.831,0.971c-0.482,0.08-0.836,0.498-0.836,0.986v5.5c0,0.485,0.348,0.9,0.825,0.985 l5.831,1.034c0.349,1.203,0.831,2.362,1.438,3.46l-3.441,4.813c-0.284,0.397-0.239,0.942,0.106,1.289l3.888,3.891 c0.343,0.343,0.884,0.391,1.281,0.112l4.87-3.411c1.093,0.601,2.248,1.078,3.445,1.424l0.976,5.861C21.3,47.647,21.717,48,22.206,48 h5.5c0.485,0,0.9-0.348,0.984-0.825l1.045-5.89c1.199-0.353,2.348-0.833,3.43-1.435l4.905,3.441 c0.398,0.281,0.938,0.232,1.282-0.111l3.888-3.891c0.346-0.347,0.391-0.894,0.104-1.292l-3.498-4.857 c0.593-1.08,1.064-2.222,1.407-3.408l5.918-1.039c0.479-0.084,0.827-0.5,0.827-0.985v-5.5C47.999,21.718,47.644,21.3,47.16,21.221z M25,32c-3.866,0-7-3.134-7-7c0-3.866,3.134-7,7-7s7,3.134,7,7C32,28.866,28.866,32,25,32z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50px" height="50px"><path d="M 30.398438 2 L 7 2 L 7 48 L 43 48 L 43 14.601563 Z M 15 28 L 31 28 L 31 30 L 15 30 Z M 35 36 L 15 36 L 15 34 L 35 34 Z M 35 24 L 15 24 L 15 22 L 35 22 Z M 30 15 L 30 4.398438 L 40.601563 15 Z"/></svg>
|
||||
|
After Width: | Height: | Size: 298 B |
BIN
Squad-21/clinicApp/assets/layoutIcons/icons8-estetoscópio-50.png
Normal file
BIN
Squad-21/clinicApp/assets/layoutIcons/icons8-estetoscópio-50.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1008 B |
Binary file not shown.
|
After Width: | Height: | Size: 848 B |
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50px" height="50px"><path d="M 21 3 C 11.601563 3 4 10.601563 4 20 C 4 29.398438 11.601563 37 21 37 C 24.355469 37 27.460938 36.015625 30.09375 34.34375 L 42.375 46.625 L 46.625 42.375 L 34.5 30.28125 C 36.679688 27.421875 38 23.878906 38 20 C 38 10.601563 30.398438 3 21 3 Z M 21 7 C 28.199219 7 34 12.800781 34 20 C 34 27.199219 28.199219 33 21 33 C 13.800781 33 8 27.199219 8 20 C 8 12.800781 13.800781 7 21 7 Z"/></svg>
|
||||
|
After Width: | Height: | Size: 491 B |
BIN
Squad-21/clinicApp/assets/layoutIcons/icons8-usuário-50.png
Normal file
BIN
Squad-21/clinicApp/assets/layoutIcons/icons8-usuário-50.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 516 B |
6312
Squad-21/clinicApp/assets/script/bootstrap.bundle.js
vendored
Normal file
6312
Squad-21/clinicApp/assets/script/bootstrap.bundle.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
12048
Squad-21/clinicApp/assets/style/bootstrap.css
vendored
Normal file
12048
Squad-21/clinicApp/assets/style/bootstrap.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
444
Squad-21/clinicApp/global.css
Normal file
444
Squad-21/clinicApp/global.css
Normal file
@ -0,0 +1,444 @@
|
||||
|
||||
/* --- Estilos Gerais e Reset --- */
|
||||
* {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
border: none;
|
||||
box-sizing: border-box; /* Essencial para um bom layout */
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
background-color: #f3f0f0;
|
||||
}
|
||||
|
||||
/* --- Estilos do Header/Navegação (mantido e levemente ajustado) --- */
|
||||
.nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: #eaeaea;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
BARRA DE BUSCA
|
||||
========================================================================== */
|
||||
|
||||
.div-search {
|
||||
display: flex; /* Essencial para que a propriedade 'order' funcione */
|
||||
align-items: center;
|
||||
border: 1.5px solid #ccc;
|
||||
border-radius: 6px;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Efeito de foco no contêiner inteiro */
|
||||
.div-search:focus-within {
|
||||
border-color: rgb(44, 185, 228);
|
||||
box-shadow: 0 0 0 2px rgba(44, 185, 228, 0.2);
|
||||
}
|
||||
|
||||
/* --- 2. Reordenando os Itens Visualmente --- */
|
||||
.search-input { order: 1; } /* Primeiro item */
|
||||
.search-button { order: 2; } /* Segundo item (a lupa) */
|
||||
.filter-select { order: 3; } /* Terceiro e último item (Geral) */
|
||||
|
||||
/* --- 3. Estilo dos Itens Individuais na Nova Ordem --- */
|
||||
|
||||
/* Campo "Buscar paciente" */
|
||||
.search-input {
|
||||
height: 38px;
|
||||
flex-grow: 1; /* Ocupa o máximo de espaço */
|
||||
padding: 0 12px;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 14px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Botão da Lupa */
|
||||
.search-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 38px;
|
||||
padding: 0 12px;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
border: none; /* Sem borda, para se juntar ao input */
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.search-button img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* Seletor "Geral" */
|
||||
.filter-select {
|
||||
height: 38px;
|
||||
padding: 0 12px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-left: 1.5px solid #ccc; /* A única linha divisória */
|
||||
color: #555;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
ÍCONES DO CABEÇALHO - ESTILO APRIMORADO
|
||||
========================================================================== */
|
||||
|
||||
/* --- 1. O contêiner da lista de ícones --- */
|
||||
.icon-lista {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
gap: 7px; /* Reduzi um pouco o espaço para ficar mais coeso */
|
||||
align-items: center; /* Alinha todos os ícones verticalmente */
|
||||
}
|
||||
|
||||
/* --- 2. PADRONIZAÇÃO dos links (a) e botões (button) --- */
|
||||
.icon-lista li a,
|
||||
.icon-lista li button {
|
||||
display: flex; /* Garante que o contêiner se ajuste à imagem */
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: none; /* Remove qualquer fundo padrão */
|
||||
border: none; /* Remove qualquer borda padrão */
|
||||
padding: 0; /* Remove qualquer padding padrão */
|
||||
cursor: pointer;
|
||||
opacity: 0.7; /* Deixa os ícones um pouco mais suaves */
|
||||
transition: opacity 0.2s ease, transform 0.2s ease; /* Animação suave */
|
||||
}
|
||||
|
||||
/* --- 3. EFEITO HOVER para dar feedback ao usuário --- */
|
||||
.icon-lista li a:hover,
|
||||
.icon-lista li button:hover {
|
||||
opacity: 1; /* Opacidade total no hover */
|
||||
transform: scale(1.1); /* Leve aumento de tamanho */
|
||||
}
|
||||
|
||||
/* --- 4. O TAMANHO REAL da imagem do ícone --- */
|
||||
.icon-lista li img {
|
||||
width: 18px; /* << AUMENTADO O TAMANHO AQUI */
|
||||
height: 18px; /* << AUMENTADO O TAMANHO AQUI */
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* A regra #music não é mais necessária, pois já foi padronizada acima */
|
||||
|
||||
#music {
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
SIDEBAR E LAYOUT PRINCIPAL - REVISÃO FINAL
|
||||
========================================================================== */
|
||||
|
||||
/* --- Container principal da sidebar para flexbox --- */
|
||||
.div-sidebar {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between; /* Este é crucial para empurrar o perfil para baixo */
|
||||
align-items: center; /* Centraliza o conteúdo da sidebar se ela for estreita */
|
||||
width: 100%; /* Garante que div-sidebar ocupe a largura total de .sidebar */
|
||||
}
|
||||
|
||||
/* --- Estilos de Base da Sidebar --- */
|
||||
.sidebar {
|
||||
background-color: #ffffff;
|
||||
box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
transition: width 0.3s ease, transform 0.3s ease;
|
||||
}
|
||||
|
||||
/* --- Logo na Sidebar --- */
|
||||
.logo1 {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 1.5rem 0; /* Espaçamento vertical generoso */
|
||||
border-bottom: 1px solid #eee; /* Linha divisória */
|
||||
}
|
||||
|
||||
#logo-med {
|
||||
width: 80px; /* << MAIOR AINDA! */
|
||||
height: auto;
|
||||
transition: transform 0.3s ease, filter 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#logo-med:hover {
|
||||
transform: scale(1.1);
|
||||
filter: drop-shadow(0 0 10px rgba(44, 185, 228, 0.7)); /* Destaque mais forte */
|
||||
}
|
||||
|
||||
/* --- Itens de Navegação --- */
|
||||
.sidebar ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%; /* Garante que a lista preencha a largura disponível */
|
||||
}
|
||||
|
||||
.sidebar li {
|
||||
width: 100%; /* Garante que cada item da lista preencha a largura */
|
||||
}
|
||||
|
||||
.sidebar a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: rgb(12, 54, 70);
|
||||
text-decoration: none;
|
||||
padding: 1rem 1.5rem;
|
||||
white-space: nowrap;
|
||||
border-left: 4px solid transparent;
|
||||
transition: background-color 0.2s ease, border-left 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
.sidebar a:hover,
|
||||
.sidebar a.active { /* Estilo para hover e item ativo */
|
||||
background-color: #eef5fa; /* Fundo suave */
|
||||
border-left-color: rgb(44, 185, 228); /* Borda azul destacada */
|
||||
color: rgb(44, 185, 228); /* Texto azul para item ativo */
|
||||
font-weight: 600; /* Negrito para destacar */
|
||||
}
|
||||
|
||||
.icon-sidebar {
|
||||
width: 22px; /* Tamanho do ícone */
|
||||
height: 22px;
|
||||
flex-shrink: 0;
|
||||
margin-right: 15px; /* Espaço entre ícone e texto */
|
||||
}
|
||||
|
||||
/* --- Perfil do Médico (Dr. Rafael) --- */
|
||||
.perfil-medico-sidebar {
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
border-top: 1px solid #eee;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.perfil-medico-sidebar h3 {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0.25rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.perfil-medico-sidebar p {
|
||||
font-size: 0.8rem;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
/* --- Conteúdo Principal --- */
|
||||
.section-main {
|
||||
background-color: #f3f0f0;
|
||||
transition: margin-left 0.3s ease;
|
||||
/* padding: 0px; */
|
||||
width: 100%; /* Garante que ocupe o espaço restante */
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* --- Botão Hambúrguer e Overlay (escondidos por padrão no desktop) --- */
|
||||
.hamburger-btn,
|
||||
.overlay {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
MEDIA QUERIES - RESPONSIVIDADE
|
||||
========================================================================== */
|
||||
|
||||
/* --- LAYOUT DESKTOP (Telas a partir de 1025px) --- */
|
||||
@media (min-width: 1025px) {
|
||||
.sidebar {
|
||||
width: 200px; /* Largura expandida */
|
||||
}
|
||||
.section-main {
|
||||
margin-left: 200px; /* Empurra o conteúdo */
|
||||
}
|
||||
}
|
||||
|
||||
/* --- LAYOUT TABLET (Telas de 769px a 1024px) - CORRIGIDO --- */
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.sidebar {
|
||||
width: 150px; /* << MUDANÇA: Mantém a largura expandida, igual ao desktop */
|
||||
}
|
||||
|
||||
/* As regras abaixo garantem que o conteúdo da sidebar (ícones, texto)
|
||||
se comporte como no desktop, mesmo que alguma outra regra os altere. */
|
||||
|
||||
.sidebar a {
|
||||
justify-content: flex-start; /* Alinha o conteúdo à esquerda */
|
||||
padding: 1rem 1.5rem; /* Restaura o espaçamento interno */
|
||||
}
|
||||
|
||||
.icon-sidebar {
|
||||
margin-right: 15px; /* Devolve o espaço entre o ícone e o texto */
|
||||
}
|
||||
|
||||
/* AQUI ESTÁ A CORREÇÃO PRINCIPAL:
|
||||
Garantimos que o texto e o perfil fiquem visíveis. */
|
||||
.sidebar a span,
|
||||
.perfil-medico-sidebar {
|
||||
display: block; /* Garante que eles sejam visíveis */
|
||||
}
|
||||
|
||||
#logo-med {
|
||||
width: 80px; /* Restaura o tamanho original do logo */
|
||||
}
|
||||
|
||||
.section-main {
|
||||
margin-left: 150px; /* << MUDANÇA: Empurra o conteúdo pela distância correta */
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 30vw; /* Mantém o ajuste da barra de busca para tablets */
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* --- LAYOUT MOBILE (Telas até 768px) - CORRIGIDO E FINALIZADO --- */
|
||||
@media (max-width: 768px) {
|
||||
.nav {
|
||||
/* Adicionado flexbox para o alinhamento vertical dos itens */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.13);
|
||||
padding: 0 15px 0 60px;
|
||||
height: 65px;
|
||||
}
|
||||
|
||||
.div-search {
|
||||
flex-grow: 1;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* <<< MUDANÇA DRÁSTICA #1: ÍCONES DA DIREITA BEM MENORES */
|
||||
/* --- CORREÇÃO FINAL: FORÇAR A DIMINUIÇÃO DOS ÍCONES DA DIREITA --- */
|
||||
|
||||
.user-actions i,
|
||||
.user-actions svg {
|
||||
font-size: 2px !important; /* Força um tamanho visivelmente menor */
|
||||
height: 2px !important; /* Garante a altura para qualquer tipo de ícone */
|
||||
width: 2px !important; /* Garante a largura para qualquer tipo de ícone */
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 280px;
|
||||
transform: translateX(-100%);
|
||||
|
||||
/* <<< MUDANÇA #2: A ESTRUTURA QUE FEZ O PERFIL FUNCIONAR */
|
||||
height: 100vh; /* Ocupa a altura toda da tela */
|
||||
display: flex;
|
||||
flex-direction: column; /* Organiza os itens em coluna */
|
||||
}
|
||||
|
||||
.sidebar.active {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.sidebar a {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.icon-sidebar {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.sidebar a span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* <<< MUDANÇA #3: O ESTILO DO PERFIL QUE VOCÊ APROVOU */
|
||||
.perfil-medico-sidebar {
|
||||
margin-top: auto; /* Joga o perfil para a base do menu */
|
||||
text-align: left;
|
||||
padding: 20px 15px; /* Espaçamento interno */
|
||||
border-top: 2px solid #007bff; /* A linha azul que você gostou */
|
||||
}
|
||||
|
||||
#logo-med {
|
||||
width: 100px;
|
||||
padding: 0.1rem 15px; /* Adiciona padding para alinhar com os outros itens */
|
||||
}
|
||||
|
||||
.section-main {
|
||||
margin-left: 0;
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
/* O seu código do botão hambúrguer e overlay permanece intacto */
|
||||
.hamburger-btn {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
top: 24px;
|
||||
left: 20px;
|
||||
z-index: 1002;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
width: 30px;
|
||||
height: 25px;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hamburger-btn span {
|
||||
width: 100%; height: 3px; background-color: #333;
|
||||
border-radius: 3px; transition: all 0.3s ease;
|
||||
}
|
||||
.hamburger-btn.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
|
||||
.hamburger-btn.active span:nth-child(2) { opacity: 0; }
|
||||
.hamburger-btn.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -6px); }
|
||||
.overlay {
|
||||
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); z-index: 999;
|
||||
opacity: 0; visibility: hidden;
|
||||
transition: opacity 0.3s ease, visibility 0.3s ease;
|
||||
}
|
||||
.overlay.active {
|
||||
display: block; opacity: 1; visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Estilos para foco e acessibilidade --- */
|
||||
.hamburger-btn:focus-visible { /* Usar focus-visible para melhor UX */
|
||||
outline: 2px solid #007bff;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.sidebar ul li a:focus-visible,
|
||||
.icon-lista li a:focus-visible {
|
||||
outline: 2px solid #007bff;
|
||||
outline-offset: 2px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
565
Squad-21/clinicApp/global2.css
Normal file
565
Squad-21/clinicApp/global2.css
Normal file
@ -0,0 +1,565 @@
|
||||
* {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
background-color: #f3f0f0;
|
||||
}
|
||||
|
||||
.icon-sidebar {
|
||||
width: 17px;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
#music {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
padding-top: 1rem;
|
||||
padding: 1rem 0.5rem 0px 0.5rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
max-width: 12vw;
|
||||
max-height: 100vh;
|
||||
height: 100%;
|
||||
background-color: white;
|
||||
width: 100%;
|
||||
box-shadow: 9px 0px 15px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.main-contain {
|
||||
margin: 1rem 4rem;
|
||||
}
|
||||
|
||||
.perfil-medico-sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.perfil-medico-sidebar p {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.div-sidebar {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* align-items: flex-end; */
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.sidebar a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
color: rgb(12, 54, 70);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.sidebar ul li {
|
||||
text-align: center;
|
||||
list-style: none;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 3%;
|
||||
padding: 0.7rem 0.8rem;
|
||||
}
|
||||
|
||||
.sidebar ul li:hover {
|
||||
border: 2px solid rgb(44, 185, 228);
|
||||
background-color: rgb(44, 185, 228);
|
||||
}
|
||||
|
||||
.sidebar * {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.icon-lista {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
gap: 30px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.icon-lista li a img,
|
||||
img {
|
||||
width: 22px;
|
||||
/* background-color: #fff; */
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.div-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.div-search:hover {
|
||||
border: 1.5px solid darkgray;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.section-main {
|
||||
max-width: 88vw;
|
||||
margin-left: 10rem;
|
||||
width: 100%;
|
||||
background-color: #f3f0f0;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
height: 38px;
|
||||
width: 20vw;
|
||||
padding-left: 10px;
|
||||
margin-left: 2rem;
|
||||
border-radius: 5px;
|
||||
border: 1.5px solid #ccc;
|
||||
}
|
||||
|
||||
.search-button {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 37%;
|
||||
transform: translateY(-50%);
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: #eaeaea;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
#logo-med {
|
||||
width: 30px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/*Interface Hamburguer*/
|
||||
|
||||
.hamburger-btn {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.hamburger-btn span {
|
||||
width: 25px;
|
||||
height: 3px;
|
||||
background: #333;
|
||||
border-radius: 3px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.hamburger-btn.active span:nth-child(1) {
|
||||
transform: rotate(-45deg) translate(-5px, 6px);
|
||||
}
|
||||
|
||||
.hamburger-btn.active span:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.hamburger-btn.active span:nth-child(3) {
|
||||
transform: rotate(45deg) translate(-5px, -6px);
|
||||
}
|
||||
|
||||
/* Overlay para fechar menu ao clicar fora */
|
||||
.overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 998;
|
||||
}
|
||||
|
||||
.overlay.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Media queries melhoradas para responsividade */
|
||||
@media (max-width: 768px) {
|
||||
.hamburger-btn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
width: 30px;
|
||||
height: 22px; /* Ajuste altura */
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
position: fixed; /* Fixo para estar sempre visível */
|
||||
top: 24px;
|
||||
left: 20px;
|
||||
z-index: 1002; /* Acima de tudo */
|
||||
}
|
||||
|
||||
.hamburger-btn span {
|
||||
width: 30px;
|
||||
height: 3px;
|
||||
background: #333;
|
||||
border-radius: 3px;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
/* Animação do botão para "X" */
|
||||
.hamburger-btn.active span:nth-child(1) {
|
||||
transform: rotate(45deg) translate(7px, 7px);
|
||||
}
|
||||
.hamburger-btn.active span:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
.hamburger-btn.active span:nth-child(3) {
|
||||
transform: rotate(-45deg) translate(7px, -7px);
|
||||
}
|
||||
|
||||
/* Sidebar no Mobile */
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
width: 280px; /* Largura fixa no mobile */
|
||||
min-width: 0;
|
||||
padding: 80px 20px 20px;
|
||||
box-shadow: 5px 0 15px rgba(0, 0, 0, 0.2);
|
||||
/* A MÁGICA ACONTECE AQUI */
|
||||
transform: translateX(-100%); /* Esconde a sidebar fora da tela */
|
||||
transition: transform 0.3s ease-in-out; /* Animação suave */
|
||||
z-index: 1001; /* Acima do overlay */
|
||||
overflow-y: auto; /* Permite rolar se o menu for grande */
|
||||
}
|
||||
|
||||
.sidebar.active {
|
||||
transform: translateX(0); /* Mostra a sidebar */
|
||||
}
|
||||
|
||||
/* Ajustes no layout interno da sidebar mobile */
|
||||
.sidebar a {
|
||||
flex-direction: row; /* Ícone e texto lado a lado */
|
||||
justify-content: flex-start;
|
||||
padding: 12px 15px;
|
||||
}
|
||||
.icon-sidebar {
|
||||
margin-right: 15px; /* Espaço entre ícone e texto */
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.sidebar p {
|
||||
font-size: 16px;
|
||||
}
|
||||
#logo-med {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
/* Conteúdo Principal no Mobile */
|
||||
.section-main {
|
||||
width: 100%;
|
||||
margin-left: 0; /* Remove a margem do desktop */
|
||||
padding-top: 85px; /* MUITO IMPORTANTE: Espaço para o .nav fixo */
|
||||
}
|
||||
|
||||
.nav {
|
||||
position: fixed; /* Fixa o cabeçalho no topo */
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 999; /* Abaixo da sidebar */
|
||||
padding: 15px 20px;
|
||||
}
|
||||
|
||||
.div-search {
|
||||
width: 100%;
|
||||
margin-left: 50px; /* Espaço para o botão hambúrguer */
|
||||
}
|
||||
.search-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Overlay (fundo escuro) */
|
||||
.overlay {
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 1000;
|
||||
opacity: 0;
|
||||
visibility: hidden; /* Esconde e impede cliques */
|
||||
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
/* Media query para tablets */
|
||||
@media (max-width: 1024px) and (min-width: 769px) {
|
||||
.sidebar {
|
||||
max-width: 12vw;
|
||||
padding: 0.3rem;
|
||||
}
|
||||
|
||||
.sidebar a {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 35vw;
|
||||
min-width: 250px;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
.icon-lista {
|
||||
gap: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Media query melhorada para telas muito pequenas */
|
||||
@media (max-width: 480px) {
|
||||
.hamburger-btn {
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
/* display: none; */
|
||||
height: 90vh;
|
||||
}
|
||||
|
||||
.div-sidebar {
|
||||
max-height: 100%;
|
||||
width: 90%;
|
||||
/* background-color: black; */
|
||||
}
|
||||
|
||||
.abas {
|
||||
max-height: 100%;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sidebar.active {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
flex-direction: column;
|
||||
max-width: 300px;
|
||||
width: 300px;
|
||||
height: 100%;
|
||||
max-height: 100vh;
|
||||
padding: 60px 15px 15px 15px;
|
||||
box-shadow: 5px 0px 15px rgba(0, 0, 0, 0.3);
|
||||
z-index: 999;
|
||||
background-color: white;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
/* Removendo padding-top desnecessário */
|
||||
.nav {
|
||||
padding: 15px;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
margin-top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.div-search {
|
||||
margin-bottom: 10px;
|
||||
width: 90%;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.icon-lista {
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Adicionando estilos para melhor acessibilidade */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.hamburger-btn span,
|
||||
.sidebar,
|
||||
.overlay {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Estilos para foco e acessibilidade */
|
||||
.hamburger-btn:focus {
|
||||
outline: 2px solid #007bff;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.sidebar ul li a:focus,
|
||||
.icon-lista li a:focus {
|
||||
outline: 2px solid #007bff;
|
||||
outline-offset: 2px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Adicionando media query para desktop - sidebar sempre visível */
|
||||
@media (min-width: 769px) {
|
||||
.sidebar {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
left: auto;
|
||||
transform: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.sidebar a {
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.perfil-medico-sidebar {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 35vw;
|
||||
}
|
||||
|
||||
.hamburger-btn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Section main volta ao layout original no desktop */
|
||||
.section-main {
|
||||
max-width: 88vw;
|
||||
width: 100%;
|
||||
margin-left: 12rem;
|
||||
}
|
||||
}
|
||||
|
||||
.logo1 {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hamburger-btn {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
max-width: 280px;
|
||||
width: 75%;
|
||||
padding-top: 80px;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.3s ease-in-out;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.sidebar.active {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.sidebar a {
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
text-align: left;
|
||||
}
|
||||
.icon-sidebar {
|
||||
margin-right: 15px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.perfil-medico-sidebar {
|
||||
text-align: left;
|
||||
padding-left: 10px;
|
||||
}
|
||||
#logo-med {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.section-main {
|
||||
margin-left: 0;
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
.nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 998;
|
||||
padding: 15px 20px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.div-search {
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Telas muito pequenas */
|
||||
@media (max-width: 480px) {
|
||||
.nav {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 10px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
/* ALTERAÇÃO: Aumenta o padding para o nav que agora é mais alto */
|
||||
.section-main {
|
||||
padding-top: 130px;
|
||||
}
|
||||
|
||||
.div-search {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
111
Squad-21/clinicApp/layout padrao.html
Normal file
111
Squad-21/clinicApp/layout padrao.html
Normal file
@ -0,0 +1,111 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pt-BR">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Crud + Layout</title>
|
||||
<link rel="stylesheet" href="global.css" />
|
||||
<!-- css da página -->
|
||||
<link rel="stylesheet" href="#" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main>
|
||||
<!-- Overlay só aparece em mobile quando menu está ativo -->
|
||||
<div class="overlay" id="overlay"></div>
|
||||
|
||||
<div class="flex">
|
||||
<!-- Botão hambúrguer só aparece em mobile -->
|
||||
<button class="hamburger-btn" id="hamburger-btn" aria-label="Abrir menu de navegação" aria-expanded="false">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
|
||||
<!-- Sidebar agora se comporta diferente em desktop vs mobile -->
|
||||
<section class="sidebar" id="sidebar" role="navigation" aria-label="Menu principal">
|
||||
<div class="div-sidebar">
|
||||
<div class="abas">
|
||||
<a href="#" aria-label="Página inicial" class="logo1">
|
||||
<img src="https://images.vexels.com/media/users/3/142777/isolated/preview/84711206e52e0d4ff6c793cb476ea264-logotipo-medico-da-estrela-do-heartbeat.png" alt="Logo médico" id="logo-med" />
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="pages/pacientes/paciente.html" aria-label="Pacientes">
|
||||
<img src="/clinicApp/assets/layoutIcons/icons8-estetoscópio-50.png" alt="Pacientes" class="icon-sidebar" />
|
||||
<p>Pacientes</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="pages/dashboard/dashboard.html" aria-label="Pacientes">
|
||||
<img src="/clinicApp/assets/layoutIcons/icons8-estetoscópio-50.png" alt="Pacientes" class="icon-sidebar" />
|
||||
<p>Dashboard</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="pages/agendamento/agendamento.html" aria-label="Cadastro de usuários">
|
||||
<img src="/clinicApp/assets/layoutIcons/icons8-grupo-de-usuário-homem-homem-50.png" alt="Cadastro" class="icon-sidebar" />
|
||||
<p>Médicos</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="pages/laudo/laudoMedico.html" aria-label="Documentos">
|
||||
<img src="/clinicApp/assets/layoutIcons/icons8-document.svg" alt="Documentos" class="icon-sidebar" />
|
||||
<p>Laúdos</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-label="Documentos">
|
||||
<img src="assets/layoutIcons/icons8-document.svg" alt="Documentos" class="icon-sidebar" />
|
||||
<p>Agenda</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-label="Configurações">
|
||||
<img src="assets/layoutIcons/icons8-configurações.svg" alt="Configurações" class="icon-sidebar" />
|
||||
<p>Settings</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="perfil-medico-sidebar">
|
||||
<h3>Dr. Rafael Andrade</h3>
|
||||
<p>Núcleo de Especialidades</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section-main">
|
||||
<nav class="nav" role="banner">
|
||||
<div class="div-search">
|
||||
<input type="text" class="search-input" placeholder="Buscar paciente" aria-label="Campo de busca" />
|
||||
<button class="search-button" aria-label="Buscar">
|
||||
<img src="assets/layoutIcons/icons8-pesquisar.svg" alt="Buscar" />
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<ul class="icon-lista">
|
||||
<li>
|
||||
<a href="#" aria-label="Ajuda"><img src="assets/layoutIcons/icons8-ajuda-50.png" alt="Ajuda" /></a>
|
||||
</li>
|
||||
<li>
|
||||
<button id="music" aria-label="Notificações"><img src="assets/layoutIcons/botao-ativar-notificacoes.png" alt="Notificações" /></button>
|
||||
</li>
|
||||
<!--button ta gerando um fundo branco, botei ID pra retirar o background-->
|
||||
<li>
|
||||
<a href="#" aria-label="Perfil do usuário"><img src="assets/layoutIcons/icons8-usuário-50.png" alt="Usuário" /></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="main-contain">
|
||||
<h1>Gerenciador</h1>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script src="scriptGlobal.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,949 @@
|
||||
:root {
|
||||
--bg-main: #f3f0f0;
|
||||
--bg-nav: #fafafa;
|
||||
--bg-modal: #fff;
|
||||
--sombra-modal: 0 4px 15px rgba(0, 0, 0, 0.3);
|
||||
--sombra-sidebar: 15px 0px 15px rgba(0, 0, 0, 0.3);
|
||||
--cor-cinza-claro: #f1f1f1;
|
||||
--cor-cinza-medio: #ccc;
|
||||
--cor-cinza-escuro: #666;
|
||||
--cor-tabela-header: #f3f0f0;
|
||||
--cor-principal: rgb(38, 137, 255);
|
||||
--cor-hover-principal: rgb(30, 110, 204);
|
||||
--cor-borda-input-foco: #2e7d32;
|
||||
--cor-fundo-botao-salvar: #2e7d32;
|
||||
--cor-hover-salvar: #256628;
|
||||
}
|
||||
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
padding-top: 1.25rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 5vw;
|
||||
height: 100vh;
|
||||
background-color: white;
|
||||
box-shadow: var(--sombra-sidebar);
|
||||
}
|
||||
|
||||
.sidebar ul {
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sidebar ul li {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.icon-sidebar {
|
||||
width: 17px;
|
||||
padding: 10px 13px 5px 13px;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.icon-sidebar:hover {
|
||||
background-color: var(--cor-cinza-claro);
|
||||
}
|
||||
|
||||
.section-main {
|
||||
width: 95vw;
|
||||
background-color: var(--bg-main);
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: var(--bg-nav);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.div-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
transition: border 0.2s;
|
||||
}
|
||||
|
||||
.div-search:hover {
|
||||
border: 1.5px solid darkgray;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
height: 38px;
|
||||
width: 20vw;
|
||||
padding-left: 10px;
|
||||
border-radius: 5px;
|
||||
border: 1.5px solid var(--cor-cinza-medio);
|
||||
}
|
||||
|
||||
.search-button {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.icon-lista {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
gap: 30px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.icon-lista li a img,
|
||||
img {
|
||||
width: 22px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.btn-add,
|
||||
.btn {
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.btn-add {
|
||||
margin: 20px;
|
||||
background-color: var(--cor-principal);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-add:hover {
|
||||
background-color: var(--cor-hover-principal);
|
||||
}
|
||||
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: var(--bg-modal);
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
width: 800px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
box-shadow: var(--sombra-modal);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.modal-content h2 {
|
||||
margin-bottom: 15px;
|
||||
font-size: 20px;
|
||||
color: #333;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 15px;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
color: var(--cor-cinza-escuro);
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
margin-bottom: 4px;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group select {
|
||||
padding: 8px;
|
||||
height: 32px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--cor-cinza-medio);
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group select:focus {
|
||||
border-color: var(--cor-borda-input-foco);
|
||||
box-shadow: 0 0 5px rgba(46, 125, 50, 0.3);
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.form-check-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 5px;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
color: #444;
|
||||
min-width: unset;
|
||||
max-width: fit-content;
|
||||
|
||||
.modal-actions {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.btn-save {
|
||||
background: var(--cor-fundo-botao-salvar);
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
padding: 8px 15px;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
background: var(--cor-cinza-medio);
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
padding: 8px 15px;
|
||||
}
|
||||
|
||||
.btn-save:hover {
|
||||
background: var(--cor-hover-salvar);
|
||||
}
|
||||
|
||||
.btn-cancel:hover {
|
||||
background: #b3b3b3;
|
||||
}
|
||||
|
||||
.btn-edit,
|
||||
.btn-delete {
|
||||
padding: 5px 10px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
background-color: lightgrey;
|
||||
color: #000;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.btn-edit:hover,
|
||||
.btn-delete:hover {
|
||||
background-color: #d3d3d3;
|
||||
}
|
||||
|
||||
/* Tabela de pacientes */
|
||||
.paciente-table {
|
||||
width: 95%; /* Use a largura da tela disponível */
|
||||
margin: 20px auto;
|
||||
border-collapse: collapse;
|
||||
background-color: var(--bg-modal);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.paciente-table th,
|
||||
.paciente-table td {
|
||||
padding: 12px 15px; /* Aumentei o padding para dar mais espaço */
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #ddd;
|
||||
font-size: 15px; /* Ajustei o tamanho da fonte */
|
||||
white-space: nowrap; /* Impede que o texto quebre para a próxima linha */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis; /* Adiciona "..." se o texto for muito longo */
|
||||
}
|
||||
|
||||
.paciente-table th {
|
||||
background-color: var(--cor-tabela-header);
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
text-transform: uppercase; /* Transforma o texto do cabeçalho em maiúsculas */
|
||||
}
|
||||
|
||||
/* Deixa a tabela responsiva para dispositivos menores */
|
||||
@media (max-width: 768px) {
|
||||
.paciente-table {
|
||||
display: block;
|
||||
overflow-x: auto; /* Adiciona uma barra de rolagem horizontal */
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.paciente-table thead,
|
||||
.paciente-table tbody,
|
||||
.paciente-table th,
|
||||
.paciente-table td,
|
||||
.paciente-table tr {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.paciente-table tr {
|
||||
margin-bottom: 15px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.paciente-table td {
|
||||
border-bottom: 1px solid #eee;
|
||||
position: relative;
|
||||
padding-left: 50%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.paciente-table td::before {
|
||||
content: attr(data-label);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 50%;
|
||||
padding-left: 15px;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Container de formulário para a nova página - AGORA OCUPARÁ A LARGURA TOTAL */
|
||||
.full-page-form-container {
|
||||
width: 95%;
|
||||
margin: 20px auto;
|
||||
padding: 30px;
|
||||
background-color: var(--bg-modal);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Divisores de Seção (Endereço, etc) */
|
||||
.section-divider {
|
||||
font-size: 1.2em;
|
||||
font-weight: bold;
|
||||
color: #444;
|
||||
margin: 35px 0 20px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
/* Ajustes para a grade */
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 20px 30px;
|
||||
}
|
||||
|
||||
.form-grid .span-2 {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
/* Estilos de input e select uniformes */
|
||||
.form-group input,
|
||||
.form-group select {
|
||||
padding: 10px;
|
||||
height: 40px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--cor-cinza-medio);
|
||||
font-size: 16px;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group select:focus {
|
||||
border-color: var(--cor-borda-input-foco);
|
||||
box-shadow: 0 0 5px rgba(46, 125, 50, 0.3);
|
||||
}
|
||||
|
||||
/* Campos de largura total */
|
||||
.form-group.full-width {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
/* Estilo para a área de texto de Observações */
|
||||
textarea {
|
||||
resize: vertical;
|
||||
width: 100%;
|
||||
min-height: 100px;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--cor-cinza-medio);
|
||||
font-size: 16px;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
textarea:focus {
|
||||
border-color: var(--cor-borda-input-foco);
|
||||
box-shadow: 0 0 5px rgba(46, 125, 50, 0.3);
|
||||
}
|
||||
|
||||
/* Estilo para o campo de upload de arquivo */
|
||||
.form-group input[type="file"] {
|
||||
background-color: var(--cor-cinza-claro);
|
||||
border: 1px dashed var(--cor-cinza-medio);
|
||||
padding: 10px;
|
||||
height: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Outros estilos, como h2, labels, buttons etc., que já estão na sua folha de estilo */
|
||||
.form-card h2 {
|
||||
margin-bottom: 25px;
|
||||
font-size: 24px;
|
||||
color: #333;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
margin-bottom: 6px;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.form-actions .btn {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
padding: 12px 22px;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.form-actions .btn-save {
|
||||
background: var(--cor-fundo-botao-salvar);
|
||||
}
|
||||
|
||||
.form-actions .btn-cancel {
|
||||
background: #ccc;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.form-actions .btn-save:hover {
|
||||
background: #256628;
|
||||
}
|
||||
.form-actions .btn-cancel:hover {
|
||||
background: #b3b3b3;
|
||||
}
|
||||
|
||||
/* Estilos gerais do corpo para melhor visualização */
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #f0f2f5;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Container principal para centralizar o conteúdo */
|
||||
.flex {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Estilos para a seção principal, para ocupar o espaço restante */
|
||||
.section-main {
|
||||
flex-grow: 1; /* Ocupa todo o espaço restante */
|
||||
padding: 20px;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
/* Estilos para o botão de adicionar paciente */
|
||||
.btn-add {
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 20px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-add:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
/* Estilos da tabela de pacientes */
|
||||
.paciente-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.paciente-table th,
|
||||
.paciente-table td {
|
||||
padding: 12px 15px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.paciente-table thead th {
|
||||
background-color: #e9ecef;
|
||||
font-weight: bold;
|
||||
color: #495057;
|
||||
text-transform: uppercase;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Estilizando as linhas da tabela */
|
||||
.paciente-table tbody tr:hover {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
/* Estilos para os botões de ação na tabela */
|
||||
.btn-edit,
|
||||
.btn-delete {
|
||||
padding: 6px 10px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-edit {
|
||||
background-color: #28a745;
|
||||
}
|
||||
|
||||
.btn-edit:hover {
|
||||
background-color: #218838;
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
background-color: #dc3545;
|
||||
}
|
||||
|
||||
.btn-delete:hover {
|
||||
background-color: #c82333;
|
||||
}
|
||||
|
||||
/* Estilos para dispositivos móveis (responsividade) */
|
||||
@media (max-width: 768px) {
|
||||
.paciente-table,
|
||||
.paciente-table tbody,
|
||||
.paciente-table tr,
|
||||
.paciente-table td {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.paciente-table thead {
|
||||
display: none; /* Esconde o cabeçalho em telas pequenas */
|
||||
}
|
||||
|
||||
.paciente-table tr {
|
||||
margin-bottom: 15px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.paciente-table td {
|
||||
text-align: right;
|
||||
padding-left: 50%; /* Espaço para o rótulo */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.paciente-table td::before {
|
||||
content: attr(data-label);
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
width: 45%;
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
}
|
||||
}
|
||||
|
||||
/* Estilos Gerais para o Corpo da Página */
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #f0f2f5;
|
||||
}
|
||||
|
||||
/* Container Flex principal (sidebar + conteúdo) */
|
||||
.flex-container {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Estilo da Sidebar */
|
||||
.sidebar {
|
||||
width: 80px;
|
||||
background-color: #fff;
|
||||
padding: 10px 0;
|
||||
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sidebar ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sidebar li {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.sidebar a {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.sidebar a:hover {
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
|
||||
.sidebar img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#logo-med {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
/* Área de Conteúdo Principal (que contém o Header e o main-content) */
|
||||
.content-area {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Estilo do Header */
|
||||
.header {
|
||||
background-color: #fff;
|
||||
padding: 10px 20px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 20px;
|
||||
padding: 5px 10px;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.search-bar input {
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 5px;
|
||||
background-color: transparent;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.search-bar button {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.search-bar button img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.header-icons img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-left: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Estilos para o Conteúdo Principal (abaixo do header) */
|
||||
.main-content {
|
||||
flex-grow: 1;
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Estilos para o botão "Cadastrar Paciente" */
|
||||
.btn-add {
|
||||
display: inline-block;
|
||||
background-color: #007bff;
|
||||
color: #fff;
|
||||
padding: 10px 15px;
|
||||
border-radius: 5px;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-add:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
/* Estilos da Tabela */
|
||||
.table-container {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.paciente-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.paciente-table thead th {
|
||||
background-color: #f2f2f2;
|
||||
padding: 12px 15px;
|
||||
text-align: left;
|
||||
border-bottom: 2px solid #ddd;
|
||||
}
|
||||
|
||||
.paciente-table tbody td {
|
||||
padding: 10px 15px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.paciente-table tbody tr:hover {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 8px 12px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
margin-right: 5px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
/* As cores dos botões de ação foram mantidas como estavam na sua versão anterior */
|
||||
.btn-edit {
|
||||
background-color: #08c547;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-edit:hover {
|
||||
background-color: #087904;
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
background-color: #dc3545;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-delete:hover {
|
||||
background-color: #b31a29;
|
||||
}
|
||||
|
||||
/* Estilos para a página de cadastro */
|
||||
.section-cadastro {
|
||||
background-color: #fff;
|
||||
padding: 30px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
max-width: 600px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.section-cadastro h2 {
|
||||
text-align: center;
|
||||
color: #333;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.section-cadastro form label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.section-cadastro form input[type="text"],
|
||||
.section-cadastro form input[type="tel"] {
|
||||
width: calc(100% - 20px);
|
||||
padding: 10px;
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.section-cadastro form button {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
background-color: #28a745;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.section-cadastro form button:hover {
|
||||
background-color: #218838;
|
||||
}
|
||||
|
||||
.btn-back {
|
||||
display: inline-block;
|
||||
margin-bottom: 20px;
|
||||
color: #007bff;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.btn-back:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Media Queries para Responsividade */
|
||||
@media (max-width: 768px) {
|
||||
.sidebar {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.sidebar img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
#logo-med {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.header {
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
width: 90%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.header-icons {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.header-icons img {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.paciente-table thead {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.paciente-table tbody tr {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.paciente-table tbody td {
|
||||
display: block;
|
||||
text-align: right;
|
||||
padding-left: 50%;
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.paciente-table tbody td::before {
|
||||
content: attr(data-label);
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
width: 45%;
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,214 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pt-br">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Cadastro de Médico</title>
|
||||
<link rel="stylesheet" href="./addMedico.css">
|
||||
<link rel="stylesheet" href="/Squad-21/clinicApp/global.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/Squad-21/clinicApp/assets/style/bootstrap.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main>
|
||||
<div class="flex">
|
||||
<section class="section-main">
|
||||
<nav class="nav">
|
||||
</nav>
|
||||
|
||||
<div class="full-page-form-container">
|
||||
<div class="form-card">
|
||||
<h2>Dados do Paciente</h2>
|
||||
<form id="cadastro-form">
|
||||
<div class="form-grid">
|
||||
<div class="form-group"><label for="nome">Nome *</label><input type="text" id="nome"
|
||||
required></div>
|
||||
<div class="form-group"><label for="nomeSocial">Nome Social</label><input type="text"
|
||||
id="nomeSocial"></div>
|
||||
<div class="form-group">
|
||||
<label for="cpf">CPF *</label>
|
||||
<input type="text" id="cpf" placeholder="000.000.000-00" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="cpf">CRM *</label>
|
||||
<input type="text" id="cpf" placeholder="000.000.000-00" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="outrosDocs">Outros documentos de identidade</label>
|
||||
<select id="outrosDocs">
|
||||
<option value="">Selecione</option>
|
||||
<option value="Passaporte">Passaporte</option>
|
||||
<option value="CNH">CNH</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group"><label for="numDoc">Número do documento</label><input
|
||||
type="text" id="numDoc" placeholder="Número do documento"></div>
|
||||
<div class="form-group">
|
||||
<label for="sexo">Sexo *</label>
|
||||
<select id="sexo" name="sexo" required>
|
||||
<option value="">Selecione</option>
|
||||
<option value="Masculino">Masculino</option>
|
||||
<option value="Feminino">Feminino</option>
|
||||
<option value="Feminino">Prefiro Não Informar</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group"><label for="dataNascimento">Data de Nascimento *</label><input
|
||||
type="date" id="dataNascimento" required></div>
|
||||
<div class="form-group">
|
||||
<label for="etnia">Etnia</label>
|
||||
<select id="etnia">
|
||||
<option value="">Selecione</option>
|
||||
<option value="branca">Branca</option>
|
||||
<option value="preta">Preta</option>
|
||||
<option value="parda">Parda</option>
|
||||
<option value="amarela">Amarela</option>
|
||||
<option value="indigena">Indígena</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="raca">Raça</label>
|
||||
<select id="raca">
|
||||
<option value="">Selecione</option>
|
||||
<option value="branca">Branca</option>
|
||||
<option value="preta">Preta</option>
|
||||
<option value="parda">Parda</option>
|
||||
<option value="amarela">Amarela</option>
|
||||
<option value="indigena">Indígena</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="naturalidade">Naturalidade</label>
|
||||
<input type="text" id="naturalidade">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="nacionalidade">Nacionalidade</label>
|
||||
<input type="text" id="nacionalidade">
|
||||
</div>
|
||||
<div class="form-group"><label for="profissao">Profissão</label><input type="text"
|
||||
id="profissao"></div>
|
||||
<div class="form-group">
|
||||
<label for="estadoCivil">Estado Civil</label>
|
||||
<select id="estadoCivil">
|
||||
<option value="">Selecione</option>
|
||||
<option value="solteiro">Solteiro(a)</option>
|
||||
<option value="casado">Casado(a)</option>
|
||||
<option value="divorciado">Divorciado(a)</option>
|
||||
<option value="viuvo">Viúvo(a)</option>
|
||||
<option value="separado">Separado(a)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="nomeMae">Nome da mãe</label>
|
||||
<input type="text" id="nomeMae">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="nomePai">Nome do pai</label>
|
||||
<input type="text" id="nomePai">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="nomeEsposo">Nome do(a) esposo(a)</label>
|
||||
<input type="text" id="nomeEsposo">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-divider">Endereço</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-group">
|
||||
<label for="cep">CEP *</label>
|
||||
<input type="text" id="cep" required placeholder="00000-000">
|
||||
</div>
|
||||
<div class="form-group span-2">
|
||||
<label for="endereco">Endereço</label>
|
||||
<input type="text" id="endereco">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="numero">Número</label>
|
||||
<input type="text" id="numero">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="complemento">Complemento</label>
|
||||
<input type="text" id="complemento">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="bairro">Bairro</label>
|
||||
<input type="text" id="bairro">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="cidade">Cidade</label>
|
||||
<input type="text" id="cidade">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="estado">Estado
|
||||
<label>
|
||||
<select id="estado">
|
||||
<option value="">Selecione</option>
|
||||
<option value="AC">Acre</option>
|
||||
<option value="AL">Alagoas</option>
|
||||
<option value="AP">Amapá</option>
|
||||
<option value="AM">Amazonas</option>
|
||||
<option value="BA">Bahia</option>
|
||||
<option value="CE">Ceará</option>
|
||||
<option value="DF">Distrito Federal</option>
|
||||
<option value="ES">Espírito Santo</option>
|
||||
<option value="GO">Goiás</option>
|
||||
<option value="MA">Maranhão</option>
|
||||
<option value="MT">Mato Grosso</option>
|
||||
<option value="MS">Mato Grosso do Sul</option>
|
||||
<option value="MG">Minas Gerais</option>
|
||||
<option value="PA">Pará</option>
|
||||
<option value="PB">Paraíba</option>
|
||||
<option value="PR">Paraná</option>
|
||||
<option value="PE">Pernambuco</option>
|
||||
<option value="PI">Piauí</option>
|
||||
<option value="RJ">Rio de Janeiro</option>
|
||||
<option value="RN">Rio Grande do Norte</option>
|
||||
<option value="RS">Rio Grande do Sul</option>
|
||||
<option value="RO">Rondônia</option>
|
||||
<option value="RR">Roraima</option>
|
||||
<option value="SC">Santa Catarina</option>
|
||||
<option value="SP">São Paulo</option>
|
||||
<option value="SE">Sergipe</option>
|
||||
<option value="TO">Tocantins</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-divider">Contato</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-group">
|
||||
<label for="email">E-mail *</label>
|
||||
<input type="email" id="email" required placeholder="email@hotmail.com">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="celular">Celular *</label>
|
||||
<input type="text" id="celular" placeholder="(00) 00000-0000" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="telefone1">Telefone</label>
|
||||
<input type="text" id="telefone1" placeholder="(00) 0000-0000">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-save">Salvar</button>
|
||||
<a href="../crud-medico.html" class="btn btn-cancel">Voltar</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/inputmask@5.0.9/dist/inputmask.min.js"></script>
|
||||
<script defer src="/Squad-21/clinicApp/pages-visao-clinica/medicos/addMedico/addMedico.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,118 @@
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const form = document.getElementById("cadastro-form");
|
||||
// Pega o ID do paciente da URL. Se não houver, 'editId' será null.
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const editId = urlParams.get("id");
|
||||
|
||||
function desativarFormulario() {
|
||||
// Desativa todos os inputs, selects e textareas
|
||||
form.querySelectorAll("input, select, textarea").forEach((el) => {
|
||||
el.disabled = true;
|
||||
});
|
||||
|
||||
// Remove o botão de submit
|
||||
const submitBtn = form.querySelector('[type="submit"]');
|
||||
if (submitBtn) {
|
||||
submitBtn.remove();
|
||||
}
|
||||
}
|
||||
|
||||
// Exemplo: se a URL tiver ?mode=detalhes
|
||||
if (window.location.search.includes("mode=detalhes")) {
|
||||
desativarFormulario();
|
||||
}
|
||||
|
||||
if (form) {
|
||||
// Carrega a lista de pacientes
|
||||
let medicos = JSON.parse(localStorage.getItem("medicos")) || [];
|
||||
let medicoParaEditar = null;
|
||||
|
||||
// Se houver um ID de edição na URL, encontra o medico correspondente
|
||||
if (editId) {
|
||||
medicoParaEditar = medicos.find((p) => p.id == editId);
|
||||
if (medicoParaEditar) {
|
||||
// Preenche o formulário com os dados do medico para edição
|
||||
document.getElementById("nome").value = medicoParaEditar.nome;
|
||||
document.getElementById("celular").value = medicoParaEditar.celular;
|
||||
document.getElementById("cidade").value = medicoParaEditar.cidade;
|
||||
document.getElementById("estado").value = medicoParaEditar.estado;
|
||||
document.getElementById("nomeSocial").value = medicoParaEditar.nomeSocial;
|
||||
document.getElementById("cpf").value = medicoParaEditar.cpf;
|
||||
document.getElementById("outrosDocs").value = medicoParaEditar.outrosDocs;
|
||||
document.getElementById("numDoc").value = medicoParaEditar.numDoc;
|
||||
document.getElementById("sexo").value = medicoParaEditar.sexo;
|
||||
document.getElementById("dataNascimento").value = medicoParaEditar.dataNascimento;
|
||||
document.getElementById("cep").value = medicoParaEditar.cep;
|
||||
document.getElementById("etnia").value = medicoParaEditar.etnia;
|
||||
document.getElementById("raca").value = medicoParaEditar.raca;
|
||||
document.getElementById("nacionalidade").value = medicoParaEditar.nacionalidade;
|
||||
document.getElementById("estadoCivil").value = medicoParaEditar.estadoCivil;
|
||||
document.getElementById("nomeMae").value = medicoParaEditar.nomeMae;
|
||||
document.getElementById("nomePai").value = medicoParaEditar.nomePai;
|
||||
document.getElementById("nomeEsposo").value = medicoParaEditar.nomeEsposo;
|
||||
document.getElementById("endereco").value = medicoParaEditar.endereco;
|
||||
document.getElementById("numero").value = medicoParaEditar.numero;
|
||||
document.getElementById("complemento").value = medicoParaEditar.complemento;
|
||||
document.getElementById("bairro").value = medicoParaEditar.bairro;
|
||||
document.getElementById("email").value = medicoParaEditar.email;
|
||||
document.getElementById("telefone1").value = medicoParaEditar.telefone1;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
const cpf = document.getElementById("cpf");
|
||||
const telefone = document.getElementById("telefone1");
|
||||
const celular = document.getElementById("celular");
|
||||
|
||||
// Aplique as máscaras
|
||||
new Inputmask("999.999.999-99").mask(cpf);
|
||||
new Inputmask("(99) 99999-9999").mask(celular);
|
||||
new Inputmask("(99) 9999-9999").mask(telefone);
|
||||
|
||||
form.addEventListener("submit", (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
// Coletando os dados do formulário
|
||||
const medicoNovoOuAtualizado = {
|
||||
nome: document.getElementById("nome").value,
|
||||
celular: document.getElementById("celular").value,
|
||||
cidade: document.getElementById("cidade").value,
|
||||
estado: document.getElementById("estado").value,
|
||||
nomeSocial: document.getElementById("nomeSocial").value,
|
||||
cpf: document.getElementById("cpf").value.replace(/[.\-]/g, ""),
|
||||
outrosDocs: document.getElementById("outrosDocs").value,
|
||||
numDoc: document.getElementById("numDoc").value,
|
||||
sexo: document.getElementById("sexo").value,
|
||||
dataNascimento: document.getElementById("dataNascimento").value,
|
||||
etnia: document.getElementById("etnia").value,
|
||||
raca: document.getElementById("raca").value,
|
||||
nacionalidade: document.getElementById("nacionalidade").value,
|
||||
estadoCivil: document.getElementById("estadoCivil").value,
|
||||
nomeMae: document.getElementById("nomeMae").value,
|
||||
nomePai: document.getElementById("nomePai").value,
|
||||
nomeEsposo: document.getElementById("nomeEsposo").value,
|
||||
endereco: document.getElementById("endereco").value,
|
||||
numero: document.getElementById("numero").value,
|
||||
complemento: document.getElementById("complemento").value,
|
||||
bairro: document.getElementById("bairro").value,
|
||||
email: document.getElementById("email").value,
|
||||
telefone1: document.getElementById("telefone1").value,
|
||||
};
|
||||
|
||||
if (medicoParaEditar) {
|
||||
// Se for um medico para editar, atualiza os dados dele
|
||||
Object.assign(medicoParaEditar, medicoNovoOuAtualizado);
|
||||
} else {
|
||||
// Se for um novo medico, cria um ID único e o adiciona à lista
|
||||
medicoNovoOuAtualizado.id = Date.now();
|
||||
medicos.push(medicoNovoOuAtualizado);
|
||||
}
|
||||
|
||||
// Salva a lista atualizada de volta no localStorage
|
||||
localStorage.setItem("medicos", JSON.stringify(medicos));
|
||||
|
||||
// Redireciona para a página de listagem
|
||||
window.location.href = "../crud-medico.html";
|
||||
});
|
||||
}
|
||||
});
|
||||
450
Squad-21/clinicApp/pages-visao-clinica/medicos/crud-medico.css
Normal file
450
Squad-21/clinicApp/pages-visao-clinica/medicos/crud-medico.css
Normal file
@ -0,0 +1,450 @@
|
||||
/* Estilos para o container principal do CRUD */
|
||||
.crud-wrapper {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
align-items: flex-start;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.crud-header h1 {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.crud-header p {
|
||||
color: #666;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Estilos do Formulário */
|
||||
.form-container {
|
||||
background-color: #ffffff;
|
||||
padding: 25px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.form-container h2 {
|
||||
margin-bottom: 20px;
|
||||
font-weight: 500;
|
||||
font-size: 1.2rem;
|
||||
color: #007bff;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.input-group label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.input-group input,
|
||||
.input-group select {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #ccc;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-size: 0.95rem;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.input-group input:focus,
|
||||
.input-group select:focus {
|
||||
outline: none;
|
||||
border-color: #007bff;
|
||||
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.button-group button {
|
||||
padding: 10px 15px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #0056b3;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: #6c757d;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: #5a6268;
|
||||
}
|
||||
|
||||
|
||||
/* Estilos da Tabela */
|
||||
.table-container {
|
||||
background-color: #ffffff;
|
||||
padding: 25px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.table-container h2 {
|
||||
margin-bottom: 20px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
overflow-x: auto;
|
||||
/* Garante que a tabela seja rolável em telas pequenas */
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 12px 15px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
thead th {
|
||||
background-color: #f8f9fa;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
tbody tr:hover {
|
||||
background-color: #f1f3f5;
|
||||
}
|
||||
|
||||
td .btn-action {
|
||||
padding: 6px 10px;
|
||||
font-size: 14px;
|
||||
margin-right: 5px;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
td .btn-action:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.btn-edit {
|
||||
background-color: #28a745;
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
background-color: #dc3545;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-delete:hover {
|
||||
background-color: #c82333;
|
||||
}
|
||||
.btn-edit:hover {
|
||||
background-color: #218838;
|
||||
}
|
||||
|
||||
/* Responsividade para o conteúdo do CRUD */
|
||||
@media (max-width: 992px) {
|
||||
.crud-wrapper {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
/* força exibição do btn-primary caso haja override */
|
||||
.btn-primary {
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
/* espaçamento e alinhamento dos botões */
|
||||
.button-group {
|
||||
margin-top: 1.5rem;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.crud-header {
|
||||
padding: 2rem 1rem;
|
||||
margin: 1rem;
|
||||
background: linear-gradient(135deg, #0d6efd, #6610f2);
|
||||
color: rgb(251, 250, 250);
|
||||
border-radius: 0.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.crud-header h1 {
|
||||
font-size: 2rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.crud-header p {
|
||||
font-size: 1.1rem;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.filtros {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.btn-add {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
table {
|
||||
min-width: 600px;
|
||||
}
|
||||
|
||||
.main-button button {
|
||||
font-size: 17px;
|
||||
background: none;
|
||||
margin-right: 30px;
|
||||
margin-top: 10px;
|
||||
border: none;
|
||||
color: #243b51;
|
||||
padding: 20px 10px;
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: 0.6s;
|
||||
}
|
||||
|
||||
.main-button-border:hover {
|
||||
/*estilo no mouseenter*/
|
||||
border: none;
|
||||
margin-right: 30px;
|
||||
margin-top: 10px;
|
||||
padding: 20px 10px;
|
||||
background: none;
|
||||
border-bottom: 2px solid blue;
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.btn-add {
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
margin: 20px 0px;
|
||||
background-color: rgb(38, 137, 255);
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-add:hover {
|
||||
background-color: rgb(30, 110, 204);
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
padding: 8px;
|
||||
margin-left: 8px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
background-color: white;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.conteudo {
|
||||
margin-left: 30px;
|
||||
background-color: #fafafa;
|
||||
padding: 25px;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
/* Tabela */
|
||||
#pacientes-tabela {
|
||||
margin-top: 1.5rem;
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
border: 1px solid #ddd;
|
||||
background-color: white;
|
||||
font-size: 14px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#pacientes-tabela thead {
|
||||
background-color: #e9ecef;
|
||||
}
|
||||
|
||||
#pacientes-tabela thead th {
|
||||
padding: 12px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#pacientes-tabela tbody td {
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
#pacientes-tabela tbody tr:hover {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
#pacientes-tabela tbody td button {
|
||||
padding: 6px 10px;
|
||||
font-size: 14px;
|
||||
background-color: #6c757d;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#pacientes-tabela tbody td button:hover {
|
||||
background-color: #5a6268;
|
||||
}
|
||||
|
||||
/* Media queries melhoradas para responsividade */
|
||||
@media (max-width: 768px) {
|
||||
/* Melhor organização do conteúdo principal em mobile */
|
||||
.section-main-text {
|
||||
padding: 20px;
|
||||
padding-bottom: 0px;
|
||||
margin-top: 10rem;
|
||||
}
|
||||
|
||||
.section-main-text h1 {
|
||||
font-size: 28px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.section-main-text p {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.main-button {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.main-button button {
|
||||
margin-right: 0;
|
||||
margin-top: 5px;
|
||||
padding: 15px 8px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.conteudo {
|
||||
margin: 20px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* Formulário responsivo */
|
||||
#formLaudo {
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
#formLaudo fieldset {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#formLaudo button[type="submit"] {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* Tabela responsiva com scroll horizontal */
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
#pacientes-tabela {
|
||||
min-width: 600px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#pacientes-tabela thead th,
|
||||
#pacientes-tabela tbody td {
|
||||
padding: 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
/* Media query para tablets */
|
||||
@media (max-width: 1024px) and (min-width: 769px) {
|
||||
.section-main-text h1 {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.conteudo {
|
||||
margin: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Media query melhorada para telas muito pequenas */
|
||||
@media (max-width: 480px) {
|
||||
.section-main-text {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.section-main-text h1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.section-main-text p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.conteudo {
|
||||
margin: 15px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
#pacientes-tabela {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
#pacientes-tabela thead th,
|
||||
#pacientes-tabela tbody td {
|
||||
padding: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
164
Squad-21/clinicApp/pages-visao-clinica/medicos/crud-medico.html
Normal file
164
Squad-21/clinicApp/pages-visao-clinica/medicos/crud-medico.html
Normal file
@ -0,0 +1,164 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pt-BR">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Gestão de Médicos</title>
|
||||
<link rel="stylesheet" href="/Squad-21/clinicApp/global.css" />
|
||||
<link rel="stylesheet" href="./crud-medico.css" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/Squad-21/clinicApp/assets/style/bootstrap.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main>
|
||||
<div class="overlay" id="overlay"></div>
|
||||
|
||||
<div class="flex">
|
||||
<button class="hamburger-btn" id="hamburger-btn" aria-label="Abrir menu de navegação" aria-expanded="false">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
|
||||
<section class="sidebar" id="sidebar" role="navigation" aria-label="Menu principal">
|
||||
<div class="div-sidebar">
|
||||
<div class="abas">
|
||||
<a href="#" aria-label="Página inicial" class="logo1">
|
||||
<img src="https://images.vexels.com/media/users/3/142777/isolated/preview/84711206e52e0d4ff6c793cb476ea264-logotipo-medico-da-estrela-do-heartbeat.png"
|
||||
alt="Logo médico" id="logo-med" />
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#" aria-label="Pacientes">
|
||||
<img src="/Squad-21/clinicApp/assets/layoutIcons/icons8-estetoscópio-50.png"
|
||||
alt="Pacientes" class="icon-sidebar" />
|
||||
<p>Pacientes</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-label="Dashboard">
|
||||
<img src="/Squad-21/clinicApp/assets/layoutIcons/icons8-document.svg"
|
||||
alt="Dashboard" class="icon-sidebar" />
|
||||
<p>Dashboard</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="active-item"> <a href="#" aria-label="Médicos">
|
||||
<img src="/Squad-21/clinicApp/assets/layoutIcons/icons8-estetoscópio-50.png"
|
||||
alt="Médicos" class="icon-sidebar" />
|
||||
<p>Médicos</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-label="Laudos">
|
||||
<img src="https://i.imgur.com/Y8bXQ1E.png" alt="Laudos" class="icon-sidebar" />
|
||||
<p>Laudos</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-label="Agenda">
|
||||
<img src="https://i.imgur.com/Q3T6sN0.png" alt="Agenda" class="icon-sidebar" />
|
||||
<p>Agenda</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-label="Configurações">
|
||||
<img src="/Squad-21/clinicApp/assets/layoutIcons/icons8-configurações.svg"
|
||||
alt="Configurações" class="icon-sidebar" />
|
||||
<p>Settings</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="perfil-medico-sidebar">
|
||||
<h3>Dr. Rafael Andrade</h3>
|
||||
<p>Núcleo de Especialidades</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section-main">
|
||||
<nav class="nav" role="banner">
|
||||
<!-- <div class="div-search">
|
||||
<input type="text" class="search-input" placeholder="Buscar médico..."
|
||||
aria-label="Campo de busca" />
|
||||
<button class="search-button" aria-label="Buscar">
|
||||
<img src="/Squad-21/clinicApp/assets/layoutIcons/icons8-pesquisar.svg" alt="Buscar" />
|
||||
</button>
|
||||
</div> -->
|
||||
<div>
|
||||
<ul class="icon-lista">
|
||||
<li>
|
||||
<a href="#" aria-label="Ajuda"><img src="https://i.imgur.com/o2ba23i.png"
|
||||
alt="Ajuda" /></a>
|
||||
</li>
|
||||
<li>
|
||||
<button id="music" aria-label="Notificações"><img src="https://i.imgur.com/1BTRaKI.png"
|
||||
alt="Notificações" /></button>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-label="Perfil do usuário"><img src="https://i.imgur.com/so83EaA.png"
|
||||
alt="Usuário" /></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="main-contain">
|
||||
|
||||
<div class="crud-header">
|
||||
<h1>Gestão de Médicos</h1>
|
||||
<p>Adicione, visualize e gerencie os médicos da clínica.</p>
|
||||
</div>
|
||||
|
||||
<div class="conteudo">
|
||||
<a href="/Squad-21/clinicApp/pages-visao-clinica/medicos/addMedico/addMedico.html" id="btn-add2"
|
||||
class="btn-add"> + Cadastrar Médico </a>
|
||||
|
||||
<div class="filtros">
|
||||
<div class="div-search">
|
||||
<input type="text" id="search-input" class="search-input" placeholder="Buscar médico..."
|
||||
aria-label="Campo de busca" />
|
||||
<button id="search-button" class="search-button" aria-label="Buscar">
|
||||
<img src="../../assets/layoutIcons/icons8-pesquisar.svg" alt="Buscar" />
|
||||
</button>
|
||||
</div>
|
||||
<select id="filter-type" class="filter-select">
|
||||
<option value="geral">Geral</option>
|
||||
<option value="nome">Nome</option>
|
||||
<option value="telefone">Celular</option>
|
||||
<option value="cpf">CPF</option>
|
||||
<option value="status">Status</option>
|
||||
<option value="email">Email</option>
|
||||
</select>
|
||||
|
||||
</div>
|
||||
<!-- Container para scroll horizontal da tabela -->
|
||||
<div class="table-container">
|
||||
<table id="medicos-tabela">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nome</th>
|
||||
<th>Telefone</th>
|
||||
<th>CPF</th>
|
||||
<th>Status</th>
|
||||
<th>Ação</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script src="/Squad-21/clinicApp/scriptGlobal.js"></script>
|
||||
<script src="./crud-medico.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
329
Squad-21/clinicApp/pages-visao-clinica/medicos/crud-medico.js
Normal file
329
Squad-21/clinicApp/pages-visao-clinica/medicos/crud-medico.js
Normal file
@ -0,0 +1,329 @@
|
||||
// document.addEventListener("DOMContentLoaded", () => {
|
||||
// const tabelaMedicos = document.getElementById("medicos-tabela");
|
||||
// const tbody = tabelaMedicos?.querySelector("tbody");
|
||||
// const searchInput = document.getElementById("search-input");
|
||||
// const filterType = document.getElementById("filter-type");
|
||||
// const searchButton = document.getElementById("search-button");
|
||||
|
||||
// let pageAtual = 1;
|
||||
// const itensPorPagina = 10;
|
||||
// let carregando = false;
|
||||
// let buscaAtiva = false;
|
||||
// let termoBusca = "";
|
||||
// let tipoBusca = "geral";
|
||||
|
||||
// const renderizarLote = (medicos) => {
|
||||
// medicos.forEach((medico) => {
|
||||
// const row = document.createElement("tr");
|
||||
// row.innerHTML = `
|
||||
// <td>${medico.nome || "-"}</td>
|
||||
// <td>${medico.telefone || "-"}</td>
|
||||
// <td>${medico.cpf || "-"}</td>
|
||||
// <td>${medico.status || "-"}</td>
|
||||
// <td>
|
||||
// <button class="btn btn-edit" data-id="${medico.id}">Editar</button>
|
||||
// <button class="btn btn-detail" data-id="${medico.id}">Detalhes</button>
|
||||
// <button class="btn btn-delete" data-id="${medico.id}">Excluir</button>
|
||||
// </td>
|
||||
// `;
|
||||
// tbody.appendChild(row);
|
||||
// });
|
||||
|
||||
// adicionarEventos();
|
||||
// };
|
||||
|
||||
// const carregarMedicosDaAPI = async () => {
|
||||
// if (carregando) return;
|
||||
// carregando = true;
|
||||
|
||||
// try {
|
||||
// const response = await fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes?page=${pageAtual}&limit=${itensPorPagina}`);
|
||||
// const json = await response.json();
|
||||
// const novosMedicos = Array.isArray(json.data) ? json.data : [];
|
||||
|
||||
// console.log(novosMedicos)
|
||||
|
||||
// if (buscaAtiva && termoBusca.trim()) {
|
||||
// const termo = termoBusca.toLowerCase();
|
||||
// const filtrados = novosMedicos.filter((medico) => {
|
||||
// if (tipoBusca === "geral") {
|
||||
// return (
|
||||
// (medico.nome || "").toLowerCase().includes(termo) ||
|
||||
// (medico.telefone || "").toLowerCase().includes(termo) ||
|
||||
// (medico.status || "").toLowerCase().includes(termo) ||
|
||||
// (medico.email || "").toLowerCase().includes(termo) ||
|
||||
// (medico.cpf || "").toLowerCase().includes(termo)
|
||||
// );
|
||||
// } else {
|
||||
// return (medico[tipoBusca] || "").toLowerCase().includes(termo);
|
||||
// }
|
||||
// });
|
||||
|
||||
// renderizarLote(filtrados);
|
||||
// } else {
|
||||
// renderizarLote(novosMedicos);
|
||||
// }
|
||||
|
||||
// pageAtual++;
|
||||
// } catch (error) {
|
||||
// console.error("Erro ao carregar médicos da API:", error);
|
||||
// } finally {
|
||||
// carregando = false;
|
||||
// }
|
||||
// };
|
||||
|
||||
// const aplicarFiltro = () => {
|
||||
// tbody.innerHTML = "";
|
||||
// pageAtual = 1;
|
||||
// buscaAtiva = true;
|
||||
// termoBusca = searchInput.value;
|
||||
// tipoBusca = filterType.value;
|
||||
// carregarMedicosDaAPI();
|
||||
// };
|
||||
|
||||
// const adicionarEventos = () => {
|
||||
// document.querySelectorAll(".btn-edit").forEach((btn) => {
|
||||
// btn.addEventListener("click", (e) => {
|
||||
// const id = e.target.dataset.id;
|
||||
// window.location.href = `addMedico/addMedico.html?id=${id}`;
|
||||
// });
|
||||
// });
|
||||
|
||||
// document.querySelectorAll(".btn-detail").forEach((btn) => {
|
||||
// btn.addEventListener("click", (e) => {
|
||||
// const id = e.target.dataset.id;
|
||||
// window.location.href = `addMedico/addMedico.html?mode=detalhes&id=${id}`;
|
||||
// });
|
||||
// });
|
||||
|
||||
// document.querySelectorAll(".btn-delete").forEach((btn) => {
|
||||
// btn.addEventListener("click", async (e) => {
|
||||
// const id = e.target.dataset.id;
|
||||
// const confirmar = confirm("Tem certeza que deseja excluir este médico?");
|
||||
// if (!confirmar) return;
|
||||
|
||||
// try {
|
||||
// const response = await fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}`, {
|
||||
// method: "DELETE"
|
||||
// });
|
||||
|
||||
// if (response.ok) {
|
||||
// e.target.closest("tr").remove();
|
||||
// alert("Médico excluído com sucesso.");
|
||||
// } else {
|
||||
// alert("Erro ao excluir médico.");
|
||||
// }
|
||||
// } catch (error) {
|
||||
// console.error("Erro na exclusão:", error);
|
||||
// alert("Erro ao excluir médico.");
|
||||
// }
|
||||
// });
|
||||
// });
|
||||
// };
|
||||
|
||||
// window.addEventListener("scroll", () => {
|
||||
// const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
|
||||
// if (scrollTop + clientHeight >= scrollHeight - 5) {
|
||||
// carregarMedicosDaAPI();
|
||||
// }
|
||||
// });
|
||||
|
||||
// searchButton.addEventListener("click", aplicarFiltro);
|
||||
// searchInput.addEventListener("keyup", (e) => {
|
||||
// if (e.key === "Enter") aplicarFiltro();
|
||||
// });
|
||||
|
||||
// carregarMedicosDaAPI();
|
||||
// });
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const tabelaMedicos = document.getElementById("medicos-tabela");
|
||||
const tbody = tabelaMedicos?.querySelector("tbody");
|
||||
const searchInput = document.getElementById("search-input");
|
||||
const filterType = document.getElementById("filter-type");
|
||||
const searchButton = document.getElementById("search-button");
|
||||
|
||||
const token = "<token>"; // 🔐 Substitua pelo seu token real
|
||||
let pageAtual = 1;
|
||||
const itensPorPagina = 10;
|
||||
let carregando = false;
|
||||
let buscaAtiva = false;
|
||||
let termoBusca = "";
|
||||
let tipoBusca = "geral";
|
||||
|
||||
const renderizarLote = (medicos) => {
|
||||
medicos.forEach((medico) => {
|
||||
const row = document.createElement("tr");
|
||||
row.innerHTML = `
|
||||
<td>${medico.nome || "-"}</td>
|
||||
<td>${medico.telefone || "-"}</td>
|
||||
<td>${medico.cpf || "-"}</td>
|
||||
<td>${medico.status || "-"}</td>
|
||||
<td>
|
||||
<button class="btn btn-edit" data-id="${medico.id}">Editar</button>
|
||||
<button class="btn btn-detail" data-id="${medico.id}">Detalhes</button>
|
||||
<button class="btn btn-delete" data-id="${medico.id}">Excluir</button>
|
||||
</td>
|
||||
`;
|
||||
tbody.appendChild(row);
|
||||
});
|
||||
|
||||
adicionarEventos();
|
||||
};
|
||||
|
||||
const carregarMedicosDaAPI = async () => {
|
||||
if (carregando) return;
|
||||
carregando = true;
|
||||
|
||||
try {
|
||||
const response = await fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes?page=${pageAtual}&limit=${itensPorPagina}`);
|
||||
const json = await response.json();
|
||||
const novosMedicos = Array.isArray(json.data) ? json.data : [];
|
||||
|
||||
if (buscaAtiva && termoBusca.trim()) {
|
||||
const termo = termoBusca.toLowerCase();
|
||||
const filtrados = novosMedicos.filter((medico) => {
|
||||
if (tipoBusca === "geral") {
|
||||
return (
|
||||
(medico.nome || "").toLowerCase().includes(termo) ||
|
||||
(medico.telefone || "").toLowerCase().includes(termo) ||
|
||||
(medico.status || "").toLowerCase().includes(termo) ||
|
||||
(medico.email || "").toLowerCase().includes(termo) ||
|
||||
(medico.cpf || "").toLowerCase().includes(termo)
|
||||
);
|
||||
} else {
|
||||
return (medico[tipoBusca] || "").toLowerCase().includes(termo);
|
||||
}
|
||||
});
|
||||
|
||||
renderizarLote(filtrados);
|
||||
} else {
|
||||
renderizarLote(novosMedicos);
|
||||
}
|
||||
|
||||
pageAtual++;
|
||||
} catch (error) {
|
||||
console.error("Erro ao carregar médicos da API:", error);
|
||||
} finally {
|
||||
carregando = false;
|
||||
}
|
||||
};
|
||||
|
||||
const aplicarFiltro = () => {
|
||||
tbody.innerHTML = "";
|
||||
pageAtual = 1;
|
||||
buscaAtiva = true;
|
||||
termoBusca = searchInput.value;
|
||||
tipoBusca = filterType.value;
|
||||
carregarMedicosDaAPI();
|
||||
};
|
||||
|
||||
// const adicionarEventos = () => {
|
||||
// document.querySelectorAll(".btn-edit").forEach((btn) => {
|
||||
// btn.addEventListener("click", (e) => {
|
||||
// const id = e.target.dataset.id;
|
||||
// window.location.href = `addMedico/addMedico.html?id=${id}`;
|
||||
// });
|
||||
// });
|
||||
|
||||
// document.querySelectorAll(".btn-detail").forEach((btn) => {
|
||||
// btn.addEventListener("click", (e) => {
|
||||
// const id = e.target.dataset.id;
|
||||
// window.location.href = `addMedico/addMedico.html?mode=detalhes&id=${id}`;
|
||||
// });
|
||||
// });
|
||||
|
||||
// document.querySelectorAll(".btn-delete").forEach((btn) => {
|
||||
// btn.addEventListener("click", async (e) => {
|
||||
// const id = e.target.dataset.id;
|
||||
// const confirmar = confirm("Tem certeza que deseja excluir este médico?");
|
||||
// if (!confirmar) return;
|
||||
|
||||
// const myHeaders = new Headers();
|
||||
// myHeaders.append("Authorization", `Bearer ${token}`);
|
||||
|
||||
// const requestOptions = {
|
||||
// method: "DELETE",
|
||||
// headers: myHeaders,
|
||||
// redirect: "follow"
|
||||
// };
|
||||
|
||||
// try {
|
||||
// const response = await fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}`, requestOptions);
|
||||
// if (response.ok) {
|
||||
// e.target.closest("tr").remove();
|
||||
// alert("Médico excluído com sucesso.");
|
||||
// } else {
|
||||
// alert("Erro ao excluir médico. Código: " + response.status);
|
||||
// }
|
||||
// } catch (error) {
|
||||
// console.error("Erro na exclusão:", error);
|
||||
// alert("Erro ao excluir médico.");
|
||||
// }
|
||||
// });
|
||||
// });
|
||||
// };
|
||||
|
||||
const adicionarEventos = () => {
|
||||
tbody.addEventListener("click", async (e) => {
|
||||
const btn = e.target;
|
||||
const id = btn.dataset.id;
|
||||
|
||||
if (btn.classList.contains("btn-edit")) {
|
||||
window.location.href = `addMedico/addMedico.html?id=${id}`;
|
||||
}
|
||||
|
||||
if (btn.classList.contains("btn-detail")) {
|
||||
window.location.href = `addMedico/addMedico.html?mode=detalhes&id=${id}`;
|
||||
}
|
||||
|
||||
if (btn.classList.contains("btn-delete")) {
|
||||
if (btn.disabled) return; // evita múltiplos cliques
|
||||
const confirmar = confirm("Tem certeza que deseja excluir este médico?");
|
||||
if (!confirmar) return;
|
||||
|
||||
btn.disabled = true;
|
||||
btn.textContent = "Excluindo...";
|
||||
|
||||
const myHeaders = new Headers();
|
||||
myHeaders.append("Authorization", "Bearer <token>");
|
||||
|
||||
const requestOptions = {
|
||||
method: "DELETE",
|
||||
headers: myHeaders,
|
||||
redirect: "follow"
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}`, requestOptions);
|
||||
if (response.ok) {
|
||||
btn.closest("tr").remove();
|
||||
alert("Médico excluído com sucesso.");
|
||||
} else {
|
||||
alert("Erro ao excluir médico. Código: " + response.status);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Erro na exclusão:", error);
|
||||
alert("Erro ao excluir médico.");
|
||||
} finally {
|
||||
btn.disabled = false;
|
||||
btn.textContent = "Excluir";
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
window.addEventListener("scroll", () => {
|
||||
const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
|
||||
if (scrollTop + clientHeight >= scrollHeight - 5) {
|
||||
carregarMedicosDaAPI();
|
||||
}
|
||||
});
|
||||
|
||||
searchButton.addEventListener("click", aplicarFiltro);
|
||||
searchInput.addEventListener("keyup", (e) => {
|
||||
if (e.key === "Enter") aplicarFiltro();
|
||||
});
|
||||
|
||||
carregarMedicosDaAPI();
|
||||
});
|
||||
117
Squad-21/clinicApp/pages-visao-clinica/medicos/sla.css
Normal file
117
Squad-21/clinicApp/pages-visao-clinica/medicos/sla.css
Normal file
@ -0,0 +1,117 @@
|
||||
/* Container geral */
|
||||
.crud-wrapper {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* Formulário */
|
||||
.form-container {
|
||||
flex: 1;
|
||||
min-width: 280px;
|
||||
background: #fff;
|
||||
padding: 1.5rem;
|
||||
border-radius: 8px;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.form-container h2 {
|
||||
margin-bottom: 1rem;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.input-group label {
|
||||
display: block;
|
||||
margin-bottom: .3rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.input-group input,
|
||||
.input-group select {
|
||||
width: 100%;
|
||||
padding: .6rem;
|
||||
border: 1px solid var(--gray-light);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Botões */
|
||||
.button-group {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: .6rem 1.2rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--gray-light);
|
||||
color: var(--text);
|
||||
border: none;
|
||||
padding: .6rem 1.2rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Tabela */
|
||||
.table-container {
|
||||
flex: 2;
|
||||
min-width: 320px;
|
||||
background: #fff;
|
||||
padding: 1.5rem;
|
||||
border-radius: 8px;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: .8rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--gray-light);
|
||||
}
|
||||
|
||||
th {
|
||||
background: var(--gray-bg);
|
||||
}
|
||||
|
||||
.acoes button {
|
||||
margin-right: .4rem;
|
||||
padding: .3rem .6rem;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.acoes button:first-child {
|
||||
background: var(--warning);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.acoes button:last-child {
|
||||
background: var(--danger);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Responsividade */
|
||||
@media(max-width: 768px) {
|
||||
.crud-wrapper {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
225
Squad-21/clinicApp/pages-visao-clinica/medicos/sla.js
Normal file
225
Squad-21/clinicApp/pages-visao-clinica/medicos/sla.js
Normal file
@ -0,0 +1,225 @@
|
||||
// document.addEventListener('DOMContentLoaded', () => {
|
||||
// const medicoForm = document.getElementById('medicoForm');
|
||||
// const medicoIdInput = document.getElementById('medicoId');
|
||||
// const nomeInput = document.getElementById('nome');
|
||||
// const crmInput = document.getElementById('crm');
|
||||
// const especialidadeInput = document.getElementById('especialidade');
|
||||
// const telefoneInput = document.getElementById('telefone');
|
||||
// const emailInput = document.getElementById('email');
|
||||
// const statusInput = document.getElementById('status');
|
||||
// const cancelarBtn = document.getElementById('cancelarBtn');
|
||||
// const medicosTabelaBody = document.getElementById('medicosTabelaBody');
|
||||
|
||||
// let medicos = JSON.parse(localStorage.getItem('medicos')) || [];
|
||||
|
||||
// const salvarMedicos = () => {
|
||||
// localStorage.setItem('medicos', JSON.stringify(medicos));
|
||||
// };
|
||||
|
||||
// const renderizarTabela = () => {
|
||||
// medicosTabelaBody.innerHTML = '';
|
||||
|
||||
// if (medicos.length === 0) {
|
||||
// medicosTabelaBody.innerHTML = '<tr><td colspan="5" style="text-align:center;">Nenhum médico cadastrado.</td></tr>';
|
||||
// return;
|
||||
// }
|
||||
|
||||
// medicos.forEach(medico => {
|
||||
// const tr = document.createElement('tr');
|
||||
// tr.innerHTML = `
|
||||
// <td>${medico.nome}</td>
|
||||
// <td>${medico.crm}</td>
|
||||
// <td>${medico.especialidade}</td>
|
||||
// <td>${medico.status}</td>
|
||||
// <td>
|
||||
// <button class="btn-action btn-edit" data-crm="${medico.crm}">Editar</button>
|
||||
// <button class="btn-action btn-delete" data-crm="${medico.crm}">Excluir</button>
|
||||
// </td>
|
||||
// `;
|
||||
// medicosTabelaBody.appendChild(tr);
|
||||
// });
|
||||
// };
|
||||
|
||||
// const resetarFormulario = () => {
|
||||
// medicoForm.reset();
|
||||
// medicoIdInput.value = '';
|
||||
// crmInput.disabled = false;
|
||||
// cancelarBtn.style.display = 'none';
|
||||
// };
|
||||
|
||||
// medicoForm.addEventListener('submit', (e) => {
|
||||
// e.preventDefault();
|
||||
// const id = medicoIdInput.value;
|
||||
// const medico = {
|
||||
// nome: nomeInput.value.trim(),
|
||||
// crm: crmInput.value.trim(),
|
||||
// especialidade: especialidadeInput.value,
|
||||
// telefone: telefoneInput.value.trim(),
|
||||
// email: emailInput.value.trim(),
|
||||
// status: statusInput.value,
|
||||
// };
|
||||
|
||||
// if (id) {
|
||||
// const index = medicos.findIndex(m => m.crm === id);
|
||||
// if (index !== -1) {
|
||||
// medicos[index] = medico;
|
||||
// }
|
||||
// } else {
|
||||
// if (medicos.some(m => m.crm === medico.crm)) {
|
||||
// alert('CRM já cadastrado!');
|
||||
// return;
|
||||
// }
|
||||
// medicos.push(medico);
|
||||
// }
|
||||
|
||||
// salvarMedicos();
|
||||
// renderizarTabela();
|
||||
// resetarFormulario();
|
||||
// });
|
||||
|
||||
// medicosTabelaBody.addEventListener('click', (e) => {
|
||||
// const target = e.target;
|
||||
// const crm = target.getAttribute('data-crm');
|
||||
|
||||
// if (target.classList.contains('btn-edit')) {
|
||||
// const medicoParaEditar = medicos.find(m => m.crm === crm);
|
||||
// if (medicoParaEditar) {
|
||||
// medicoIdInput.value = medicoParaEditar.crm;
|
||||
// nomeInput.value = medicoParaEditar.nome;
|
||||
// crmInput.value = medicoParaEditar.crm;
|
||||
// crmInput.disabled = true;
|
||||
// especialidadeInput.value = medicoParaEditar.especialidade;
|
||||
// telefoneInput.value = medicoParaEditar.telefone;
|
||||
// emailInput.value = medicoParaEditar.email;
|
||||
// statusInput.value = medicoParaEditar.status;
|
||||
|
||||
// cancelarBtn.style.display = 'inline-block';
|
||||
// window.scrollTo(0, 0);
|
||||
// }
|
||||
// }
|
||||
|
||||
// if (target.classList.contains('btn-delete')) {
|
||||
// if (confirm(`Tem certeza que deseja excluir o médico com CRM ${crm}?`)) {
|
||||
// medicos = medicos.filter(m => m.crm !== crm);
|
||||
// salvarMedicos();
|
||||
// renderizarTabela();
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
|
||||
// cancelarBtn.addEventListener('click', () => {
|
||||
// resetarFormulario();
|
||||
// });
|
||||
|
||||
// renderizarTabela();
|
||||
// });
|
||||
|
||||
// Seletores
|
||||
// const form = document.getElementById('medicoForm');
|
||||
// const tabelaBody = document.getElementById('medicosTabelaBody');
|
||||
// const cancelarBtn = document.getElementById('cancelarBtn');
|
||||
// const searchInput = document.querySelector('.search-input');
|
||||
|
||||
// let medicos = [];
|
||||
|
||||
// // Carrega dados do localStorage ao iniciar
|
||||
// document.addEventListener('DOMContentLoaded', () => {
|
||||
// const stored = localStorage.getItem('medicos');
|
||||
// medicos = stored ? JSON.parse(stored) : [];
|
||||
// renderMedicos(medicos);
|
||||
// });
|
||||
|
||||
// // Função para renderizar lista de médicos
|
||||
// function renderMedicos(lista) {
|
||||
// tabelaBody.innerHTML = '';
|
||||
// lista.forEach(m => {
|
||||
// const tr = document.createElement('tr');
|
||||
// tr.innerHTML = `
|
||||
// <td>${m.nome}</td>
|
||||
// <td>${m.crm}</td>
|
||||
// <td>${m.especialidade}</td>
|
||||
// <td>${m.status}</td>
|
||||
// <td class="acoes">
|
||||
// <button onclick="editarMedico('${m.id}')">Editar</button>
|
||||
// <button onclick="excluirMedico('${m.id}')">Excluir</button>
|
||||
// </td>`;
|
||||
// tabelaBody.appendChild(tr);
|
||||
// });
|
||||
// }
|
||||
|
||||
// // Salva no localStorage
|
||||
// function salvarLocalStorage() {
|
||||
// localStorage.setItem('medicos', JSON.stringify(medicos));
|
||||
// }
|
||||
|
||||
// // Trata submissão do formulário
|
||||
// form.addEventListener('submit', e => {
|
||||
// e.preventDefault();
|
||||
// const idField = document.getElementById('medicoId');
|
||||
// const nome = document.getElementById('nome').value.trim();
|
||||
// const crm = document.getElementById('crm').value.trim();
|
||||
// const especialidade = document.getElementById('especialidade').value;
|
||||
// const telefone = document.getElementById('telefone').value.trim();
|
||||
// const email = document.getElementById('email').value.trim();
|
||||
// const status = document.getElementById('status').value;
|
||||
|
||||
// // Validação mínima
|
||||
// if (!nome || !crm || !especialidade) return;
|
||||
|
||||
// if (idField.value) {
|
||||
// // Edição
|
||||
// const idx = medicos.findIndex(m => m.id === idField.value);
|
||||
// medicos[idx] = { id: idField.value, nome, crm, especialidade, telefone, email, status };
|
||||
// } else {
|
||||
// // Criação
|
||||
// const novoMedico = {
|
||||
// id: Date.now().toString(),
|
||||
// nome, crm, especialidade, telefone, email, status
|
||||
// };
|
||||
// medicos.push(novoMedico);
|
||||
// }
|
||||
|
||||
// salvarLocalStorage();
|
||||
// renderMedicos(medicos);
|
||||
// form.reset();
|
||||
// idField.value = '';
|
||||
// cancelarBtn.style.display = 'none';
|
||||
// });
|
||||
|
||||
// // Função para iniciar edição
|
||||
// window.editarMedico = function(id) {
|
||||
// const m = medicos.find(m => m.id === id);
|
||||
// document.getElementById('medicoId').value = m.id;
|
||||
// document.getElementById('nome').value = m.nome;
|
||||
// document.getElementById('crm').value = m.crm;
|
||||
// document.getElementById('especialidade').value = m.especialidade;
|
||||
// document.getElementById('telefone').value = m.telefone;
|
||||
// document.getElementById('email').value = m.email;
|
||||
// document.getElementById('status').value = m.status;
|
||||
// cancelarBtn.style.display = 'inline-block';
|
||||
// };
|
||||
|
||||
// // Função para excluir médico
|
||||
// window.excluirMedico = function(id) {
|
||||
// if (!confirm('Tem certeza que deseja excluir este médico?')) return;
|
||||
// medicos = medicos.filter(m => m.id !== id);
|
||||
// salvarLocalStorage();
|
||||
// renderMedicos(medicos);
|
||||
// };
|
||||
|
||||
// // Cancelar edição
|
||||
// cancelarBtn.addEventListener('click', () => {
|
||||
// form.reset();
|
||||
// document.getElementById('medicoId').value = '';
|
||||
// cancelarBtn.style.display = 'none';
|
||||
// });
|
||||
|
||||
// // Filtro de busca
|
||||
// searchInput.addEventListener('input', () => {
|
||||
// const termo = searchInput.value.toLowerCase();
|
||||
// const filtrados = medicos.filter(m =>
|
||||
// m.nome.toLowerCase().includes(termo) ||
|
||||
// m.crm.toLowerCase().includes(termo)
|
||||
// );
|
||||
// renderMedicos(filtrados);
|
||||
// });
|
||||
86
Squad-21/clinicApp/pages/agendamento/agendamento.html
Normal file
86
Squad-21/clinicApp/pages/agendamento/agendamento.html
Normal file
@ -0,0 +1,86 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pt-BR">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Crud + Layout</title>
|
||||
<link rel="stylesheet" href="../../global.css" />
|
||||
<!-- css da página -->
|
||||
<link rel="stylesheet" href="#" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main>
|
||||
<!-- Overlay só aparece em mobile quando menu está ativo -->
|
||||
<div class="overlay" id="overlay"></div>
|
||||
|
||||
<div class="flex">
|
||||
<!-- Botão hambúrguer só aparece em mobile -->
|
||||
<button class="hamburger-btn" id="hamburger-btn" aria-label="Abrir menu de navegação" aria-expanded="false">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
|
||||
<!-- Sidebar agora se comporta diferente em desktop vs mobile -->
|
||||
<section class="sidebar" id="sidebar" role="navigation" aria-label="Menu principal">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#" aria-label="Página inicial">
|
||||
<img src="https://images.vexels.com/media/users/3/142777/isolated/preview/84711206e52e0d4ff6c793cb476ea264-logotipo-medico-da-estrela-do-heartbeat.png" alt="Logo médico" id="logo-med" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-label="Pacientes">
|
||||
<img src="../../assets/layoutIcons/icons8-estetoscópio-50.png" alt="Pacientes" class="icon-sidebar" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-label="Cadastro de usuários">
|
||||
<img src="../../assets/layoutIcons/icons8-grupo-de-usuário-homem-homem-50.png" alt="Cadastro" class="icon-sidebar" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-label="Documentos">
|
||||
<img src="../../assets/layoutIcons/icons8-document.svg" alt="Documentos" class="icon-sidebar" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-label="Configurações">
|
||||
<img src="../../assets/layoutIcons/icons8-configurações.svg" alt="Configurações" class="icon-sidebar" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<!-- Seção principal sem padding-top desnecessário -->
|
||||
<section class="section-main">
|
||||
<nav class="nav" role="banner">
|
||||
<div class="div-search">
|
||||
<input type="text" class="search-input" placeholder="Buscar paciente" aria-label="Campo de busca" />
|
||||
<button class="search-button" aria-label="Buscar">
|
||||
<img src="../../assets/layoutIcons/icons8-pesquisar.svg" alt="Buscar" />
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<ul class="icon-lista">
|
||||
<li>
|
||||
<a href="#" aria-label="Ajuda"><img src="../../assets/layoutIcons/icons8-ajuda-50.png" alt="Ajuda" /></a>
|
||||
</li>
|
||||
<li>
|
||||
<button aria-label="Notificações"><img src="../../assets/layoutIcons/botao-ativar-notificacoes.png" alt="Notificações" /></button>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-label="Perfil do usuário"><img src="../../assets/layoutIcons/icons8-usuário-50.png" alt="Usuário" /></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
<!-- script da página -->
|
||||
<script src="#"></script>
|
||||
<script src="../../scriptGlobal.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
0
Squad-21/clinicApp/pages/agendamento/agendamento.js
Normal file
0
Squad-21/clinicApp/pages/agendamento/agendamento.js
Normal file
0
Squad-21/clinicApp/pages/dashboard/dashboard.css
Normal file
0
Squad-21/clinicApp/pages/dashboard/dashboard.css
Normal file
86
Squad-21/clinicApp/pages/dashboard/dashboard.html
Normal file
86
Squad-21/clinicApp/pages/dashboard/dashboard.html
Normal file
@ -0,0 +1,86 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pt-BR">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Crud + Layout</title>
|
||||
<link rel="stylesheet" href="../../global.css" />
|
||||
<!-- css da página -->
|
||||
<link rel="stylesheet" href="#" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main>
|
||||
<!-- Overlay só aparece em mobile quando menu está ativo -->
|
||||
<div class="overlay" id="overlay"></div>
|
||||
|
||||
<div class="flex">
|
||||
<!-- Botão hambúrguer só aparece em mobile -->
|
||||
<button class="hamburger-btn" id="hamburger-btn" aria-label="Abrir menu de navegação" aria-expanded="false">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
|
||||
<!-- Sidebar agora se comporta diferente em desktop vs mobile -->
|
||||
<section class="sidebar" id="sidebar" role="navigation" aria-label="Menu principal">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../pages/home/home.html" aria-label="Página inicial">
|
||||
<img src="https://images.vexels.com/media/users/3/142777/isolated/preview/84711206e52e0d4ff6c793cb476ea264-logotipo-medico-da-estrela-do-heartbeat.png" alt="Logo médico" id="logo-med" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../pages/pacientes/paciente.html" aria-label="Pacientes">
|
||||
<img src="../../assets/layoutIcons/icons8-estetoscópio-50.png" alt="Pacientes" class="icon-sidebar" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../pages/agendamento/agendamento.html" aria-label="Cadastro de usuários">
|
||||
<img src="../../assets/layoutIcons/icons8-grupo-de-usuário-homem-homem-50.png" alt="Cadastro" class="icon-sidebar" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../pages/laudo/laudoMedico.html" aria-label="Documentos">
|
||||
<img src="../../assets/layoutIcons/icons8-document.svg" alt="Documentos" class="icon-sidebar" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-label="Configurações">
|
||||
<img src="../../assets/layoutIcons/icons8-configurações.svg" alt="Configurações" class="icon-sidebar" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<!-- Seção principal sem padding-top desnecessário -->
|
||||
<section class="section-main">
|
||||
<nav class="nav" role="banner">
|
||||
<div class="div-search">
|
||||
<input type="text" class="search-input" placeholder="Buscar paciente" aria-label="Campo de busca" />
|
||||
<button class="search-button" aria-label="Buscar">
|
||||
<img src="../../assets/layoutIcons/icons8-pesquisar.svg" alt="Buscar" />
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<ul class="icon-lista">
|
||||
<li>
|
||||
<a href="#" aria-label="Ajuda"><img src="../../assets/layoutIcons/icons8-ajuda-50.png" alt="Ajuda" /></a>
|
||||
</li>
|
||||
<li>
|
||||
<button aria-label="Notificações"><img src="../../assets/layoutIcons/botao-ativar-notificacoes.png" alt="Notificações" /></button>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-label="Perfil do usuário"><img src="../../assets/layoutIcons/icons8-usuário-50.png" alt="Usuário" /></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
<!-- script da página -->
|
||||
<script src="#"></script>
|
||||
<script src="../../scriptGlobal.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
0
Squad-21/clinicApp/pages/dashboard/dashboard.js
Normal file
0
Squad-21/clinicApp/pages/dashboard/dashboard.js
Normal file
0
Squad-21/clinicApp/pages/home/home.css
Normal file
0
Squad-21/clinicApp/pages/home/home.css
Normal file
86
Squad-21/clinicApp/pages/home/home.html
Normal file
86
Squad-21/clinicApp/pages/home/home.html
Normal file
@ -0,0 +1,86 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pt-BR">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Crud + Layout</title>
|
||||
<link rel="stylesheet" href="../../global.css" />
|
||||
<!-- css da página -->
|
||||
<link rel="stylesheet" href="#" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main>
|
||||
<!-- Overlay só aparece em mobile quando menu está ativo -->
|
||||
<div class="overlay" id="overlay"></div>
|
||||
|
||||
<div class="flex">
|
||||
<!-- Botão hambúrguer só aparece em mobile -->
|
||||
<button class="hamburger-btn" id="hamburger-btn" aria-label="Abrir menu de navegação" aria-expanded="false">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
|
||||
<!-- Sidebar agora se comporta diferente em desktop vs mobile -->
|
||||
<section class="sidebar" id="sidebar" role="navigation" aria-label="Menu principal">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../pages/home/home.html" aria-label="Página inicial">
|
||||
<img src="https://images.vexels.com/media/users/3/142777/isolated/preview/84711206e52e0d4ff6c793cb476ea264-logotipo-medico-da-estrela-do-heartbeat.png" alt="Logo médico" id="logo-med" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../pages/pacientes/paciente.html" aria-label="Pacientes">
|
||||
<img src="../../assets/layoutIcons/icons8-estetoscópio-50.png" alt="Pacientes" class="icon-sidebar" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-label="Cadastro de usuários">
|
||||
<img src="../../assets/layoutIcons/icons8-grupo-de-usuário-homem-homem-50.png" alt="Cadastro" class="icon-sidebar" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../pages/laudo/laudoMedico.html" aria-label="Documentos">
|
||||
<img src="../../assets/layoutIcons/icons8-document.svg" alt="Documentos" class="icon-sidebar" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-label="Configurações">
|
||||
<img src="../../assets/layoutIcons/icons8-configurações.svg" alt="Configurações" class="icon-sidebar" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<!-- Seção principal sem padding-top desnecessário -->
|
||||
<section class="section-main">
|
||||
<nav class="nav" role="banner">
|
||||
<div class="div-search">
|
||||
<input type="text" class="search-input" placeholder="Buscar paciente" aria-label="Campo de busca" />
|
||||
<button class="search-button" aria-label="Buscar">
|
||||
<img src="../../assets/layoutIcons/icons8-pesquisar.svg" alt="Buscar" />
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<ul class="icon-lista">
|
||||
<li>
|
||||
<a href="#" aria-label="Ajuda"><img src="../../assets/layoutIcons/icons8-ajuda-50.png" alt="Ajuda" /></a>
|
||||
</li>
|
||||
<li>
|
||||
<button aria-label="Notificações"><img src="../../assets/layoutIcons/botao-ativar-notificacoes.png" alt="Notificações" /></button>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-label="Perfil do usuário"><img src="../../assets/layoutIcons/icons8-usuário-50.png" alt="Usuário" /></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
<!-- script da página -->
|
||||
<script src="#"></script>
|
||||
<script src="../../scriptGlobal.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
0
Squad-21/clinicApp/pages/home/home.js
Normal file
0
Squad-21/clinicApp/pages/home/home.js
Normal file
260
Squad-21/clinicApp/pages/laudo/laudo.css
Normal file
260
Squad-21/clinicApp/pages/laudo/laudo.css
Normal file
@ -0,0 +1,260 @@
|
||||
fieldset {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
fieldset label {
|
||||
font-family: "Times New Roman", Times, serif;
|
||||
}
|
||||
|
||||
fieldset input {
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
margin-top: 5px;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
#form-tittle {
|
||||
width: 93%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
margin-bottom: 10px;
|
||||
padding-right: 25px;
|
||||
}
|
||||
|
||||
#form-tittle label {
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
color: #243b51;
|
||||
}
|
||||
|
||||
.section-main-text {
|
||||
padding: 30px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
||||
.section-main-text h1 {
|
||||
margin-bottom: 15px;
|
||||
font-size: 35px;
|
||||
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
|
||||
}
|
||||
|
||||
.section-main-text p {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.main-button button {
|
||||
font-size: 17px;
|
||||
background: none;
|
||||
margin-right: 30px;
|
||||
margin-top: 10px;
|
||||
border: none;
|
||||
color: #243b51;
|
||||
padding: 20px 10px;
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: 0.6s;
|
||||
}
|
||||
|
||||
.main-button-border:hover {
|
||||
/*estilo no mouseenter*/
|
||||
border: none;
|
||||
margin-right: 30px;
|
||||
margin-top: 10px;
|
||||
padding: 20px 10px;
|
||||
background: none;
|
||||
border-bottom: 2px solid blue;
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.conteudo {
|
||||
margin-left: 30px;
|
||||
background-color: #fafafa;
|
||||
padding: 25px;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
/*formulário */
|
||||
#formLaudo {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
background-color: #f8f9fa;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #ddd;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#formLaudo button[type="submit"] {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
padding: 10px 16px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
#formLaudo button[type="submit"]:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
/* Tabela */
|
||||
#laudoTable {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
border: 1px solid #ddd;
|
||||
background-color: white;
|
||||
font-size: 14px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#laudoTable thead {
|
||||
background-color: #e9ecef;
|
||||
}
|
||||
|
||||
#laudoTable thead th {
|
||||
padding: 12px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#laudoTable tbody td {
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
#laudoTable tbody tr:hover {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
#laudoTable tbody td button {
|
||||
padding: 6px 10px;
|
||||
font-size: 14px;
|
||||
background-color: #6c757d;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#laudoTable tbody td button:hover {
|
||||
background-color: #5a6268;
|
||||
}
|
||||
|
||||
/* Media queries melhoradas para responsividade */
|
||||
@media (max-width: 768px) {
|
||||
/* Melhor organização do conteúdo principal em mobile */
|
||||
.section-main-text {
|
||||
padding: 20px;
|
||||
padding-bottom: 0px;
|
||||
margin-top: 10rem;
|
||||
}
|
||||
|
||||
.section-main-text h1 {
|
||||
font-size: 28px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.section-main-text p {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.main-button {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.main-button button {
|
||||
margin-right: 0;
|
||||
margin-top: 5px;
|
||||
padding: 15px 8px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.conteudo {
|
||||
margin: 20px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* Formulário responsivo */
|
||||
#formLaudo {
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
#formLaudo fieldset {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#formLaudo button[type="submit"] {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* Tabela responsiva com scroll horizontal */
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
#laudoTable {
|
||||
min-width: 600px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#laudoTable thead th,
|
||||
#laudoTable tbody td {
|
||||
padding: 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
/* Media query para tablets */
|
||||
@media (max-width: 1024px) and (min-width: 769px) {
|
||||
.section-main-text h1 {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.conteudo {
|
||||
margin: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Media query melhorada para telas muito pequenas */
|
||||
@media (max-width: 480px) {
|
||||
.section-main-text {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.section-main-text h1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.section-main-text p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.conteudo {
|
||||
margin: 15px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
#laudoTable {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
#laudoTable thead th,
|
||||
#laudoTable tbody td {
|
||||
padding: 6px;
|
||||
}
|
||||
}
|
||||
53
Squad-21/clinicApp/pages/laudo/laudo.js
Normal file
53
Squad-21/clinicApp/pages/laudo/laudo.js
Normal file
@ -0,0 +1,53 @@
|
||||
const form = document.getElementById("formLaudo");
|
||||
const tbody = document.querySelector("#laudoTable tbody");
|
||||
const button = document.querySelectorAll(".button");
|
||||
|
||||
// Função para adicionar linha
|
||||
function adicionarLinhaNaTabela(item) {
|
||||
const tr = document.createElement("tr");
|
||||
tr.innerHTML = `
|
||||
<td>${item.pedido}</td>
|
||||
<td>${item.data}</td>
|
||||
<td>${item.prazo}</td>
|
||||
<td>${item.paciente}</td>
|
||||
<td>${item.solicitante}</td>
|
||||
<td>${item.classificacao}</td>
|
||||
<td><button>...</button></td>
|
||||
`;
|
||||
tbody.appendChild(tr);
|
||||
}
|
||||
|
||||
// Carregar dados salvos
|
||||
function carregarDadosSalvos() {
|
||||
const dados = JSON.parse(localStorage.getItem("laudos")) || [];
|
||||
dados.forEach(adicionarLinhaNaTabela);
|
||||
}
|
||||
|
||||
// Salvar novo item
|
||||
function salvarItem(item) {
|
||||
const dados = JSON.parse(localStorage.getItem("laudos")) || [];
|
||||
dados.push(item);
|
||||
localStorage.setItem("laudos", JSON.stringify(dados));
|
||||
}
|
||||
|
||||
// Evento de envio do formulário
|
||||
form.addEventListener("submit", (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const item = {
|
||||
pedido: document.getElementById("pedido").value,
|
||||
data: document.getElementById("data").value,
|
||||
prazo: document.getElementById("prazo").value,
|
||||
paciente: document.getElementById("paciente").value,
|
||||
solicitante: document.getElementById("solicitante").value,
|
||||
classificacao: document.getElementById("classificacao").value,
|
||||
acao: "...",
|
||||
};
|
||||
|
||||
adicionarLinhaNaTabela(item);
|
||||
salvarItem(item);
|
||||
form.reset();
|
||||
});
|
||||
|
||||
// Carregar ao abrir
|
||||
window.addEventListener("DOMContentLoaded", carregarDadosSalvos);
|
||||
121
Squad-21/clinicApp/pages/laudo/laudoMedico.html
Normal file
121
Squad-21/clinicApp/pages/laudo/laudoMedico.html
Normal file
@ -0,0 +1,121 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pt-BR">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Crud + Layout</title>
|
||||
<link rel="stylesheet" href="/Squad-21/clinicApp/global.css" />
|
||||
<link rel="stylesheet" href="./laudo.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main>
|
||||
<!-- Overlay só aparece em mobile quando menu está ativo -->
|
||||
<div class="overlay" id="overlay"></div>
|
||||
|
||||
<div class="flex">
|
||||
<!-- Botão hambúrguer só aparece em mobile -->
|
||||
<button class="hamburger-btn" id="hamburger-btn" aria-label="Abrir menu de navegação" aria-expanded="false">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
|
||||
<!-- Sidebar agora se comporta diferente em desktop vs mobile -->
|
||||
<section class="sidebar" id="sidebar" role="navigation" aria-label="Menu principal">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../pages/home/home.html" aria-label="Página inicial">
|
||||
<img src="https://images.vexels.com/media/users/3/142777/isolated/preview/84711206e52e0d4ff6c793cb476ea264-logotipo-medico-da-estrela-do-heartbeat.png"
|
||||
alt="Logo médico" id="logo-med" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../pages/pacientes/paciente.html" aria-label="Pacientes">
|
||||
<img src="../../assets/layoutIcons/icons8-estetoscópio-50.png" alt="Pacientes"
|
||||
class="icon-sidebar" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-label="Cadastro de usuários">
|
||||
<img src="../../assets/layoutIcons/icons8-grupo-de-usuário-homem-homem-50.png"
|
||||
alt="Cadastro" class="icon-sidebar" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../pages/laudo/laudoMedico.html" aria-label="Documentos">
|
||||
<img src="../../assets/layoutIcons/icons8-document.svg" alt="Documentos"
|
||||
class="icon-sidebar" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-label="Configurações">
|
||||
<img src="../../assets/layoutIcons/icons8-configurações.svg" alt="Configurações"
|
||||
class="icon-sidebar" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<!-- Seção principal sem padding-top desnecessário -->
|
||||
<section class="section-main">
|
||||
<nav class="nav" role="banner">
|
||||
<div class="div-search">
|
||||
<input type="text" class="search-input" placeholder="Buscar paciente"
|
||||
aria-label="Campo de busca" />
|
||||
<button class="search-button" aria-label="Buscar">
|
||||
<img src="../../assets/layoutIcons/icons8-pesquisar.svg" alt="Buscar" />
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<ul class="icon-lista">
|
||||
<li>
|
||||
<a href="#" aria-label="Ajuda"><img
|
||||
src="/clinicApp/assets/layoutIcons/icons8-ajuda-50.png" alt="Ajuda" /></a>
|
||||
</li>
|
||||
<li>
|
||||
<button aria-label="Notificações"><img
|
||||
src="/clinicApp/assets/layoutIcons/botao-ativar-notificacoes.png"
|
||||
alt="Notificações" /></button>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-label="Perfil do usuário"><img
|
||||
src="/clinicApp/assets/layoutIcons/icons8-usuário-50.png" alt="Usuário" /></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="section-main-text">
|
||||
<h1>Laudo Médico</h1>
|
||||
<p>Nesta seção você pode gerenciar todos os laudos gerados através da integração.</p>
|
||||
<!-- <div class="main-button">
|
||||
<button class="button main-button-border">A descrever</button>
|
||||
<button class="button main-button-border">Liberado</button>
|
||||
<button class="button main-button-border">Entregue</button>
|
||||
</div> -->
|
||||
<div id="editor" style="border:1px solid #ccc; padding:1rem; border-radius:8px;"></div>
|
||||
</div>
|
||||
<div class="conteudo">
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script src="laudo.js"></script>
|
||||
<script src="../../scriptGlobal.js"></script>
|
||||
<!-- TipTap Editor -->
|
||||
<script type="module">
|
||||
import { Editor } from 'https://esm.sh/@tiptap/core'
|
||||
import StarterKit from 'https://esm.sh/@tiptap/starter-kit'
|
||||
|
||||
const editor = new Editor({
|
||||
element: document.querySelector('#editor'),
|
||||
extensions: [StarterKit],
|
||||
content: '<p>Olá, mundo!</p>',
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
0
Squad-21/clinicApp/pages/login/login.css
Normal file
0
Squad-21/clinicApp/pages/login/login.css
Normal file
0
Squad-21/clinicApp/pages/login/login.html
Normal file
0
Squad-21/clinicApp/pages/login/login.html
Normal file
0
Squad-21/clinicApp/pages/login/login.js
Normal file
0
Squad-21/clinicApp/pages/login/login.js
Normal file
949
Squad-21/clinicApp/pages/pacientes/addPaciente/addPacient.css
Normal file
949
Squad-21/clinicApp/pages/pacientes/addPaciente/addPacient.css
Normal file
@ -0,0 +1,949 @@
|
||||
:root {
|
||||
--bg-main: #f3f0f0;
|
||||
--bg-nav: #fafafa;
|
||||
--bg-modal: #fff;
|
||||
--sombra-modal: 0 4px 15px rgba(0, 0, 0, 0.3);
|
||||
--sombra-sidebar: 15px 0px 15px rgba(0, 0, 0, 0.3);
|
||||
--cor-cinza-claro: #f1f1f1;
|
||||
--cor-cinza-medio: #ccc;
|
||||
--cor-cinza-escuro: #666;
|
||||
--cor-tabela-header: #f3f0f0;
|
||||
--cor-principal: rgb(38, 137, 255);
|
||||
--cor-hover-principal: rgb(30, 110, 204);
|
||||
--cor-borda-input-foco: #2e7d32;
|
||||
--cor-fundo-botao-salvar: #2e7d32;
|
||||
--cor-hover-salvar: #256628;
|
||||
}
|
||||
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
padding-top: 1.25rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 5vw;
|
||||
height: 100vh;
|
||||
background-color: white;
|
||||
box-shadow: var(--sombra-sidebar);
|
||||
}
|
||||
|
||||
.sidebar ul {
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sidebar ul li {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.icon-sidebar {
|
||||
width: 17px;
|
||||
padding: 10px 13px 5px 13px;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.icon-sidebar:hover {
|
||||
background-color: var(--cor-cinza-claro);
|
||||
}
|
||||
|
||||
.section-main {
|
||||
width: 95vw;
|
||||
background-color: var(--bg-main);
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: var(--bg-nav);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.div-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
transition: border 0.2s;
|
||||
}
|
||||
|
||||
.div-search:hover {
|
||||
border: 1.5px solid darkgray;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
height: 38px;
|
||||
width: 20vw;
|
||||
padding-left: 10px;
|
||||
border-radius: 5px;
|
||||
border: 1.5px solid var(--cor-cinza-medio);
|
||||
}
|
||||
|
||||
.search-button {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.icon-lista {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
gap: 30px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.icon-lista li a img,
|
||||
img {
|
||||
width: 22px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.btn-add,
|
||||
.btn {
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.btn-add {
|
||||
margin: 20px;
|
||||
background-color: var(--cor-principal);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-add:hover {
|
||||
background-color: var(--cor-hover-principal);
|
||||
}
|
||||
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: var(--bg-modal);
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
width: 800px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
box-shadow: var(--sombra-modal);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.modal-content h2 {
|
||||
margin-bottom: 15px;
|
||||
font-size: 20px;
|
||||
color: #333;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 15px;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
color: var(--cor-cinza-escuro);
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
margin-bottom: 4px;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group select {
|
||||
padding: 8px;
|
||||
height: 32px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--cor-cinza-medio);
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group select:focus {
|
||||
border-color: var(--cor-borda-input-foco);
|
||||
box-shadow: 0 0 5px rgba(46, 125, 50, 0.3);
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.form-check-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 5px;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
color: #444;
|
||||
min-width: unset;
|
||||
max-width: fit-content;
|
||||
|
||||
.modal-actions {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.btn-save {
|
||||
background: var(--cor-fundo-botao-salvar);
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
padding: 8px 15px;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
background: var(--cor-cinza-medio);
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
padding: 8px 15px;
|
||||
}
|
||||
|
||||
.btn-save:hover {
|
||||
background: var(--cor-hover-salvar);
|
||||
}
|
||||
|
||||
.btn-cancel:hover {
|
||||
background: #b3b3b3;
|
||||
}
|
||||
|
||||
.btn-edit,
|
||||
.btn-delete {
|
||||
padding: 5px 10px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
background-color: lightgrey;
|
||||
color: #000;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.btn-edit:hover,
|
||||
.btn-delete:hover {
|
||||
background-color: #d3d3d3;
|
||||
}
|
||||
|
||||
/* Tabela de pacientes */
|
||||
.paciente-table {
|
||||
width: 95%; /* Use a largura da tela disponível */
|
||||
margin: 20px auto;
|
||||
border-collapse: collapse;
|
||||
background-color: var(--bg-modal);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.paciente-table th,
|
||||
.paciente-table td {
|
||||
padding: 12px 15px; /* Aumentei o padding para dar mais espaço */
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #ddd;
|
||||
font-size: 15px; /* Ajustei o tamanho da fonte */
|
||||
white-space: nowrap; /* Impede que o texto quebre para a próxima linha */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis; /* Adiciona "..." se o texto for muito longo */
|
||||
}
|
||||
|
||||
.paciente-table th {
|
||||
background-color: var(--cor-tabela-header);
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
text-transform: uppercase; /* Transforma o texto do cabeçalho em maiúsculas */
|
||||
}
|
||||
|
||||
/* Deixa a tabela responsiva para dispositivos menores */
|
||||
@media (max-width: 768px) {
|
||||
.paciente-table {
|
||||
display: block;
|
||||
overflow-x: auto; /* Adiciona uma barra de rolagem horizontal */
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.paciente-table thead,
|
||||
.paciente-table tbody,
|
||||
.paciente-table th,
|
||||
.paciente-table td,
|
||||
.paciente-table tr {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.paciente-table tr {
|
||||
margin-bottom: 15px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.paciente-table td {
|
||||
border-bottom: 1px solid #eee;
|
||||
position: relative;
|
||||
padding-left: 50%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.paciente-table td::before {
|
||||
content: attr(data-label);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 50%;
|
||||
padding-left: 15px;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Container de formulário para a nova página - AGORA OCUPARÁ A LARGURA TOTAL */
|
||||
.full-page-form-container {
|
||||
width: 95%;
|
||||
margin: 20px auto;
|
||||
padding: 30px;
|
||||
background-color: var(--bg-modal);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Divisores de Seção (Endereço, etc) */
|
||||
.section-divider {
|
||||
font-size: 1.2em;
|
||||
font-weight: bold;
|
||||
color: #444;
|
||||
margin: 35px 0 20px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
/* Ajustes para a grade */
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 20px 30px;
|
||||
}
|
||||
|
||||
.form-grid .span-2 {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
/* Estilos de input e select uniformes */
|
||||
.form-group input,
|
||||
.form-group select {
|
||||
padding: 10px;
|
||||
height: 40px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--cor-cinza-medio);
|
||||
font-size: 16px;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group select:focus {
|
||||
border-color: var(--cor-borda-input-foco);
|
||||
box-shadow: 0 0 5px rgba(46, 125, 50, 0.3);
|
||||
}
|
||||
|
||||
/* Campos de largura total */
|
||||
.form-group.full-width {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
/* Estilo para a área de texto de Observações */
|
||||
textarea {
|
||||
resize: vertical;
|
||||
width: 100%;
|
||||
min-height: 100px;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--cor-cinza-medio);
|
||||
font-size: 16px;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
textarea:focus {
|
||||
border-color: var(--cor-borda-input-foco);
|
||||
box-shadow: 0 0 5px rgba(46, 125, 50, 0.3);
|
||||
}
|
||||
|
||||
/* Estilo para o campo de upload de arquivo */
|
||||
.form-group input[type="file"] {
|
||||
background-color: var(--cor-cinza-claro);
|
||||
border: 1px dashed var(--cor-cinza-medio);
|
||||
padding: 10px;
|
||||
height: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Outros estilos, como h2, labels, buttons etc., que já estão na sua folha de estilo */
|
||||
.form-card h2 {
|
||||
margin-bottom: 25px;
|
||||
font-size: 24px;
|
||||
color: #333;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
margin-bottom: 6px;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.form-actions .btn {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
padding: 12px 22px;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.form-actions .btn-save {
|
||||
background: var(--cor-fundo-botao-salvar);
|
||||
}
|
||||
|
||||
.form-actions .btn-cancel {
|
||||
background: #ccc;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.form-actions .btn-save:hover {
|
||||
background: #256628;
|
||||
}
|
||||
.form-actions .btn-cancel:hover {
|
||||
background: #b3b3b3;
|
||||
}
|
||||
|
||||
/* Estilos gerais do corpo para melhor visualização */
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #f0f2f5;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Container principal para centralizar o conteúdo */
|
||||
.flex {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Estilos para a seção principal, para ocupar o espaço restante */
|
||||
.section-main {
|
||||
flex-grow: 1; /* Ocupa todo o espaço restante */
|
||||
padding: 20px;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
/* Estilos para o botão de adicionar paciente */
|
||||
.btn-add {
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 20px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-add:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
/* Estilos da tabela de pacientes */
|
||||
.paciente-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.paciente-table th,
|
||||
.paciente-table td {
|
||||
padding: 12px 15px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.paciente-table thead th {
|
||||
background-color: #e9ecef;
|
||||
font-weight: bold;
|
||||
color: #495057;
|
||||
text-transform: uppercase;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Estilizando as linhas da tabela */
|
||||
.paciente-table tbody tr:hover {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
/* Estilos para os botões de ação na tabela */
|
||||
.btn-edit,
|
||||
.btn-delete {
|
||||
padding: 6px 10px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-edit {
|
||||
background-color: #28a745;
|
||||
}
|
||||
|
||||
.btn-edit:hover {
|
||||
background-color: #218838;
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
background-color: #dc3545;
|
||||
}
|
||||
|
||||
.btn-delete:hover {
|
||||
background-color: #c82333;
|
||||
}
|
||||
|
||||
/* Estilos para dispositivos móveis (responsividade) */
|
||||
@media (max-width: 768px) {
|
||||
.paciente-table,
|
||||
.paciente-table tbody,
|
||||
.paciente-table tr,
|
||||
.paciente-table td {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.paciente-table thead {
|
||||
display: none; /* Esconde o cabeçalho em telas pequenas */
|
||||
}
|
||||
|
||||
.paciente-table tr {
|
||||
margin-bottom: 15px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.paciente-table td {
|
||||
text-align: right;
|
||||
padding-left: 50%; /* Espaço para o rótulo */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.paciente-table td::before {
|
||||
content: attr(data-label);
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
width: 45%;
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
}
|
||||
}
|
||||
|
||||
/* Estilos Gerais para o Corpo da Página */
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #f0f2f5;
|
||||
}
|
||||
|
||||
/* Container Flex principal (sidebar + conteúdo) */
|
||||
.flex-container {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Estilo da Sidebar */
|
||||
.sidebar {
|
||||
width: 80px;
|
||||
background-color: #fff;
|
||||
padding: 10px 0;
|
||||
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sidebar ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sidebar li {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.sidebar a {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.sidebar a:hover {
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
|
||||
.sidebar img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#logo-med {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
/* Área de Conteúdo Principal (que contém o Header e o main-content) */
|
||||
.content-area {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Estilo do Header */
|
||||
.header {
|
||||
background-color: #fff;
|
||||
padding: 10px 20px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 20px;
|
||||
padding: 5px 10px;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.search-bar input {
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 5px;
|
||||
background-color: transparent;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.search-bar button {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.search-bar button img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.header-icons img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-left: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Estilos para o Conteúdo Principal (abaixo do header) */
|
||||
.main-content {
|
||||
flex-grow: 1;
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Estilos para o botão "Cadastrar Paciente" */
|
||||
.btn-add {
|
||||
display: inline-block;
|
||||
background-color: #007bff;
|
||||
color: #fff;
|
||||
padding: 10px 15px;
|
||||
border-radius: 5px;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-add:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
/* Estilos da Tabela */
|
||||
.table-container {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.paciente-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.paciente-table thead th {
|
||||
background-color: #f2f2f2;
|
||||
padding: 12px 15px;
|
||||
text-align: left;
|
||||
border-bottom: 2px solid #ddd;
|
||||
}
|
||||
|
||||
.paciente-table tbody td {
|
||||
padding: 10px 15px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.paciente-table tbody tr:hover {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 8px 12px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
margin-right: 5px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
/* As cores dos botões de ação foram mantidas como estavam na sua versão anterior */
|
||||
.btn-edit {
|
||||
background-color: #08c547;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-edit:hover {
|
||||
background-color: #087904;
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
background-color: #dc3545;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-delete:hover {
|
||||
background-color: #b31a29;
|
||||
}
|
||||
|
||||
/* Estilos para a página de cadastro */
|
||||
.section-cadastro {
|
||||
background-color: #fff;
|
||||
padding: 30px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
max-width: 600px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.section-cadastro h2 {
|
||||
text-align: center;
|
||||
color: #333;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.section-cadastro form label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.section-cadastro form input[type="text"],
|
||||
.section-cadastro form input[type="tel"] {
|
||||
width: calc(100% - 20px);
|
||||
padding: 10px;
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.section-cadastro form button {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
background-color: #28a745;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.section-cadastro form button:hover {
|
||||
background-color: #218838;
|
||||
}
|
||||
|
||||
.btn-back {
|
||||
display: inline-block;
|
||||
margin-bottom: 20px;
|
||||
color: #007bff;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.btn-back:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Media Queries para Responsividade */
|
||||
@media (max-width: 768px) {
|
||||
.sidebar {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.sidebar img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
#logo-med {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.header {
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
width: 90%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.header-icons {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.header-icons img {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.paciente-table thead {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.paciente-table tbody tr {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.paciente-table tbody td {
|
||||
display: block;
|
||||
text-align: right;
|
||||
padding-left: 50%;
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.paciente-table tbody td::before {
|
||||
content: attr(data-label);
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
width: 45%;
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
232
Squad-21/clinicApp/pages/pacientes/addPaciente/addPacient.html
Normal file
232
Squad-21/clinicApp/pages/pacientes/addPaciente/addPacient.html
Normal file
@ -0,0 +1,232 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pt-br">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Cadastro de Paciente</title>
|
||||
<link rel="stylesheet" href="addPacient.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/inputmask@5.0.9/dist/inputmask.min.js"></script>
|
||||
<script defer src="addPaciente.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main>
|
||||
<div class="flex">
|
||||
<section class="section-main">
|
||||
<nav class="nav">
|
||||
</nav>
|
||||
|
||||
<div class="full-page-form-container">
|
||||
<div class="form-card">
|
||||
<h2>Dados do Paciente</h2>
|
||||
<form id="cadastro-form">
|
||||
<div class="form-grid">
|
||||
<div class="form-group"><label for="nome">Nome *</label><input type="text" id="nome"
|
||||
required></div>
|
||||
<div class="form-group"><label for="nomeSocial">Nome Social</label><input type="text"
|
||||
id="nomeSocial"></div>
|
||||
<div class="form-group"><label for="cpf">CPF</label><input type="text" id="cpf" placeholder="000.000.000-00" required></div>
|
||||
<div class="form-group"><label for="rg">RG</label><input type="text" id="rg"></div>
|
||||
<div class="form-group">
|
||||
<label for="outrosDocs">Outros documentos de identidade</label>
|
||||
<select id="outrosDocs">
|
||||
<option value="">Selecione</option>
|
||||
<option value="Passaporte">Passaporte</option>
|
||||
<option value="CNH">CNH</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group"><label for="numDoc">Número do documento</label><input
|
||||
type="text" id="numDoc" placeholder="Número do documento"></div>
|
||||
<div class="form-group">
|
||||
<label for="sexo">Sexo</label>
|
||||
<select id="sexo" name="sexo">
|
||||
<option value="">Selecione</option>
|
||||
<option value="Masculino">Masculino</option>
|
||||
<option value="Feminino">Feminino</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group"><label for="dataNascimento">Data de Nascimento *</label><input
|
||||
type="date" id="dataNascimento" required></div>
|
||||
<div class="form-group">
|
||||
<label for="etnia">Etnia</label>
|
||||
<select id="etnia">
|
||||
<option value="">Selecione</option>
|
||||
<option value="branca">Branca</option>
|
||||
<option value="preta">Preta</option>
|
||||
<option value="parda">Parda</option>
|
||||
<option value="amarela">Amarela</option>
|
||||
<option value="indigena">Indígena</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="raca">Raça</label>
|
||||
<select id="raca">
|
||||
<option value="">Selecione</option>
|
||||
<option value="branca">Branca</option>
|
||||
<option value="preta">Preta</option>
|
||||
<option value="parda">Parda</option>
|
||||
<option value="amarela">Amarela</option>
|
||||
<option value="indigena">Indígena</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group"><label for="naturalidade">Naturalidade</label><input type="text"
|
||||
id="naturalidade"></div>
|
||||
<div class="form-group">
|
||||
<label for="nacionalidade">Nacionalidade</label>
|
||||
<input type="text"
|
||||
id="nacionalidade">
|
||||
</div>
|
||||
<div class="form-group"><label for="profissao">Profissão</label><input type="text"
|
||||
id="profissao"></div>
|
||||
<div class="form-group">
|
||||
<label for="estadoCivil">Estado Civil</label>
|
||||
<select id="estadoCivil">
|
||||
<option value="">Selecione</option>
|
||||
<option value="solteiro">Solteiro(a)</option>
|
||||
<option value="casado">Casado(a)</option>
|
||||
<option value="divorciado">Divorciado(a)</option>
|
||||
<option value="viuvo">Viúvo(a)</option>
|
||||
<option value="separado">Separado(a)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group"><label for="nomeMae">Nome da mãe</label><input type="text"
|
||||
id="nomeMae"></div>
|
||||
<div class="form-group"><label for="profissaoMae">Profissão da mãe</label><input
|
||||
type="text" id="profissaoMae"></div>
|
||||
<div class="form-group"><label for="nomePai">Nome do pai</label><input type="text"
|
||||
id="nomePai"></div>
|
||||
<div class="form-group"><label for="profissaoPai">Profissão do pai</label><input
|
||||
type="text" id="profissaoPai"></div>
|
||||
<div class="form-group"><label for="nomeResponsavel">Nome do responsável</label><input
|
||||
type="text" id="nomeResponsavel"></div>
|
||||
<div class="form-group"><label for="cpfResponsavel">CPF do responsável</label><input
|
||||
type="text" id="cpfResponsavel"></div>
|
||||
<div class="form-group"><label for="nomeEsposo">Nome do esposo(a)</label><input
|
||||
type="text" id="nomeEsposo"></div>
|
||||
</div>
|
||||
|
||||
<div class="section-divider">Endereço</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-group"><label for="cep">CEP</label><input type="text" id="cep"></div>
|
||||
<div class="form-group span-2"><label for="endereco">Endereço</label><input type="text"
|
||||
id="endereco"></div>
|
||||
<div class="form-group"><label for="numero">Número</label><input type="text"
|
||||
id="numero"></div>
|
||||
<div class="form-group"><label for="complemento">Complemento</label><input type="text"
|
||||
id="complemento"></div>
|
||||
<div class="form-group"><label for="bairro">Bairro</label><input type="text"
|
||||
id="bairro"></div>
|
||||
<div class="form-group"><label for="cidade">Cidade</label><input type="text"
|
||||
id="cidade"></div>
|
||||
<div class="form-group">
|
||||
<label for="estado">Estado
|
||||
<label>
|
||||
<select id="estado">
|
||||
<option value="">Selecione</option>
|
||||
<option value="AC">Acre</option>
|
||||
<option value="AL">Alagoas</option>
|
||||
<option value="AP">Amapá</option>
|
||||
<option value="AM">Amazonas</option>
|
||||
<option value="BA">Bahia</option>
|
||||
<option value="CE">Ceará</option>
|
||||
<option value="DF">Distrito Federal</option>
|
||||
<option value="ES">Espírito Santo</option>
|
||||
<option value="GO">Goiás</option>
|
||||
<option value="MA">Maranhão</option>
|
||||
<option value="MT">Mato Grosso</option>
|
||||
<option value="MS">Mato Grosso do Sul</option>
|
||||
<option value="MG">Minas Gerais</option>
|
||||
<option value="PA">Pará</option>
|
||||
<option value="PB">Paraíba</option>
|
||||
<option value="PR">Paraná</option>
|
||||
<option value="PE">Pernambuco</option>
|
||||
<option value="PI">Piauí</option>
|
||||
<option value="RJ">Rio de Janeiro</option>
|
||||
<option value="RN">Rio Grande do Norte</option>
|
||||
<option value="RS">Rio Grande do Sul</option>
|
||||
<option value="RO">Rondônia</option>
|
||||
<option value="RR">Roraima</option>
|
||||
<option value="SC">Santa Catarina</option>
|
||||
<option value="SP">São Paulo</option>
|
||||
<option value="SE">Sergipe</option>
|
||||
<option value="TO">Tocantins</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-divider">Contato</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-group"><label for="email">E-mail</label><input type="email" id="email">
|
||||
</div>
|
||||
<div class="form-group"><label for="celular">Celular</label><input type="text"
|
||||
id="celular" placeholder="(00) 00000-0000"></div>
|
||||
<div class="form-group"><label for="telefone1">Telefone</label><input type="text"
|
||||
id="telefone1" placeholder="(00) 0000-0000"></div>
|
||||
</div>
|
||||
|
||||
<div class="section-divider">Informações Médicas</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-group">
|
||||
<label for="tipoSanguineo">Tipo Sanguíneo</label>
|
||||
<select id="tipoSanguineo">
|
||||
<option value="">Selecione</option>
|
||||
<option value="A+">A+</option>
|
||||
<option value="A-">A-</option>
|
||||
<option value="B+">B+</option>
|
||||
<option value="B-">B-</option>
|
||||
<option value="AB+">AB+</option>
|
||||
<option value="AB-">AB-</option>
|
||||
<option value="O+">O+</option>
|
||||
<option value="O-">O-</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group"><label for="peso">Peso</label><input type="number" id="peso"
|
||||
placeholder="kg"></div>
|
||||
<div class="form-group"><label for="altura">Altura</label><input type="number"
|
||||
id="altura" placeholder="m"></div>
|
||||
<div class="form-group full-width"><label for="alergias">Alergias</label><input
|
||||
type="text" id="alergias" placeholder="Ex: AAS, Dipirona, etc"></div>
|
||||
</div>
|
||||
|
||||
<div class="section-divider">Informações de convênio</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-group">
|
||||
<label for="convenio">Convênio</label>
|
||||
<input type="text" id="convenio" name="convenio">
|
||||
</div>
|
||||
<div class="form-group"><label for="plano">Plano</label><input type="text" id="plano">
|
||||
</div>
|
||||
<div class="form-group"><label for="matricula">Nº de matrícula</label><input type="text"
|
||||
id="matricula"></div>
|
||||
<div class="form-group"><label for="validadeCarteira">Validade da Carteira</label><input
|
||||
type="date" id="validadeCarteira"></div>
|
||||
</div>
|
||||
<div class="form-check-group">
|
||||
<input type="checkbox" id="validadeIndeterminada">
|
||||
<label for="validadeIndeterminada">Validade Indeterminada</label>
|
||||
</div>
|
||||
|
||||
<div class="section-divider">Outras Informações</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-group"><label for="codigoLegado">Código legado</label><input
|
||||
type="text" id="codigoLegado"></div>
|
||||
<div class="form-group full-width"><label for="observacoes">Observações</label><textarea
|
||||
id="observacoes" rows="4"></textarea></div>
|
||||
<div class="form-group full-width"><label for="anexos">Anexos do paciente</label><input
|
||||
type="file" id="anexos"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-save">Salvar</button>
|
||||
<a href="../paciente.html" class="btn btn-cancel">Cancelar</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
151
Squad-21/clinicApp/pages/pacientes/addPaciente/addPaciente.js
Normal file
151
Squad-21/clinicApp/pages/pacientes/addPaciente/addPaciente.js
Normal file
@ -0,0 +1,151 @@
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const form = document.getElementById("cadastro-form");
|
||||
// Pega o ID do paciente da URL. Se não houver, 'editId' será null.
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const editId = urlParams.get("id");
|
||||
|
||||
function desativarFormulario() {
|
||||
// Desativa todos os inputs, selects e textareas
|
||||
form.querySelectorAll("input, select, textarea").forEach((el) => {
|
||||
el.disabled = true;
|
||||
});
|
||||
|
||||
// Remove o botão de submit
|
||||
const submitBtn = form.querySelector('[type="submit"]');
|
||||
if (submitBtn) {
|
||||
submitBtn.remove();
|
||||
}
|
||||
}
|
||||
|
||||
// Exemplo: se a URL tiver ?mode=detalhes
|
||||
if (window.location.search.includes("mode=detalhes")) {
|
||||
desativarFormulario();
|
||||
}
|
||||
|
||||
if (form) {
|
||||
// Carrega a lista de pacientes
|
||||
let pacientes = JSON.parse(localStorage.getItem("pacientes")) || [];
|
||||
let pacienteParaEditar = null;
|
||||
|
||||
// Se houver um ID de edição na URL, encontra o paciente correspondente
|
||||
if (editId) {
|
||||
pacienteParaEditar = pacientes.find((p) => p.id == editId);
|
||||
if (pacienteParaEditar) {
|
||||
// Preenche o formulário com os dados do paciente para edição
|
||||
document.getElementById("nome").value = pacienteParaEditar.nome;
|
||||
document.getElementById("celular").value = pacienteParaEditar.celular;
|
||||
document.getElementById("cidade").value = pacienteParaEditar.cidade;
|
||||
document.getElementById("estado").value = pacienteParaEditar.estado;
|
||||
document.getElementById("nomeSocial").value = pacienteParaEditar.nomeSocial;
|
||||
document.getElementById("cpf").value = pacienteParaEditar.cpf;
|
||||
document.getElementById("rg").value = pacienteParaEditar.rg;
|
||||
document.getElementById("outrosDocs").value = pacienteParaEditar.outrosDocs;
|
||||
document.getElementById("numDoc").value = pacienteParaEditar.numDoc;
|
||||
document.getElementById("sexo").value = pacienteParaEditar.sexo;
|
||||
document.getElementById("dataNascimento").value = pacienteParaEditar.dataNascimento;
|
||||
document.getElementById("etnia").value = pacienteParaEditar.etnia;
|
||||
document.getElementById("raca").value = pacienteParaEditar.raca;
|
||||
document.getElementById("nacionalidade").value = pacienteParaEditar.nacionalidade;
|
||||
document.getElementById("estadoCivil").value = pacienteParaEditar.estadoCivil;
|
||||
document.getElementById("nomeMae").value = pacienteParaEditar.nomeMae;
|
||||
document.getElementById("profissaoMae").value = pacienteParaEditar.profissaoMae;
|
||||
document.getElementById("nomePai").value = pacienteParaEditar.nomePai;
|
||||
document.getElementById("profissaoPai").value = pacienteParaEditar.profissaoPai;
|
||||
document.getElementById("nomeResponsavel").value = pacienteParaEditar.nomeResponsavel;
|
||||
document.getElementById("cpfResponsavel").value = pacienteParaEditar.cpfResponsavel;
|
||||
document.getElementById("nomeEsposo").value = pacienteParaEditar.nomeEsposo;
|
||||
document.getElementById("endereco").value = pacienteParaEditar.endereco;
|
||||
document.getElementById("numero").value = pacienteParaEditar.numero;
|
||||
document.getElementById("complemento").value = pacienteParaEditar.complemento;
|
||||
document.getElementById("bairro").value = pacienteParaEditar.bairro;
|
||||
document.getElementById("email").value = pacienteParaEditar.email;
|
||||
document.getElementById("telefone1").value = pacienteParaEditar.telefone1;
|
||||
document.getElementById("tipoSanguineo").value = pacienteParaEditar.tipoSanguineo;
|
||||
document.getElementById("peso").value = pacienteParaEditar.peso;
|
||||
document.getElementById("altura").value = pacienteParaEditar.altura;
|
||||
document.getElementById("alergias").value = pacienteParaEditar.alergias;
|
||||
document.getElementById("convenio").value = pacienteParaEditar.convenio;
|
||||
document.getElementById("plano").value = pacienteParaEditar.plano;
|
||||
document.getElementById("matricula").value = pacienteParaEditar.matricula;
|
||||
document.getElementById("validadeCarteira").value = pacienteParaEditar.validadeCarteira;
|
||||
document.getElementById("validadeIndeterminada").value = pacienteParaEditar.validadeIndeterminada;
|
||||
document.getElementById("codigoLegado").value = pacienteParaEditar.codigoLegado;
|
||||
document.getElementById("observacoes").value = pacienteParaEditar.observacoes;
|
||||
document.getElementById("anexos").value = pacienteParaEditar.anexos;
|
||||
}
|
||||
}
|
||||
|
||||
const cpf = document.getElementById("cpf");
|
||||
const telefone = document.getElementById("telefone1");
|
||||
const celular = document.getElementById("celular");
|
||||
|
||||
// Aplique as máscaras
|
||||
new Inputmask("999.999.999-99").mask(cpf);
|
||||
new Inputmask("(99) 99999-9999").mask(celular);
|
||||
new Inputmask("(99) 9999-9999").mask(telefone);
|
||||
|
||||
form.addEventListener("submit", (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
// Coletando os dados do formulário
|
||||
const pacienteNovoOuAtualizado = {
|
||||
nome: document.getElementById("nome").value,
|
||||
celular: document.getElementById("celular").value,
|
||||
cidade: document.getElementById("cidade").value,
|
||||
estado: document.getElementById("estado").value,
|
||||
nomeSocial: document.getElementById("nomeSocial").value,
|
||||
cpf: document.getElementById("cpf").value.replace(/[.\-]/g, ""),
|
||||
rg: document.getElementById("rg").value,
|
||||
outrosDocs: document.getElementById("outrosDocs").value,
|
||||
numDoc: document.getElementById("numDoc").value,
|
||||
sexo: document.getElementById("sexo").value,
|
||||
dataNascimento: document.getElementById("dataNascimento").value,
|
||||
etnia: document.getElementById("etnia").value,
|
||||
raca: document.getElementById("raca").value,
|
||||
nacionalidade: document.getElementById("nacionalidade").value,
|
||||
estadoCivil: document.getElementById("estadoCivil").value,
|
||||
nomeMae: document.getElementById("nomeMae").value,
|
||||
profissaoMae: document.getElementById("profissaoMae").value,
|
||||
nomePai: document.getElementById("nomePai").value,
|
||||
profissaoPai: document.getElementById("profissaoPai").value,
|
||||
nomeResponsavel: document.getElementById("nomeResponsavel").value,
|
||||
cpfResponsavel: document.getElementById("cpfResponsavel").value,
|
||||
nomeEsposo: document.getElementById("nomeEsposo").value,
|
||||
endereco: document.getElementById("endereco").value,
|
||||
numero: document.getElementById("numero").value,
|
||||
complemento: document.getElementById("complemento").value,
|
||||
bairro: document.getElementById("bairro").value,
|
||||
email: document.getElementById("email").value,
|
||||
celular: document.getElementById("celular").value,
|
||||
telefone1: document.getElementById("telefone1").value,
|
||||
tipoSanguineo: document.getElementById("tipoSanguineo").value,
|
||||
peso: document.getElementById("peso").value,
|
||||
altura: document.getElementById("altura").value,
|
||||
alergias: document.getElementById("alergias").value,
|
||||
convenio: document.getElementById("convenio").value,
|
||||
plano: document.getElementById("plano").value,
|
||||
matricula: document.getElementById("matricula").value,
|
||||
validadeCarteira: document.getElementById("validadeCarteira").value,
|
||||
validadeIndeterminada: document.getElementById("validadeIndeterminada").value,
|
||||
codigoLegado: document.getElementById("codigoLegado").value,
|
||||
observacoes: document.getElementById("observacoes").value,
|
||||
anexos: document.getElementById("anexos").value,
|
||||
};
|
||||
|
||||
if (pacienteParaEditar) {
|
||||
// Se for um paciente para editar, atualiza os dados dele
|
||||
Object.assign(pacienteParaEditar, pacienteNovoOuAtualizado);
|
||||
} else {
|
||||
// Se for um novo paciente, cria um ID único e o adiciona à lista
|
||||
pacienteNovoOuAtualizado.id = Date.now();
|
||||
pacientes.push(pacienteNovoOuAtualizado);
|
||||
}
|
||||
|
||||
// Salva a lista atualizada de volta no localStorage
|
||||
localStorage.setItem("pacientes", JSON.stringify(pacientes));
|
||||
|
||||
// Redireciona para a página de listagem
|
||||
window.location.href = "../paciente.html";
|
||||
});
|
||||
}
|
||||
});
|
||||
211
Squad-21/clinicApp/pages/pacientes/paciente.css
Normal file
211
Squad-21/clinicApp/pages/pacientes/paciente.css
Normal file
@ -0,0 +1,211 @@
|
||||
.main-button button {
|
||||
font-size: 17px;
|
||||
background: none;
|
||||
margin-right: 30px;
|
||||
margin-top: 10px;
|
||||
border: none;
|
||||
color: #243b51;
|
||||
padding: 20px 10px;
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: 0.6s;
|
||||
}
|
||||
|
||||
.main-button-border:hover {
|
||||
/*estilo no mouseenter*/
|
||||
border: none;
|
||||
margin-right: 30px;
|
||||
margin-top: 10px;
|
||||
padding: 20px 10px;
|
||||
background: none;
|
||||
border-bottom: 2px solid blue;
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.btn-add {
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
margin: 20px 0px;
|
||||
background-color: rgb(38, 137, 255);
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-add:hover {
|
||||
background-color: rgb(30, 110, 204);
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
padding: 8px;
|
||||
margin-left: 8px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
background-color: white;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.conteudo {
|
||||
margin-left: 30px;
|
||||
background-color: #fafafa;
|
||||
padding: 25px;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
/* Tabela */
|
||||
#pacientes-tabela {
|
||||
margin-top: 1.5rem;
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
border: 1px solid #ddd;
|
||||
background-color: white;
|
||||
font-size: 14px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#pacientes-tabela thead {
|
||||
background-color: #e9ecef;
|
||||
}
|
||||
|
||||
#pacientes-tabela thead th {
|
||||
padding: 12px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#pacientes-tabela tbody td {
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
#pacientes-tabela tbody tr:hover {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
#pacientes-tabela tbody td button {
|
||||
padding: 6px 10px;
|
||||
font-size: 14px;
|
||||
background-color: #6c757d;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#pacientes-tabela tbody td button:hover {
|
||||
background-color: #5a6268;
|
||||
}
|
||||
|
||||
/* Media queries melhoradas para responsividade */
|
||||
@media (max-width: 768px) {
|
||||
/* Melhor organização do conteúdo principal em mobile */
|
||||
.section-main-text {
|
||||
padding: 20px;
|
||||
padding-bottom: 0px;
|
||||
margin-top: 10rem;
|
||||
}
|
||||
|
||||
.section-main-text h1 {
|
||||
font-size: 28px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.section-main-text p {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.main-button {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.main-button button {
|
||||
margin-right: 0;
|
||||
margin-top: 5px;
|
||||
padding: 15px 8px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.conteudo {
|
||||
margin: 20px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* Formulário responsivo */
|
||||
#formLaudo {
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
#formLaudo fieldset {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#formLaudo button[type="submit"] {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* Tabela responsiva com scroll horizontal */
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
#pacientes-tabela {
|
||||
min-width: 600px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#pacientes-tabela thead th,
|
||||
#pacientes-tabela tbody td {
|
||||
padding: 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
/* Media query para tablets */
|
||||
@media (max-width: 1024px) and (min-width: 769px) {
|
||||
.section-main-text h1 {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.conteudo {
|
||||
margin: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Media query melhorada para telas muito pequenas */
|
||||
@media (max-width: 480px) {
|
||||
.section-main-text {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.section-main-text h1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.section-main-text p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.conteudo {
|
||||
margin: 15px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
#pacientes-tabela {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
#pacientes-tabela thead th,
|
||||
#pacientes-tabela tbody td {
|
||||
padding: 6px;
|
||||
}
|
||||
}
|
||||
141
Squad-21/clinicApp/pages/pacientes/paciente.html
Normal file
141
Squad-21/clinicApp/pages/pacientes/paciente.html
Normal file
@ -0,0 +1,141 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pt-BR">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Crud + Layout</title>
|
||||
<link rel="stylesheet" href="../../global.css" />
|
||||
<!-- css da página -->
|
||||
<link rel="stylesheet" href="paciente.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main>
|
||||
<!-- Overlay só aparece em mobile quando menu está ativo -->
|
||||
<div class="overlay" id="overlay"></div>
|
||||
|
||||
<div class="flex">
|
||||
<!-- Botão hambúrguer só aparece em mobile -->
|
||||
<button class="hamburger-btn" id="hamburger-btn" aria-label="Abrir menu de navegação" aria-expanded="false">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
|
||||
<!-- Sidebar agora se comporta diferente em desktop vs mobile -->
|
||||
<section class="sidebar" id="sidebar" role="navigation" aria-label="Menu principal">
|
||||
<div class="div-sidebar">
|
||||
<div class="abas">
|
||||
<div class="logo1">
|
||||
<a href="#" aria-label="Página inicial">
|
||||
<img src="https://images.vexels.com/media/users/3/142777/isolated/preview/84711206e52e0d4ff6c793cb476ea264-logotipo-medico-da-estrela-do-heartbeat.png" alt="Logo médico" id="logo-med" />
|
||||
</a>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#" aria-label="Pacientes">
|
||||
<img src="../../assets/layoutIcons/icons8-estetoscópio-50.png" alt="Pacientes" class="icon-sidebar" />
|
||||
<p>Pacientes</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-label="Pacientes">
|
||||
<img src="../../assets/layoutIcons/icons8-estetoscópio-50.png" alt="Pacientes" class="icon-sidebar" />
|
||||
<p>Dashboard</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-label="Cadastro de usuários">
|
||||
<img src="../../assets/layoutIcons/icons8-grupo-de-usuário-homem-homem-50.png" alt="Cadastro" class="icon-sidebar" />
|
||||
<p>Médicos</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../pages/laudo/laudoMedico.html" aria-label="Documentos">
|
||||
<img src="../../assets/layoutIcons/icons8-document.svg" alt="Documentos" class="icon-sidebar" />
|
||||
<p>Laúdos</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-label="Documentos">
|
||||
<img src="../../assets/layoutIcons/icons8-document.svg" alt="Documentos" class="icon-sidebar" />
|
||||
<p>Agenda</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-label="Configurações">
|
||||
<img src="../../assets/layoutIcons/icons8-configurações.svg" alt="Configurações" class="icon-sidebar" />
|
||||
<p>Settings</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="perfil-medico-sidebar">
|
||||
<h3>Dr. Rafael Andrade</h3>
|
||||
<p>Núcleo de Especialidades</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section-main">
|
||||
<nav class="nav" role="banner">
|
||||
<div class="div-search">
|
||||
<input type="text" id="search-input" class="search-input" placeholder="Buscar paciente" aria-label="Campo de busca" />
|
||||
<select id="filter-type" class="filter-select" aria-label="Selecionar filtro">
|
||||
<option value="geral">Geral</option>
|
||||
<option value="nome">Nome</option>
|
||||
<option value="celular">Telefone</option>
|
||||
<option value="cidade">Cidade</option>
|
||||
<option value="estado">Estado</option>
|
||||
<option value="convenio">Convênio</option>
|
||||
<option value="cpf">CPF</option>
|
||||
</select>
|
||||
<button id="search-button" class="search-button" aria-label="Buscar">
|
||||
<img src="../../assets/layoutIcons/icons8-pesquisar.svg" alt="Buscar" />
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<ul class="icon-lista">
|
||||
<li>
|
||||
<a href="#" aria-label="Ajuda"><img src="../../assets/layoutIcons/icons8-ajuda-50.png" alt="Ajuda" /></a>
|
||||
</li>
|
||||
<li>
|
||||
<button id="music" aria-label="Notificações"><img src="../../assets/layoutIcons/botao-ativar-notificacoes.png" alt="Notificações" /></button>
|
||||
</li>
|
||||
<!--button ta gerando um fundo branco, botei ID pra retirar o background-->
|
||||
<li>
|
||||
<a href="#" aria-label="Perfil do usuário"><img src="../../assets/layoutIcons/icons8-usuário-50.png" alt="Usuário" /></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="conteudo">
|
||||
<h1>Gerenciamento de Pacientes</h1>
|
||||
<br /><br />
|
||||
<a href="addPaciente/addPacient.html" id="btn-add" class="btn-add"> + Cadastrar Paciente </a>
|
||||
|
||||
<!-- Container para scroll horizontal da tabela -->
|
||||
<div class="table-container">
|
||||
<table id="pacientes-tabela">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nome</th>
|
||||
<th>Telefone</th>
|
||||
<th>Cidade</th>
|
||||
<th>Estado</th>
|
||||
<th>Ação</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script src="/Squad-21/clinicApp/scriptGlobal.js"></script>
|
||||
<script src="./paciente.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
142
Squad-21/clinicApp/pages/pacientes/paciente.js
Normal file
142
Squad-21/clinicApp/pages/pacientes/paciente.js
Normal file
@ -0,0 +1,142 @@
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const tabelaPacientes = document.getElementById("pacientes-tabela");
|
||||
let pacientes = JSON.parse(localStorage.getItem("pacientes")) || [];
|
||||
|
||||
const atualizarLista = () => {
|
||||
if (!tabelaPacientes) return;
|
||||
const tbody = tabelaPacientes.querySelector("tbody");
|
||||
tbody.innerHTML = "";
|
||||
|
||||
pacientes.forEach((paciente, index) => {
|
||||
const row = document.createElement("tr");
|
||||
row.innerHTML = `
|
||||
<td data-label="Nome">${paciente.nome}</td>
|
||||
<td data-label="Telefone ou Celular">${paciente.celular || "-"}</td>
|
||||
<td data-label="Cidade">${paciente.cidade || "-"}</td>
|
||||
<td data-label="Estado">${paciente.estado || "-"}</td>
|
||||
<td data-label="Ações">
|
||||
<button class="btn btn-edit" data-id="${paciente.id}">Editar</button>
|
||||
<button class="btn btn-delete" data-index="${index}">Excluir</button>
|
||||
<button class="btn btn-detail" data-id="${paciente.id}">Detalhes</button>
|
||||
</td>
|
||||
`;
|
||||
tbody.appendChild(row);
|
||||
});
|
||||
|
||||
// Adiciona event listeners para os botões "Editar"
|
||||
document.querySelectorAll(".btn-edit").forEach((btn) => {
|
||||
btn.addEventListener("click", (e) => {
|
||||
const id = e.target.dataset.id;
|
||||
window.location.href = `addPaciente/addPacient.html?id=${id}`;
|
||||
});
|
||||
});
|
||||
|
||||
// Adiciona event listeners para os botões "Excluir"
|
||||
document.querySelectorAll(".btn-delete").forEach((btn) => {
|
||||
btn.addEventListener("click", (e) => {
|
||||
const index = e.target.dataset.index;
|
||||
if (confirm("Tem certeza que deseja excluir este paciente?")) {
|
||||
pacientes.splice(index, 1);
|
||||
localStorage.setItem("pacientes", JSON.stringify(pacientes));
|
||||
atualizarLista();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll(".btn-detail").forEach((btn) => {
|
||||
btn.addEventListener("click", (e) => {
|
||||
const id = e.target.dataset.id;
|
||||
window.location.href = `addPaciente/addPacient.html?mode=detalhes&id=${id}`;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
atualizarLista();
|
||||
});
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const tabelaPacientes = document.getElementById("pacientes-tabela");
|
||||
const searchInput = document.getElementById("search-input");
|
||||
const filterType = document.getElementById("filter-type");
|
||||
const searchButton = document.getElementById("search-button");
|
||||
|
||||
let pacientes = JSON.parse(localStorage.getItem("pacientes")) || [];
|
||||
|
||||
const atualizarLista = (filtro = "", tipo = "geral") => {
|
||||
if (!tabelaPacientes) return;
|
||||
const tbody = tabelaPacientes.querySelector("tbody");
|
||||
tbody.innerHTML = "";
|
||||
|
||||
pacientes
|
||||
.filter((paciente) => {
|
||||
if (!filtro) return true;
|
||||
|
||||
const termo = filtro.toLowerCase();
|
||||
|
||||
if (tipo === "geral") {
|
||||
// Busca em todos os campos
|
||||
return (paciente.nome || "").toLowerCase().includes(termo) || (paciente.celular || "").toLowerCase().includes(termo) || (paciente.cidade || "").toLowerCase().includes(termo) || (paciente.estado || "").toLowerCase().includes(termo) || (paciente.convenio || "").toLowerCase().includes(termo) || (paciente.cpf || "").toLowerCase().includes(termo);
|
||||
} else {
|
||||
// Busca apenas no campo escolhido
|
||||
const valorCampo = (paciente[tipo] || "").toString().toLowerCase();
|
||||
return valorCampo.includes(termo);
|
||||
}
|
||||
})
|
||||
.forEach((paciente, index) => {
|
||||
const row = document.createElement("tr");
|
||||
row.innerHTML = `
|
||||
<td data-label="Nome">${paciente.nome}</td>
|
||||
<td data-label="Telefone ou Celular">${paciente.celular || "-"}</td>
|
||||
<td data-label="Cidade">${paciente.cidade || "-"}</td>
|
||||
<td data-label="Estado">${paciente.estado || "-"}</td>
|
||||
<td data-label="Ações">
|
||||
<button class="btn btn-edit" data-id="${paciente.id}">Editar</button>
|
||||
<button class="btn btn-delete" data-index="${index}">Excluir</button>
|
||||
<button class="btn btn-detail" data-id="${paciente.id}">Detalhes</button>
|
||||
</td>
|
||||
`;
|
||||
tbody.appendChild(row);
|
||||
});
|
||||
|
||||
// Botões Editar
|
||||
document.querySelectorAll(".btn-edit").forEach((btn) => {
|
||||
btn.addEventListener("click", (e) => {
|
||||
const id = e.target.dataset.id;
|
||||
window.location.href = `addPaciente/addPacient.html?id=${id}`;
|
||||
});
|
||||
});
|
||||
|
||||
// Botões Excluir
|
||||
document.querySelectorAll(".btn-delete").forEach((btn) => {
|
||||
btn.addEventListener("click", (e) => {
|
||||
const index = e.target.dataset.index;
|
||||
if (confirm("Tem certeza que deseja excluir este paciente?")) {
|
||||
pacientes.splice(index, 1);
|
||||
localStorage.setItem("pacientes", JSON.stringify(pacientes));
|
||||
atualizarLista();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll(".btn-detail").forEach((btn) => {
|
||||
btn.addEventListener("click", (e) => {
|
||||
const id = e.target.dataset.id;
|
||||
window.location.href = `addPaciente/addPacient.html?mode=detalhes&id=${id}`;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// Clique no botão de busca
|
||||
searchButton.addEventListener("click", () => {
|
||||
atualizarLista(searchInput.value, filterType.value);
|
||||
});
|
||||
|
||||
// Enter no campo de busca
|
||||
searchInput.addEventListener("keyup", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
atualizarLista(searchInput.value, filterType.value);
|
||||
}
|
||||
});
|
||||
|
||||
atualizarLista();
|
||||
});
|
||||
58
Squad-21/clinicApp/scriptGlobal.js
Normal file
58
Squad-21/clinicApp/scriptGlobal.js
Normal file
@ -0,0 +1,58 @@
|
||||
const hamburgerBtn = document.getElementById("hamburger-btn");
|
||||
const sidebar = document.getElementById("sidebar");
|
||||
const overlay = document.getElementById("overlay");
|
||||
|
||||
function toggleMenu() {
|
||||
const isActive = sidebar.classList.contains("active");
|
||||
|
||||
if (isActive) {
|
||||
closeMenu();
|
||||
} else {
|
||||
openMenu();
|
||||
}
|
||||
}
|
||||
|
||||
function openMenu() {
|
||||
sidebar.classList.add("active");
|
||||
hamburgerBtn.classList.add("active");
|
||||
overlay.classList.add("active");
|
||||
hamburgerBtn.setAttribute("aria-expanded", "true");
|
||||
hamburgerBtn.setAttribute("aria-label", "Fechar menu de navegação");
|
||||
|
||||
// Previne scroll do body quando menu está aberto
|
||||
document.body.style.overflow = "hidden";
|
||||
}
|
||||
|
||||
function closeMenu() {
|
||||
sidebar.classList.remove("active");
|
||||
hamburgerBtn.classList.remove("active");
|
||||
overlay.classList.remove("active");
|
||||
hamburgerBtn.setAttribute("aria-expanded", "false");
|
||||
hamburgerBtn.setAttribute("aria-label", "Abrir menu de navegação");
|
||||
|
||||
// Restaura scroll do body
|
||||
document.body.style.overflow = "";
|
||||
}
|
||||
|
||||
// Event listeners para o menu hambúrguer
|
||||
hamburgerBtn.addEventListener("click", toggleMenu);
|
||||
overlay.addEventListener("click", closeMenu);
|
||||
|
||||
document.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Escape" && sidebar.classList.contains("active")) {
|
||||
closeMenu();
|
||||
}
|
||||
});
|
||||
|
||||
sidebar.addEventListener("click", (e) => {
|
||||
if (e.target.tagName === "A" && window.innerWidth <= 768) {
|
||||
closeMenu();
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener("resize", () => {
|
||||
if (window.innerWidth > 768 && sidebar.classList.contains("active")) {
|
||||
closeMenu();
|
||||
}
|
||||
});
|
||||
|
||||
BIN
clinicApp/assets/layoutIcons/botao-ativar-notificacoes.png
Normal file
BIN
clinicApp/assets/layoutIcons/botao-ativar-notificacoes.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
BIN
clinicApp/assets/layoutIcons/icons8-ajuda-50.png
Normal file
BIN
clinicApp/assets/layoutIcons/icons8-ajuda-50.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 828 B |
1
clinicApp/assets/layoutIcons/icons8-configurações.svg
Normal file
1
clinicApp/assets/layoutIcons/icons8-configurações.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50px" height="50px"> <path d="M47.16,21.221l-5.91-0.966c-0.346-1.186-0.819-2.326-1.411-3.405l3.45-4.917c0.279-0.397,0.231-0.938-0.112-1.282 l-3.889-3.887c-0.347-0.346-0.893-0.391-1.291-0.104l-4.843,3.481c-1.089-0.602-2.239-1.08-3.432-1.427l-1.031-5.886 C28.607,2.35,28.192,2,27.706,2h-5.5c-0.49,0-0.908,0.355-0.987,0.839l-0.956,5.854c-1.2,0.345-2.352,0.818-3.437,1.412l-4.83-3.45 c-0.399-0.285-0.942-0.239-1.289,0.106L6.82,10.648c-0.343,0.343-0.391,0.883-0.112,1.28l3.399,4.863 c-0.605,1.095-1.087,2.254-1.438,3.46l-5.831,0.971c-0.482,0.08-0.836,0.498-0.836,0.986v5.5c0,0.485,0.348,0.9,0.825,0.985 l5.831,1.034c0.349,1.203,0.831,2.362,1.438,3.46l-3.441,4.813c-0.284,0.397-0.239,0.942,0.106,1.289l3.888,3.891 c0.343,0.343,0.884,0.391,1.281,0.112l4.87-3.411c1.093,0.601,2.248,1.078,3.445,1.424l0.976,5.861C21.3,47.647,21.717,48,22.206,48 h5.5c0.485,0,0.9-0.348,0.984-0.825l1.045-5.89c1.199-0.353,2.348-0.833,3.43-1.435l4.905,3.441 c0.398,0.281,0.938,0.232,1.282-0.111l3.888-3.891c0.346-0.347,0.391-0.894,0.104-1.292l-3.498-4.857 c0.593-1.08,1.064-2.222,1.407-3.408l5.918-1.039c0.479-0.084,0.827-0.5,0.827-0.985v-5.5C47.999,21.718,47.644,21.3,47.16,21.221z M25,32c-3.866,0-7-3.134-7-7c0-3.866,3.134-7,7-7s7,3.134,7,7C32,28.866,28.866,32,25,32z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
1
clinicApp/assets/layoutIcons/icons8-document.svg
Normal file
1
clinicApp/assets/layoutIcons/icons8-document.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50px" height="50px"><path d="M 30.398438 2 L 7 2 L 7 48 L 43 48 L 43 14.601563 Z M 15 28 L 31 28 L 31 30 L 15 30 Z M 35 36 L 15 36 L 15 34 L 35 34 Z M 35 24 L 15 24 L 15 22 L 35 22 Z M 30 15 L 30 4.398438 L 40.601563 15 Z"/></svg>
|
||||
|
After Width: | Height: | Size: 298 B |
BIN
clinicApp/assets/layoutIcons/icons8-estetoscópio-50.png
Normal file
BIN
clinicApp/assets/layoutIcons/icons8-estetoscópio-50.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1008 B |
Binary file not shown.
|
After Width: | Height: | Size: 848 B |
1
clinicApp/assets/layoutIcons/icons8-pesquisar.svg
Normal file
1
clinicApp/assets/layoutIcons/icons8-pesquisar.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50px" height="50px"><path d="M 21 3 C 11.601563 3 4 10.601563 4 20 C 4 29.398438 11.601563 37 21 37 C 24.355469 37 27.460938 36.015625 30.09375 34.34375 L 42.375 46.625 L 46.625 42.375 L 34.5 30.28125 C 36.679688 27.421875 38 23.878906 38 20 C 38 10.601563 30.398438 3 21 3 Z M 21 7 C 28.199219 7 34 12.800781 34 20 C 34 27.199219 28.199219 33 21 33 C 13.800781 33 8 27.199219 8 20 C 8 12.800781 13.800781 7 21 7 Z"/></svg>
|
||||
|
After Width: | Height: | Size: 491 B |
BIN
clinicApp/assets/layoutIcons/icons8-usuário-50.png
Normal file
BIN
clinicApp/assets/layoutIcons/icons8-usuário-50.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 516 B |
6312
clinicApp/assets/script/bootstrap.bundle.js
vendored
Normal file
6312
clinicApp/assets/script/bootstrap.bundle.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
12048
clinicApp/assets/style/bootstrap.css
vendored
Normal file
12048
clinicApp/assets/style/bootstrap.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
444
clinicApp/global.css
Normal file
444
clinicApp/global.css
Normal file
@ -0,0 +1,444 @@
|
||||
|
||||
/* --- Estilos Gerais e Reset --- */
|
||||
* {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
border: none;
|
||||
box-sizing: border-box; /* Essencial para um bom layout */
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
background-color: #f3f0f0;
|
||||
}
|
||||
|
||||
/* --- Estilos do Header/Navegação (mantido e levemente ajustado) --- */
|
||||
.nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: #eaeaea;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
BARRA DE BUSCA
|
||||
========================================================================== */
|
||||
|
||||
.div-search {
|
||||
display: flex; /* Essencial para que a propriedade 'order' funcione */
|
||||
align-items: center;
|
||||
border: 1.5px solid #ccc;
|
||||
border-radius: 6px;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Efeito de foco no contêiner inteiro */
|
||||
.div-search:focus-within {
|
||||
border-color: rgb(44, 185, 228);
|
||||
box-shadow: 0 0 0 2px rgba(44, 185, 228, 0.2);
|
||||
}
|
||||
|
||||
/* --- 2. Reordenando os Itens Visualmente --- */
|
||||
.search-input { order: 1; } /* Primeiro item */
|
||||
.search-button { order: 2; } /* Segundo item (a lupa) */
|
||||
.filter-select { order: 3; } /* Terceiro e último item (Geral) */
|
||||
|
||||
/* --- 3. Estilo dos Itens Individuais na Nova Ordem --- */
|
||||
|
||||
/* Campo "Buscar paciente" */
|
||||
.search-input {
|
||||
height: 38px;
|
||||
flex-grow: 1; /* Ocupa o máximo de espaço */
|
||||
padding: 0 12px;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 14px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Botão da Lupa */
|
||||
.search-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 38px;
|
||||
padding: 0 12px;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
border: none; /* Sem borda, para se juntar ao input */
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.search-button img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* Seletor "Geral" */
|
||||
.filter-select {
|
||||
height: 38px;
|
||||
padding: 0 12px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-left: 1.5px solid #ccc; /* A única linha divisória */
|
||||
color: #555;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
ÍCONES DO CABEÇALHO - ESTILO APRIMORADO
|
||||
========================================================================== */
|
||||
|
||||
/* --- 1. O contêiner da lista de ícones --- */
|
||||
.icon-lista {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
gap: 7px; /* Reduzi um pouco o espaço para ficar mais coeso */
|
||||
align-items: center; /* Alinha todos os ícones verticalmente */
|
||||
}
|
||||
|
||||
/* --- 2. PADRONIZAÇÃO dos links (a) e botões (button) --- */
|
||||
.icon-lista li a,
|
||||
.icon-lista li button {
|
||||
display: flex; /* Garante que o contêiner se ajuste à imagem */
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: none; /* Remove qualquer fundo padrão */
|
||||
border: none; /* Remove qualquer borda padrão */
|
||||
padding: 0; /* Remove qualquer padding padrão */
|
||||
cursor: pointer;
|
||||
opacity: 0.7; /* Deixa os ícones um pouco mais suaves */
|
||||
transition: opacity 0.2s ease, transform 0.2s ease; /* Animação suave */
|
||||
}
|
||||
|
||||
/* --- 3. EFEITO HOVER para dar feedback ao usuário --- */
|
||||
.icon-lista li a:hover,
|
||||
.icon-lista li button:hover {
|
||||
opacity: 1; /* Opacidade total no hover */
|
||||
transform: scale(1.1); /* Leve aumento de tamanho */
|
||||
}
|
||||
|
||||
/* --- 4. O TAMANHO REAL da imagem do ícone --- */
|
||||
.icon-lista li img {
|
||||
width: 18px; /* << AUMENTADO O TAMANHO AQUI */
|
||||
height: 18px; /* << AUMENTADO O TAMANHO AQUI */
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* A regra #music não é mais necessária, pois já foi padronizada acima */
|
||||
|
||||
#music {
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
SIDEBAR E LAYOUT PRINCIPAL - REVISÃO FINAL
|
||||
========================================================================== */
|
||||
|
||||
/* --- Container principal da sidebar para flexbox --- */
|
||||
.div-sidebar {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between; /* Este é crucial para empurrar o perfil para baixo */
|
||||
align-items: center; /* Centraliza o conteúdo da sidebar se ela for estreita */
|
||||
width: 100%; /* Garante que div-sidebar ocupe a largura total de .sidebar */
|
||||
}
|
||||
|
||||
/* --- Estilos de Base da Sidebar --- */
|
||||
.sidebar {
|
||||
background-color: #ffffff;
|
||||
box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
transition: width 0.3s ease, transform 0.3s ease;
|
||||
}
|
||||
|
||||
/* --- Logo na Sidebar --- */
|
||||
.logo1 {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 1.5rem 0; /* Espaçamento vertical generoso */
|
||||
border-bottom: 1px solid #eee; /* Linha divisória */
|
||||
}
|
||||
|
||||
#logo-med {
|
||||
width: 80px; /* << MAIOR AINDA! */
|
||||
height: auto;
|
||||
transition: transform 0.3s ease, filter 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#logo-med:hover {
|
||||
transform: scale(1.1);
|
||||
filter: drop-shadow(0 0 10px rgba(44, 185, 228, 0.7)); /* Destaque mais forte */
|
||||
}
|
||||
|
||||
/* --- Itens de Navegação --- */
|
||||
.sidebar ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%; /* Garante que a lista preencha a largura disponível */
|
||||
}
|
||||
|
||||
.sidebar li {
|
||||
width: 100%; /* Garante que cada item da lista preencha a largura */
|
||||
}
|
||||
|
||||
.sidebar a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: rgb(12, 54, 70);
|
||||
text-decoration: none;
|
||||
padding: 1rem 1.5rem;
|
||||
white-space: nowrap;
|
||||
border-left: 4px solid transparent;
|
||||
transition: background-color 0.2s ease, border-left 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
.sidebar a:hover,
|
||||
.sidebar a.active { /* Estilo para hover e item ativo */
|
||||
background-color: #eef5fa; /* Fundo suave */
|
||||
border-left-color: rgb(44, 185, 228); /* Borda azul destacada */
|
||||
color: rgb(44, 185, 228); /* Texto azul para item ativo */
|
||||
font-weight: 600; /* Negrito para destacar */
|
||||
}
|
||||
|
||||
.icon-sidebar {
|
||||
width: 22px; /* Tamanho do ícone */
|
||||
height: 22px;
|
||||
flex-shrink: 0;
|
||||
margin-right: 15px; /* Espaço entre ícone e texto */
|
||||
}
|
||||
|
||||
/* --- Perfil do Médico (Dr. Rafael) --- */
|
||||
.perfil-medico-sidebar {
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
border-top: 1px solid #eee;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.perfil-medico-sidebar h3 {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0.25rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.perfil-medico-sidebar p {
|
||||
font-size: 0.8rem;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
/* --- Conteúdo Principal --- */
|
||||
.section-main {
|
||||
background-color: #f3f0f0;
|
||||
transition: margin-left 0.3s ease;
|
||||
/* padding: 0px; */
|
||||
width: 100%; /* Garante que ocupe o espaço restante */
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* --- Botão Hambúrguer e Overlay (escondidos por padrão no desktop) --- */
|
||||
.hamburger-btn,
|
||||
.overlay {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
MEDIA QUERIES - RESPONSIVIDADE
|
||||
========================================================================== */
|
||||
|
||||
/* --- LAYOUT DESKTOP (Telas a partir de 1025px) --- */
|
||||
@media (min-width: 1025px) {
|
||||
.sidebar {
|
||||
width: 200px; /* Largura expandida */
|
||||
}
|
||||
.section-main {
|
||||
margin-left: 200px; /* Empurra o conteúdo */
|
||||
}
|
||||
}
|
||||
|
||||
/* --- LAYOUT TABLET (Telas de 769px a 1024px) - CORRIGIDO --- */
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.sidebar {
|
||||
width: 150px; /* << MUDANÇA: Mantém a largura expandida, igual ao desktop */
|
||||
}
|
||||
|
||||
/* As regras abaixo garantem que o conteúdo da sidebar (ícones, texto)
|
||||
se comporte como no desktop, mesmo que alguma outra regra os altere. */
|
||||
|
||||
.sidebar a {
|
||||
justify-content: flex-start; /* Alinha o conteúdo à esquerda */
|
||||
padding: 1rem 1.5rem; /* Restaura o espaçamento interno */
|
||||
}
|
||||
|
||||
.icon-sidebar {
|
||||
margin-right: 15px; /* Devolve o espaço entre o ícone e o texto */
|
||||
}
|
||||
|
||||
/* AQUI ESTÁ A CORREÇÃO PRINCIPAL:
|
||||
Garantimos que o texto e o perfil fiquem visíveis. */
|
||||
.sidebar a span,
|
||||
.perfil-medico-sidebar {
|
||||
display: block; /* Garante que eles sejam visíveis */
|
||||
}
|
||||
|
||||
#logo-med {
|
||||
width: 80px; /* Restaura o tamanho original do logo */
|
||||
}
|
||||
|
||||
.section-main {
|
||||
margin-left: 150px; /* << MUDANÇA: Empurra o conteúdo pela distância correta */
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 30vw; /* Mantém o ajuste da barra de busca para tablets */
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* --- LAYOUT MOBILE (Telas até 768px) - CORRIGIDO E FINALIZADO --- */
|
||||
@media (max-width: 768px) {
|
||||
.nav {
|
||||
/* Adicionado flexbox para o alinhamento vertical dos itens */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.13);
|
||||
padding: 0 15px 0 60px;
|
||||
height: 65px;
|
||||
}
|
||||
|
||||
.div-search {
|
||||
flex-grow: 1;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* <<< MUDANÇA DRÁSTICA #1: ÍCONES DA DIREITA BEM MENORES */
|
||||
/* --- CORREÇÃO FINAL: FORÇAR A DIMINUIÇÃO DOS ÍCONES DA DIREITA --- */
|
||||
|
||||
.user-actions i,
|
||||
.user-actions svg {
|
||||
font-size: 2px !important; /* Força um tamanho visivelmente menor */
|
||||
height: 2px !important; /* Garante a altura para qualquer tipo de ícone */
|
||||
width: 2px !important; /* Garante a largura para qualquer tipo de ícone */
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 280px;
|
||||
transform: translateX(-100%);
|
||||
|
||||
/* <<< MUDANÇA #2: A ESTRUTURA QUE FEZ O PERFIL FUNCIONAR */
|
||||
height: 100vh; /* Ocupa a altura toda da tela */
|
||||
display: flex;
|
||||
flex-direction: column; /* Organiza os itens em coluna */
|
||||
}
|
||||
|
||||
.sidebar.active {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.sidebar a {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.icon-sidebar {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.sidebar a span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* <<< MUDANÇA #3: O ESTILO DO PERFIL QUE VOCÊ APROVOU */
|
||||
.perfil-medico-sidebar {
|
||||
margin-top: auto; /* Joga o perfil para a base do menu */
|
||||
text-align: left;
|
||||
padding: 20px 15px; /* Espaçamento interno */
|
||||
border-top: 2px solid #007bff; /* A linha azul que você gostou */
|
||||
}
|
||||
|
||||
#logo-med {
|
||||
width: 100px;
|
||||
padding: 0.1rem 15px; /* Adiciona padding para alinhar com os outros itens */
|
||||
}
|
||||
|
||||
.section-main {
|
||||
margin-left: 0;
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
/* O seu código do botão hambúrguer e overlay permanece intacto */
|
||||
.hamburger-btn {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
top: 24px;
|
||||
left: 20px;
|
||||
z-index: 1002;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
width: 30px;
|
||||
height: 25px;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hamburger-btn span {
|
||||
width: 100%; height: 3px; background-color: #333;
|
||||
border-radius: 3px; transition: all 0.3s ease;
|
||||
}
|
||||
.hamburger-btn.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
|
||||
.hamburger-btn.active span:nth-child(2) { opacity: 0; }
|
||||
.hamburger-btn.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -6px); }
|
||||
.overlay {
|
||||
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5); z-index: 999;
|
||||
opacity: 0; visibility: hidden;
|
||||
transition: opacity 0.3s ease, visibility 0.3s ease;
|
||||
}
|
||||
.overlay.active {
|
||||
display: block; opacity: 1; visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Estilos para foco e acessibilidade --- */
|
||||
.hamburger-btn:focus-visible { /* Usar focus-visible para melhor UX */
|
||||
outline: 2px solid #007bff;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.sidebar ul li a:focus-visible,
|
||||
.icon-lista li a:focus-visible {
|
||||
outline: 2px solid #007bff;
|
||||
outline-offset: 2px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
565
clinicApp/global2.css
Normal file
565
clinicApp/global2.css
Normal file
@ -0,0 +1,565 @@
|
||||
* {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
background-color: #f3f0f0;
|
||||
}
|
||||
|
||||
.icon-sidebar {
|
||||
width: 17px;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
#music {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
padding-top: 1rem;
|
||||
padding: 1rem 0.5rem 0px 0.5rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
max-width: 12vw;
|
||||
max-height: 100vh;
|
||||
height: 100%;
|
||||
background-color: white;
|
||||
width: 100%;
|
||||
box-shadow: 9px 0px 15px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.main-contain {
|
||||
margin: 1rem 4rem;
|
||||
}
|
||||
|
||||
.perfil-medico-sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.perfil-medico-sidebar p {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.div-sidebar {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* align-items: flex-end; */
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.sidebar a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
color: rgb(12, 54, 70);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.sidebar ul li {
|
||||
text-align: center;
|
||||
list-style: none;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 3%;
|
||||
padding: 0.7rem 0.8rem;
|
||||
}
|
||||
|
||||
.sidebar ul li:hover {
|
||||
border: 2px solid rgb(44, 185, 228);
|
||||
background-color: rgb(44, 185, 228);
|
||||
}
|
||||
|
||||
.sidebar * {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.icon-lista {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
gap: 30px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.icon-lista li a img,
|
||||
img {
|
||||
width: 22px;
|
||||
/* background-color: #fff; */
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.div-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.div-search:hover {
|
||||
border: 1.5px solid darkgray;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.section-main {
|
||||
max-width: 88vw;
|
||||
margin-left: 10rem;
|
||||
width: 100%;
|
||||
background-color: #f3f0f0;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
height: 38px;
|
||||
width: 20vw;
|
||||
padding-left: 10px;
|
||||
margin-left: 2rem;
|
||||
border-radius: 5px;
|
||||
border: 1.5px solid #ccc;
|
||||
}
|
||||
|
||||
.search-button {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 37%;
|
||||
transform: translateY(-50%);
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: #eaeaea;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
#logo-med {
|
||||
width: 30px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/*Interface Hamburguer*/
|
||||
|
||||
.hamburger-btn {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.hamburger-btn span {
|
||||
width: 25px;
|
||||
height: 3px;
|
||||
background: #333;
|
||||
border-radius: 3px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.hamburger-btn.active span:nth-child(1) {
|
||||
transform: rotate(-45deg) translate(-5px, 6px);
|
||||
}
|
||||
|
||||
.hamburger-btn.active span:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.hamburger-btn.active span:nth-child(3) {
|
||||
transform: rotate(45deg) translate(-5px, -6px);
|
||||
}
|
||||
|
||||
/* Overlay para fechar menu ao clicar fora */
|
||||
.overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 998;
|
||||
}
|
||||
|
||||
.overlay.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Media queries melhoradas para responsividade */
|
||||
@media (max-width: 768px) {
|
||||
.hamburger-btn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
width: 30px;
|
||||
height: 22px; /* Ajuste altura */
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
position: fixed; /* Fixo para estar sempre visível */
|
||||
top: 24px;
|
||||
left: 20px;
|
||||
z-index: 1002; /* Acima de tudo */
|
||||
}
|
||||
|
||||
.hamburger-btn span {
|
||||
width: 30px;
|
||||
height: 3px;
|
||||
background: #333;
|
||||
border-radius: 3px;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
/* Animação do botão para "X" */
|
||||
.hamburger-btn.active span:nth-child(1) {
|
||||
transform: rotate(45deg) translate(7px, 7px);
|
||||
}
|
||||
.hamburger-btn.active span:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
.hamburger-btn.active span:nth-child(3) {
|
||||
transform: rotate(-45deg) translate(7px, -7px);
|
||||
}
|
||||
|
||||
/* Sidebar no Mobile */
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
width: 280px; /* Largura fixa no mobile */
|
||||
min-width: 0;
|
||||
padding: 80px 20px 20px;
|
||||
box-shadow: 5px 0 15px rgba(0, 0, 0, 0.2);
|
||||
/* A MÁGICA ACONTECE AQUI */
|
||||
transform: translateX(-100%); /* Esconde a sidebar fora da tela */
|
||||
transition: transform 0.3s ease-in-out; /* Animação suave */
|
||||
z-index: 1001; /* Acima do overlay */
|
||||
overflow-y: auto; /* Permite rolar se o menu for grande */
|
||||
}
|
||||
|
||||
.sidebar.active {
|
||||
transform: translateX(0); /* Mostra a sidebar */
|
||||
}
|
||||
|
||||
/* Ajustes no layout interno da sidebar mobile */
|
||||
.sidebar a {
|
||||
flex-direction: row; /* Ícone e texto lado a lado */
|
||||
justify-content: flex-start;
|
||||
padding: 12px 15px;
|
||||
}
|
||||
.icon-sidebar {
|
||||
margin-right: 15px; /* Espaço entre ícone e texto */
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.sidebar p {
|
||||
font-size: 16px;
|
||||
}
|
||||
#logo-med {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
/* Conteúdo Principal no Mobile */
|
||||
.section-main {
|
||||
width: 100%;
|
||||
margin-left: 0; /* Remove a margem do desktop */
|
||||
padding-top: 85px; /* MUITO IMPORTANTE: Espaço para o .nav fixo */
|
||||
}
|
||||
|
||||
.nav {
|
||||
position: fixed; /* Fixa o cabeçalho no topo */
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 999; /* Abaixo da sidebar */
|
||||
padding: 15px 20px;
|
||||
}
|
||||
|
||||
.div-search {
|
||||
width: 100%;
|
||||
margin-left: 50px; /* Espaço para o botão hambúrguer */
|
||||
}
|
||||
.search-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Overlay (fundo escuro) */
|
||||
.overlay {
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 1000;
|
||||
opacity: 0;
|
||||
visibility: hidden; /* Esconde e impede cliques */
|
||||
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
/* Media query para tablets */
|
||||
@media (max-width: 1024px) and (min-width: 769px) {
|
||||
.sidebar {
|
||||
max-width: 12vw;
|
||||
padding: 0.3rem;
|
||||
}
|
||||
|
||||
.sidebar a {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 35vw;
|
||||
min-width: 250px;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
.icon-lista {
|
||||
gap: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Media query melhorada para telas muito pequenas */
|
||||
@media (max-width: 480px) {
|
||||
.hamburger-btn {
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
/* display: none; */
|
||||
height: 90vh;
|
||||
}
|
||||
|
||||
.div-sidebar {
|
||||
max-height: 100%;
|
||||
width: 90%;
|
||||
/* background-color: black; */
|
||||
}
|
||||
|
||||
.abas {
|
||||
max-height: 100%;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sidebar.active {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
flex-direction: column;
|
||||
max-width: 300px;
|
||||
width: 300px;
|
||||
height: 100%;
|
||||
max-height: 100vh;
|
||||
padding: 60px 15px 15px 15px;
|
||||
box-shadow: 5px 0px 15px rgba(0, 0, 0, 0.3);
|
||||
z-index: 999;
|
||||
background-color: white;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
/* Removendo padding-top desnecessário */
|
||||
.nav {
|
||||
padding: 15px;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
margin-top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.div-search {
|
||||
margin-bottom: 10px;
|
||||
width: 90%;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.icon-lista {
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Adicionando estilos para melhor acessibilidade */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.hamburger-btn span,
|
||||
.sidebar,
|
||||
.overlay {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Estilos para foco e acessibilidade */
|
||||
.hamburger-btn:focus {
|
||||
outline: 2px solid #007bff;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.sidebar ul li a:focus,
|
||||
.icon-lista li a:focus {
|
||||
outline: 2px solid #007bff;
|
||||
outline-offset: 2px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Adicionando media query para desktop - sidebar sempre visível */
|
||||
@media (min-width: 769px) {
|
||||
.sidebar {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
left: auto;
|
||||
transform: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.sidebar a {
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.perfil-medico-sidebar {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 35vw;
|
||||
}
|
||||
|
||||
.hamburger-btn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Section main volta ao layout original no desktop */
|
||||
.section-main {
|
||||
max-width: 88vw;
|
||||
width: 100%;
|
||||
margin-left: 12rem;
|
||||
}
|
||||
}
|
||||
|
||||
.logo1 {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hamburger-btn {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
max-width: 280px;
|
||||
width: 75%;
|
||||
padding-top: 80px;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.3s ease-in-out;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.sidebar.active {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.sidebar a {
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
text-align: left;
|
||||
}
|
||||
.icon-sidebar {
|
||||
margin-right: 15px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.perfil-medico-sidebar {
|
||||
text-align: left;
|
||||
padding-left: 10px;
|
||||
}
|
||||
#logo-med {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.section-main {
|
||||
margin-left: 0;
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
.nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 998;
|
||||
padding: 15px 20px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.div-search {
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Telas muito pequenas */
|
||||
@media (max-width: 480px) {
|
||||
.nav {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 10px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
/* ALTERAÇÃO: Aumenta o padding para o nav que agora é mais alto */
|
||||
.section-main {
|
||||
padding-top: 130px;
|
||||
}
|
||||
|
||||
.div-search {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
111
clinicApp/layout padrao.html
Normal file
111
clinicApp/layout padrao.html
Normal file
@ -0,0 +1,111 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pt-BR">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Crud + Layout</title>
|
||||
<link rel="stylesheet" href="global.css" />
|
||||
<!-- css da página -->
|
||||
<link rel="stylesheet" href="#" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main>
|
||||
<!-- Overlay só aparece em mobile quando menu está ativo -->
|
||||
<div class="overlay" id="overlay"></div>
|
||||
|
||||
<div class="flex">
|
||||
<!-- Botão hambúrguer só aparece em mobile -->
|
||||
<button class="hamburger-btn" id="hamburger-btn" aria-label="Abrir menu de navegação" aria-expanded="false">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
|
||||
<!-- Sidebar agora se comporta diferente em desktop vs mobile -->
|
||||
<section class="sidebar" id="sidebar" role="navigation" aria-label="Menu principal">
|
||||
<div class="div-sidebar">
|
||||
<div class="abas">
|
||||
<a href="#" aria-label="Página inicial" class="logo1">
|
||||
<img src="https://images.vexels.com/media/users/3/142777/isolated/preview/84711206e52e0d4ff6c793cb476ea264-logotipo-medico-da-estrela-do-heartbeat.png" alt="Logo médico" id="logo-med" />
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="pages/pacientes/paciente.html" aria-label="Pacientes">
|
||||
<img src="/clinicApp/assets/layoutIcons/icons8-estetoscópio-50.png" alt="Pacientes" class="icon-sidebar" />
|
||||
<p>Pacientes</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="pages/dashboard/dashboard.html" aria-label="Pacientes">
|
||||
<img src="/clinicApp/assets/layoutIcons/icons8-estetoscópio-50.png" alt="Pacientes" class="icon-sidebar" />
|
||||
<p>Dashboard</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="pages/agendamento/agendamento.html" aria-label="Cadastro de usuários">
|
||||
<img src="/clinicApp/assets/layoutIcons/icons8-grupo-de-usuário-homem-homem-50.png" alt="Cadastro" class="icon-sidebar" />
|
||||
<p>Médicos</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="pages/laudo/laudoMedico.html" aria-label="Documentos">
|
||||
<img src="/clinicApp/assets/layoutIcons/icons8-document.svg" alt="Documentos" class="icon-sidebar" />
|
||||
<p>Laúdos</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-label="Documentos">
|
||||
<img src="assets/layoutIcons/icons8-document.svg" alt="Documentos" class="icon-sidebar" />
|
||||
<p>Agenda</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-label="Configurações">
|
||||
<img src="assets/layoutIcons/icons8-configurações.svg" alt="Configurações" class="icon-sidebar" />
|
||||
<p>Settings</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="perfil-medico-sidebar">
|
||||
<h3>Dr. Rafael Andrade</h3>
|
||||
<p>Núcleo de Especialidades</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section-main">
|
||||
<nav class="nav" role="banner">
|
||||
<div class="div-search">
|
||||
<input type="text" class="search-input" placeholder="Buscar paciente" aria-label="Campo de busca" />
|
||||
<button class="search-button" aria-label="Buscar">
|
||||
<img src="assets/layoutIcons/icons8-pesquisar.svg" alt="Buscar" />
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<ul class="icon-lista">
|
||||
<li>
|
||||
<a href="#" aria-label="Ajuda"><img src="assets/layoutIcons/icons8-ajuda-50.png" alt="Ajuda" /></a>
|
||||
</li>
|
||||
<li>
|
||||
<button id="music" aria-label="Notificações"><img src="assets/layoutIcons/botao-ativar-notificacoes.png" alt="Notificações" /></button>
|
||||
</li>
|
||||
<!--button ta gerando um fundo branco, botei ID pra retirar o background-->
|
||||
<li>
|
||||
<a href="#" aria-label="Perfil do usuário"><img src="assets/layoutIcons/icons8-usuário-50.png" alt="Usuário" /></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="main-contain">
|
||||
<h1>Gerenciador</h1>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script src="scriptGlobal.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
949
clinicApp/pages-visao-clinica/medicos/addMedico/addMedico.css
Normal file
949
clinicApp/pages-visao-clinica/medicos/addMedico/addMedico.css
Normal file
@ -0,0 +1,949 @@
|
||||
:root {
|
||||
--bg-main: #f3f0f0;
|
||||
--bg-nav: #fafafa;
|
||||
--bg-modal: #fff;
|
||||
--sombra-modal: 0 4px 15px rgba(0, 0, 0, 0.3);
|
||||
--sombra-sidebar: 15px 0px 15px rgba(0, 0, 0, 0.3);
|
||||
--cor-cinza-claro: #f1f1f1;
|
||||
--cor-cinza-medio: #ccc;
|
||||
--cor-cinza-escuro: #666;
|
||||
--cor-tabela-header: #f3f0f0;
|
||||
--cor-principal: rgb(38, 137, 255);
|
||||
--cor-hover-principal: rgb(30, 110, 204);
|
||||
--cor-borda-input-foco: #2e7d32;
|
||||
--cor-fundo-botao-salvar: #2e7d32;
|
||||
--cor-hover-salvar: #256628;
|
||||
}
|
||||
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
padding-top: 1.25rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 5vw;
|
||||
height: 100vh;
|
||||
background-color: white;
|
||||
box-shadow: var(--sombra-sidebar);
|
||||
}
|
||||
|
||||
.sidebar ul {
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sidebar ul li {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.icon-sidebar {
|
||||
width: 17px;
|
||||
padding: 10px 13px 5px 13px;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.icon-sidebar:hover {
|
||||
background-color: var(--cor-cinza-claro);
|
||||
}
|
||||
|
||||
.section-main {
|
||||
width: 95vw;
|
||||
background-color: var(--bg-main);
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: var(--bg-nav);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.div-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
transition: border 0.2s;
|
||||
}
|
||||
|
||||
.div-search:hover {
|
||||
border: 1.5px solid darkgray;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
height: 38px;
|
||||
width: 20vw;
|
||||
padding-left: 10px;
|
||||
border-radius: 5px;
|
||||
border: 1.5px solid var(--cor-cinza-medio);
|
||||
}
|
||||
|
||||
.search-button {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.icon-lista {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
gap: 30px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.icon-lista li a img,
|
||||
img {
|
||||
width: 22px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.btn-add,
|
||||
.btn {
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.btn-add {
|
||||
margin: 20px;
|
||||
background-color: var(--cor-principal);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-add:hover {
|
||||
background-color: var(--cor-hover-principal);
|
||||
}
|
||||
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: var(--bg-modal);
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
width: 800px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
box-shadow: var(--sombra-modal);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.modal-content h2 {
|
||||
margin-bottom: 15px;
|
||||
font-size: 20px;
|
||||
color: #333;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 15px;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
color: var(--cor-cinza-escuro);
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
margin-bottom: 4px;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group select {
|
||||
padding: 8px;
|
||||
height: 32px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--cor-cinza-medio);
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group select:focus {
|
||||
border-color: var(--cor-borda-input-foco);
|
||||
box-shadow: 0 0 5px rgba(46, 125, 50, 0.3);
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.form-check-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 5px;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
color: #444;
|
||||
min-width: unset;
|
||||
max-width: fit-content;
|
||||
|
||||
.modal-actions {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.btn-save {
|
||||
background: var(--cor-fundo-botao-salvar);
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
padding: 8px 15px;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
background: var(--cor-cinza-medio);
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
padding: 8px 15px;
|
||||
}
|
||||
|
||||
.btn-save:hover {
|
||||
background: var(--cor-hover-salvar);
|
||||
}
|
||||
|
||||
.btn-cancel:hover {
|
||||
background: #b3b3b3;
|
||||
}
|
||||
|
||||
.btn-edit,
|
||||
.btn-delete {
|
||||
padding: 5px 10px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
background-color: lightgrey;
|
||||
color: #000;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.btn-edit:hover,
|
||||
.btn-delete:hover {
|
||||
background-color: #d3d3d3;
|
||||
}
|
||||
|
||||
/* Tabela de pacientes */
|
||||
.paciente-table {
|
||||
width: 95%; /* Use a largura da tela disponível */
|
||||
margin: 20px auto;
|
||||
border-collapse: collapse;
|
||||
background-color: var(--bg-modal);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.paciente-table th,
|
||||
.paciente-table td {
|
||||
padding: 12px 15px; /* Aumentei o padding para dar mais espaço */
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #ddd;
|
||||
font-size: 15px; /* Ajustei o tamanho da fonte */
|
||||
white-space: nowrap; /* Impede que o texto quebre para a próxima linha */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis; /* Adiciona "..." se o texto for muito longo */
|
||||
}
|
||||
|
||||
.paciente-table th {
|
||||
background-color: var(--cor-tabela-header);
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
text-transform: uppercase; /* Transforma o texto do cabeçalho em maiúsculas */
|
||||
}
|
||||
|
||||
/* Deixa a tabela responsiva para dispositivos menores */
|
||||
@media (max-width: 768px) {
|
||||
.paciente-table {
|
||||
display: block;
|
||||
overflow-x: auto; /* Adiciona uma barra de rolagem horizontal */
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.paciente-table thead,
|
||||
.paciente-table tbody,
|
||||
.paciente-table th,
|
||||
.paciente-table td,
|
||||
.paciente-table tr {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.paciente-table tr {
|
||||
margin-bottom: 15px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.paciente-table td {
|
||||
border-bottom: 1px solid #eee;
|
||||
position: relative;
|
||||
padding-left: 50%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.paciente-table td::before {
|
||||
content: attr(data-label);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 50%;
|
||||
padding-left: 15px;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Container de formulário para a nova página - AGORA OCUPARÁ A LARGURA TOTAL */
|
||||
.full-page-form-container {
|
||||
width: 95%;
|
||||
margin: 20px auto;
|
||||
padding: 30px;
|
||||
background-color: var(--bg-modal);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Divisores de Seção (Endereço, etc) */
|
||||
.section-divider {
|
||||
font-size: 1.2em;
|
||||
font-weight: bold;
|
||||
color: #444;
|
||||
margin: 35px 0 20px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
/* Ajustes para a grade */
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 20px 30px;
|
||||
}
|
||||
|
||||
.form-grid .span-2 {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
/* Estilos de input e select uniformes */
|
||||
.form-group input,
|
||||
.form-group select {
|
||||
padding: 10px;
|
||||
height: 40px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--cor-cinza-medio);
|
||||
font-size: 16px;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group select:focus {
|
||||
border-color: var(--cor-borda-input-foco);
|
||||
box-shadow: 0 0 5px rgba(46, 125, 50, 0.3);
|
||||
}
|
||||
|
||||
/* Campos de largura total */
|
||||
.form-group.full-width {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
/* Estilo para a área de texto de Observações */
|
||||
textarea {
|
||||
resize: vertical;
|
||||
width: 100%;
|
||||
min-height: 100px;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--cor-cinza-medio);
|
||||
font-size: 16px;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
textarea:focus {
|
||||
border-color: var(--cor-borda-input-foco);
|
||||
box-shadow: 0 0 5px rgba(46, 125, 50, 0.3);
|
||||
}
|
||||
|
||||
/* Estilo para o campo de upload de arquivo */
|
||||
.form-group input[type="file"] {
|
||||
background-color: var(--cor-cinza-claro);
|
||||
border: 1px dashed var(--cor-cinza-medio);
|
||||
padding: 10px;
|
||||
height: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Outros estilos, como h2, labels, buttons etc., que já estão na sua folha de estilo */
|
||||
.form-card h2 {
|
||||
margin-bottom: 25px;
|
||||
font-size: 24px;
|
||||
color: #333;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
margin-bottom: 6px;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.form-actions .btn {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
padding: 12px 22px;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.form-actions .btn-save {
|
||||
background: var(--cor-fundo-botao-salvar);
|
||||
}
|
||||
|
||||
.form-actions .btn-cancel {
|
||||
background: #ccc;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.form-actions .btn-save:hover {
|
||||
background: #256628;
|
||||
}
|
||||
.form-actions .btn-cancel:hover {
|
||||
background: #b3b3b3;
|
||||
}
|
||||
|
||||
/* Estilos gerais do corpo para melhor visualização */
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #f0f2f5;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Container principal para centralizar o conteúdo */
|
||||
.flex {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Estilos para a seção principal, para ocupar o espaço restante */
|
||||
.section-main {
|
||||
flex-grow: 1; /* Ocupa todo o espaço restante */
|
||||
padding: 20px;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
/* Estilos para o botão de adicionar paciente */
|
||||
.btn-add {
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 20px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-add:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
/* Estilos da tabela de pacientes */
|
||||
.paciente-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.paciente-table th,
|
||||
.paciente-table td {
|
||||
padding: 12px 15px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.paciente-table thead th {
|
||||
background-color: #e9ecef;
|
||||
font-weight: bold;
|
||||
color: #495057;
|
||||
text-transform: uppercase;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Estilizando as linhas da tabela */
|
||||
.paciente-table tbody tr:hover {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
/* Estilos para os botões de ação na tabela */
|
||||
.btn-edit,
|
||||
.btn-delete {
|
||||
padding: 6px 10px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-edit {
|
||||
background-color: #28a745;
|
||||
}
|
||||
|
||||
.btn-edit:hover {
|
||||
background-color: #218838;
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
background-color: #dc3545;
|
||||
}
|
||||
|
||||
.btn-delete:hover {
|
||||
background-color: #c82333;
|
||||
}
|
||||
|
||||
/* Estilos para dispositivos móveis (responsividade) */
|
||||
@media (max-width: 768px) {
|
||||
.paciente-table,
|
||||
.paciente-table tbody,
|
||||
.paciente-table tr,
|
||||
.paciente-table td {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.paciente-table thead {
|
||||
display: none; /* Esconde o cabeçalho em telas pequenas */
|
||||
}
|
||||
|
||||
.paciente-table tr {
|
||||
margin-bottom: 15px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.paciente-table td {
|
||||
text-align: right;
|
||||
padding-left: 50%; /* Espaço para o rótulo */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.paciente-table td::before {
|
||||
content: attr(data-label);
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
width: 45%;
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
}
|
||||
}
|
||||
|
||||
/* Estilos Gerais para o Corpo da Página */
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #f0f2f5;
|
||||
}
|
||||
|
||||
/* Container Flex principal (sidebar + conteúdo) */
|
||||
.flex-container {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Estilo da Sidebar */
|
||||
.sidebar {
|
||||
width: 80px;
|
||||
background-color: #fff;
|
||||
padding: 10px 0;
|
||||
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sidebar ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sidebar li {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.sidebar a {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.sidebar a:hover {
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
|
||||
.sidebar img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#logo-med {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
/* Área de Conteúdo Principal (que contém o Header e o main-content) */
|
||||
.content-area {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Estilo do Header */
|
||||
.header {
|
||||
background-color: #fff;
|
||||
padding: 10px 20px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 20px;
|
||||
padding: 5px 10px;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.search-bar input {
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 5px;
|
||||
background-color: transparent;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.search-bar button {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.search-bar button img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.header-icons img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-left: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Estilos para o Conteúdo Principal (abaixo do header) */
|
||||
.main-content {
|
||||
flex-grow: 1;
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Estilos para o botão "Cadastrar Paciente" */
|
||||
.btn-add {
|
||||
display: inline-block;
|
||||
background-color: #007bff;
|
||||
color: #fff;
|
||||
padding: 10px 15px;
|
||||
border-radius: 5px;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-add:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
/* Estilos da Tabela */
|
||||
.table-container {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.paciente-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.paciente-table thead th {
|
||||
background-color: #f2f2f2;
|
||||
padding: 12px 15px;
|
||||
text-align: left;
|
||||
border-bottom: 2px solid #ddd;
|
||||
}
|
||||
|
||||
.paciente-table tbody td {
|
||||
padding: 10px 15px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.paciente-table tbody tr:hover {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 8px 12px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
margin-right: 5px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
/* As cores dos botões de ação foram mantidas como estavam na sua versão anterior */
|
||||
.btn-edit {
|
||||
background-color: #08c547;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-edit:hover {
|
||||
background-color: #087904;
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
background-color: #dc3545;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-delete:hover {
|
||||
background-color: #b31a29;
|
||||
}
|
||||
|
||||
/* Estilos para a página de cadastro */
|
||||
.section-cadastro {
|
||||
background-color: #fff;
|
||||
padding: 30px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
max-width: 600px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.section-cadastro h2 {
|
||||
text-align: center;
|
||||
color: #333;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.section-cadastro form label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.section-cadastro form input[type="text"],
|
||||
.section-cadastro form input[type="tel"] {
|
||||
width: calc(100% - 20px);
|
||||
padding: 10px;
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.section-cadastro form button {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
background-color: #28a745;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.section-cadastro form button:hover {
|
||||
background-color: #218838;
|
||||
}
|
||||
|
||||
.btn-back {
|
||||
display: inline-block;
|
||||
margin-bottom: 20px;
|
||||
color: #007bff;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.btn-back:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Media Queries para Responsividade */
|
||||
@media (max-width: 768px) {
|
||||
.sidebar {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.sidebar img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
#logo-med {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.header {
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
width: 90%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.header-icons {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.header-icons img {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.paciente-table thead {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.paciente-table tbody tr {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.paciente-table tbody td {
|
||||
display: block;
|
||||
text-align: right;
|
||||
padding-left: 50%;
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.paciente-table tbody td::before {
|
||||
content: attr(data-label);
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
width: 45%;
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
214
clinicApp/pages-visao-clinica/medicos/addMedico/addMedico.html
Normal file
214
clinicApp/pages-visao-clinica/medicos/addMedico/addMedico.html
Normal file
@ -0,0 +1,214 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pt-br">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Cadastro de Médico</title>
|
||||
<link rel="stylesheet" href="./addMedico.css">
|
||||
<link rel="stylesheet" href="/Squad-21/clinicApp/global.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/Squad-21/clinicApp/assets/style/bootstrap.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main>
|
||||
<div class="flex">
|
||||
<section class="section-main">
|
||||
<nav class="nav">
|
||||
</nav>
|
||||
|
||||
<div class="full-page-form-container">
|
||||
<div class="form-card">
|
||||
<h2>Dados do Paciente</h2>
|
||||
<form id="cadastro-form">
|
||||
<div class="form-grid">
|
||||
<div class="form-group"><label for="nome">Nome *</label><input type="text" id="nome"
|
||||
required></div>
|
||||
<div class="form-group"><label for="nomeSocial">Nome Social</label><input type="text"
|
||||
id="nomeSocial"></div>
|
||||
<div class="form-group">
|
||||
<label for="cpf">CPF *</label>
|
||||
<input type="text" id="cpf" placeholder="000.000.000-00" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="cpf">CRM *</label>
|
||||
<input type="text" id="cpf" placeholder="000.000.000-00" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="outrosDocs">Outros documentos de identidade</label>
|
||||
<select id="outrosDocs">
|
||||
<option value="">Selecione</option>
|
||||
<option value="Passaporte">Passaporte</option>
|
||||
<option value="CNH">CNH</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group"><label for="numDoc">Número do documento</label><input
|
||||
type="text" id="numDoc" placeholder="Número do documento"></div>
|
||||
<div class="form-group">
|
||||
<label for="sexo">Sexo *</label>
|
||||
<select id="sexo" name="sexo" required>
|
||||
<option value="">Selecione</option>
|
||||
<option value="Masculino">Masculino</option>
|
||||
<option value="Feminino">Feminino</option>
|
||||
<option value="Feminino">Prefiro Não Informar</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group"><label for="dataNascimento">Data de Nascimento *</label><input
|
||||
type="date" id="dataNascimento" required></div>
|
||||
<div class="form-group">
|
||||
<label for="etnia">Etnia</label>
|
||||
<select id="etnia">
|
||||
<option value="">Selecione</option>
|
||||
<option value="branca">Branca</option>
|
||||
<option value="preta">Preta</option>
|
||||
<option value="parda">Parda</option>
|
||||
<option value="amarela">Amarela</option>
|
||||
<option value="indigena">Indígena</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="raca">Raça</label>
|
||||
<select id="raca">
|
||||
<option value="">Selecione</option>
|
||||
<option value="branca">Branca</option>
|
||||
<option value="preta">Preta</option>
|
||||
<option value="parda">Parda</option>
|
||||
<option value="amarela">Amarela</option>
|
||||
<option value="indigena">Indígena</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="naturalidade">Naturalidade</label>
|
||||
<input type="text" id="naturalidade">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="nacionalidade">Nacionalidade</label>
|
||||
<input type="text" id="nacionalidade">
|
||||
</div>
|
||||
<div class="form-group"><label for="profissao">Profissão</label><input type="text"
|
||||
id="profissao"></div>
|
||||
<div class="form-group">
|
||||
<label for="estadoCivil">Estado Civil</label>
|
||||
<select id="estadoCivil">
|
||||
<option value="">Selecione</option>
|
||||
<option value="solteiro">Solteiro(a)</option>
|
||||
<option value="casado">Casado(a)</option>
|
||||
<option value="divorciado">Divorciado(a)</option>
|
||||
<option value="viuvo">Viúvo(a)</option>
|
||||
<option value="separado">Separado(a)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="nomeMae">Nome da mãe</label>
|
||||
<input type="text" id="nomeMae">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="nomePai">Nome do pai</label>
|
||||
<input type="text" id="nomePai">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="nomeEsposo">Nome do(a) esposo(a)</label>
|
||||
<input type="text" id="nomeEsposo">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-divider">Endereço</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-group">
|
||||
<label for="cep">CEP *</label>
|
||||
<input type="text" id="cep" required placeholder="00000-000">
|
||||
</div>
|
||||
<div class="form-group span-2">
|
||||
<label for="endereco">Endereço</label>
|
||||
<input type="text" id="endereco">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="numero">Número</label>
|
||||
<input type="text" id="numero">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="complemento">Complemento</label>
|
||||
<input type="text" id="complemento">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="bairro">Bairro</label>
|
||||
<input type="text" id="bairro">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="cidade">Cidade</label>
|
||||
<input type="text" id="cidade">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="estado">Estado
|
||||
<label>
|
||||
<select id="estado">
|
||||
<option value="">Selecione</option>
|
||||
<option value="AC">Acre</option>
|
||||
<option value="AL">Alagoas</option>
|
||||
<option value="AP">Amapá</option>
|
||||
<option value="AM">Amazonas</option>
|
||||
<option value="BA">Bahia</option>
|
||||
<option value="CE">Ceará</option>
|
||||
<option value="DF">Distrito Federal</option>
|
||||
<option value="ES">Espírito Santo</option>
|
||||
<option value="GO">Goiás</option>
|
||||
<option value="MA">Maranhão</option>
|
||||
<option value="MT">Mato Grosso</option>
|
||||
<option value="MS">Mato Grosso do Sul</option>
|
||||
<option value="MG">Minas Gerais</option>
|
||||
<option value="PA">Pará</option>
|
||||
<option value="PB">Paraíba</option>
|
||||
<option value="PR">Paraná</option>
|
||||
<option value="PE">Pernambuco</option>
|
||||
<option value="PI">Piauí</option>
|
||||
<option value="RJ">Rio de Janeiro</option>
|
||||
<option value="RN">Rio Grande do Norte</option>
|
||||
<option value="RS">Rio Grande do Sul</option>
|
||||
<option value="RO">Rondônia</option>
|
||||
<option value="RR">Roraima</option>
|
||||
<option value="SC">Santa Catarina</option>
|
||||
<option value="SP">São Paulo</option>
|
||||
<option value="SE">Sergipe</option>
|
||||
<option value="TO">Tocantins</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-divider">Contato</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-group">
|
||||
<label for="email">E-mail *</label>
|
||||
<input type="email" id="email" required placeholder="email@hotmail.com">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="celular">Celular *</label>
|
||||
<input type="text" id="celular" placeholder="(00) 00000-0000" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="telefone1">Telefone</label>
|
||||
<input type="text" id="telefone1" placeholder="(00) 0000-0000">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-save">Salvar</button>
|
||||
<a href="../crud-medico.html" class="btn btn-cancel">Voltar</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/inputmask@5.0.9/dist/inputmask.min.js"></script>
|
||||
<script defer src="/Squad-21/clinicApp/pages-visao-clinica/medicos/addMedico/addMedico.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
118
clinicApp/pages-visao-clinica/medicos/addMedico/addMedico.js
Normal file
118
clinicApp/pages-visao-clinica/medicos/addMedico/addMedico.js
Normal file
@ -0,0 +1,118 @@
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const form = document.getElementById("cadastro-form");
|
||||
// Pega o ID do paciente da URL. Se não houver, 'editId' será null.
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const editId = urlParams.get("id");
|
||||
|
||||
function desativarFormulario() {
|
||||
// Desativa todos os inputs, selects e textareas
|
||||
form.querySelectorAll("input, select, textarea").forEach((el) => {
|
||||
el.disabled = true;
|
||||
});
|
||||
|
||||
// Remove o botão de submit
|
||||
const submitBtn = form.querySelector('[type="submit"]');
|
||||
if (submitBtn) {
|
||||
submitBtn.remove();
|
||||
}
|
||||
}
|
||||
|
||||
// Exemplo: se a URL tiver ?mode=detalhes
|
||||
if (window.location.search.includes("mode=detalhes")) {
|
||||
desativarFormulario();
|
||||
}
|
||||
|
||||
if (form) {
|
||||
// Carrega a lista de pacientes
|
||||
let medicos = JSON.parse(localStorage.getItem("medicos")) || [];
|
||||
let medicoParaEditar = null;
|
||||
|
||||
// Se houver um ID de edição na URL, encontra o medico correspondente
|
||||
if (editId) {
|
||||
medicoParaEditar = medicos.find((p) => p.id == editId);
|
||||
if (medicoParaEditar) {
|
||||
// Preenche o formulário com os dados do medico para edição
|
||||
document.getElementById("nome").value = medicoParaEditar.nome;
|
||||
document.getElementById("celular").value = medicoParaEditar.celular;
|
||||
document.getElementById("cidade").value = medicoParaEditar.cidade;
|
||||
document.getElementById("estado").value = medicoParaEditar.estado;
|
||||
document.getElementById("nomeSocial").value = medicoParaEditar.nomeSocial;
|
||||
document.getElementById("cpf").value = medicoParaEditar.cpf;
|
||||
document.getElementById("outrosDocs").value = medicoParaEditar.outrosDocs;
|
||||
document.getElementById("numDoc").value = medicoParaEditar.numDoc;
|
||||
document.getElementById("sexo").value = medicoParaEditar.sexo;
|
||||
document.getElementById("dataNascimento").value = medicoParaEditar.dataNascimento;
|
||||
document.getElementById("cep").value = medicoParaEditar.cep;
|
||||
document.getElementById("etnia").value = medicoParaEditar.etnia;
|
||||
document.getElementById("raca").value = medicoParaEditar.raca;
|
||||
document.getElementById("nacionalidade").value = medicoParaEditar.nacionalidade;
|
||||
document.getElementById("estadoCivil").value = medicoParaEditar.estadoCivil;
|
||||
document.getElementById("nomeMae").value = medicoParaEditar.nomeMae;
|
||||
document.getElementById("nomePai").value = medicoParaEditar.nomePai;
|
||||
document.getElementById("nomeEsposo").value = medicoParaEditar.nomeEsposo;
|
||||
document.getElementById("endereco").value = medicoParaEditar.endereco;
|
||||
document.getElementById("numero").value = medicoParaEditar.numero;
|
||||
document.getElementById("complemento").value = medicoParaEditar.complemento;
|
||||
document.getElementById("bairro").value = medicoParaEditar.bairro;
|
||||
document.getElementById("email").value = medicoParaEditar.email;
|
||||
document.getElementById("telefone1").value = medicoParaEditar.telefone1;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
const cpf = document.getElementById("cpf");
|
||||
const telefone = document.getElementById("telefone1");
|
||||
const celular = document.getElementById("celular");
|
||||
|
||||
// Aplique as máscaras
|
||||
new Inputmask("999.999.999-99").mask(cpf);
|
||||
new Inputmask("(99) 99999-9999").mask(celular);
|
||||
new Inputmask("(99) 9999-9999").mask(telefone);
|
||||
|
||||
form.addEventListener("submit", (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
// Coletando os dados do formulário
|
||||
const medicoNovoOuAtualizado = {
|
||||
nome: document.getElementById("nome").value,
|
||||
celular: document.getElementById("celular").value,
|
||||
cidade: document.getElementById("cidade").value,
|
||||
estado: document.getElementById("estado").value,
|
||||
nomeSocial: document.getElementById("nomeSocial").value,
|
||||
cpf: document.getElementById("cpf").value.replace(/[.\-]/g, ""),
|
||||
outrosDocs: document.getElementById("outrosDocs").value,
|
||||
numDoc: document.getElementById("numDoc").value,
|
||||
sexo: document.getElementById("sexo").value,
|
||||
dataNascimento: document.getElementById("dataNascimento").value,
|
||||
etnia: document.getElementById("etnia").value,
|
||||
raca: document.getElementById("raca").value,
|
||||
nacionalidade: document.getElementById("nacionalidade").value,
|
||||
estadoCivil: document.getElementById("estadoCivil").value,
|
||||
nomeMae: document.getElementById("nomeMae").value,
|
||||
nomePai: document.getElementById("nomePai").value,
|
||||
nomeEsposo: document.getElementById("nomeEsposo").value,
|
||||
endereco: document.getElementById("endereco").value,
|
||||
numero: document.getElementById("numero").value,
|
||||
complemento: document.getElementById("complemento").value,
|
||||
bairro: document.getElementById("bairro").value,
|
||||
email: document.getElementById("email").value,
|
||||
telefone1: document.getElementById("telefone1").value,
|
||||
};
|
||||
|
||||
if (medicoParaEditar) {
|
||||
// Se for um medico para editar, atualiza os dados dele
|
||||
Object.assign(medicoParaEditar, medicoNovoOuAtualizado);
|
||||
} else {
|
||||
// Se for um novo medico, cria um ID único e o adiciona à lista
|
||||
medicoNovoOuAtualizado.id = Date.now();
|
||||
medicos.push(medicoNovoOuAtualizado);
|
||||
}
|
||||
|
||||
// Salva a lista atualizada de volta no localStorage
|
||||
localStorage.setItem("medicos", JSON.stringify(medicos));
|
||||
|
||||
// Redireciona para a página de listagem
|
||||
window.location.href = "../crud-medico.html";
|
||||
});
|
||||
}
|
||||
});
|
||||
450
clinicApp/pages-visao-clinica/medicos/crud-medico.css
Normal file
450
clinicApp/pages-visao-clinica/medicos/crud-medico.css
Normal file
@ -0,0 +1,450 @@
|
||||
/* Estilos para o container principal do CRUD */
|
||||
.crud-wrapper {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
align-items: flex-start;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.crud-header h1 {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.crud-header p {
|
||||
color: #666;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Estilos do Formulário */
|
||||
.form-container {
|
||||
background-color: #ffffff;
|
||||
padding: 25px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.form-container h2 {
|
||||
margin-bottom: 20px;
|
||||
font-weight: 500;
|
||||
font-size: 1.2rem;
|
||||
color: #007bff;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.input-group label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.input-group input,
|
||||
.input-group select {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #ccc;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-size: 0.95rem;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.input-group input:focus,
|
||||
.input-group select:focus {
|
||||
outline: none;
|
||||
border-color: #007bff;
|
||||
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.button-group button {
|
||||
padding: 10px 15px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #0056b3;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: #6c757d;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: #5a6268;
|
||||
}
|
||||
|
||||
|
||||
/* Estilos da Tabela */
|
||||
.table-container {
|
||||
background-color: #ffffff;
|
||||
padding: 25px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.table-container h2 {
|
||||
margin-bottom: 20px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
overflow-x: auto;
|
||||
/* Garante que a tabela seja rolável em telas pequenas */
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 12px 15px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
thead th {
|
||||
background-color: #f8f9fa;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
tbody tr:hover {
|
||||
background-color: #f1f3f5;
|
||||
}
|
||||
|
||||
td .btn-action {
|
||||
padding: 6px 10px;
|
||||
font-size: 14px;
|
||||
margin-right: 5px;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
td .btn-action:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.btn-edit {
|
||||
background-color: #28a745;
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
background-color: #dc3545;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-delete:hover {
|
||||
background-color: #c82333;
|
||||
}
|
||||
.btn-edit:hover {
|
||||
background-color: #218838;
|
||||
}
|
||||
|
||||
/* Responsividade para o conteúdo do CRUD */
|
||||
@media (max-width: 992px) {
|
||||
.crud-wrapper {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
/* força exibição do btn-primary caso haja override */
|
||||
.btn-primary {
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
/* espaçamento e alinhamento dos botões */
|
||||
.button-group {
|
||||
margin-top: 1.5rem;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.crud-header {
|
||||
padding: 2rem 1rem;
|
||||
margin: 1rem;
|
||||
background: linear-gradient(135deg, #0d6efd, #6610f2);
|
||||
color: rgb(251, 250, 250);
|
||||
border-radius: 0.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.crud-header h1 {
|
||||
font-size: 2rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.crud-header p {
|
||||
font-size: 1.1rem;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.filtros {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.btn-add {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
table {
|
||||
min-width: 600px;
|
||||
}
|
||||
|
||||
.main-button button {
|
||||
font-size: 17px;
|
||||
background: none;
|
||||
margin-right: 30px;
|
||||
margin-top: 10px;
|
||||
border: none;
|
||||
color: #243b51;
|
||||
padding: 20px 10px;
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: 0.6s;
|
||||
}
|
||||
|
||||
.main-button-border:hover {
|
||||
/*estilo no mouseenter*/
|
||||
border: none;
|
||||
margin-right: 30px;
|
||||
margin-top: 10px;
|
||||
padding: 20px 10px;
|
||||
background: none;
|
||||
border-bottom: 2px solid blue;
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.btn-add {
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
margin: 20px 0px;
|
||||
background-color: rgb(38, 137, 255);
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-add:hover {
|
||||
background-color: rgb(30, 110, 204);
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
padding: 8px;
|
||||
margin-left: 8px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
background-color: white;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.conteudo {
|
||||
margin-left: 30px;
|
||||
background-color: #fafafa;
|
||||
padding: 25px;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
/* Tabela */
|
||||
#pacientes-tabela {
|
||||
margin-top: 1.5rem;
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
border: 1px solid #ddd;
|
||||
background-color: white;
|
||||
font-size: 14px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#pacientes-tabela thead {
|
||||
background-color: #e9ecef;
|
||||
}
|
||||
|
||||
#pacientes-tabela thead th {
|
||||
padding: 12px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#pacientes-tabela tbody td {
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
#pacientes-tabela tbody tr:hover {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
#pacientes-tabela tbody td button {
|
||||
padding: 6px 10px;
|
||||
font-size: 14px;
|
||||
background-color: #6c757d;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#pacientes-tabela tbody td button:hover {
|
||||
background-color: #5a6268;
|
||||
}
|
||||
|
||||
/* Media queries melhoradas para responsividade */
|
||||
@media (max-width: 768px) {
|
||||
/* Melhor organização do conteúdo principal em mobile */
|
||||
.section-main-text {
|
||||
padding: 20px;
|
||||
padding-bottom: 0px;
|
||||
margin-top: 10rem;
|
||||
}
|
||||
|
||||
.section-main-text h1 {
|
||||
font-size: 28px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.section-main-text p {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.main-button {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.main-button button {
|
||||
margin-right: 0;
|
||||
margin-top: 5px;
|
||||
padding: 15px 8px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.conteudo {
|
||||
margin: 20px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* Formulário responsivo */
|
||||
#formLaudo {
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
#formLaudo fieldset {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#formLaudo button[type="submit"] {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* Tabela responsiva com scroll horizontal */
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
#pacientes-tabela {
|
||||
min-width: 600px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#pacientes-tabela thead th,
|
||||
#pacientes-tabela tbody td {
|
||||
padding: 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
/* Media query para tablets */
|
||||
@media (max-width: 1024px) and (min-width: 769px) {
|
||||
.section-main-text h1 {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.conteudo {
|
||||
margin: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Media query melhorada para telas muito pequenas */
|
||||
@media (max-width: 480px) {
|
||||
.section-main-text {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.section-main-text h1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.section-main-text p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.conteudo {
|
||||
margin: 15px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
#pacientes-tabela {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
#pacientes-tabela thead th,
|
||||
#pacientes-tabela tbody td {
|
||||
padding: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
164
clinicApp/pages-visao-clinica/medicos/crud-medico.html
Normal file
164
clinicApp/pages-visao-clinica/medicos/crud-medico.html
Normal file
@ -0,0 +1,164 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pt-BR">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Gestão de Médicos</title>
|
||||
<link rel="stylesheet" href="/Squad-21/clinicApp/global.css" />
|
||||
<link rel="stylesheet" href="./crud-medico.css" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/Squad-21/clinicApp/assets/style/bootstrap.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main>
|
||||
<div class="overlay" id="overlay"></div>
|
||||
|
||||
<div class="flex">
|
||||
<button class="hamburger-btn" id="hamburger-btn" aria-label="Abrir menu de navegação" aria-expanded="false">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
|
||||
<section class="sidebar" id="sidebar" role="navigation" aria-label="Menu principal">
|
||||
<div class="div-sidebar">
|
||||
<div class="abas">
|
||||
<a href="#" aria-label="Página inicial" class="logo1">
|
||||
<img src="https://images.vexels.com/media/users/3/142777/isolated/preview/84711206e52e0d4ff6c793cb476ea264-logotipo-medico-da-estrela-do-heartbeat.png"
|
||||
alt="Logo médico" id="logo-med" />
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#" aria-label="Pacientes">
|
||||
<img src="/Squad-21/clinicApp/assets/layoutIcons/icons8-estetoscópio-50.png"
|
||||
alt="Pacientes" class="icon-sidebar" />
|
||||
<p>Pacientes</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-label="Dashboard">
|
||||
<img src="/Squad-21/clinicApp/assets/layoutIcons/icons8-document.svg"
|
||||
alt="Dashboard" class="icon-sidebar" />
|
||||
<p>Dashboard</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="active-item"> <a href="#" aria-label="Médicos">
|
||||
<img src="/Squad-21/clinicApp/assets/layoutIcons/icons8-estetoscópio-50.png"
|
||||
alt="Médicos" class="icon-sidebar" />
|
||||
<p>Médicos</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-label="Laudos">
|
||||
<img src="https://i.imgur.com/Y8bXQ1E.png" alt="Laudos" class="icon-sidebar" />
|
||||
<p>Laudos</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-label="Agenda">
|
||||
<img src="https://i.imgur.com/Q3T6sN0.png" alt="Agenda" class="icon-sidebar" />
|
||||
<p>Agenda</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-label="Configurações">
|
||||
<img src="/Squad-21/clinicApp/assets/layoutIcons/icons8-configurações.svg"
|
||||
alt="Configurações" class="icon-sidebar" />
|
||||
<p>Settings</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="perfil-medico-sidebar">
|
||||
<h3>Dr. Rafael Andrade</h3>
|
||||
<p>Núcleo de Especialidades</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section-main">
|
||||
<nav class="nav" role="banner">
|
||||
<!-- <div class="div-search">
|
||||
<input type="text" class="search-input" placeholder="Buscar médico..."
|
||||
aria-label="Campo de busca" />
|
||||
<button class="search-button" aria-label="Buscar">
|
||||
<img src="/Squad-21/clinicApp/assets/layoutIcons/icons8-pesquisar.svg" alt="Buscar" />
|
||||
</button>
|
||||
</div> -->
|
||||
<div>
|
||||
<ul class="icon-lista">
|
||||
<li>
|
||||
<a href="#" aria-label="Ajuda"><img src="https://i.imgur.com/o2ba23i.png"
|
||||
alt="Ajuda" /></a>
|
||||
</li>
|
||||
<li>
|
||||
<button id="music" aria-label="Notificações"><img src="https://i.imgur.com/1BTRaKI.png"
|
||||
alt="Notificações" /></button>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-label="Perfil do usuário"><img src="https://i.imgur.com/so83EaA.png"
|
||||
alt="Usuário" /></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="main-contain">
|
||||
|
||||
<div class="crud-header">
|
||||
<h1>Gestão de Médicos</h1>
|
||||
<p>Adicione, visualize e gerencie os médicos da clínica.</p>
|
||||
</div>
|
||||
|
||||
<div class="conteudo">
|
||||
<a href="/Squad-21/clinicApp/pages-visao-clinica/medicos/addMedico/addMedico.html" id="btn-add2"
|
||||
class="btn-add"> + Cadastrar Médico </a>
|
||||
|
||||
<div class="filtros">
|
||||
<div class="div-search">
|
||||
<input type="text" id="search-input" class="search-input" placeholder="Buscar médico..."
|
||||
aria-label="Campo de busca" />
|
||||
<button id="search-button" class="search-button" aria-label="Buscar">
|
||||
<img src="../../assets/layoutIcons/icons8-pesquisar.svg" alt="Buscar" />
|
||||
</button>
|
||||
</div>
|
||||
<select id="filter-type" class="filter-select">
|
||||
<option value="geral">Geral</option>
|
||||
<option value="nome">Nome</option>
|
||||
<option value="telefone">Celular</option>
|
||||
<option value="cpf">CPF</option>
|
||||
<option value="status">Status</option>
|
||||
<option value="email">Email</option>
|
||||
</select>
|
||||
|
||||
</div>
|
||||
<!-- Container para scroll horizontal da tabela -->
|
||||
<div class="table-container">
|
||||
<table id="medicos-tabela">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nome</th>
|
||||
<th>Telefone</th>
|
||||
<th>CPF</th>
|
||||
<th>Status</th>
|
||||
<th>Ação</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script src="/Squad-21/clinicApp/scriptGlobal.js"></script>
|
||||
<script src="./crud-medico.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
329
clinicApp/pages-visao-clinica/medicos/crud-medico.js
Normal file
329
clinicApp/pages-visao-clinica/medicos/crud-medico.js
Normal file
@ -0,0 +1,329 @@
|
||||
// document.addEventListener("DOMContentLoaded", () => {
|
||||
// const tabelaMedicos = document.getElementById("medicos-tabela");
|
||||
// const tbody = tabelaMedicos?.querySelector("tbody");
|
||||
// const searchInput = document.getElementById("search-input");
|
||||
// const filterType = document.getElementById("filter-type");
|
||||
// const searchButton = document.getElementById("search-button");
|
||||
|
||||
// let pageAtual = 1;
|
||||
// const itensPorPagina = 10;
|
||||
// let carregando = false;
|
||||
// let buscaAtiva = false;
|
||||
// let termoBusca = "";
|
||||
// let tipoBusca = "geral";
|
||||
|
||||
// const renderizarLote = (medicos) => {
|
||||
// medicos.forEach((medico) => {
|
||||
// const row = document.createElement("tr");
|
||||
// row.innerHTML = `
|
||||
// <td>${medico.nome || "-"}</td>
|
||||
// <td>${medico.telefone || "-"}</td>
|
||||
// <td>${medico.cpf || "-"}</td>
|
||||
// <td>${medico.status || "-"}</td>
|
||||
// <td>
|
||||
// <button class="btn btn-edit" data-id="${medico.id}">Editar</button>
|
||||
// <button class="btn btn-detail" data-id="${medico.id}">Detalhes</button>
|
||||
// <button class="btn btn-delete" data-id="${medico.id}">Excluir</button>
|
||||
// </td>
|
||||
// `;
|
||||
// tbody.appendChild(row);
|
||||
// });
|
||||
|
||||
// adicionarEventos();
|
||||
// };
|
||||
|
||||
// const carregarMedicosDaAPI = async () => {
|
||||
// if (carregando) return;
|
||||
// carregando = true;
|
||||
|
||||
// try {
|
||||
// const response = await fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes?page=${pageAtual}&limit=${itensPorPagina}`);
|
||||
// const json = await response.json();
|
||||
// const novosMedicos = Array.isArray(json.data) ? json.data : [];
|
||||
|
||||
// console.log(novosMedicos)
|
||||
|
||||
// if (buscaAtiva && termoBusca.trim()) {
|
||||
// const termo = termoBusca.toLowerCase();
|
||||
// const filtrados = novosMedicos.filter((medico) => {
|
||||
// if (tipoBusca === "geral") {
|
||||
// return (
|
||||
// (medico.nome || "").toLowerCase().includes(termo) ||
|
||||
// (medico.telefone || "").toLowerCase().includes(termo) ||
|
||||
// (medico.status || "").toLowerCase().includes(termo) ||
|
||||
// (medico.email || "").toLowerCase().includes(termo) ||
|
||||
// (medico.cpf || "").toLowerCase().includes(termo)
|
||||
// );
|
||||
// } else {
|
||||
// return (medico[tipoBusca] || "").toLowerCase().includes(termo);
|
||||
// }
|
||||
// });
|
||||
|
||||
// renderizarLote(filtrados);
|
||||
// } else {
|
||||
// renderizarLote(novosMedicos);
|
||||
// }
|
||||
|
||||
// pageAtual++;
|
||||
// } catch (error) {
|
||||
// console.error("Erro ao carregar médicos da API:", error);
|
||||
// } finally {
|
||||
// carregando = false;
|
||||
// }
|
||||
// };
|
||||
|
||||
// const aplicarFiltro = () => {
|
||||
// tbody.innerHTML = "";
|
||||
// pageAtual = 1;
|
||||
// buscaAtiva = true;
|
||||
// termoBusca = searchInput.value;
|
||||
// tipoBusca = filterType.value;
|
||||
// carregarMedicosDaAPI();
|
||||
// };
|
||||
|
||||
// const adicionarEventos = () => {
|
||||
// document.querySelectorAll(".btn-edit").forEach((btn) => {
|
||||
// btn.addEventListener("click", (e) => {
|
||||
// const id = e.target.dataset.id;
|
||||
// window.location.href = `addMedico/addMedico.html?id=${id}`;
|
||||
// });
|
||||
// });
|
||||
|
||||
// document.querySelectorAll(".btn-detail").forEach((btn) => {
|
||||
// btn.addEventListener("click", (e) => {
|
||||
// const id = e.target.dataset.id;
|
||||
// window.location.href = `addMedico/addMedico.html?mode=detalhes&id=${id}`;
|
||||
// });
|
||||
// });
|
||||
|
||||
// document.querySelectorAll(".btn-delete").forEach((btn) => {
|
||||
// btn.addEventListener("click", async (e) => {
|
||||
// const id = e.target.dataset.id;
|
||||
// const confirmar = confirm("Tem certeza que deseja excluir este médico?");
|
||||
// if (!confirmar) return;
|
||||
|
||||
// try {
|
||||
// const response = await fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}`, {
|
||||
// method: "DELETE"
|
||||
// });
|
||||
|
||||
// if (response.ok) {
|
||||
// e.target.closest("tr").remove();
|
||||
// alert("Médico excluído com sucesso.");
|
||||
// } else {
|
||||
// alert("Erro ao excluir médico.");
|
||||
// }
|
||||
// } catch (error) {
|
||||
// console.error("Erro na exclusão:", error);
|
||||
// alert("Erro ao excluir médico.");
|
||||
// }
|
||||
// });
|
||||
// });
|
||||
// };
|
||||
|
||||
// window.addEventListener("scroll", () => {
|
||||
// const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
|
||||
// if (scrollTop + clientHeight >= scrollHeight - 5) {
|
||||
// carregarMedicosDaAPI();
|
||||
// }
|
||||
// });
|
||||
|
||||
// searchButton.addEventListener("click", aplicarFiltro);
|
||||
// searchInput.addEventListener("keyup", (e) => {
|
||||
// if (e.key === "Enter") aplicarFiltro();
|
||||
// });
|
||||
|
||||
// carregarMedicosDaAPI();
|
||||
// });
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const tabelaMedicos = document.getElementById("medicos-tabela");
|
||||
const tbody = tabelaMedicos?.querySelector("tbody");
|
||||
const searchInput = document.getElementById("search-input");
|
||||
const filterType = document.getElementById("filter-type");
|
||||
const searchButton = document.getElementById("search-button");
|
||||
|
||||
const token = "<token>"; // 🔐 Substitua pelo seu token real
|
||||
let pageAtual = 1;
|
||||
const itensPorPagina = 10;
|
||||
let carregando = false;
|
||||
let buscaAtiva = false;
|
||||
let termoBusca = "";
|
||||
let tipoBusca = "geral";
|
||||
|
||||
const renderizarLote = (medicos) => {
|
||||
medicos.forEach((medico) => {
|
||||
const row = document.createElement("tr");
|
||||
row.innerHTML = `
|
||||
<td>${medico.nome || "-"}</td>
|
||||
<td>${medico.telefone || "-"}</td>
|
||||
<td>${medico.cpf || "-"}</td>
|
||||
<td>${medico.status || "-"}</td>
|
||||
<td>
|
||||
<button class="btn btn-edit" data-id="${medico.id}">Editar</button>
|
||||
<button class="btn btn-detail" data-id="${medico.id}">Detalhes</button>
|
||||
<button class="btn btn-delete" data-id="${medico.id}">Excluir</button>
|
||||
</td>
|
||||
`;
|
||||
tbody.appendChild(row);
|
||||
});
|
||||
|
||||
adicionarEventos();
|
||||
};
|
||||
|
||||
const carregarMedicosDaAPI = async () => {
|
||||
if (carregando) return;
|
||||
carregando = true;
|
||||
|
||||
try {
|
||||
const response = await fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes?page=${pageAtual}&limit=${itensPorPagina}`);
|
||||
const json = await response.json();
|
||||
const novosMedicos = Array.isArray(json.data) ? json.data : [];
|
||||
|
||||
if (buscaAtiva && termoBusca.trim()) {
|
||||
const termo = termoBusca.toLowerCase();
|
||||
const filtrados = novosMedicos.filter((medico) => {
|
||||
if (tipoBusca === "geral") {
|
||||
return (
|
||||
(medico.nome || "").toLowerCase().includes(termo) ||
|
||||
(medico.telefone || "").toLowerCase().includes(termo) ||
|
||||
(medico.status || "").toLowerCase().includes(termo) ||
|
||||
(medico.email || "").toLowerCase().includes(termo) ||
|
||||
(medico.cpf || "").toLowerCase().includes(termo)
|
||||
);
|
||||
} else {
|
||||
return (medico[tipoBusca] || "").toLowerCase().includes(termo);
|
||||
}
|
||||
});
|
||||
|
||||
renderizarLote(filtrados);
|
||||
} else {
|
||||
renderizarLote(novosMedicos);
|
||||
}
|
||||
|
||||
pageAtual++;
|
||||
} catch (error) {
|
||||
console.error("Erro ao carregar médicos da API:", error);
|
||||
} finally {
|
||||
carregando = false;
|
||||
}
|
||||
};
|
||||
|
||||
const aplicarFiltro = () => {
|
||||
tbody.innerHTML = "";
|
||||
pageAtual = 1;
|
||||
buscaAtiva = true;
|
||||
termoBusca = searchInput.value;
|
||||
tipoBusca = filterType.value;
|
||||
carregarMedicosDaAPI();
|
||||
};
|
||||
|
||||
// const adicionarEventos = () => {
|
||||
// document.querySelectorAll(".btn-edit").forEach((btn) => {
|
||||
// btn.addEventListener("click", (e) => {
|
||||
// const id = e.target.dataset.id;
|
||||
// window.location.href = `addMedico/addMedico.html?id=${id}`;
|
||||
// });
|
||||
// });
|
||||
|
||||
// document.querySelectorAll(".btn-detail").forEach((btn) => {
|
||||
// btn.addEventListener("click", (e) => {
|
||||
// const id = e.target.dataset.id;
|
||||
// window.location.href = `addMedico/addMedico.html?mode=detalhes&id=${id}`;
|
||||
// });
|
||||
// });
|
||||
|
||||
// document.querySelectorAll(".btn-delete").forEach((btn) => {
|
||||
// btn.addEventListener("click", async (e) => {
|
||||
// const id = e.target.dataset.id;
|
||||
// const confirmar = confirm("Tem certeza que deseja excluir este médico?");
|
||||
// if (!confirmar) return;
|
||||
|
||||
// const myHeaders = new Headers();
|
||||
// myHeaders.append("Authorization", `Bearer ${token}`);
|
||||
|
||||
// const requestOptions = {
|
||||
// method: "DELETE",
|
||||
// headers: myHeaders,
|
||||
// redirect: "follow"
|
||||
// };
|
||||
|
||||
// try {
|
||||
// const response = await fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}`, requestOptions);
|
||||
// if (response.ok) {
|
||||
// e.target.closest("tr").remove();
|
||||
// alert("Médico excluído com sucesso.");
|
||||
// } else {
|
||||
// alert("Erro ao excluir médico. Código: " + response.status);
|
||||
// }
|
||||
// } catch (error) {
|
||||
// console.error("Erro na exclusão:", error);
|
||||
// alert("Erro ao excluir médico.");
|
||||
// }
|
||||
// });
|
||||
// });
|
||||
// };
|
||||
|
||||
const adicionarEventos = () => {
|
||||
tbody.addEventListener("click", async (e) => {
|
||||
const btn = e.target;
|
||||
const id = btn.dataset.id;
|
||||
|
||||
if (btn.classList.contains("btn-edit")) {
|
||||
window.location.href = `addMedico/addMedico.html?id=${id}`;
|
||||
}
|
||||
|
||||
if (btn.classList.contains("btn-detail")) {
|
||||
window.location.href = `addMedico/addMedico.html?mode=detalhes&id=${id}`;
|
||||
}
|
||||
|
||||
if (btn.classList.contains("btn-delete")) {
|
||||
if (btn.disabled) return; // evita múltiplos cliques
|
||||
const confirmar = confirm("Tem certeza que deseja excluir este médico?");
|
||||
if (!confirmar) return;
|
||||
|
||||
btn.disabled = true;
|
||||
btn.textContent = "Excluindo...";
|
||||
|
||||
const myHeaders = new Headers();
|
||||
myHeaders.append("Authorization", "Bearer <token>");
|
||||
|
||||
const requestOptions = {
|
||||
method: "DELETE",
|
||||
headers: myHeaders,
|
||||
redirect: "follow"
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}`, requestOptions);
|
||||
if (response.ok) {
|
||||
btn.closest("tr").remove();
|
||||
alert("Médico excluído com sucesso.");
|
||||
} else {
|
||||
alert("Erro ao excluir médico. Código: " + response.status);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Erro na exclusão:", error);
|
||||
alert("Erro ao excluir médico.");
|
||||
} finally {
|
||||
btn.disabled = false;
|
||||
btn.textContent = "Excluir";
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
window.addEventListener("scroll", () => {
|
||||
const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
|
||||
if (scrollTop + clientHeight >= scrollHeight - 5) {
|
||||
carregarMedicosDaAPI();
|
||||
}
|
||||
});
|
||||
|
||||
searchButton.addEventListener("click", aplicarFiltro);
|
||||
searchInput.addEventListener("keyup", (e) => {
|
||||
if (e.key === "Enter") aplicarFiltro();
|
||||
});
|
||||
|
||||
carregarMedicosDaAPI();
|
||||
});
|
||||
117
clinicApp/pages-visao-clinica/medicos/sla.css
Normal file
117
clinicApp/pages-visao-clinica/medicos/sla.css
Normal file
@ -0,0 +1,117 @@
|
||||
/* Container geral */
|
||||
.crud-wrapper {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* Formulário */
|
||||
.form-container {
|
||||
flex: 1;
|
||||
min-width: 280px;
|
||||
background: #fff;
|
||||
padding: 1.5rem;
|
||||
border-radius: 8px;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.form-container h2 {
|
||||
margin-bottom: 1rem;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.input-group label {
|
||||
display: block;
|
||||
margin-bottom: .3rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.input-group input,
|
||||
.input-group select {
|
||||
width: 100%;
|
||||
padding: .6rem;
|
||||
border: 1px solid var(--gray-light);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Botões */
|
||||
.button-group {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: .6rem 1.2rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--gray-light);
|
||||
color: var(--text);
|
||||
border: none;
|
||||
padding: .6rem 1.2rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Tabela */
|
||||
.table-container {
|
||||
flex: 2;
|
||||
min-width: 320px;
|
||||
background: #fff;
|
||||
padding: 1.5rem;
|
||||
border-radius: 8px;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: .8rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--gray-light);
|
||||
}
|
||||
|
||||
th {
|
||||
background: var(--gray-bg);
|
||||
}
|
||||
|
||||
.acoes button {
|
||||
margin-right: .4rem;
|
||||
padding: .3rem .6rem;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.acoes button:first-child {
|
||||
background: var(--warning);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.acoes button:last-child {
|
||||
background: var(--danger);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Responsividade */
|
||||
@media(max-width: 768px) {
|
||||
.crud-wrapper {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
225
clinicApp/pages-visao-clinica/medicos/sla.js
Normal file
225
clinicApp/pages-visao-clinica/medicos/sla.js
Normal file
@ -0,0 +1,225 @@
|
||||
// document.addEventListener('DOMContentLoaded', () => {
|
||||
// const medicoForm = document.getElementById('medicoForm');
|
||||
// const medicoIdInput = document.getElementById('medicoId');
|
||||
// const nomeInput = document.getElementById('nome');
|
||||
// const crmInput = document.getElementById('crm');
|
||||
// const especialidadeInput = document.getElementById('especialidade');
|
||||
// const telefoneInput = document.getElementById('telefone');
|
||||
// const emailInput = document.getElementById('email');
|
||||
// const statusInput = document.getElementById('status');
|
||||
// const cancelarBtn = document.getElementById('cancelarBtn');
|
||||
// const medicosTabelaBody = document.getElementById('medicosTabelaBody');
|
||||
|
||||
// let medicos = JSON.parse(localStorage.getItem('medicos')) || [];
|
||||
|
||||
// const salvarMedicos = () => {
|
||||
// localStorage.setItem('medicos', JSON.stringify(medicos));
|
||||
// };
|
||||
|
||||
// const renderizarTabela = () => {
|
||||
// medicosTabelaBody.innerHTML = '';
|
||||
|
||||
// if (medicos.length === 0) {
|
||||
// medicosTabelaBody.innerHTML = '<tr><td colspan="5" style="text-align:center;">Nenhum médico cadastrado.</td></tr>';
|
||||
// return;
|
||||
// }
|
||||
|
||||
// medicos.forEach(medico => {
|
||||
// const tr = document.createElement('tr');
|
||||
// tr.innerHTML = `
|
||||
// <td>${medico.nome}</td>
|
||||
// <td>${medico.crm}</td>
|
||||
// <td>${medico.especialidade}</td>
|
||||
// <td>${medico.status}</td>
|
||||
// <td>
|
||||
// <button class="btn-action btn-edit" data-crm="${medico.crm}">Editar</button>
|
||||
// <button class="btn-action btn-delete" data-crm="${medico.crm}">Excluir</button>
|
||||
// </td>
|
||||
// `;
|
||||
// medicosTabelaBody.appendChild(tr);
|
||||
// });
|
||||
// };
|
||||
|
||||
// const resetarFormulario = () => {
|
||||
// medicoForm.reset();
|
||||
// medicoIdInput.value = '';
|
||||
// crmInput.disabled = false;
|
||||
// cancelarBtn.style.display = 'none';
|
||||
// };
|
||||
|
||||
// medicoForm.addEventListener('submit', (e) => {
|
||||
// e.preventDefault();
|
||||
// const id = medicoIdInput.value;
|
||||
// const medico = {
|
||||
// nome: nomeInput.value.trim(),
|
||||
// crm: crmInput.value.trim(),
|
||||
// especialidade: especialidadeInput.value,
|
||||
// telefone: telefoneInput.value.trim(),
|
||||
// email: emailInput.value.trim(),
|
||||
// status: statusInput.value,
|
||||
// };
|
||||
|
||||
// if (id) {
|
||||
// const index = medicos.findIndex(m => m.crm === id);
|
||||
// if (index !== -1) {
|
||||
// medicos[index] = medico;
|
||||
// }
|
||||
// } else {
|
||||
// if (medicos.some(m => m.crm === medico.crm)) {
|
||||
// alert('CRM já cadastrado!');
|
||||
// return;
|
||||
// }
|
||||
// medicos.push(medico);
|
||||
// }
|
||||
|
||||
// salvarMedicos();
|
||||
// renderizarTabela();
|
||||
// resetarFormulario();
|
||||
// });
|
||||
|
||||
// medicosTabelaBody.addEventListener('click', (e) => {
|
||||
// const target = e.target;
|
||||
// const crm = target.getAttribute('data-crm');
|
||||
|
||||
// if (target.classList.contains('btn-edit')) {
|
||||
// const medicoParaEditar = medicos.find(m => m.crm === crm);
|
||||
// if (medicoParaEditar) {
|
||||
// medicoIdInput.value = medicoParaEditar.crm;
|
||||
// nomeInput.value = medicoParaEditar.nome;
|
||||
// crmInput.value = medicoParaEditar.crm;
|
||||
// crmInput.disabled = true;
|
||||
// especialidadeInput.value = medicoParaEditar.especialidade;
|
||||
// telefoneInput.value = medicoParaEditar.telefone;
|
||||
// emailInput.value = medicoParaEditar.email;
|
||||
// statusInput.value = medicoParaEditar.status;
|
||||
|
||||
// cancelarBtn.style.display = 'inline-block';
|
||||
// window.scrollTo(0, 0);
|
||||
// }
|
||||
// }
|
||||
|
||||
// if (target.classList.contains('btn-delete')) {
|
||||
// if (confirm(`Tem certeza que deseja excluir o médico com CRM ${crm}?`)) {
|
||||
// medicos = medicos.filter(m => m.crm !== crm);
|
||||
// salvarMedicos();
|
||||
// renderizarTabela();
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
|
||||
// cancelarBtn.addEventListener('click', () => {
|
||||
// resetarFormulario();
|
||||
// });
|
||||
|
||||
// renderizarTabela();
|
||||
// });
|
||||
|
||||
// Seletores
|
||||
// const form = document.getElementById('medicoForm');
|
||||
// const tabelaBody = document.getElementById('medicosTabelaBody');
|
||||
// const cancelarBtn = document.getElementById('cancelarBtn');
|
||||
// const searchInput = document.querySelector('.search-input');
|
||||
|
||||
// let medicos = [];
|
||||
|
||||
// // Carrega dados do localStorage ao iniciar
|
||||
// document.addEventListener('DOMContentLoaded', () => {
|
||||
// const stored = localStorage.getItem('medicos');
|
||||
// medicos = stored ? JSON.parse(stored) : [];
|
||||
// renderMedicos(medicos);
|
||||
// });
|
||||
|
||||
// // Função para renderizar lista de médicos
|
||||
// function renderMedicos(lista) {
|
||||
// tabelaBody.innerHTML = '';
|
||||
// lista.forEach(m => {
|
||||
// const tr = document.createElement('tr');
|
||||
// tr.innerHTML = `
|
||||
// <td>${m.nome}</td>
|
||||
// <td>${m.crm}</td>
|
||||
// <td>${m.especialidade}</td>
|
||||
// <td>${m.status}</td>
|
||||
// <td class="acoes">
|
||||
// <button onclick="editarMedico('${m.id}')">Editar</button>
|
||||
// <button onclick="excluirMedico('${m.id}')">Excluir</button>
|
||||
// </td>`;
|
||||
// tabelaBody.appendChild(tr);
|
||||
// });
|
||||
// }
|
||||
|
||||
// // Salva no localStorage
|
||||
// function salvarLocalStorage() {
|
||||
// localStorage.setItem('medicos', JSON.stringify(medicos));
|
||||
// }
|
||||
|
||||
// // Trata submissão do formulário
|
||||
// form.addEventListener('submit', e => {
|
||||
// e.preventDefault();
|
||||
// const idField = document.getElementById('medicoId');
|
||||
// const nome = document.getElementById('nome').value.trim();
|
||||
// const crm = document.getElementById('crm').value.trim();
|
||||
// const especialidade = document.getElementById('especialidade').value;
|
||||
// const telefone = document.getElementById('telefone').value.trim();
|
||||
// const email = document.getElementById('email').value.trim();
|
||||
// const status = document.getElementById('status').value;
|
||||
|
||||
// // Validação mínima
|
||||
// if (!nome || !crm || !especialidade) return;
|
||||
|
||||
// if (idField.value) {
|
||||
// // Edição
|
||||
// const idx = medicos.findIndex(m => m.id === idField.value);
|
||||
// medicos[idx] = { id: idField.value, nome, crm, especialidade, telefone, email, status };
|
||||
// } else {
|
||||
// // Criação
|
||||
// const novoMedico = {
|
||||
// id: Date.now().toString(),
|
||||
// nome, crm, especialidade, telefone, email, status
|
||||
// };
|
||||
// medicos.push(novoMedico);
|
||||
// }
|
||||
|
||||
// salvarLocalStorage();
|
||||
// renderMedicos(medicos);
|
||||
// form.reset();
|
||||
// idField.value = '';
|
||||
// cancelarBtn.style.display = 'none';
|
||||
// });
|
||||
|
||||
// // Função para iniciar edição
|
||||
// window.editarMedico = function(id) {
|
||||
// const m = medicos.find(m => m.id === id);
|
||||
// document.getElementById('medicoId').value = m.id;
|
||||
// document.getElementById('nome').value = m.nome;
|
||||
// document.getElementById('crm').value = m.crm;
|
||||
// document.getElementById('especialidade').value = m.especialidade;
|
||||
// document.getElementById('telefone').value = m.telefone;
|
||||
// document.getElementById('email').value = m.email;
|
||||
// document.getElementById('status').value = m.status;
|
||||
// cancelarBtn.style.display = 'inline-block';
|
||||
// };
|
||||
|
||||
// // Função para excluir médico
|
||||
// window.excluirMedico = function(id) {
|
||||
// if (!confirm('Tem certeza que deseja excluir este médico?')) return;
|
||||
// medicos = medicos.filter(m => m.id !== id);
|
||||
// salvarLocalStorage();
|
||||
// renderMedicos(medicos);
|
||||
// };
|
||||
|
||||
// // Cancelar edição
|
||||
// cancelarBtn.addEventListener('click', () => {
|
||||
// form.reset();
|
||||
// document.getElementById('medicoId').value = '';
|
||||
// cancelarBtn.style.display = 'none';
|
||||
// });
|
||||
|
||||
// // Filtro de busca
|
||||
// searchInput.addEventListener('input', () => {
|
||||
// const termo = searchInput.value.toLowerCase();
|
||||
// const filtrados = medicos.filter(m =>
|
||||
// m.nome.toLowerCase().includes(termo) ||
|
||||
// m.crm.toLowerCase().includes(termo)
|
||||
// );
|
||||
// renderMedicos(filtrados);
|
||||
// });
|
||||
0
clinicApp/pages/agendamento/agendamento.css
Normal file
0
clinicApp/pages/agendamento/agendamento.css
Normal file
86
clinicApp/pages/agendamento/agendamento.html
Normal file
86
clinicApp/pages/agendamento/agendamento.html
Normal file
@ -0,0 +1,86 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pt-BR">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Crud + Layout</title>
|
||||
<link rel="stylesheet" href="../../global.css" />
|
||||
<!-- css da página -->
|
||||
<link rel="stylesheet" href="#" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main>
|
||||
<!-- Overlay só aparece em mobile quando menu está ativo -->
|
||||
<div class="overlay" id="overlay"></div>
|
||||
|
||||
<div class="flex">
|
||||
<!-- Botão hambúrguer só aparece em mobile -->
|
||||
<button class="hamburger-btn" id="hamburger-btn" aria-label="Abrir menu de navegação" aria-expanded="false">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
|
||||
<!-- Sidebar agora se comporta diferente em desktop vs mobile -->
|
||||
<section class="sidebar" id="sidebar" role="navigation" aria-label="Menu principal">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#" aria-label="Página inicial">
|
||||
<img src="https://images.vexels.com/media/users/3/142777/isolated/preview/84711206e52e0d4ff6c793cb476ea264-logotipo-medico-da-estrela-do-heartbeat.png" alt="Logo médico" id="logo-med" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-label="Pacientes">
|
||||
<img src="../../assets/layoutIcons/icons8-estetoscópio-50.png" alt="Pacientes" class="icon-sidebar" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-label="Cadastro de usuários">
|
||||
<img src="../../assets/layoutIcons/icons8-grupo-de-usuário-homem-homem-50.png" alt="Cadastro" class="icon-sidebar" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-label="Documentos">
|
||||
<img src="../../assets/layoutIcons/icons8-document.svg" alt="Documentos" class="icon-sidebar" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-label="Configurações">
|
||||
<img src="../../assets/layoutIcons/icons8-configurações.svg" alt="Configurações" class="icon-sidebar" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<!-- Seção principal sem padding-top desnecessário -->
|
||||
<section class="section-main">
|
||||
<nav class="nav" role="banner">
|
||||
<div class="div-search">
|
||||
<input type="text" class="search-input" placeholder="Buscar paciente" aria-label="Campo de busca" />
|
||||
<button class="search-button" aria-label="Buscar">
|
||||
<img src="../../assets/layoutIcons/icons8-pesquisar.svg" alt="Buscar" />
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<ul class="icon-lista">
|
||||
<li>
|
||||
<a href="#" aria-label="Ajuda"><img src="../../assets/layoutIcons/icons8-ajuda-50.png" alt="Ajuda" /></a>
|
||||
</li>
|
||||
<li>
|
||||
<button aria-label="Notificações"><img src="../../assets/layoutIcons/botao-ativar-notificacoes.png" alt="Notificações" /></button>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-label="Perfil do usuário"><img src="../../assets/layoutIcons/icons8-usuário-50.png" alt="Usuário" /></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
<!-- script da página -->
|
||||
<script src="#"></script>
|
||||
<script src="../../scriptGlobal.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
0
clinicApp/pages/agendamento/agendamento.js
Normal file
0
clinicApp/pages/agendamento/agendamento.js
Normal file
0
clinicApp/pages/dashboard/dashboard.css
Normal file
0
clinicApp/pages/dashboard/dashboard.css
Normal file
86
clinicApp/pages/dashboard/dashboard.html
Normal file
86
clinicApp/pages/dashboard/dashboard.html
Normal file
@ -0,0 +1,86 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pt-BR">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Crud + Layout</title>
|
||||
<link rel="stylesheet" href="../../global.css" />
|
||||
<!-- css da página -->
|
||||
<link rel="stylesheet" href="#" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main>
|
||||
<!-- Overlay só aparece em mobile quando menu está ativo -->
|
||||
<div class="overlay" id="overlay"></div>
|
||||
|
||||
<div class="flex">
|
||||
<!-- Botão hambúrguer só aparece em mobile -->
|
||||
<button class="hamburger-btn" id="hamburger-btn" aria-label="Abrir menu de navegação" aria-expanded="false">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
|
||||
<!-- Sidebar agora se comporta diferente em desktop vs mobile -->
|
||||
<section class="sidebar" id="sidebar" role="navigation" aria-label="Menu principal">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../pages/home/home.html" aria-label="Página inicial">
|
||||
<img src="https://images.vexels.com/media/users/3/142777/isolated/preview/84711206e52e0d4ff6c793cb476ea264-logotipo-medico-da-estrela-do-heartbeat.png" alt="Logo médico" id="logo-med" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../pages/pacientes/paciente.html" aria-label="Pacientes">
|
||||
<img src="../../assets/layoutIcons/icons8-estetoscópio-50.png" alt="Pacientes" class="icon-sidebar" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../pages/agendamento/agendamento.html" aria-label="Cadastro de usuários">
|
||||
<img src="../../assets/layoutIcons/icons8-grupo-de-usuário-homem-homem-50.png" alt="Cadastro" class="icon-sidebar" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../pages/laudo/laudoMedico.html" aria-label="Documentos">
|
||||
<img src="../../assets/layoutIcons/icons8-document.svg" alt="Documentos" class="icon-sidebar" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-label="Configurações">
|
||||
<img src="../../assets/layoutIcons/icons8-configurações.svg" alt="Configurações" class="icon-sidebar" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<!-- Seção principal sem padding-top desnecessário -->
|
||||
<section class="section-main">
|
||||
<nav class="nav" role="banner">
|
||||
<div class="div-search">
|
||||
<input type="text" class="search-input" placeholder="Buscar paciente" aria-label="Campo de busca" />
|
||||
<button class="search-button" aria-label="Buscar">
|
||||
<img src="../../assets/layoutIcons/icons8-pesquisar.svg" alt="Buscar" />
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<ul class="icon-lista">
|
||||
<li>
|
||||
<a href="#" aria-label="Ajuda"><img src="../../assets/layoutIcons/icons8-ajuda-50.png" alt="Ajuda" /></a>
|
||||
</li>
|
||||
<li>
|
||||
<button aria-label="Notificações"><img src="../../assets/layoutIcons/botao-ativar-notificacoes.png" alt="Notificações" /></button>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-label="Perfil do usuário"><img src="../../assets/layoutIcons/icons8-usuário-50.png" alt="Usuário" /></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
<!-- script da página -->
|
||||
<script src="#"></script>
|
||||
<script src="../../scriptGlobal.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
0
clinicApp/pages/dashboard/dashboard.js
Normal file
0
clinicApp/pages/dashboard/dashboard.js
Normal file
0
clinicApp/pages/home/home.css
Normal file
0
clinicApp/pages/home/home.css
Normal file
86
clinicApp/pages/home/home.html
Normal file
86
clinicApp/pages/home/home.html
Normal file
@ -0,0 +1,86 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pt-BR">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Crud + Layout</title>
|
||||
<link rel="stylesheet" href="../../global.css" />
|
||||
<!-- css da página -->
|
||||
<link rel="stylesheet" href="#" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main>
|
||||
<!-- Overlay só aparece em mobile quando menu está ativo -->
|
||||
<div class="overlay" id="overlay"></div>
|
||||
|
||||
<div class="flex">
|
||||
<!-- Botão hambúrguer só aparece em mobile -->
|
||||
<button class="hamburger-btn" id="hamburger-btn" aria-label="Abrir menu de navegação" aria-expanded="false">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
|
||||
<!-- Sidebar agora se comporta diferente em desktop vs mobile -->
|
||||
<section class="sidebar" id="sidebar" role="navigation" aria-label="Menu principal">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../pages/home/home.html" aria-label="Página inicial">
|
||||
<img src="https://images.vexels.com/media/users/3/142777/isolated/preview/84711206e52e0d4ff6c793cb476ea264-logotipo-medico-da-estrela-do-heartbeat.png" alt="Logo médico" id="logo-med" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../pages/pacientes/paciente.html" aria-label="Pacientes">
|
||||
<img src="../../assets/layoutIcons/icons8-estetoscópio-50.png" alt="Pacientes" class="icon-sidebar" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-label="Cadastro de usuários">
|
||||
<img src="../../assets/layoutIcons/icons8-grupo-de-usuário-homem-homem-50.png" alt="Cadastro" class="icon-sidebar" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../pages/laudo/laudoMedico.html" aria-label="Documentos">
|
||||
<img src="../../assets/layoutIcons/icons8-document.svg" alt="Documentos" class="icon-sidebar" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-label="Configurações">
|
||||
<img src="../../assets/layoutIcons/icons8-configurações.svg" alt="Configurações" class="icon-sidebar" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<!-- Seção principal sem padding-top desnecessário -->
|
||||
<section class="section-main">
|
||||
<nav class="nav" role="banner">
|
||||
<div class="div-search">
|
||||
<input type="text" class="search-input" placeholder="Buscar paciente" aria-label="Campo de busca" />
|
||||
<button class="search-button" aria-label="Buscar">
|
||||
<img src="../../assets/layoutIcons/icons8-pesquisar.svg" alt="Buscar" />
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<ul class="icon-lista">
|
||||
<li>
|
||||
<a href="#" aria-label="Ajuda"><img src="../../assets/layoutIcons/icons8-ajuda-50.png" alt="Ajuda" /></a>
|
||||
</li>
|
||||
<li>
|
||||
<button aria-label="Notificações"><img src="../../assets/layoutIcons/botao-ativar-notificacoes.png" alt="Notificações" /></button>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-label="Perfil do usuário"><img src="../../assets/layoutIcons/icons8-usuário-50.png" alt="Usuário" /></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
<!-- script da página -->
|
||||
<script src="#"></script>
|
||||
<script src="../../scriptGlobal.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
0
clinicApp/pages/home/home.js
Normal file
0
clinicApp/pages/home/home.js
Normal file
260
clinicApp/pages/laudo/laudo.css
Normal file
260
clinicApp/pages/laudo/laudo.css
Normal file
@ -0,0 +1,260 @@
|
||||
fieldset {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
fieldset label {
|
||||
font-family: "Times New Roman", Times, serif;
|
||||
}
|
||||
|
||||
fieldset input {
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
margin-top: 5px;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
#form-tittle {
|
||||
width: 93%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
margin-bottom: 10px;
|
||||
padding-right: 25px;
|
||||
}
|
||||
|
||||
#form-tittle label {
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
color: #243b51;
|
||||
}
|
||||
|
||||
.section-main-text {
|
||||
padding: 30px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
||||
.section-main-text h1 {
|
||||
margin-bottom: 15px;
|
||||
font-size: 35px;
|
||||
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
|
||||
}
|
||||
|
||||
.section-main-text p {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.main-button button {
|
||||
font-size: 17px;
|
||||
background: none;
|
||||
margin-right: 30px;
|
||||
margin-top: 10px;
|
||||
border: none;
|
||||
color: #243b51;
|
||||
padding: 20px 10px;
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: 0.6s;
|
||||
}
|
||||
|
||||
.main-button-border:hover {
|
||||
/*estilo no mouseenter*/
|
||||
border: none;
|
||||
margin-right: 30px;
|
||||
margin-top: 10px;
|
||||
padding: 20px 10px;
|
||||
background: none;
|
||||
border-bottom: 2px solid blue;
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.conteudo {
|
||||
margin-left: 30px;
|
||||
background-color: #fafafa;
|
||||
padding: 25px;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
/*formulário */
|
||||
#formLaudo {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
background-color: #f8f9fa;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #ddd;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#formLaudo button[type="submit"] {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
padding: 10px 16px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
#formLaudo button[type="submit"]:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
/* Tabela */
|
||||
#laudoTable {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
border: 1px solid #ddd;
|
||||
background-color: white;
|
||||
font-size: 14px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#laudoTable thead {
|
||||
background-color: #e9ecef;
|
||||
}
|
||||
|
||||
#laudoTable thead th {
|
||||
padding: 12px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#laudoTable tbody td {
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
#laudoTable tbody tr:hover {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
#laudoTable tbody td button {
|
||||
padding: 6px 10px;
|
||||
font-size: 14px;
|
||||
background-color: #6c757d;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#laudoTable tbody td button:hover {
|
||||
background-color: #5a6268;
|
||||
}
|
||||
|
||||
/* Media queries melhoradas para responsividade */
|
||||
@media (max-width: 768px) {
|
||||
/* Melhor organização do conteúdo principal em mobile */
|
||||
.section-main-text {
|
||||
padding: 20px;
|
||||
padding-bottom: 0px;
|
||||
margin-top: 10rem;
|
||||
}
|
||||
|
||||
.section-main-text h1 {
|
||||
font-size: 28px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.section-main-text p {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.main-button {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.main-button button {
|
||||
margin-right: 0;
|
||||
margin-top: 5px;
|
||||
padding: 15px 8px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.conteudo {
|
||||
margin: 20px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* Formulário responsivo */
|
||||
#formLaudo {
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
#formLaudo fieldset {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#formLaudo button[type="submit"] {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* Tabela responsiva com scroll horizontal */
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
#laudoTable {
|
||||
min-width: 600px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#laudoTable thead th,
|
||||
#laudoTable tbody td {
|
||||
padding: 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
/* Media query para tablets */
|
||||
@media (max-width: 1024px) and (min-width: 769px) {
|
||||
.section-main-text h1 {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.conteudo {
|
||||
margin: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Media query melhorada para telas muito pequenas */
|
||||
@media (max-width: 480px) {
|
||||
.section-main-text {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.section-main-text h1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.section-main-text p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.conteudo {
|
||||
margin: 15px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
#laudoTable {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
#laudoTable thead th,
|
||||
#laudoTable tbody td {
|
||||
padding: 6px;
|
||||
}
|
||||
}
|
||||
53
clinicApp/pages/laudo/laudo.js
Normal file
53
clinicApp/pages/laudo/laudo.js
Normal file
@ -0,0 +1,53 @@
|
||||
const form = document.getElementById("formLaudo");
|
||||
const tbody = document.querySelector("#laudoTable tbody");
|
||||
const button = document.querySelectorAll(".button");
|
||||
|
||||
// Função para adicionar linha
|
||||
function adicionarLinhaNaTabela(item) {
|
||||
const tr = document.createElement("tr");
|
||||
tr.innerHTML = `
|
||||
<td>${item.pedido}</td>
|
||||
<td>${item.data}</td>
|
||||
<td>${item.prazo}</td>
|
||||
<td>${item.paciente}</td>
|
||||
<td>${item.solicitante}</td>
|
||||
<td>${item.classificacao}</td>
|
||||
<td><button>...</button></td>
|
||||
`;
|
||||
tbody.appendChild(tr);
|
||||
}
|
||||
|
||||
// Carregar dados salvos
|
||||
function carregarDadosSalvos() {
|
||||
const dados = JSON.parse(localStorage.getItem("laudos")) || [];
|
||||
dados.forEach(adicionarLinhaNaTabela);
|
||||
}
|
||||
|
||||
// Salvar novo item
|
||||
function salvarItem(item) {
|
||||
const dados = JSON.parse(localStorage.getItem("laudos")) || [];
|
||||
dados.push(item);
|
||||
localStorage.setItem("laudos", JSON.stringify(dados));
|
||||
}
|
||||
|
||||
// Evento de envio do formulário
|
||||
form.addEventListener("submit", (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const item = {
|
||||
pedido: document.getElementById("pedido").value,
|
||||
data: document.getElementById("data").value,
|
||||
prazo: document.getElementById("prazo").value,
|
||||
paciente: document.getElementById("paciente").value,
|
||||
solicitante: document.getElementById("solicitante").value,
|
||||
classificacao: document.getElementById("classificacao").value,
|
||||
acao: "...",
|
||||
};
|
||||
|
||||
adicionarLinhaNaTabela(item);
|
||||
salvarItem(item);
|
||||
form.reset();
|
||||
});
|
||||
|
||||
// Carregar ao abrir
|
||||
window.addEventListener("DOMContentLoaded", carregarDadosSalvos);
|
||||
121
clinicApp/pages/laudo/laudoMedico.html
Normal file
121
clinicApp/pages/laudo/laudoMedico.html
Normal file
@ -0,0 +1,121 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pt-BR">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Crud + Layout</title>
|
||||
<link rel="stylesheet" href="/Squad-21/clinicApp/global.css" />
|
||||
<link rel="stylesheet" href="./laudo.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main>
|
||||
<!-- Overlay só aparece em mobile quando menu está ativo -->
|
||||
<div class="overlay" id="overlay"></div>
|
||||
|
||||
<div class="flex">
|
||||
<!-- Botão hambúrguer só aparece em mobile -->
|
||||
<button class="hamburger-btn" id="hamburger-btn" aria-label="Abrir menu de navegação" aria-expanded="false">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
|
||||
<!-- Sidebar agora se comporta diferente em desktop vs mobile -->
|
||||
<section class="sidebar" id="sidebar" role="navigation" aria-label="Menu principal">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../pages/home/home.html" aria-label="Página inicial">
|
||||
<img src="https://images.vexels.com/media/users/3/142777/isolated/preview/84711206e52e0d4ff6c793cb476ea264-logotipo-medico-da-estrela-do-heartbeat.png"
|
||||
alt="Logo médico" id="logo-med" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../pages/pacientes/paciente.html" aria-label="Pacientes">
|
||||
<img src="../../assets/layoutIcons/icons8-estetoscópio-50.png" alt="Pacientes"
|
||||
class="icon-sidebar" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-label="Cadastro de usuários">
|
||||
<img src="../../assets/layoutIcons/icons8-grupo-de-usuário-homem-homem-50.png"
|
||||
alt="Cadastro" class="icon-sidebar" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../pages/laudo/laudoMedico.html" aria-label="Documentos">
|
||||
<img src="../../assets/layoutIcons/icons8-document.svg" alt="Documentos"
|
||||
class="icon-sidebar" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-label="Configurações">
|
||||
<img src="../../assets/layoutIcons/icons8-configurações.svg" alt="Configurações"
|
||||
class="icon-sidebar" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<!-- Seção principal sem padding-top desnecessário -->
|
||||
<section class="section-main">
|
||||
<nav class="nav" role="banner">
|
||||
<div class="div-search">
|
||||
<input type="text" class="search-input" placeholder="Buscar paciente"
|
||||
aria-label="Campo de busca" />
|
||||
<button class="search-button" aria-label="Buscar">
|
||||
<img src="../../assets/layoutIcons/icons8-pesquisar.svg" alt="Buscar" />
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<ul class="icon-lista">
|
||||
<li>
|
||||
<a href="#" aria-label="Ajuda"><img
|
||||
src="/clinicApp/assets/layoutIcons/icons8-ajuda-50.png" alt="Ajuda" /></a>
|
||||
</li>
|
||||
<li>
|
||||
<button aria-label="Notificações"><img
|
||||
src="/clinicApp/assets/layoutIcons/botao-ativar-notificacoes.png"
|
||||
alt="Notificações" /></button>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-label="Perfil do usuário"><img
|
||||
src="/clinicApp/assets/layoutIcons/icons8-usuário-50.png" alt="Usuário" /></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="section-main-text">
|
||||
<h1>Laudo Médico</h1>
|
||||
<p>Nesta seção você pode gerenciar todos os laudos gerados através da integração.</p>
|
||||
<!-- <div class="main-button">
|
||||
<button class="button main-button-border">A descrever</button>
|
||||
<button class="button main-button-border">Liberado</button>
|
||||
<button class="button main-button-border">Entregue</button>
|
||||
</div> -->
|
||||
<div id="editor" style="border:1px solid #ccc; padding:1rem; border-radius:8px;"></div>
|
||||
</div>
|
||||
<div class="conteudo">
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script src="laudo.js"></script>
|
||||
<script src="../../scriptGlobal.js"></script>
|
||||
<!-- TipTap Editor -->
|
||||
<script type="module">
|
||||
import { Editor } from 'https://esm.sh/@tiptap/core'
|
||||
import StarterKit from 'https://esm.sh/@tiptap/starter-kit'
|
||||
|
||||
const editor = new Editor({
|
||||
element: document.querySelector('#editor'),
|
||||
extensions: [StarterKit],
|
||||
content: '<p>Olá, mundo!</p>',
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
0
clinicApp/pages/login/login.css
Normal file
0
clinicApp/pages/login/login.css
Normal file
0
clinicApp/pages/login/login.html
Normal file
0
clinicApp/pages/login/login.html
Normal file
0
clinicApp/pages/login/login.js
Normal file
0
clinicApp/pages/login/login.js
Normal file
949
clinicApp/pages/pacientes/addPaciente/addPacient.css
Normal file
949
clinicApp/pages/pacientes/addPaciente/addPacient.css
Normal file
@ -0,0 +1,949 @@
|
||||
:root {
|
||||
--bg-main: #f3f0f0;
|
||||
--bg-nav: #fafafa;
|
||||
--bg-modal: #fff;
|
||||
--sombra-modal: 0 4px 15px rgba(0, 0, 0, 0.3);
|
||||
--sombra-sidebar: 15px 0px 15px rgba(0, 0, 0, 0.3);
|
||||
--cor-cinza-claro: #f1f1f1;
|
||||
--cor-cinza-medio: #ccc;
|
||||
--cor-cinza-escuro: #666;
|
||||
--cor-tabela-header: #f3f0f0;
|
||||
--cor-principal: rgb(38, 137, 255);
|
||||
--cor-hover-principal: rgb(30, 110, 204);
|
||||
--cor-borda-input-foco: #2e7d32;
|
||||
--cor-fundo-botao-salvar: #2e7d32;
|
||||
--cor-hover-salvar: #256628;
|
||||
}
|
||||
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
padding-top: 1.25rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 5vw;
|
||||
height: 100vh;
|
||||
background-color: white;
|
||||
box-shadow: var(--sombra-sidebar);
|
||||
}
|
||||
|
||||
.sidebar ul {
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sidebar ul li {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.icon-sidebar {
|
||||
width: 17px;
|
||||
padding: 10px 13px 5px 13px;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.icon-sidebar:hover {
|
||||
background-color: var(--cor-cinza-claro);
|
||||
}
|
||||
|
||||
.section-main {
|
||||
width: 95vw;
|
||||
background-color: var(--bg-main);
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: var(--bg-nav);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.div-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
transition: border 0.2s;
|
||||
}
|
||||
|
||||
.div-search:hover {
|
||||
border: 1.5px solid darkgray;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
height: 38px;
|
||||
width: 20vw;
|
||||
padding-left: 10px;
|
||||
border-radius: 5px;
|
||||
border: 1.5px solid var(--cor-cinza-medio);
|
||||
}
|
||||
|
||||
.search-button {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.icon-lista {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
gap: 30px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.icon-lista li a img,
|
||||
img {
|
||||
width: 22px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.btn-add,
|
||||
.btn {
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.btn-add {
|
||||
margin: 20px;
|
||||
background-color: var(--cor-principal);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-add:hover {
|
||||
background-color: var(--cor-hover-principal);
|
||||
}
|
||||
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: var(--bg-modal);
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
width: 800px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
box-shadow: var(--sombra-modal);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.modal-content h2 {
|
||||
margin-bottom: 15px;
|
||||
font-size: 20px;
|
||||
color: #333;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 15px;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
color: var(--cor-cinza-escuro);
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
margin-bottom: 4px;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group select {
|
||||
padding: 8px;
|
||||
height: 32px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--cor-cinza-medio);
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group select:focus {
|
||||
border-color: var(--cor-borda-input-foco);
|
||||
box-shadow: 0 0 5px rgba(46, 125, 50, 0.3);
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.form-check-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 5px;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
color: #444;
|
||||
min-width: unset;
|
||||
max-width: fit-content;
|
||||
|
||||
.modal-actions {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.btn-save {
|
||||
background: var(--cor-fundo-botao-salvar);
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
padding: 8px 15px;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
background: var(--cor-cinza-medio);
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
padding: 8px 15px;
|
||||
}
|
||||
|
||||
.btn-save:hover {
|
||||
background: var(--cor-hover-salvar);
|
||||
}
|
||||
|
||||
.btn-cancel:hover {
|
||||
background: #b3b3b3;
|
||||
}
|
||||
|
||||
.btn-edit,
|
||||
.btn-delete {
|
||||
padding: 5px 10px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
background-color: lightgrey;
|
||||
color: #000;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.btn-edit:hover,
|
||||
.btn-delete:hover {
|
||||
background-color: #d3d3d3;
|
||||
}
|
||||
|
||||
/* Tabela de pacientes */
|
||||
.paciente-table {
|
||||
width: 95%; /* Use a largura da tela disponível */
|
||||
margin: 20px auto;
|
||||
border-collapse: collapse;
|
||||
background-color: var(--bg-modal);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.paciente-table th,
|
||||
.paciente-table td {
|
||||
padding: 12px 15px; /* Aumentei o padding para dar mais espaço */
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #ddd;
|
||||
font-size: 15px; /* Ajustei o tamanho da fonte */
|
||||
white-space: nowrap; /* Impede que o texto quebre para a próxima linha */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis; /* Adiciona "..." se o texto for muito longo */
|
||||
}
|
||||
|
||||
.paciente-table th {
|
||||
background-color: var(--cor-tabela-header);
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
text-transform: uppercase; /* Transforma o texto do cabeçalho em maiúsculas */
|
||||
}
|
||||
|
||||
/* Deixa a tabela responsiva para dispositivos menores */
|
||||
@media (max-width: 768px) {
|
||||
.paciente-table {
|
||||
display: block;
|
||||
overflow-x: auto; /* Adiciona uma barra de rolagem horizontal */
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.paciente-table thead,
|
||||
.paciente-table tbody,
|
||||
.paciente-table th,
|
||||
.paciente-table td,
|
||||
.paciente-table tr {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.paciente-table tr {
|
||||
margin-bottom: 15px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.paciente-table td {
|
||||
border-bottom: 1px solid #eee;
|
||||
position: relative;
|
||||
padding-left: 50%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.paciente-table td::before {
|
||||
content: attr(data-label);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 50%;
|
||||
padding-left: 15px;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Container de formulário para a nova página - AGORA OCUPARÁ A LARGURA TOTAL */
|
||||
.full-page-form-container {
|
||||
width: 95%;
|
||||
margin: 20px auto;
|
||||
padding: 30px;
|
||||
background-color: var(--bg-modal);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Divisores de Seção (Endereço, etc) */
|
||||
.section-divider {
|
||||
font-size: 1.2em;
|
||||
font-weight: bold;
|
||||
color: #444;
|
||||
margin: 35px 0 20px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
/* Ajustes para a grade */
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 20px 30px;
|
||||
}
|
||||
|
||||
.form-grid .span-2 {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
/* Estilos de input e select uniformes */
|
||||
.form-group input,
|
||||
.form-group select {
|
||||
padding: 10px;
|
||||
height: 40px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--cor-cinza-medio);
|
||||
font-size: 16px;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group select:focus {
|
||||
border-color: var(--cor-borda-input-foco);
|
||||
box-shadow: 0 0 5px rgba(46, 125, 50, 0.3);
|
||||
}
|
||||
|
||||
/* Campos de largura total */
|
||||
.form-group.full-width {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
/* Estilo para a área de texto de Observações */
|
||||
textarea {
|
||||
resize: vertical;
|
||||
width: 100%;
|
||||
min-height: 100px;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--cor-cinza-medio);
|
||||
font-size: 16px;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
textarea:focus {
|
||||
border-color: var(--cor-borda-input-foco);
|
||||
box-shadow: 0 0 5px rgba(46, 125, 50, 0.3);
|
||||
}
|
||||
|
||||
/* Estilo para o campo de upload de arquivo */
|
||||
.form-group input[type="file"] {
|
||||
background-color: var(--cor-cinza-claro);
|
||||
border: 1px dashed var(--cor-cinza-medio);
|
||||
padding: 10px;
|
||||
height: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Outros estilos, como h2, labels, buttons etc., que já estão na sua folha de estilo */
|
||||
.form-card h2 {
|
||||
margin-bottom: 25px;
|
||||
font-size: 24px;
|
||||
color: #333;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
margin-bottom: 6px;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.form-actions .btn {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
padding: 12px 22px;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.form-actions .btn-save {
|
||||
background: var(--cor-fundo-botao-salvar);
|
||||
}
|
||||
|
||||
.form-actions .btn-cancel {
|
||||
background: #ccc;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.form-actions .btn-save:hover {
|
||||
background: #256628;
|
||||
}
|
||||
.form-actions .btn-cancel:hover {
|
||||
background: #b3b3b3;
|
||||
}
|
||||
|
||||
/* Estilos gerais do corpo para melhor visualização */
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #f0f2f5;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Container principal para centralizar o conteúdo */
|
||||
.flex {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Estilos para a seção principal, para ocupar o espaço restante */
|
||||
.section-main {
|
||||
flex-grow: 1; /* Ocupa todo o espaço restante */
|
||||
padding: 20px;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
/* Estilos para o botão de adicionar paciente */
|
||||
.btn-add {
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 20px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-add:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
/* Estilos da tabela de pacientes */
|
||||
.paciente-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.paciente-table th,
|
||||
.paciente-table td {
|
||||
padding: 12px 15px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.paciente-table thead th {
|
||||
background-color: #e9ecef;
|
||||
font-weight: bold;
|
||||
color: #495057;
|
||||
text-transform: uppercase;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Estilizando as linhas da tabela */
|
||||
.paciente-table tbody tr:hover {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
/* Estilos para os botões de ação na tabela */
|
||||
.btn-edit,
|
||||
.btn-delete {
|
||||
padding: 6px 10px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-edit {
|
||||
background-color: #28a745;
|
||||
}
|
||||
|
||||
.btn-edit:hover {
|
||||
background-color: #218838;
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
background-color: #dc3545;
|
||||
}
|
||||
|
||||
.btn-delete:hover {
|
||||
background-color: #c82333;
|
||||
}
|
||||
|
||||
/* Estilos para dispositivos móveis (responsividade) */
|
||||
@media (max-width: 768px) {
|
||||
.paciente-table,
|
||||
.paciente-table tbody,
|
||||
.paciente-table tr,
|
||||
.paciente-table td {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.paciente-table thead {
|
||||
display: none; /* Esconde o cabeçalho em telas pequenas */
|
||||
}
|
||||
|
||||
.paciente-table tr {
|
||||
margin-bottom: 15px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.paciente-table td {
|
||||
text-align: right;
|
||||
padding-left: 50%; /* Espaço para o rótulo */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.paciente-table td::before {
|
||||
content: attr(data-label);
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
width: 45%;
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
}
|
||||
}
|
||||
|
||||
/* Estilos Gerais para o Corpo da Página */
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #f0f2f5;
|
||||
}
|
||||
|
||||
/* Container Flex principal (sidebar + conteúdo) */
|
||||
.flex-container {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Estilo da Sidebar */
|
||||
.sidebar {
|
||||
width: 80px;
|
||||
background-color: #fff;
|
||||
padding: 10px 0;
|
||||
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sidebar ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sidebar li {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.sidebar a {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.sidebar a:hover {
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
|
||||
.sidebar img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#logo-med {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
/* Área de Conteúdo Principal (que contém o Header e o main-content) */
|
||||
.content-area {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Estilo do Header */
|
||||
.header {
|
||||
background-color: #fff;
|
||||
padding: 10px 20px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 20px;
|
||||
padding: 5px 10px;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.search-bar input {
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 5px;
|
||||
background-color: transparent;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.search-bar button {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.search-bar button img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.header-icons img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-left: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Estilos para o Conteúdo Principal (abaixo do header) */
|
||||
.main-content {
|
||||
flex-grow: 1;
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Estilos para o botão "Cadastrar Paciente" */
|
||||
.btn-add {
|
||||
display: inline-block;
|
||||
background-color: #007bff;
|
||||
color: #fff;
|
||||
padding: 10px 15px;
|
||||
border-radius: 5px;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-add:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
/* Estilos da Tabela */
|
||||
.table-container {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.paciente-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.paciente-table thead th {
|
||||
background-color: #f2f2f2;
|
||||
padding: 12px 15px;
|
||||
text-align: left;
|
||||
border-bottom: 2px solid #ddd;
|
||||
}
|
||||
|
||||
.paciente-table tbody td {
|
||||
padding: 10px 15px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.paciente-table tbody tr:hover {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 8px 12px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
margin-right: 5px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
/* As cores dos botões de ação foram mantidas como estavam na sua versão anterior */
|
||||
.btn-edit {
|
||||
background-color: #08c547;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-edit:hover {
|
||||
background-color: #087904;
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
background-color: #dc3545;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-delete:hover {
|
||||
background-color: #b31a29;
|
||||
}
|
||||
|
||||
/* Estilos para a página de cadastro */
|
||||
.section-cadastro {
|
||||
background-color: #fff;
|
||||
padding: 30px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
max-width: 600px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.section-cadastro h2 {
|
||||
text-align: center;
|
||||
color: #333;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.section-cadastro form label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.section-cadastro form input[type="text"],
|
||||
.section-cadastro form input[type="tel"] {
|
||||
width: calc(100% - 20px);
|
||||
padding: 10px;
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.section-cadastro form button {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
background-color: #28a745;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.section-cadastro form button:hover {
|
||||
background-color: #218838;
|
||||
}
|
||||
|
||||
.btn-back {
|
||||
display: inline-block;
|
||||
margin-bottom: 20px;
|
||||
color: #007bff;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.btn-back:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Media Queries para Responsividade */
|
||||
@media (max-width: 768px) {
|
||||
.sidebar {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.sidebar img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
#logo-med {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.header {
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
width: 90%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.header-icons {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.header-icons img {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.paciente-table thead {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.paciente-table tbody tr {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.paciente-table tbody td {
|
||||
display: block;
|
||||
text-align: right;
|
||||
padding-left: 50%;
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.paciente-table tbody td::before {
|
||||
content: attr(data-label);
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
width: 45%;
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
232
clinicApp/pages/pacientes/addPaciente/addPacient.html
Normal file
232
clinicApp/pages/pacientes/addPaciente/addPacient.html
Normal file
@ -0,0 +1,232 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pt-br">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Cadastro de Paciente</title>
|
||||
<link rel="stylesheet" href="addPacient.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/inputmask@5.0.9/dist/inputmask.min.js"></script>
|
||||
<script defer src="addPaciente.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main>
|
||||
<div class="flex">
|
||||
<section class="section-main">
|
||||
<nav class="nav">
|
||||
</nav>
|
||||
|
||||
<div class="full-page-form-container">
|
||||
<div class="form-card">
|
||||
<h2>Dados do Paciente</h2>
|
||||
<form id="cadastro-form">
|
||||
<div class="form-grid">
|
||||
<div class="form-group"><label for="nome">Nome *</label><input type="text" id="nome"
|
||||
required></div>
|
||||
<div class="form-group"><label for="nomeSocial">Nome Social</label><input type="text"
|
||||
id="nomeSocial"></div>
|
||||
<div class="form-group"><label for="cpf">CPF</label><input type="text" id="cpf" placeholder="000.000.000-00" required></div>
|
||||
<div class="form-group"><label for="rg">RG</label><input type="text" id="rg"></div>
|
||||
<div class="form-group">
|
||||
<label for="outrosDocs">Outros documentos de identidade</label>
|
||||
<select id="outrosDocs">
|
||||
<option value="">Selecione</option>
|
||||
<option value="Passaporte">Passaporte</option>
|
||||
<option value="CNH">CNH</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group"><label for="numDoc">Número do documento</label><input
|
||||
type="text" id="numDoc" placeholder="Número do documento"></div>
|
||||
<div class="form-group">
|
||||
<label for="sexo">Sexo</label>
|
||||
<select id="sexo" name="sexo">
|
||||
<option value="">Selecione</option>
|
||||
<option value="Masculino">Masculino</option>
|
||||
<option value="Feminino">Feminino</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group"><label for="dataNascimento">Data de Nascimento *</label><input
|
||||
type="date" id="dataNascimento" required></div>
|
||||
<div class="form-group">
|
||||
<label for="etnia">Etnia</label>
|
||||
<select id="etnia">
|
||||
<option value="">Selecione</option>
|
||||
<option value="branca">Branca</option>
|
||||
<option value="preta">Preta</option>
|
||||
<option value="parda">Parda</option>
|
||||
<option value="amarela">Amarela</option>
|
||||
<option value="indigena">Indígena</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="raca">Raça</label>
|
||||
<select id="raca">
|
||||
<option value="">Selecione</option>
|
||||
<option value="branca">Branca</option>
|
||||
<option value="preta">Preta</option>
|
||||
<option value="parda">Parda</option>
|
||||
<option value="amarela">Amarela</option>
|
||||
<option value="indigena">Indígena</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group"><label for="naturalidade">Naturalidade</label><input type="text"
|
||||
id="naturalidade"></div>
|
||||
<div class="form-group">
|
||||
<label for="nacionalidade">Nacionalidade</label>
|
||||
<input type="text"
|
||||
id="nacionalidade">
|
||||
</div>
|
||||
<div class="form-group"><label for="profissao">Profissão</label><input type="text"
|
||||
id="profissao"></div>
|
||||
<div class="form-group">
|
||||
<label for="estadoCivil">Estado Civil</label>
|
||||
<select id="estadoCivil">
|
||||
<option value="">Selecione</option>
|
||||
<option value="solteiro">Solteiro(a)</option>
|
||||
<option value="casado">Casado(a)</option>
|
||||
<option value="divorciado">Divorciado(a)</option>
|
||||
<option value="viuvo">Viúvo(a)</option>
|
||||
<option value="separado">Separado(a)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group"><label for="nomeMae">Nome da mãe</label><input type="text"
|
||||
id="nomeMae"></div>
|
||||
<div class="form-group"><label for="profissaoMae">Profissão da mãe</label><input
|
||||
type="text" id="profissaoMae"></div>
|
||||
<div class="form-group"><label for="nomePai">Nome do pai</label><input type="text"
|
||||
id="nomePai"></div>
|
||||
<div class="form-group"><label for="profissaoPai">Profissão do pai</label><input
|
||||
type="text" id="profissaoPai"></div>
|
||||
<div class="form-group"><label for="nomeResponsavel">Nome do responsável</label><input
|
||||
type="text" id="nomeResponsavel"></div>
|
||||
<div class="form-group"><label for="cpfResponsavel">CPF do responsável</label><input
|
||||
type="text" id="cpfResponsavel"></div>
|
||||
<div class="form-group"><label for="nomeEsposo">Nome do esposo(a)</label><input
|
||||
type="text" id="nomeEsposo"></div>
|
||||
</div>
|
||||
|
||||
<div class="section-divider">Endereço</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-group"><label for="cep">CEP</label><input type="text" id="cep"></div>
|
||||
<div class="form-group span-2"><label for="endereco">Endereço</label><input type="text"
|
||||
id="endereco"></div>
|
||||
<div class="form-group"><label for="numero">Número</label><input type="text"
|
||||
id="numero"></div>
|
||||
<div class="form-group"><label for="complemento">Complemento</label><input type="text"
|
||||
id="complemento"></div>
|
||||
<div class="form-group"><label for="bairro">Bairro</label><input type="text"
|
||||
id="bairro"></div>
|
||||
<div class="form-group"><label for="cidade">Cidade</label><input type="text"
|
||||
id="cidade"></div>
|
||||
<div class="form-group">
|
||||
<label for="estado">Estado
|
||||
<label>
|
||||
<select id="estado">
|
||||
<option value="">Selecione</option>
|
||||
<option value="AC">Acre</option>
|
||||
<option value="AL">Alagoas</option>
|
||||
<option value="AP">Amapá</option>
|
||||
<option value="AM">Amazonas</option>
|
||||
<option value="BA">Bahia</option>
|
||||
<option value="CE">Ceará</option>
|
||||
<option value="DF">Distrito Federal</option>
|
||||
<option value="ES">Espírito Santo</option>
|
||||
<option value="GO">Goiás</option>
|
||||
<option value="MA">Maranhão</option>
|
||||
<option value="MT">Mato Grosso</option>
|
||||
<option value="MS">Mato Grosso do Sul</option>
|
||||
<option value="MG">Minas Gerais</option>
|
||||
<option value="PA">Pará</option>
|
||||
<option value="PB">Paraíba</option>
|
||||
<option value="PR">Paraná</option>
|
||||
<option value="PE">Pernambuco</option>
|
||||
<option value="PI">Piauí</option>
|
||||
<option value="RJ">Rio de Janeiro</option>
|
||||
<option value="RN">Rio Grande do Norte</option>
|
||||
<option value="RS">Rio Grande do Sul</option>
|
||||
<option value="RO">Rondônia</option>
|
||||
<option value="RR">Roraima</option>
|
||||
<option value="SC">Santa Catarina</option>
|
||||
<option value="SP">São Paulo</option>
|
||||
<option value="SE">Sergipe</option>
|
||||
<option value="TO">Tocantins</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-divider">Contato</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-group"><label for="email">E-mail</label><input type="email" id="email">
|
||||
</div>
|
||||
<div class="form-group"><label for="celular">Celular</label><input type="text"
|
||||
id="celular" placeholder="(00) 00000-0000"></div>
|
||||
<div class="form-group"><label for="telefone1">Telefone</label><input type="text"
|
||||
id="telefone1" placeholder="(00) 0000-0000"></div>
|
||||
</div>
|
||||
|
||||
<div class="section-divider">Informações Médicas</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-group">
|
||||
<label for="tipoSanguineo">Tipo Sanguíneo</label>
|
||||
<select id="tipoSanguineo">
|
||||
<option value="">Selecione</option>
|
||||
<option value="A+">A+</option>
|
||||
<option value="A-">A-</option>
|
||||
<option value="B+">B+</option>
|
||||
<option value="B-">B-</option>
|
||||
<option value="AB+">AB+</option>
|
||||
<option value="AB-">AB-</option>
|
||||
<option value="O+">O+</option>
|
||||
<option value="O-">O-</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group"><label for="peso">Peso</label><input type="number" id="peso"
|
||||
placeholder="kg"></div>
|
||||
<div class="form-group"><label for="altura">Altura</label><input type="number"
|
||||
id="altura" placeholder="m"></div>
|
||||
<div class="form-group full-width"><label for="alergias">Alergias</label><input
|
||||
type="text" id="alergias" placeholder="Ex: AAS, Dipirona, etc"></div>
|
||||
</div>
|
||||
|
||||
<div class="section-divider">Informações de convênio</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-group">
|
||||
<label for="convenio">Convênio</label>
|
||||
<input type="text" id="convenio" name="convenio">
|
||||
</div>
|
||||
<div class="form-group"><label for="plano">Plano</label><input type="text" id="plano">
|
||||
</div>
|
||||
<div class="form-group"><label for="matricula">Nº de matrícula</label><input type="text"
|
||||
id="matricula"></div>
|
||||
<div class="form-group"><label for="validadeCarteira">Validade da Carteira</label><input
|
||||
type="date" id="validadeCarteira"></div>
|
||||
</div>
|
||||
<div class="form-check-group">
|
||||
<input type="checkbox" id="validadeIndeterminada">
|
||||
<label for="validadeIndeterminada">Validade Indeterminada</label>
|
||||
</div>
|
||||
|
||||
<div class="section-divider">Outras Informações</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-group"><label for="codigoLegado">Código legado</label><input
|
||||
type="text" id="codigoLegado"></div>
|
||||
<div class="form-group full-width"><label for="observacoes">Observações</label><textarea
|
||||
id="observacoes" rows="4"></textarea></div>
|
||||
<div class="form-group full-width"><label for="anexos">Anexos do paciente</label><input
|
||||
type="file" id="anexos"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-save">Salvar</button>
|
||||
<a href="../paciente.html" class="btn btn-cancel">Cancelar</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
151
clinicApp/pages/pacientes/addPaciente/addPaciente.js
Normal file
151
clinicApp/pages/pacientes/addPaciente/addPaciente.js
Normal file
@ -0,0 +1,151 @@
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const form = document.getElementById("cadastro-form");
|
||||
// Pega o ID do paciente da URL. Se não houver, 'editId' será null.
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const editId = urlParams.get("id");
|
||||
|
||||
function desativarFormulario() {
|
||||
// Desativa todos os inputs, selects e textareas
|
||||
form.querySelectorAll("input, select, textarea").forEach((el) => {
|
||||
el.disabled = true;
|
||||
});
|
||||
|
||||
// Remove o botão de submit
|
||||
const submitBtn = form.querySelector('[type="submit"]');
|
||||
if (submitBtn) {
|
||||
submitBtn.remove();
|
||||
}
|
||||
}
|
||||
|
||||
// Exemplo: se a URL tiver ?mode=detalhes
|
||||
if (window.location.search.includes("mode=detalhes")) {
|
||||
desativarFormulario();
|
||||
}
|
||||
|
||||
if (form) {
|
||||
// Carrega a lista de pacientes
|
||||
let pacientes = JSON.parse(localStorage.getItem("pacientes")) || [];
|
||||
let pacienteParaEditar = null;
|
||||
|
||||
// Se houver um ID de edição na URL, encontra o paciente correspondente
|
||||
if (editId) {
|
||||
pacienteParaEditar = pacientes.find((p) => p.id == editId);
|
||||
if (pacienteParaEditar) {
|
||||
// Preenche o formulário com os dados do paciente para edição
|
||||
document.getElementById("nome").value = pacienteParaEditar.nome;
|
||||
document.getElementById("celular").value = pacienteParaEditar.celular;
|
||||
document.getElementById("cidade").value = pacienteParaEditar.cidade;
|
||||
document.getElementById("estado").value = pacienteParaEditar.estado;
|
||||
document.getElementById("nomeSocial").value = pacienteParaEditar.nomeSocial;
|
||||
document.getElementById("cpf").value = pacienteParaEditar.cpf;
|
||||
document.getElementById("rg").value = pacienteParaEditar.rg;
|
||||
document.getElementById("outrosDocs").value = pacienteParaEditar.outrosDocs;
|
||||
document.getElementById("numDoc").value = pacienteParaEditar.numDoc;
|
||||
document.getElementById("sexo").value = pacienteParaEditar.sexo;
|
||||
document.getElementById("dataNascimento").value = pacienteParaEditar.dataNascimento;
|
||||
document.getElementById("etnia").value = pacienteParaEditar.etnia;
|
||||
document.getElementById("raca").value = pacienteParaEditar.raca;
|
||||
document.getElementById("nacionalidade").value = pacienteParaEditar.nacionalidade;
|
||||
document.getElementById("estadoCivil").value = pacienteParaEditar.estadoCivil;
|
||||
document.getElementById("nomeMae").value = pacienteParaEditar.nomeMae;
|
||||
document.getElementById("profissaoMae").value = pacienteParaEditar.profissaoMae;
|
||||
document.getElementById("nomePai").value = pacienteParaEditar.nomePai;
|
||||
document.getElementById("profissaoPai").value = pacienteParaEditar.profissaoPai;
|
||||
document.getElementById("nomeResponsavel").value = pacienteParaEditar.nomeResponsavel;
|
||||
document.getElementById("cpfResponsavel").value = pacienteParaEditar.cpfResponsavel;
|
||||
document.getElementById("nomeEsposo").value = pacienteParaEditar.nomeEsposo;
|
||||
document.getElementById("endereco").value = pacienteParaEditar.endereco;
|
||||
document.getElementById("numero").value = pacienteParaEditar.numero;
|
||||
document.getElementById("complemento").value = pacienteParaEditar.complemento;
|
||||
document.getElementById("bairro").value = pacienteParaEditar.bairro;
|
||||
document.getElementById("email").value = pacienteParaEditar.email;
|
||||
document.getElementById("telefone1").value = pacienteParaEditar.telefone1;
|
||||
document.getElementById("tipoSanguineo").value = pacienteParaEditar.tipoSanguineo;
|
||||
document.getElementById("peso").value = pacienteParaEditar.peso;
|
||||
document.getElementById("altura").value = pacienteParaEditar.altura;
|
||||
document.getElementById("alergias").value = pacienteParaEditar.alergias;
|
||||
document.getElementById("convenio").value = pacienteParaEditar.convenio;
|
||||
document.getElementById("plano").value = pacienteParaEditar.plano;
|
||||
document.getElementById("matricula").value = pacienteParaEditar.matricula;
|
||||
document.getElementById("validadeCarteira").value = pacienteParaEditar.validadeCarteira;
|
||||
document.getElementById("validadeIndeterminada").value = pacienteParaEditar.validadeIndeterminada;
|
||||
document.getElementById("codigoLegado").value = pacienteParaEditar.codigoLegado;
|
||||
document.getElementById("observacoes").value = pacienteParaEditar.observacoes;
|
||||
document.getElementById("anexos").value = pacienteParaEditar.anexos;
|
||||
}
|
||||
}
|
||||
|
||||
const cpf = document.getElementById("cpf");
|
||||
const telefone = document.getElementById("telefone1");
|
||||
const celular = document.getElementById("celular");
|
||||
|
||||
// Aplique as máscaras
|
||||
new Inputmask("999.999.999-99").mask(cpf);
|
||||
new Inputmask("(99) 99999-9999").mask(celular);
|
||||
new Inputmask("(99) 9999-9999").mask(telefone);
|
||||
|
||||
form.addEventListener("submit", (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
// Coletando os dados do formulário
|
||||
const pacienteNovoOuAtualizado = {
|
||||
nome: document.getElementById("nome").value,
|
||||
celular: document.getElementById("celular").value,
|
||||
cidade: document.getElementById("cidade").value,
|
||||
estado: document.getElementById("estado").value,
|
||||
nomeSocial: document.getElementById("nomeSocial").value,
|
||||
cpf: document.getElementById("cpf").value.replace(/[.\-]/g, ""),
|
||||
rg: document.getElementById("rg").value,
|
||||
outrosDocs: document.getElementById("outrosDocs").value,
|
||||
numDoc: document.getElementById("numDoc").value,
|
||||
sexo: document.getElementById("sexo").value,
|
||||
dataNascimento: document.getElementById("dataNascimento").value,
|
||||
etnia: document.getElementById("etnia").value,
|
||||
raca: document.getElementById("raca").value,
|
||||
nacionalidade: document.getElementById("nacionalidade").value,
|
||||
estadoCivil: document.getElementById("estadoCivil").value,
|
||||
nomeMae: document.getElementById("nomeMae").value,
|
||||
profissaoMae: document.getElementById("profissaoMae").value,
|
||||
nomePai: document.getElementById("nomePai").value,
|
||||
profissaoPai: document.getElementById("profissaoPai").value,
|
||||
nomeResponsavel: document.getElementById("nomeResponsavel").value,
|
||||
cpfResponsavel: document.getElementById("cpfResponsavel").value,
|
||||
nomeEsposo: document.getElementById("nomeEsposo").value,
|
||||
endereco: document.getElementById("endereco").value,
|
||||
numero: document.getElementById("numero").value,
|
||||
complemento: document.getElementById("complemento").value,
|
||||
bairro: document.getElementById("bairro").value,
|
||||
email: document.getElementById("email").value,
|
||||
celular: document.getElementById("celular").value,
|
||||
telefone1: document.getElementById("telefone1").value,
|
||||
tipoSanguineo: document.getElementById("tipoSanguineo").value,
|
||||
peso: document.getElementById("peso").value,
|
||||
altura: document.getElementById("altura").value,
|
||||
alergias: document.getElementById("alergias").value,
|
||||
convenio: document.getElementById("convenio").value,
|
||||
plano: document.getElementById("plano").value,
|
||||
matricula: document.getElementById("matricula").value,
|
||||
validadeCarteira: document.getElementById("validadeCarteira").value,
|
||||
validadeIndeterminada: document.getElementById("validadeIndeterminada").value,
|
||||
codigoLegado: document.getElementById("codigoLegado").value,
|
||||
observacoes: document.getElementById("observacoes").value,
|
||||
anexos: document.getElementById("anexos").value,
|
||||
};
|
||||
|
||||
if (pacienteParaEditar) {
|
||||
// Se for um paciente para editar, atualiza os dados dele
|
||||
Object.assign(pacienteParaEditar, pacienteNovoOuAtualizado);
|
||||
} else {
|
||||
// Se for um novo paciente, cria um ID único e o adiciona à lista
|
||||
pacienteNovoOuAtualizado.id = Date.now();
|
||||
pacientes.push(pacienteNovoOuAtualizado);
|
||||
}
|
||||
|
||||
// Salva a lista atualizada de volta no localStorage
|
||||
localStorage.setItem("pacientes", JSON.stringify(pacientes));
|
||||
|
||||
// Redireciona para a página de listagem
|
||||
window.location.href = "../paciente.html";
|
||||
});
|
||||
}
|
||||
});
|
||||
211
clinicApp/pages/pacientes/paciente.css
Normal file
211
clinicApp/pages/pacientes/paciente.css
Normal file
@ -0,0 +1,211 @@
|
||||
.main-button button {
|
||||
font-size: 17px;
|
||||
background: none;
|
||||
margin-right: 30px;
|
||||
margin-top: 10px;
|
||||
border: none;
|
||||
color: #243b51;
|
||||
padding: 20px 10px;
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: 0.6s;
|
||||
}
|
||||
|
||||
.main-button-border:hover {
|
||||
/*estilo no mouseenter*/
|
||||
border: none;
|
||||
margin-right: 30px;
|
||||
margin-top: 10px;
|
||||
padding: 20px 10px;
|
||||
background: none;
|
||||
border-bottom: 2px solid blue;
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.btn-add {
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
margin: 20px 0px;
|
||||
background-color: rgb(38, 137, 255);
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-add:hover {
|
||||
background-color: rgb(30, 110, 204);
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
padding: 8px;
|
||||
margin-left: 8px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
background-color: white;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.conteudo {
|
||||
margin-left: 30px;
|
||||
background-color: #fafafa;
|
||||
padding: 25px;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
/* Tabela */
|
||||
#pacientes-tabela {
|
||||
margin-top: 1.5rem;
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
border: 1px solid #ddd;
|
||||
background-color: white;
|
||||
font-size: 14px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#pacientes-tabela thead {
|
||||
background-color: #e9ecef;
|
||||
}
|
||||
|
||||
#pacientes-tabela thead th {
|
||||
padding: 12px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#pacientes-tabela tbody td {
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
#pacientes-tabela tbody tr:hover {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
#pacientes-tabela tbody td button {
|
||||
padding: 6px 10px;
|
||||
font-size: 14px;
|
||||
background-color: #6c757d;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#pacientes-tabela tbody td button:hover {
|
||||
background-color: #5a6268;
|
||||
}
|
||||
|
||||
/* Media queries melhoradas para responsividade */
|
||||
@media (max-width: 768px) {
|
||||
/* Melhor organização do conteúdo principal em mobile */
|
||||
.section-main-text {
|
||||
padding: 20px;
|
||||
padding-bottom: 0px;
|
||||
margin-top: 10rem;
|
||||
}
|
||||
|
||||
.section-main-text h1 {
|
||||
font-size: 28px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.section-main-text p {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.main-button {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.main-button button {
|
||||
margin-right: 0;
|
||||
margin-top: 5px;
|
||||
padding: 15px 8px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.conteudo {
|
||||
margin: 20px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* Formulário responsivo */
|
||||
#formLaudo {
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
#formLaudo fieldset {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#formLaudo button[type="submit"] {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* Tabela responsiva com scroll horizontal */
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
#pacientes-tabela {
|
||||
min-width: 600px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#pacientes-tabela thead th,
|
||||
#pacientes-tabela tbody td {
|
||||
padding: 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
/* Media query para tablets */
|
||||
@media (max-width: 1024px) and (min-width: 769px) {
|
||||
.section-main-text h1 {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.conteudo {
|
||||
margin: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Media query melhorada para telas muito pequenas */
|
||||
@media (max-width: 480px) {
|
||||
.section-main-text {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.section-main-text h1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.section-main-text p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.conteudo {
|
||||
margin: 15px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
#pacientes-tabela {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
#pacientes-tabela thead th,
|
||||
#pacientes-tabela tbody td {
|
||||
padding: 6px;
|
||||
}
|
||||
}
|
||||
141
clinicApp/pages/pacientes/paciente.html
Normal file
141
clinicApp/pages/pacientes/paciente.html
Normal file
@ -0,0 +1,141 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pt-BR">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Crud + Layout</title>
|
||||
<link rel="stylesheet" href="../../global.css" />
|
||||
<!-- css da página -->
|
||||
<link rel="stylesheet" href="paciente.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main>
|
||||
<!-- Overlay só aparece em mobile quando menu está ativo -->
|
||||
<div class="overlay" id="overlay"></div>
|
||||
|
||||
<div class="flex">
|
||||
<!-- Botão hambúrguer só aparece em mobile -->
|
||||
<button class="hamburger-btn" id="hamburger-btn" aria-label="Abrir menu de navegação" aria-expanded="false">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
|
||||
<!-- Sidebar agora se comporta diferente em desktop vs mobile -->
|
||||
<section class="sidebar" id="sidebar" role="navigation" aria-label="Menu principal">
|
||||
<div class="div-sidebar">
|
||||
<div class="abas">
|
||||
<div class="logo1">
|
||||
<a href="#" aria-label="Página inicial">
|
||||
<img src="https://images.vexels.com/media/users/3/142777/isolated/preview/84711206e52e0d4ff6c793cb476ea264-logotipo-medico-da-estrela-do-heartbeat.png" alt="Logo médico" id="logo-med" />
|
||||
</a>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#" aria-label="Pacientes">
|
||||
<img src="../../assets/layoutIcons/icons8-estetoscópio-50.png" alt="Pacientes" class="icon-sidebar" />
|
||||
<p>Pacientes</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-label="Pacientes">
|
||||
<img src="../../assets/layoutIcons/icons8-estetoscópio-50.png" alt="Pacientes" class="icon-sidebar" />
|
||||
<p>Dashboard</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-label="Cadastro de usuários">
|
||||
<img src="../../assets/layoutIcons/icons8-grupo-de-usuário-homem-homem-50.png" alt="Cadastro" class="icon-sidebar" />
|
||||
<p>Médicos</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../pages/laudo/laudoMedico.html" aria-label="Documentos">
|
||||
<img src="../../assets/layoutIcons/icons8-document.svg" alt="Documentos" class="icon-sidebar" />
|
||||
<p>Laúdos</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-label="Documentos">
|
||||
<img src="../../assets/layoutIcons/icons8-document.svg" alt="Documentos" class="icon-sidebar" />
|
||||
<p>Agenda</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-label="Configurações">
|
||||
<img src="../../assets/layoutIcons/icons8-configurações.svg" alt="Configurações" class="icon-sidebar" />
|
||||
<p>Settings</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="perfil-medico-sidebar">
|
||||
<h3>Dr. Rafael Andrade</h3>
|
||||
<p>Núcleo de Especialidades</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section-main">
|
||||
<nav class="nav" role="banner">
|
||||
<div class="div-search">
|
||||
<input type="text" id="search-input" class="search-input" placeholder="Buscar paciente" aria-label="Campo de busca" />
|
||||
<select id="filter-type" class="filter-select" aria-label="Selecionar filtro">
|
||||
<option value="geral">Geral</option>
|
||||
<option value="nome">Nome</option>
|
||||
<option value="celular">Telefone</option>
|
||||
<option value="cidade">Cidade</option>
|
||||
<option value="estado">Estado</option>
|
||||
<option value="convenio">Convênio</option>
|
||||
<option value="cpf">CPF</option>
|
||||
</select>
|
||||
<button id="search-button" class="search-button" aria-label="Buscar">
|
||||
<img src="../../assets/layoutIcons/icons8-pesquisar.svg" alt="Buscar" />
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<ul class="icon-lista">
|
||||
<li>
|
||||
<a href="#" aria-label="Ajuda"><img src="../../assets/layoutIcons/icons8-ajuda-50.png" alt="Ajuda" /></a>
|
||||
</li>
|
||||
<li>
|
||||
<button id="music" aria-label="Notificações"><img src="../../assets/layoutIcons/botao-ativar-notificacoes.png" alt="Notificações" /></button>
|
||||
</li>
|
||||
<!--button ta gerando um fundo branco, botei ID pra retirar o background-->
|
||||
<li>
|
||||
<a href="#" aria-label="Perfil do usuário"><img src="../../assets/layoutIcons/icons8-usuário-50.png" alt="Usuário" /></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="conteudo">
|
||||
<h1>Gerenciamento de Pacientes</h1>
|
||||
<br /><br />
|
||||
<a href="addPaciente/addPacient.html" id="btn-add" class="btn-add"> + Cadastrar Paciente </a>
|
||||
|
||||
<!-- Container para scroll horizontal da tabela -->
|
||||
<div class="table-container">
|
||||
<table id="pacientes-tabela">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nome</th>
|
||||
<th>Telefone</th>
|
||||
<th>Cidade</th>
|
||||
<th>Estado</th>
|
||||
<th>Ação</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script src="/Squad-21/clinicApp/scriptGlobal.js"></script>
|
||||
<script src="./paciente.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
142
clinicApp/pages/pacientes/paciente.js
Normal file
142
clinicApp/pages/pacientes/paciente.js
Normal file
@ -0,0 +1,142 @@
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const tabelaPacientes = document.getElementById("pacientes-tabela");
|
||||
let pacientes = JSON.parse(localStorage.getItem("pacientes")) || [];
|
||||
|
||||
const atualizarLista = () => {
|
||||
if (!tabelaPacientes) return;
|
||||
const tbody = tabelaPacientes.querySelector("tbody");
|
||||
tbody.innerHTML = "";
|
||||
|
||||
pacientes.forEach((paciente, index) => {
|
||||
const row = document.createElement("tr");
|
||||
row.innerHTML = `
|
||||
<td data-label="Nome">${paciente.nome}</td>
|
||||
<td data-label="Telefone ou Celular">${paciente.celular || "-"}</td>
|
||||
<td data-label="Cidade">${paciente.cidade || "-"}</td>
|
||||
<td data-label="Estado">${paciente.estado || "-"}</td>
|
||||
<td data-label="Ações">
|
||||
<button class="btn btn-edit" data-id="${paciente.id}">Editar</button>
|
||||
<button class="btn btn-delete" data-index="${index}">Excluir</button>
|
||||
<button class="btn btn-detail" data-id="${paciente.id}">Detalhes</button>
|
||||
</td>
|
||||
`;
|
||||
tbody.appendChild(row);
|
||||
});
|
||||
|
||||
// Adiciona event listeners para os botões "Editar"
|
||||
document.querySelectorAll(".btn-edit").forEach((btn) => {
|
||||
btn.addEventListener("click", (e) => {
|
||||
const id = e.target.dataset.id;
|
||||
window.location.href = `addPaciente/addPacient.html?id=${id}`;
|
||||
});
|
||||
});
|
||||
|
||||
// Adiciona event listeners para os botões "Excluir"
|
||||
document.querySelectorAll(".btn-delete").forEach((btn) => {
|
||||
btn.addEventListener("click", (e) => {
|
||||
const index = e.target.dataset.index;
|
||||
if (confirm("Tem certeza que deseja excluir este paciente?")) {
|
||||
pacientes.splice(index, 1);
|
||||
localStorage.setItem("pacientes", JSON.stringify(pacientes));
|
||||
atualizarLista();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll(".btn-detail").forEach((btn) => {
|
||||
btn.addEventListener("click", (e) => {
|
||||
const id = e.target.dataset.id;
|
||||
window.location.href = `addPaciente/addPacient.html?mode=detalhes&id=${id}`;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
atualizarLista();
|
||||
});
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const tabelaPacientes = document.getElementById("pacientes-tabela");
|
||||
const searchInput = document.getElementById("search-input");
|
||||
const filterType = document.getElementById("filter-type");
|
||||
const searchButton = document.getElementById("search-button");
|
||||
|
||||
let pacientes = JSON.parse(localStorage.getItem("pacientes")) || [];
|
||||
|
||||
const atualizarLista = (filtro = "", tipo = "geral") => {
|
||||
if (!tabelaPacientes) return;
|
||||
const tbody = tabelaPacientes.querySelector("tbody");
|
||||
tbody.innerHTML = "";
|
||||
|
||||
pacientes
|
||||
.filter((paciente) => {
|
||||
if (!filtro) return true;
|
||||
|
||||
const termo = filtro.toLowerCase();
|
||||
|
||||
if (tipo === "geral") {
|
||||
// Busca em todos os campos
|
||||
return (paciente.nome || "").toLowerCase().includes(termo) || (paciente.celular || "").toLowerCase().includes(termo) || (paciente.cidade || "").toLowerCase().includes(termo) || (paciente.estado || "").toLowerCase().includes(termo) || (paciente.convenio || "").toLowerCase().includes(termo) || (paciente.cpf || "").toLowerCase().includes(termo);
|
||||
} else {
|
||||
// Busca apenas no campo escolhido
|
||||
const valorCampo = (paciente[tipo] || "").toString().toLowerCase();
|
||||
return valorCampo.includes(termo);
|
||||
}
|
||||
})
|
||||
.forEach((paciente, index) => {
|
||||
const row = document.createElement("tr");
|
||||
row.innerHTML = `
|
||||
<td data-label="Nome">${paciente.nome}</td>
|
||||
<td data-label="Telefone ou Celular">${paciente.celular || "-"}</td>
|
||||
<td data-label="Cidade">${paciente.cidade || "-"}</td>
|
||||
<td data-label="Estado">${paciente.estado || "-"}</td>
|
||||
<td data-label="Ações">
|
||||
<button class="btn btn-edit" data-id="${paciente.id}">Editar</button>
|
||||
<button class="btn btn-delete" data-index="${index}">Excluir</button>
|
||||
<button class="btn btn-detail" data-id="${paciente.id}">Detalhes</button>
|
||||
</td>
|
||||
`;
|
||||
tbody.appendChild(row);
|
||||
});
|
||||
|
||||
// Botões Editar
|
||||
document.querySelectorAll(".btn-edit").forEach((btn) => {
|
||||
btn.addEventListener("click", (e) => {
|
||||
const id = e.target.dataset.id;
|
||||
window.location.href = `addPaciente/addPacient.html?id=${id}`;
|
||||
});
|
||||
});
|
||||
|
||||
// Botões Excluir
|
||||
document.querySelectorAll(".btn-delete").forEach((btn) => {
|
||||
btn.addEventListener("click", (e) => {
|
||||
const index = e.target.dataset.index;
|
||||
if (confirm("Tem certeza que deseja excluir este paciente?")) {
|
||||
pacientes.splice(index, 1);
|
||||
localStorage.setItem("pacientes", JSON.stringify(pacientes));
|
||||
atualizarLista();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll(".btn-detail").forEach((btn) => {
|
||||
btn.addEventListener("click", (e) => {
|
||||
const id = e.target.dataset.id;
|
||||
window.location.href = `addPaciente/addPacient.html?mode=detalhes&id=${id}`;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// Clique no botão de busca
|
||||
searchButton.addEventListener("click", () => {
|
||||
atualizarLista(searchInput.value, filterType.value);
|
||||
});
|
||||
|
||||
// Enter no campo de busca
|
||||
searchInput.addEventListener("keyup", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
atualizarLista(searchInput.value, filterType.value);
|
||||
}
|
||||
});
|
||||
|
||||
atualizarLista();
|
||||
});
|
||||
58
clinicApp/scriptGlobal.js
Normal file
58
clinicApp/scriptGlobal.js
Normal file
@ -0,0 +1,58 @@
|
||||
const hamburgerBtn = document.getElementById("hamburger-btn");
|
||||
const sidebar = document.getElementById("sidebar");
|
||||
const overlay = document.getElementById("overlay");
|
||||
|
||||
function toggleMenu() {
|
||||
const isActive = sidebar.classList.contains("active");
|
||||
|
||||
if (isActive) {
|
||||
closeMenu();
|
||||
} else {
|
||||
openMenu();
|
||||
}
|
||||
}
|
||||
|
||||
function openMenu() {
|
||||
sidebar.classList.add("active");
|
||||
hamburgerBtn.classList.add("active");
|
||||
overlay.classList.add("active");
|
||||
hamburgerBtn.setAttribute("aria-expanded", "true");
|
||||
hamburgerBtn.setAttribute("aria-label", "Fechar menu de navegação");
|
||||
|
||||
// Previne scroll do body quando menu está aberto
|
||||
document.body.style.overflow = "hidden";
|
||||
}
|
||||
|
||||
function closeMenu() {
|
||||
sidebar.classList.remove("active");
|
||||
hamburgerBtn.classList.remove("active");
|
||||
overlay.classList.remove("active");
|
||||
hamburgerBtn.setAttribute("aria-expanded", "false");
|
||||
hamburgerBtn.setAttribute("aria-label", "Abrir menu de navegação");
|
||||
|
||||
// Restaura scroll do body
|
||||
document.body.style.overflow = "";
|
||||
}
|
||||
|
||||
// Event listeners para o menu hambúrguer
|
||||
hamburgerBtn.addEventListener("click", toggleMenu);
|
||||
overlay.addEventListener("click", closeMenu);
|
||||
|
||||
document.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Escape" && sidebar.classList.contains("active")) {
|
||||
closeMenu();
|
||||
}
|
||||
});
|
||||
|
||||
sidebar.addEventListener("click", (e) => {
|
||||
if (e.target.tagName === "A" && window.innerWidth <= 768) {
|
||||
closeMenu();
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener("resize", () => {
|
||||
if (window.innerWidth > 768 && sidebar.classList.contains("active")) {
|
||||
closeMenu();
|
||||
}
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user