-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
0116f07
commit da6f831
Showing
4 changed files
with
679 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,257 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="es"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> | ||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> | ||
| <link href="https://fonts.googleapis.com/css2?family=Oldenburg&family=Protest+Strike&display=swap" rel="stylesheet"> | ||
| <title>Historial de Hipertensión</title> | ||
| <style> | ||
| body { | ||
| background-color: #f0f4f7; | ||
| color: #333; | ||
| font-family: 'Oldenburg', sans-serif; | ||
| } | ||
| h1 { | ||
| font-family: 'Protest Strike', sans-serif; | ||
| font-weight: bold; | ||
| text-align: center; | ||
| margin-top: 30px; | ||
| } | ||
| .container { | ||
| margin-top: 50px; | ||
| } | ||
| .card { | ||
| border: 3px solid black; | ||
| } | ||
| .table { | ||
| margin-top: 20px; | ||
| border-radius: 10px; | ||
| overflow: hidden; | ||
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); | ||
| } | ||
| /* Bordes para toda la tabla*/ | ||
| .table * { | ||
| border: 5px solid black; | ||
| } | ||
| .table th { | ||
| background-color: #007bff; | ||
| color: white; | ||
| text-align: center; | ||
| } | ||
| .table th, .table td { | ||
| border: 2.5px solid black; /* Color negro para los bordes de las celdas */ | ||
| text-align: center; /* Centrar el texto en las celdas */ | ||
| } | ||
| .footer { | ||
| margin-top: 50px; | ||
| text-align: center; | ||
| font-size: 14px; | ||
| color: #888; | ||
| } | ||
| .stats { | ||
| margin-top: 20px; | ||
| text-align: center; | ||
| padding: 20px; | ||
| border-radius: 10px; | ||
| background-color: #ffffff; | ||
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); | ||
| border: 3.5px solid black; | ||
| } | ||
| .btn-secondary { | ||
| border-radius: 20px; | ||
| margin-top: 20px; | ||
| } | ||
|
|
||
| /* Estilo para la barra de desplazamiento cuando la tabla tiene más de 5 registros */ | ||
| /* | ||
| .scrollable-table { | ||
| max-height: 250px; | ||
| overflow-y: auto; | ||
| } | ||
| */ | ||
| .btn-danger { | ||
| margin-top: 20px; | ||
| border-radius: 30px; | ||
|
|
||
| } | ||
| .btn-secondary { | ||
| /* Ajustar tamaño responsivo del botón */ | ||
| border-radius: 30px; | ||
| } | ||
| /* Estilos Responsivos */ | ||
| @media (max-width: 768px) { | ||
| h1 { | ||
| font-size: 32px; /* Tamaño de fuente más pequeño en móviles */ | ||
| } | ||
|
|
||
| .container { | ||
| margin-top: 20px; | ||
| padding: 0 10px; /* Reducir el padding lateral en móviles */ | ||
| } | ||
|
|
||
| .table th, .table td { | ||
| font-size: 14px; /* Tamaño de fuente más pequeño en móviles */ | ||
| padding: 8px; /* Reducir el padding para las celdas */ | ||
| } | ||
|
|
||
| .stats { | ||
| padding: 15px; /* Reducir el padding en el contenedor de estadísticas */ | ||
| } | ||
|
|
||
| /* Separar el boton de la card de arriba */ | ||
| .btn-danger { | ||
| margin-top: 10px; | ||
| border-radius: 30px; | ||
|
|
||
| } | ||
| .btn-secondary { | ||
| /* Ajustar tamaño responsivo del botón */ | ||
|
|
||
| border-radius: 30px; | ||
| } | ||
|
|
||
| } | ||
|
|
||
| /* Asegurarse de que el contenedor de la tabla sea responsivo */ | ||
| @media (max-width: 480px) { | ||
| .table { | ||
| font-size: 12px; /* Tamaño de fuente aún más pequeño en dispositivos muy pequeños */ | ||
| } | ||
|
|
||
| .table th, .table td { | ||
| padding: 6px; /* Padding aún más pequeño */ | ||
| } | ||
|
|
||
| /* Separar el boton de la card de arriba */ | ||
| .btn-danger { | ||
| margin-top: 10px; | ||
| border-radius: 30px; | ||
|
|
||
| } | ||
| .btn-secondary { | ||
| /* Ajustar tamaño responsivo del botón */ | ||
|
|
||
| border-radius: 30px; | ||
| } | ||
|
|
||
| } | ||
|
|
||
| </style> | ||
| </head> | ||
| <body> | ||
|
|
||
| <div class="container"> | ||
| <h1>Historial de Hipertensión</h1> | ||
| <div class="card p-4"> | ||
| <div class="scrollable-table"> | ||
| <table class="table table-bordered"> | ||
| <thead> | ||
| <tr> | ||
| <th>Fecha</th> | ||
| <th>Presión Sistólica (mmHg)</th> | ||
| <th>Presión Diastólica (mmHg)</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody id="historyTableBody"> | ||
| <!-- Las lecturas se agregarán aquí dinámicamente --> | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="stats"> | ||
| <h2>Estadísticas</h2> | ||
| <p id="averageSystolic">Promedio Sistólico:- mmHg</p> | ||
| <p id="averageDiastolic"><strong>Promedio Diastólico:</strong> - mmHg</p> | ||
| <p id="minSystolic"><strong>Mínimo Sistólico:</strong> - mmHg (Hora: -)</p> | ||
| <p id="maxSystolic"><strong>Máximo Sistólico:</strong> - mmHg (Hora: -)</p> | ||
| <p id="minDiastolic"><strong>Mínimo Diastólico:</strong> - mmHg (Hora: -)</p> | ||
| <p id="maxDiastolic"><strong>Máximo Diastólico:</strong> - mmHg (Hora: -)</p> | ||
| <p id="totalReadings"><strong>Total de Lecturas:</strong> 0</p> | ||
| </div> | ||
|
|
||
|
|
||
| <button id="clearRecordsBtn" class="btn btn-danger btn-block">Eliminar todos los registros</button> | ||
| <a href="main.html" class="btn btn-secondary btn-block">Volver a la Página Principal</a> | ||
| </div> | ||
|
|
||
| <div class="footer"> | ||
| <p>© 2024 Jesús David Silva Rangel. Todos los derechos reservados.</p> | ||
| </div> | ||
|
|
||
| <script> | ||
| // Función para cargar las lecturas y estadísticas | ||
| function loadReadings() { | ||
| const readings = JSON.parse(localStorage.getItem('bloodPressureReadings')) || []; | ||
| const historyTableBody = document.getElementById('historyTableBody'); | ||
| const averageSystolic = document.getElementById('averageSystolic'); | ||
| const averageDiastolic = document.getElementById('averageDiastolic'); | ||
| const totalReadings = document.getElementById('totalReadings'); | ||
| const minSystolic = document.getElementById('minSystolic'); | ||
| const maxSystolic = document.getElementById('maxSystolic'); | ||
| const minDiastolic = document.getElementById('minDiastolic'); | ||
| const maxDiastolic = document.getElementById('maxDiastolic'); | ||
|
|
||
| // Limpiar la tabla antes de agregar filas nuevas | ||
| historyTableBody.innerHTML = ''; | ||
|
|
||
| // Mostrar lecturas en la tabla | ||
| readings.forEach(reading => { | ||
| const row = document.createElement('tr'); | ||
| row.innerHTML = ` | ||
| <td>${new Date(reading.date).toLocaleString()}</td> | ||
| <td>${reading.systolic}</td> | ||
| <td>${reading.diastolic}</td> | ||
| `; | ||
| historyTableBody.appendChild(row); | ||
| }); | ||
|
|
||
| // Calcular y mostrar estadísticas | ||
| if (readings.length > 0) { | ||
| const totalSystolic = readings.reduce((sum, r) => sum + r.systolic, 0); | ||
| const totalDiastolic = readings.reduce((sum, r) => sum + r.diastolic, 0); | ||
| const avgSystolic = Math.round(totalSystolic / readings.length); | ||
| const avgDiastolic = Math.round(totalDiastolic / readings.length); | ||
|
|
||
| const minSystolicReading = readings.reduce((min, r) => r.systolic < min.systolic ? r : min, readings[0]); | ||
| const maxSystolicReading = readings.reduce((max, r) => r.systolic > max.systolic ? r : max, readings[0]); | ||
| const minDiastolicReading = readings.reduce((min, r) => r.diastolic < min.diastolic ? r : min, readings[0]); | ||
| const maxDiastolicReading = readings.reduce((max, r) => r.diastolic > max.diastolic ? r : max, readings[0]); | ||
|
|
||
| averageSystolic.textContent = `Promedio Sistólico: ${avgSystolic} mmHg`; | ||
| averageDiastolic.textContent = `Promedio Diastólico: ${avgDiastolic} mmHg`; | ||
| minSystolic.textContent = `Mínimo Sistólico: ${minSystolicReading.systolic} mmHg (Hora: ${new Date(minSystolicReading.date).toLocaleString()})`; | ||
| maxSystolic.textContent = `Máximo Sistólico: ${maxSystolicReading.systolic} mmHg (Hora: ${new Date(maxSystolicReading.date).toLocaleString()})`; | ||
| minDiastolic.textContent = `Mínimo Diastólico: ${minDiastolicReading.diastolic} mmHg (Hora: ${new Date(minDiastolicReading.date).toLocaleString()})`; | ||
| maxDiastolic.textContent = `Máximo Diastólico: ${maxDiastolicReading.diastolic} mmHg (Hora: ${new Date(maxDiastolicReading.date).toLocaleString()})`; | ||
| totalReadings.textContent = `Total de Lecturas: ${readings.length}`; | ||
| } else { | ||
| averageSystolic.textContent = `Promedio Sistólico: - mmHg`; | ||
| averageDiastolic.textContent = `Promedio Diastólico: - mmHg`; | ||
| minSystolic.textContent = `Mínimo Sistólico: - mmHg (Hora: -)`; | ||
| maxSystolic.textContent = `Máximo Sistólico: - mmHg (Hora: -)`; | ||
| minDiastolic.textContent = `Mínimo Diastólico: - mmHg (Hora: -)`; | ||
| maxDiastolic.textContent = `Máximo Diastólico: - mmHg (Hora: -)`; | ||
| totalReadings.textContent = `Total de Lecturas: 0`; | ||
| } | ||
| } | ||
|
|
||
| // Función para eliminar todos los registros | ||
| function clearRecords() { | ||
| if (confirm("¿Estás seguro de que deseas eliminar todos los registros?")) { | ||
| localStorage.removeItem('bloodPressureReadings'); | ||
| loadReadings(); // Recargar la tabla después de eliminar los registros | ||
| } | ||
| } | ||
|
|
||
| // Cargar lecturas al inicio | ||
| document.addEventListener('DOMContentLoaded', loadReadings); | ||
|
|
||
| // Añadir evento al botón de eliminar | ||
| document.getElementById('clearRecordsBtn').addEventListener('click', clearRecords); | ||
| </script> | ||
|
|
||
| </body> | ||
| </html> |
Oops, something went wrong.