@jjlmoya/utils-health 1.1.0

package/src/tool/readingDistanceCalculator/component.astro

@@ -0,0 +1,588 @@
+---
+import { Icon } from 'astro-icon/components';
+import type { KnownLocale } from '../../types';
+import type { ReadingDistanceCalculatorUI } from './ui';
+
+interface Props {
+  locale?: KnownLocale;
+  ui?: Record<string, unknown>;
+}
+
+const ui = (Astro.props.ui ?? {}) as ReadingDistanceCalculatorUI;
+---
+
+<div class="rdc" data-ui={JSON.stringify(ui)}>
+  <div class="rdc__card">
+
+    
+    <div class="rdc__section rdc__section--banner">
+      <div class="rdc__banner">
+        <span class="rdc__banner-icon"><Icon name="mdi:eye-refresh" /></span>
+        <p class="rdc__banner-text" data-key="bannerText">{ui.bannerText}</p>
+      </div>
+    </div>
+
+    
+    <div class="rdc__section rdc__section--bordered">
+      <div class="rdc__preview-controls">
+        <button id="rdc-dec" class="rdc__btn-circle" aria-label="Decrease font size">
+          <Icon name="mdi:minus" />
+        </button>
+        <div class="rdc__zoom-indicator">
+          <small class="rdc__zoom-label" data-key="zoomLabel">{ui.zoomLabel}</small>
+          <span class="rdc__zoom-value" id="rdc-font-display">16</span>
+        </div>
+        <button id="rdc-inc" class="rdc__btn-circle" aria-label="Increase font size">
+          <Icon name="mdi:plus" />
+        </button>
+      </div>
+
+      <div class="rdc__preview-box">
+        <p class="rdc__preview-text" id="rdc-preview" data-key="previewText">{ui.previewText}</p>
+      </div>
+
+      <div class="rdc__slider-wrap">
+        <input
+          type="range"
+          id="rdc-slider"
+          class="rdc__slider"
+          min="8"
+          max="60"
+          value="16"
+          step="1"
+        />
+      </div>
+    </div>
+
+    
+    <div class="rdc__section rdc__section--bordered rdc__section--result">
+      <div class="rdc__result-grid">
+        <div class="rdc__result-main">
+          <span class="rdc__result-label" data-key="resultLabel">{ui.resultLabel}</span>
+          <div class="rdc__result-value">
+            <span class="rdc__result-number" id="rdc-distance">45</span>
+            <span class="rdc__result-unit" data-key="resultUnit">{ui.resultUnit}</span>
+          </div>
+          <span class="rdc__result-footer" data-key="resultFooter">{ui.resultFooter}</span>
+        </div>
+
+        <div class="rdc__status" id="rdc-status" data-state="ideal">
+          <div class="rdc__status-icon" id="rdc-status-icon">
+            <Icon name="mdi:check-circle-outline" />
+          </div>
+          <div class="rdc__status-text">
+            <p class="rdc__status-main" id="rdc-status-text">{ui.statusIdeal}</p>
+            <small class="rdc__status-sub" id="rdc-status-sub">{ui.statusIdealDesc}</small>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    
+    <div class="rdc__section rdc__section--bordered rdc__section--concepts">
+      <div class="rdc__concepts-grid">
+        <div class="rdc__concept">
+          <h4 class="rdc__concept-title">
+            <span class="rdc__concept-icon"><Icon name="mdi:relation-many-to-many" /></span>
+            <span data-key="conceptTitle1">{ui.conceptTitle1}</span>
+          </h4>
+          <p class="rdc__concept-text" data-key="conceptText1">{ui.conceptText1}</p>
+        </div>
+        <div class="rdc__concept rdc__concept--highlight">
+          <h4 class="rdc__concept-title">
+            <span class="rdc__concept-icon"><Icon name="mdi:lightbulb-on-outline" /></span>
+            <span data-key="conceptTitle2">{ui.conceptTitle2}</span>
+          </h4>
+          <p class="rdc__concept-text" data-key="conceptText2">{ui.conceptText2}</p>
+        </div>
+      </div>
+    </div>
+
+  </div>
+
+  
+  <div class="rdc__icon-cache" aria-hidden="true">
+    <span id="rdc-icon-check"><Icon name="mdi:check-circle-outline" /></span>
+    <span id="rdc-icon-alert"><Icon name="mdi:alert-circle-outline" /></span>
+    <span id="rdc-icon-shield"><Icon name="mdi:shield-check-outline" /></span>
+  </div>
+</div>
+
+<style>
+  .rdc {
+    --rdc-primary: #3b82f6;
+    --rdc-secondary: #2563eb;
+    --rdc-accent: #6366f1;
+    --rdc-bg: #fff;
+    --rdc-border: rgba(59, 130, 246, 0.15);
+    --rdc-divider: rgba(59, 130, 246, 0.1);
+    --rdc-surface: #f8fafc;
+    --rdc-text: #1e293b;
+    --rdc-text-muted: #64748b;
+    --rdc-banner-bg: #eff6ff;
+    --rdc-banner-color: #1e40af;
+    --rdc-preview-bg: #fff;
+    --rdc-preview-border: #cbd5e1;
+    --rdc-concept-bg: #fff;
+    --rdc-concept-border: rgba(0,0,0,0.05);
+    --rdc-concept-highlight-bg: #f0fdf4;
+    --rdc-concept-highlight-border: #bbf7d0;
+    --rdc-concept-highlight-title: #166534;
+
+    width: 100%;
+    max-width: 640px;
+    margin: 0 auto;
+  }
+
+  :global(.theme-dark) .rdc {
+    --rdc-bg: #0f172a;
+    --rdc-border: rgba(99, 102, 241, 0.2);
+    --rdc-divider: rgba(99, 102, 241, 0.12);
+    --rdc-surface: #1e293b;
+    --rdc-text: #f1f5f9;
+    --rdc-text-muted: #94a3b8;
+    --rdc-banner-bg: rgba(30, 64, 175, 0.2);
+    --rdc-banner-color: #93c5fd;
+    --rdc-preview-bg: #020617;
+    --rdc-preview-border: #334155;
+    --rdc-concept-bg: #1e293b;
+    --rdc-concept-border: rgba(255,255,255,0.06);
+    --rdc-concept-highlight-bg: rgba(20, 83, 45, 0.2);
+    --rdc-concept-highlight-border: #166534;
+    --rdc-concept-highlight-title: #4ade80;
+  }
+
+  .rdc__card {
+    background: var(--rdc-bg);
+    border: 2px solid var(--rdc-border);
+    border-radius: 2rem;
+    box-shadow: 0 20px 60px rgba(59, 130, 246, 0.08);
+    overflow: hidden;
+  }
+
+  .rdc__section {
+    padding: 2rem;
+  }
+
+  .rdc__section--bordered {
+    border-top: 1px solid var(--rdc-divider);
+  }
+
+  
+  .rdc__banner {
+    background: var(--rdc-banner-bg);
+    border-radius: 1rem;
+    padding: 1rem 1.25rem;
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
+    color: var(--rdc-banner-color);
+  }
+
+  .rdc__banner-icon {
+    flex-shrink: 0;
+    width: 1.25rem;
+    height: 1.25rem;
+    margin-top: 0.1rem;
+  }
+
+  .rdc__banner-icon svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .rdc__banner-text {
+    margin: 0;
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1.5;
+  }
+
+  
+  .rdc__preview-controls {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 2rem;
+    margin-bottom: 1.25rem;
+  }
+
+  .rdc__btn-circle {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    border: none;
+    background: var(--rdc-surface);
+    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+    cursor: pointer;
+    color: var(--rdc-primary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.15s, box-shadow 0.15s;
+  }
+
+  .rdc__btn-circle svg {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  .rdc__btn-circle:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
+  }
+
+  .rdc__btn-circle:active {
+    transform: scale(0.94);
+  }
+
+  .rdc__zoom-indicator {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.1rem;
+  }
+
+  .rdc__zoom-label {
+    font-size: 0.7rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    color: var(--rdc-text-muted);
+    text-transform: uppercase;
+  }
+
+  .rdc__zoom-value {
+    font-size: 3rem;
+    font-weight: 900;
+    line-height: 1;
+    color: var(--rdc-text);
+  }
+
+  
+  .rdc__preview-box {
+    background: var(--rdc-preview-bg);
+    border: 1.5px dashed var(--rdc-preview-border);
+    border-radius: 1rem;
+    min-height: 6rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1rem;
+    margin-bottom: 1.25rem;
+  }
+
+  .rdc__preview-text {
+    margin: 0;
+    text-align: center;
+    line-height: 1.2;
+    color: var(--rdc-text);
+    transition: font-size 0.15s ease-out;
+  }
+
+  
+  .rdc__slider-wrap {
+    width: 100%;
+  }
+
+  .rdc__slider {
+    width: 100%;
+    height: 6px;
+    border-radius: 10px;
+    appearance: none;
+    background: linear-gradient(to right, var(--rdc-primary) 0%, var(--rdc-primary) 22%, #e2e8f0 22%);
+    cursor: pointer;
+    outline: none;
+  }
+
+  :global(.theme-dark) .rdc__slider {
+    background: linear-gradient(to right, var(--rdc-primary) 0%, var(--rdc-primary) 22%, #1e293b 22%);
+  }
+
+  .rdc__slider::-webkit-slider-thumb {
+    appearance: none;
+    width: 1.25rem;
+    height: 1.25rem;
+    background: var(--rdc-primary);
+    border-radius: 50%;
+    box-shadow: 0 0 0 4px var(--rdc-bg);
+    border: 1.5px solid rgba(0,0,0,0.08);
+    cursor: pointer;
+  }
+
+  
+  .rdc__section--result {
+    background: var(--rdc-surface);
+  }
+
+  .rdc__result-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .rdc__result-main {
+    background: linear-gradient(135deg, var(--rdc-primary) 0%, var(--rdc-accent) 100%);
+    border-radius: 1.25rem;
+    padding: 1.5rem;
+    color: #fff;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .rdc__result-label {
+    font-size: 0.7rem;
+    font-weight: 800;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    opacity: 0.9;
+  }
+
+  .rdc__result-value {
+    display: flex;
+    align-items: baseline;
+    gap: 0.25rem;
+  }
+
+  .rdc__result-number {
+    font-size: 5rem;
+    font-weight: 900;
+    line-height: 1;
+  }
+
+  .rdc__result-unit {
+    font-size: 1.5rem;
+    font-weight: 700;
+    opacity: 0.8;
+  }
+
+  .rdc__result-footer {
+    font-size: 0.7rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    opacity: 0.75;
+  }
+
+  
+  .rdc__status {
+    background: var(--rdc-concept-bg);
+    border: 1.5px solid var(--rdc-concept-border);
+    border-radius: 1rem;
+    padding: 1rem 1.25rem;
+    display: flex;
+    align-items: center;
+    gap: 0.875rem;
+    transition: background 0.3s, border-color 0.3s;
+  }
+
+  :global(.rdc__status[data-state="warning"]) .rdc__status-icon {
+    background: #fee2e2;
+    color: #991b1b;
+  }
+
+  :global(.rdc__status[data-state="ideal"]) .rdc__status-icon {
+    background: #dcfce7;
+    color: #166534;
+  }
+
+  :global(.rdc__status[data-state="safe"]) .rdc__status-icon {
+    background: #dbeafe;
+    color: #1e40af;
+  }
+
+  .rdc__status-icon {
+    width: 2.5rem;
+    height: 2.5rem;
+    flex-shrink: 0;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.3s, color 0.3s;
+  }
+
+  .rdc__status-icon svg {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  .rdc__status-main {
+    margin: 0;
+    font-size: 0.9rem;
+    font-weight: 700;
+    color: var(--rdc-text);
+  }
+
+  .rdc__status-sub {
+    font-size: 0.8rem;
+    color: var(--rdc-text-muted);
+  }
+
+  
+  .rdc__section--concepts {
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+  }
+
+  .rdc__concepts-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+
+  @media (min-width: 480px) {
+    .rdc__concepts-grid {
+      grid-template-columns: 1fr 1fr;
+    }
+
+    .rdc__result-grid {
+      flex-direction: row;
+      align-items: stretch;
+    }
+
+    .rdc__result-main {
+      flex: 1.4;
+    }
+
+    .rdc__status {
+      flex: 1;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: center;
+    }
+  }
+
+  .rdc__concept {
+    background: var(--rdc-concept-bg);
+    border: 1.5px solid var(--rdc-concept-border);
+    border-radius: 1rem;
+    padding: 1.25rem;
+  }
+
+  .rdc__concept--highlight {
+    background: var(--rdc-concept-highlight-bg);
+    border-color: var(--rdc-concept-highlight-border);
+  }
+
+  .rdc__concept-title {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin: 0 0 0.625rem;
+    font-size: 0.95rem;
+    font-weight: 800;
+    color: var(--rdc-text);
+  }
+
+  .rdc__concept--highlight .rdc__concept-title {
+    color: var(--rdc-concept-highlight-title);
+  }
+
+  .rdc__concept-icon {
+    width: 1.1rem;
+    height: 1.1rem;
+    display: flex;
+    align-items: center;
+  }
+
+  .rdc__concept-icon svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .rdc__concept-text {
+    margin: 0;
+    font-size: 0.875rem;
+    line-height: 1.6;
+    color: var(--rdc-text-muted);
+  }
+
+  
+  .rdc__icon-cache {
+    display: none;
+  }
+</style>
+
+<script>
+  // eslint-disable-next-line complexity, max-lines-per-function
+  function initRdc(container: Element) {
+    const ui = JSON.parse((container as HTMLElement).dataset.ui ?? '{}') as Record<string, string>;
+
+    const slider = container.querySelector<HTMLInputElement>('#rdc-slider');
+    const incBtn = container.querySelector<HTMLButtonElement>('#rdc-inc');
+    const decBtn = container.querySelector<HTMLButtonElement>('#rdc-dec');
+    const fontDisplay = container.querySelector<HTMLElement>('#rdc-font-display');
+    const preview = container.querySelector<HTMLElement>('#rdc-preview');
+    const distanceEl = container.querySelector<HTMLElement>('#rdc-distance');
+    const statusEl = container.querySelector<HTMLElement>('#rdc-status');
+    const statusIcon = container.querySelector<HTMLElement>('#rdc-status-icon');
+    const statusText = container.querySelector<HTMLElement>('#rdc-status-text');
+    const statusSub = container.querySelector<HTMLElement>('#rdc-status-sub');
+
+    const iconCheck = container.querySelector<HTMLElement>('#rdc-icon-check');
+    const iconAlert = container.querySelector<HTMLElement>('#rdc-icon-alert');
+    const iconShield = container.querySelector<HTMLElement>('#rdc-icon-shield');
+
+    if (!slider || !fontDisplay || !preview || !distanceEl || !statusEl || !statusIcon || !statusText || !statusSub) return;
+
+    function updateSliderTrack(px: number) {
+      if (!slider) return;
+      const pct = ((px - 8) / (60 - 8)) * 100;
+      slider.style.background = `linear-gradient(to right, var(--rdc-primary) 0%, var(--rdc-primary) ${pct}%, var(--rdc-preview-border) ${pct}%)`;
+    }
+
+    // eslint-disable-next-line complexity
+    function getStatus(px: number): { state: string; iconHtml: string; mainText: string; subText: string } {
+      const statuses: Record<string, { state: string; iconHtml: string; mainText: string; subText: string }> = {
+        warning: { state: 'warning', iconHtml: iconAlert?.innerHTML ?? '', mainText: ui.statusWarning ?? '', subText: ui.statusWarningDesc ?? '' },
+        safe: { state: 'safe', iconHtml: iconShield?.innerHTML ?? '', mainText: ui.statusSafe ?? '', subText: ui.statusSafeDesc ?? '' },
+        ideal: { state: 'ideal', iconHtml: iconCheck?.innerHTML ?? '', mainText: ui.statusIdeal ?? '', subText: ui.statusIdealDesc ?? '' },
+      };
+      let statusKey = 'ideal';
+      if (px < 14) statusKey = 'warning';
+      else if (px > 24) statusKey = 'safe';
+      return statuses[statusKey];
+    }
+
+    function update() {
+      const px = parseInt(slider!.value);
+
+      fontDisplay!.textContent = String(px);
+      preview!.style.fontSize = `${px}px`;
+      distanceEl!.textContent = String(Math.round(px * 2.8));
+
+      updateSliderTrack(px);
+
+      const status = getStatus(px);
+      statusEl!.setAttribute('data-state', status.state);
+      statusIcon!.innerHTML = status.iconHtml;
+      statusText!.textContent = status.mainText;
+      statusSub!.textContent = status.subText;
+    }
+
+    slider.addEventListener('input', update);
+
+    incBtn?.addEventListener('click', () => {
+      const v = parseInt(slider.value);
+      if (v < 60) {
+        slider.value = String(v + 1);
+        update();
+      }
+    });
+
+    decBtn?.addEventListener('click', () => {
+      const v = parseInt(slider.value);
+      if (v > 8) {
+        slider.value = String(v - 1);
+        update();
+      }
+    });
+
+    update();
+  }
+
+  document.querySelectorAll('.rdc').forEach(initRdc);
+</script>