@jjlmoya/utils-nautical 1.5.0 → 1.7.0

package/src/tool/tideCalculator/component.astro

@@ -1,5 +1,4 @@
 ---
-import './style.css';
 import type { TideCalculatorUI } from './index';
 
 interface Props {
@@ -312,3 +311,316 @@ const { ui } = Astro.props;
 
     new TideCalculator();
 </script>
+
+<style>
+  .tide-calculator {
+    --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;
+
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    max-width: 1000px;
+    margin: 0 auto;
+  }
+
+  :global(.theme-dark) .tide-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;
+  }
+
+  .tc-main-card {
+    background: var(--n-bg);
+    border: 1px solid var(--n-border);
+    border-radius: 2rem;
+    display: grid;
+    grid-template-columns: 320px 1fr;
+    overflow: hidden;
+    box-shadow: 0 20px 40px var(--n-shadow);
+  }
+
+  @media (max-width: 850px) {
+    .tc-main-card {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .tc-calc-sidebar {
+    background: var(--n-primary);
+    color: var(--n-primary-on);
+    padding: 2rem;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+  }
+
+  .tc-sidebar-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .tc-sidebar-header h3 {
+    font-size: 1.1rem;
+    margin: 0;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    opacity: 0.9;
+  }
+
+  :global(#invert-btn) {
+    background: rgba(255, 255, 255, 0.1);
+    border: none;
+    color: var(--n-primary-on);
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.2s;
+  }
+
+  :global(#invert-btn:hover) {
+    background: rgba(255, 255, 255, 0.2);
+  }
+
+  .tc-input-set {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  .tc-input-block {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .tc-input-block label {
+    font-size: 0.85rem;
+    font-weight: 700;
+    color: var(--n-primary-on);
+    opacity: 0.85;
+  }
+
+  .tc-input-block .row {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  .tide-calculator input[type='time'],
+  .tide-calculator input[type='number'] {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 0.8rem;
+    padding: 0.8rem;
+    color: var(--n-primary-on);
+    font-size: 1rem;
+    outline: none;
+  }
+
+  .tc-unit-input {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+
+  .tc-unit-input input {
+    width: 80px;
+    padding-right: 25px;
+  }
+
+  .tc-unit-input span {
+    position: absolute;
+    right: 10px;
+    font-size: 0.8rem;
+    opacity: 0.5;
+  }
+
+  .tc-featured label {
+    color: var(--n-primary-on);
+    opacity: 1;
+    font-size: 0.95rem;
+  }
+
+  .tide-calculator input[type='time'].large-time {
+    background: var(--n-primary-on);
+    color: var(--n-primary);
+    font-size: 1.8rem;
+    font-weight: 800;
+    text-align: center;
+  }
+
+  .tc-calc-content {
+    padding: 2.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    background: var(--n-bg-muted);
+  }
+
+  .tc-top-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+  }
+
+  .tc-result-display {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .tc-result-display .label {
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--n-text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .tc-value-box {
+    display: flex;
+    align-items: baseline;
+    gap: 0.5rem;
+    margin: 0.5rem 0;
+  }
+
+  :global(#target-value) {
+    font-size: 4rem;
+    font-weight: 800;
+    color: var(--n-accent);
+    line-height: 1;
+  }
+
+  .tc-value-box small {
+    font-size: 1.2rem;
+    font-weight: 600;
+    color: var(--n-text-dim);
+  }
+
+  .tc-status-indicator {
+    padding: 0.4rem 1rem;
+    border-radius: 2rem;
+    font-size: 0.85rem;
+    font-weight: 700;
+    display: inline-block;
+    width: fit-content;
+    background: var(--n-bg-muted);
+    color: var(--n-text-dim);
+  }
+
+  .tc-status-indicator.up {
+    background: color-mix(in srgb, var(--n-success), transparent 80%);
+    color: var(--n-success);
+  }
+
+  .tc-status-indicator.down {
+    background: color-mix(in srgb, var(--n-error), transparent 80%);
+    color: var(--n-error);
+  }
+
+  .tc-summary-info {
+    display: flex;
+    gap: 1.5rem;
+  }
+
+  .tc-stat {
+    display: flex;
+    flex-direction: column;
+    text-align: right;
+  }
+
+  .tc-s-label {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--n-text-muted);
+    text-transform: uppercase;
+  }
+
+  .tc-stat span:last-child {
+    font-size: 1.1rem;
+    font-weight: 700;
+    color: var(--n-text);
+  }
+
+  .tc-chart-area {
+    background: var(--n-bg);
+    border: 1px solid var(--n-border);
+    border-radius: 1.5rem;
+    padding: 1.5rem;
+    height: 250px;
+    position: relative;
+  }
+
+  .tc-table-card {
+    background: var(--n-bg);
+    border: 1px solid var(--n-border);
+    border-radius: 1.5rem;
+    padding: 1.5rem;
+  }
+
+  .tc-table-card h4 {
+    margin: 0 0 1rem;
+    font-size: 1rem;
+    color: var(--n-text-muted);
+  }
+
+  .tc-table-wrapper {
+    overflow-x: auto;
+  }
+
+  .tide-calculator table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  .tide-calculator th {
+    text-align: left;
+    padding: 1rem;
+    font-size: 0.8rem;
+    color: var(--n-text-muted);
+    text-transform: uppercase;
+    border-bottom: 2px solid var(--n-bg-muted);
+  }
+
+  .tide-calculator td {
+    padding: 1rem;
+    font-size: 0.95rem;
+    color: var(--n-text-muted);
+    border-bottom: 1px solid var(--n-bg-muted);
+  }
+
+  @media (max-width: 640px) {
+    .tc-top-row {
+      flex-direction: column;
+      gap: 1.5rem;
+    }
+  }
+</style>

package/src/tool/tideCalculator/i18n/de.ts

@@ -0,0 +1,203 @@
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { TideCalculatorUI, TideCalculatorLocaleContent } from '../index';
+
+const slug = 'gezeiten-rechner-de';
+const title = 'Gezeitenhöhenrechner';
+const description =
+  'Schätzen Sie die Wassertiefe zu jedem Zeitpunkt des Gezeitenzyklus mithilfe der nautischen Zwölftel-Regel. Ideal für die Küstenplanung und das Studium für den Sportbootführerschein.';
+
+const ui: TideCalculatorUI = {
+  parametersLabel: 'Parameter',
+  highTideLabel: 'Hochwasser',
+  lowTideLabel: 'Niedrigwasser',
+  targetTimeLabel: 'Abfragezeitpunkt',
+  estimatedHeightLabel: 'Geschätzte Höhe',
+  metersLabel: 'Meter',
+  amplitudeLabel: 'Tidenhub',
+  durationLabel: 'Dauer',
+  tableBreakdownLabel: 'Zwölftel-Aufschlüsselung',
+  tableHourLabel: 'Zeit',
+  tableStateLabel: 'Zustand',
+  tableStartLabel: 'Beginn',
+  tableEndLabel: 'Ende',
+  statusUpLabel: 'Auflaufend',
+  statusDownLabel: 'Ablaufend',
+  statusOutOfRange: 'Außerhalb des Bereichs',
+  faqTitle: 'Häufig gestellte Fragen',
+  bibliographyTitle: 'Bibliografie',
+};
+
+const faq: TideCalculatorLocaleContent['faq'] = [
+  {
+    question: 'Was ist die Zwölftel-Regel und wofür wird sie verwendet?',
+    answer:
+      'Die Zwölftel-Regel ist eine vereinfachte mathematische Methode in der Navigation, um die Gezeitenhöhe zu jedem Zeitpunkt zwischen Hoch- und Niedrigwasser zu schätzen. Sie basiert auf der Beobachtung, dass der Gezeitenfluss einer annähernden Sinuskurve folgt, wobei der gesamte Tidenhub über 6 Stunden in 12 Teile unterteilt wird (1/12, 2/12, 3/12, 3/12, 2/12, 1/12).',
+  },
+  {
+    question: 'Ist diese Methode für die reale Navigation zuverlässig?',
+    answer:
+      'Es ist eine sehr nützliche theoretische Schätzmethode für die schnelle Planung und zu Ausbildungszwecken. Sie berücksichtigt jedoch keine meteorologischen Faktoren wie Luftdruck oder Wind, die den Meeresspiegel um mehrere Dezimeter verändern können. Konsultieren Sie für die reale Navigation immer offizielle Gezeitentafeln.',
+  },
+  {
+    question: 'Welche Daten benötige ich, um die Gezeitenhöhe zu berechnen?',
+    answer:
+      'Sie benötigen die Uhrzeit und die Höhe (in Metern) des Hochwassers und des Niedrigwassers, die dem Zeitpunkt Ihrer Abfrage am nächsten liegen. Diese Daten finden Sie in Gezeitenkalendern oder Marine-Wetter-Apps.',
+  },
+  {
+    question: 'Warum steigt die Gezeit nicht immer mit der gleichen Geschwindigkeit?',
+    answer:
+      'Aufgrund der Trägheit großer Wassermassen und der Konfiguration der Ozeanbecken. Die Gezeit beginnt nach dem Niedrigwasser langsam zu steigen, erreicht in den mittleren Stunden (den 3/12-Stunden) ihre maximale Geschwindigkeit und verlangsamt sich wieder, wenn sie sich dem Hochwasser nähert.',
+  },
+  {
+    question: 'Wie beeinflusst der Luftdruck die Gezeiten?',
+    answer:
+      'Hoher Luftdruck (Antizyklon) drückt das Wasser nach unten und verringert die tatsächliche Höhe. Niedriger Luftdruck (Depression) lässt das Wasser höher steigen. Als Faustgel gilt: Eine Abweichung von 1 hPa vom Mittelwert entspricht etwa 1 cm Veränderung des Meeresspiegels.',
+  },
+  {
+    question: 'Was ist der Tidenhub?',
+    answer:
+      'Es ist der vertikale Höhenunterschied zwischen einem Hochwasser und dem unmittelbar vorangehenden oder folgenden Niedrigwasser. Dieses Maß variiert je nach Mondphase (Spring- und Nipptiden) und geografischer Lage.',
+  },
+];
+
+const howTo: TideCalculatorLocaleContent['howTo'] = [
+  {
+    name: 'Hoch- und Niedrigwasser identifizieren',
+    text: 'Schauen Sie in Ihrem Gezeitenkalender nach den Zeiten und Höhen für den Gezeitenzyklus, der Sie interessiert.',
+  },
+  {
+    name: 'Daten in den Rechner eingeben',
+    text: 'Geben Sie Uhrzeit und Höhe von Hoch- und Niedrigwasser ein. Das Tool ermittelt Dauer und Amplitude automatisch.',
+  },
+  {
+    name: 'Abfragezeitpunkt festlegen',
+    text: 'Stellen Sie die Zeit ein, für die Sie den Wasserstand wissen möchten. Sie sehen den genauen Punkt im Diagramm markiert.',
+  },
+  {
+    name: 'Zwölftel-Tabelle analysieren',
+    text: 'Überprüfen Sie die stündliche Aufschlüsselung, um zu verstehen, wie der Wasserstand über den gesamten Zeitraum schwankt.',
+  },
+];
+
+const bibliography: TideCalculatorLocaleContent['bibliography'] = [
+  {
+    name: 'Puertos del Estado - Tide Prediction',
+    url: 'https://portus.puertos.es/#/',
+  },
+  {
+    name: 'Instituto Hidrografico de la Marina',
+    url: 'https://armada.defensa.gob.es/ihm/',
+  },
+];
+
+const seo: TideCalculatorLocaleContent['seo'] = [
+  {
+    type: 'title',
+    text: 'Die Gezeiten meistern: Die Zwölftel-Regel in der Navigation',
+    level: 2,
+  },
+  {
+    type: 'paragraph',
+    html: 'Küstennavigation und das Einlaufen in Häfen mit geringer Wassertiefe erfordern genaue Kenntnisse über den aktuellen Wasserstand. Obwohl heute digitale Anwendungen und GPS zur Verfügung stehen, bleibt die <strong>Zwölftel-Regel</strong> ein grundlegendes Werkzeug in der Ausbildung jedes Skippers. Diese Regel ist eine mathematische Schätzmethode, mit der Sie die Gezeitenhöhe zu jedem Zeitpunkt eines Gezeitenzyklus näherungsweise berechnen können.',
+  },
+  {
+    type: 'title',
+    text: 'Was genau ist die Zwölftel-Regel?',
+    level: 3,
+  },
+  {
+    type: 'paragraph',
+    html: 'Die Zwölftel-Regel basiert auf der Beobachtung, dass der Gezeitenfluss nicht konstant ist. Das Wasser steigt oder fällt während der etwa sechs Stunden zwischen Hochwasser und Niedrigwasser nicht gleichmäßig schnell. Stattdessen folgt die Bewegung einer Sinuskurve. In der ersten Stunde bewegt sich die Gezeit langsam, beschleunigt in den mittleren Stunden und verlangsamt sich wieder, wenn sie das nächste Extrem erreicht.',
+  },
+  {
+    type: 'table',
+    headers: ['Stunde des Zyklus', 'Anteil', 'Flusszustand'],
+    rows: [
+      ['<strong>1. Stunde</strong>', '1/12 des Tidenhubs', 'Langsamer Beginn (Stillwasser)'],
+      ['<strong>2. Stunde</strong>', '2/12 des Tidenhubs', 'Beschleunigender Fluss'],
+      ['<strong>3. Stunde</strong>', '3/12 des Tidenhubs', 'Maximaler Fluss (Starke Strömung)'],
+      ['<strong>4. Stunde</strong>', '3/12 des Tidenhubs', 'Anhaltender Fluss'],
+      ['<strong>5. Stunde</strong>', '2/12 des Tidenhubs', 'Spürbare Verlangsamung'],
+      ['<strong>6. Stunde</strong>', '1/12 des Tidenhubs', 'Finale Verlangsamung (Richtung Stillwasser)'],
+    ],
+  },
+  {
+    type: 'title',
+    text: 'Technische Einschränkungen: Faktoren, die die reale Gezeit beeinflussen',
+    level: 3,
+  },
+  {
+    type: 'glossary',
+    items: [
+      { term: 'Luftdruck', definition: 'Ein Tiefdruckgebiet lässt den Meeresspiegel steigen, ein Hochdruckgebiet lässt ihn sinken. Faustregel: ~1 cm Abweichung pro hPa Differenz zum Mittelwert.' },
+      { term: 'Küstenwind', definition: 'Anhaltender auflandiger Wind kann das Wasser über die in den Gezeitentafeln vorhergesagten Werte aufstauen.' },
+      { term: 'Lokale Topografie', definition: 'Küstenform, Wassertiefe und das Vorhandensein von Flussmündungen können den Gezeitenfluss erheblich verzögern oder beschleunigen.' },
+    ],
+  },
+  {
+    type: 'tip',
+    title: 'Sicherheitshinweis',
+    html: 'Dieses Tool verwendet eine mathematische Schätzmethode. Meteorologische Faktoren oder lokale Topografie werden nicht berücksichtigt. Konsultieren Sie für die reale Navigation immer offizielle Gezeitentafeln.',
+  },
+  {
+    type: 'title',
+    text: 'Kernkonzepte für neue Segler',
+    level: 3,
+  },
+  {
+    type: 'glossary',
+    items: [
+      {
+        term: 'Tidenhub',
+        definition: 'Vertikaler Unterschied zwischen Hochwasser und Niedrigwasser. In der Biskaya kann er mehrere Meter betragen, im Mittelmeer ist er fast vernachlässigbar.',
+      },
+      {
+        term: 'Gezeitendauer',
+        definition: 'Zeitintervall zwischen Hochwasser und dem nächsten Niedrigwasser. Typischerweise etwa 6 Stunden und 12 Minuten.',
+      },
+      {
+        term: 'Seekartennull',
+        definition: 'Bezugsniveau, von dem alle Tiefenangaben in Seekarten gemessen werden. Die tatsächliche Tiefe ist fast nie geringer als angegeben.',
+      },
+    ],
+  },
+];
+
+const schemas: TideCalculatorLocaleContent['schemas'] = [
+  {
+    '@context': 'https://schema.org',
+    '@type': 'SoftwareApplication',
+    name: title,
+    description,
+    applicationCategory: 'UtilityApplication',
+    operatingSystem: 'Web',
+    offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  } as WithContext<SoftwareApplication>,
+  {
+    '@context': 'https://schema.org',
+    '@type': 'FAQPage',
+    mainEntity: faq.map((item) => ({
+      '@type': 'Question',
+      name: item.question,
+      acceptedAnswer: { '@type': 'Answer', text: item.answer },
+    })),
+  } as WithContext<FAQPage>,
+  {
+    '@context': 'https://schema.org',
+    '@type': 'HowTo',
+    name: `Benutzung: ${title}`,
+    step: howTo.map((s) => ({ '@type': 'HowToStep', name: s.name, text: s.text })),
+  } as WithContext<HowTo>,
+];
+
+export const content: TideCalculatorLocaleContent = {
+  slug,
+  title,
+  description,
+  ui,
+  seo,
+  faq,
+  bibliography,
+  howTo,
+  schemas,
+};