@jjlmoya/utils-health 1.1.0

package/src/tool/waterPurifier/bibliography.astro

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

package/src/tool/waterPurifier/component.astro

@@ -0,0 +1,628 @@
+---
+import { Icon } from 'astro-icon/components';
+import type { WaterPurifierUI } from './ui';
+
+interface Props {
+  ui?: Record<string, unknown>;
+}
+
+const ui = (Astro.props.ui ?? {}) as WaterPurifierUI;
+---
+
+<section class="wp" id="wp-container" data-ui={JSON.stringify(ui)}>
+
+  <div class="wp__modal" id="wp-modal">
+    <div class="wp__modal-box">
+      <div class="wp__modal-icon-wrap">
+        <Icon name="mdi:alert-octagon" class="wp__modal-icon" />
+      </div>
+      <h3 class="wp__modal-title">{ui.disclaimerTitle}</h3>
+      <p class="wp__modal-body">
+        {ui.disclaimerText1} <strong class="wp__modal-highlight">{ui.disclaimerHighlight}</strong>.
+        <br /><br />
+        {ui.disclaimerText2}
+      </p>
+      <button class="wp__modal-btn" id="wp-accept-btn">
+        {ui.disclaimerBtn}
+      </button>
+    </div>
+  </div>
+
+  <div class="wp__grid">
+
+    <div class="wp__card wp__card--params">
+      <div class="wp__card-header">
+        <div class="wp__card-icon-wrap">
+          <Icon name="mdi:water-plus" class="wp__card-icon" />
+        </div>
+        <h2 class="wp__card-title">{ui.paramsSectionTitle}</h2>
+      </div>
+
+      <div class="wp__params">
+        <div class="wp__field">
+          <span class="wp__field-label">{ui.conditionLabel}</span>
+          <div class="wp__condition-grid">
+            <label class="wp__condition-option">
+              <input type="radio" name="wp-condition" value="clear" checked class="wp__condition-radio" />
+              <div class="wp__condition-card">
+                <Icon name="mdi:water" class="wp__condition-icon" />
+                <span class="wp__condition-label">{ui.conditionClear}</span>
+              </div>
+            </label>
+            <label class="wp__condition-option">
+              <input type="radio" name="wp-condition" value="cloudy" class="wp__condition-radio" />
+              <div class="wp__condition-card">
+                <Icon name="mdi:weather-cloudy" class="wp__condition-icon" />
+                <span class="wp__condition-label">{ui.conditionCloudy}</span>
+              </div>
+            </label>
+          </div>
+        </div>
+
+        <div class="wp__field">
+          <label for="wp-liters" class="wp__field-label">{ui.litersLabel}</label>
+          <div class="wp__input-wrap">
+            <input
+              type="number"
+              id="wp-liters"
+              value="1"
+              min="0.1"
+              step="0.1"
+              class="wp__input"
+            />
+            <span class="wp__input-unit">L</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="wp__card wp__card--result">
+      <div class="wp__drop-area">
+        <div class="wp__dropper-wrap">
+          <Icon name="mdi:eyedropper" class="wp__dropper-icon" />
+        </div>
+        <div class="wp__drop" id="wp-drop"></div>
+        <div class="wp__drop-surface"></div>
+      </div>
+
+      <div class="wp__result">
+        <p class="wp__result-label">{ui.resultLabel}</p>
+        <div class="wp__result-amount">
+          <span class="wp__result-number" id="wp-result-drops">2</span>
+          <span class="wp__result-unit">{ui.resultUnit}</span>
+        </div>
+        <p class="wp__result-ml" id="wp-result-ml">~ 0.10 ml</p>
+
+        <div class="wp__wait-box">
+          <div class="wp__wait-header">
+            <Icon name="mdi:clock-outline" class="wp__wait-icon" />
+            <span class="wp__wait-title">{ui.waitTitle}</span>
+          </div>
+          <p class="wp__wait-text">
+            {ui.waitBefore} <strong class="wp__wait-duration">{ui.waitDuration}</strong> {ui.waitAfter}
+          </p>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</section>
+
+<script>
+  const DROPS_PER_ML = 20;
+  const BL_CLEAR = 2;
+  const BL_CLOUDY = 4;
+
+  const container = document.getElementById('wp-container');
+  const modal = document.getElementById('wp-modal');
+  const acceptBtn = document.getElementById('wp-accept-btn');
+  const litersInput = container?.querySelector<HTMLInputElement>('#wp-liters');
+  const resultDrops = container?.querySelector<HTMLElement>('#wp-result-drops');
+  const resultMl = container?.querySelector<HTMLElement>('#wp-result-ml');
+  const dropEl = container?.querySelector<HTMLElement>('#wp-drop');
+
+  function initModal() {
+    if (!modal) return;
+    if (localStorage.getItem('water-purifier-accepted')) {
+      modal.classList.add('wp__modal--hidden');
+    }
+  }
+
+  function handleAccept() {
+    const el = modal;
+    if (!el) return;
+    el.style.opacity = '0';
+    setTimeout(() => el.classList.add('wp__modal--hidden'), 300);
+    localStorage.setItem('water-purifier-accepted', 'true');
+  }
+
+  function getConditionFactor(): number {
+    const radios = container?.querySelectorAll<HTMLInputElement>('input[name="wp-condition"]');
+    if (!radios) return BL_CLEAR;
+    for (const radio of radios) {
+      if (radio.checked && radio.value === 'cloudy') return BL_CLOUDY;
+    }
+    return BL_CLEAR;
+  }
+
+  function triggerDropAnimation() {
+    if (!dropEl) return;
+    dropEl.classList.remove('wp__drop--animating');
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        dropEl.classList.add('wp__drop--animating');
+      });
+    });
+  }
+
+  function calculate() {
+    if (!litersInput || !resultDrops || !resultMl) return;
+    const liters = parseFloat(litersInput.value) || 0;
+    const factor = getConditionFactor();
+    const drops = Math.ceil(liters * factor);
+    const ml = drops / DROPS_PER_ML;
+    resultDrops.textContent = drops.toString();
+    resultMl.textContent = `~ ${ml.toFixed(2)} ml`;
+    triggerDropAnimation();
+  }
+
+  initModal();
+  acceptBtn?.addEventListener('click', handleAccept);
+  litersInput?.addEventListener('input', calculate);
+  container?.querySelectorAll<HTMLInputElement>('input[name="wp-condition"]').forEach((radio) => {
+    radio.addEventListener('change', calculate);
+  });
+  calculate();
+</script>
+
+<style>
+  .wp {
+    --wp-primary: #0891b2;
+    --wp-primary-dark: #0e7490;
+    --wp-primary-light: #ecfeff;
+    --wp-selected-bg: rgba(8, 145, 178, 0.08);
+    --wp-card-bg: #fff;
+    --wp-border: #e5e7eb;
+    --wp-text: #111827;
+    --wp-text-muted: #6b7280;
+    --wp-input-bg: #f9fafb;
+    --wp-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
+
+    max-width: 56rem;
+    margin: 0 auto;
+    padding: 0 1rem;
+    position: relative;
+  }
+
+  :global(.theme-dark) .wp {
+    --wp-card-bg: #1f2937;
+    --wp-border: #374151;
+    --wp-text: #f9fafb;
+    --wp-text-muted: #9ca3af;
+    --wp-input-bg: #111827;
+    --wp-primary-light: rgba(8, 145, 178, 0.15);
+    --wp-selected-bg: rgba(8, 145, 178, 0.18);
+    --wp-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
+  }
+
+  
+  .wp__modal {
+    position: fixed;
+    inset: 0;
+    z-index: 50;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1rem;
+    background: rgba(0, 0, 0, 0.82);
+    backdrop-filter: blur(4px);
+    transition: opacity 0.3s;
+  }
+
+  .wp__modal--hidden {
+    display: none;
+  }
+
+  .wp__modal-box {
+    background: var(--wp-card-bg);
+    border-radius: 1.25rem;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+    max-width: 28rem;
+    width: 100%;
+    padding: 2rem;
+    border: 1px solid rgba(239, 68, 68, 0.2);
+  }
+
+  .wp__modal-icon-wrap {
+    width: 4rem;
+    height: 4rem;
+    background: rgba(239, 68, 68, 0.1);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto 1.5rem;
+    color: #dc2626;
+  }
+
+  .wp__modal-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+
+  .wp__modal-title {
+    font-size: 1.35rem;
+    font-weight: 800;
+    text-align: center;
+    color: var(--wp-text);
+    margin: 0 0 1rem;
+  }
+
+  .wp__modal-body {
+    color: var(--wp-text-muted);
+    text-align: center;
+    line-height: 1.7;
+    margin: 0 0 2rem;
+    font-size: 0.9rem;
+  }
+
+  .wp__modal-highlight {
+    color: var(--wp-text);
+    font-weight: 700;
+  }
+
+  .wp__modal-btn {
+    width: 100%;
+    padding: 0.875rem 1.5rem;
+    background: #dc2626;
+    color: #fff;
+    font-weight: 700;
+    font-size: 1rem;
+    border: none;
+    border-radius: 0.75rem;
+    cursor: pointer;
+    transition: background 0.2s, transform 0.1s;
+    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
+  }
+
+  .wp__modal-btn:hover {
+    background: #b91c1c;
+    transform: scale(1.02);
+  }
+
+  .wp__modal-btn:active {
+    transform: scale(0.98);
+  }
+
+  
+  .wp__grid {
+    display: grid;
+    gap: 2rem;
+    margin-bottom: 3rem;
+  }
+
+  @media (min-width: 768px) {
+    .wp__grid {
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+
+  
+  .wp__card {
+    background: var(--wp-card-bg);
+    border-radius: 1.25rem;
+    box-shadow: var(--wp-shadow);
+    border: 1px solid var(--wp-border);
+    overflow: hidden;
+  }
+
+  .wp__card--params {
+    padding: 1.5rem 1.75rem;
+  }
+
+  .wp__card--result {
+    background: var(--wp-primary);
+    border: none;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+    color: #fff;
+    position: relative;
+  }
+
+  
+  .wp__card-header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 2rem;
+  }
+
+  .wp__card-icon-wrap {
+    width: 2.5rem;
+    height: 2.5rem;
+    background: var(--wp-primary-light);
+    border-radius: 0.625rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--wp-primary);
+    flex-shrink: 0;
+  }
+
+  .wp__card-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  .wp__card-title {
+    font-size: 1.1rem;
+    font-weight: 700;
+    color: var(--wp-text);
+    margin: 0;
+  }
+
+  
+  .wp__params {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+  }
+
+  .wp__field-label {
+    display: block;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--wp-text);
+    margin-bottom: 0.75rem;
+  }
+
+  
+  .wp__condition-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.75rem;
+  }
+
+  .wp__condition-option {
+    cursor: pointer;
+    display: block;
+  }
+
+  .wp__condition-radio {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  .wp__condition-card {
+    padding: 1rem;
+    border-radius: 0.75rem;
+    border: 2px solid var(--wp-border);
+    background: var(--wp-input-bg);
+    text-align: center;
+    transition: border-color 0.2s, background 0.2s;
+  }
+
+  .wp__condition-icon {
+    width: 2rem;
+    height: 2rem;
+    display: block;
+    margin: 0 auto 0.5rem;
+    color: var(--wp-text-muted);
+    transition: color 0.2s;
+  }
+
+  .wp__condition-label {
+    display: block;
+    font-size: 0.8rem;
+    font-weight: 500;
+    color: var(--wp-text-muted);
+    transition: color 0.2s;
+  }
+
+  .wp__condition-radio:checked ~ .wp__condition-card {
+    border-color: var(--wp-primary);
+    background: var(--wp-selected-bg);
+  }
+
+  .wp__condition-radio:checked ~ .wp__condition-card .wp__condition-icon {
+    color: var(--wp-primary);
+  }
+
+  .wp__condition-radio:checked ~ .wp__condition-card .wp__condition-label {
+    color: var(--wp-primary-dark);
+    font-weight: 600;
+  }
+
+  
+  .wp__input-wrap {
+    position: relative;
+  }
+
+  .wp__input {
+    display: block;
+    width: 100%;
+    border-radius: 0.75rem;
+    border: 2px solid var(--wp-border);
+    background: var(--wp-input-bg);
+    padding: 1rem 3rem 1rem 1rem;
+    font-size: 1.125rem;
+    font-weight: 700;
+    color: var(--wp-text);
+    transition: border-color 0.2s;
+    box-sizing: border-box;
+  }
+
+  .wp__input:focus {
+    outline: none;
+    border-color: var(--wp-primary);
+  }
+
+  .wp__input-unit {
+    position: absolute;
+    right: 1rem;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--wp-text-muted);
+    font-weight: 500;
+    pointer-events: none;
+  }
+
+  
+  .wp__drop-area {
+    position: relative;
+    width: 6rem;
+    height: 10rem;
+    margin-bottom: 2rem;
+  }
+
+  .wp__dropper-wrap {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%) rotate(180deg);
+    width: 2rem;
+    height: 5rem;
+    color: rgba(255, 255, 255, 0.9);
+  }
+
+  .wp__dropper-icon {
+    width: 100%;
+    height: 100%;
+  }
+
+  .wp__drop {
+    position: absolute;
+    top: 4rem;
+    left: 50%;
+    transform: translateX(-50%) rotate(-45deg) scale(0);
+    width: 1rem;
+    height: 1rem;
+    background: #fff;
+    border-radius: 50% 50% 50% 0;
+    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
+    opacity: 0;
+  }
+
+  .wp__drop-surface {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 0.5rem;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 50%;
+    filter: blur(2px);
+  }
+
+  @keyframes wp-drop {
+    0% {
+      top: 4rem;
+      opacity: 1;
+      transform: translateX(-50%) rotate(-45deg) scale(0.5);
+    }
+    60% {
+      top: 8rem;
+      opacity: 1;
+      transform: translateX(-50%) rotate(-45deg) scale(1);
+    }
+    90% {
+      top: 9rem;
+      opacity: 0;
+      transform: translateX(-50%) rotate(-45deg) scale(0.2);
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+
+  .wp__drop--animating {
+    animation: wp-drop 1.5s infinite ease-in;
+  }
+
+  
+  .wp__result {
+    text-align: center;
+    position: relative;
+    z-index: 1;
+  }
+
+  .wp__result-label {
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: rgba(255, 255, 255, 0.8);
+    margin: 0 0 0.5rem;
+  }
+
+  .wp__result-amount {
+    display: flex;
+    align-items: baseline;
+    justify-content: center;
+    gap: 0.5rem;
+    margin-bottom: 0.25rem;
+  }
+
+  .wp__result-number {
+    font-size: 4rem;
+    font-weight: 900;
+    line-height: 1;
+    letter-spacing: -0.04em;
+    color: #fff;
+  }
+
+  .wp__result-unit {
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.8);
+  }
+
+  .wp__result-ml {
+    font-size: 0.85rem;
+    color: rgba(255, 255, 255, 0.7);
+    margin: 0 0 1.5rem;
+  }
+
+  
+  .wp__wait-box {
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 0.625rem;
+    padding: 1rem 1.25rem;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    backdrop-filter: blur(4px);
+  }
+
+  .wp__wait-header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    font-weight: 700;
+    margin-bottom: 0.25rem;
+  }
+
+  .wp__wait-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .wp__wait-title {
+    font-size: 0.875rem;
+  }
+
+  .wp__wait-text {
+    margin: 0;
+    color: rgba(255, 255, 255, 0.9);
+    text-align: center;
+  }
+
+  .wp__wait-duration {
+    color: #fff;
+    font-weight: 800;
+  }
+</style>