Skip to content

Commit b5df495

Browse files
nopara73nopara73
committed
inputmode="decimal":
Encourages on-screen keyboards (especially on mobile devices) to show a numeric/decimal layout. Helps users enter decimal numbers more comfortably.
1 parent 64f5f13 commit b5df495

File tree

1 file changed

+13
-13
lines changed

1 file changed

+13
-13
lines changed

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

+13-13
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@ <h2 data-aos="fade" data-aos-duration="700" data-aos-delay="250">The Blood Pact
126126
<!-- Albumin -->
127127
<label for="albumin">Albumin</label>
128128
<div class="input-group">
129-
<input type="number" id="albumin" name="albumin" step="0.1" required aria-required="true" onchange="calculateResultIfResultAlreadyCalculated()">
129+
<input type="number" id="albumin" name="albumin" step="0.1" required aria-required="true" inputmode="decimal" onchange="calculateResultIfResultAlreadyCalculated()">
130130
<label for="albuminUnit" class="visually-hidden">Select unit for Albumin</label>
131131
<select id="albuminUnit" name="albuminUnit" aria-label="Albumin unit" onchange="calculateResultIfResultAlreadyCalculated()">
132132
<option value="1">g/L</option>
@@ -141,7 +141,7 @@ <h2 data-aos="fade" data-aos-duration="700" data-aos-delay="250">The Blood Pact
141141
<!-- Creatinine -->
142142
<label for="creatinine">Creatinine</label>
143143
<div class="input-group">
144-
<input type="number" id="creatinine" name="creatinine" step="0.1" required aria-required="true" onchange="calculateResultIfResultAlreadyCalculated()">
144+
<input type="number" id="creatinine" name="creatinine" step="0.1" required aria-required="true" inputmode="decimal" onchange="calculateResultIfResultAlreadyCalculated()">
145145
<label for="creatinineUnit" class="visually-hidden">Select unit for Creatinine</label>
146146
<select id="creatinineUnit" name="creatinineUnit" aria-label="Creatinine unit" onchange="calculateResultIfResultAlreadyCalculated()">
147147
<option value="1">µmol/L</option>
@@ -153,7 +153,7 @@ <h2 data-aos="fade" data-aos-duration="700" data-aos-delay="250">The Blood Pact
153153
<!-- Glucose -->
154154
<label for="glucose">Glucose</label>
155155
<div class="input-group">
156-
<input type="number" id="glucose" name="glucose" step="0.1" required aria-required="true" onchange="calculateResultIfResultAlreadyCalculated()">
156+
<input type="number" id="glucose" name="glucose" step="0.1" required aria-required="true" inputmode="decimal" onchange="calculateResultIfResultAlreadyCalculated()">
157157
<label for="glucoseUnit" class="visually-hidden">Select unit for Glucose</label>
158158
<select id="glucoseUnit" name="glucoseUnit" aria-label="Glucose unit" onchange="calculateResultIfResultAlreadyCalculated()">
159159
<option value="1">mmol/L</option>
@@ -165,7 +165,7 @@ <h2 data-aos="fade" data-aos-duration="700" data-aos-delay="250">The Blood Pact
165165
<!-- C-Reactive Protein -->
166166
<label for="crp">C-Reactive Protein</label>
167167
<div class="input-group">
168-
<input type="number" id="crp" name="crp" step="0.1" required aria-required="true" onchange="calculateResultIfResultAlreadyCalculated()">
168+
<input type="number" id="crp" name="crp" step="0.1" required aria-required="true" inputmode="decimal" onchange="calculateResultIfResultAlreadyCalculated()">
169169
<label for="crpUnit" class="visually-hidden">Select unit for C-Reactive Protein</label>
170170
<select id="crpUnit" name="crpUnit" aria-label="CRP unit" onchange="calculateResultIfResultAlreadyCalculated()">
171171
<option value="10">mg/L</option>
@@ -178,7 +178,7 @@ <h2 data-aos="fade" data-aos-duration="700" data-aos-delay="250">The Blood Pact
178178
<!-- Lymphocyte Percentage -->
179179
<label for="lymphocyte">Lymphocytes</label>
180180
<div class="input-group">
181-
<input type="number" id="lymphocyte" name="lymphocyte" step="0.1" required aria-required="true" onchange="calculateResultIfResultAlreadyCalculated()">
181+
<input type="number" id="lymphocyte" name="lymphocyte" step="0.1" required aria-required="true" inputmode="decimal" onchange="calculateResultIfResultAlreadyCalculated()">
182182
<label for="lymphocyteUnit" class="visually-hidden">Select unit for Lymphocytes</label>
183183
<select id="lymphocyteUnit" name="lymphocyteUnit" aria-label="Lymphocyte unit" onchange="calculateResultIfResultAlreadyCalculated()">
184184
<option value="1">%</option>
@@ -190,7 +190,7 @@ <h2 data-aos="fade" data-aos-duration="700" data-aos-delay="250">The Blood Pact
190190
<!-- Mean Corpuscular Volume -->
191191
<label for="mcv">Mean Corpuscular Volume</label>
192192
<div class="input-group">
193-
<input type="number" id="mcv" name="mcv" step="0.1" required aria-required="true" onchange="calculateResultIfResultAlreadyCalculated()">
193+
<input type="number" id="mcv" name="mcv" step="0.1" required aria-required="true" inputmode="decimal" onchange="calculateResultIfResultAlreadyCalculated()">
194194
<label for="mcvUnit" class="visually-hidden">Select unit for MCV</label>
195195
<select id="mcvUnit" name="mcvUnit" aria-label="MCV unit" onchange="calculateResultIfResultAlreadyCalculated()">
196196
<option value="1">fL</option>
@@ -200,7 +200,7 @@ <h2 data-aos="fade" data-aos-duration="700" data-aos-delay="250">The Blood Pact
200200
<!-- Red Cell Distribution Width -->
201201
<label for="rcdw">Red Cell Distribution Width</label>
202202
<div class="input-group">
203-
<input type="number" id="rcdw" name="rcdw" step="0.1" required aria-required="true" onchange="calculateResultIfResultAlreadyCalculated()">
203+
<input type="number" id="rcdw" name="rcdw" step="0.1" required aria-required="true" inputmode="decimal" onchange="calculateResultIfResultAlreadyCalculated()">
204204
<label for="rcdwUnit" class="visually-hidden">Select unit for RDW</label>
205205
<select id="rcdwUnit" name="rcdwUnit" aria-label="RDW unit" onchange="calculateResultIfResultAlreadyCalculated()">
206206
<option value="1">%</option>
@@ -210,7 +210,7 @@ <h2 data-aos="fade" data-aos-duration="700" data-aos-delay="250">The Blood Pact
210210
<!-- Alkaline Phosphatase -->
211211
<label for="ap">Alkaline Phosphatase</label>
212212
<div class="input-group">
213-
<input type="number" id="ap" name="ap" required aria-required="true" onchange="calculateResultIfResultAlreadyCalculated()">
213+
<input type="number" id="ap" name="ap" required aria-required="true" inputmode="decimal" onchange="calculateResultIfResultAlreadyCalculated()">
214214
<label for="apUnit" class="visually-hidden">Select unit for Alkaline Phosphatase</label>
215215
<select id="apUnit" name="apUnit" aria-label="ALP unit" onchange="calculateResultIfResultAlreadyCalculated()">
216216
<option value="1">U/L</option>
@@ -221,7 +221,7 @@ <h2 data-aos="fade" data-aos-duration="700" data-aos-delay="250">The Blood Pact
221221
<!-- White Blood Cell Count -->
222222
<label for="wbc">White Blood Cell Count</label>
223223
<div class="input-group">
224-
<input type="number" id="wbc" name="wbc" step="0.1" required aria-required="true" onchange="calculateResultIfResultAlreadyCalculated()">
224+
<input type="number" id="wbc" name="wbc" step="0.1" required aria-required="true" inputmode="decimal" onchange="calculateResultIfResultAlreadyCalculated()">
225225
<label for="wbcUnit" class="visually-hidden">Select unit for White Blood Cell Count</label>
226226
<select id="wbcUnit" name="wbcUnit" aria-label="WBC unit" onchange="calculateResultIfResultAlreadyCalculated()">
227227
<option value="1">1000 cells/μL</option>
@@ -386,10 +386,10 @@ <h2 data-aos="fade" data-aos-duration="700" data-aos-delay="250">The Blood Pact
386386
// Setting up the animated counter effect
387387
let displayAge = 0;
388388
resultElement.innerHTML = `
389-
<div style="font-size: 1rem; color: #2c3e50; text-align: center;">Your biological age is:</div>
390-
<div style="font-size: 2.5rem; color: #4CAF50; font-weight: bold; text-align: center;"><span id="animatedAge">0</span></div>
391-
<div id="yearsText" style="font-size: 1rem; color: #2c3e50; text-align: center;">years</div>
392-
`;
389+
<div style="font-size: 1rem; color: #2c3e50; text-align: center;">Your biological age is:</div>
390+
<div style="font-size: 2.5rem; color: #4CAF50; font-weight: bold; text-align: center;"><span id="animatedAge">0</span></div>
391+
<div id="yearsText" style="font-size: 1rem; color: #2c3e50; text-align: center;">years</div>
392+
`;
393393

394394
if (isFirstTimeAnimation) {
395395
// Set the flag to false after the first run

0 commit comments

Comments
 (0)