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