@jjlmoya/utils-health 1.1.0

package/src/tool/hydrationCalculator/component.astro

@@ -0,0 +1,694 @@
+---
+import { Icon } from 'astro-icon/components';
+import type { HydrationCalculatorUI } from './ui';
+
+interface Props {
+  locale?: string;
+  ui?: Record<string, unknown>;
+}
+
+const ui = (Astro.props.ui ?? {}) as HydrationCalculatorUI;
+---
+
+<div class="hyd" data-ui={JSON.stringify(ui)}>
+  <div class="hyd__card">
+
+    
+    <div class="hyd__section hyd__section--main">
+      <div class="hyd__main-grid">
+
+        
+        <div class="hyd__controls">
+
+          
+          <div class="hyd__group">
+            <h4 class="hyd__group-title">
+              <span class="hyd__group-icon"><Icon name="mdi:weight-kilogram" /></span>
+              <span data-key="sectionWeight">{ui.sectionWeight}</span>
+            </h4>
+            <div class="hyd__field">
+              <label class="hyd__label" data-key="labelWeight">{ui.labelWeight}</label>
+              <input type="number" id="hyd-weight" class="hyd__input" value="70" min="20" max="250" />
+            </div>
+          </div>
+
+          
+          <div class="hyd__group">
+            <div class="hyd__group-header">
+              <h4 class="hyd__group-title">
+                <span class="hyd__group-icon"><Icon name="mdi:thermometer" /></span>
+                <span data-key="sectionClimate">{ui.sectionClimate}</span>
+              </h4>
+              <button id="hyd-weather" class="hyd__weather-btn" title={ui.weatherBtnTitle ?? ''}>
+                <div class="hyd__spinner"></div>
+                <span class="hyd__weather-icon"><Icon name="mdi:map-marker" /></span>
+              </button>
+            </div>
+            <div class="hyd__field-row">
+              <div class="hyd__field">
+                <label class="hyd__label" data-key="labelTemp">{ui.labelTemp}</label>
+                <input type="number" id="hyd-temp" class="hyd__input" value="22" min="-10" max="60" />
+              </div>
+              <div class="hyd__field">
+                <label class="hyd__label" data-key="labelHum">{ui.labelHum}</label>
+                <input type="number" id="hyd-hum" class="hyd__input" value="50" min="0" max="100" />
+              </div>
+            </div>
+          </div>
+
+          
+          <div class="hyd__group">
+            <h4 class="hyd__group-title">
+              <span class="hyd__group-icon"><Icon name="mdi:run-fast" /></span>
+              <span data-key="sectionActivity">{ui.sectionActivity}</span>
+            </h4>
+            <div class="hyd__intensity-grid">
+              <button class="hyd__intensity-btn hyd__intensity-btn--active" data-loss="0">
+                <span data-key="intensitySedentary">{ui.intensitySedentary}</span>
+              </button>
+              <button class="hyd__intensity-btn" data-loss="500">
+                <span data-key="intensityActive">{ui.intensityActive}</span>
+              </button>
+              <button class="hyd__intensity-btn" data-loss="1000">
+                <span data-key="intensityAthlete">{ui.intensityAthlete}</span>
+              </button>
+            </div>
+            <div class="hyd__field">
+              <label class="hyd__label" data-key="labelDuration">{ui.labelDuration}</label>
+              <input type="number" id="hyd-duration" class="hyd__input" value="0" min="0" max="1440" />
+            </div>
+          </div>
+
+        </div>
+
+        
+        <div class="hyd__visual">
+          <div class="hyd__bottle">
+            <div class="hyd__bottle-fill" id="hyd-fill">
+              <div class="hyd__wave"></div>
+            </div>
+          </div>
+          <div class="hyd__total">
+            <span class="hyd__total-value" id="hyd-liters">2.50</span>
+            <span class="hyd__total-unit" data-key="resultUnit">{ui.resultUnit}</span>
+          </div>
+        </div>
+
+      </div>
+    </div>
+
+    
+    <div class="hyd__section hyd__section--bordered hyd__section--stats">
+      <div class="hyd__stats-grid">
+
+        <div class="hyd__stat">
+          <span class="hyd__stat-label" data-key="statRefill">{ui.statRefill}</span>
+          <span class="hyd__stat-value" id="hyd-refill">—</span>
+          <p class="hyd__stat-help" data-key="statRefillHelp">{ui.statRefillHelp}</p>
+        </div>
+
+        <div class="hyd__stat">
+          <span class="hyd__stat-label" data-key="statMix">{ui.statMix}</span>
+          <span class="hyd__stat-value" id="hyd-mix">—</span>
+          <p class="hyd__stat-help" id="hyd-mix-detail"></p>
+        </div>
+
+        <div class="hyd__stat">
+          <span class="hyd__stat-label" data-key="statUrine">{ui.statUrine}</span>
+          <div class="hyd__urine-track">
+            <div class="hyd__urine-seg hyd__urine-seg--1"></div>
+            <div class="hyd__urine-seg hyd__urine-seg--2"></div>
+            <div class="hyd__urine-seg hyd__urine-seg--3"></div>
+            <div class="hyd__urine-seg hyd__urine-seg--4"></div>
+            <div class="hyd__urine-seg hyd__urine-seg--5"></div>
+            <div class="hyd__urine-seg hyd__urine-seg--6"></div>
+            <div class="hyd__urine-seg hyd__urine-seg--7"></div>
+          </div>
+          <div class="hyd__urine-icons">
+            <span class="hyd__urine-good"><Icon name="mdi:check-circle" /></span>
+            <span class="hyd__urine-bad"><Icon name="mdi:close-circle" /></span>
+          </div>
+        </div>
+
+      </div>
+    </div>
+
+    
+    <div class="hyd__section hyd__section--bordered hyd__section--alert" id="hyd-alert" hidden>
+      <div class="hyd__alert">
+        <span class="hyd__alert-icon"><Icon name="mdi:alert-circle" /></span>
+        <span class="hyd__alert-text" data-key="alertElectrolytes">{ui.alertElectrolytes}</span>
+      </div>
+    </div>
+
+  </div>
+</div>
+
+<style>
+  .hyd {
+    --hyd-primary: #0ea5e9;
+    --hyd-primary-dark: #0284c7;
+    --hyd-primary-light: #e0f2fe;
+    --hyd-bg: #fff;
+    --hyd-border: rgba(14, 165, 233, 0.15);
+    --hyd-divider: rgba(14, 165, 233, 0.1);
+    --hyd-surface: #f8fafc;
+    --hyd-text: #1e293b;
+    --hyd-text-muted: #64748b;
+    --hyd-input-bg: #f8fafc;
+    --hyd-input-border: #e2e8f0;
+    --hyd-visual-bg: #f0f9ff;
+    --hyd-visual-border: #e0f2fe;
+    --hyd-alert-bg: #fff1f2;
+    --hyd-alert-color: #e11d48;
+    --hyd-alert-border: #ffe4e6;
+
+    width: 100%;
+    max-width: 720px;
+    margin: 0 auto;
+  }
+
+  :global(.theme-dark) .hyd {
+    --hyd-bg: #0f172a;
+    --hyd-border: rgba(14, 165, 233, 0.2);
+    --hyd-divider: rgba(14, 165, 233, 0.12);
+    --hyd-surface: #1e293b;
+    --hyd-text: #f1f5f9;
+    --hyd-text-muted: #94a3b8;
+    --hyd-input-bg: #1e293b;
+    --hyd-input-border: #334155;
+    --hyd-visual-bg: rgba(14, 165, 233, 0.06);
+    --hyd-visual-border: rgba(14, 165, 233, 0.15);
+    --hyd-alert-bg: rgba(225, 29, 72, 0.12);
+    --hyd-alert-color: #fb7185;
+    --hyd-alert-border: rgba(225, 29, 72, 0.2);
+  }
+
+  .hyd__card {
+    background: var(--hyd-bg);
+    border: 2px solid var(--hyd-border);
+    border-radius: 2rem;
+    box-shadow: 0 20px 60px rgba(14, 165, 233, 0.08);
+    overflow: hidden;
+  }
+
+  .hyd__section {
+    padding: 2rem;
+  }
+
+  .hyd__section--bordered {
+    border-top: 1px solid var(--hyd-divider);
+  }
+
+  
+  .hyd__main-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+  }
+
+  @media (min-width: 560px) {
+    .hyd__main-grid {
+      grid-template-columns: 1fr auto;
+      gap: 2rem;
+      align-items: start;
+    }
+  }
+
+  
+  .hyd__controls {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  .hyd__group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .hyd__group-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .hyd__group-title {
+    margin: 0;
+    font-size: 0.7rem;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--hyd-text-muted);
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+  }
+
+  .hyd__group-icon {
+    width: 1rem;
+    height: 1rem;
+    display: flex;
+    align-items: center;
+  }
+
+  .hyd__group-icon svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .hyd__weather-btn {
+    background: var(--hyd-primary-light);
+    color: var(--hyd-primary);
+    border: none;
+    width: 2rem;
+    height: 2rem;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.2s, color 0.2s;
+    flex-shrink: 0;
+  }
+
+  :global(.theme-dark) .hyd__weather-btn {
+    background: rgba(14, 165, 233, 0.15);
+  }
+
+  .hyd__weather-btn:hover {
+    background: var(--hyd-primary);
+    color: #fff;
+  }
+
+  .hyd__weather-icon svg,
+  .hyd__weather-btn svg {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .hyd__spinner {
+    width: 1rem;
+    height: 1rem;
+    border: 2px solid rgba(14, 165, 233, 0.25);
+    border-top-color: var(--hyd-primary);
+    border-radius: 50%;
+    animation: hyd-spin 0.8s linear infinite;
+    display: none;
+  }
+
+  :global(.hyd__weather-btn[data-loading="true"]) .hyd__spinner { display: block; }
+  :global(.hyd__weather-btn[data-loading="true"]) .hyd__weather-icon { display: none; }
+
+  @keyframes hyd-spin {
+    to { transform: rotate(360deg); }
+  }
+
+  .hyd__field-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.75rem;
+  }
+
+  .hyd__field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+  }
+
+  .hyd__label {
+    font-size: 0.7rem;
+    font-weight: 600;
+    color: var(--hyd-text-muted);
+  }
+
+  .hyd__input {
+    background: var(--hyd-input-bg);
+    border: 1.5px solid var(--hyd-input-border);
+    border-radius: 0.75rem;
+    padding: 0.65rem 0.75rem;
+    font-size: 1rem;
+    font-weight: 700;
+    color: var(--hyd-text);
+    width: 100%;
+    box-sizing: border-box;
+    outline: none;
+    transition: border-color 0.2s, box-shadow 0.2s;
+  }
+
+  .hyd__input:focus {
+    border-color: var(--hyd-primary);
+    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12);
+  }
+
+  
+  .hyd__intensity-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 0.5rem;
+  }
+
+  .hyd__intensity-btn {
+    background: var(--hyd-input-bg);
+    border: 1.5px solid var(--hyd-input-border);
+    border-radius: 0.75rem;
+    padding: 0.6rem 0.25rem;
+    font-size: 0.75rem;
+    font-weight: 700;
+    color: var(--hyd-text-muted);
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+
+  .hyd__intensity-btn:hover {
+    border-color: var(--hyd-primary);
+    color: var(--hyd-primary);
+  }
+
+  .hyd__intensity-btn--active {
+    background: var(--hyd-primary);
+    color: #fff;
+    border-color: var(--hyd-primary);
+    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.25);
+  }
+
+  
+  .hyd__visual {
+    background: var(--hyd-visual-bg);
+    border: 1.5px solid var(--hyd-visual-border);
+    border-radius: 1.5rem;
+    padding: 2rem 1.5rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.5rem;
+  }
+
+  @media (min-width: 560px) {
+    .hyd__visual {
+      min-width: 160px;
+    }
+  }
+
+  .hyd__bottle {
+    width: 80px;
+    height: 200px;
+    background: #fff;
+    border: 6px solid #fff;
+    border-radius: 20px 20px 40px 40px;
+    overflow: hidden;
+    position: relative;
+    box-shadow: 0 8px 24px rgba(14, 165, 233, 0.1), inset 0 0 12px rgba(0,0,0,0.02);
+  }
+
+  :global(.theme-dark) .hyd__bottle {
+    background: #1e293b;
+    border-color: #334155;
+  }
+
+  .hyd__bottle-fill {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    background: linear-gradient(to top, var(--hyd-primary), #38bdf8);
+    transition: height 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
+    height: 42%;
+  }
+
+  .hyd__wave {
+    position: absolute;
+    width: 300%;
+    height: 300%;
+    background: rgba(255,255,255,0.3);
+    top: -285%;
+    left: -100%;
+    border-radius: 42%;
+    animation: hyd-wave 10s linear infinite;
+    pointer-events: none;
+  }
+
+  .hyd__wave::before {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: rgba(255,255,255,0.2);
+    border-radius: 40%;
+    animation: hyd-wave 14s linear infinite reverse;
+  }
+
+  @keyframes hyd-wave {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+
+  .hyd__total {
+    text-align: center;
+  }
+
+  .hyd__total-value {
+    display: block;
+    font-size: 3.5rem;
+    font-weight: 900;
+    line-height: 1;
+    color: var(--hyd-primary);
+  }
+
+  .hyd__total-unit {
+    display: block;
+    font-size: 0.65rem;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--hyd-text-muted);
+    margin-top: 0.25rem;
+  }
+
+  
+  .hyd__stats-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+
+  @media (min-width: 560px) {
+    .hyd__stats-grid {
+      grid-template-columns: repeat(3, 1fr);
+    }
+  }
+
+  .hyd__stat {
+    background: var(--hyd-surface);
+    border: 1.5px solid var(--hyd-divider);
+    border-radius: 1rem;
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .hyd__stat-label {
+    font-size: 0.65rem;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--hyd-text-muted);
+    margin-bottom: 0.4rem;
+  }
+
+  .hyd__stat-value {
+    font-size: 0.95rem;
+    font-weight: 800;
+    color: var(--hyd-text);
+  }
+
+  .hyd__stat-help {
+    font-size: 0.7rem;
+    color: var(--hyd-text-muted);
+    margin: 0.4rem 0 0;
+    line-height: 1.4;
+  }
+
+  
+  .hyd__urine-track {
+    display: flex;
+    height: 10px;
+    border-radius: 5px;
+    overflow: hidden;
+    margin-top: 0.5rem;
+    border: 2px solid var(--hyd-bg);
+  }
+
+  .hyd__urine-seg { flex: 1; }
+  .hyd__urine-seg--1 { background: #fef9c3; }
+  .hyd__urine-seg--2 { background: #fef08a; }
+  .hyd__urine-seg--3 { background: #fde047; }
+  .hyd__urine-seg--4 { background: #facc15; }
+  .hyd__urine-seg--5 { background: #eab308; }
+  .hyd__urine-seg--6 { background: #ca8a04; }
+  .hyd__urine-seg--7 { background: #a16207; }
+
+  .hyd__urine-icons {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 0.35rem;
+  }
+
+  .hyd__urine-good svg { color: #22c55e; width: 1rem; height: 1rem; }
+  .hyd__urine-bad svg { color: #ef4444; width: 1rem; height: 1rem; }
+
+  
+  .hyd__section--alert {
+    padding-top: 1.25rem;
+    padding-bottom: 1.25rem;
+  }
+
+  .hyd__alert {
+    background: var(--hyd-alert-bg);
+    border: 1.5px solid var(--hyd-alert-border);
+    border-radius: 0.875rem;
+    padding: 0.875rem 1rem;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    color: var(--hyd-alert-color);
+  }
+
+  .hyd__alert-icon {
+    flex-shrink: 0;
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  .hyd__alert-icon svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .hyd__alert-text {
+    font-size: 0.85rem;
+    font-weight: 600;
+    line-height: 1.4;
+  }
+</style>
+
+<script>
+  // eslint-disable-next-line max-lines-per-function
+  function initHyd(container: Element) {
+    const ui = JSON.parse((container as HTMLElement).dataset.ui ?? '{}') as Record<string, string>;
+
+    const weightEl = container.querySelector<HTMLInputElement>('#hyd-weight');
+    const tempEl = container.querySelector<HTMLInputElement>('#hyd-temp');
+    const humEl = container.querySelector<HTMLInputElement>('#hyd-hum');
+    const durationEl = container.querySelector<HTMLInputElement>('#hyd-duration');
+    const intensityBtns = container.querySelectorAll<HTMLButtonElement>('.hyd__intensity-btn');
+    const litersEl = container.querySelector<HTMLElement>('#hyd-liters');
+    const fillEl = container.querySelector<HTMLElement>('#hyd-fill');
+    const refillEl = container.querySelector<HTMLElement>('#hyd-refill');
+    const mixEl = container.querySelector<HTMLElement>('#hyd-mix');
+    const mixDetailEl = container.querySelector<HTMLElement>('#hyd-mix-detail');
+    const alertEl = container.querySelector<HTMLElement>('#hyd-alert');
+    const weatherBtn = container.querySelector<HTMLButtonElement>('#hyd-weather');
+
+    let intensityLoss = 0;
+
+    function calcBaseHydration(weight: number, temp: number, humidity: number): number {
+      let base = weight * 35;
+      if (temp > 30) base *= 1 + (temp - 30) * 0.1;
+      if (humidity > 60 && temp > 25) base *= 1.05;
+      return base;
+    }
+
+    function getRefillFreq(totalL: number, duration: number): string {
+      if (totalL > 3.5) return ui.freqHigh ?? '—';
+      if (duration > 0) return ui.freqMed ?? '—';
+      return ui.freqLow ?? '—';
+    }
+
+    // eslint-disable-next-line complexity
+    function getDrinkMix(totalL: number, temp: number): { mix: string; detail: string } {
+      const mixes: Record<string, { mix: string; detail: string }> = {
+        high: { mix: ui.mixWaterElectrolytes ?? '—', detail: ui.mixDetailHigh ?? '' },
+        med: { mix: ui.mixWaterSalt ?? '—', detail: ui.mixDetailMed ?? '' },
+        low: { mix: ui.mixWater ?? '—', detail: ui.mixDetailLow ?? '' },
+      };
+      let level = 'low';
+      if (totalL > 4 || temp > 38) level = 'high';
+      else if (totalL > 3 || temp > 30) level = 'med';
+      return mixes[level];
+    }
+
+    // eslint-disable-next-line complexity
+    function calculate() {
+      const weight = parseFloat(weightEl?.value ?? '70') || 70;
+      const temp = parseFloat(tempEl?.value ?? '22') || 22;
+      const humidity = parseFloat(humEl?.value ?? '50') || 50;
+      const duration = parseFloat(durationEl?.value ?? '0') || 0;
+
+      const base = calcBaseHydration(weight, temp, humidity);
+      const activityLoss = intensityLoss * (duration / 60);
+      const totalMl = base + activityLoss;
+      const totalL = totalMl / 1000;
+
+      if (litersEl) litersEl.textContent = totalL.toFixed(2);
+      const fillPct = Math.min(100, (totalL / 6) * 100);
+      if (fillEl) fillEl.style.height = `${fillPct}%`;
+
+      const freq = getRefillFreq(totalL, duration);
+      const { mix, detail } = getDrinkMix(totalL, temp);
+
+      if (refillEl) refillEl.textContent = freq;
+      if (mixEl) mixEl.textContent = mix;
+      if (mixDetailEl) mixDetailEl.textContent = detail;
+      if (alertEl) alertEl.hidden = !(totalL > 3.5 || temp > 38);
+    }
+
+    weightEl?.addEventListener('input', calculate);
+    tempEl?.addEventListener('input', calculate);
+    humEl?.addEventListener('input', calculate);
+    durationEl?.addEventListener('input', calculate);
+
+    intensityBtns.forEach((btn) => {
+      btn.addEventListener('click', () => {
+        intensityBtns.forEach((b) => b.classList.remove('hyd__intensity-btn--active'));
+        btn.classList.add('hyd__intensity-btn--active');
+        intensityLoss = parseInt(btn.dataset.loss ?? '0');
+        calculate();
+      });
+    });
+
+    weatherBtn?.addEventListener('click', async () => {
+      weatherBtn.setAttribute('data-loading', 'true');
+      weatherBtn.disabled = true;
+
+      try {
+        const pos = await new Promise<GeolocationPosition>((resolve, reject) => {
+          navigator.geolocation.getCurrentPosition(resolve, reject, { timeout: 8000 });
+        });
+
+        const { latitude, longitude } = pos.coords;
+        const res = await fetch(
+          `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&current=temperature_2m,relative_humidity_2m`,
+        );
+        const data = await res.json() as { current?: { temperature_2m: number; relative_humidity_2m: number } };
+
+        if (data.current) {
+          const t = Math.round(data.current.temperature_2m);
+          const h = Math.round(data.current.relative_humidity_2m);
+          if (tempEl) tempEl.value = String(t);
+          if (humEl) humEl.value = String(h);
+          calculate();
+        }
+      } catch {
+        
+      } finally {
+        weatherBtn.removeAttribute('data-loading');
+        weatherBtn.disabled = false;
+      }
+    });
+
+    calculate();
+  }
+
+  document.querySelectorAll('.hyd').forEach(initHyd);
+</script>