@jjlmoya/utils-drones 1.30.0 → 1.32.0

package/src/tool/antenna-length-calculator/component.astro

@@ -1,329 +1,329 @@
----
-const { ui } = Astro.props;
-import { Icon } from "astro-icon/components";
-
-const presets = [
-    { label: ui.presetFpv, val: 5800 },
-    { label: ui.presetWifi, val: 2400 },
-    { label: ui.presetElrs, val: 915 },
-    { label: ui.presetLrs, val: 868 },
-    { label: ui.presetUhf, val: 433 },
-    { label: ui.presetMbus, val: 169 },
-];
-
-const materials = [
-    { label: ui.materialBareCopper, vf: 0.95 },
-    { label: ui.materialPvcInsulated, vf: 0.92 },
-    { label: ui.materialSolidRod, vf: 0.97 },
-    { label: ui.materialCoaxial, vf: 0.66 },
-];
----
-
-<div class="antenna-calculator-ui">
-    <div class="tech-mega-card animate-in fade-in zoom-in duration-1000">
-        <div class="card-grid">
-            <aside class="config-sidebar">
-                <section>
-                    <div class="section-title">
-                        <Icon name="mdi:sine-wave" />
-                        <h2>{ui.signalParameters}</h2>
-                    </div>
-
-                    <div class="input-group">
-                        <div class="input-with-unit">
-                            <input type="number" id="freqInput" value="868" step="1" min="1" max="10000" aria-label={ui.signalParameters} />
-                            <span class="unit">MHz</span>
-                        </div>
-                    </div>
-
-                    <div class="preset-grid mt-6">
-                        {presets.map(p => (
-                            <button class="preset-btn" data-val={p.val}>
-                                {p.label}
-                            </button>
-                        ))}
-                    </div>
-                </section>
-
-                <div class="divider"></div>
-
-                <section>
-                    <div class="section-title">
-                        <Icon name="mdi:antenna" />
-                        <h2>{ui.antennaType}</h2>
-                    </div>
-                    <div class="type-selector">
-                        <div class="radio-card">
-                            <input type="radio" name="waveType" value="half" checked id="waveHalf" />
-                            <label for="waveHalf" class="radio-content">
-                                <Icon name="mdi:arrow-left-right" />
-                                <span>{ui.dipole}</span>
-                            </label>
-                        </div>
-                        <div class="radio-card">
-                            <input type="radio" name="waveType" value="quarter" id="waveQuarter" />
-                            <label for="waveQuarter" class="radio-content">
-                                <Icon name="mdi:arrow-up" />
-                                <span>{ui.whip}</span>
-                            </label>
-                        </div>
-                    </div>
-                </section>
-
-                <section>
-                    <div class="section-title">
-                        <Icon name="mdi:layers-triple" />
-                        <h2>{ui.conductorMedium}</h2>
-                    </div>
-                    <div class="input-group">
-                        <select id="vfInput" class="custom-select-premium" aria-label={ui.conductorMedium}>
-                            {materials.map(m => (
-                                <option value={m.vf}>{m.label}</option>
-                            ))}
-                        </select>
-                    </div>
-                </section>
-            </aside>
-
-            <main class="main-display">
-                <div class="results-hero">
-                    <div class="mega-result gold">
-                        <span class="result-label">{ui.totalLength}</span>
-                        <div class="result-value">
-                            <span class="number" id="totalLength">0</span>
-                            <span class="unit">mm</span>
-                        </div>
-                    </div>
-                    <div class="mega-result glass" id="branchCard">
-                        <span class="result-label">{ui.branchLength}</span>
-                        <div class="result-value">
-                            <span class="number" id="branchLength">0</span>
-                            <span class="unit">mm</span>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="visualizer-stage">
-                    <svg id="antenna-svg" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid meet">
-                        <defs>
-                            <linearGradient id="wireGrad" x1="0%" y1="0%" x2="100%" y2="0%">
-                                <stop offset="0%" style="stop-color:#f59e0b;stop-opacity:1" />
-                                <stop offset="100%" style="stop-color:#fbbf24;stop-opacity:1" />
-                            </linearGradient>
-                        </defs>
-
-                        <g id="dipoleLayer">
-                            <line x1="205" y1="150" x2="350" y2="150" class="antenna-wire active" id="rightArm" />
-                            <line x1="195" y1="150" x2="50" y2="150" class="antenna-wire active" id="leftArm" />
-                            <circle cx="200" cy="150" r="4" class="feed-core" />
-                            <path d="M195,150 Q200,160 205,150" fill="none" stroke="#ef4444" stroke-width="2" class="feed-point-gap" />
-
-                            <line x1="50" y1="170" x2="50" y2="180" class="measuring-line" id="leftTick" />
-                            <line x1="350" y1="170" x2="350" y2="180" class="measuring-line" id="rightTick" />
-                            <line x1="50" y1="175" x2="350" y2="175" class="measuring-line" id="measureLine" />
-                        </g>
-
-                        <g id="whipLayer" style="display: none;">
-                            <line x1="200" y1="250" x2="200" y2="50" class="antenna-wire active" id="verticalWhip" />
-                            <rect x="100" y="250" width="200" height="6" rx="3" class="ground-plate" />
-                            <circle cx="200" cy="250" r="6" class="feed-core" />
-
-                            <line x1="220" y1="50" x2="230" y2="50" class="measuring-line" id="topTick" />
-                            <line x1="220" y1="250" x2="230" y2="250" class="measuring-line" id="bottomTick" />
-                            <line x1="225" y1="50" x2="225" y2="250" class="measuring-line" id="verticalMeasure" />
-                        </g>
-
-                        <text x="200" y="280" class="svg-label-text" id="svgInfoText" text-anchor="middle">{ui.dynamicScheme}</text>
-                    </svg>
-                </div>
-
-                <div class="harmonics-container">
-                    <div class="section-title">
-                        <Icon name="mdi:chart-timeline-variant" />
-                        <h2>{ui.secondaryResonance}</h2>
-                    </div>
-                    <div class="harmonics-list" id="harmonicsList" data-label={ui.harmonicLabel}>
-                    </div>
-                </div>
-
-                <div class="expert-reference-grid">
-                    <div class="ref-card">
-                        <Icon name="mdi:swap-vertical" />
-                        <div>
-                            <h4>{ui.swrIdeal}</h4>
-                            <p>&lt; 1.5:1 (ROE)</p>
-                        </div>
-                    </div>
-                    <div class="ref-card">
-                        <Icon name="mdi:omega" />
-                        <div>
-                            <h4>{ui.impedance}</h4>
-                            <p>50 Ω System</p>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="security-warning">
-                    <Icon name="mdi:alert-decagram" />
-                    <p><strong>{ui.criticalNotice}:</strong> {ui.criticalNoticeText}</p>
-                </div>
-            </main>
-        </div>
-    </div>
-</div>
-
-<script>
-    const freqInput = document.getElementById('freqInput');
-    const vfInput = document.getElementById('vfInput');
-    const waveRadios = document.getElementsByName('waveType');
-
-    const elements = {
-        total: document.getElementById('totalLength'),
-        branch: document.getElementById('branchLength'),
-        branchCard: document.getElementById('branchCard'),
-        dipoleLayer: document.getElementById('dipoleLayer'),
-        whipLayer: document.getElementById('whipLayer'),
-        harmonics: document.getElementById('harmonicsList'),
-        leftArm: document.getElementById('leftArm') || null,
-        rightArm: document.getElementById('rightArm') || null,
-        verticalWhip: document.getElementById('verticalWhip') || null,
-        measureLine: document.getElementById('measureLine') || null,
-        leftTick: document.getElementById('leftTick') || null,
-        rightTick: document.getElementById('rightTick') || null,
-        topTick: document.getElementById('topTick') || null,
-        bottomTick: document.getElementById('bottomTick') || null,
-        verticalMeasure: document.getElementById('verticalMeasure') || null
-    };
-
-    function getWaveType() {
-        let waveType = 'half';
-        waveRadios.forEach(r => { if(r.checked) waveType = r.value; });
-        return waveType;
-    }
-
-    function updateLayerVisibility(waveType) {
-        if (waveType === 'half') {
-            if (elements.branchCard) elements.branchCard.style.display = 'flex';
-            if (elements.dipoleLayer) elements.dipoleLayer.style.display = 'block';
-            if (elements.whipLayer) elements.whipLayer.style.display = 'none';
-        } else {
-            if (elements.branchCard) elements.branchCard.style.display = 'none';
-            if (elements.dipoleLayer) elements.dipoleLayer.style.display = 'none';
-            if (elements.whipLayer) elements.whipLayer.style.display = 'block';
-        }
-    }
-
-    function validateInputs() {
-        if (!freqInput || !(freqInput as HTMLInputElement).value || !vfInput) return null;
-        const freq = parseFloat((freqInput as HTMLInputElement).value);
-        const vf = parseFloat((vfInput as HTMLSelectElement).value);
-        return freq > 0 ? { freq, vf } : null;
-    }
-
-    function calculateLengths(freq, vf, waveType) {
-        const lambda = 300000 / freq;
-        const totalPhysicalLambda = lambda * vf;
-        const totalLen = waveType === 'half' ? totalPhysicalLambda / 2 : totalPhysicalLambda / 4;
-        const branchLen = waveType === 'half' ? totalLen / 2 : totalLen;
-        return { totalLen, branchLen };
-    }
-
-    function displayLengths(totalLen, branchLen) {
-        if (elements.total) elements.total.textContent = Math.round(totalLen).toString();
-        if (elements.branch) elements.branch.textContent = Math.round(branchLen).toString();
-    }
-
-    function calculate() {
-        const inputs = validateInputs();
-        if (!inputs) return;
-        const waveType = getWaveType();
-        const { totalLen, branchLen } = calculateLengths(inputs.freq, inputs.vf, waveType);
-        updateLayerVisibility(waveType);
-        updateVisuals(waveType, waveType === 'half' ? branchLen : totalLen);
-        displayLengths(totalLen, branchLen);
-        updateHarmonics(inputs.freq);
-    }
-
-    function setArmAttributes(x, isLeft) {
-        const arm = isLeft ? elements.leftArm : elements.rightArm;
-        const startX = isLeft ? '195' : '205';
-        arm?.setAttribute('x1', startX);
-        arm?.setAttribute('x2', x.toString());
-        const tick = isLeft ? elements.leftTick : elements.rightTick;
-        tick?.setAttribute('x1', x.toString());
-        tick?.setAttribute('x2', x.toString());
-    }
-
-    function updateDipoleVisuals(visualLen) {
-        const x1 = 200 - visualLen;
-        const x2 = 200 + visualLen;
-        setArmAttributes(x1, true);
-        setArmAttributes(x2, false);
-        elements.measureLine?.setAttribute('x1', x1.toString());
-        elements.measureLine?.setAttribute('x2', x2.toString());
-    }
-
-    function updateWhipVisuals(visualLen) {
-        const y2 = 250 - visualLen;
-        elements.verticalWhip?.setAttribute('y2', y2.toString());
-        elements.verticalMeasure?.setAttribute('y1', y2.toString());
-        elements.topTick?.setAttribute('y1', y2.toString());
-        elements.topTick?.setAttribute('y2', y2.toString());
-    }
-
-    function updateVisuals(type, len) {
-        const visualLen = Math.min(Math.max(len / 4, 30), 160);
-        if (type === 'half') {
-            updateDipoleVisuals(visualLen);
-        } else {
-            updateWhipVisuals(visualLen);
-        }
-    }
-
-    function updateHarmonics(baseFreq) {
-        if (!elements.harmonics) return;
-        
-        const harmonicLabel = elements.harmonics.dataset.label || "Armónica";
-
-        const orders = [
-            { label: `3ª ${harmonicLabel}`, val: baseFreq * 3 },
-            { label: `5ª ${harmonicLabel}`, val: baseFreq * 5 },
-            { label: `7ª ${harmonicLabel}`, val: baseFreq * 7 }
-        ];
-
-        elements.harmonics.innerHTML = orders.map(o => `
-            <div class="harmonic-card animate-in fade-in slide-in-from-bottom-2">
-                <span class="h-order">${o.label}</span>
-                <span class="h-freq">${Math.round(o.val)} MHz</span>
-            </div>
-        `).join('');
-    }
-
-    freqInput.addEventListener('input', calculate);
-
-    vfInput.addEventListener('change', calculate);
-    waveRadios.forEach(r => {
-        r.addEventListener('change', () => {
-            calculate();
-            document.querySelectorAll('.radio-card').forEach(card => card.classList.remove('active'));
-            const checkedRadio = document.querySelector('.radio-card input:checked');
-            if (checkedRadio?.parentElement?.classList) {
-                checkedRadio.parentElement.classList.add('active');
-            }
-        });
-    });
-
-    document.querySelectorAll('.preset-btn').forEach(btn => {
-        btn.addEventListener('click', () => {
-            const val = btn.getAttribute('data-val');
-            if (val) {
-                freqInput.value = val;
-                calculate();
-            }
-        });
-    });
-
-    calculate();
-</script>
-
-
+---
+const { ui } = Astro.props;
+import { Icon } from "astro-icon/components";
+
+const presets = [
+    { label: ui.presetFpv, val: 5800 },
+    { label: ui.presetWifi, val: 2400 },
+    { label: ui.presetElrs, val: 915 },
+    { label: ui.presetLrs, val: 868 },
+    { label: ui.presetUhf, val: 433 },
+    { label: ui.presetMbus, val: 169 },
+];
+
+const materials = [
+    { label: ui.materialBareCopper, vf: 0.95 },
+    { label: ui.materialPvcInsulated, vf: 0.92 },
+    { label: ui.materialSolidRod, vf: 0.97 },
+    { label: ui.materialCoaxial, vf: 0.66 },
+];
+---
+
+<div class="antenna-calculator-ui">
+    <div class="tech-mega-card animate-in fade-in zoom-in duration-1000">
+        <div class="card-grid">
+            <aside class="config-sidebar">
+                <section>
+                    <div class="section-title">
+                        <Icon name="mdi:sine-wave" />
+                        <h2>{ui.signalParameters}</h2>
+                    </div>
+
+                    <div class="input-group">
+                        <div class="input-with-unit">
+                            <input type="number" id="freqInput" value="868" step="1" min="1" max="10000" aria-label={ui.signalParameters} />
+                            <span class="unit">MHz</span>
+                        </div>
+                    </div>
+
+                    <div class="preset-grid mt-6">
+                        {presets.map(p => (
+                            <button class="preset-btn" data-val={p.val}>
+                                {p.label}
+                            </button>
+                        ))}
+                    </div>
+                </section>
+
+                <div class="divider"></div>
+
+                <section>
+                    <div class="section-title">
+                        <Icon name="mdi:antenna" />
+                        <h2>{ui.antennaType}</h2>
+                    </div>
+                    <div class="type-selector">
+                        <div class="radio-card">
+                            <input type="radio" name="waveType" value="half" checked id="waveHalf" />
+                            <label for="waveHalf" class="radio-content">
+                                <Icon name="mdi:arrow-left-right" />
+                                <span>{ui.dipole}</span>
+                            </label>
+                        </div>
+                        <div class="radio-card">
+                            <input type="radio" name="waveType" value="quarter" id="waveQuarter" />
+                            <label for="waveQuarter" class="radio-content">
+                                <Icon name="mdi:arrow-up" />
+                                <span>{ui.whip}</span>
+                            </label>
+                        </div>
+                    </div>
+                </section>
+
+                <section>
+                    <div class="section-title">
+                        <Icon name="mdi:layers-triple" />
+                        <h2>{ui.conductorMedium}</h2>
+                    </div>
+                    <div class="input-group">
+                        <select id="vfInput" class="custom-select-premium" aria-label={ui.conductorMedium}>
+                            {materials.map(m => (
+                                <option value={m.vf}>{m.label}</option>
+                            ))}
+                        </select>
+                    </div>
+                </section>
+            </aside>
+
+            <main class="main-display">
+                <div class="results-hero">
+                    <div class="mega-result gold">
+                        <span class="result-label">{ui.totalLength}</span>
+                        <div class="result-value">
+                            <span class="number" id="totalLength">0</span>
+                            <span class="unit">mm</span>
+                        </div>
+                    </div>
+                    <div class="mega-result glass" id="branchCard">
+                        <span class="result-label">{ui.branchLength}</span>
+                        <div class="result-value">
+                            <span class="number" id="branchLength">0</span>
+                            <span class="unit">mm</span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="visualizer-stage">
+                    <svg id="antenna-svg" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid meet">
+                        <defs>
+                            <linearGradient id="wireGrad" x1="0%" y1="0%" x2="100%" y2="0%">
+                                <stop offset="0%" style="stop-color:#f59e0b;stop-opacity:1" />
+                                <stop offset="100%" style="stop-color:#fbbf24;stop-opacity:1" />
+                            </linearGradient>
+                        </defs>
+
+                        <g id="dipoleLayer">
+                            <line x1="205" y1="150" x2="350" y2="150" class="antenna-wire active" id="rightArm" />
+                            <line x1="195" y1="150" x2="50" y2="150" class="antenna-wire active" id="leftArm" />
+                            <circle cx="200" cy="150" r="4" class="feed-core" />
+                            <path d="M195,150 Q200,160 205,150" fill="none" stroke="#ef4444" stroke-width="2" class="feed-point-gap" />
+
+                            <line x1="50" y1="170" x2="50" y2="180" class="measuring-line" id="leftTick" />
+                            <line x1="350" y1="170" x2="350" y2="180" class="measuring-line" id="rightTick" />
+                            <line x1="50" y1="175" x2="350" y2="175" class="measuring-line" id="measureLine" />
+                        </g>
+
+                        <g id="whipLayer" style="display: none;">
+                            <line x1="200" y1="250" x2="200" y2="50" class="antenna-wire active" id="verticalWhip" />
+                            <rect x="100" y="250" width="200" height="6" rx="3" class="ground-plate" />
+                            <circle cx="200" cy="250" r="6" class="feed-core" />
+
+                            <line x1="220" y1="50" x2="230" y2="50" class="measuring-line" id="topTick" />
+                            <line x1="220" y1="250" x2="230" y2="250" class="measuring-line" id="bottomTick" />
+                            <line x1="225" y1="50" x2="225" y2="250" class="measuring-line" id="verticalMeasure" />
+                        </g>
+
+                        <text x="200" y="280" class="svg-label-text" id="svgInfoText" text-anchor="middle">{ui.dynamicScheme}</text>
+                    </svg>
+                </div>
+
+                <div class="harmonics-container">
+                    <div class="section-title">
+                        <Icon name="mdi:chart-timeline-variant" />
+                        <h2>{ui.secondaryResonance}</h2>
+                    </div>
+                    <div class="harmonics-list" id="harmonicsList" data-label={ui.harmonicLabel}>
+                    </div>
+                </div>
+
+                <div class="expert-reference-grid">
+                    <div class="ref-card">
+                        <Icon name="mdi:swap-vertical" />
+                        <div>
+                            <h4>{ui.swrIdeal}</h4>
+                            <p>&lt; 1.5:1 (ROE)</p>
+                        </div>
+                    </div>
+                    <div class="ref-card">
+                        <Icon name="mdi:omega" />
+                        <div>
+                            <h4>{ui.impedance}</h4>
+                            <p>50 Ω System</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="security-warning">
+                    <Icon name="mdi:alert-decagram" />
+                    <p><strong>{ui.criticalNotice}:</strong> {ui.criticalNoticeText}</p>
+                </div>
+            </main>
+        </div>
+    </div>
+</div>
+
+<script>
+    const freqInput = document.getElementById('freqInput');
+    const vfInput = document.getElementById('vfInput');
+    const waveRadios = document.getElementsByName('waveType');
+
+    const elements = {
+        total: document.getElementById('totalLength'),
+        branch: document.getElementById('branchLength'),
+        branchCard: document.getElementById('branchCard'),
+        dipoleLayer: document.getElementById('dipoleLayer'),
+        whipLayer: document.getElementById('whipLayer'),
+        harmonics: document.getElementById('harmonicsList'),
+        leftArm: document.getElementById('leftArm') || null,
+        rightArm: document.getElementById('rightArm') || null,
+        verticalWhip: document.getElementById('verticalWhip') || null,
+        measureLine: document.getElementById('measureLine') || null,
+        leftTick: document.getElementById('leftTick') || null,
+        rightTick: document.getElementById('rightTick') || null,
+        topTick: document.getElementById('topTick') || null,
+        bottomTick: document.getElementById('bottomTick') || null,
+        verticalMeasure: document.getElementById('verticalMeasure') || null
+    };
+
+    function getWaveType() {
+        let waveType = 'half';
+        waveRadios.forEach(r => { if(r.checked) waveType = r.value; });
+        return waveType;
+    }
+
+    function updateLayerVisibility(waveType) {
+        if (waveType === 'half') {
+            if (elements.branchCard) elements.branchCard.style.display = 'flex';
+            if (elements.dipoleLayer) elements.dipoleLayer.style.display = 'block';
+            if (elements.whipLayer) elements.whipLayer.style.display = 'none';
+        } else {
+            if (elements.branchCard) elements.branchCard.style.display = 'none';
+            if (elements.dipoleLayer) elements.dipoleLayer.style.display = 'none';
+            if (elements.whipLayer) elements.whipLayer.style.display = 'block';
+        }
+    }
+
+    function validateInputs() {
+        if (!freqInput || !(freqInput as HTMLInputElement).value || !vfInput) return null;
+        const freq = parseFloat((freqInput as HTMLInputElement).value);
+        const vf = parseFloat((vfInput as HTMLSelectElement).value);
+        return freq > 0 ? { freq, vf } : null;
+    }
+
+    function calculateLengths(freq, vf, waveType) {
+        const lambda = 300000 / freq;
+        const totalPhysicalLambda = lambda * vf;
+        const totalLen = waveType === 'half' ? totalPhysicalLambda / 2 : totalPhysicalLambda / 4;
+        const branchLen = waveType === 'half' ? totalLen / 2 : totalLen;
+        return { totalLen, branchLen };
+    }
+
+    function displayLengths(totalLen, branchLen) {
+        if (elements.total) elements.total.textContent = Math.round(totalLen).toString();
+        if (elements.branch) elements.branch.textContent = Math.round(branchLen).toString();
+    }
+
+    function calculate() {
+        const inputs = validateInputs();
+        if (!inputs) return;
+        const waveType = getWaveType();
+        const { totalLen, branchLen } = calculateLengths(inputs.freq, inputs.vf, waveType);
+        updateLayerVisibility(waveType);
+        updateVisuals(waveType, waveType === 'half' ? branchLen : totalLen);
+        displayLengths(totalLen, branchLen);
+        updateHarmonics(inputs.freq);
+    }
+
+    function setArmAttributes(x, isLeft) {
+        const arm = isLeft ? elements.leftArm : elements.rightArm;
+        const startX = isLeft ? '195' : '205';
+        arm?.setAttribute('x1', startX);
+        arm?.setAttribute('x2', x.toString());
+        const tick = isLeft ? elements.leftTick : elements.rightTick;
+        tick?.setAttribute('x1', x.toString());
+        tick?.setAttribute('x2', x.toString());
+    }
+
+    function updateDipoleVisuals(visualLen) {
+        const x1 = 200 - visualLen;
+        const x2 = 200 + visualLen;
+        setArmAttributes(x1, true);
+        setArmAttributes(x2, false);
+        elements.measureLine?.setAttribute('x1', x1.toString());
+        elements.measureLine?.setAttribute('x2', x2.toString());
+    }
+
+    function updateWhipVisuals(visualLen) {
+        const y2 = 250 - visualLen;
+        elements.verticalWhip?.setAttribute('y2', y2.toString());
+        elements.verticalMeasure?.setAttribute('y1', y2.toString());
+        elements.topTick?.setAttribute('y1', y2.toString());
+        elements.topTick?.setAttribute('y2', y2.toString());
+    }
+
+    function updateVisuals(type, len) {
+        const visualLen = Math.min(Math.max(len / 4, 30), 160);
+        if (type === 'half') {
+            updateDipoleVisuals(visualLen);
+        } else {
+            updateWhipVisuals(visualLen);
+        }
+    }
+
+    function updateHarmonics(baseFreq) {
+        if (!elements.harmonics) return;
+        
+        const harmonicLabel = elements.harmonics.dataset.label || "Armónica";
+
+        const orders = [
+            { label: `3ª ${harmonicLabel}`, val: baseFreq * 3 },
+            { label: `5ª ${harmonicLabel}`, val: baseFreq * 5 },
+            { label: `7ª ${harmonicLabel}`, val: baseFreq * 7 }
+        ];
+
+        elements.harmonics.innerHTML = orders.map(o => `
+            <div class="harmonic-card animate-in fade-in slide-in-from-bottom-2">
+                <span class="h-order">${o.label}</span>
+                <span class="h-freq">${Math.round(o.val)} MHz</span>
+            </div>
+        `).join('');
+    }
+
+    freqInput.addEventListener('input', calculate);
+
+    vfInput.addEventListener('change', calculate);
+    waveRadios.forEach(r => {
+        r.addEventListener('change', () => {
+            calculate();
+            document.querySelectorAll('.radio-card').forEach(card => card.classList.remove('active'));
+            const checkedRadio = document.querySelector('.radio-card input:checked');
+            if (checkedRadio?.parentElement?.classList) {
+                checkedRadio.parentElement.classList.add('active');
+            }
+        });
+    });
+
+    document.querySelectorAll('.preset-btn').forEach(btn => {
+        btn.addEventListener('click', () => {
+            const val = btn.getAttribute('data-val');
+            if (val) {
+                freqInput.value = val;
+                calculate();
+            }
+        });
+    });
+
+    calculate();
+</script>
+
+