@jjlmoya/utils-nautical 1.2.0

package/src/tool/sailArea/style.css

@@ -0,0 +1,351 @@
+.sail-area-calculator {
+  --sa-primary: #003b73;
+  --sa-primary-light: #0055a4;
+  --sa-secondary: #ef4135;
+  --sa-radius: 16px;
+  --n-bg: #fff;
+  --n-bg-muted: #f1f5f9;
+  --n-text: #0f172a;
+  --n-text-muted: #475569;
+  --n-text-dim: #64748b;
+  --n-border: #e2e8f0;
+  --n-shadow: rgba(0, 0, 0, 0.05);
+  --n-primary: #3b82f6;
+  --n-primary-on: #fff;
+  --n-accent: #6366f1;
+  --n-cyan: #0891b2;
+  --n-success: #10b981;
+  --n-warning: #f59e0b;
+  --n-error: #f43f5e;
+
+  padding: 1rem;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.theme-dark .sail-area-calculator {
+  --n-bg: #0f172a;
+  --n-bg-muted: #1e293b;
+  --n-text: #f8fafc;
+  --n-text-muted: #94a3b8;
+  --n-text-dim: #64748b;
+  --n-border: #334155;
+  --n-shadow: rgba(0, 0, 0, 0.3);
+  --n-primary: #60a5fa;
+  --n-primary-on: #fff;
+  --n-accent: #818cf8;
+  --n-cyan: #22d3ee;
+  --n-success: #34d399;
+  --n-warning: #fbbf24;
+  --n-error: #fb7185;
+}
+
+.sa-calculator-wrapper {
+  background: var(--n-bg);
+  border: 1px solid var(--n-border);
+  border-radius: var(--sa-radius);
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.sa-main-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.sa-section-group h3 {
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--n-text-muted);
+  margin-bottom: 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  opacity: 0.8;
+  border-bottom: 1px solid var(--n-border);
+  padding-bottom: 0.4rem;
+}
+
+.sa-compact-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+}
+
+.sa-input-row {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.sa-input-row label {
+  font-size: 0.7rem;
+  font-weight: 700;
+  color: var(--n-text-muted);
+}
+
+.sa-elegant-input {
+  background: var(--n-bg-muted);
+  border: 1.5px solid var(--n-border);
+  border-radius: 10px;
+  padding: 0.7rem 0.9rem;
+  font-size: 0.95rem;
+  color: var(--n-text);
+  font-weight: 600;
+  width: 100%;
+}
+
+.sa-elegant-input:focus {
+  border-color: var(--sa-primary-light);
+  outline: none;
+}
+
+.sa-input-with-unit {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.sa-unit-tag {
+  position: absolute;
+  right: 10px;
+  font-size: 0.65rem;
+  font-weight: 900;
+  color: var(--n-text-muted);
+  background: var(--n-bg);
+  border: 1px solid var(--n-border);
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+.sa-unit-tag select {
+  color: var(--n-text-muted);
+}
+
+.sa-sidebar-results {
+  background: var(--n-bg-muted);
+  padding: 1.5rem;
+  border-radius: var(--sa-radius);
+  border: 1px solid var(--n-border);
+  text-align: center;
+}
+
+.sad-value-large {
+  font-size: 3.5rem;
+  font-weight: 950;
+  letter-spacing: -0.04em;
+  color: var(--sa-primary);
+  line-height: 1;
+}
+
+.theme-dark .sail-area-calculator .sad-value-large {
+  color: var(--n-accent);
+}
+
+.sad-label {
+  font-size: 0.75rem;
+  font-weight: 850;
+  color: var(--n-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.15em;
+}
+
+.sa-gauge-track {
+  height: 4px;
+  background: var(--n-border);
+  border-radius: 2px;
+  margin: 1.5rem 0;
+  position: relative;
+}
+
+.sa-gauge-indicator {
+  position: absolute;
+  top: 50%;
+  width: 14px;
+  height: 14px;
+  background: var(--sa-secondary);
+  border: 3px solid var(--n-bg-muted);
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
+  transition: left 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.sa-verdict-box {
+  background: var(--n-bg);
+  padding: 1rem;
+  border-radius: 12px;
+  border: 1px solid var(--n-border);
+}
+
+.sa-verdict-box h4 {
+  font-size: 0.95rem;
+  margin-bottom: 0.4rem;
+  color: var(--n-text);
+}
+
+.sa-verdict-box p {
+  font-size: 0.8rem;
+  line-height: 1.5;
+  color: var(--n-text-muted);
+}
+
+.sa-stats-summary {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+  margin-top: 1.5rem;
+  padding-top: 1.5rem;
+  border-top: 1px dashed var(--n-border);
+}
+
+.sa-stat-item span {
+  font-size: 0.75rem;
+  color: var(--n-text-muted);
+  display: block;
+}
+
+.sa-stat-item span:last-child {
+  font-size: 1.2rem;
+  font-weight: 900;
+  color: var(--n-text);
+}
+
+.sa-export-btn-premium {
+  width: 100%;
+  margin-top: 1.5rem;
+  padding: 1rem;
+  background: var(--sa-primary);
+  color: var(--n-primary-on);
+  border: none;
+  border-radius: 10px;
+  font-size: 0.75rem;
+  font-weight: 800;
+  letter-spacing: 0.05em;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+.sa-slider-box {
+  background: var(--n-bg-muted);
+  padding: 1.5rem;
+  border-radius: 12px;
+  border: 1px solid var(--n-border);
+}
+
+.sa-slider-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+}
+
+.sa-slider-header label {
+  font-size: 0.85rem;
+  font-weight: 800;
+  color: var(--n-text);
+}
+
+.sa-percentage-badge {
+  background: var(--sa-primary);
+  color: var(--n-primary-on);
+  padding: 4px 10px;
+  border-radius: 20px;
+  font-size: 0.8rem;
+  font-weight: 900;
+}
+
+.sa-slider-wrapper {
+  padding: 0 5px;
+}
+
+.sa-modern-slider {
+  appearance: none;
+  width: 100%;
+  height: 6px;
+  background: var(--n-border);
+  border-radius: 10px;
+  outline: none;
+  margin: 1rem 0;
+}
+
+.sa-modern-slider::-webkit-slider-thumb {
+  appearance: none;
+  width: 24px;
+  height: 24px;
+  background: var(--sa-primary);
+  border: 4px solid var(--n-bg-muted);
+  border-radius: 50%;
+  cursor: pointer;
+  box-shadow: 0 2px 10px rgba(0, 59, 115, 0.2);
+  transition: transform 0.2s;
+}
+
+.sa-modern-slider::-webkit-slider-thumb:hover {
+  transform: scale(1.1);
+}
+
+.sa-modern-slider::-moz-range-thumb {
+  width: 24px;
+  height: 24px;
+  background: var(--sa-primary);
+  border: 4px solid var(--n-bg-muted);
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.sa-modern-slider::-moz-range-track {
+  height: 6px;
+  background: var(--n-border);
+  border-radius: 10px;
+}
+
+.sa-slider-ticks {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 0.5rem;
+}
+
+.sa-slider-ticks span {
+  font-size: 0.65rem;
+  font-weight: 700;
+  color: var(--n-text-muted);
+}
+
+@media (min-width: 1024px) {
+  .sail-area-calculator {
+    padding: 2rem;
+  }
+
+  .sa-calculator-wrapper {
+    display: grid;
+    grid-template-columns: 1fr 400px;
+    gap: 3rem;
+    padding: 2.5rem;
+  }
+
+  .sa-compact-grid {
+    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  }
+
+  .sa-main-controls {
+    gap: 2.5rem;
+  }
+
+  .sa-sidebar-results {
+    position: sticky;
+    top: 2rem;
+    padding: 2.5rem;
+  }
+
+  .sad-value-large {
+    font-size: 5.5rem;
+  }
+}

package/src/tool/speedConverter/bibliography.astro

@@ -0,0 +1,14 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { speedConverter } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await speedConverter.i18n[locale]?.();
+---
+
+{content && <SharedBibliography links={content.bibliography} title={content.ui.bibliographyTitle} />}

package/src/tool/speedConverter/component.astro

@@ -0,0 +1,125 @@
+---
+import './style.css';
+import type { SpeedConverterUI } from './index';
+interface Props { ui: SpeedConverterUI; }
+const { ui } = Astro.props;
+const bd = JSON.parse(ui.beaufortDataJson) as { force: number; name: string; sea: string; effect: string; kn: string }[];
+---
+<section id="speed-converter-root" class="speed-converter" data-ui={JSON.stringify(ui)}>
+  <div class="sc-input-grid">
+    <div class="sc-input-group">
+      <label for="val-kn">{ui.knLabel}</label>
+      <div class="sc-input-wrapper"><input type="number" id="val-kn" placeholder="0.0" step="0.1" /></div>
+    </div>
+    <div class="sc-input-group">
+      <label for="val-kmh">{ui.kmhLabel}</label>
+      <div class="sc-input-wrapper"><input type="number" id="val-kmh" placeholder="0.0" step="0.1" /></div>
+    </div>
+    <div class="sc-input-group">
+      <label for="val-ms">{ui.msLabel}</label>
+      <div class="sc-input-wrapper"><input type="number" id="val-ms" placeholder="0.0" step="0.1" /></div>
+    </div>
+    <div class="sc-input-group">
+      <label for="val-mph">{ui.mphLabel}</label>
+      <div class="sc-input-wrapper"><input type="number" id="val-mph" placeholder="0.0" step="0.1" /></div>
+    </div>
+  </div>
+  <div class="sc-beaufort-summary">
+    <div class="sc-force-circle" id="f-num">0</div>
+    <div class="sc-force-text-box">
+      <h2 id="f-desc" class="sc-force-name">{bd[0]?.name ?? ''}</h2>
+      <p id="f-effect" class="sc-force-detail">{bd[0]?.effect ?? ''}</p>
+    </div>
+    <div class="sc-sea-state-box">
+      <div class="sc-sea-text">
+        <span class="label">{ui.seaStateLabel}</span>
+        <p id="f-sea">{bd[0]?.sea ?? ''}</p>
+      </div>
+    </div>
+  </div>
+  <div class="sc-table-container">
+    <h3>{ui.beaufortTitle}</h3>
+    <div class="sc-scroll-area">
+      <table class="sc-beaufort-table">
+        <thead>
+          <tr>
+            <th>{ui.forceLabel}</th><th>{ui.descriptionLabel}</th>
+            <th>{ui.knotsLabel}</th><th>{ui.effectLabel}</th>
+          </tr>
+        </thead>
+        <tbody>
+          {bd.map((b) => (
+            <tr data-force={b.force} class="sc-clickable-row">
+              <td><span class="sc-force-tag">F{b.force}</span></td>
+              <td><strong>{b.name}</strong></td>
+              <td>{b.kn}</td>
+              <td>{b.sea}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  </div>
+</section>
+<script>
+  const root = document.getElementById('speed-converter-root') as HTMLElement;
+  const ui = JSON.parse(root.dataset.ui as string);
+  const bd = JSON.parse(ui.beaufortDataJson) as { force: number; name: string; sea: string; effect: string; kn: string }[];
+  const iKn = document.getElementById('val-kn') as HTMLInputElement;
+  const iKmh = document.getElementById('val-kmh') as HTMLInputElement;
+  const iMs = document.getElementById('val-ms') as HTMLInputElement;
+  const iMph = document.getElementById('val-mph') as HTMLInputElement;
+  const fNum = document.getElementById('f-num') as HTMLElement;
+  const fDesc = document.getElementById('f-desc') as HTMLElement;
+  const fEff = document.getElementById('f-effect') as HTMLElement;
+  const fSea = document.getElementById('f-sea') as HTMLElement;
+  const rows = document.querySelectorAll<HTMLTableRowElement>('.sc-clickable-row');
+  const KMH = 1.852, MS = 0.514444, MPH = 1.15078;
+
+  function getForce(kn: number): number {
+    const lim = [1,4,7,11,17,22,28,34,41,48,56,64];
+    for (let i = 0; i < lim.length; i++) { if (kn < (lim[i] ?? 999)) return i; }
+    return 12;
+  }
+
+  function renderBeaufort(kn: number) {
+    const f = getForce(kn);
+    const d = bd[f];
+    if (!d) return;
+    fNum.textContent = String(f);
+    fDesc.textContent = d.name;
+    fEff.textContent = d.effect;
+    fSea.textContent = d.sea;
+    rows.forEach((r) => r.classList.toggle('active', parseInt(r.dataset.force ?? '-1') === f));
+  }
+
+  function sync(skip: string, kn: number) {
+    if (skip !== 'val-kn') iKn.value = kn.toFixed(1);
+    if (skip !== 'val-kmh') iKmh.value = (kn * KMH).toFixed(1);
+    if (skip !== 'val-ms') iMs.value = (kn * MS).toFixed(2);
+    if (skip !== 'val-mph') iMph.value = (kn * MPH).toFixed(2);
+    renderBeaufort(kn);
+    localStorage.setItem('jjlmoya-nautical-speed', String(kn));
+  }
+
+  iKn.addEventListener('input', (e) => sync('val-kn', parseFloat((e.target as HTMLInputElement).value)||0));
+  iKmh.addEventListener('input', (e) => sync('val-kmh', (parseFloat((e.target as HTMLInputElement).value)||0)/KMH));
+  iMs.addEventListener('input', (e) => sync('val-ms', (parseFloat((e.target as HTMLInputElement).value)||0)/MS));
+  iMph.addEventListener('input', (e) => sync('val-mph', (parseFloat((e.target as HTMLInputElement).value)||0)/MPH));
+
+  rows.forEach((row) => {
+    row.addEventListener('click', () => {
+      const f = parseInt(row.dataset.force ?? '0');
+      const d = bd[f];
+      let kn = 0;
+      if (f === 12) { kn = 65; }
+      else if (f > 0) { kn = parseFloat(d?.kn.split('-')[0] ?? '0') || 0; }
+      iKn.value = String(kn);
+      sync('val-kn', kn);
+    });
+  });
+
+  const savedKn = parseFloat(localStorage.getItem('jjlmoya-nautical-speed') ?? '0') || 0;
+  iKn.value = savedKn > 0 ? String(savedKn) : '';
+  sync('val-kn', savedKn);
+</script>