Skip to content

Commit b3e584d

Browse files
nopara73nopara73
committed
Implement negative CRP
1 parent 153c286 commit b3e584d

File tree

1 file changed

+135
-10
lines changed

1 file changed

+135
-10
lines changed

‎LongevityWorldCup.Website/wwwroot/onboarding/pheno-age.html

+135-10
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,101 @@
9797
margin-left: 0 !important; /* Resets left margin */
9898
}
9999
}
100+
101+
.crp-container {
102+
margin-bottom: 1rem;
103+
}
104+
105+
.label-toggle-group {
106+
display: flex;
107+
align-items: center;
108+
gap: 0.5rem;
109+
}
110+
111+
.label-toggle-group label {
112+
font-size: 1rem;
113+
color: #333;
114+
}
115+
116+
.negative-toggle {
117+
display: flex;
118+
align-items: center;
119+
gap: 0.5rem; /* This sets a small gap between the toggle and the text */
120+
}
121+
122+
.toggle-label {
123+
position: relative;
124+
display: inline-block;
125+
width: 36px;
126+
height: 20px;
127+
margin-right: 0rem;
128+
}
129+
130+
.toggle-label input {
131+
opacity: 0;
132+
width: 0;
133+
height: 0;
134+
}
135+
136+
.slider {
137+
position: absolute;
138+
cursor: pointer;
139+
top: 0;
140+
left: 0;
141+
right: 0;
142+
bottom: 0;
143+
background-color: #ccc;
144+
transition: 0.4s;
145+
border-radius: 20px;
146+
}
147+
148+
.slider:before {
149+
position: absolute;
150+
content: "";
151+
height: 14px;
152+
width: 14px;
153+
left: 3px;
154+
bottom: 3px;
155+
background-color: white;
156+
transition: 0.4s;
157+
border-radius: 50%;
158+
}
159+
160+
.toggle-label input:checked + .slider {
161+
background-color: #f4a6a6; /* Pale red */
162+
}
163+
164+
.toggle-label input:checked + .slider:before {
165+
transform: translateX(16px);
166+
}
167+
168+
.toggle-text {
169+
font-size: 0.9rem;
170+
}
171+
172+
@media (max-width: 768px) {
173+
.toggle-text {
174+
font-size: 0.7rem;
175+
}
176+
}
177+
178+
.input-group {
179+
display: flex;
180+
align-items: center;
181+
margin-top: 0.5rem;
182+
}
183+
184+
.input-group input {
185+
flex: 1;
186+
margin-right: 0.5rem;
187+
}
188+
189+
.input-group select {
190+
padding: 0.5rem;
191+
border: 1px solid #ccc;
192+
border-radius: 4px;
193+
width: auto;
194+
}
100195
</style>
101196
</head>
102197
<body>
@@ -189,16 +284,30 @@ <h2 data-aos="fade" data-aos-duration="700" data-aos-delay="250">
189284
</div>
190285

191286
<!-- C-Reactive Protein -->
192-
<label for="crp">C-Reactive Protein</label>
193-
<div class="input-group">
194-
<input type="number" id="crp" name="crp" step="any" required aria-required="true" inputmode="decimal" onchange="calculateResultIfResultAlreadyCalculated()">
195-
<label for="crpUnit" class="visually-hidden">Select unit for C-Reactive Protein</label>
196-
<select id="crpUnit" name="crpUnit" aria-label="CRP unit" onchange="calculateResultIfResultAlreadyCalculated()">
197-
<option value="10">mg/L</option>
198-
<option value="1">mg/dL</option>
199-
<option value="10000">mg/mL</option>
200-
<option value="86.96">nmol/L</option>
201-
</select>
287+
<div class="crp-container">
288+
<!-- Label and Negative Toggle in the same line -->
289+
<div class="label-toggle-group">
290+
<label for="crp">C-Reactive Protein</label>
291+
<span title="Check this box if your result is below detectable limits, such as when marked 'negative.'" class="toggle-text">Set if negative:</span>
292+
<div title="Check this box if your result is below detectable limits, such as when marked 'negative.'" class="negative-toggle">
293+
<label for="crp-negative" class="toggle-label">
294+
<input type="checkbox" id="crp-negative" onchange="toggleCRPInput()">
295+
<span class="slider"></span>
296+
</label>
297+
</div>
298+
</div>
299+
300+
<!-- Input Group -->
301+
<div class="input-group">
302+
<input type="number" id="crp" name="crp" step="any" required aria-required="true" inputmode="decimal" onchange="calculateResultIfResultAlreadyCalculated()">
303+
<label for="crpUnit" class="visually-hidden">Select unit for C-Reactive Protein</label>
304+
<select id="crpUnit" name="crpUnit" aria-label="CRP unit" onchange="calculateResultIfResultAlreadyCalculated()">
305+
<option value="10">mg/L</option>
306+
<option value="1">mg/dL</option>
307+
<option value="10000">mg/mL</option>
308+
<option value="86.96">nmol/L</option>
309+
</select>
310+
</div>
202311
</div>
203312

204313
<!-- Lymphocyte Percentage -->
@@ -755,6 +864,22 @@ <h2 data-aos="fade" data-aos-duration="700" data-aos-delay="250">
755864

756865
document.getElementById('dob-year').addEventListener('change', updateDays);
757866
document.getElementById('dob-month').addEventListener('change', updateDays);
867+
868+
function toggleCRPInput() {
869+
const crpInput = document.getElementById('crp');
870+
const crpUnit = document.getElementById('crpUnit');
871+
const crpNegativeCheckbox = document.getElementById('crp-negative');
872+
873+
if (crpNegativeCheckbox.checked) {
874+
crpInput.value = 1; // Set value to 1
875+
crpUnit.value = 10; // Set unit to mg/L
876+
crpInput.disabled = true; // Disable input field
877+
crpUnit.disabled = true; // Disable unit selector
878+
} else {
879+
crpInput.disabled = false; // Enable input field
880+
crpUnit.disabled = false; // Enable unit selector
881+
}
882+
}
758883
</script>
759884
</body>
760885
</html>

0 commit comments

Comments
 (0)