@jjlmoya/utils-health 1.1.0

package/src/tool/binauralTuner/component.astro

@@ -0,0 +1,687 @@
+---
+import type { BinauralTunerUI } from './ui';
+
+interface Props {
+  ui?: Record<string, unknown>;
+}
+
+const ui = (Astro.props.ui ?? {}) as BinauralTunerUI;
+
+const presets = [
+  { base: 174, beat: 1.5, label: ui.presetDeltaSleep },
+  { base: 210, beat: 4.5, label: ui.presetLucidDream, active: true },
+  { base: 396, beat: 10, label: ui.presetDeepAlpha },
+  { base: 528, beat: 20, label: ui.presetActiveBeta },
+  { base: 639, beat: 40, label: ui.presetSuperGamma },
+];
+---
+
+<div class="bt" id="bt-container" data-ui={JSON.stringify(ui)}>
+  <div class="bt__card">
+
+    <div class="bt__controls-grid">
+      <div class="bt__control-group">
+        <div class="bt__control-header">
+          <span class="bt__control-label">{ui.labelBaseFreq}</span>
+          <div class="bt__value-display" id="bt-base-val">200<span class="bt__value-unit">Hz</span></div>
+        </div>
+        <input type="range" id="bt-base-freq" min="100" max="800" step="1" value="200"
+          aria-label={ui.labelBaseFreq} class="bt__range" />
+      </div>
+
+      <div class="bt__control-group">
+        <div class="bt__control-header">
+          <span class="bt__control-label">{ui.labelBeatFreq}</span>
+          <div class="bt__value-display" id="bt-beat-val">4.0<span class="bt__value-unit">Hz</span></div>
+        </div>
+        <input type="range" id="bt-beat-freq" min="0.5" max="40" step="0.1" value="4"
+          aria-label={ui.labelBeatFreq} class="bt__range" />
+      </div>
+    </div>
+
+    <div class="bt__presets-wrap">
+      <div class="bt__beat-desc" id="bt-beat-desc">{ui.waveTheta}</div>
+      <div class="bt__presets">
+        {presets.map((p) => (
+          <button
+            class={`bt__preset-btn${p.active ? ' bt__preset-btn--active' : ''}`}
+            data-base={p.base}
+            data-beat={p.beat}
+          >
+            {p.label}
+          </button>
+        ))}
+      </div>
+    </div>
+
+    <div class="bt__actions">
+      <button id="bt-toggle-audio" class="bt__play-btn" aria-label={ui.btnPlay}>
+        <svg id="bt-play-icon" viewBox="0 0 24 24" class="bt__play-svg">
+          <path d="M8,5.14V19.14L19,12.14L8,5.14Z" />
+        </svg>
+        <svg id="bt-stop-icon" viewBox="0 0 24 24" class="bt__play-svg bt__play-svg--hidden">
+          <path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M9,9H15V15H9V9Z" />
+        </svg>
+      </button>
+
+      <button id="bt-toggle-strobe" class="bt__strobe-btn">
+        {ui.btnVisualPulse}
+      </button>
+    </div>
+
+    <div class="bt__visualizer">
+      <div id="bt-strobe" class="bt__strobe"></div>
+      <canvas id="bt-canvas" class="bt__canvas"></canvas>
+    </div>
+
+    <div class="bt__warning">
+      <strong class="bt__warning-title">{ui.warningTitle}</strong>
+      {ui.warningText}
+    </div>
+
+  </div>
+</div>
+
+<script>
+  import type { BinauralTunerUI } from './ui';
+
+  interface WindowWithWebkitAudio extends Window {
+    webkitAudioContext: typeof AudioContext;
+  }
+
+  const container = document.getElementById('bt-container');
+  const ui = JSON.parse(container?.dataset.ui ?? '{}') as BinauralTunerUI;
+
+  const baseInput = container?.querySelector<HTMLInputElement>('#bt-base-freq');
+  const beatInput = container?.querySelector<HTMLInputElement>('#bt-beat-freq');
+  const baseVal = container?.querySelector<HTMLElement>('#bt-base-val');
+  const beatVal = container?.querySelector<HTMLElement>('#bt-beat-val');
+  const beatDesc = container?.querySelector<HTMLElement>('#bt-beat-desc');
+  const toggleBtn = container?.querySelector<HTMLElement>('#bt-toggle-audio');
+  const strobeBtn = container?.querySelector<HTMLElement>('#bt-toggle-strobe');
+  const strobeEl = container?.querySelector<HTMLElement>('#bt-strobe');
+  const playIcon = container?.querySelector<HTMLElement>('#bt-play-icon');
+  const stopIcon = container?.querySelector<HTMLElement>('#bt-stop-icon');
+  const canvas = container?.querySelector<HTMLCanvasElement>('#bt-canvas');
+  const ctx2d = canvas?.getContext('2d');
+
+  let audioCtx: AudioContext | null = null;
+  let oscL: OscillatorNode | null = null;
+  let oscR: OscillatorNode | null = null;
+  let isPlaying = false;
+  let isStrobeActive = false;
+
+  const WAVE_THRESHOLDS = [4, 8, 14, 30] as const;
+
+  function getBeatDescription(beat: number): string {
+    if (beat < WAVE_THRESHOLDS[0]) return ui.waveDelta;
+    if (beat < WAVE_THRESHOLDS[1]) return ui.waveTheta;
+    if (beat < WAVE_THRESHOLDS[2]) return ui.waveAlpha;
+    if (beat < WAVE_THRESHOLDS[3]) return ui.waveBeta;
+    return ui.waveGamma;
+  }
+
+  function updateLabels() {
+    const base = parseFloat(baseInput?.value ?? '200');
+    const beat = parseFloat(beatInput?.value ?? '4');
+    if (baseVal) baseVal.innerHTML = `${base}<span class="bt__value-unit">Hz</span>`;
+    if (beatVal) beatVal.innerHTML = `${beat.toFixed(1)}<span class="bt__value-unit">Hz</span>`;
+    if (beatDesc) beatDesc.textContent = getBeatDescription(beat);
+    updateAudio();
+    updateStrobe();
+  }
+
+  function createAudioContext(): AudioContext {
+    const Ctor = window.AudioContext ?? (window as WindowWithWebkitAudio).webkitAudioContext;
+    return new Ctor();
+  }
+
+  function buildOscillator(ctx: AudioContext, freq: number, pan: number): OscillatorNode {
+    const osc = ctx.createOscillator();
+    const gain = ctx.createGain();
+    const panner = ctx.createStereoPanner();
+    gain.gain.value = 0.5;
+    panner.pan.value = pan;
+    osc.connect(gain).connect(panner).connect(ctx.destination);
+    osc.type = 'sine';
+    osc.frequency.value = freq;
+    return osc;
+  }
+
+  function initAudio() {
+    const base = parseFloat(baseInput?.value ?? '200');
+    const beat = parseFloat(beatInput?.value ?? '4');
+    audioCtx = createAudioContext();
+    oscL = buildOscillator(audioCtx, base - beat / 2, -1);
+    oscR = buildOscillator(audioCtx, base + beat / 2, 1);
+    oscL.start();
+    oscR.start();
+    animate();
+  }
+
+  function updateAudio() {
+    if (!audioCtx || !oscL || !oscR) return;
+    const base = parseFloat(baseInput?.value ?? '200');
+    const beat = parseFloat(beatInput?.value ?? '4');
+    oscL.frequency.setTargetAtTime(base - beat / 2, audioCtx.currentTime, 0.1);
+    oscR.frequency.setTargetAtTime(base + beat / 2, audioCtx.currentTime, 0.1);
+  }
+
+  function updateStrobe() {
+    if (!strobeEl) return;
+    if (isStrobeActive) {
+      const beat = parseFloat(beatInput?.value ?? '4');
+      strobeEl.style.setProperty('--bt-strobe-duration', `${1 / beat}s`);
+      strobeEl.classList.add('bt__strobe--active');
+    } else {
+      strobeEl.classList.remove('bt__strobe--active');
+    }
+  }
+
+  function drawWave(color: string, freqMult: number, ampMod: number, time: number) {
+    if (!ctx2d || !canvas) return;
+    ctx2d.beginPath();
+    ctx2d.strokeStyle = color;
+    ctx2d.lineWidth = 2;
+    const beat = parseFloat(beatInput?.value ?? '4');
+    for (let x = 0; x < canvas.width; x++) {
+      const mod = ampMod * Math.sin(x * 0.02 + time * beat);
+      const y = canvas.height / 2 + Math.sin(x * 0.05 + time * freqMult) * (20 + mod);
+      if (x === 0) ctx2d.moveTo(x, y);
+      else ctx2d.lineTo(x, y);
+    }
+    ctx2d.stroke();
+  }
+
+  function animate() {
+    if (!ctx2d || !canvas) return;
+    ctx2d.clearRect(0, 0, canvas.width, canvas.height);
+    const time = Date.now() * 0.002;
+    const base = parseFloat(baseInput?.value ?? '200');
+    drawWave('rgba(112,0,255,0.8)', base / 100, 0, time);
+    drawWave('rgba(0,242,255,0.8)', base / 100, 40, time);
+    requestAnimationFrame(animate);
+  }
+
+  function setIconState(playing: boolean) {
+    toggleBtn?.classList.toggle('bt__play-btn--playing', playing);
+    playIcon?.classList.toggle('bt__play-svg--hidden', playing);
+    stopIcon?.classList.toggle('bt__play-svg--hidden', !playing);
+  }
+
+  function toggleAudio() {
+    if (!isPlaying) {
+      if (!audioCtx) initAudio();
+      else if (audioCtx.state === 'suspended') audioCtx.resume();
+      isPlaying = true;
+    } else {
+      audioCtx?.suspend();
+      isPlaying = false;
+    }
+    setIconState(isPlaying);
+  }
+
+  function applyPreset(btn: HTMLButtonElement) {
+    container?.querySelectorAll<HTMLButtonElement>('.bt__preset-btn').forEach((b) => {
+      b.classList.remove('bt__preset-btn--active');
+    });
+    btn.classList.add('bt__preset-btn--active');
+    if (baseInput && btn.dataset.base) baseInput.value = btn.dataset.base;
+    if (beatInput && btn.dataset.beat) beatInput.value = btn.dataset.beat;
+    updateLabels();
+  }
+
+  function resizeCanvas() {
+    if (!canvas) return;
+    canvas.width = canvas.parentElement?.clientWidth ?? 0;
+    canvas.height = canvas.parentElement?.clientHeight ?? 0;
+  }
+
+  baseInput?.addEventListener('input', updateLabels);
+  beatInput?.addEventListener('input', updateLabels);
+  toggleBtn?.addEventListener('click', toggleAudio);
+  strobeBtn?.addEventListener('click', () => {
+    isStrobeActive = !isStrobeActive;
+    strobeBtn.classList.toggle('bt__strobe-btn--active', isStrobeActive);
+    updateStrobe();
+  });
+  container?.querySelectorAll<HTMLButtonElement>('.bt__preset-btn').forEach((btn) => {
+    btn.addEventListener('click', () => applyPreset(btn));
+  });
+  window.addEventListener('resize', resizeCanvas);
+  resizeCanvas();
+</script>
+
+<style>
+  
+  .bt {
+    --bt-bg: #f5f0ff;
+    --bt-primary: #7000ff;
+    --bt-secondary: #0ad;
+    --bt-accent: #c0c;
+    --bt-text: #1a003d;
+    --bt-glass: rgba(112, 0, 255, 0.04);
+    --bt-glass-border: rgba(112, 0, 255, 0.18);
+    --bt-muted: rgba(26, 0, 61, 0.5);
+    --bt-range-track: rgba(112, 0, 255, 0.08);
+    --bt-range-track-border: rgba(112, 0, 255, 0.18);
+    --bt-preset-color: rgba(26, 0, 61, 0.7);
+    --bt-warning-bg: rgba(220, 38, 38, 0.05);
+    --bt-warning-border: rgba(220, 38, 38, 0.18);
+    --bt-warning-text: rgba(26, 0, 61, 0.6);
+    --bt-warning-strong: #dc2626;
+    --bt-strobe-border: rgba(112, 0, 255, 0.2);
+    --bt-strobe-color: #1a003d;
+    --bt-visualizer-bg: rgba(3, 4, 22, 0.88);
+    --bt-shadow: 0 8px 32px rgba(112, 0, 255, 0.15);
+
+    max-width: 56rem;
+    margin: 0 auto;
+    padding: 0 1rem;
+  }
+
+  
+  :global(.theme-dark) .bt {
+    --bt-bg: #030416;
+    --bt-secondary: #00f2ff;
+    --bt-accent: #f0f;
+    --bt-text: #fff;
+    --bt-glass: rgba(255, 255, 255, 0.03);
+    --bt-glass-border: rgba(255, 255, 255, 0.1);
+    --bt-muted: rgba(255, 255, 255, 0.5);
+    --bt-range-track: rgba(255, 255, 255, 0.05);
+    --bt-range-track-border: rgba(255, 255, 255, 0.1);
+    --bt-preset-color: rgba(255, 255, 255, 0.7);
+    --bt-warning-bg: rgba(255, 0, 0, 0.05);
+    --bt-warning-border: rgba(255, 0, 0, 0.1);
+    --bt-warning-text: rgba(255, 255, 255, 0.5);
+    --bt-warning-strong: rgba(255, 100, 100, 1);
+    --bt-strobe-border: rgba(255, 255, 255, 0.1);
+    --bt-strobe-color: #fff;
+    --bt-visualizer-bg: rgba(0, 0, 0, 0.3);
+    --bt-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+  }
+
+  
+  .bt__card {
+    background: var(--bt-bg);
+    border: 1px solid var(--bt-glass-border);
+    border-radius: 2rem;
+    padding: 2rem 1.5rem;
+    box-shadow: var(--bt-shadow);
+    display: flex;
+    flex-direction: column;
+    gap: 2.5rem;
+    position: relative;
+    overflow: hidden;
+    backdrop-filter: blur(20px);
+  }
+
+  @media (min-width: 768px) {
+    .bt__card {
+      padding: 3rem;
+      border-radius: 2.5rem;
+      gap: 3rem;
+    }
+  }
+
+  .bt__card::before {
+    content: '';
+    position: absolute;
+    top: -10%;
+    right: -10%;
+    width: 40%;
+    height: 40%;
+    background: radial-gradient(circle, rgba(112, 0, 255, 0.12) 0%, transparent 70%);
+    pointer-events: none;
+  }
+
+  :global(.theme-dark) .bt__card::before {
+    background: radial-gradient(circle, rgba(112, 0, 255, 0.15) 0%, transparent 70%);
+  }
+
+  .bt__card::after {
+    content: '';
+    position: absolute;
+    bottom: -10%;
+    left: -10%;
+    width: 40%;
+    height: 40%;
+    background: radial-gradient(circle, rgba(0, 170, 221, 0.1) 0%, transparent 70%);
+  }
+
+  :global(.theme-dark) .bt__card::after {
+    background: radial-gradient(circle, rgba(0, 242, 255, 0.1) 0%, transparent 70%);
+    pointer-events: none;
+  }
+
+  
+  .bt__controls-grid {
+    display: grid;
+    gap: 2rem;
+    position: relative;
+    z-index: 1;
+  }
+
+  @media (min-width: 640px) {
+    .bt__controls-grid {
+      grid-template-columns: 1fr 1fr;
+      gap: 3rem;
+    }
+  }
+
+  .bt__control-group {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  .bt__control-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+  }
+
+  .bt__control-label {
+    font-weight: 700;
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.15em;
+    color: var(--bt-muted);
+  }
+
+  .bt__value-display {
+    font-size: 2.25rem;
+    font-weight: 900;
+    color: var(--bt-text);
+    line-height: 1;
+    text-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
+  }
+
+  @media (min-width: 768px) {
+    .bt__value-display {
+      font-size: 2.5rem;
+    }
+  }
+
+  .bt__value-unit {
+    font-size: 1rem;
+    font-weight: 400;
+    margin-left: 0.25rem;
+    opacity: 0.6;
+  }
+
+  
+  .bt__range {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 100%;
+    background: transparent;
+    cursor: pointer;
+  }
+
+  .bt__range::-webkit-slider-runnable-track {
+    height: 8px;
+    background: var(--bt-range-track);
+    border-radius: 4px;
+    border: 1px solid var(--bt-range-track-border);
+  }
+
+  .bt__range::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    height: 24px;
+    width: 24px;
+    background: var(--bt-text);
+    border-radius: 50%;
+    margin-top: -9px;
+    box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+
+  .bt__range::-webkit-slider-thumb:hover {
+    transform: scale(1.1);
+    box-shadow: 0 0 20px var(--bt-secondary);
+  }
+
+  .bt__range::-moz-range-track {
+    height: 8px;
+    background: var(--bt-range-track);
+    border-radius: 4px;
+    border: 1px solid var(--bt-range-track-border);
+  }
+
+  .bt__range::-moz-range-thumb {
+    height: 24px;
+    width: 24px;
+    background: var(--bt-text);
+    border-radius: 50%;
+    border: none;
+    box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
+  }
+
+  
+  .bt__presets-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    align-items: center;
+    position: relative;
+    z-index: 1;
+  }
+
+  .bt__beat-desc {
+    background: linear-gradient(90deg, var(--bt-primary), var(--bt-secondary));
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-weight: 600;
+    font-size: 1rem;
+    text-align: center;
+  }
+
+  .bt__presets {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    justify-content: center;
+  }
+
+  .bt__preset-btn {
+    background: var(--bt-glass);
+    border: 1px solid var(--bt-glass-border);
+    color: var(--bt-preset-color);
+    padding: 0.625rem 1.25rem;
+    border-radius: 100px;
+    font-size: 0.85rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+  }
+
+  @media (max-width: 640px) {
+    .bt__preset-btn {
+      padding: 0.5rem 0.75rem;
+      font-size: 0.75rem;
+      flex: 1 1 auto;
+      text-align: center;
+    }
+  }
+
+  .bt__preset-btn:hover {
+    border-color: var(--bt-secondary);
+    color: var(--bt-secondary);
+    background: rgba(0, 242, 255, 0.05);
+  }
+
+  .bt__preset-btn--active {
+    background: var(--bt-text);
+    color: var(--bt-bg);
+    border-color: var(--bt-text);
+    transform: scale(1.05);
+    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
+  }
+
+  
+  .bt__actions {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 2.5rem;
+    margin: 0.5rem 0;
+    position: relative;
+    z-index: 1;
+  }
+
+  @media (max-width: 640px) {
+    .bt__actions {
+      flex-direction: column;
+      gap: 1rem;
+    }
+  }
+
+  .bt__play-btn {
+    width: 6rem;
+    height: 6rem;
+    border-radius: 50%;
+    background: var(--bt-text);
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+    flex-shrink: 0;
+  }
+
+  @media (max-width: 640px) {
+    .bt__play-btn {
+      width: 5rem;
+      height: 5rem;
+    }
+  }
+
+  .bt__play-btn:hover {
+    transform: scale(1.1);
+    box-shadow: 0 0 40px rgba(255, 255, 255, 0.4);
+  }
+
+  .bt__play-btn--playing {
+    background: var(--bt-accent);
+  }
+
+  .bt__play-svg {
+    width: 2.5rem;
+    height: 2.5rem;
+    fill: var(--bt-bg);
+  }
+
+  .bt__play-btn--playing .bt__play-svg {
+    fill: white;
+  }
+
+  .bt__play-svg--hidden {
+    display: none;
+  }
+
+  .bt__strobe-btn {
+    background: transparent;
+    border: 2px solid var(--bt-strobe-border);
+    color: var(--bt-strobe-color);
+    padding: 1rem 2rem;
+    border-radius: 100px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    cursor: pointer;
+    transition: all 0.3s ease;
+  }
+
+  @media (max-width: 640px) {
+    .bt__strobe-btn {
+      padding: 0.75rem 1rem;
+      font-size: 0.85rem;
+      width: 100%;
+      box-sizing: border-box;
+      text-align: center;
+    }
+  }
+
+  .bt__strobe-btn:hover {
+    border-color: var(--bt-secondary);
+    background: rgba(0, 242, 255, 0.05);
+  }
+
+  .bt__strobe-btn--active {
+    background: var(--bt-secondary);
+    border-color: var(--bt-secondary);
+    color: var(--bt-bg);
+    box-shadow: 0 0 25px rgba(0, 242, 255, 0.4);
+  }
+
+  
+  .bt__visualizer {
+    width: 100%;
+    height: 12rem;
+    background: var(--bt-visualizer-bg);
+    border-radius: 1.5rem;
+    position: relative;
+    overflow: hidden;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+  }
+
+  @media (max-width: 640px) {
+    .bt__visualizer {
+      height: 7.5rem;
+      border-radius: 1rem;
+    }
+  }
+
+  .bt__strobe {
+    position: absolute;
+    inset: 0;
+    background: white;
+    opacity: 0;
+    pointer-events: none;
+    z-index: 2;
+  }
+
+  .bt__strobe--active {
+    animation: bt-strobe var(--bt-strobe-duration, 0.25s) infinite;
+  }
+
+  @keyframes bt-strobe {
+    0% { opacity: 0.9; }
+    2% { opacity: 0; }
+    100% { opacity: 0; }
+  }
+
+  .bt__canvas {
+    width: 100%;
+    height: 100%;
+    filter: blur(2px);
+  }
+
+  
+  .bt__warning {
+    background: var(--bt-warning-bg);
+    border: 1px solid var(--bt-warning-border);
+    padding: 1.25rem;
+    border-radius: 1rem;
+    font-size: 0.8rem;
+    color: var(--bt-warning-text);
+    line-height: 1.6;
+    position: relative;
+    z-index: 1;
+  }
+
+  .bt__warning-title {
+    color: var(--bt-warning-strong);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    display: block;
+    margin-bottom: 0.5rem;
+    font-size: 0.75rem;
+  }
+</style>