369 lines
12 KiB
HTML
369 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pt-br">
|
|
<head>
|
|
<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>
|
|
</head>
|
|
<body>
|
|
|
|
|
|
<!-- =================== MAIN =================== -->
|
|
<main class="main">
|
|
<!-- Header -->
|
|
<div class="header">
|
|
<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 -->
|
|
<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 -->
|
|
<section class="content">
|
|
<!-- Hero -->
|
|
<div class="hero">
|
|
<div>
|
|
<h2>Já olhou sua tabela de pacientes hoje?</h2>
|
|
<p>Organize sua semana em poucos cliques</p>
|
|
<div class="cta">
|
|
<a href=""></a>
|
|
<a class="btn btn-primary" href="crud-pacientes.html">Olhar a Tabela</a>
|
|
<a class="btn btn-ghost" href="../laudo/Laudo.html">Ver laudos</a>
|
|
</div>
|
|
</div>
|
|
<div class="doctor">
|
|
<img src="WhatsApp Image 2025-09-14 at 20.25.38.jpeg" alt="" class="img">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- KPIs -->
|
|
<div class="kpis">
|
|
<div class="card kpi">
|
|
<div class="label">Pacientes <span class="badge">agora</span></div>
|
|
<div class="value">320 pessoas</div>
|
|
</div>
|
|
<div class="card kpi">
|
|
<div class="label">Laudos Emitidos</div>
|
|
<div class="value">450</div>
|
|
</div>
|
|
<div class="card kpi">
|
|
<div class="label">Consultas Realizadas</div>
|
|
<div class="value">920</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Charts -->
|
|
<div class="charts">
|
|
<div class="card chart">
|
|
<h4>Desempenho no Trabalho <span class="badge">+3.5%</span></h4>
|
|
<div class="bars" aria-label="placeholder de barras">
|
|
<div class="bar" style="height:70%"></div>
|
|
<div class="bar" style="height:85%"></div>
|
|
<div class="bar" style="height:50%"></div>
|
|
<div class="bar" style="height:65%"></div>
|
|
<div class="bar" style="height:40%"></div>
|
|
</div>
|
|
<div class="legend">
|
|
<span><span class="dotc" style="background:var(--brand)"></span>Desempenho Exaustivo</span>
|
|
<span><span class="dotc" style="background:#8fe8e2"></span>Desempenho Normal</span>
|
|
<span><span class="dotc" style="background:#d9f5f3"></span>Desempenho Pouco Exaustivo</span>
|
|
</div>
|
|
</div>
|
|
<div class="card chart">
|
|
<h4>Status Semanais</h4>
|
|
<div class="ring" aria-label="gráfico de rosca placeholder"></div>
|
|
<div class="legend" style="justify-content:center">
|
|
<span><span class="dotc" style="background:var(--brand)"></span>Pacientes</span>
|
|
<span><span class="dotc" style="background:#8fe8e2"></span>Consultas semanais</span>
|
|
<span><span class="dotc" style="background:#d9f5f3"></span>Laudos</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Coluna direita -->
|
|
<aside class="aside">
|
|
<div class="card calendar">
|
|
<div style="display:flex; justify-content:space-between; align-items:center;">
|
|
<strong>Próximas consultas</strong>
|
|
<span class="muted">Jan 2022</span>
|
|
</div>
|
|
<div class="grid" id="cal"></div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<strong>Últimas Consultas</strong>
|
|
<div class="list" style="margin-top:10px">
|
|
<div class="item">
|
|
<div class="ic">🦷</div>
|
|
<div><div>Paciente: João Silva</div><div class="muted">Set 10, 2025</div></div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="ic">🧠</div>
|
|
<div><div>Paciente: Isaac Kauã</div><div class="muted">Set 9, 2025</div></div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="ic">🩺</div>
|
|
<div><div>Paciente: Alves Diamante</div><div class="muted">Ago 25, 2025</div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<strong>Horas Trabalhadas</strong>
|
|
<div class="muted" style="margin:6px 0 10px"></div>
|
|
<div class="money">2.000 Horas</div>
|
|
</div>
|
|
</aside>
|
|
</main>
|
|
</div>
|
|
|
|
<script>
|
|
// ======= Mini calendário estático (placeholder) =======
|
|
(function renderCalendar(){
|
|
const cal = document.getElementById('cal');
|
|
const days = ['S','T','Q','Q','S','S','D']; // cabeçalho
|
|
days.forEach(d=>{
|
|
const h = document.createElement('div');
|
|
h.textContent = d; h.style.fontWeight='700'; h.style.color = 'var(--muted)';
|
|
h.style.background='transparent'; h.style.border='0'; cal.appendChild(h);
|
|
});
|
|
// 5 linhas x 7 colunas (Jan 2022 começa em Sábado — offset 5 se segunda for 0)
|
|
const blanks = 5;
|
|
for(let i=0;i<blanks;i++){ const b=document.createElement('div'); b.className='day'; b.style.visibility='hidden'; cal.appendChild(b); }
|
|
for(let d=1; d<=31; d++){
|
|
const el = document.createElement('div');
|
|
el.className = 'day';
|
|
el.textContent = d;
|
|
// marcar alguns dias
|
|
if([10,11,18].includes(d)) el.classList.add('m');
|
|
cal.appendChild(el);
|
|
}
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|