@jjlmoya/utils-science 1.30.0 → 1.32.0

package/src/tool/mandelbrot-fractal/mandelbrot-fractal-calculator.css

@@ -0,0 +1,357 @@
+:root {
+  --mandel-bg: #f4f5f2;
+  --mandel-ink: #141820;
+  --mandel-muted: #5b6472;
+  --mandel-line: rgba(20, 24, 32, 0.12);
+  --mandel-panel: rgba(255, 255, 255, 0.86);
+  --mandel-hot: #e24d2f;
+  --mandel-active: #c9361f;
+  --mandel-cool: #159a9c;
+  --mandel-shadow: rgba(18, 24, 38, 0.14);
+  --mandel-radius: 10px;
+}
+
+.theme-dark {
+  --mandel-bg: #07090d;
+  --mandel-ink: #f2f6ff;
+  --mandel-muted: #8f98a8;
+  --mandel-line: rgba(242, 246, 255, 0.08);
+  --mandel-panel: rgba(10, 12, 16, 0.8);
+  --mandel-hot: #ff6b4a;
+  --mandel-active: #43d8c9;
+  --mandel-cool: #43d8c9;
+  --mandel-shadow: rgba(0, 0, 0, 0.36);
+}
+
+.mandelbrot-root {
+  display: grid;
+  gap: 1rem;
+  max-width: 1120px;
+  margin: 0 auto;
+  padding: 0.75rem;
+  color: var(--mandel-ink);
+  background:
+    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--mandel-hot) 16%, transparent), transparent 34%),
+    radial-gradient(circle at 92% 100%, color-mix(in srgb, var(--mandel-cool) 14%, transparent), transparent 36%),
+    var(--mandel-bg);
+  border: 1px solid var(--mandel-line);
+  border-radius: var(--mandel-radius);
+}
+
+.mandelbrot-stage {
+  position: relative;
+  min-height: 380px;
+  overflow: hidden;
+  background: #07080b;
+  border: 1px solid color-mix(in srgb, var(--mandel-cool) 24%, var(--mandel-line));
+  border-radius: calc(var(--mandel-radius) - 2px);
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.02) inset,
+    0 24px 70px var(--mandel-shadow),
+    0 0 70px color-mix(in srgb, var(--mandel-hot) 18%, transparent);
+}
+
+.mandelbrot-canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+  min-height: 380px;
+  cursor: crosshair;
+}
+
+.mandelbrot-reticle {
+  position: absolute;
+  inset: 50% auto auto 50%;
+  width: 72px;
+  height: 72px;
+  border: 1px solid rgba(255, 255, 255, 0.55);
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+.mandelbrot-reticle::before,
+.mandelbrot-reticle::after {
+  position: absolute;
+  content: "";
+  background: rgba(255, 255, 255, 0.5);
+}
+
+.mandelbrot-reticle::before {
+  left: 50%;
+  top: -18px;
+  width: 1px;
+  height: 108px;
+}
+
+.mandelbrot-reticle::after {
+  left: -18px;
+  top: 50%;
+  width: 108px;
+  height: 1px;
+}
+
+.mandelbrot-coordinate-strip {
+  position: absolute;
+  left: 0.75rem;
+  right: 0.75rem;
+  bottom: 0.75rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem 0.75rem;
+  justify-content: space-between;
+  padding: 0.75rem;
+  color: #f8fafc;
+  background: rgba(7, 8, 11, 0.74);
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  border-radius: calc(var(--mandel-radius) - 2px);
+  backdrop-filter: blur(14px);
+}
+
+.mandelbrot-coordinate-strip span,
+.mandelbrot-readouts span,
+.mandelbrot-control span {
+  font-size: 0.65rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--mandel-muted);
+}
+
+.mandelbrot-coordinate-strip span {
+  color: rgba(255, 255, 255, 0.72);
+}
+
+.mandelbrot-coordinate-strip strong {
+  font-size: 0.9rem;
+  font-weight: 450;
+  color: #fff;
+  overflow-wrap: anywhere;
+}
+
+.mandelbrot-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  padding: 1.25rem;
+  background: var(--mandel-panel);
+  border: 1px solid var(--mandel-line);
+  border-radius: calc(var(--mandel-radius) - 2px);
+  backdrop-filter: blur(12px);
+}
+
+.mandelbrot-presets {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0;
+  overflow: hidden;
+  border: 1px solid var(--mandel-line);
+  border-radius: calc(var(--mandel-radius) - 2px);
+}
+
+.mandelbrot-preset {
+  min-height: 42px;
+  padding: 0.7rem 0.85rem;
+  color: var(--mandel-ink);
+  background: transparent;
+  border: 0;
+  border-bottom: 1px solid var(--mandel-line);
+  font-size: 0.78rem;
+  font-weight: 750;
+  letter-spacing: 0.02em;
+  cursor: pointer;
+}
+
+.mandelbrot-preset:last-child {
+  border-bottom: 0;
+}
+
+.mandelbrot-preset.active,
+.mandelbrot-preset:hover {
+  color: var(--mandel-ink);
+  background: color-mix(in srgb, var(--mandel-active) 11%, transparent);
+  box-shadow: inset 0 -2px 0 var(--mandel-active);
+}
+
+.theme-dark .mandelbrot-preset.active,
+.theme-dark .mandelbrot-preset:hover {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.06);
+  box-shadow: inset 0 -2px 0 var(--mandel-active);
+}
+
+.mandelbrot-reset-button {
+  align-self: flex-start;
+  min-height: 30px;
+  padding: 0;
+  color: var(--mandel-muted);
+  background: transparent;
+  border: 0;
+  border-bottom: 1px solid transparent;
+  font-size: 0.68rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  cursor: pointer;
+}
+
+.mandelbrot-reset-button:hover {
+  color: var(--mandel-ink);
+  border-bottom-color: var(--mandel-active);
+}
+
+.mandelbrot-readouts {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1.15rem;
+}
+
+.mandelbrot-readout {
+  display: grid;
+  gap: 0.3rem;
+  padding-bottom: 1.1rem;
+  border-bottom: 1px solid var(--mandel-line);
+}
+
+.mandelbrot-readouts strong {
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.1;
+  letter-spacing: 0;
+  color: var(--mandel-ink);
+  overflow-wrap: anywhere;
+}
+
+.mandelbrot-readout-hero strong {
+  font-size: clamp(2rem, 9vw, 2.65rem);
+  font-weight: 300;
+  letter-spacing: -0.04em;
+  color: var(--mandel-ink);
+  text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
+}
+
+.theme-dark .mandelbrot-readout-hero strong {
+  color: #fff;
+}
+
+.mandelbrot-controls {
+  display: grid;
+  gap: 1.1rem;
+}
+
+.mandelbrot-control {
+  display: grid;
+  gap: 0.4rem;
+}
+
+.mandelbrot-control input,
+.mandelbrot-control select {
+  width: 100%;
+  min-height: 42px;
+}
+
+.mandelbrot-control input[type="range"] {
+  -webkit-appearance: none;
+  appearance: none;
+  min-height: 28px;
+  background: transparent;
+  cursor: pointer;
+}
+
+.mandelbrot-control input[type="range"]::-webkit-slider-runnable-track {
+  height: 2px;
+  background: var(--mandel-line);
+  border-radius: 999px;
+}
+
+.mandelbrot-control input[type="range"]::-moz-range-track {
+  height: 2px;
+  background: var(--mandel-line);
+  border-radius: 999px;
+}
+
+.mandelbrot-control input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 8px;
+  height: 8px;
+  margin-top: -3px;
+  background: var(--mandel-ink);
+  border: 0;
+  border-radius: 50%;
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--mandel-ink) 10%, transparent);
+}
+
+.mandelbrot-control input[type="range"]::-moz-range-thumb {
+  width: 8px;
+  height: 8px;
+  background: var(--mandel-ink);
+  border: 0;
+  border-radius: 50%;
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--mandel-ink) 10%, transparent);
+}
+
+.theme-dark .mandelbrot-control input[type="range"]::-webkit-slider-thumb {
+  background: #fff;
+  box-shadow: 0 0 14px rgba(255, 255, 255, 0.45);
+}
+
+.theme-dark .mandelbrot-control input[type="range"]::-moz-range-thumb {
+  background: #fff;
+  box-shadow: 0 0 14px rgba(255, 255, 255, 0.45);
+}
+
+.mandelbrot-control select {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  padding: 0 1.85rem 0 0;
+  color: var(--mandel-ink);
+  background-color: transparent;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23141820' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
+  background-position: right 0.05rem center;
+  background-repeat: no-repeat;
+  border: 0;
+  border-bottom: 1px solid var(--mandel-line);
+  border-radius: 0;
+  font-size: 0.95rem;
+}
+
+.theme-dark .mandelbrot-control select {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
+}
+
+.mandelbrot-control select option {
+  color: #141820;
+  background: #fff;
+}
+
+.theme-dark .mandelbrot-control select option {
+  color: #f2f6ff;
+  background: #111722;
+}
+
+@media (min-width: 760px) {
+  .mandelbrot-root {
+    grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.45fr);
+    padding: 1rem;
+  }
+
+  .mandelbrot-stage,
+  .mandelbrot-canvas {
+    min-height: 640px;
+  }
+
+  .mandelbrot-presets {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .mandelbrot-preset {
+    border-right: 1px solid var(--mandel-line);
+    border-bottom: 0;
+  }
+
+  .mandelbrot-preset:last-child {
+    border-right: 0;
+  }
+}

package/src/tool/mandelbrot-fractal/seo.astro

@@ -0,0 +1,15 @@
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { mandelbrotFractal } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props;
+const content = await mandelbrotFractal.i18n[locale]?.();
+if (!content) return null;
+---
+
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/twin-paradox-visualizer/bibliography.astro

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

package/src/tool/twin-paradox-visualizer/bibliography.ts

@@ -0,0 +1,12 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'Twin Paradox without One-Way Velocity Assumptions',
+    url: 'https://link.springer.com/article/10.1023/A:1018748702460',
+  },
+  {
+    name: 'Spacetime Physics: Introduction to Special Relativity',
+    url: 'https://ia800503.us.archive.org/22/items/SpacetimePhysicsIntroductionToSpecialRelativityTaylorWheelerPDF/Spacetime%20Physics%20-%20Introduction%20to%20Special%20Relativity%20%5BTaylor-Wheeler%5DPDF.pdf',
+  },
+];

package/src/tool/twin-paradox-visualizer/component.astro

@@ -0,0 +1,205 @@
+---
+import './twin-paradox-visualizer.css';
+
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="twin-lab" id="twin-lab" data-years-unit={ui.yearsUnit} data-years-short-unit={ui.yearsShortUnit}>
+  <section class="twin-viewport" aria-label={ui.visualTitle}>
+    <div class="twin-orbit">
+      <div class="twin-earth">
+        <span>{ui.earthTwin}</span>
+        <strong id="twin-earth-age">30.0</strong>
+      </div>
+      <div class="twin-path" aria-hidden="true">
+        <div class="twin-turnaround" id="twin-turnaround"></div>
+        <div class="twin-ship" id="twin-ship"></div>
+      </div>
+      <div class="twin-ship-clock">
+        <span>{ui.travelingTwin}</span>
+        <strong id="twin-ship-age">30.0</strong>
+      </div>
+    </div>
+    <svg class="twin-worldline" id="twin-worldline" viewBox="0 0 640 260" role="img" aria-label={ui.worldlineLabel}>
+      <g class="twin-lab-grid" id="twin-lab-grid" aria-hidden="true"></g>
+      <path class="twin-earth-line" d="M112 220 V38"></path>
+      <path class="twin-ship-line" id="twin-ship-line" d="M112 220 L350 74 L588 220"></path>
+      <circle class="twin-event" cx="112" cy="220" r="7"></circle>
+      <circle class="twin-event twin-event-return" id="twin-return-event" cx="588" cy="220" r="7"></circle>
+    </svg>
+  </section>
+
+  <section class="twin-console" aria-label={ui.controlsTitle}>
+    <div class="twin-presets">
+      <button type="button" data-velocity="0.50" data-years="12">{ui.presetCruise}</button>
+      <button type="button" data-velocity="0.86" data-years="20" class="active">{ui.presetRelativistic}</button>
+      <button type="button" data-velocity="0.98" data-years="40">{ui.presetExtreme}</button>
+    </div>
+
+    <label class="twin-field" for="twin-velocity">
+      <span>{ui.velocityLabel}</span>
+      <output id="twin-velocity-output">0.86c</output>
+      <input id="twin-velocity" type="range" min="0.05" max="0.99" value="0.86" step="0.01" />
+    </label>
+
+    <label class="twin-field" for="twin-years">
+      <span>{ui.earthYearsLabel}</span>
+      <output id="twin-years-output">20 {ui.yearsUnit}</output>
+      <input id="twin-years" type="range" min="2" max="80" value="20" step="1" />
+    </label>
+
+    <div class="twin-readout">
+      <div class="twin-reunion">
+        <span>{ui.ageGapLabel}</span>
+        <strong><span id="twin-age-gap-value">-</span><small>{ui.yearsShortUnit}</small></strong>
+      </div>
+      <div class="twin-results">
+        <div class="twin-metric">
+          <span>{ui.gammaLabel}</span>
+          <strong id="twin-gamma">-</strong>
+        </div>
+        <div class="twin-metric">
+          <span>{ui.shipTimeLabel}</span>
+          <strong id="twin-ship-time">-</strong>
+        </div>
+        <div class="twin-metric">
+          <span>{ui.distanceLabel}</span>
+          <strong id="twin-distance">-</strong>
+        </div>
+      </div>
+    </div>
+  </section>
+</div>
+
+<script>
+  import { calculateTwinParadox } from './logic';
+
+  const root = document.getElementById('twin-lab');
+  const velocityInput = document.getElementById('twin-velocity') as HTMLInputElement | null;
+  const yearsInput = document.getElementById('twin-years') as HTMLInputElement | null;
+  const velocityOutput = document.getElementById('twin-velocity-output');
+  const yearsOutput = document.getElementById('twin-years-output');
+  const earthAge = document.getElementById('twin-earth-age');
+  const shipAge = document.getElementById('twin-ship-age');
+  const ageGap = document.getElementById('twin-age-gap-value');
+  const gammaText = document.getElementById('twin-gamma');
+  const shipTime = document.getElementById('twin-ship-time');
+  const distanceText = document.getElementById('twin-distance');
+  const ship = document.getElementById('twin-ship');
+  const turnaround = document.getElementById('twin-turnaround');
+  const shipLine = document.getElementById('twin-ship-line');
+  const returnEvent = document.getElementById('twin-return-event');
+  const grid = document.getElementById('twin-lab-grid');
+  const worldline = document.getElementById('twin-worldline');
+  const presetButtons = document.querySelectorAll<HTMLButtonElement>('.twin-presets button');
+  const departureAge = 30;
+  const svgNamespace = 'http://www.w3.org/2000/svg';
+  const yearsUnit = root?.dataset.yearsUnit ?? '';
+  const yearsShortUnit = root?.dataset.yearsShortUnit ?? '';
+
+  function formatYears(value: number): string {
+    return value.toFixed(value >= 10 ? 1 : 2);
+  }
+
+  function setFill(input: HTMLInputElement) {
+    const min = Number(input.min);
+    const max = Number(input.max);
+    const value = Number(input.value);
+    const progress = ((value - min) / (max - min)) * 100;
+    input.style.setProperty('--fill', `${progress}%`);
+  }
+
+  function buildGrid() {
+    if (!grid) return;
+
+    for (let y = 44; y <= 220; y += 22) {
+      for (let x = 92; x <= 592; x += 28) {
+        const dot = document.createElementNS(svgNamespace, 'circle');
+        dot.setAttribute('cx', x.toString());
+        dot.setAttribute('cy', y.toString());
+        dot.setAttribute('r', ((x + y) % 3 === 0 ? 1.55 : 1.05).toString());
+        dot.dataset.x = x.toString();
+        dot.dataset.y = y.toString();
+        grid.append(dot);
+      }
+    }
+  }
+
+  function warpGrid(velocity: number, gamma: number) {
+    if (!grid || !worldline) return;
+
+    const contraction = 1 / gamma;
+    const skew = velocity * 0.32;
+    grid.querySelectorAll<SVGCircleElement>('circle').forEach((dot) => {
+      const rawX = Number(dot.dataset.x);
+      const rawY = Number(dot.dataset.y);
+      const centerX = 112;
+      const centerY = 220;
+      const dx = rawX - centerX;
+      const dy = rawY - centerY;
+      const warpedX = centerX + dx * (0.72 + contraction * 0.28) + dy * skew;
+      const warpedY = centerY + dy * (1.04 - velocity * 0.16);
+      dot.setAttribute('cx', warpedX.toFixed(2));
+      dot.setAttribute('cy', warpedY.toFixed(2));
+      dot.style.opacity = `${0.12 + velocity * 0.25}`;
+    });
+
+    worldline.style.setProperty('--grid-compression', contraction.toFixed(3));
+  }
+
+  function update() {
+    if (!velocityInput || !yearsInput) return;
+
+    const velocity = Number(velocityInput.value);
+    const earthYears = Number(yearsInput.value);
+    const result = calculateTwinParadox({ earthYears, velocityFractionC: velocity });
+    const shipProgress = Math.min(94, Math.max(8, 9 + velocity * 72));
+    const bendY = Math.max(52, 168 - velocity * 104);
+    const returnX = Math.min(598, 270 + earthYears * 4);
+
+    velocityOutput!.textContent = `${velocity.toFixed(2)}c`;
+    yearsOutput!.textContent = `${earthYears} ${yearsUnit}`;
+    earthAge!.textContent = (departureAge + earthYears).toFixed(1);
+    shipAge!.textContent = (departureAge + result.shipYears).toFixed(1);
+    ageGap!.textContent = formatYears(result.ageGapYears);
+    gammaText!.textContent = `${result.gamma.toFixed(3)}x`;
+    shipTime!.textContent = `${formatYears(result.shipYears)} ${yearsShortUnit}`;
+    distanceText!.textContent = `${result.earthDistanceLightYears.toFixed(1)} ly`;
+
+    ship?.style.setProperty('--ship-progress', `${shipProgress}%`);
+    ship?.style.setProperty('--clock-rate', `"${result.shipClockRatePercent.toFixed(1)}%"`);
+    turnaround?.style.setProperty('--turnaround-progress', `${shipProgress}%`);
+    shipLine?.setAttribute('d', `M112 220 L350 ${bendY.toFixed(1)} L${returnX.toFixed(1)} 220`);
+    returnEvent?.setAttribute('cx', returnX.toFixed(1));
+    warpGrid(velocity, result.gamma);
+    setFill(velocityInput);
+    setFill(yearsInput);
+  }
+
+  velocityInput?.addEventListener('input', () => {
+    presetButtons.forEach((button) => button.classList.remove('active'));
+    update();
+  });
+  yearsInput?.addEventListener('input', () => {
+    presetButtons.forEach((button) => button.classList.remove('active'));
+    update();
+  });
+
+  presetButtons.forEach((button) => {
+    button.addEventListener('click', () => {
+      if (!velocityInput || !yearsInput) return;
+      presetButtons.forEach((item) => item.classList.remove('active'));
+      button.classList.add('active');
+      velocityInput.value = button.dataset.velocity ?? velocityInput.value;
+      yearsInput.value = button.dataset.years ?? yearsInput.value;
+      update();
+    });
+  });
+
+  buildGrid();
+  update();
+</script>

package/src/tool/twin-paradox-visualizer/entry.ts

@@ -0,0 +1,26 @@
+import type { ScienceToolEntry } from '../../types';
+
+export const twinParadoxVisualizer: ScienceToolEntry = {
+  id: 'twin-paradox-visualizer',
+  icons: {
+    bg: 'mdi:clock-time-eight-outline',
+    fg: 'mdi:rocket-outline',
+  },
+  i18n: {
+    de: () => import('./i18n/de').then((m) => m.content),
+    en: () => import('./i18n/en').then((m) => m.content),
+    es: () => import('./i18n/es').then((m) => m.content),
+    fr: () => import('./i18n/fr').then((m) => m.content),
+    id: () => import('./i18n/id').then((m) => m.content),
+    it: () => import('./i18n/it').then((m) => m.content),
+    ja: () => import('./i18n/ja').then((m) => m.content),
+    ko: () => import('./i18n/ko').then((m) => m.content),
+    nl: () => import('./i18n/nl').then((m) => m.content),
+    pl: () => import('./i18n/pl').then((m) => m.content),
+    pt: () => import('./i18n/pt').then((m) => m.content),
+    ru: () => import('./i18n/ru').then((m) => m.content),
+    sv: () => import('./i18n/sv').then((m) => m.content),
+    tr: () => import('./i18n/tr').then((m) => m.content),
+    zh: () => import('./i18n/zh').then((m) => m.content),
+  },
+};