Alexander/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(fitness): add how-to-measure hints to body-parts form

Browse Source 
Inline italic captions under each single-sided input (neck, shoulders,
chest, waist, hips) and row-spanning captions with a primary accent bar
under each paired row (biceps, forearms, thighs, calves) — one tip per
pair, not per side. EN + DE copy.
This commit is contained in:
Alexander Bocken
2026-04-20 13:25:58 +02:00
parent e9010b9e13
commit b2b69301aa
3 changed files with 84 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "homepage",
"version": "1.35.2",
"version": "1.35.3",
"private": true,
"type": "module",
"scripts": {
src/lib/js/fitnessI18n.ts
+36
View File
@@ -214,6 +214,42 @@ const translations: Translations = {
r_thigh: { en: 'R Thigh', de: 'R Oberschenkel' },
l_calf: { en: 'L Calf', de: 'L Wade' },
r_calf: { en: 'R Calf', de: 'R Wade' },
measure_tip_neck: {
en: 'Just below the Adam\u2019s apple, tape parallel to the floor.',
de: 'Direkt unter dem Adamsapfel, Band parallel zum Boden.'
},
measure_tip_shoulders: {
en: 'Widest point across the deltoids, arms relaxed at your sides.',
de: 'Breiteste Stelle \u00fcber die Schultern, Arme entspannt h\u00e4ngend.'
},
measure_tip_chest: {
en: 'At nipple line after a normal exhale, tape horizontal.',
de: 'In Brustwarzenh\u00f6he nach normalem Ausatmen, Band waagerecht.'
},
measure_tip_biceps: {
en: 'Arm flexed at the peak; tape around the thickest part.',
de: 'Arm angespannt im Peak; um die dickste Stelle messen.'
},
measure_tip_forearms: {
en: 'Widest point below the elbow, arm hanging relaxed.',
de: 'Breiteste Stelle unterhalb des Ellenbogens, Arm entspannt.'
},
measure_tip_waist: {
en: 'At the navel, relaxed \u2014 don\u2019t suck in.',
de: 'In Nabelh\u00f6he, locker \u2014 nicht einziehen.'
},
measure_tip_hips: {
en: 'Around the widest point of the buttocks.',
de: 'Um die breiteste Stelle des Ges\u00e4\u00dfes.'
},
measure_tip_thighs: {
en: 'Midway between hip crease and knee.',
de: 'Mittig zwischen Leistenfalte und Knie.'
},
measure_tip_calves: {
en: 'Widest point, standing with weight on both feet.',
de: 'Breiteste Stelle, beidseitig belastet stehend.'
},
save_measurement: { en: 'Save Measurement', de: 'Messung speichern' },
update_measurement: { en: 'Update Measurement', de: 'Messung aktualisieren' },
latest: { en: 'Latest', de: 'Aktuell' },
src/routes/fitness/[measure=fitnessMeasure]/+page.svelte
+47 -5
View File
@@ -349,9 +349,21 @@
<div class="bp-group">
<span class="bp-group-label">{lang === 'en' ? 'Upper body' : 'Oberkörper'}</span>
<div class="bp-row">
<div class="bp-field"><label for="m-neck">{t('neck', lang)}</label><input id="m-neck" type="number" step="0.1" bind:value={formNeck} placeholder="--" inputmode="decimal" /></div>
<div class="bp-field"><label for="m-shoulders">{t('shoulders', lang)}</label><input id="m-shoulders" type="number" step="0.1" bind:value={formShoulders} placeholder="--" inputmode="decimal" /></div>
<div class="bp-field"><label for="m-chest">{t('chest', lang)}</label><input id="m-chest" type="number" step="0.1" bind:value={formChest} placeholder="--" inputmode="decimal" /></div>
<div class="bp-field">
<label for="m-neck">{t('neck', lang)}</label>
<input id="m-neck" type="number" step="0.1" bind:value={formNeck} placeholder="--" inputmode="decimal" />
<small class="bp-hint">{t('measure_tip_neck', lang)}</small>
</div>
<div class="bp-field">
<label for="m-shoulders">{t('shoulders', lang)}</label>
<input id="m-shoulders" type="number" step="0.1" bind:value={formShoulders} placeholder="--" inputmode="decimal" />
<small class="bp-hint">{t('measure_tip_shoulders', lang)}</small>
</div>
<div class="bp-field">
<label for="m-chest">{t('chest', lang)}</label>
<input id="m-chest" type="number" step="0.1" bind:value={formChest} placeholder="--" inputmode="decimal" />
<small class="bp-hint">{t('measure_tip_chest', lang)}</small>
</div>
</div>
</div>
@@ -361,17 +373,27 @@
<div class="bp-field"><label for="m-bl">{t('l_bicep', lang)}</label><input id="m-bl" type="number" step="0.1" bind:value={formBicepsL} placeholder="--" inputmode="decimal" /></div>
<div class="bp-field"><label for="m-br">{t('r_bicep', lang)}</label><input id="m-br" type="number" step="0.1" bind:value={formBicepsR} placeholder="--" inputmode="decimal" /></div>
</div>
<p class="bp-row-hint">{t('measure_tip_biceps', lang)}</p>
<div class="bp-row">
<div class="bp-field"><label for="m-fl">{t('l_forearm', lang)}</label><input id="m-fl" type="number" step="0.1" bind:value={formForearmsL} placeholder="--" inputmode="decimal" /></div>
<div class="bp-field"><label for="m-fr">{t('r_forearm', lang)}</label><input id="m-fr" type="number" step="0.1" bind:value={formForearmsR} placeholder="--" inputmode="decimal" /></div>
</div>
<p class="bp-row-hint">{t('measure_tip_forearms', lang)}</p>
</div>
<div class="bp-group">
<span class="bp-group-label">{lang === 'en' ? 'Core' : 'Rumpf'}</span>
<div class="bp-row">
<div class="bp-field"><label for="m-waist">{t('waist', lang)}</label><input id="m-waist" type="number" step="0.1" bind:value={formWaist} placeholder="--" inputmode="decimal" /></div>
<div class="bp-field"><label for="m-hips">{t('hips', lang)}</label><input id="m-hips" type="number" step="0.1" bind:value={formHips} placeholder="--" inputmode="decimal" /></div>
<div class="bp-field">
<label for="m-waist">{t('waist', lang)}</label>
<input id="m-waist" type="number" step="0.1" bind:value={formWaist} placeholder="--" inputmode="decimal" />
<small class="bp-hint">{t('measure_tip_waist', lang)}</small>
</div>
<div class="bp-field">
<label for="m-hips">{t('hips', lang)}</label>
<input id="m-hips" type="number" step="0.1" bind:value={formHips} placeholder="--" inputmode="decimal" />
<small class="bp-hint">{t('measure_tip_hips', lang)}</small>
</div>
</div>
</div>
@@ -381,10 +403,12 @@
<div class="bp-field"><label for="m-tl">{t('l_thigh', lang)}</label><input id="m-tl" type="number" step="0.1" bind:value={formThighsL} placeholder="--" inputmode="decimal" /></div>
<div class="bp-field"><label for="m-tr">{t('r_thigh', lang)}</label><input id="m-tr" type="number" step="0.1" bind:value={formThighsR} placeholder="--" inputmode="decimal" /></div>
</div>
<p class="bp-row-hint">{t('measure_tip_thighs', lang)}</p>
<div class="bp-row">
<div class="bp-field"><label for="m-cl">{t('l_calf', lang)}</label><input id="m-cl" type="number" step="0.1" bind:value={formCalvesL} placeholder="--" inputmode="decimal" /></div>
<div class="bp-field"><label for="m-cr">{t('r_calf', lang)}</label><input id="m-cr" type="number" step="0.1" bind:value={formCalvesR} placeholder="--" inputmode="decimal" /></div>
</div>
<p class="bp-row-hint">{t('measure_tip_calves', lang)}</p>
</div>
</div>
{/if}
@@ -823,6 +847,24 @@
outline: none;
border-color: var(--color-primary);
}
.bp-hint {
display: block;
margin-top: 0.3rem;
font-size: 0.66rem;
font-style: italic;
line-height: 1.35;
color: var(--color-text-tertiary);
letter-spacing: 0.01em;
}
.bp-row-hint {
margin: 0.1rem 0 0.55rem;
padding: 0.2rem 0 0.2rem 0.55rem;
border-left: 2px solid var(--color-primary);
font-size: 0.7rem;
font-style: italic;
line-height: 1.4;
color: var(--color-text-tertiary);
}
/* Body parts (latest) */
.body-grid {