diff --git a/hdyc-svelte/src/lib/components/Calculator.svelte b/hdyc-svelte/src/lib/components/Calculator.svelte index 8aff362..00ee84f 100644 --- a/hdyc-svelte/src/lib/components/Calculator.svelte +++ b/hdyc-svelte/src/lib/components/Calculator.svelte @@ -3,6 +3,7 @@ import type { CalculatorDef } from '$lib/data/calculators'; import { page } from '$app/stores'; import { onMount } from 'svelte'; + import { browser } from '$app/environment'; import QuickDefinitionCard from '$lib/components/QuickDefinitionCard.svelte'; import QuickConversionExample from '$lib/components/QuickConversionExample.svelte'; import QuickConversionTable from '$lib/components/QuickConversionTable.svelte'; @@ -15,6 +16,8 @@ let val3 = ''; let activeField: 1 | 2 | 3 = 1; let swapState: { originalField: 1 | 2; originalValue: string } | null = null; + let copyStatus: 'idle' | 'copied' | 'failed' = 'idle'; + let statusTimeout: ReturnType | 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); @@ -64,6 +67,43 @@ swapState = null; } + function buildShareUrl() { + const params = new URLSearchParams(); + if (val1.trim()) { + params.set('v1', val1); + } + if (val2.trim()) { + params.set('v2', val2); + } + if (val3.trim() && has3) { + params.set('v3', val3); + } + + const shareUrl = new URL($page.url); + shareUrl.search = params.toString(); + return shareUrl.toString(); + } + + async function copyLink() { + if (!browser) return; + const url = buildShareUrl(); + + try { + await navigator.clipboard.writeText(url); + copyStatus = 'copied'; + } catch (error) { + console.error('Failed to copy link', error); + copyStatus = 'failed'; + } finally { + if (statusTimeout) { + clearTimeout(statusTimeout); + } + statusTimeout = setTimeout(() => { + copyStatus = 'idle'; + }, 2000); + } + } + onMount(() => { const params = new URLSearchParams($page.url.search); if (params.has('v1')) { val1 = params.get('v1')!; handleInput(1); } @@ -145,6 +185,30 @@ + {#if config.factor && config.type === 'standard'} 1 {config.labels.in1} = {config.factor}{config.offset ? ` + ${config.offset}` : ''} {config.labels.in2} @@ -303,6 +367,40 @@ outline: none; box-shadow: 0 0 0 3px var(--accent-glow); } + .link-btn { + display: inline-flex; + align-items: center; + gap: 0.35rem; + padding: 0.5rem 1rem; + border: 1px solid var(--border); + border-radius: 8px; + background: var(--section-bg); + color: var(--text); + font-size: 0.85rem; + cursor: pointer; + transition: background 0.2s, border-color 0.2s; + } + .link-btn svg { + width: 1rem; + height: 1rem; + } + .link-btn:disabled { + opacity: 0.5; + cursor: not-allowed; + } + .link-btn:not(:disabled):hover { + border-color: var(--accent); + background: var(--surface-hover); + } + .status-badge { + font-size: 0.7rem; + background: var(--accent); + color: #fff; + border-radius: 999px; + padding: 0.05rem 0.55rem; + text-transform: uppercase; + letter-spacing: 0.08em; + } .formula-hint { font-size: 0.78rem; color: var(--text-muted); diff --git a/hdyc-svelte/src/lib/components/QuickConversionTable.svelte b/hdyc-svelte/src/lib/components/QuickConversionTable.svelte index c639359..eac68d7 100644 --- a/hdyc-svelte/src/lib/components/QuickConversionTable.svelte +++ b/hdyc-svelte/src/lib/components/QuickConversionTable.svelte @@ -1,20 +1,18 @@