-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
137 lines (131 loc) · 9.07 KB
/
index.html
File metadata and controls
137 lines (131 loc) · 9.07 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RH App Auscultación</title>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style type="text/tailwindcss">
:root {
--primary-50: #eef8fc;
--primary-100: #dcf1f9;
--primary-200: #b9e3f3;
--primary-300: #96d5ed;
--primary-400: #73c7e7;
--primary-500: #50b9e1;
--primary-600: #1193d4;
--primary-700: #0d70a1;
--primary-800: #0a577b;
--primary-900: #063e55;
--primary-950: #042b3a;
--primary-color: #1193d4;
}
body {
min-height: 100dvh;
background-color: #111c22;
}
</style>
</head>
<body class="bg-[#111c22] dark" style="font-family: Inter, 'Noto Sans', sans-serif;">
<!-- PIN Screen -->
<div id="pin-screen" class="flex flex-col items-center justify-center h-screen bg-[#111c22]">
<div class="w-full max-w-xs p-6 bg-[#192b33] rounded-lg shadow-lg">
<h1 class="text-2xl font-bold text-center text-white mb-6">Ingrese PIN</h1>
<input id="pin-input" type="password" class="form-input w-full rounded-lg text-white focus:outline-0 focus:ring-2 focus:ring-[var(--primary-color)] border border-[#325567] bg-[#192b33] h-14 placeholder:text-[#92b7c9] text-center text-2xl tracking-widest" placeholder="••••" maxlength="4">
<button id="pin-submit" class="w-full mt-6 flex items-center justify-center rounded-lg h-14 px-5 bg-primary-600 text-white text-lg font-bold hover:bg-primary-700 transition-colors">
Ingresar
</button>
<p id="pin-error" class="text-red-500 text-center mt-4" style="display: none;">PIN incorrecto</p>
</div>
</div>
<!-- Main App -->
<div id="app-container" style="display: none;">
<div class="relative flex h-auto min-h-screen w-full flex-col bg-[#111c22] dark justify-between group/design-root overflow-x-hidden">
<div class="flex-grow">
<header class="flex items-center justify-between bg-transparent p-4 pb-2">
<h1 class="text-white text-lg font-bold leading-tight tracking-[-0.015em]">Auscultación App</h1>
<div class="relative">
<a id="date-link" class="text-white hover:font-bold text-sm cursor-pointer underline decoration-white"></a>
<input type="date" id="new-reading-date" hidden/>
</div>
</header>
<main class="p-4 space-y-4">
<!-- Instrument Selection -->
<div class="flex gap-4">
<div class="flex-1">
<label class="sr-only" for="instrument-prefix-select">Filtrar por prefijo</label>
<select id="instrument-prefix-select" class="form-select flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-lg text-white focus:outline-0 focus:ring-2 focus:ring-[var(--primary-color)] border border-[#325567] bg-[#192b33] focus:border-[#325567] h-14 placeholder:text-[#92b7c9] p-3 text-base font-normal leading-normal appearance-none">
<option value="">Todos</option>
<option value="N.E.">N.E.</option>
<option value="QP">QP</option>
<option value="QA">QA</option>
<option value="EF">EF</option>
<option value="TX">TX</option>
<option value="PA">PA</option>
<option value="PC">PC</option>
<option value="PD">PD</option>
<option value="PH">PH</option>
</select>
</div>
<div class="flex-1">
<label class="sr-only" for="instrument-select-chart">Seleccionar Instrumento</label>
<select id="instrument-select-chart" class="form-select flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-lg text-white focus:outline-0 focus:ring-2 focus:ring-[var(--primary-color)] border border-[#325567] bg-[#192b33] focus:border-[#325567] h-14 placeholder:text-[#92b7c9] p-3 text-base font-normal leading-normal appearance-none">
<!-- Opciones de instrumentos se generarán aquí -->
</select>
</div>
</div>
<!-- Chart Display -->
<div class="flex flex-col gap-2 rounded-xl border border-[#325567] bg-[#192b33] p-4">
<div class="flex justify-between items-start">
<div>
<p id="chart-title" class="text-white text-base font-medium leading-normal">Magnitud vs. Fecha</p>
<p id="latest-measurement" class="text-white tracking-light text-4xl font-bold leading-tight truncate">--</p>
</div>
</div>
<div class="h-48 sm:h-64 py-4">
<canvas id="measurements-chart"></canvas>
</div>
<div id="chart-legend" class="flex justify-between text-[#92b7c9] text-xs font-medium tracking-wider border-t border-[#325567] pt-2">
<!-- Leyenda del gráfico se generará aquí -->
</div>
</div>
<!-- New Reading Form -->
<div class="space-y-2 pt-2">
<div class="flex gap-4">
<div class="flex-1 space-y-2">
<label class="text-sm font-medium text-gray-300" for="instrument-reading">Lectura del Instrumento</label>
<input class="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-md text-white focus:outline-0 focus:ring-2 focus:ring-primary-600 border-none bg-[#233c48] h-14 placeholder:text-[#92b7c9] p-4 text-base font-normal leading-normal" id="new-reading-input" placeholder="Ingrese la lectura" type="text"/>
</div>
<div class="flex-1 space-y-2">
<label class="text-sm font-medium text-gray-300" for="physical-magnitude">Magnitud Física</label>
<div class="relative">
<input class="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-md text-white focus:outline-0 border-none bg-[#1a2e39] h-14 placeholder:text-[#92b7c9] p-4 text-base font-normal leading-normal cursor-not-allowed" id="calculated-magnitude" readonly="" value="--"/>
</div>
</div>
</div>
</div>
</main>
</div>
<footer class="sticky bottom-0 z-10 border-t border-slate-800 bg-[#111c22]/80 backdrop-blur-sm px-4 pt-4 pb-16">
<div class="flex gap-4">
<button id="clear-data-button" class="flex-1 flex w-full min-w-0 cursor-pointer items-center justify-center overflow-hidden rounded-lg h-14 px-5 bg-red-600 text-white text-lg font-bold leading-normal tracking-[0.015em] hover:bg-red-700 active:bg-red-800 transition-colors shadow-lg shadow-red-900/50">
<span class="material-symbols-outlined mr-2">delete</span>
<span class="truncate">Limpiar</span>
</button>
<button id="save-reading-button" class="flex-1 flex w-full min-w-0 cursor-pointer items-center justify-center overflow-hidden rounded-lg h-14 px-5 bg-green-600 text-white text-lg font-bold leading-normal tracking-[0.015em] hover:bg-green-700 active:bg-green-800 transition-colors shadow-lg shadow-green-900/50">
<span class="material-symbols-outlined mr-2">save</span>
<span class="truncate">Guardar</span>
</button>
<button id="download-report-button" class="flex-1 flex w-full min-w-0 cursor-pointer items-center justify-center overflow-hidden rounded-lg h-14 px-5 bg-slate-600 text-white text-lg font-bold leading-normal tracking-[0.015em] hover:bg-slate-700 active:bg-slate-800 transition-colors shadow-lg shadow-slate-900/50">
<span class="material-symbols-outlined mr-2">download</span>
<span class="truncate">Reporte</span>
</button>
</div>
</footer>
</div>
</div>
<script src="app.js"></script>
</body>
</html>