2024-08-29 15:21:36 +10:00

77 lines
4.8 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--
Neonatal jaundice treatment threshold calculator
Copyright (C) 2024 Lee Yingtong Li
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Neonatal jaundice treatment threshold calculator</title>
<link href="build/main.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body class="w-full">
<div class="max-w-2xl mx-auto my-4 px-4">
<h1 class="text-gray-900 font-medium text-xl pb-3 mb-4 border-b border-gray-400">Neonatal jaundice treatment thresholds</h1>
<div class="space-y-2">
<div class="sm:grid sm:grid-cols-3">
<label for="gestation" class="text-sm font-medium text-gray-900 pt-1.5">Gestational age:</label>
<div class="col-span-2 relative rounded-md shadow-sm">
<input id="gestation" type="number" value="38" min="23" onchange="plotGraphData();updateBilirubin()" class="w-full rounded-md border-0 py-1.5 pr-[8.8rem] text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 text-sm">
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
<span class="text-gray-500 text-sm">completed weeks</span>
</div>
</div>
</div>
<div class="sm:grid sm:grid-cols-3">
<label for="time_birth" class="text-sm font-medium text-gray-900 pt-1.5">Time of birth:</label>
<input id="time_birth" type="datetime-local" onchange="updateBilirubin()" class="col-span-2 w-full rounded-md shadow-sm border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 text-sm">
</div>
<div class="sm:grid sm:grid-cols-3">
<label for="time_measurement" class="text-sm font-medium text-gray-900 pt-1.5">Time of measurement:</label>
<input id="time_measurement" type="datetime-local" onchange="updateBilirubin()" class="col-span-2 w-full rounded-md shadow-sm border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 text-sm">
</div>
<div class="sm:grid sm:grid-cols-3">
<label for="bilirubin" class="text-sm font-medium text-gray-900 pt-1.5">Total bilirubin:</label>
<div class="col-span-2 relative rounded-md shadow-sm">
<input id="bilirubin" type="number" oninput="updateBilirubin()" class="w-full rounded-md border-0 py-1.5 pr-[4.5rem] text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 text-sm">
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
<span class="text-gray-500 text-sm">μmol/L</span>
</div>
</div>
</div>
</div>
<div id="result" class="hidden">
<p></p>
</div>
<div class="border-t border-gray-400 mt-4 pt-2">
<canvas id="bilirubinChart" width="672" height="336"></canvas>
</div>
<div class="border-t border-gray-400 mt-4 pt-4 text-xs text-gray-600 space-y-2">
<p>Treatment thresholds as per: National Institute for Health and Clinical Excellence. Neonatal jaundice treatment threshold graphs. In: Jaundice in newborn babies under 28 days. London: National Institute for Health and Clinical Excellence; 2023. (NICE clinical guidelines; CG98). <a href="https://www.nice.org.uk/guidance/cg98" class="text-blue-500 hover:underline hover:text-blue-600">https://www.nice.org.uk/guidance/cg98</a></p>
<p>This tool is made available in the hope that it will be useful, but <em>WITHOUT ANY WARRANTY</em>; without even the implied warranty of <em>MERCHANTABILITY</em> or <em>FITNESS FOR A PARTICULAR PURPOSE</em>. Information provided in this tool is intended for reference by medical professionals. Nothing in this tool is intended to constitute medical advice.</p>
<p>Lee Yingtong Li, 2024. Source code available at <a href="https://yingtongli.me/git/bilirubin-calculator" class="text-blue-500 hover:underline hover:text-blue-600">https://yingtongli.me/git/bilirubin-calculator</a>.</p>
</div>
</div>
<script src="bilirubin_lib.js"></script>
<script src="bilirubin_app.js"></script>
</body>
</html>