Frontend
This commit is contained in:
Tatiana Villa Ema
parent
a2620f2e69
commit
477d210e64
|
|
@ -0,0 +1,10 @@
|
||||||
|
# Default ignored files
|
||||||
|
/shelf/
|
||||||
|
/workspace.xml
|
||||||
|
# Editor-based HTTP Client requests
|
||||||
|
/httpRequests/
|
||||||
|
# Ignored default folder with query files
|
||||||
|
/queries/
|
||||||
|
# Datasource local storage ignored files
|
||||||
|
/dataSources/
|
||||||
|
/dataSources.local.xml
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="ProjectRootManager" version="2">
|
||||||
|
<output url="file://$PROJECT_DIR$/out" />
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="ProjectModuleManager">
|
||||||
|
<modules>
|
||||||
|
<module fileurl="file://$PROJECT_DIR$/.idea/oncodiario.iml" filepath="$PROJECT_DIR$/.idea/oncodiario.iml" />
|
||||||
|
</modules>
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<module type="JAVA_MODULE" version="4">
|
||||||
|
<component name="NewModuleRootManager" inherit-compiler-output="true">
|
||||||
|
<exclude-output />
|
||||||
|
<content url="file://$MODULE_DIR$" />
|
||||||
|
<orderEntry type="inheritedJdk" />
|
||||||
|
<orderEntry type="sourceFolder" forTests="false" />
|
||||||
|
</component>
|
||||||
|
</module>
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="VcsDirectoryMappings">
|
||||||
|
<mapping directory="" vcs="Git" />
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
|
|
@ -0,0 +1,445 @@
|
||||||
|
:root{
|
||||||
|
--primary:#4da3ff;
|
||||||
|
--secondary:#7dd3fc;
|
||||||
|
--success:#22c55e;
|
||||||
|
--bg:#0b1220;
|
||||||
|
--bg-soft:#111c2d;
|
||||||
|
--card:#101b2d;
|
||||||
|
--card-strong:#16243d;
|
||||||
|
--text:#eaf3ff;
|
||||||
|
--navy:#dfeafe;
|
||||||
|
--muted:#9bb0d0;
|
||||||
|
--border:#1d2f49;
|
||||||
|
--shadow:0 20px 50px rgba(0, 0, 0, 0.45);
|
||||||
|
}
|
||||||
|
|
||||||
|
*{
|
||||||
|
box-sizing:border-box;
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body{
|
||||||
|
font-family: 'Inter', Segoe UI, Arial, sans-serif;
|
||||||
|
background:radial-gradient(circle at top, #11213d 0%, #0b1220 38%, #070d1a 100%);
|
||||||
|
color:var(--text);
|
||||||
|
padding:20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container{
|
||||||
|
max-width:1200px;
|
||||||
|
margin:auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-shell{
|
||||||
|
max-width:1280px;
|
||||||
|
margin:0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar{
|
||||||
|
display:flex;
|
||||||
|
align-items:center;
|
||||||
|
justify-content:space-between;
|
||||||
|
gap:20px;
|
||||||
|
background:rgba(16, 27, 45, 0.9);
|
||||||
|
border:1px solid var(--border);
|
||||||
|
border-radius:18px;
|
||||||
|
padding:18px 24px;
|
||||||
|
box-shadow:var(--shadow);
|
||||||
|
margin-bottom:32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand{
|
||||||
|
display:flex;
|
||||||
|
align-items:center;
|
||||||
|
gap:12px;
|
||||||
|
font-weight:700;
|
||||||
|
color:var(--navy);
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-mark{
|
||||||
|
width:36px;
|
||||||
|
height:36px;
|
||||||
|
border-radius:12px;
|
||||||
|
background:linear-gradient(135deg, var(--primary), var(--secondary));
|
||||||
|
color:#08101d;
|
||||||
|
display:flex;
|
||||||
|
align-items:center;
|
||||||
|
justify-content:center;
|
||||||
|
font-size:1.1rem;
|
||||||
|
box-shadow:0 12px 20px rgba(77, 163, 255, 0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar-nav{
|
||||||
|
display:flex;
|
||||||
|
align-items:center;
|
||||||
|
gap:22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar-nav a{
|
||||||
|
text-decoration:none;
|
||||||
|
color:var(--navy);
|
||||||
|
font-weight:600;
|
||||||
|
opacity:.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar-nav a:hover{
|
||||||
|
color:var(--secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn{
|
||||||
|
display:inline-flex;
|
||||||
|
align-items:center;
|
||||||
|
justify-content:center;
|
||||||
|
padding:12px 20px;
|
||||||
|
border-radius:12px;
|
||||||
|
font-weight:700;
|
||||||
|
text-decoration:none;
|
||||||
|
transition:all .2s ease;
|
||||||
|
border:1px solid transparent;
|
||||||
|
cursor:pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:hover{
|
||||||
|
transform:translateY(-1px);
|
||||||
|
box-shadow:0 10px 18px rgba(77, 163, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary{
|
||||||
|
background:linear-gradient(135deg, var(--primary), #5ea9ff);
|
||||||
|
color:#08101d;
|
||||||
|
box-shadow:0 10px 18px rgba(77, 163, 255, 0.28);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary{
|
||||||
|
background:rgba(18, 31, 50, 0.9);
|
||||||
|
color:var(--text);
|
||||||
|
border-color:var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero{
|
||||||
|
display:grid;
|
||||||
|
grid-template-columns:1.2fr .8fr;
|
||||||
|
gap:32px;
|
||||||
|
align-items:center;
|
||||||
|
padding:20px 0 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-copy{
|
||||||
|
padding:20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eyebrow{
|
||||||
|
display:inline-block;
|
||||||
|
background:rgba(77, 163, 255, 0.12);
|
||||||
|
color:var(--secondary);
|
||||||
|
padding:8px 12px;
|
||||||
|
border:1px solid rgba(125, 211, 252, 0.28);
|
||||||
|
border-radius:999px;
|
||||||
|
font-size:.8rem;
|
||||||
|
font-weight:700;
|
||||||
|
letter-spacing:.04em;
|
||||||
|
text-transform:uppercase;
|
||||||
|
margin-bottom:18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1{
|
||||||
|
color:var(--navy);
|
||||||
|
font-size:clamp(2.2rem, 4vw, 4rem);
|
||||||
|
line-height:1.1;
|
||||||
|
margin-bottom:18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-copy p{
|
||||||
|
font-size:1.08rem;
|
||||||
|
line-height:1.7;
|
||||||
|
color:var(--muted);
|
||||||
|
max-width:620px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions{
|
||||||
|
display:flex;
|
||||||
|
gap:16px;
|
||||||
|
margin-top:26px;
|
||||||
|
flex-wrap:wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mini-stats{
|
||||||
|
list-style:none;
|
||||||
|
display:flex;
|
||||||
|
gap:24px;
|
||||||
|
margin-top:28px;
|
||||||
|
flex-wrap:wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mini-stats li{
|
||||||
|
min-width:110px;
|
||||||
|
background:rgba(19, 29, 46, 0.95);
|
||||||
|
border:1px solid var(--border);
|
||||||
|
border-radius:16px;
|
||||||
|
padding:16px 18px;
|
||||||
|
box-shadow:0 8px 20px rgba(0,0,0,0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mini-stats strong{
|
||||||
|
display:block;
|
||||||
|
color:var(--secondary);
|
||||||
|
font-size:1.35rem;
|
||||||
|
margin-bottom:6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mini-stats span{
|
||||||
|
color:var(--muted);
|
||||||
|
font-size:.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-panel{
|
||||||
|
background:linear-gradient(180deg, #111d2e 0%, #0d1726 100%);
|
||||||
|
border:1px solid var(--border);
|
||||||
|
border-radius:24px;
|
||||||
|
padding:24px;
|
||||||
|
box-shadow:var(--shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-header{
|
||||||
|
display:flex;
|
||||||
|
align-items:center;
|
||||||
|
gap:10px;
|
||||||
|
font-weight:700;
|
||||||
|
color:var(--navy);
|
||||||
|
margin-bottom:18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-dot{
|
||||||
|
width:10px;
|
||||||
|
height:10px;
|
||||||
|
border-radius:50%;
|
||||||
|
background:var(--success);
|
||||||
|
box-shadow:0 0 0 6px rgba(34, 197, 94, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-card{
|
||||||
|
background:rgba(77, 163, 255, 0.08);
|
||||||
|
border-radius:18px;
|
||||||
|
padding:18px;
|
||||||
|
border:1px solid rgba(77, 163, 255, 0.24);
|
||||||
|
margin-bottom:22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label{
|
||||||
|
color:var(--muted);
|
||||||
|
font-size:.8rem;
|
||||||
|
margin-bottom:8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-card h3{
|
||||||
|
color:var(--text);
|
||||||
|
font-size:1.7rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-metrics{
|
||||||
|
display:grid;
|
||||||
|
grid-template-columns:1fr 1fr;
|
||||||
|
gap:14px;
|
||||||
|
margin-bottom:20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-metrics div{
|
||||||
|
background:rgba(17, 29, 46, 0.8);
|
||||||
|
border:1px solid var(--border);
|
||||||
|
border-radius:14px;
|
||||||
|
padding:14px 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-metrics small{
|
||||||
|
display:block;
|
||||||
|
color:var(--muted);
|
||||||
|
margin-bottom:8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-metrics strong{
|
||||||
|
color:var(--text);
|
||||||
|
font-size:1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-progress{
|
||||||
|
background:rgba(17, 29, 46, 0.8);
|
||||||
|
border:1px solid var(--border);
|
||||||
|
border-radius:14px;
|
||||||
|
padding:14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-labels{
|
||||||
|
display:flex;
|
||||||
|
align-items:center;
|
||||||
|
justify-content:space-between;
|
||||||
|
gap:10px;
|
||||||
|
margin-bottom:10px;
|
||||||
|
font-size:.9rem;
|
||||||
|
color:var(--navy);
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar{
|
||||||
|
background:#101a2b;
|
||||||
|
height:12px;
|
||||||
|
border-radius:999px;
|
||||||
|
overflow:hidden;
|
||||||
|
border:1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar span{
|
||||||
|
display:block;
|
||||||
|
width:68%;
|
||||||
|
height:100%;
|
||||||
|
background:linear-gradient(90deg, var(--primary), var(--secondary));
|
||||||
|
border-radius:inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.features{
|
||||||
|
display:grid;
|
||||||
|
grid-template-columns:repeat(3, minmax(0, 1fr));
|
||||||
|
gap:24px;
|
||||||
|
padding:20px 0 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card{
|
||||||
|
background:rgba(16, 27, 45, 0.96);
|
||||||
|
border:1px solid var(--border);
|
||||||
|
border-radius:20px;
|
||||||
|
padding:26px 20px;
|
||||||
|
box-shadow:0 12px 22px rgba(0,0,0,0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card h2{
|
||||||
|
color:var(--secondary);
|
||||||
|
margin-bottom:12px;
|
||||||
|
font-size:1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card p{
|
||||||
|
color:var(--muted);
|
||||||
|
line-height:1.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 900px){
|
||||||
|
.hero{
|
||||||
|
grid-template-columns:1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar{
|
||||||
|
flex-wrap:wrap;
|
||||||
|
justify-content:center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar-nav{
|
||||||
|
order:3;
|
||||||
|
width:100%;
|
||||||
|
justify-content:center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 640px){
|
||||||
|
body{
|
||||||
|
padding:14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.features{
|
||||||
|
grid-template-columns:1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions,
|
||||||
|
.mini-stats{
|
||||||
|
flex-direction:column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn{
|
||||||
|
width:100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card{
|
||||||
|
background:var(--card);
|
||||||
|
padding:20px;
|
||||||
|
margin-bottom:20px;
|
||||||
|
border-radius:12px;
|
||||||
|
box-shadow:0 2px 8px rgba(0,0,0,.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2{
|
||||||
|
margin-bottom:10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2{
|
||||||
|
margin-bottom:15px;
|
||||||
|
color:#dfeafe;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress{
|
||||||
|
display:flex;
|
||||||
|
gap:8px;
|
||||||
|
flex-wrap:wrap;
|
||||||
|
margin:15px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.session{
|
||||||
|
width:40px;
|
||||||
|
height:40px;
|
||||||
|
border:2px solid var(--primary);
|
||||||
|
border-radius:50%;
|
||||||
|
display:flex;
|
||||||
|
align-items:center;
|
||||||
|
justify-content:center;
|
||||||
|
cursor:pointer;
|
||||||
|
transition:.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.session.completed{
|
||||||
|
background:var(--success);
|
||||||
|
color:white;
|
||||||
|
border-color:var(--success);
|
||||||
|
}
|
||||||
|
|
||||||
|
table{
|
||||||
|
width:100%;
|
||||||
|
border-collapse:collapse;
|
||||||
|
margin-top:10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
th{
|
||||||
|
background:var(--primary);
|
||||||
|
color:#07111d;
|
||||||
|
}
|
||||||
|
|
||||||
|
th,td{
|
||||||
|
border:1px solid var(--border);
|
||||||
|
padding:10px;
|
||||||
|
text-align:center;
|
||||||
|
color:var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="text"],
|
||||||
|
input[type="date"],
|
||||||
|
textarea,
|
||||||
|
select{
|
||||||
|
width:100%;
|
||||||
|
padding:8px;
|
||||||
|
border:1px solid var(--border);
|
||||||
|
border-radius:6px;
|
||||||
|
background:rgba(13, 23, 38, 0.9);
|
||||||
|
color:var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea{
|
||||||
|
min-height:120px;
|
||||||
|
resize:vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
.question{
|
||||||
|
margin-bottom:10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
small{
|
||||||
|
display:block;
|
||||||
|
margin-top:10px;
|
||||||
|
color:var(--muted);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,111 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="es">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport"
|
||||||
|
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||||
|
<title>OncoDiario</title>
|
||||||
|
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="css/estilos.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="page-shell">
|
||||||
|
<header class="topbar container">
|
||||||
|
<div class="brand" aria-label="OncoDiario logo">
|
||||||
|
<span class="brand-mark">O</span>
|
||||||
|
<span>OncoDiario</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav class="topbar-nav" aria-label="Navegación principal">
|
||||||
|
<a href="#info">Inicio</a>
|
||||||
|
<a href="#info">Qué incluye</a>
|
||||||
|
<a href="seguimiento.html">Seguimiento</a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<a class="btn btn-primary" href="seguimiento.html">Abrir seguimiento</a>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="container hero">
|
||||||
|
<section class="hero-copy">
|
||||||
|
<span class="eyebrow">Cuidado personalizado</span>
|
||||||
|
<h1>Tu tratamiento, monitorizado con claridad.</h1>
|
||||||
|
<p>
|
||||||
|
Registra sesiones, revisa síntomas y lleva un control semanal de tu evolución
|
||||||
|
para acompañarte mejor en cada fase del tratamiento.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="actions">
|
||||||
|
<a class="btn btn-primary" href="seguimiento.html">Ir a seguimiento</a>
|
||||||
|
<a class="btn btn-secondary" href="#info">Más información</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul class="mini-stats" aria-label="Estadísticas rápidas">
|
||||||
|
<li>
|
||||||
|
<strong>12</strong>
|
||||||
|
<span>semanas</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>3</strong>
|
||||||
|
<span>registros</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>24/7</strong>
|
||||||
|
<span>seguimiento</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<aside class="hero-panel" aria-label="Resumen del tratamiento">
|
||||||
|
<div class="panel-header">
|
||||||
|
<span class="status-dot"></span>
|
||||||
|
<span>Resumen del paciente</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel-card">
|
||||||
|
<p class="label">Tratamiento actual</p>
|
||||||
|
<h3>Quimioterapia</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel-metrics">
|
||||||
|
<div>
|
||||||
|
<small>Próxima sesión</small>
|
||||||
|
<strong>15 oct</strong>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<small>Estado</small>
|
||||||
|
<strong>Estable</strong>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel-progress">
|
||||||
|
<div class="progress-labels">
|
||||||
|
<span>Progreso semanal</span>
|
||||||
|
<strong>68%</strong>
|
||||||
|
</div>
|
||||||
|
<div class="progress-bar">
|
||||||
|
<span></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<section id="info" class="container features" aria-label="Características principales">
|
||||||
|
<article class="feature-card">
|
||||||
|
<h2>Calendario</h2>
|
||||||
|
<p>Organiza sesiones, fechas de tratamiento y revisiones médicas.</p>
|
||||||
|
</article>
|
||||||
|
<article class="feature-card">
|
||||||
|
<h2>Síntomas</h2>
|
||||||
|
<p>Controla fatiga, náuseas, dolor y bienestar general cada semana.</p>
|
||||||
|
</article>
|
||||||
|
<article class="feature-card">
|
||||||
|
<h2>Consulta</h2>
|
||||||
|
<p>Prepara preguntas y anota observaciones para tus citas con el equipo.</p>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,114 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="es">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>OncoDiario - Seguimiento del Tratamiento</title>
|
||||||
|
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="css/estilos.css">
|
||||||
|
<link rel="icon" href="img/logo.svg" type="image/x-icon">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h1>🩺 OncoDiario</h1>
|
||||||
|
<p>Seguimiento del tratamiento oncológico</p>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<label>Fecha de inicio:</label>
|
||||||
|
<input type="date">
|
||||||
|
|
||||||
|
<div class="progress" id="progress"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h2>Calendario de sesiones</h2>
|
||||||
|
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Semana</th>
|
||||||
|
<th>Fecha</th>
|
||||||
|
<th>Tratamiento</th>
|
||||||
|
<th>Completada</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="sessionsTable"></tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h2>Registro semanal de síntomas</h2>
|
||||||
|
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Semana</th>
|
||||||
|
<th>Fatiga</th>
|
||||||
|
<th>Náuseas</th>
|
||||||
|
<th>Dolor</th>
|
||||||
|
<th>Neuropatía</th>
|
||||||
|
<th>Sueño</th>
|
||||||
|
<th>Estado ánimo</th>
|
||||||
|
<th>Observaciones</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="symptomsTable"></tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<small>
|
||||||
|
Escala: 0=nada | 1=leve | 2=moderado | 3=importante |
|
||||||
|
4=muy importante | 5=incapacitante
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h2>Preguntas para el oncólogo</h2>
|
||||||
|
|
||||||
|
<div id="questions"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h2>Notas de consulta</h2>
|
||||||
|
<textarea placeholder="Escribe aquí tus notas..."></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
// Barra de progreso
|
||||||
|
const progress = document.getElementById('progress');
|
||||||
|
|
||||||
|
for(let i=1;i<=12;i++){
|
||||||
|
const item = document.createElement('div');
|
||||||
|
item.className = 'session';
|
||||||
|
item.innerText = i;
|
||||||
|
|
||||||
|
item.addEventListener('click',()=>{
|
||||||
|
item.classList.toggle('completed');
|
||||||
|
});
|
||||||
|
|
||||||
|
progress.appendChild(item);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Calendario de sesiones
|
||||||
|
|
||||||
|
const sessionsTable =
|
||||||
|
document.getElementById('sessionsTable');
|
||||||
|
|
||||||
|
for(let i=1;i<=12;i++){
|
||||||
|
|
||||||
|
sessionsTable.innerHTML += `
|
||||||
|
<tr>
|
||||||
|
<td>${i}</td>
|
||||||
|
<td><input type="date"></td>
|
||||||
|
<td><input type="text" placeholder="Quimioterapia, inmunoterapia..."></td>
|
||||||
|
<td><input type="checkbox"></td>
|
||||||
|
<
|
||||||
Loading…
Reference in New Issue