@jjlmoya/utils-health 1.1.0

package/src/tool/caffeineTracker/ui.ts

@@ -0,0 +1,36 @@
+export interface CaffeineTrackerUI extends Record<string, string> {
+  drinkEspressoName: string;
+  drinkDoubleEspressoName: string;
+  drinkBrewedName: string;
+  drinkEnergySmallName: string;
+  drinkMonsterName: string;
+  drinkSodaName: string;
+  drinkTeaName: string;
+  drinkEspressoDesc: string;
+  drinkDoubleEspressoDesc: string;
+  drinkBrewedDesc: string;
+  drinkEnergySmallDesc: string;
+  drinkMonsterDesc: string;
+  drinkSodaDesc: string;
+  drinkTeaDesc: string;
+  metabolismFastLabel: string;
+  metabolismNormalLabel: string;
+  metabolismSlowLabel: string;
+  metabolismPregnancyLabel: string;
+  metabolismFastDesc: string;
+  metabolismNormalDesc: string;
+  metabolismSlowDesc: string;
+  metabolismPregnancyDesc: string;
+  sectionAddDrink: string;
+  sectionMetabolism: string;
+  sectionJournal: string;
+  labelCurrentMg: string;
+  labelEliminationTime: string;
+  labelSleepQuestion: string;
+  statusOptimal: string;
+  statusModerate: string;
+  statusCritical: string;
+  btnReset: string;
+  journalEmpty: string;
+  sleepAtPrefix: string;
+}

package/src/tool/daltonismSimulator/bibliography.astro

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

package/src/tool/daltonismSimulator/component.astro

@@ -0,0 +1,383 @@
+---
+import type { KnownLocale } from '../../types';
+import type { DaltonismSimulatorUI } from './ui';
+
+interface Props {
+  locale?: KnownLocale;
+  ui?: Record<string, unknown>;
+}
+
+const t = (Astro.props.ui ?? {}) as DaltonismSimulatorUI;
+---
+
+<div
+  class="ds"
+  id="ds-root"
+  data-desc-normal={t.descNormal ?? 'Normal color vision. Full spectral perception.'}
+  data-desc-protanopia={t.descProtanopia ?? 'Absent L (red) cones. Reds appear dark or black.'}
+  data-desc-deuteranopia={t.descDeuteranopia ?? 'Absent M (green) cones. Reds and greens are indistinguishable.'}
+  data-desc-tritanopia={t.descTritanopia ?? 'Absent S (blue) cones. Blues appear greenish.'}
+  data-desc-protanomaly={t.descProtanomaly ?? 'Deficient L cones. Reds are less saturated.'}
+  data-desc-deuteranomaly={t.descDeuteranomaly ?? 'Deficient M cones. Most common type.'}
+  data-desc-achromatopsia={t.descAchromatopsia ?? 'Total absence of color perception. Only shades of grey.'}
+>
+  <div class="ds__types">
+    <button class="ds__btn ds__btn--active" data-type="normal">{t.typeNormal ?? 'Normal'}</button>
+    <button class="ds__btn" data-type="protanopia">{t.typeProtanopia ?? 'Protanopia'}</button>
+    <button class="ds__btn" data-type="deuteranopia">{t.typeDeuteranopia ?? 'Deuteranopia'}</button>
+    <button class="ds__btn" data-type="tritanopia">{t.typeTritanopia ?? 'Tritanopia'}</button>
+    <button class="ds__btn" data-type="protanomaly">{t.typeProtanomaly ?? 'Protanomaly'}</button>
+    <button class="ds__btn" data-type="deuteranomaly">{t.typeDeuteranomaly ?? 'Deuteranomaly'}</button>
+    <button class="ds__btn" data-type="achromatopsia">{t.typeAchromatopsia ?? 'Achromatopsia'}</button>
+  </div>
+
+  <p class="ds__type-desc" id="ds-type-desc">{t.descNormal ?? 'Normal color vision.'}</p>
+
+  <div class="ds__comparison">
+    <div class="ds__panel">
+      <span class="ds__panel-label">{t.labelOriginal ?? 'Original'}</span>
+      <canvas class="ds__canvas" id="ds-canvas-orig" width="480" height="300"></canvas>
+    </div>
+    <div class="ds__panel">
+      <span class="ds__panel-label ds__panel-label--sim" id="ds-sim-label">{t.typeNormal ?? 'Normal'}</span>
+      <canvas class="ds__canvas" id="ds-canvas-sim" width="480" height="300"></canvas>
+    </div>
+  </div>
+
+  <div class="ds__upload" id="ds-upload">
+    <label for="ds-file" class="ds__upload-label">{t.btnUpload ?? 'Upload image'}</label>
+    <span class="ds__upload-or">{t.orDrag ?? 'or drag here'}</span>
+    <input type="file" id="ds-file" accept="image/*" class="ds__file-input">
+  </div>
+</div>
+
+<style>
+  .ds {
+    --ds-accent: #7c3aed;
+    --ds-bg: rgba(255, 255, 255, 0.95);
+    --ds-border: rgba(226, 232, 240, 0.8);
+    --ds-text: #1e293b;
+    --ds-muted: #64748b;
+    --ds-btn-bg: rgba(248, 250, 252, 0.9);
+    --ds-btn-border: rgba(226, 232, 240, 0.8);
+    --ds-canvas-bg: #f1f5f9;
+    --ds-upload-bg: rgba(248, 250, 252, 0.5);
+
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    background: var(--ds-bg);
+    border: 1px solid var(--ds-border);
+    border-radius: 2rem;
+    padding: 2rem;
+    max-width: 960px;
+    margin: 2rem auto;
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
+  }
+
+  :global(.theme-dark) .ds {
+    --ds-bg: rgba(15, 23, 42, 0.9);
+    --ds-border: rgba(51, 65, 85, 0.8);
+    --ds-text: #f8fafc;
+    --ds-muted: #94a3b8;
+    --ds-btn-bg: rgba(30, 41, 59, 0.8);
+    --ds-btn-border: rgba(51, 65, 85, 0.8);
+    --ds-canvas-bg: #1e293b;
+    --ds-upload-bg: rgba(30, 41, 59, 0.5);
+  }
+
+  .ds__types {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  .ds__btn {
+    padding: 0.45rem 1rem;
+    border-radius: 2rem;
+    border: 1px solid var(--ds-btn-border);
+    background: var(--ds-btn-bg);
+    color: var(--ds-muted);
+    font-size: 0.8rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.15s;
+    white-space: nowrap;
+  }
+
+  .ds__btn:hover {
+    border-color: var(--ds-accent);
+    color: var(--ds-accent);
+  }
+
+  .ds__btn--active {
+    background: var(--ds-accent);
+    border-color: var(--ds-accent);
+    color: #fff;
+  }
+
+  .ds__btn--active:hover {
+    color: #fff;
+  }
+
+  .ds__type-desc {
+    font-size: 0.875rem;
+    color: var(--ds-muted);
+    margin: 0;
+    min-height: 1.4em;
+    transition: color 0.2s;
+  }
+
+  .ds__comparison {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+  }
+
+  .ds__panel {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .ds__panel-label {
+    font-size: 0.7rem;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--ds-muted);
+  }
+
+  .ds__panel-label--sim {
+    color: var(--ds-accent);
+  }
+
+  .ds__canvas {
+    width: 100%;
+    height: auto;
+    display: block;
+    border-radius: 0.75rem;
+    background: var(--ds-canvas-bg);
+    border: 1px solid var(--ds-border);
+  }
+
+  .ds__upload {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 1.25rem;
+    border: 1px dashed var(--ds-btn-border);
+    border-radius: 1rem;
+    background: var(--ds-upload-bg);
+    transition: border-color 0.2s;
+    flex-wrap: wrap;
+  }
+
+  .ds__upload--drag {
+    border-color: var(--ds-accent);
+  }
+
+  .ds__upload-label {
+    display: inline-block;
+    padding: 0.5rem 1.25rem;
+    background: var(--ds-accent);
+    color: #fff;
+    border-radius: 2rem;
+    font-size: 0.825rem;
+    font-weight: 700;
+    cursor: pointer;
+    transition: opacity 0.15s;
+  }
+
+  .ds__upload-label:hover {
+    opacity: 0.85;
+  }
+
+  .ds__upload-or {
+    font-size: 0.825rem;
+    color: var(--ds-muted);
+  }
+
+  .ds__file-input {
+    display: none;
+  }
+
+  @media (max-width: 640px) {
+    .ds {
+      padding: 1.25rem;
+      border-radius: 1.5rem;
+      margin: 1rem 0;
+      gap: 1.25rem;
+    }
+
+    .ds__comparison {
+      grid-template-columns: 1fr;
+    }
+
+    .ds__btn {
+      font-size: 0.75rem;
+      padding: 0.4rem 0.85rem;
+    }
+  }
+</style>
+
+<script>
+  const root = document.getElementById('ds-root') as HTMLElement;
+  const ds = root?.dataset ?? {};
+
+  const origCanvas = document.getElementById('ds-canvas-orig') as HTMLCanvasElement;
+  const simCanvas = document.getElementById('ds-canvas-sim') as HTMLCanvasElement;
+  const typeDesc = document.getElementById('ds-type-desc') as HTMLElement;
+  const simLabel = document.getElementById('ds-sim-label') as HTMLElement;
+  const fileInput = document.getElementById('ds-file') as HTMLInputElement;
+  const uploadArea = document.getElementById('ds-upload') as HTMLElement;
+  const typeBtns = root?.querySelectorAll<HTMLButtonElement>('.ds__btn') ?? [];
+
+  let currentType = 'normal';
+
+  const MATRICES: Record<string, number[]> = {
+    normal:        [1, 0, 0,         0, 1, 0,         0, 0, 1],
+    protanopia:    [0.567, 0.433, 0, 0.558, 0.442, 0, 0, 0.242, 0.758],
+    deuteranopia:  [0.625, 0.375, 0, 0.700, 0.300, 0, 0, 0.300, 0.700],
+    tritanopia:    [0.950, 0.050, 0, 0, 0.433, 0.567, 0, 0.475, 0.525],
+    protanomaly:   [0.817, 0.183, 0, 0.333, 0.667, 0, 0, 0.125, 0.875],
+    deuteranomaly: [0.800, 0.200, 0, 0.258, 0.742, 0, 0, 0.142, 0.858],
+    achromatopsia: [0.299, 0.587, 0.114, 0.299, 0.587, 0.114, 0.299, 0.587, 0.114],
+  };
+
+  const DESC_MAP: Record<string, string> = {
+    normal: ds.descNormal ?? '',
+    protanopia: ds.descProtanopia ?? '',
+    deuteranopia: ds.descDeuteranopia ?? '',
+    tritanopia: ds.descTritanopia ?? '',
+    protanomaly: ds.descProtanomaly ?? '',
+    deuteranomaly: ds.descDeuteranomaly ?? '',
+    achromatopsia: ds.descAchromatopsia ?? '',
+  };
+
+  function hslToRgb(h: number, s: number, l: number): [number, number, number] {
+    const sl = s / 100;
+    const ll = l / 100;
+    const k = (n: number) => (n + h / 30) % 12;
+    const a = sl * Math.min(ll, 1 - ll);
+    const f = (n: number) => ll - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
+    return [Math.round(f(0) * 255), Math.round(f(8) * 255), Math.round(f(4) * 255)];
+  }
+
+  function drawPatches(ctx: CanvasRenderingContext2D, w: number, h: number): void {
+    const COLORS = [
+      '#e53e3e', '#dd6b20', '#d69e2e', '#38a169',
+      '#3182ce', '#805ad5', '#d53f8c', '#2d3748',
+      '#e2e8f0', '#f6e05e', '#68d391', '#90cdf4',
+    ];
+    const cw = w / 4;
+    const ch = (h * 0.55) / 3;
+    const sy = h * 0.45;
+    COLORS.forEach((color, i) => {
+      ctx.fillStyle = color;
+      ctx.fillRect((i % 4) * cw + 2, sy + Math.floor(i / 4) * ch + 2, cw - 4, ch - 4);
+    });
+  }
+
+  function drawSample(ctx: CanvasRenderingContext2D): void {
+    const w = ctx.canvas.width;
+    const h = ctx.canvas.height;
+    const stripH = Math.round(h * 0.45);
+    for (let x = 0; x < w; x++) {
+      const [r, g, b] = hslToRgb((x / w) * 360, 100, 50);
+      ctx.fillStyle = `rgb(${r},${g},${b})`;
+      ctx.fillRect(x, 0, 1, stripH);
+    }
+    drawPatches(ctx, w, h);
+  }
+
+  function applyMatrix(data: Uint8ClampedArray, m: number[]): void {
+    for (let i = 0; i < data.length; i += 4) {
+      const r = data[i];
+      const g = data[i + 1];
+      const b = data[i + 2];
+      data[i]     = Math.min(255, Math.round(m[0] * r + m[1] * g + m[2] * b));
+      data[i + 1] = Math.min(255, Math.round(m[3] * r + m[4] * g + m[5] * b));
+      data[i + 2] = Math.min(255, Math.round(m[6] * r + m[7] * g + m[8] * b));
+    }
+  }
+
+  function renderSim(type: string): void {
+    const origCtx = origCanvas.getContext('2d');
+    const simCtx = simCanvas.getContext('2d');
+    if (!origCtx || !simCtx) return;
+    simCanvas.width = origCanvas.width;
+    simCanvas.height = origCanvas.height;
+    simCtx.drawImage(origCanvas, 0, 0);
+    const imgData = simCtx.getImageData(0, 0, simCanvas.width, simCanvas.height);
+    applyMatrix(imgData.data, MATRICES[type] ?? MATRICES['normal']);
+    simCtx.putImageData(imgData, 0, 0);
+  }
+
+  function selectType(type: string, label: string): void {
+    currentType = type;
+    typeBtns.forEach((btn) => {
+      btn.classList.toggle('ds__btn--active', btn.dataset.type === type);
+    });
+    typeDesc.textContent = DESC_MAP[type] ?? '';
+    simLabel.textContent = label;
+    renderSim(type);
+  }
+
+  function loadImage(img: HTMLImageElement): void {
+    const origCtx = origCanvas.getContext('2d');
+    if (!origCtx) return;
+    const scaleW = origCanvas.width / img.width;
+    const scaleH = 400 / img.height;
+    const scale = Math.min(scaleW, scaleH, 1);
+    const w = Math.round(img.width * scale);
+    const h = Math.round(img.height * scale);
+    origCanvas.width = w;
+    origCanvas.height = h;
+    origCtx.drawImage(img, 0, 0, w, h);
+    renderSim(currentType);
+  }
+
+  function processFile(file: File): void {
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      const img = new Image();
+      img.onload = () => loadImage(img);
+      img.src = e.target?.result as string;
+    };
+    reader.readAsDataURL(file);
+  }
+
+  typeBtns.forEach((btn) => {
+    btn.addEventListener('click', () => {
+      selectType(btn.dataset.type ?? 'normal', btn.textContent ?? '');
+    });
+  });
+
+  fileInput.addEventListener('change', () => {
+    const file = fileInput.files?.[0];
+    if (file) processFile(file);
+  });
+
+  uploadArea.addEventListener('dragover', (e) => {
+    e.preventDefault();
+    uploadArea.classList.add('ds__upload--drag');
+  });
+
+  uploadArea.addEventListener('dragleave', () => {
+    uploadArea.classList.remove('ds__upload--drag');
+  });
+
+  uploadArea.addEventListener('drop', (e) => {
+    e.preventDefault();
+    uploadArea.classList.remove('ds__upload--drag');
+    const file = (e as DragEvent).dataTransfer?.files[0];
+    if (file) processFile(file);
+  });
+
+  const origCtx = origCanvas.getContext('2d');
+  if (origCtx) {
+    drawSample(origCtx);
+    renderSim(currentType);
+  }
+</script>

package/src/tool/daltonismSimulator/i18n/en.ts

@@ -0,0 +1,188 @@
+import type { WithContext, SoftwareApplication, FAQPage, HowToThing } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { DaltonismSimulatorUI } from '../ui';
+
+const slug = 'color-blindness-simulator';
+const title = 'Color Blindness Simulator: Visualize Color Vision Deficiency';
+const description =
+  'Simulate how people with color blindness perceive color. Visualize protanopia, deuteranopia, tritanopia and more with your own image or the included sample palette.';
+
+const faqData = [
+  {
+    question: 'What is color blindness?',
+    answer:
+      'Color blindness is a deficiency in color perception caused by the absence or dysfunction of one or more types of cone cells in the retina. Cones are photoreceptor cells responsible for detecting specific wavelengths of light. The most common form affects the ability to distinguish between red and green.',
+  },
+  {
+    question: 'How many people are color blind?',
+    answer:
+      'Approximately 8% of men and 0.5% of women of European descent have some form of color vision deficiency. Globally, this affects around 300 million people worldwide.',
+  },
+  {
+    question: 'What is the difference between protanopia and deuteranopia?',
+    answer:
+      'Protanopia involves the complete absence of L cones (red-sensitive), so red tones appear dark or black. Deuteranopia involves the absence of M cones (green-sensitive), causing reds and greens to be indistinguishable, although they do not necessarily appear dark.',
+  },
+  {
+    question: 'Is there a cure for color blindness?',
+    answer:
+      'There is no established medical cure. However, glasses and contact lenses with special filters can help some people distinguish certain colors better. Digital applications and accessible design are the best support tools currently available.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Select the type of color blindness',
+    text: 'Click one of the type buttons: Normal, Protanopia, Deuteranopia, Tritanopia, Protanomaly, Deuteranomaly or Achromatopsia.',
+  },
+  {
+    name: 'Observe the color sample',
+    text: 'The tool automatically shows a reference color palette alongside the simulation of the selected type.',
+  },
+  {
+    name: 'Upload your own image',
+    text: 'Click "Upload image" or drag an image file to simulate how people with each type of color blindness would perceive it.',
+  },
+  {
+    name: 'Compare original and simulated',
+    text: 'The split view shows the original image on the left and the simulation on the right for direct comparison.',
+  },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowToThing> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howToData.map((step, i) => ({
+    '@type': 'HowToStep',
+    position: i + 1,
+    name: step.name,
+    text: step.text,
+  })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'HealthApplication',
+  operatingSystem: 'Web',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+};
+
+export const content: ToolLocaleContent<DaltonismSimulatorUI> = {
+  slug,
+  title,
+  description,
+  faqTitle: 'Frequently asked questions about color blindness',
+  faq: faqData,
+  bibliographyTitle: 'Scientific references',
+  bibliography: [
+    {
+      name: 'Machado GM, Oliveira MM, Fernandes LAF (2009). A Physiologically-based Model for Simulation of Color Vision Deficiency',
+      url: 'https://doi.org/10.1109/TVCG.2009.113',
+    },
+    {
+      name: 'Brettel H, Vienot F, Mollon JD (1997). Computerized simulation of color appearance for dichromats',
+      url: 'https://doi.org/10.1364/JOSAA.14.002647',
+    },
+    {
+      name: 'Color Blind Awareness — Global statistics on color vision deficiency',
+      url: 'https://www.colourblindawareness.org/colour-blindness/',
+    },
+    {
+      name: 'WCAG 2.1 — Success Criterion 1.4.3: Contrast (Minimum)',
+      url: 'https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  ui: {
+    labelOriginal: 'Original',
+    labelSimulated: 'Simulated',
+    btnUpload: 'Upload image',
+    orDrag: 'or drag here',
+    typeNormal: 'Normal',
+    typeProtanopia: 'Protanopia',
+    typeDeuteranopia: 'Deuteranopia',
+    typeTritanopia: 'Tritanopia',
+    typeProtanomaly: 'Protanomaly',
+    typeDeuteranomaly: 'Deuteranomaly',
+    typeAchromatopsia: 'Achromatopsia',
+    descNormal: 'Normal color vision. Full perception of the visible spectrum.',
+    descProtanopia: 'Absent L (red) cones. Red tones appear dark or black.',
+    descDeuteranopia: 'Absent M (green) cones. Reds and greens are indistinguishable.',
+    descTritanopia: 'Absent S (blue) cones. Blues appear greenish or pinkish.',
+    descProtanomaly: 'Deficient L cones. Reds are less saturated and harder to distinguish.',
+    descDeuteranomaly: 'Deficient M cones. Most common type, affects ~6% of men.',
+    descAchromatopsia: 'Total absence of color perception. Only shades of grey are perceived.',
+  },
+  seo: [
+    {
+      type: 'summary',
+      title: 'Color Blindness Simulator Online',
+      items: [
+        '<strong>7 types simulated</strong>: Normal, Protanopia, Deuteranopia, Tritanopia, Protanomaly, Deuteranomaly and Achromatopsia.',
+        '<strong>Custom image</strong>: Upload your own photo or use the included color sample palette.',
+        '<strong>Split view</strong>: Original vs. simulated side by side in real time.',
+        '<strong>No data sent</strong>: All processing happens in your browser, no servers involved.',
+      ],
+    },
+    { type: 'title', text: 'What is color blindness and how does it affect vision?', level: 2 },
+    {
+      type: 'paragraph',
+      html: '<strong>Color blindness</strong>, also called <strong>color vision deficiency</strong> or <strong>dyschromatopsia</strong>, is a condition that affects the ability to perceive certain colors correctly. It was first described by the English chemist <strong>John Dalton</strong> in 1798, who observed that he and his brother could not distinguish certain colors, especially reds and greens.',
+    },
+    {
+      type: 'paragraph',
+      html: 'The condition is caused by alterations in the <strong>cone cells of the retina</strong>, the photoreceptor cells responsible for capturing different wavelengths of light. The human eye has three types of cones: L cones (red-sensitive, ~570 nm), M cones (green-sensitive, ~530 nm) and S cones (blue-sensitive, ~420 nm). When one or more types are absent or function deficiently, color perception is altered.',
+    },
+    { type: 'title', text: 'The 7 types of color vision deficiency', level: 2 },
+    {
+      type: 'table',
+      headers: ['Type', 'Affected Cone', 'Prevalence (men)', 'Main Effect'],
+      rows: [
+        ['Protanopia', 'L (red) absent', '1.01%', 'Darkened reds, red-green confusion'],
+        ['Protanomaly', 'L (red) deficient', '1.08%', 'Less saturated reds'],
+        ['Deuteranopia', 'M (green) absent', '1.27%', 'Red-green confusion without darkening'],
+        ['Deuteranomaly', 'M (green) deficient', '4.63%', 'Most common type, altered greens'],
+        ['Tritanopia', 'S (blue) absent', '<0.01%', 'Blue-green and yellow-red confusion'],
+        ['Tritanomaly', 'S (blue) deficient', '<0.01%', 'Altered blues and yellows'],
+        ['Achromatopsia', 'All cones', '0.003%', 'Greyscale perception only'],
+      ],
+    },
+    { type: 'title', text: 'How the color blindness simulation works', level: 2 },
+    {
+      type: 'paragraph',
+      html: 'This simulator applies <strong>color transformation matrices</strong> to the pixels of the image. Each pixel has RGB (red, green, blue) values that are mathematically transformed to simulate how a person with each type of deficiency would perceive them. The matrices used are based on research by Machado, Oliveira and Fernandes (2009) and the model by Brettel, Viénot and Mollon (1997), both widely validated in the scientific community.',
+    },
+    { type: 'title', text: 'Color blindness and accessible design', level: 2 },
+    {
+      type: 'list',
+      items: [
+        '<strong>Never use color alone to convey information:</strong> Add icons, patterns or explanatory text alongside any color coding.',
+        '<strong>Ensure sufficient contrast:</strong> WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text.',
+        '<strong>Avoid red-green combinations:</strong> These are the most problematic for the majority of color blind people. Opt for blue-orange or blue-red instead.',
+        '<strong>Use simulation tools in your workflow:</strong> Integrate color blindness simulators into your design reviews to catch issues before publishing.',
+        '<strong>Test charts and maps:</strong> These visual elements are especially prone to accessibility issues due to their reliance on color.',
+      ],
+    },
+    {
+      type: 'tip',
+      title: 'Tool for designers and developers',
+      html: 'This simulator is especially useful for <strong>checking the accessibility</strong> of designs, UI screenshots, data charts or educational materials. Upload your design and check how users with protanopia or deuteranopia perceive it before publishing.',
+    },
+  ],
+};