diff --git a/hdyc-svelte/src/app.css b/hdyc-svelte/src/app.css index 2acd1f0..adbf947 100644 --- a/hdyc-svelte/src/app.css +++ b/hdyc-svelte/src/app.css @@ -674,6 +674,7 @@ a:focus-visible { } .calc-list-item { display: block; + position: relative; padding: 1rem 1.25rem; background: var(--card-bg); border: 1px solid var(--border); @@ -695,6 +696,32 @@ a:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } +.calc-list-tooltip { + position: absolute; + bottom: calc(100% + 0.4rem); + left: 50%; + background: var(--section-bg); + color: var(--text); + border: 1px solid var(--border); + border-radius: 6px; + padding: 0.35rem 0.55rem; + font-size: 0.72rem; + font-weight: 600; + letter-spacing: 0.02em; + pointer-events: none; + opacity: 0; + visibility: hidden; + transform: translate(-50%, 0.2rem); + transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; + white-space: nowrap; + z-index: 2; +} +.calc-list-item:hover .calc-list-tooltip, +.calc-list-item:focus-visible .calc-list-tooltip { + opacity: 1; + visibility: visible; + transform: translate(-50%, 0); +} /* ─── Related Converters ─────────────────────────────────── */ diff --git a/hdyc-svelte/src/lib/components/Calculator.svelte b/hdyc-svelte/src/lib/components/Calculator.svelte index 3438bfa..b18fcf8 100644 --- a/hdyc-svelte/src/lib/components/Calculator.svelte +++ b/hdyc-svelte/src/lib/components/Calculator.svelte @@ -4,6 +4,7 @@ import { page } from '$app/stores'; import { onDestroy, onMount } from 'svelte'; import { browser } from '$app/environment'; + import { getConversionRateText } from '$lib/utils/conversionRate'; import QuickDefinitionCard from '$lib/components/QuickDefinitionCard.svelte'; import QuickConversionExample from '$lib/components/QuickConversionExample.svelte'; import QuickConversionTable from '$lib/components/QuickConversionTable.svelte'; @@ -27,9 +28,11 @@ let tooltipX = 20; let copyStatusMessage = ''; let initializedSlug: string | null = null; + let conversionRateText: string | null = null; $: has3 = ['3col', '3col-mul'].includes(config.type) || !!config.labels.in3; $: isTextInput = ['base', 'text-bin', 'bin-text', 'dec-frac', 'dms-dd', 'dd-dms'].includes(config.type); + $: conversionRateText = getConversionRateText(config); // Clear inputs only when navigating to a different calculator slug. $: if (config?.slug) { @@ -337,9 +340,9 @@ {copyStatusMessage} - {#if config.factor && config.type === 'standard'} + {#if conversionRateText} - 1 {config.labels.in1} = {config.factor}{config.offset ? ` + ${config.offset}` : ''} {config.labels.in2} + {conversionRateText} {/if} diff --git a/hdyc-svelte/src/lib/utils/conversionRate.ts b/hdyc-svelte/src/lib/utils/conversionRate.ts new file mode 100644 index 0000000..f464085 --- /dev/null +++ b/hdyc-svelte/src/lib/utils/conversionRate.ts @@ -0,0 +1,16 @@ +import type { CalculatorDef } from '$lib/data/calculators'; + +type RateConfig = Pick; + +export const getConversionRateText = (config: RateConfig): string | null => { + if (config.type !== 'standard' || !config.factor) { + return null; + } + + const { in1, in2 } = config.labels; + if (!in1 || !in2) { + return null; + } + + return `1 ${in1} = ${config.factor}${config.offset ? ` + ${config.offset}` : ''} ${in2}`; +}; diff --git a/hdyc-svelte/src/routes/category/[category]/+page.svelte b/hdyc-svelte/src/routes/category/[category]/+page.svelte index e88b8eb..02966c4 100644 --- a/hdyc-svelte/src/routes/category/[category]/+page.svelte +++ b/hdyc-svelte/src/routes/category/[category]/+page.svelte @@ -1,6 +1,7 @@