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
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 {