atualizações da secretaria e melhoria no fluxo e design
This commit is contained in:
parent
7334423723
commit
78bf9ff4bf
@ -117,7 +117,7 @@
|
||||
<!-- Botões -->
|
||||
<div>
|
||||
<button id="confirmarConsulta" class="btn">Confirmar Consulta</button>
|
||||
<button id="voltarLista" class="btn secondary">Voltar para Médicos</button>
|
||||
<button id="voltarLista" class="btn secondary" onclick="window.location.href='agendamento.html'" >Voltar para Médicos</button>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@ -129,7 +129,7 @@
|
||||
}
|
||||
|
||||
document.getElementById('voltarLista').onclick = ()=>{
|
||||
window.location.href = 'index.html';
|
||||
window.location.href = 'agendamento.html';
|
||||
};
|
||||
|
||||
let selectedDate = null;
|
||||
|
||||
@ -340,6 +340,11 @@
|
||||
.tabs a:hover{color:var(--brand-600, )}
|
||||
.tabs .ativo{background:var(--bran, #64e4dc); color:#f8f8f8; padding:8px 18px;
|
||||
border-radius:999px; box-shadow:0 4px 10px rgba(0, 211, 248, 0.25)}
|
||||
.logo-link img {
|
||||
height: 100px; /* Defina a altura da sua logo aqui */
|
||||
width: auto; /* Mantém a proporção da imagem */
|
||||
display: block; /* Remove espaços extras abaixo da imagem */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -348,7 +353,9 @@
|
||||
<div class="appbar">
|
||||
<div class="appbar-inner">
|
||||
<div class="brand">
|
||||
<img src="logo_HealthOne.jpeg" alt="HealthOne" class="logo">
|
||||
<a href="../../index.html" class="logo-link">
|
||||
<img src="../assets/img/Logo do HealthOne.png" alt="Logo HealthOne - Página Principal">
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<small>Diretório de Médicos • CRUD</small>
|
||||
@ -478,9 +485,35 @@
|
||||
return iso;
|
||||
}
|
||||
|
||||
function load(){
|
||||
const raw = localStorage.getItem(STORAGE_KEY);
|
||||
medicos = raw ? JSON.parse(raw) : loadSeedIfEmpty();
|
||||
async function load() {
|
||||
try {
|
||||
// URL provisória da API de pacientes
|
||||
const res = await fetch('https://mock.apidog.com/m1/1053378-0-default/pacientes');
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error(`Erro na API: ${res.status}`);
|
||||
}
|
||||
|
||||
// Acessa o objeto de resposta da API
|
||||
const apiResponse = await res.json();
|
||||
|
||||
// 👉 Converte o array de pacientes, que está dentro de `apiResponse.data`,
|
||||
// para o formato de `medicos` que sua página espera
|
||||
medicos = (apiResponse.data || []).map(p => ({
|
||||
id: p.id,
|
||||
nome: p.nome,
|
||||
crm: p.cpf || '-',
|
||||
especialidade: p.email || '-',
|
||||
cidade: p.telefone || '-',
|
||||
// Você pode adicionar mais campos se precisar, como status, etc.
|
||||
disponivel: p.status === 'ativo' // ou outro campo que defina o status
|
||||
}));
|
||||
|
||||
} catch (e) {
|
||||
console.error("Erro ao carregar pacientes:", e);
|
||||
medicos = [];
|
||||
alert("Não foi possível carregar os dados. Verifique a conexão com a API.");
|
||||
}
|
||||
|
||||
// 🔹 Garante que todos os médicos tenham "atendePor" sem sobrescrever os existentes
|
||||
medicos = medicos.map(m => {
|
||||
@ -661,8 +694,15 @@
|
||||
};
|
||||
|
||||
// ---------- Init ----------
|
||||
load();
|
||||
async function init() {
|
||||
// Chamada para carregar os dados da API
|
||||
await load();
|
||||
// Chamada para renderizar a página com os dados carregados
|
||||
render();
|
||||
}
|
||||
|
||||
// Inicia o processo quando o DOM estiver pronto
|
||||
document.addEventListener('DOMContentLoaded', init);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -109,6 +109,11 @@
|
||||
/* Responsivo */
|
||||
@media (max-width:1100px){ .grid{grid-template-columns:1fr} }
|
||||
@media (max-width:880px){ .stack{grid-template-columns:1fr} .tabs{gap:10px} }
|
||||
.logo-link img {
|
||||
height: 100px; /* Defina a altura da sua logo aqui */
|
||||
width: auto; /* Mantém a proporção da imagem */
|
||||
display: block; /* Remove espaços extras abaixo da imagem */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -117,7 +122,9 @@
|
||||
<header class="topnav">
|
||||
|
||||
<div class="brand">
|
||||
<img src="logo_HealthOne.jpeg" alt="HealthOne" class="logo">
|
||||
<a href="../../index.html" class="logo-link">
|
||||
<img src="../assets/img/Logo do HealthOne.png" alt="Logo HealthOne - Página Principal">
|
||||
</a>
|
||||
|
||||
<div class="marca">
|
||||
<div class="M">IK</div>
|
||||
|
||||
272
HealthOneProject/Secretaria/dash-secretaria.html
Normal file
272
HealthOneProject/Secretaria/dash-secretaria.html
Normal file
@ -0,0 +1,272 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pt-BR">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Dashboard - HealthOne</title>
|
||||
<!-- Bootstrap -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Ícones -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
|
||||
<!-- Chart.js -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: "Poppins", sans-serif;
|
||||
background-color: #f8f9fa;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar {
|
||||
width: 250px;
|
||||
background: #0d6efd;
|
||||
color: #fff;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebar h2 {
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.sidebar a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
padding: 12px 20px;
|
||||
display: block;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.sidebar a:hover {
|
||||
background-color: #0dcaf0;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Main */
|
||||
.main-content {
|
||||
margin-left: 250px;
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: #fff;
|
||||
padding: 15px 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 22px;
|
||||
color: #0d6efd;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header .profile {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.header .profile img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.card-custom {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
box-shadow: 0px 2px 8px rgba(0,0,0,0.1);
|
||||
transition: transform 0.2s;
|
||||
border-left: 5px solid #0d6efd;
|
||||
}
|
||||
|
||||
.card-custom:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.card-custom h3 {
|
||||
font-size: 20px;
|
||||
color: #0d6efd;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.btn-dashboard {
|
||||
background: #0dcaf0;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
padding: 8px 14px;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Estatísticas */
|
||||
.dashboard-widgets {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.calendar {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
box-shadow: 0px 2px 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.calendar table {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.calendar td {
|
||||
padding: 8px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.calendar .busy {
|
||||
background: #ffcccc;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="sidebar">
|
||||
<h2><i class="bi bi-hospital"></i> HealthOne</h2>
|
||||
<a href="#"><i class="bi bi-speedometer2"></i> Dashboard</a>
|
||||
<a href="#"><i class="bi bi-person-badge"></i> Gerenciar Médicos</a>
|
||||
<a href="secretaria.html"><i class="bi bi-people"></i> Gerenciar Pacientes</a>
|
||||
<a href="#"><i class="bi bi-calendar-check"></i> Gerenciar Consultas</a>
|
||||
<a href="#"><i class="bi bi-file-earmark-text"></i> Relatórios</a>
|
||||
<a href="#"><i class="bi bi-gear"></i> Configurações</a>
|
||||
<a href="../index.html"><i class="bi bi-box-arrow-right"></i> Sair</a>
|
||||
</div>
|
||||
|
||||
<!-- Conteúdo -->
|
||||
<div class="main-content">
|
||||
<div class="header">
|
||||
<div class="profile">
|
||||
<img src="https://via.placeholder.com/40" alt="Secretária">
|
||||
<span>Maria Souza</span>
|
||||
</div>
|
||||
<h1>Painel da Secretária</h1>
|
||||
<i class="bi bi-bell fs-4"></i>
|
||||
</div>
|
||||
|
||||
<!-- Cards principais -->
|
||||
<div class="cards">
|
||||
<div class="card-custom">
|
||||
<h3><i class="bi bi-person-badge"></i> Médicos</h3>
|
||||
<p>Adicionar, editar e remover médicos cadastrados na clínica.</p>
|
||||
<a href="#" class="btn-dashboard">Acessar</a>
|
||||
</div>
|
||||
|
||||
<div class="card-custom">
|
||||
<h3><i class="bi bi-people"></i> Pacientes</h3>
|
||||
<p>Controle completo de pacientes, cadastro e histórico médico.</p>
|
||||
<a href="#" class="btn-dashboard">Acessar</a>
|
||||
</div>
|
||||
|
||||
<div class="card-custom">
|
||||
<h3><i class="bi bi-calendar-check"></i> Consultas</h3>
|
||||
<p>Agendar, reagendar e cancelar consultas com facilidade.</p>
|
||||
<a href="#" class="btn-dashboard">Acessar</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Estatísticas -->
|
||||
<div class="dashboard-widgets">
|
||||
<div class="card-custom">
|
||||
<h3>Média de Casos de Doenças</h3>
|
||||
<canvas id="diseaseChart"></canvas>
|
||||
</div>
|
||||
|
||||
<div class="calendar">
|
||||
<h3>Calendário de Consultas</h3>
|
||||
<table>
|
||||
<tr>
|
||||
<td>1</td><td class="busy">2</td><td>3</td><td class="busy">4</td><td>5</td><td>6</td><td class="busy">7</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8</td><td>9</td><td class="busy">10</td><td>11</td><td>12</td><td class="busy">13</td><td>14</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="busy">15</td><td>16</td><td>17</td><td class="busy">18</td><td>19</td><td>20</td><td class="busy">21</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="card-custom">
|
||||
<h3>Novos Pacientes e Médicos</h3>
|
||||
<canvas id="patientsDoctorsChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bootstrap JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
<!-- Gráficos -->
|
||||
<script>
|
||||
const diseaseCtx = document.getElementById('diseaseChart').getContext('2d');
|
||||
new Chart(diseaseCtx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ['Gripe', 'Covid-19', 'Diabetes', 'Hipertensão', 'Outros'],
|
||||
datasets: [{
|
||||
label: 'Casos',
|
||||
data: [120, 90, 45, 60, 30],
|
||||
backgroundColor: ['#0d6efd','#198754','#ffc107','#dc3545','#0dcaf0']
|
||||
}]
|
||||
}
|
||||
});
|
||||
|
||||
const pdCtx = document.getElementById('patientsDoctorsChart').getContext('2d');
|
||||
new Chart(pdCtx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['Jan','Fev','Mar','Abr','Mai','Jun'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Novos Pacientes',
|
||||
data: [30, 45, 60, 40, 70, 80],
|
||||
borderColor: '#0d6efd',
|
||||
fill: false
|
||||
},
|
||||
{
|
||||
label: 'Novos Médicos',
|
||||
data: [5, 3, 7, 4, 6, 8],
|
||||
borderColor: '#198754',
|
||||
fill: false
|
||||
}
|
||||
]
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -68,6 +68,7 @@
|
||||
.btn.secondary{
|
||||
background:#fff; color:var(--text-dark); border:1px solid var(--medicio-border); box-shadow:none;
|
||||
}
|
||||
|
||||
.card{ background:#fff; border:1px solid var(--medicio-border); border-radius:12px; box-shadow:var(--shadow); }
|
||||
.card-header{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px 10px 18px; border-bottom:1px solid var(--medicio-border); }
|
||||
.card-content{ padding:12px 18px 18px 18px; }
|
||||
@ -94,6 +95,50 @@
|
||||
tbody tr.row td:nth-child(9),
|
||||
tbody tr.row td:nth-child(10) { display:none; }
|
||||
table{ min-width:700px; }
|
||||
}
|
||||
.banana {
|
||||
margin-left: 730px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
padding: 15px 20px;
|
||||
|
||||
gap: 20px;
|
||||
}
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
text-decoration: none;
|
||||
color: #555;
|
||||
font-weight: 500;
|
||||
padding: 10px 18px;
|
||||
border-radius: 20px;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-links a.active {
|
||||
background: #26bdbd;
|
||||
color: white;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
font-weight: bold;
|
||||
}
|
||||
.btn-header {
|
||||
background: none;
|
||||
color: #555;
|
||||
border: none;
|
||||
padding: 10px 18px;
|
||||
border-radius: 20px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-header:hover {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@ -105,6 +150,15 @@
|
||||
<div>
|
||||
<h1>HealthOne</h1>
|
||||
<small>Histórico de Pacientes</small>
|
||||
|
||||
</div>
|
||||
<div class="banana">
|
||||
<div class="nav-links">
|
||||
<a href="dash-secretaria.html" class="btn-header">Inicio</a>
|
||||
</div>
|
||||
<div class="nav-links">
|
||||
<a href="#" class="btn-header , active">Gerenciamento de Paciente</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -21,10 +21,15 @@
|
||||
.topbar .wrap { max-width: 1200px; margin: 0 auto; padding: .5rem 1rem; display: flex; gap: 1rem; align-items: center; justify-content: space-between; }
|
||||
.topbar small { opacity: .95; }
|
||||
|
||||
header { background: #fff; box-shadow: var(--shadow); position: sticky; top: 0; z-index: 30; }
|
||||
header .wrap { max-width: 1200px; margin: 0 auto; padding: .9rem 1rem; display: flex; align-items: center; justify-content: space-between; }
|
||||
.brand { display: flex; align-items: center; gap: .6rem; font-weight: 800; letter-spacing: .4px; }
|
||||
.brand .logo { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), #4dd7cf); display: grid; place-items: center; color: #fff; font-weight: 700; box-shadow: 0 6px 14px rgba(29,183,174,.35); }
|
||||
header { box-shadow: var(--shadow); position: sticky; top: 0; z-index: 30; width: 100%; background: #fff; box-shadow: var(--shadow); position: sticky; top: 0; z-index: 30; display: flex; align-items: center;justify-content: space-between; }
|
||||
.logo-link img {
|
||||
height: 100px; /* Defina a altura da sua logo aqui */
|
||||
width: auto; /* Mantém a proporção da imagem */
|
||||
display: block; /* Remove espaços extras abaixo da imagem */
|
||||
}
|
||||
.wrap { max-width: 1200px; margin: 0 auto; padding: .9rem 1rem; display: flex; align-items: center; justify-content: space-between; }
|
||||
.brand {display: flex; margin-left: 200px; align-items: center; gap: .6rem; font-weight: 800; letter-spacing: .4px; }
|
||||
.logo { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), #4dd7cf); display: grid; place-items: center; color: #fff; font-weight: 700; box-shadow: 0 6px 14px rgba(29,183,174,.35); }
|
||||
nav { display: flex; gap: 1.2rem; color: var(--muted); font-weight: 600; }
|
||||
.cta { background: var(--brand); color: #fff; padding: .6rem 1rem; border-radius: 999px; box-shadow: 0 10px 18px rgba(29,183,174,.25); transition: .2s ease; }
|
||||
.cta:hover { background: var(--brand-600); transform: translateY(-1px); }
|
||||
@ -208,3 +213,65 @@ button.ghost:hover{ border-color: var(--brand-600); color: var(--brand-600); }
|
||||
@media (max-width: 440px){
|
||||
.grid{ grid-template-columns: 1fr; }
|
||||
}
|
||||
.navbar {
|
||||
gap: 10px;
|
||||
|
||||
border-bottom:1px solid #e6eaef;
|
||||
padding:12px 24px;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
gap:24px;
|
||||
font-size:15px;
|
||||
}
|
||||
.navbar a{
|
||||
color:var(--muted);
|
||||
text-decoration:none;
|
||||
font-weight:500;
|
||||
}
|
||||
.navbar a:hover{
|
||||
color:var(--brand-600);
|
||||
}
|
||||
.navbar .active{
|
||||
background:var(--brand);
|
||||
color:#fff;
|
||||
padding:8px 18px;
|
||||
border-radius:999px;
|
||||
font-weight:600;
|
||||
box-shadow:0 3px 8px rgba(18,150,143,.25);
|
||||
}
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
text-decoration: none;
|
||||
color: #555;
|
||||
font-weight: 500;
|
||||
padding: 10px 18px;
|
||||
border-radius: 20px;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-links a.active {
|
||||
background: #26bdbd;
|
||||
color: white;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.btn-navbar {
|
||||
background: none;
|
||||
color: #555;
|
||||
border: none;
|
||||
padding: 10px 18px;
|
||||
border-radius: 20px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-navbar:hover {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
224
HealthOneProject/assets/css/dash-med.css
Normal file
224
HealthOneProject/assets/css/dash-med.css
Normal file
@ -0,0 +1,224 @@
|
||||
|
||||
/* ======================== THEME / TOKENS ======================== */
|
||||
:root{
|
||||
--brand: #1db7ae;
|
||||
--brand-600:#12968f;
|
||||
--brand-100:#e7f7f6;
|
||||
--ink:#24323f;
|
||||
--muted:#6b7a88;
|
||||
--line:#e6eaef;
|
||||
--bg:#ffffff;
|
||||
--bg-app:#f5f7fb;
|
||||
--radius: 18px;
|
||||
--shadow: 0 10px 30px rgba(18,150,143,.12);
|
||||
--shadow-soft: 0 6px 18px rgba(36,50,63,.08);
|
||||
}
|
||||
|
||||
*{box-sizing:border-box}
|
||||
html,body{height:100%}
|
||||
body{
|
||||
margin:0; font: 14px/1.4 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
|
||||
color:var(--ink); background:var(--bg-app);
|
||||
}
|
||||
|
||||
/* ======================== LAYOUT ======================== */
|
||||
.app{
|
||||
display:grid;
|
||||
grid-template-columns: 88px 1fr;
|
||||
min-height:100dvh;
|
||||
}
|
||||
|
||||
/* ===== Sidebar ===== */
|
||||
.sidebar{
|
||||
background:var(--bg);
|
||||
border-right:1px solid var(--line);
|
||||
padding:16px 10px;
|
||||
display:flex; flex-direction:column; gap:12px;
|
||||
}
|
||||
.brand{
|
||||
height:48px; display:grid; place-items:center; margin-bottom:8px;
|
||||
}
|
||||
.dot{
|
||||
width:40px; height:40px; border-radius:12px; background:linear-gradient(135deg,var(--brand),#52e3db);
|
||||
display:grid; place-items:center; color:white; font-weight:700; box-shadow:var(--shadow-soft);
|
||||
}
|
||||
.nav{
|
||||
display:flex; flex-direction:column; gap:8px; margin-top:8px;
|
||||
}
|
||||
.nav button{
|
||||
all:unset; cursor:pointer; display:grid; place-items:center;
|
||||
height:44px; border-radius:12px; color:var(--muted);
|
||||
}
|
||||
.nav button.active, .nav button:hover{ background:#26bdbd }
|
||||
|
||||
/* ===== Main ===== */
|
||||
.main{
|
||||
padding:24px;
|
||||
display:grid;
|
||||
grid-template-columns: 1fr 320px;
|
||||
gap:24px;
|
||||
}
|
||||
|
||||
/* ===== Header ===== */
|
||||
.header{
|
||||
grid-column: 1 / -1;
|
||||
display:flex; align-items:center; justify-content:space-between;
|
||||
margin-bottom:4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 20px; /* Adiciona um espaço entre os elementos */
|
||||
width: 100%;
|
||||
}
|
||||
.logo-link img {
|
||||
height: 100px; /* Defina a altura da sua logo aqui */
|
||||
width: auto; /* Mantém a proporção da imagem */
|
||||
display: block; /* Remove espaços extras abaixo da imagem */
|
||||
}
|
||||
.header .greet{font-size:24px; font-weight:700;}
|
||||
.search{
|
||||
display:flex; gap:10px; align-items:center;
|
||||
}
|
||||
.search input{
|
||||
width:300px; max-width:48vw; background:var(--bg); border:1px solid var(--line);
|
||||
border-radius:999px; padding:10px 14px; outline:0;
|
||||
}
|
||||
.avatar{
|
||||
width:40px; height:40px; border-radius:50%; background:#dbe7f1; display:inline-block;
|
||||
box-shadow:var(--shadow-soft);
|
||||
}
|
||||
|
||||
/* ===== Grid esquerda (conteúdo) ===== */
|
||||
.content{
|
||||
display:grid; gap:18px;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.hero{
|
||||
background: radial-gradient(1200px 500px at 100% -100%, #7bded8 0%, #3cc2bb 30%, #1db7ae 60%, #19a79f 100%);
|
||||
border-radius:var(--radius);
|
||||
padding:22px; color:white; position:relative; overflow:hidden; box-shadow:var(--shadow);
|
||||
display:grid; grid-template-columns: 1fr auto; align-items:center; gap:16px;
|
||||
min-height:140px;
|
||||
}
|
||||
.hero h2{margin:0 0 6px 0; font-size:22px}
|
||||
.hero p{margin:0; opacity:.95}
|
||||
.hero .cta{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap}
|
||||
.btn{
|
||||
appearance:none; border:0; border-radius:12px; padding:10px 14px; font-weight:600; cursor:pointer;
|
||||
}
|
||||
.btn-primary{ background:var(--bg); color:var(--brand-600); }
|
||||
.btn-ghost{ background:rgba(255,255,255,.18); color:#fff; border:1px solid rgba(255,255,255,.25); }
|
||||
|
||||
.hero .doctor{
|
||||
width:180px; height:px; border-radius:16px; background:rgba(255,255,255,.15);
|
||||
display:grid; place-items:center; font-weight:700;
|
||||
border:1px solid rgba(255,255,255,.25);
|
||||
}
|
||||
|
||||
/* KPI cards */
|
||||
.kpis{
|
||||
display:grid; grid-template-columns: repeat(3, minmax(180px,1fr));
|
||||
gap:14px;
|
||||
}
|
||||
.card{
|
||||
background:var(--bg); border:1px solid var(--line); border-radius:var(--radius);
|
||||
box-shadow:var(--shadow-soft); padding:14px;
|
||||
}
|
||||
.kpi .label{color:var(--muted); font-weight:600; display:flex; align-items:center; gap:8px;}
|
||||
.kpi .value{font-size:22px; font-weight:800; margin-top:6px; color:var(--ink);}
|
||||
.badge{font-size:11px; background:var(--brand-100); color:var(--brand-600); padding:4px 8px; border-radius:999px; margin-left:auto;}
|
||||
|
||||
/* Charts area */
|
||||
.charts{
|
||||
display:grid; grid-template-columns: 1.2fr 1fr; gap:14px;
|
||||
}
|
||||
.chart{
|
||||
min-height:210px; position:relative;
|
||||
}
|
||||
.chart h4{margin:0 0 10px 0}
|
||||
.bars{
|
||||
height:140px; display:flex; align-items:flex-end; gap:14px; padding:0 6px 6px;
|
||||
}
|
||||
.bar{
|
||||
flex:1; background:linear-gradient(180deg, var(--brand) 0%, #8fe8e2 100%);
|
||||
border-radius:10px; box-shadow:var(--shadow-soft);
|
||||
}
|
||||
.ring{
|
||||
width:160px; height:160px; border-radius:50%;
|
||||
background:
|
||||
radial-gradient(closest-side, var(--bg) 59%, transparent 60% 100%),
|
||||
conic-gradient(var(--brand) 0 35%, #8fe8e2 0 70%, #d9f5f3 0 100%);
|
||||
margin:auto;
|
||||
}
|
||||
.legend{display:flex; gap:12px; flex-wrap:wrap; margin-top:10px}
|
||||
.legend span{display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:12px}
|
||||
.dotc{width:10px; height:10px; border-radius:50%; background:var(--brand)}
|
||||
|
||||
/* ===== Coluna direita ===== */
|
||||
.aside{display:grid; gap:18px}
|
||||
.calendar .grid{
|
||||
display:grid; grid-template-columns: repeat(7, 1fr); gap:6px; margin-top:8px;
|
||||
}
|
||||
.calendar .day{
|
||||
aspect-ratio:1/1; background:var(--bg); border:1px solid var(--line);
|
||||
border-radius:10px; display:grid; place-items:center; color:var(--ink);
|
||||
}
|
||||
.calendar .day.m{ background:var(--brand-100); color:var(--brand-600); border-color:transparent; font-weight:700;}
|
||||
.list{display:flex; flex-direction:column; gap:10px}
|
||||
.item{
|
||||
display:flex; align-items:flex-start; gap:10px; padding:10px; border-radius:12px;
|
||||
background:var(--bg); border:1px solid var(--line); box-shadow:var(--shadow-soft);
|
||||
}
|
||||
.item .ic{width:28px; height:28px; border-radius:8px; background:var(--brand-100); color:var(--brand-600); display:grid; place-items:center; font-weight:800;}
|
||||
.muted{color:var(--muted)}
|
||||
.money{font-size:22px; font-weight:800; color:var(--ink)}
|
||||
.img {
|
||||
margin-top: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
/* ===== Responsivo ===== */
|
||||
@media (max-width: 1100px){
|
||||
.main{ grid-template-columns: 1fr; }
|
||||
.aside{ order: -1; }
|
||||
}
|
||||
@media (max-width: 760px){
|
||||
.app{ grid-template-columns: 68px 1fr; }
|
||||
.kpis{ grid-template-columns: 1fr; }
|
||||
.charts{ grid-template-columns: 1fr; }
|
||||
.search input{ width:190px; }
|
||||
}
|
||||
|
||||
/* ===== NAVBAR SUPERIOR ===== */
|
||||
.navbar{
|
||||
|
||||
border-bottom:1px solid #e6eaef;
|
||||
padding:12px 24px;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
gap:24px;
|
||||
font-size:15px;
|
||||
}
|
||||
|
||||
.navbar a{
|
||||
color:var(--muted);
|
||||
text-decoration:none;
|
||||
font-weight:500;
|
||||
}
|
||||
|
||||
.navbar a:hover{
|
||||
color:var(--brand-600);
|
||||
}
|
||||
|
||||
.navbar .active{
|
||||
background:var(--brand);
|
||||
color:#fff;
|
||||
padding:8px 18px;
|
||||
border-radius:999px;
|
||||
font-weight:600;
|
||||
box-shadow:0 3px 8px rgba(18,150,143,.25);
|
||||
}
|
||||
@ -6,9 +6,13 @@
|
||||
padding: 0;
|
||||
color: #333;
|
||||
}
|
||||
.brand { display: flex; align-items: center; gap: .6rem; font-weight: 800; letter-spacing: .4px; }
|
||||
.brand { display: flex; align-items: center; gap: 1rem; font-weight: 800; letter-spacing: .4px; }
|
||||
.brand .logo { width: 36px; height: 36px; border-radius: 50%; background: #4dd7cf; display: grid; place-items: center; color: #fff; font-weight: 700; box-shadow: 0 6px 14px rgba(29,183,174,.35); }
|
||||
|
||||
.logo-link img {
|
||||
height: 100px; /* Defina a altura da sua logo aqui */
|
||||
width: auto; /* Mantém a proporção da imagem */
|
||||
display: block; /* Remove espaços extras abaixo da imagem */
|
||||
}
|
||||
.top-bar {
|
||||
background-color: #26bdbd;
|
||||
color: white;
|
||||
@ -31,7 +35,7 @@
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
background-color: white;
|
||||
padding: 15px 20px;
|
||||
padding: 10px 20px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
gap: 20px;
|
||||
}
|
||||
@ -144,5 +148,5 @@
|
||||
}
|
||||
|
||||
.user {
|
||||
margin-right: 800px;
|
||||
margin-right: 500px;
|
||||
}
|
||||
@ -1828,9 +1828,7 @@ section,
|
||||
/*--------------------------------------------------------------
|
||||
# Starter Section Section
|
||||
--------------------------------------------------------------*/
|
||||
.starter-section {
|
||||
/* Add your styles here */
|
||||
}
|
||||
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Starter Page Specific Styles
|
||||
@ -1861,3 +1859,107 @@ section,
|
||||
background-color: color-mix(in srgb, #3fbbc0, transparent 20%);
|
||||
border-color: color-mix(in srgb, #3fbbc0, transparent 20%);
|
||||
}
|
||||
.btn-paciente {
|
||||
display: inline-block;
|
||||
padding: 15px 30px;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
background: linear-gradient(45deg, #007BFF, #0056b3);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease-in-out;
|
||||
box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
|
||||
outline: none;
|
||||
}
|
||||
.btn-paciente:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
|
||||
}
|
||||
.btn-paciente:active {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
|
||||
}
|
||||
.btn-paciente:focus {
|
||||
outline: 2px solid #0056b3;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.btn-med {
|
||||
display: inline-block;
|
||||
padding: 15px 30px;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
background: linear-gradient(45deg, #28a745, #218838);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease-in-out;
|
||||
box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
|
||||
outline: none;
|
||||
}
|
||||
.btn-med:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
|
||||
}
|
||||
.btn-med:active {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 10px rgba(40, 167, 69, 0.3);
|
||||
}
|
||||
.btn-med:focus {
|
||||
outline: 2px solid #1e7e34;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
/* Estilo Base para o Botão da Secretaria */
|
||||
/* Estilo Base para o Botão da Secretaria */
|
||||
/* Estilo Base para o Botão da Secretaria */
|
||||
.btn-secretaria {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px; /* Adiciona um espaço entre os ícones e o texto */
|
||||
padding: 15px 25px; /* Ajuste o padding se necessário */
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
background: linear-gradient(45deg, #6f42c1, #5a349b);
|
||||
border: none;
|
||||
border-radius: 12px; /* Aumentei um pouco para combinar com o print */
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease-in-out;
|
||||
box-shadow: 0 4px 15px rgba(111, 66, 193, 0.3);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Estilo para os ícones dentro do botão */
|
||||
.btn-secretaria i {
|
||||
font-size: 18px; /* Tamanho dos ícones */
|
||||
}
|
||||
|
||||
|
||||
/* Efeito de Hover (passar o mouse por cima) */
|
||||
.btn-secretaria:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 20px rgba(111, 66, 193, 0.4);
|
||||
}
|
||||
|
||||
/* Efeito de Ativo (ao clicar) */
|
||||
.btn-secretaria:active {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 10px rgba(111, 66, 193, 0.3);
|
||||
}
|
||||
|
||||
/* Estilo de Foco para Acessibilidade (navegação por teclado) */
|
||||
.btn-secretaria:focus-visible {
|
||||
outline: 2px solid #5a349b;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
286
HealthOneProject/index.html
Normal file
286
HealthOneProject/index.html
Normal file
@ -0,0 +1,286 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pt-BR">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<title>Página Inicial - HealthOne</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="keywords" content="">
|
||||
|
||||
<!-- Favoritos -->
|
||||
<link href="assets/img/Logo do HealthOne.png" rel="icon">
|
||||
|
||||
|
||||
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
|
||||
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
|
||||
<link href="assets/vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
|
||||
<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
|
||||
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-..." crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
|
||||
<link href="assets/css/main.css" rel="stylesheet">
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body class="starter-page-page">
|
||||
|
||||
<header id="header" class="header sticky-top">
|
||||
|
||||
<div class="topbar d-flex align-items-center">
|
||||
<div class="container d-flex justify-content-center justify-content-md-between">
|
||||
<div class="d-none d-md-flex align-items-center">
|
||||
<i class="bi bi-clock me-1"></i> Segunda - Sábado, 8h às 22h
|
||||
</div>
|
||||
<div class="d-flex align-items-center">
|
||||
<i class="bi bi-phone me-1"></i> Número da empresa
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- End Top Bar -->
|
||||
|
||||
<div class="branding d-flex align-items-center">
|
||||
|
||||
<div class="container position-relative d-flex align-items-center justify-content-end">
|
||||
<a href="index.html" class="logo d-flex align-items-center me-auto">
|
||||
<img src="assets/img/Logo do HealthOne.png" alt="">
|
||||
<!-- Remova o comentário da linha abaixo se também desejar usar um logotipo de texto -->
|
||||
<!-- <h1 class="sitename">Medicio</h1> -->
|
||||
</a>
|
||||
|
||||
<nav id="navmenu" class="navmenu">
|
||||
<ul>
|
||||
<li><a href="index.html">Início</a></li>
|
||||
|
||||
<li class="dropdown"><a href="#"><span>Menu</span> <i class="bi bi-chevron-down toggle-dropdown"></i></a>
|
||||
<ul>
|
||||
<li><a href="#">Menu 1</a></li>
|
||||
<li class="dropdown"><a href="#"><span>Submenu</span> <i class="bi bi-chevron-down toggle-dropdown"></i></a>
|
||||
<ul>
|
||||
<li><a href="index.html#about">Sobre</a></li>
|
||||
<li><a href="index.html#services">Serviços</a></li>
|
||||
<li><a href="index.html#doctors">Médicos</a></li>
|
||||
<li><a href="index.html#contact">Contato</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Menu 2</a></li>
|
||||
<li><a href="#">Menu 3</a></li>
|
||||
<li><a href="#">Menu 4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#contact">Contato</a></li>
|
||||
</ul>
|
||||
<i class="mobile-nav-toggle d-xl-none bi bi-list"></i>
|
||||
</nav>
|
||||
|
||||
<a class="cta-btn" href="#" data-bs-toggle="modal" data-bs-target="#appointmentModal">Marcar Consulta</a>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
<section id="starter-section" class="starter-section section">
|
||||
<div class="container" data-aos="fade-up">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8 text-center">
|
||||
<div class="d-flex flex-column flex-md-row gap-3 justify-content-center">
|
||||
<a href="#" class="btn-med" data-bs-toggle="modal" data-bs-target="#doctorModal">
|
||||
<i class="bi bi-heart-pulse me-2"></i>Sou Médico
|
||||
</a>
|
||||
<a href="#" class="btn-paciente" data-bs-toggle="modal" data-bs-target="#patientModal">
|
||||
<i class="bi bi-heart me-2"></i>Sou Paciente
|
||||
</a>
|
||||
<a href="Secretaria/dash-secretaria.html" class="btn-secretaria">
|
||||
<i class="fa-solid fa-envelope"></i>
|
||||
<span>Sou Secretaria</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<main class="main">
|
||||
|
||||
<!-- Page Title -->
|
||||
<div class="page-title">
|
||||
<div class="heading">
|
||||
<div class="container">
|
||||
<div class="row d-flex justify-content-center text-center">
|
||||
<div class="col-lg-8">
|
||||
<div class="text-center mb-4">
|
||||
<img src="assets/img/Logo do HealthOne.png" alt="HealthOne Logo" class="starter-page-logo">
|
||||
</div>
|
||||
<p class="mb-0 starter-page-welcome-text">
|
||||
Bem-vindo ao HealthOne, onde <span class="text-cuidar">CUIDAR</span> de você <span class="text-prioridade">É NOSSA PRIORIDADE!</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="breadcrumbs">
|
||||
<div class="container">
|
||||
<ol>
|
||||
<li><a href="index.html">Início</a></li>
|
||||
<li class="current">Página Inicial</li>
|
||||
</ol>
|
||||
</div>
|
||||
</nav>
|
||||
</div><!-- End Page Title -->
|
||||
|
||||
<!-- Starter Section Section -->
|
||||
|
||||
|
||||
</main>
|
||||
<!-- Modal para Marcar Consulta -->
|
||||
<div class="modal fade" id="appointmentModal" tabindex="-1" aria-labelledby="appointmentModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="appointmentModalLabel">
|
||||
<i class="bi bi-calendar-check me-2"></i>Marcar Consulta
|
||||
</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body text-center">
|
||||
<p class="mb-4">Você já é paciente do HealthOne?</p>
|
||||
<div class="d-flex flex-column flex-sm-row gap-3 justify-content-center">
|
||||
<button type="button" class="btn btn-success btn-lg px-4 py-3" onclick="handlePatientChoice('existing')">
|
||||
<i class="bi bi-check-circle me-2"></i>Sim, já sou paciente
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary btn-lg px-4 py-3" onclick="handlePatientChoice('new')">
|
||||
<i class="bi bi-person-plus me-2"></i>Não, sou novo paciente
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal para Opções do Paciente -->
|
||||
<div class="modal fade" id="patientModal" tabindex="-1" aria-labelledby="patientModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="patientModalLabel">
|
||||
<i class="bi bi-heart me-2"></i>Bem-vindo ao <span style="color: #0a89e3;">Health</span><span style="color: #49c1c5;">One</span>!
|
||||
</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body text-center">
|
||||
<div class="d-flex flex-column gap-3">
|
||||
<button type="button" class="btn btn-primary btn-lg px-4 py-3" onclick="handlePatientOption('login'), window.location.href='Lista-agendamento/dash-pacientes.html'">
|
||||
<i class="bi bi-box-arrow-in-right me-2"></i>Fazer Login
|
||||
</button>
|
||||
<button type="button" class="btn btn-success btn-lg px-4 py-3" onclick="handlePatientOption('cadastro')">
|
||||
<i class="bi bi-person-plus me-2"></i>Criar Cadastro
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal para Login Médico -->
|
||||
<div class="modal fade" id="doctorModal" tabindex="-1" aria-labelledby="doctorModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="doctorModalLabel">
|
||||
<i class="bi bi-heart-pulse me-2"></i>Login Médico
|
||||
</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="doctorLoginForm">
|
||||
<div class="mb-3">
|
||||
<label for="crm" class="form-label">CRM</label>
|
||||
<input type="text" class="form-control" id="crm" name="crm" placeholder="Digite seu CRM" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="email" class="form-label">E-mail</label>
|
||||
<input type="email" class="form-control" id="email" name="email" placeholder="Digite seu e-mail" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="senha" class="form-label">Senha</label>
|
||||
<input type="password" class="form-control" id="senha" name="senha" placeholder="Digite sua senha" required>
|
||||
</div>
|
||||
<div class="d-grid">
|
||||
<button type="submit" class="btn btn-primary btn-lg">
|
||||
<i class="bi bi-box-arrow-in-right me-2"></i>Login
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Scroll Top -->
|
||||
<a href="#" id="scroll-top" class="scroll-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
|
||||
|
||||
<!-- Preloader -->
|
||||
<div id="preloader"></div>
|
||||
|
||||
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="assets/vendor/php-email-form/validate.js"></script>
|
||||
<script src="assets/vendor/aos/aos.js"></script>
|
||||
<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
|
||||
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
|
||||
<script src="assets/js/main.js"></script>
|
||||
|
||||
<!-- Script para o modal de consulta -->
|
||||
<script>
|
||||
function handlePatientChoice(choice) {
|
||||
// Fecha o modal
|
||||
const modal = bootstrap.Modal.getInstance(document.getElementById('appointmentModal'));
|
||||
modal.hide();
|
||||
|
||||
// Aqui você pode adicionar a lógica para cada escolha
|
||||
if (choice === 'existing') {
|
||||
// Lógica para pacientes existentes
|
||||
alert('Redirecionando para área do paciente...');
|
||||
// window.location.href = 'forms/appointment.php'; // ou outra página
|
||||
} else if (choice === 'new') {
|
||||
// Lógica para novos pacientes
|
||||
window.location.href = 'cadastro.html';
|
||||
}
|
||||
}
|
||||
|
||||
function handlePatientOption(option) {
|
||||
// Fecha o modal
|
||||
const modal = bootstrap.Modal.getInstance(document.getElementById('patientModal'));
|
||||
modal.hide();
|
||||
|
||||
// Redireciona para a página correspondente
|
||||
if (option === 'login') {
|
||||
window.location.href = 'Lista-agendamento/dash-pacientes.html';
|
||||
} else if (option === 'cadastro') {
|
||||
window.location.href = 'cadastro.html';
|
||||
}
|
||||
}
|
||||
|
||||
// Adiciona evento para o formulário de login médico
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const doctorLoginForm = document.getElementById('doctorLoginForm');
|
||||
if (doctorLoginForm) {
|
||||
doctorLoginForm.addEventListener('submit', function(event) {
|
||||
event.preventDefault();
|
||||
|
||||
// Aqui você pode adicionar validação dos dados
|
||||
// Por enquanto, apenas redireciona para a página de laudos
|
||||
window.location.href = 'medico/tabela-pacientes/dashboard.html';
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -15,6 +15,9 @@
|
||||
|
||||
<div class="header">
|
||||
<div class="brand">
|
||||
<a href="../../index.html" class="logo-link">
|
||||
<img src="../../assets/img/Logo do HealthOne.png" alt="Logo HealthOne - Página Principal">
|
||||
</a>
|
||||
<div class="logo">M</div>
|
||||
<span class="user">Dr(a). Camilla Millene</span>
|
||||
</div>
|
||||
@ -42,6 +45,7 @@
|
||||
<th>Paciente</th>
|
||||
<th>Exame</th>
|
||||
<th>Prazo</th>
|
||||
<th>Hora</th>
|
||||
<th>Status</th>
|
||||
<th>Ações</th>
|
||||
</tr>
|
||||
@ -87,6 +91,7 @@
|
||||
<td>${laudo.paciente || "-"}</td>
|
||||
<td>${laudo.exame || "-"}</td>
|
||||
<td>${prazoFormatado}</td>
|
||||
<td>${laudo.hora || "-"}</td> <!-- 🔹 Mostra hora salva -->
|
||||
<td>${statusCalculado}</td>
|
||||
<td class="acoes">
|
||||
<button class="btn-revisar" onclick="window.location.href='revisar-laudo.html?id=${laudo.id}'">
|
||||
@ -137,4 +142,3 @@
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -11,7 +11,6 @@
|
||||
|
||||
<h1>Editar Laudo</h1>
|
||||
|
||||
<!-- Barra de Formatação -->
|
||||
<div class="editor-toolbar">
|
||||
<button onclick="execCmd('bold')"><i class="fa fa-bold"></i></button>
|
||||
<button onclick="execCmd('italic')"><i class="fa fa-italic"></i></button>
|
||||
@ -21,73 +20,30 @@
|
||||
<button onclick="execCmd('justifyRight')"><i class="fa fa-align-right"></i></button>
|
||||
</div>
|
||||
|
||||
<!-- Editor -->
|
||||
<div id="laudo-conteudo" contenteditable="true"></div>
|
||||
|
||||
<!-- Opções -->
|
||||
<div class="opcoes">
|
||||
<label>Paciente: <input type="text" id="paciente"></label>
|
||||
<label>Solicitante: <input type="text" id="solicitante"></label>
|
||||
<label>Exame:
|
||||
<select id="exame">
|
||||
<optgroup label="Sangue">
|
||||
<option>Hemograma completo</option>
|
||||
<option>Glicemia de jejum</option>
|
||||
<option>Colesterol e triglicerídeos</option>
|
||||
<option>Ureia e creatinina</option>
|
||||
<option>TGO/AST</option>
|
||||
<option>TGP/ALT</option>
|
||||
<option>TSH</option>
|
||||
<option>T4 livre</option>
|
||||
<option>Dosagem hormonal</option>
|
||||
</optgroup>
|
||||
<optgroup label="Urina">
|
||||
<option>Exame de urina tipo 1</option>
|
||||
<option>Urocultura</option>
|
||||
<option>Exame de urina de 24 horas</option>
|
||||
</optgroup>
|
||||
<optgroup label="Outros">
|
||||
<option>Ácido úrico</option>
|
||||
<option>VDRL</option>
|
||||
<option>HIV</option>
|
||||
<option>Hepatites</option>
|
||||
<option>Sífilis</option>
|
||||
</optgroup>
|
||||
<optgroup label="Testes rápidos">
|
||||
<option>HIV (rápido)</option>
|
||||
<option>Sífilis (rápido)</option>
|
||||
<option>Hepatite B (rápido)</option>
|
||||
<option>Hepatite C (rápido)</option>
|
||||
</optgroup>
|
||||
<optgroup label="Imagem">
|
||||
<option>Radiografia</option>
|
||||
<option>Mamografia</option>
|
||||
<option>Ultrassonografia</option>
|
||||
<option>Tomografia Computadorizada</option>
|
||||
<option>Ressonância Magnética</option>
|
||||
<option>Endoscopia</option>
|
||||
<option>Videolaringoscopia</option>
|
||||
</optgroup>
|
||||
<optgroup label="Cardiológicos">
|
||||
<option>Eletrocardiograma</option>
|
||||
<option>Ecocardiograma</option>
|
||||
<option>Teste ergométrico</option>
|
||||
</optgroup>
|
||||
<optgroup label="Alta complexidade">
|
||||
<option>Estudos genéticos e cariótipos</option>
|
||||
<option>Avaliação clínica para transplantes</option>
|
||||
<option>Pré-natal de alto risco</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</label>
|
||||
<label>Prazo:
|
||||
<label>Data do exame:
|
||||
<input type="date" id="prazo" onchange="atualizarStatusPrazo()">
|
||||
<span id="statusPrazo" class="status"></span>
|
||||
</label>
|
||||
<label>Assinatura digital: <input type="checkbox" id="assinatura"></label><br />
|
||||
<label>Hora:
|
||||
<select id="hora"></select>
|
||||
</label>
|
||||
<label>Assinatura digital: <input type="checkbox" id="assinatura"></label><br>
|
||||
|
||||
<button class="btn-salvar" onclick="salvarEdicao()">Salvar Alterações</button>
|
||||
<button class="btn-cancelar" onclick="window.location.href='laudo.html'">Cancelar</button>
|
||||
<button class="btn-salvar" onclick="salvarEdicao() , window.location.href='Laudo.html'">Salvar Alterações</button>
|
||||
<button class="btn-cancelar" onclick="window.location.href='Laudo.html'">Cancelar</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
@ -96,12 +52,8 @@
|
||||
let laudos = JSON.parse(localStorage.getItem("laudos")) || [];
|
||||
let laudo = laudos.find(l => l.id === laudoId);
|
||||
|
||||
if (!laudo) {
|
||||
alert("Laudo não encontrado!");
|
||||
window.location.href = "laudo.html";
|
||||
}
|
||||
if(!laudo) { alert("Laudo não encontrado!"); window.location.href = "Laudo.html"; }
|
||||
|
||||
// Carregar dados no formulário
|
||||
document.getElementById("laudo-conteudo").innerHTML = laudo.conteudo;
|
||||
document.getElementById("paciente").value = laudo.paciente;
|
||||
document.getElementById("solicitante").value = laudo.solicitante;
|
||||
@ -109,32 +61,30 @@
|
||||
document.getElementById("prazo").value = laudo.prazo;
|
||||
document.getElementById("assinatura").checked = laudo.assinatura;
|
||||
|
||||
atualizarStatusPrazo();
|
||||
function execCmd(command){ document.execCommand(command, false, null); }
|
||||
|
||||
function execCmd(command) {
|
||||
document.execCommand(command, false, null);
|
||||
function preencherHoras() {
|
||||
const selectHora = document.getElementById("hora");
|
||||
selectHora.innerHTML = "";
|
||||
for (let h=8; h<=22; h++){
|
||||
["00","30"].forEach(min=>{
|
||||
if(h===22 && min==="30") return;
|
||||
const o = document.createElement("option");
|
||||
o.value = `${String(h).padStart(2,"0")}:${min}`;
|
||||
o.textContent = `${String(h).padStart(2,"0")}:${min}`;
|
||||
selectHora.appendChild(o);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function atualizarStatusPrazo() {
|
||||
const prazo = document.getElementById("prazo").value;
|
||||
const statusEl = document.getElementById("statusPrazo");
|
||||
|
||||
if (!prazo) {
|
||||
statusEl.textContent = "Sem prazo";
|
||||
statusEl.className = "status";
|
||||
return;
|
||||
}
|
||||
|
||||
if(!prazo){ statusEl.textContent="Sem prazo"; statusEl.className="status"; return; }
|
||||
const hoje = new Date();
|
||||
const dataPrazo = new Date(prazo+"T23:59:59");
|
||||
|
||||
if (dataPrazo >= hoje) {
|
||||
statusEl.textContent = "Dentro do prazo";
|
||||
statusEl.className = "status ok";
|
||||
} else {
|
||||
statusEl.textContent = "Vencido";
|
||||
statusEl.className = "status vencido";
|
||||
}
|
||||
if(dataPrazo>=hoje){ statusEl.textContent="Dentro do prazo"; statusEl.className="status ok"; }
|
||||
else { statusEl.textContent="Vencido"; statusEl.className="status vencido"; }
|
||||
}
|
||||
|
||||
function salvarEdicao(){
|
||||
@ -143,12 +93,20 @@
|
||||
laudo.solicitante = document.getElementById("solicitante").value;
|
||||
laudo.exame = document.getElementById("exame").value;
|
||||
laudo.prazo = document.getElementById("prazo").value;
|
||||
laudo.hora = document.getElementById("hora").value;
|
||||
laudo.assinatura = document.getElementById("assinatura").checked;
|
||||
|
||||
localStorage.setItem("laudos", JSON.stringify(laudos));
|
||||
alert("Laudo atualizado com sucesso!");
|
||||
window.location.href="laudo.html";
|
||||
}
|
||||
|
||||
window.onload = () => {
|
||||
preencherHoras();
|
||||
document.getElementById("hora").value = laudo.hora || "08:00";
|
||||
atualizarStatusPrazo();
|
||||
};
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -11,7 +11,6 @@
|
||||
|
||||
<h1>Novo Laudo</h1>
|
||||
|
||||
<!-- Barra de Formatação -->
|
||||
<div class="editor-toolbar">
|
||||
<button onclick="execCmd('bold')"><i class="fa fa-bold"></i></button>
|
||||
<button onclick="execCmd('italic')"><i class="fa fa-italic"></i></button>
|
||||
@ -24,10 +23,8 @@
|
||||
<button onclick="insertCampo('[[CID]]')">CID</button>
|
||||
</div>
|
||||
|
||||
<!-- Editor -->
|
||||
<div id="laudo-conteudo" contenteditable="true"></div>
|
||||
|
||||
<!-- Opções do Laudo -->
|
||||
<div class="opcoes">
|
||||
<label>Paciente: <input type="text" id="paciente" placeholder="Nome do paciente"></label>
|
||||
<label>Solicitante: <input type="text" id="solicitante" placeholder="Médico solicitante"></label>
|
||||
@ -49,80 +46,54 @@
|
||||
<option>Urocultura</option>
|
||||
<option>Exame de urina de 24 horas</option>
|
||||
</optgroup>
|
||||
<optgroup label="Outros">
|
||||
<option>Ácido úrico</option>
|
||||
<option>VDRL</option>
|
||||
<option>HIV</option>
|
||||
<option>Hepatites</option>
|
||||
<option>Sífilis</option>
|
||||
</optgroup>
|
||||
<optgroup label="Testes rápidos">
|
||||
<option>HIV (rápido)</option>
|
||||
<option>Sífilis (rápido)</option>
|
||||
<option>Hepatite B (rápido)</option>
|
||||
<option>Hepatite C (rápido)</option>
|
||||
</optgroup>
|
||||
<optgroup label="Imagem">
|
||||
<option>Radiografia</option>
|
||||
<option>Mamografia</option>
|
||||
<option>Ultrassonografia</option>
|
||||
<option>Tomografia Computadorizada</option>
|
||||
<option>Ressonância Magnética</option>
|
||||
<option>Endoscopia</option>
|
||||
<option>Videolaringoscopia</option>
|
||||
</optgroup>
|
||||
<optgroup label="Cardiológicos">
|
||||
<option>Eletrocardiograma</option>
|
||||
<option>Ecocardiograma</option>
|
||||
<option>Teste ergométrico</option>
|
||||
</optgroup>
|
||||
<optgroup label="Alta complexidade">
|
||||
<option>Estudos genéticos e cariótipos</option>
|
||||
<option>Avaliação clínica para transplantes</option>
|
||||
<option>Pré-natal de alto risco</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
>
|
||||
</label>
|
||||
<label>Prazo:
|
||||
<label>Data do exame:
|
||||
<input type="date" id="prazo">
|
||||
</label>
|
||||
<label>Assinatura digital: <input type="checkbox" id="assinatura"></label>
|
||||
<label>Esconder data/assinatura: <input type="checkbox" id="ocultarAssinatura"></label><br />
|
||||
<label>Hora:
|
||||
<select id="hora"></select>
|
||||
</label>
|
||||
<label>Assinatura digital: <input type="checkbox" id="assinatura"></label><br>
|
||||
|
||||
<button class="btn-salvar" onclick="salvarLaudo()">Salvar</button>
|
||||
<button class="btn-cancelar" onclick="window.location.href='Laudo.html'">Cancelar</button>
|
||||
<button onclick="mostrarPreview()">Pré-visualizar</button>
|
||||
<button class="btn-salvar" onclick="salvarLaudo() , window.location.href='Laudo.html' ">Salvar</button>
|
||||
<button class="btn-cancelar" onclick="window.location.href='laudo.html'">Cancelar</button>
|
||||
</div>
|
||||
|
||||
<!-- Preview -->
|
||||
<div class="preview hidden" id="preview"></div>
|
||||
|
||||
<script>
|
||||
function execCmd(command) {
|
||||
document.execCommand(command, false, null);
|
||||
}
|
||||
|
||||
function execCmd(command) { document.execCommand(command, false, null); }
|
||||
function insertCampo(texto) {
|
||||
const selection = window.getSelection();
|
||||
if (!selection.rangeCount) return;
|
||||
|
||||
const range = selection.getRangeAt(0);
|
||||
range.deleteContents();
|
||||
range.insertNode(document.createTextNode(texto));
|
||||
}
|
||||
|
||||
// Preencher horas 08:00 a 22:00
|
||||
function preencherHoras() {
|
||||
const selectHora = document.getElementById("hora");
|
||||
selectHora.innerHTML = "";
|
||||
for (let h = 8; h <= 22; h++) {
|
||||
["00","30"].forEach(min => {
|
||||
if(h === 22 && min === "30") return;
|
||||
const o = document.createElement("option");
|
||||
o.value = `${String(h).padStart(2,"0")}:${min}`;
|
||||
o.textContent = `${String(h).padStart(2,"0")}:${min}`;
|
||||
selectHora.appendChild(o);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function salvarLaudo() {
|
||||
const conteudo = document.getElementById("laudo-conteudo").innerHTML;
|
||||
const paciente = document.getElementById("paciente").value;
|
||||
const solicitante = document.getElementById("solicitante").value;
|
||||
const exame = document.getElementById("exame").value;
|
||||
const prazo = document.getElementById("prazo").value;
|
||||
const hora = document.getElementById("hora").value;
|
||||
|
||||
if (!paciente || !solicitante || !prazo) {
|
||||
alert("Preencha paciente, solicitante e prazo!");
|
||||
return;
|
||||
}
|
||||
if (!paciente || !solicitante || !prazo) { alert("Preencha paciente, solicitante e prazo!"); return; }
|
||||
|
||||
const laudos = JSON.parse(localStorage.getItem("laudos")) || [];
|
||||
const novoLaudo = {
|
||||
@ -130,6 +101,7 @@
|
||||
pedido: "PED" + Math.floor(Math.random()*10000),
|
||||
data: new Date().toISOString().split("T")[0],
|
||||
prazo,
|
||||
hora,
|
||||
paciente,
|
||||
solicitante,
|
||||
exame,
|
||||
@ -144,15 +116,8 @@
|
||||
window.location.href = "laudo.html";
|
||||
}
|
||||
|
||||
function mostrarPreview() {
|
||||
const preview = document.getElementById("preview");
|
||||
preview.innerHTML = document.getElementById("laudo-conteudo").innerHTML;
|
||||
|
||||
const ocultar = document.getElementById("ocultarAssinatura").checked;
|
||||
preview.innerHTML += ocultar ? "" : "<p><strong>Dr. Fulano</strong> - CRM 0000</p>";
|
||||
|
||||
preview.classList.remove("hidden");
|
||||
}
|
||||
window.onload = () => { preencherHoras(); };
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -14,7 +14,7 @@
|
||||
<p><strong>Paciente:</strong> <span id="paciente"></span></p>
|
||||
<p><strong>Solicitante:</strong> <span id="solicitante"></span></p>
|
||||
<p><strong>Exame:</strong> <span id="exame"></span></p>
|
||||
<p><strong>Prazo:</strong> <span id="prazo"></span> - <span id="statusPrazo"></span></p>
|
||||
<p><strong>Data e Hora do Exame:</strong> <span id="prazo"></span> <span id="hora"></span> - <span id="statusPrazo"></span></p>
|
||||
</div>
|
||||
|
||||
<!-- Conteúdo do laudo -->
|
||||
@ -26,16 +26,16 @@
|
||||
|
||||
<!-- Ações -->
|
||||
<div class="acoes">
|
||||
<button class="btn-voltar" onclick="window.location.href='laudo.html'">
|
||||
<button class="btn-voltar" onclick="window.location.href='Laudo.html'">
|
||||
<i class="fa fa-arrow-left"></i> Voltar
|
||||
</button>
|
||||
<button class="btn-imprimir" onclick="window.print()">
|
||||
<i class="fa fa-print"></i> Imprimir
|
||||
</button>
|
||||
<button class="btn-liberar" onclick="liberarLaudo()">
|
||||
<button class="btn-liberar" onclick="liberarLaudo() , window.location.href='Laudo.html'">
|
||||
<i class="fa fa-check"></i> Liberar
|
||||
</button>
|
||||
<button class="btn-excluir" onclick="excluirLaudo()">
|
||||
<button class="btn-excluir" onclick="excluirLaudo() , window.location.href='Laudo.html'">
|
||||
<i class="fa fa-trash"></i> Excluir
|
||||
</button>
|
||||
</div>
|
||||
@ -85,12 +85,11 @@
|
||||
const status = avaliarStatusPrazo(laudo.prazo);
|
||||
|
||||
document.getElementById("prazo").innerText = dataFormatada;
|
||||
document.getElementById("hora").innerText = laudo.hora || "";
|
||||
document.getElementById("statusPrazo").innerHTML = status;
|
||||
|
||||
document.getElementById("conteudo").innerHTML = laudo.conteudo || "";
|
||||
document.getElementById("assinatura").innerHTML = laudo.assinatura
|
||||
? ""
|
||||
: "";
|
||||
document.getElementById("assinatura").innerHTML = laudo.assinatura ? "Assinado digitalmente" : "";
|
||||
};
|
||||
|
||||
function liberarLaudo() {
|
||||
|
||||
@ -17,16 +17,20 @@
|
||||
|
||||
<!-- Header -->
|
||||
<header>
|
||||
<div class="wrap">
|
||||
<div class="brand">
|
||||
<a href="../../index.html" class="logo-link">
|
||||
<img src="../../assets/img/Logo do HealthOne.png" alt="Logo HealthOne - Página Principal">
|
||||
</a>
|
||||
<div class="logo">M</div>
|
||||
<span>Dr(a). Camilla Millene</span>
|
||||
</div>
|
||||
<nav>
|
||||
<a href="dashboard.html">Início</a>
|
||||
<a href="../laudo/Laudo.html">Laudos</a>
|
||||
<a href="#" class="cta">Gerencimento de Pacientes</a>
|
||||
</nav>
|
||||
|
||||
<div class="navbar">
|
||||
<div class="nav-links">
|
||||
<a href="../tabela-pacientes/dashboard.html">Início</a>
|
||||
<a href="../laudo/Laudo.html" class="">Laudo</a>
|
||||
</div>
|
||||
<a class="active" href="#">Gerenciamento de Paciente</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
@ -4,221 +4,7 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>HealthOne — Dashboard do Médico</title>
|
||||
<style>
|
||||
/* ======================== THEME / TOKENS ======================== */
|
||||
:root{
|
||||
--brand: #1db7ae;
|
||||
--brand-600:#12968f;
|
||||
--brand-100:#e7f7f6;
|
||||
--ink:#24323f;
|
||||
--muted:#6b7a88;
|
||||
--line:#e6eaef;
|
||||
--bg:#ffffff;
|
||||
--bg-app:#f5f7fb;
|
||||
--radius: 18px;
|
||||
--shadow: 0 10px 30px rgba(18,150,143,.12);
|
||||
--shadow-soft: 0 6px 18px rgba(36,50,63,.08);
|
||||
}
|
||||
|
||||
*{box-sizing:border-box}
|
||||
html,body{height:100%}
|
||||
body{
|
||||
margin:0; font: 14px/1.4 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
|
||||
color:var(--ink); background:var(--bg-app);
|
||||
}
|
||||
|
||||
/* ======================== LAYOUT ======================== */
|
||||
.app{
|
||||
display:grid;
|
||||
grid-template-columns: 88px 1fr;
|
||||
min-height:100dvh;
|
||||
}
|
||||
|
||||
/* ===== Sidebar ===== */
|
||||
.sidebar{
|
||||
background:var(--bg);
|
||||
border-right:1px solid var(--line);
|
||||
padding:16px 10px;
|
||||
display:flex; flex-direction:column; gap:12px;
|
||||
}
|
||||
.brand{
|
||||
height:48px; display:grid; place-items:center; margin-bottom:8px;
|
||||
}
|
||||
.dot{
|
||||
width:40px; height:40px; border-radius:12px; background:linear-gradient(135deg,var(--brand),#52e3db);
|
||||
display:grid; place-items:center; color:white; font-weight:700; box-shadow:var(--shadow-soft);
|
||||
}
|
||||
.nav{
|
||||
display:flex; flex-direction:column; gap:8px; margin-top:8px;
|
||||
}
|
||||
.nav button{
|
||||
all:unset; cursor:pointer; display:grid; place-items:center;
|
||||
height:44px; border-radius:12px; color:var(--muted);
|
||||
}
|
||||
.nav button.active, .nav button:hover{ background:var(--brand-100); color:var(--brand-600); }
|
||||
|
||||
/* ===== Main ===== */
|
||||
.main{
|
||||
padding:24px;
|
||||
display:grid;
|
||||
grid-template-columns: 1fr 320px;
|
||||
gap:24px;
|
||||
}
|
||||
|
||||
/* ===== Header ===== */
|
||||
.header{
|
||||
grid-column: 1 / -1;
|
||||
display:flex; align-items:center; justify-content:space-between;
|
||||
margin-bottom:4px;
|
||||
}
|
||||
.header .greet{font-size:24px; font-weight:700;}
|
||||
.search{
|
||||
display:flex; gap:10px; align-items:center;
|
||||
}
|
||||
.search input{
|
||||
width:300px; max-width:48vw; background:var(--bg); border:1px solid var(--line);
|
||||
border-radius:999px; padding:10px 14px; outline:0;
|
||||
}
|
||||
.avatar{
|
||||
width:40px; height:40px; border-radius:50%; background:#dbe7f1; display:inline-block;
|
||||
box-shadow:var(--shadow-soft);
|
||||
}
|
||||
|
||||
/* ===== Grid esquerda (conteúdo) ===== */
|
||||
.content{
|
||||
display:grid; gap:18px;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.hero{
|
||||
background: radial-gradient(1200px 500px at 100% -100%, #7bded8 0%, #3cc2bb 30%, #1db7ae 60%, #19a79f 100%);
|
||||
border-radius:var(--radius);
|
||||
padding:22px; color:white; position:relative; overflow:hidden; box-shadow:var(--shadow);
|
||||
display:grid; grid-template-columns: 1fr auto; align-items:center; gap:16px;
|
||||
min-height:140px;
|
||||
}
|
||||
.hero h2{margin:0 0 6px 0; font-size:22px}
|
||||
.hero p{margin:0; opacity:.95}
|
||||
.hero .cta{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap}
|
||||
.btn{
|
||||
appearance:none; border:0; border-radius:12px; padding:10px 14px; font-weight:600; cursor:pointer;
|
||||
}
|
||||
.btn-primary{ background:var(--bg); color:var(--brand-600); }
|
||||
.btn-ghost{ background:rgba(255,255,255,.18); color:#fff; border:1px solid rgba(255,255,255,.25); }
|
||||
|
||||
.hero .doctor{
|
||||
width:180px; height:px; border-radius:16px; background:rgba(255,255,255,.15);
|
||||
display:grid; place-items:center; font-weight:700;
|
||||
border:1px solid rgba(255,255,255,.25);
|
||||
}
|
||||
|
||||
/* KPI cards */
|
||||
.kpis{
|
||||
display:grid; grid-template-columns: repeat(3, minmax(180px,1fr));
|
||||
gap:14px;
|
||||
}
|
||||
.card{
|
||||
background:var(--bg); border:1px solid var(--line); border-radius:var(--radius);
|
||||
box-shadow:var(--shadow-soft); padding:14px;
|
||||
}
|
||||
.kpi .label{color:var(--muted); font-weight:600; display:flex; align-items:center; gap:8px;}
|
||||
.kpi .value{font-size:22px; font-weight:800; margin-top:6px; color:var(--ink);}
|
||||
.badge{font-size:11px; background:var(--brand-100); color:var(--brand-600); padding:4px 8px; border-radius:999px; margin-left:auto;}
|
||||
|
||||
/* Charts area */
|
||||
.charts{
|
||||
display:grid; grid-template-columns: 1.2fr 1fr; gap:14px;
|
||||
}
|
||||
.chart{
|
||||
min-height:210px; position:relative;
|
||||
}
|
||||
.chart h4{margin:0 0 10px 0}
|
||||
.bars{
|
||||
height:140px; display:flex; align-items:flex-end; gap:14px; padding:0 6px 6px;
|
||||
}
|
||||
.bar{
|
||||
flex:1; background:linear-gradient(180deg, var(--brand) 0%, #8fe8e2 100%);
|
||||
border-radius:10px; box-shadow:var(--shadow-soft);
|
||||
}
|
||||
.ring{
|
||||
width:160px; height:160px; border-radius:50%;
|
||||
background:
|
||||
radial-gradient(closest-side, var(--bg) 59%, transparent 60% 100%),
|
||||
conic-gradient(var(--brand) 0 35%, #8fe8e2 0 70%, #d9f5f3 0 100%);
|
||||
margin:auto;
|
||||
}
|
||||
.legend{display:flex; gap:12px; flex-wrap:wrap; margin-top:10px}
|
||||
.legend span{display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:12px}
|
||||
.dotc{width:10px; height:10px; border-radius:50%; background:var(--brand)}
|
||||
|
||||
/* ===== Coluna direita ===== */
|
||||
.aside{display:grid; gap:18px}
|
||||
.calendar .grid{
|
||||
display:grid; grid-template-columns: repeat(7, 1fr); gap:6px; margin-top:8px;
|
||||
}
|
||||
.calendar .day{
|
||||
aspect-ratio:1/1; background:var(--bg); border:1px solid var(--line);
|
||||
border-radius:10px; display:grid; place-items:center; color:var(--ink);
|
||||
}
|
||||
.calendar .day.m{ background:var(--brand-100); color:var(--brand-600); border-color:transparent; font-weight:700;}
|
||||
.list{display:flex; flex-direction:column; gap:10px}
|
||||
.item{
|
||||
display:flex; align-items:flex-start; gap:10px; padding:10px; border-radius:12px;
|
||||
background:var(--bg); border:1px solid var(--line); box-shadow:var(--shadow-soft);
|
||||
}
|
||||
.item .ic{width:28px; height:28px; border-radius:8px; background:var(--brand-100); color:var(--brand-600); display:grid; place-items:center; font-weight:800;}
|
||||
.muted{color:var(--muted)}
|
||||
.money{font-size:22px; font-weight:800; color:var(--ink)}
|
||||
.img {
|
||||
margin-top: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
/* ===== Responsivo ===== */
|
||||
@media (max-width: 1100px){
|
||||
.main{ grid-template-columns: 1fr; }
|
||||
.aside{ order: -1; }
|
||||
}
|
||||
@media (max-width: 760px){
|
||||
.app{ grid-template-columns: 68px 1fr; }
|
||||
.kpis{ grid-template-columns: 1fr; }
|
||||
.charts{ grid-template-columns: 1fr; }
|
||||
.search input{ width:190px; }
|
||||
}
|
||||
|
||||
/* ===== NAVBAR SUPERIOR ===== */
|
||||
.navbar{
|
||||
|
||||
border-bottom:1px solid #e6eaef;
|
||||
padding:12px 24px;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
gap:24px;
|
||||
font-size:15px;
|
||||
}
|
||||
|
||||
.navbar a{
|
||||
color:var(--muted);
|
||||
text-decoration:none;
|
||||
font-weight:500;
|
||||
}
|
||||
|
||||
.navbar a:hover{
|
||||
color:var(--brand-600);
|
||||
}
|
||||
|
||||
.navbar .active{
|
||||
background:var(--brand);
|
||||
color:#fff;
|
||||
padding:8px 18px;
|
||||
border-radius:999px;
|
||||
font-weight:600;
|
||||
box-shadow:0 3px 8px rgba(18,150,143,.25);
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="../../assets/css/dash-med.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@ -227,18 +13,22 @@
|
||||
<main class="main">
|
||||
<!-- Header -->
|
||||
<div class="header">
|
||||
<a href="../../index.html" class="logo-link">
|
||||
<img src="../../assets/img/Logo do HealthOne.png" alt="Logo HealthOne - Página Principal">
|
||||
</a>
|
||||
|
||||
<div class="greet">Olá, Dr(a). <span style="color:var(--brand-600)">Camilla Millene</span> 👋</div>
|
||||
|
||||
<div class="search">
|
||||
<input type="search" placeholder="Buscar paciente, exame, laudo…">
|
||||
<span class="avatar" title="Perfil"></span>
|
||||
<!-- Barra de navegação -->
|
||||
</div>
|
||||
|
||||
<nav class="navbar">
|
||||
<a href="#" class="active">Início</a>
|
||||
<a href="../laudo/Laudo.html">Laudos</a>
|
||||
<a href="crud-pacientes.html">Gerenciamento de Pacientes</a>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Coluna conteúdo -->
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user