<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: #ffffff;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
    }

    .toolbar {
      display: flex;
      gap: 8px;
      margin-bottom: 8px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .btn {
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 20px;
      border: 1px solid #cbd5e1;
      background: #f8fafc;
      color: #475569;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .btn.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
      box-shadow: 0 2px 4px rgba(2, 132, 199, 0.25);
    }

    .svg-container {
      width: 100%;
      max-width: 620px;
      position: relative;
      flex-grow: 1;
      display: flex;
      align-items: center;
    }

    svg {
      width: 100%;
      height: auto;
      overflow: visible;
    }

    .legend {
      display: flex;
      gap: 16px;
      font-size: 13px;
      font-weight: 600;
      justify-content: center;
      margin-top: 6px;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .legend-line {
      width: 18px;
      height: 3px;
      border-radius: 2px;
    }

    .key-badge {
      font-size: 11px;
      font-weight: 700;
      fill: #1e2945;
    }

    .sub-badge {
      font-size: 10px;
      font-weight: 500;
      fill: #64748b;
    }

    .axis-label {
      font-size: 12px;
      fill: #64748b;
      font-weight: 500;
      text-anchor: middle;
    }

    .shift-arrow {
      stroke: #d97706;
      stroke-width: 2;
      stroke-dasharray: 4,3;
      fill: none;
    }
  </style>
</head>
<body>

  <div class="toolbar">
    <button class="btn active" id="btnOverlay">Compare</button>
    <button class="btn" id="btnShift">Shift: π/2 Left</button>
    <button class="btn" id="btnPoints">5 Key Points</button>
  </div>

  <div class="svg-container">
    <svg viewBox="0 0 600 320" id="plotSvg">
      <defs>
        <marker id="arrow" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-angle">
          <path d="M 0 1 L 8 5 L 0 9 z" fill="#d97706" />
        </marker>
      </defs>

      
      <g id="grid" stroke="#f1f5f9" stroke-width="1.5"></g>

      
      <line x1="50" y1="160" x2="570" y2="160" stroke="#94a3b8" stroke-width="1.5" />
      <line x1="100" y1="30" x2="100" y2="290" stroke="#94a3b8" stroke-width="1.5" />

      
      <text x="88" y="64" class="axis-label" text-anchor="end">1</text>
      <text x="88" y="164" class="axis-label" text-anchor="end">0</text>
      <text x="88" y="264" class="axis-label" text-anchor="end">-1</text>
      <text x="88" y="38" class="axis-label" text-anchor="end" font-weight="700">y</text>
      <text x="580" y="164" class="axis-label" font-weight="700">x</text>

      
      <g id="xTicks"></g>

      
      <path id="sinePath" fill="none" stroke="#94a3b8" stroke-width="2.5" stroke-dasharray="5,4" opacity="0.8" />
      <path id="cosPath" fill="none" stroke="#0284c7" stroke-width="3.5" />

      
      <g id="shiftGuides"></g>

      
      <g id="keyPoints"></g>
    </svg>
  </div>

  <div class="legend">
    <div class="legend-item">
      <span class="legend-line" style="background:#0284c7;"></span>
      <span>y = cos(x)</span>
    </div>
    <div class="legend-item">
      <span class="legend-line" style="background:#94a3b8; border-top: 2px dashed #94a3b8; height:0;"></span>
      <span>y = sin(x)</span>
    </div>
    <div class="legend-item" id="shiftLegend" style="display:none; color: #d97706;">
      <span>← Shift π/2</span>
    </div>
  </div>

  <script>
    // Coordinate Mapping Math
    // x: [0, 2pi] maps to [100, 540] (width = 440px)
    // y: [-1.2, 1.2] maps to [280, 40] (center y=0 is at 160, amp=100)
    const x0 = 100;
    const xSpan = 440;
    const y0 = 160;
    const amp = 100;

    function mapX(rad) { return x0 + (rad / (2 * Math.PI)) * xSpan; }
    function mapY(val) { return y0 - val * amp; }

    // Generate accurate path
    function generatePath(fn, xStartRad = 0, xEndRad = 2 * Math.PI, steps = 100) {
      let d = '';
      for (let i = 0; i <= steps; i++) {
        const rad = xStartRad + (i / steps) * (xEndRad - xStartRad);
        const yVal = fn(rad);
        const px = mapX(rad);
        const py = mapY(yVal);
        d += (i === 0 ? 'M' : ' L') + ` ${px.toFixed(1)} ${py.toFixed(1)}`;
      }
      return d;
    }

    // Render Grid & Ticks
    const grid = document.getElementById('grid');
    const xTicks = document.getElementById('xTicks');

    // Horizontal grid lines for 1, 0, -1
    [1, -1].forEach(v => {
      const y = mapY(v);
      grid.innerHTML += `<line x1="50" y1="${y}" x2="570" y2="${y}" stroke-dasharray="3,3" />`;
    });

    const xStops = [
      { rad: 0, label: '0' },
      { rad: Math.PI / 2, label: 'π/2' },
      { rad: Math.PI, label: 'π' },
      { rad: 3 * Math.PI / 2, label: '3π/2' },
      { rad: 2 * Math.PI, label: '2π' }
    ];

    xStops.forEach(s => {
      const x = mapX(s.rad);
      grid.innerHTML += `<line x1="${x}" y1="40" x2="${x}" y2="280" stroke-dasharray="3,3" />`;
      xTicks.innerHTML += `
        <line x1="${x}" y1="156" x2="${x}" y2="164" stroke="#64748b" stroke-width="1.5" />
        <text x="${x}" y="180" class="axis-label">${s.label}</text>
      `;
    });

    // Draw initial paths
    document.getElementById('sinePath').setAttribute('d', generatePath(Math.sin));
    document.getElementById('cosPath').setAttribute('d', generatePath(Math.cos));

    // Key points definition
    const keyPts = [
      { rad: 0, val: 1, type: 'Maximum', pos: '(0, 1)', offset: { x: 0, y: -16 } },
      { rad: Math.PI / 2, val: 0, type: 'Zero', pos: '(π/2, 0)', offset: { x: 12, y: -14 } },
      { rad: Math.PI, val: -1, type: 'Minimum', pos: '(π, -1)', offset: { x: 0, y: 24 } },
      { rad: 3 * Math.PI / 2, val: 0, type: 'Zero', pos: '(3π/2, 0)', offset: { x: -12, y: -14 } },
      { rad: 2 * Math.PI, val: 1, type: 'Maximum', pos: '(2π, 1)', offset: { x: -10, y: -16 } }
    ];

    const keyLayer = document.getElementById('keyPoints');
    const shiftGuides = document.getElementById('shiftGuides');

    function renderPoints(showLabels = true) {
      keyLayer.innerHTML = '';
      keyPts.forEach(pt => {
        const cx = mapX(pt.rad);
        const cy = mapY(pt.val);
        
        let labelHtml = '';
        if (showLabels) {
          labelHtml = `
            <text x="${cx + pt.offset.x}" y="${cy + pt.offset.y}" class="key-badge" text-anchor="middle">${pt.type}</text>
            <text x="${cx + pt.offset.x}" y="${cy + pt.offset.y + (pt.val === -1 ? 12 : -11)}" class="sub-badge" text-anchor="middle">${pt.pos}</text>
          `;
        }

        keyLayer.innerHTML += `
          <g>
            <circle cx="${cx}" cy="${cy}" r="6" fill="#0284c7" stroke="#ffffff" stroke-width="2" />
            ${labelHtml}
          </g>
        `;
      });
    }

    function renderShiftGuides(show = false) {
      shiftGuides.innerHTML = '';
      if (!show) return;

      // Draw shift arrows from sin peak to cos peak & zero to zero
      const shifts = [
        { fromRad: Math.PI / 2, toRad: 0, yVal: 1, label: 'Shift π/2' },
        { fromRad: Math.PI, toRad: Math.PI / 2, yVal: 0, label: 'Shift π/2' },
        { fromRad: 3 * Math.PI / 2, toRad: Math.PI, yVal: -1, label: 'Shift π/2' }
      ];

      shifts.forEach(s => {
        const x1 = mapX(s.fromRad);
        const x2 = mapX(s.toRad);
        const y = mapY(s.yVal) + (s.yVal === 1 ? -12 : s.yVal === -1 ? 12 : -12);

        shiftGuides.innerHTML += `
          <path d="M ${x1} ${y} L ${x2 + 4} ${y}" class="shift-arrow" marker-end="url(#arrow)" />
        `;
      });
    }

    // Modes
    let currentMode = 'overlay';

    function setMode(mode) {
      currentMode = mode;
      document.querySelectorAll('.btn').forEach(b => b.classList.remove('active'));
      
      const shiftLeg = document.getElementById('shiftLegend');

      if (mode === 'overlay') {
        document.getElementById('btnOverlay').classList.add('active');
        renderPoints(false);
        renderShiftGuides(false);
        shiftLeg.style.display = 'none';
      } else if (mode === 'shift') {
        document.getElementById('btnShift').classList.add('active');
        renderPoints(false);
        renderShiftGuides(true);
        shiftLeg.style.display = 'flex';
      } else if (mode === 'points') {
        document.getElementById('btnPoints').classList.add('active');
        renderPoints(true);
        renderShiftGuides(false);
        shiftLeg.style.display = 'none';
      }
    }

    document.getElementById('btnOverlay').onclick = () => setMode('overlay');
    document.getElementById('btnShift').onclick = () => setMode('shift');
    document.getElementById('btnPoints').onclick = () => setMode('points');

    // Initial render
    setMode('points');
  </script>
</body>
</html>

Graphing Parent Sine and Cosine Functions

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="16:10">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
      -webkit-user-select: none;
    }
    body {
      width: 100%;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 8px 12px;
    }
    .svg-wrap {
      width: 100%;
      max-width: 620px;
      position: relative;
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }
    .controls {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 6px;
      margin-top: 6px;
      width: 100%;
      max-width: 620px;
    }
    .btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      padding: 5px 10px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 28px;
    }
    .btn:active {
      background: #e2e8f0;
    }
    .btn.active {
      background: #22b7ff;
      border-color: #009be5;
      color: #ffffff;
    }
    .slider {
      flex: 1;
      min-width: 120px;
      max-width: 220px;
      height: 6px;
      accent-color: #22b7ff;
      cursor: pointer;
    }
  </style>
</head>
<body>

  <div class="svg-wrap">
    <svg viewBox="0 0 620 310">
      <defs>
        
        <marker id="arrow" viewBox="0 0 6 6" refX="5" refY="3" markerWidth="6" markerHeight="6" orient="auto">
          <path d="M0,0 L6,3 L0,6 Z" fill="#94a3b8"/>
        </marker>
      </defs>

      
      <line x1="15" y1="150" x2="205" y2="150" stroke="#cbd5e1" stroke-width="1.5" marker-end="url(#arrow)"/>
      <line x1="110" y1="245" x2="110" y2="55" stroke="#cbd5e1" stroke-width="1.5" marker-end="url(#arrow)"/>
      <text x="200" y="165" font-size="11" fill="#94a3b8" font-weight="600">x</text>
      <text x="115" y="52" font-size="11" fill="#94a3b8" font-weight="600">y</text>

      
      <circle cx="110" cy="150" r="75" fill="none" stroke="#e2e8f0" stroke-width="2"/>

      
      <path id="angleWedge" d="" fill="rgba(34, 183, 255, 0.12)"/>
      
      <line id="radiusLine" x1="110" y1="150" x2="185" y2="150" stroke="#64748b" stroke-width="1.5"/>
      
      <line id="circleSinLine" x1="185" y1="150" x2="185" y2="150" stroke="#ef4444" stroke-width="2.5"/>

      
      
      <line x1="230" y1="150" x2="595" y2="150" stroke="#cbd5e1" stroke-width="1.5" marker-end="url(#arrow)"/>
      <line x1="240" y1="245" x2="240" y2="55" stroke="#cbd5e1" stroke-width="1.5" marker-end="url(#arrow)"/>
      <text x="590" y="165" font-size="11" fill="#94a3b8" font-weight="600">θ</text>
      <text x="245" y="52" font-size="11" fill="#94a3b8" font-weight="600">y = sin(θ)</text>

      
      
      <line x1="236" y1="75" x2="244" y2="75" stroke="#94a3b8" stroke-width="1.5"/>
      <text x="228" y="79" font-size="10" fill="#64748b" text-anchor="end">1</text>
      <line x1="236" y1="225" x2="244" y2="225" stroke="#94a3b8" stroke-width="1.5"/>
      <text x="228" y="229" font-size="10" fill="#64748b" text-anchor="end">-1</text>

      
      <line x1="320" y1="65" x2="320" y2="235" stroke="#f1f5f9" stroke-width="1"/>
      <line x1="400" y1="65" x2="400" y2="235" stroke="#f1f5f9" stroke-width="1"/>
      <line x1="480" y1="65" x2="480" y2="235" stroke="#f1f5f9" stroke-width="1"/>
      <line x1="560" y1="65" x2="560" y2="235" stroke="#f1f5f9" stroke-width="1"/>

      
      <line x1="320" y1="146" x2="320" y2="154" stroke="#94a3b8" stroke-width="1.5"/>
      <text x="320" y="168" font-size="11" fill="#1e2945" font-weight="600" text-anchor="middle">π/2</text>

      <line x1="400" y1="146" x2="400" y2="154" stroke="#94a3b8" stroke-width="1.5"/>
      <text x="400" y="168" font-size="11" fill="#1e2945" font-weight="600" text-anchor="middle">π</text>

      <line x1="480" y1="146" x2="480" y2="154" stroke="#94a3b8" stroke-width="1.5"/>
      <text x="480" y="168" font-size="11" fill="#1e2945" font-weight="600" text-anchor="middle">3π/2</text>

      <line x1="560" y1="146" x2="560" y2="154" stroke="#94a3b8" stroke-width="1.5"/>
      <text x="560" y="168" font-size="11" fill="#1e2945" font-weight="600" text-anchor="middle">2π</text>

      <text x="240" y="168" font-size="11" fill="#1e2945" font-weight="600" text-anchor="middle">0</text>

      
      <path id="ghostSine" d="" fill="none" stroke="#e2e8f0" stroke-width="2" stroke-dasharray="4,4"/>

      
      <path id="sinePath" d="" fill="none" stroke="#22b7ff" stroke-width="3" stroke-linecap="round"/>

      
      <line id="connectLine" x1="185" y1="150" x2="240" y2="150" stroke="#ef4444" stroke-width="1.5" stroke-dasharray="4,3"/>

      
      <circle id="circleDot" cx="185" cy="150" r="5" fill="#22b7ff" stroke="#1e2945" stroke-width="1.5"/>

      
      <circle id="waveDot" cx="240" cy="150" r="5" fill="#22b7ff" stroke="#1e2945" stroke-width="1.5"/>
    </svg>
  </div>

  <div class="controls">
    <button id="playBtn" class="btn">⏸</button>
    <input id="angleSlider" type="range" min="0" max="6.28318" step="0.02" value="0" class="slider">
    <button class="btn key-btn" data-angle="0">0</button>
    <button class="btn key-btn" data-angle="1.5708">π/2</button>
    <button class="btn key-btn" data-angle="3.1416">π</button>
    <button class="btn key-btn" data-angle="4.7124">3π/2</button>
    <button class="btn key-btn" data-angle="6.2832">2π</button>
  </div>

  <script>
    const CX = 110, CY = 150, R = 75;
    const X0 = 240, WAVE_WIDTH = 320; // 2pi width is 320px
    const TWO_PI = Math.PI * 2;

    const angleWedge = document.getElementById('angleWedge');
    const radiusLine = document.getElementById('radiusLine');
    const circleSinLine = document.getElementById('circleSinLine');
    const connectLine = document.getElementById('connectLine');
    const circleDot = document.getElementById('circleDot');
    const waveDot = document.getElementById('waveDot');
    const sinePath = document.getElementById('sinePath');
    const ghostSine = document.getElementById('ghostSine');
    const playBtn = document.getElementById('playBtn');
    const slider = document.getElementById('angleSlider');
    const keyBtns = document.querySelectorAll('.key-btn');

    let currentAngle = 0;
    let playing = true;
    let lastTime = null;
    const SPEED = 1.0; // Radians per second

    // Pre-calculate full ghost wave path
    let ghostD = `M ${X0} ${CY}`;
    for (let a = 0; a <= TWO_PI + 0.05; a += 0.05) {
      const x = X0 + (a / TWO_PI) * WAVE_WIDTH;
      const y = CY - Math.sin(a) * R;
      ghostD += ` L ${x.toFixed(1)} ${y.toFixed(1)}`;
    }
    ghostSine.setAttribute('d', ghostD);

    function updateView(angle) {
      currentAngle = angle;
      slider.value = angle;

      const cosA = Math.cos(angle);
      const sinA = Math.sin(angle);

      const circleX = CX + R * cosA;
      const circleY = CY - R * sinA;
      const waveX = X0 + (angle / TWO_PI) * WAVE_WIDTH;
      const waveY = CY - R * sinA;

      // Circle elements
      radiusLine.setAttribute('x2', circleX);
      radiusLine.setAttribute('y2', circleY);

      circleSinLine.setAttribute('x1', circleX);
      circleSinLine.setAttribute('y1', CY);
      circleSinLine.setAttribute('x2', circleX);
      circleSinLine.setAttribute('y2', circleY);

      circleDot.setAttribute('cx', circleX);
      circleDot.setAttribute('cy', circleY);

      // Angle wedge arc
      if (angle > 0.01) {
        const largeArc = angle > Math.PI ? 1 : 0;
        const arcX = CX + 22 * cosA;
        const arcY = CY - 22 * sinA;
        angleWedge.setAttribute('d', `M ${CX} ${CY} L ${CX + 22} ${CY} A 22 22 0 ${largeArc} 0 ${arcX} ${arcY} Z`);
      } else {
        angleWedge.setAttribute('d', '');
      }

      // Wave path up to current angle
      let d = `M ${X0} ${CY}`;
      const step = 0.04;
      for (let a = 0; a <= angle; a += step) {
        const x = X0 + (a / TWO_PI) * WAVE_WIDTH;
        const y = CY - Math.sin(a) * R;
        d += ` L ${x.toFixed(1)} ${y.toFixed(1)}`;
      }
      d += ` L ${waveX.toFixed(1)} ${waveY.toFixed(1)}`;
      sinePath.setAttribute('d', d);

      // Wave dot & connecting dashed line
      waveDot.setAttribute('cx', waveX);
      waveDot.setAttribute('cy', waveY);

      connectLine.setAttribute('x1', circleX);
      connectLine.setAttribute('y1', circleY);
      connectLine.setAttribute('x2', waveX);
      connectLine.setAttribute('y2', waveY);

      // Active state on buttons
      keyBtns.forEach(btn => {
        const target = parseFloat(btn.dataset.angle);
        btn.classList.toggle('active', Math.abs(currentAngle - target) < 0.15);
      });
    }

    function animate(timestamp) {
      if (!lastTime) lastTime = timestamp;
      const dt = (timestamp - lastTime) / 1000;
      lastTime = timestamp;

      if (playing) {
        currentAngle += SPEED * dt;
        if (currentAngle > TWO_PI) {
          currentAngle = 0;
        }
        updateView(currentAngle);
      }
      requestAnimationFrame(animate);
    }

    playBtn.addEventListener('click', () => {
      playing = !playing;
      playBtn.textContent = playing ? '⏸' : '▶';
    });

    slider.addEventListener('input', (e) => {
      playing = false;
      playBtn.textContent = '▶';
      updateView(parseFloat(e.target.value));
    });

    keyBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        playing = false;
        playBtn.textContent = '▶';
        updateView(parseFloat(btn.dataset.angle));
      });
    });

    updateView(0);
    requestAnimationFrame(animate);
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      width: 100%;
      height: 100%;
      background: #ffffff;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 8px 12px;
      user-select: none;
    }
    .diagram-wrap {
      width: 100%;
      max-width: 620px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }
    .svg-container {
      width: 100%;
      position: relative;
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }
    .axis { stroke: #64748b; stroke-width: 1.5; stroke-linecap: round; }
    .grid { stroke: #e2e8f0; stroke-width: 1; stroke-dasharray: 4 4; }
    .sine-curve {
      fill: none;
      stroke: #0284c7;
      stroke-width: 3.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .key-point {
      cursor: pointer;
      transition: transform 0.2s ease;
    }
    .key-point circle.outer {
      fill: #ffffff;
      stroke-width: 2.5;
      transition: r 0.2s ease;
    }
    .key-point:hover circle.outer {
      r: 8;
    }
    .key-point.active circle.outer {
      r: 9;
      stroke-width: 3;
    }
    .badge-bg {
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08));
      rx: 6px;
      ry: 6px;
    }
    .point-nav {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;
      margin-top: 2px;
    }
    .nav-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 4px 10px;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
    }
    .nav-btn:hover {
      background: #e2e8f0;
    }
    .nav-btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
    }
  </style>
</head>
<body>
  <div class="diagram-wrap">
    <div class="svg-container">
      <svg id="plot" viewBox="0 0 600 370">
        <defs>
          <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
            <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#64748b"/>
          </marker>
          <marker id="arrow-period-start" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto">
            <path d="M 8 1.5 L 0 5 L 8 8.5 z" fill="#334155"/>
          </marker>
          <marker id="arrow-period-end" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto">
            <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#334155"/>
          </marker>
        </defs>

        
        <line x1="50" y1="90" x2="550" y2="90" class="grid"/>
        <line x1="50" y1="270" x2="550" y2="270" class="grid"/>

        
        <line x1="185" y1="50" x2="185" y2="290" class="grid"/>
        <line x1="310" y1="50" x2="310" y2="290" class="grid"/>
        <line x1="435" y1="50" x2="435" y2="290" class="grid"/>
        <line x1="560" y1="50" x2="560" y2="290" class="grid"/>

        
        <line x1="40" y1="180" x2="585" y2="180" class="axis" marker-end="url(#arrow)"/>
        <line x1="60" y1="315" x2="60" y2="35" class="axis" marker-end="url(#arrow)"/>

        
        <text x="585" y="174" font-size="14" font-weight="600" fill="#64748b" text-anchor="end">x</text>
        <text x="52" y="38" font-size="14" font-weight="600" fill="#64748b" text-anchor="end">y</text>

        
        <line x1="55" y1="90" x2="65" y2="90" stroke="#64748b" stroke-width="1.5"/>
        <text x="48" y="94" font-size="13" font-weight="600" fill="#475569" text-anchor="end">1</text>

        <line x1="55" y1="270" x2="65" y2="270" stroke="#64748b" stroke-width="1.5"/>
        <text x="48" y="274" font-size="13" font-weight="600" fill="#475569" text-anchor="end">-1</text>

        
        <line x1="185" y1="175" x2="185" y2="185" stroke="#64748b" stroke-width="1.5"/>
        <line x1="310" y1="175" x2="310" y2="185" stroke="#64748b" stroke-width="1.5"/>
        <line x1="435" y1="175" x2="435" y2="185" stroke="#64748b" stroke-width="1.5"/>
        <line x1="560" y1="175" x2="560" y2="185" stroke="#64748b" stroke-width="1.5"/>

        
        <path id="sinePath" class="sine-curve" d=""/>

        
        <line x1="64" y1="330" x2="556" y2="330" stroke="#334155" stroke-width="2" marker-start="url(#arrow-period-start)" marker-end="url(#arrow-period-end)"/>
        <line x1="60" y1="320" x2="60" y2="340" stroke="#cbd5e1" stroke-width="1.5"/>
        <line x1="560" y1="320" x2="560" y2="340" stroke="#cbd5e1" stroke-width="1.5"/>
        <rect x="235" y="318" width="150" height="24" rx="12" fill="#ffffff"/>
        <text x="310" y="335" font-size="14" font-weight="700" fill="#0f172a" text-anchor="middle">Period = 2π</text>

        

        
        <g id="pt0" class="key-point" onclick="selectPoint(0)">
          <rect x="22" y="194" width="76" height="25" class="badge-bg" fill="#eff6ff" stroke="#3b82f6" stroke-width="1.5"/>
          <text x="60" y="211" font-size="12" font-weight="700" fill="#1d4ed8" text-anchor="middle">(0, 0)</text>
          <text x="60" y="233" font-size="11" font-weight="700" fill="#3b82f6" text-anchor="middle">Zero</text>
          <circle cx="60" cy="180" r="6" class="outer" stroke="#3b82f6"/>
          <circle cx="60" cy="180" r="3" fill="#3b82f6"/>
        </g>

        
        <g id="pt1" class="key-point" onclick="selectPoint(1)">
          
          <rect x="145" y="26" width="80" height="22" rx="4" fill="#dcfce7" stroke="#16a34a" stroke-width="1.2"/>
          <text x="185" y="41" font-size="11" font-weight="800" fill="#15803d" text-anchor="middle">MAX = 1</text>
          
          <rect x="147" y="54" width="76" height="25" class="badge-bg" fill="#f0fdf4" stroke="#16a34a" stroke-width="1.5"/>
          <text x="185" y="71" font-size="12" font-weight="700" fill="#15803d" text-anchor="middle">(π/2, 1)</text>
          
          <circle cx="185" cy="90" r="6" class="outer" stroke="#16a34a"/>
          <circle cx="185" cy="90" r="3" fill="#16a34a"/>
          
          <text x="185" y="198" font-size="13" font-weight="600" fill="#475569" text-anchor="middle">π/2</text>
        </g>

        
        <g id="pt2" class="key-point" onclick="selectPoint(2)">
          <rect x="272" y="194" width="76" height="25" class="badge-bg" fill="#eff6ff" stroke="#3b82f6" stroke-width="1.5"/>
          <text x="310" y="211" font-size="12" font-weight="700" fill="#1d4ed8" text-anchor="middle">(π, 0)</text>
          <text x="310" y="233" font-size="11" font-weight="700" fill="#3b82f6" text-anchor="middle">Zero</text>
          <circle cx="310" cy="180" r="6" class="outer" stroke="#3b82f6"/>
          <circle cx="310" cy="180" r="3" fill="#3b82f6"/>
        </g>

        
        <g id="pt3" class="key-point" onclick="selectPoint(3)">
          
          <text x="435" y="172" font-size="13" font-weight="600" fill="#475569" text-anchor="middle">3π/2</text>
          
          <circle cx="435" cy="270" r="6" class="outer" stroke="#d97706"/>
          <circle cx="435" cy="270" r="3" fill="#d97706"/>
          
          <rect x="397" y="282" width="76" height="25" class="badge-bg" fill="#fffbeb" stroke="#d97706" stroke-width="1.5"/>
          <text x="435" y="299" font-size="12" font-weight="700" fill="#b45309" text-anchor="middle">(3π/2, -1)</text>
          
          <rect x="478" y="283" width="74" height="22" rx="4" fill="#fef3c7" stroke="#d97706" stroke-width="1.2"/>
          <text x="515" y="298" font-size="11" font-weight="800" fill="#b45309" text-anchor="middle">MIN = -1</text>
        </g>

        
        <g id="pt4" class="key-point" onclick="selectPoint(4)">
          <rect x="522" y="194" width="76" height="25" class="badge-bg" fill="#eff6ff" stroke="#3b82f6" stroke-width="1.5"/>
          <text x="560" y="211" font-size="12" font-weight="700" fill="#1d4ed8" text-anchor="middle">(2π, 0)</text>
          <text x="560" y="233" font-size="11" font-weight="700" fill="#3b82f6" text-anchor="middle">Zero</text>
          <circle cx="560" cy="180" r="6" class="outer" stroke="#3b82f6"/>
          <circle cx="560" cy="180" r="3" fill="#3b82f6"/>
        </g>
      </svg>
    </div>

    
    <div class="point-nav">
      <button class="nav-btn active" onclick="selectPoint('all')">All 5 Points</button>
      <button class="nav-btn" onclick="selectPoint(0)">(0, 0)</button>
      <button class="nav-btn" onclick="selectPoint(1)">(π/2, 1)</button>
      <button class="nav-btn" onclick="selectPoint(2)">(π, 0)</button>
      <button class="nav-btn" onclick="selectPoint(3)">(3π/2, -1)</button>
      <button class="nav-btn" onclick="selectPoint(4)">(2π, 0)</button>
    </div>
  </div>

  <script>
    // Exact mathematical curve calculation for y = sin(x)
    const x0 = 60, xEnd = 560;
    const yCenter = 180, amp = 90;
    let d = "";
    const steps = 120;
    for (let i = 0; i <= steps; i++) {
      const t = i / steps;
      const angle = t * 2 * Math.PI;
      const px = x0 + t * (xEnd - x0);
      const py = yCenter - amp * Math.sin(angle);
      d += (i === 0 ? "M" : " L") + px.toFixed(2) + " " + py.toFixed(2);
    }
    document.getElementById("sinePath").setAttribute("d", d);

    // Interactive point selection
    function selectPoint(idx) {
      const points = [0, 1, 2, 3, 4].map(i => document.getElementById("pt" + i));
      const buttons = document.querySelectorAll(".nav-btn");

      buttons.forEach((btn, bIdx) => {
        if ((idx === 'all' && bIdx === 0) || (bIdx === idx + 1)) {
          btn.classList.add("active");
        } else {
          btn.classList.remove("active");
        }
      });

      points.forEach((pt, pIdx) => {
        if (idx === 'all' || pIdx === idx) {
          pt.style.opacity = "1";
          pt.classList.toggle("active", pIdx === idx);
        } else {
          pt.style.opacity = "0.25";
          pt.classList.remove("active");
        }
      });
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      width: 100%;
      background: #ffffff;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 12px 8px;
      user-select: none;
      -webkit-user-select: none;
    }

    .panels {
      display: flex;
      width: 100%;
      max-width: 640px;
      gap: 12px;
      justify-content: center;
      align-items: stretch;
    }

    .panel-box {
      flex: 1;
      min-width: 0;
      background: #fafafa;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      padding: 8px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .panel-title {
      font-size: 13px;
      font-weight: 700;
      color: #4338ca;
      margin-bottom: 4px;
      letter-spacing: -0.2px;
    }

    svg {
      width: 100%;
      height: auto;
      max-height: 220px;
      display: block;
      overflow: visible;
    }

    .controls {
      width: 100%;
      max-width: 640px;
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: center;
    }

    .slider-row {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 0 8px;
    }

    input[type=range] {
      flex: 1;
      height: 6px;
      border-radius: 3px;
      background: #e2e8f0;
      outline: none;
      -webkit-appearance: none;
      appearance: none;
      cursor: pointer;
    }

    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #4338ca;
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
      cursor: pointer;
    }

    input[type=range]::-moz-range-thumb {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #4338ca;
      border: none;
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
      cursor: pointer;
    }

    .val-badge {
      font-variant-numeric: tabular-nums;
      font-size: 13px;
      font-weight: 700;
      color: #1e2945;
      background: #eef2ff;
      border: 1px solid #c7d2fe;
      padding: 3px 8px;
      border-radius: 6px;
      min-width: 140px;
      text-align: center;
    }

    .btn-group {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .preset-btn {
      background: #fff;
      border: 1px solid #d1d5db;
      color: #1e2945;
      padding: 4px 10px;
      font-size: 12px;
      font-weight: 600;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s;
    }

    .preset-btn:hover {
      background: #f3f4f6;
      border-color: #9ca3af;
    }

    .preset-btn.active {
      background: #4338ca;
      color: #ffffff;
      border-color: #4338ca;
    }
  </style>
</head>
<body>

  <div class="panels">
    
    <div class="panel-box">
      <div class="panel-title">Restricted Domain [−π/2, π/2]</div>
      <svg id="svgGraph" viewBox="-125 -105 250 210">
        
        <line x1="-110" y1="0" x2="110" y2="0" stroke="#94a3b8" stroke-width="1.2" stroke-linecap="round"/>
        <line x1="0" y1="90" x2="0" y2="-90" stroke="#94a3b8" stroke-width="1.2" stroke-linecap="round"/>

        
        <line x1="-78.5" y1="-4" x2="-78.5" y2="4" stroke="#94a3b8" stroke-width="1.2"/>
        <line x1="78.5" y1="-4" x2="78.5" y2="4" stroke="#94a3b8" stroke-width="1.2"/>
        <line x1="-4" y1="-70" x2="4" y2="-70" stroke="#94a3b8" stroke-width="1.2"/>
        <line x1="-4" y1="70" x2="4" y2="70" stroke="#94a3b8" stroke-width="1.2"/>

        
        <text x="-78.5" y="16" text-anchor="middle" font-size="10" fill="#64748b" font-weight="600">−π/2</text>
        <text x="78.5" y="16" text-anchor="middle" font-size="10" fill="#64748b" font-weight="600">π/2</text>
        <text x="-8" y="-67" text-anchor="end" font-size="10" fill="#64748b" font-weight="600">1</text>
        <text x="-8" y="74" text-anchor="end" font-size="10" fill="#64748b" font-weight="600">−1</text>

        
        <path id="ghostSine" d="" fill="none" stroke="#cbd5e1" stroke-width="1.5" stroke-dasharray="3,3"/>

        
        <path id="activeSine" d="" fill="none" stroke="#4338ca" stroke-width="3" stroke-linecap="round"/>

        
        <line id="graphProjX" x1="0" y1="0" x2="0" y2="0" stroke="#06b6d4" stroke-width="1.2" stroke-dasharray="3,3"/>
        <line id="graphProjY" x1="0" y1="0" x2="0" y2="0" stroke="#4338ca" stroke-width="1.2" stroke-dasharray="3,3"/>

        
        <circle cx="-78.54" cy="70" r="3.5" fill="#4338ca"/>
        <circle cx="78.54" cy="-70" r="3.5" fill="#4338ca"/>
        <circle cx="0" cy="0" r="2.5" fill="#64748b"/>

        
        <text x="-82" y="85" font-size="9" fill="#4338ca" font-weight="700" text-anchor="middle">(−π/2, −1)</text>
        <text x="82" y="-80" font-size="9" fill="#4338ca" font-weight="700" text-anchor="middle">(π/2, 1)</text>

        
        <circle id="graphPoint" cx="0" cy="0" r="5.5" fill="#06b6d4" stroke="#ffffff" stroke-width="1.5"/>
      </svg>
    </div>

    
    <div class="panel-box">
      <div class="panel-title">Unit Circle (Q I & IV)</div>
      <svg id="svgCircle" viewBox="-105 -105 210 210">
        
        <line x1="-90" y1="0" x2="90" y2="0" stroke="#94a3b8" stroke-width="1.2" stroke-linecap="round"/>
        <line x1="0" y1="90" x2="0" y2="-90" stroke="#94a3b8" stroke-width="1.2" stroke-linecap="round"/>

        
        <path d="M 0,-70 A 70 70 0 0 0 0,70" fill="none" stroke="#e2e8f0" stroke-width="2" stroke-dasharray="4,4"/>

        
        
        <path d="M 0,70 A 70 70 0 0 0 0,-70" fill="none" stroke="#c7d2fe" stroke-width="7" stroke-linecap="round"/>
        
        <path d="M 0,70 A 70 70 0 0 0 0,-70" fill="none" stroke="#4338ca" stroke-width="3" stroke-linecap="round"/>

        
        <path id="circleSector" d="" fill="rgba(6, 182, 212, 0.15)"/>

        
        <line id="circleRadius" x1="0" y1="0" x2="70" y2="0" stroke="#4338ca" stroke-width="2.2" stroke-linecap="round"/>

        
        <line id="circleHeight" x1="0" y1="0" x2="0" y2="0" stroke="#06b6d4" stroke-width="2.5" stroke-linecap="round"/>
        <line id="circleProjX" x1="0" y1="0" x2="0" y2="0" stroke="#94a3b8" stroke-width="1" stroke-dasharray="2,2"/>

        
        <circle cx="0" cy="-70" r="3.5" fill="#4338ca"/>
        <circle cx="0" cy="70" r="3.5" fill="#4338ca"/>
        <circle cx="70" cy="0" r="3" fill="#4338ca"/>

        
        <text x="6" y="-76" font-size="10" fill="#4338ca" font-weight="700">π/2</text>
        <text x="6" y="84" font-size="10" fill="#4338ca" font-weight="700">−π/2</text>
        <text x="76" y="4" font-size="10" fill="#64748b" font-weight="600">0</text>
        <text x="-6" y="-80" font-size="9" fill="#94a3b8" text-anchor="end">y=1</text>
        <text x="-6" y="86" font-size="9" fill="#94a3b8" text-anchor="end">y=−1</text>

        
        <circle id="circlePoint" cx="70" cy="0" r="5.5" fill="#06b6d4" stroke="#ffffff" stroke-width="1.5"/>
      </svg>
    </div>
  </div>

  
  <div class="controls">
    <div class="slider-row">
      <span style="font-size: 13px; font-weight: 600; color: #4338ca;">Angle θ:</span>
      <input type="range" id="angleSlider" min="-1.570796" max="1.570796" step="0.01" value="0.523598">
      <div class="val-badge" id="valDisplay">θ = π/6 | sin(θ) = 0.50</div>
    </div>

    <div class="btn-group">
      <button class="preset-btn" data-angle="-1.570796">−π/2</button>
      <button class="preset-btn" data-angle="-0.523598">−π/6</button>
      <button class="preset-btn" data-angle="0">0</button>
      <button class="preset-btn active" data-angle="0.523598">π/6</button>
      <button class="preset-btn" data-angle="1.570796">π/2</button>
    </div>
  </div>

  <script>
    const X_SCALE = 50; // pixels per radian
    const Y_SCALE = 70; // pixels per unit y
    const R = 70;

    // Generate path points for sine curve
    function generateSinePath(minX, maxX) {
      let d = "";
      const steps = 60;
      for (let i = 0; i <= steps; i++) {
        const theta = minX + (maxX - minX) * (i / steps);
        const px = theta * X_SCALE;
        const py = -Math.sin(theta) * Y_SCALE;
        d += (i === 0 ? "M " : " L ") + px.toFixed(2) + " " + py.toFixed(2);
      }
      return d;
    }

    // Set static sine curves
    document.getElementById('ghostSine').setAttribute('d', generateSinePath(-Math.PI, Math.PI));
    document.getElementById('activeSine').setAttribute('d', generateSinePath(-Math.PI / 2, Math.PI / 2));

    const slider = document.getElementById('angleSlider');
    const display = document.getElementById('valDisplay');
    const buttons = document.querySelectorAll('.preset-btn');

    const graphPoint = document.getElementById('graphPoint');
    const graphProjX = document.getElementById('graphProjX');
    const graphProjY = document.getElementById('graphProjY');

    const circlePoint = document.getElementById('circlePoint');
    const circleRadius = document.getElementById('circleRadius');
    const circleHeight = document.getElementById('circleHeight');
    const circleProjX = document.getElementById('circleProjX');
    const circleSector = document.getElementById('circleSector');

    function formatAngleLabel(theta) {
      const eps = 0.05;
      if (Math.abs(theta - (-Math.PI/2)) < eps) return "−π/2";
      if (Math.abs(theta - (-Math.PI/6)) < eps) return "−π/6";
      if (Math.abs(theta - 0) < eps) return "0";
      if (Math.abs(theta - (Math.PI/6)) < eps) return "π/6";
      if (Math.abs(theta - (Math.PI/2)) < eps) return "π/2";
      return (theta >= 0 ? "+" : "") + theta.toFixed(2) + " rad";
    }

    function update(theta) {
      const sinVal = Math.sin(theta);
      const cosVal = Math.cos(theta);

      // Graph panel updates
      const gx = theta * X_SCALE;
      const gy = -sinVal * Y_SCALE;

      graphPoint.setAttribute('cx', gx);
      graphPoint.setAttribute('cy', gy);

      graphProjX.setAttribute('x1', gx);
      graphProjX.setAttribute('y1', 0);
      graphProjX.setAttribute('x2', gx);
      graphProjX.setAttribute('y2', gy);

      graphProjY.setAttribute('x1', 0);
      graphProjY.setAttribute('y1', gy);
      graphProjY.setAttribute('x2', gx);
      graphProjY.setAttribute('y2', gy);

      // Circle panel updates
      const cx = cosVal * R;
      const cy = -sinVal * R; // SVG Y is inverted

      circlePoint.setAttribute('cx', cx);
      circlePoint.setAttribute('cy', cy);

      circleRadius.setAttribute('x1', 0);
      circleRadius.setAttribute('y1', 0);
      circleRadius.setAttribute('x2', cx);
      circleRadius.setAttribute('y2', cy);

      // Height projection (sin component vertical segment on y-axis)
      circleHeight.setAttribute('x1', 0);
      circleHeight.setAttribute('y1', 0);
      circleHeight.setAttribute('x2', 0);
      circleHeight.setAttribute('y2', cy);

      circleProjX.setAttribute('x1', 0);
      circleProjX.setAttribute('y1', cy);
      circleProjX.setAttribute('x2', cx);
      circleProjX.setAttribute('y2', cy);

      // Sector wedge
      let sectorPath = "";
      if (Math.abs(theta) > 0.01) {
        const sweep = theta > 0 ? 0 : 1; // SVG arc sweep-flag for inverted y
        sectorPath = `M 0 0 L ${R} 0 A ${R} ${R} 0 0 ${sweep} ${cx} ${cy} Z`;
      }
      circleSector.setAttribute('d', sectorPath);

      // Badge text
      display.textContent = `θ = ${formatAngleLabel(theta)} | sin(θ) = ${sinVal.toFixed(2)}`;

      // Update preset buttons state
      buttons.forEach(btn => {
        const bAngle = parseFloat(btn.dataset.angle);
        btn.classList.toggle('active', Math.abs(bAngle - theta) < 0.05);
      });
    }

    slider.addEventListener('input', (e) => {
      update(parseFloat(e.target.value));
    });

    buttons.forEach(btn => {
      btn.addEventListener('click', () => {
        const val = parseFloat(btn.dataset.angle);
        slider.value = val;
        update(val);
      });
    });

    // Initialize
    update(parseFloat(slider.value));
  </script>
</body>
</html>

Restricting Domains for Trigonometric Invertibility

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #ffffff;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .main-grid {
      display: grid;
      grid-template-columns: 1.35fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 650px;
    }

    @media (max-width: 500px) {
      .main-grid {
        grid-template-columns: 1fr;
        gap: 10px;
      }
    }

    .panel {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px 10px;
      display: flex;
      flex-direction: column;
      position: relative;
    }

    .panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      font-weight: 700;
      margin-bottom: 4px;
    }

    .badge {
      font-size: 11px;
      font-weight: 700;
      padding: 2px 7px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      gap: 3px;
    }
    .badge-fail { background: #fee2e2; color: #dc2626; }
    .badge-pass { background: #dcfce7; color: #16a34a; }

    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }

    .control-bar {
      margin-top: 10px;
      width: 100%;
      max-width: 650px;
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      font-size: 13px;
      font-weight: 600;
    }

    .slider {
      flex: 1;
      accent-color: #2563eb;
      cursor: pointer;
      height: 6px;
    }

    .axis-line { stroke: #cbd5e1; stroke-width: 1.2; }
    .grid-line { stroke: #e2e8f0; stroke-dasharray: 2,2; stroke-width: 1; }
    .tick-text { font-size: 10px; fill: #64748b; font-family: monospace; }
  </style>
</head>
<body>

  <div class="main-grid">
    
    <div style="display: flex; flex-direction: column; gap: 10px;">
      
      
      <div class="panel">
        <div class="panel-header">
          <span>[-π/2, π/2]</span>
          <span class="badge badge-fail">✗ 2 Outputs</span>
        </div>
        <svg id="svgBad" viewBox="0 0 280 110">
          
          <line class="axis-line" x1="20" y1="90" x2="265" y2="90"/>
          <line class="axis-line" x1="140" y1="10" x2="140" y2="105"/>
          <text class="tick-text" x="140" y="103" text-anchor="middle">0</text>
          <text class="tick-text" x="35" y="103" text-anchor="middle">-π/2</text>
          <text class="tick-text" x="245" y="103" text-anchor="middle">π/2</text>
          <text class="tick-text" x="134" y="24" text-anchor="end">1</text>
          
          
          <path id="curveBad" fill="none" stroke="#64748b" stroke-width="2.5" stroke-linecap="round"/>
          
          
          <line id="lineBad" stroke="#ef4444" stroke-width="1.8" stroke-dasharray="4,3"/>
          <circle id="dotBadL" r="4.5" fill="#ef4444"/>
          <circle id="dotBadR" r="4.5" fill="#ef4444"/>
        </svg>
      </div>

      
      <div class="panel">
        <div class="panel-header">
          <span>[0, π]</span>
          <span class="badge badge-pass">✓ 1 Output (1-to-1)</span>
        </div>
        <svg id="svgGood" viewBox="0 0 280 125">
          
          <line class="axis-line" x1="20" y1="65" x2="265" y2="65"/>
          <line class="axis-line" x1="40" y1="10" x2="40" y2="120"/>
          <text class="tick-text" x="40" y="78" text-anchor="middle">0</text>
          <text class="tick-text" x="145" y="78" text-anchor="middle">π/2</text>
          <text class="tick-text" x="250" y="78" text-anchor="middle">π</text>
          <text class="tick-text" x="34" y="24" text-anchor="end">1</text>
          <text class="tick-text" x="34" y="114" text-anchor="end">-1</text>
          
          
          <path id="curveGood" fill="none" stroke="#16a34a" stroke-width="2.5" stroke-linecap="round"/>
          
          
          <line id="lineGood" stroke="#16a34a" stroke-width="1.8" stroke-dasharray="4,3"/>
          <circle id="dotGood" r="5" fill="#16a34a"/>
        </svg>
      </div>

    </div>

    
    <div class="panel" style="justify-content: space-between;">
      <div class="panel-header">
        <span>Unit Circle</span>
        <span class="badge badge-pass">Quadrants I & II</span>
      </div>
      
      <svg id="svgCircle" viewBox="0 0 200 210">
        
        <path d="M 25 105 A 75 75 0 0 1 175 105 Z" fill="#dcfce7" fill-opacity="0.5"/>
        
        
        <line class="axis-line" x1="15" y1="105" x2="185" y2="105"/>
        <line class="axis-line" x1="100" y1="15" x2="100" y2="195"/>
        
        
        <circle cx="100" cy="105" r="75" fill="none" stroke="#cbd5e1" stroke-width="1.5"/>
        
        <path d="M 175 105 A 75 75 0 0 0 25 105" fill="none" stroke="#16a34a" stroke-width="3"/>
        
        
        <line id="cosLine" stroke="#2563eb" stroke-width="2.5"/>
        <line id="rayGood" stroke="#16a34a" stroke-width="2"/>
        <circle id="dotCircle" r="5" fill="#16a34a"/>

        
        <text class="tick-text" x="180" y="118" text-anchor="start">0</text>
        <text class="tick-text" x="100" y="12" text-anchor="middle">π/2</text>
        <text class="tick-text" x="20" y="118" text-anchor="end">π</text>
        <text class="tick-text" x="100" y="175" text-anchor="middle" fill="#94a3b8">Q III & IV</text>
        <text class="tick-text" x="140" y="55" text-anchor="middle" fill="#16a34a" font-weight="bold">Q I</text>
        <text class="tick-text" x="60" y="55" text-anchor="middle" fill="#16a34a" font-weight="bold">Q II</text>
      </svg>
    </div>
  </div>

  
  <div class="control-bar">
    <span>Test Line: <span id="yValLabel" style="color:#2563eb;">y = 0.50</span></span>
    <input type="range" id="ySlider" class="slider" min="-0.95" max="0.95" step="0.01" value="0.5">
  </div>

  <script>
    const slider = document.getElementById('ySlider');
    const yValLabel = document.getElementById('yValLabel');

    // BAD GRAPH: Domain [-pi/2, pi/2] -> x in [35, 245], y in [1, 0] -> SVG y in [20, 90]
    // xMap: x=0 -> 140, dx = 105 / (pi/2) = 210/pi
    const xBad = (x) => 140 + x * (210 / Math.PI);
    const yBad = (y) => 90 - y * 70;

    // Build Bad Curve
    let dBad = "";
    for (let i = -50; i <= 50; i++) {
      const x = (i / 50) * (Math.PI / 2);
      const y = Math.cos(x);
      dBad += (i === -50 ? "M " : " L ") + xBad(x).toFixed(1) + " " + yBad(y).toFixed(1);
    }
    document.getElementById('curveBad').setAttribute('d', dBad);

    // GOOD GRAPH: Domain [0, pi] -> x in [40, 250], y in [1, -1] -> SVG y in [20, 110]
    // xMap: x=0 -> 40, dx = 210 / pi
    const xGood = (x) => 40 + x * (210 / Math.PI);
    const yGood = (y) => 65 - y * 45;

    // Build Good Curve
    let dGood = "";
    for (let i = 0; i <= 100; i++) {
      const x = (i / 100) * Math.PI;
      const y = Math.cos(x);
      dGood += (i === 0 ? "M " : " L ") + xGood(x).toFixed(1) + " " + yGood(y).toFixed(1);
    }
    document.getElementById('curveGood').setAttribute('d', dGood);

    // Circle params
    const cx = 100, cy = 105, r = 75;

    function update() {
      const yVal = parseFloat(slider.value);
      yValLabel.textContent = `y = ${yVal >= 0 ? ' ' : ''}${yVal.toFixed(2)}`;

      // Update Bad Graph
      const svgYBad = yBad(yVal);
      const lineBad = document.getElementById('lineBad');
      lineBad.setAttribute('x1', 20);
      lineBad.setAttribute('x2', 265);
      lineBad.setAttribute('y1', svgYBad);
      lineBad.setAttribute('y2', svgYBad);

      const dotBadL = document.getElementById('dotBadL');
      const dotBadR = document.getElementById('dotBadR');
      if (yVal >= 0) {
        const thetaBad = Math.acos(yVal);
        dotBadL.style.display = 'block';
        dotBadR.style.display = 'block';
        dotBadL.setAttribute('cx', xBad(-thetaBad));
        dotBadL.setAttribute('cy', svgYBad);
        dotBadR.setAttribute('cx', xBad(thetaBad));
        dotBadR.setAttribute('cy', svgYBad);
      } else {
        // Below 0, [-pi/2, pi/2] has no intersection
        dotBadL.style.display = 'none';
        dotBadR.style.display = 'none';
      }

      // Update Good Graph
      const svgYGood = yGood(yVal);
      const lineGood = document.getElementById('lineGood');
      lineGood.setAttribute('x1', 20);
      lineGood.setAttribute('x2', 265);
      lineGood.setAttribute('y1', svgYGood);
      lineGood.setAttribute('y2', svgYGood);

      const thetaGood = Math.acos(yVal);
      const dotGood = document.getElementById('dotGood');
      dotGood.setAttribute('cx', xGood(thetaGood));
      dotGood.setAttribute('cy', svgYGood);

      // Update Circle
      // Angle theta in standard position on unit circle
      const px = cx + r * Math.cos(thetaGood);
      const py = cy - r * Math.sin(thetaGood);

      const rayGood = document.getElementById('rayGood');
      rayGood.setAttribute('x1', cx);
      rayGood.setAttribute('y1', cy);
      rayGood.setAttribute('x2', px);
      rayGood.setAttribute('y2', py);

      const cosLine = document.getElementById('cosLine');
      cosLine.setAttribute('x1', cx);
      cosLine.setAttribute('y1', cy);
      cosLine.setAttribute('x2', px);
      cosLine.setAttribute('y2', cy);

      const dotCircle = document.getElementById('dotCircle');
      dotCircle.setAttribute('cx', px);
      dotCircle.setAttribute('cy', py);
    }

    slider.addEventListener('input', update);
    update();
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      color: #1e2945;
      background: #ffffff;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      user-select: none;
    }
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
      max-width: 580px;
      margin-bottom: 6px;
      font-size: 14px;
      font-weight: 600;
    }
    .slider-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 1;
      max-width: 280px;
    }
    input[type=range] {
      flex: 1;
      accent-color: #2563eb;
      cursor: pointer;
    }
    .presets {
      display: flex;
      gap: 6px;
    }
    .btn-preset {
      border: 1px solid #cbd5e1;
      background: #f8fafc;
      color: #1e2945;
      border-radius: 6px;
      padding: 3px 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
    }
    .btn-preset:hover {
      background: #e2e8f0;
    }
    .svg-container {
      width: 100%;
      max-width: 620px;
      aspect-ratio: 580 / 380;
    }
    svg {
      width: 100%;
      height: 100%;
      display: block;
    }
    .panel-bg {
      fill: #fafafa;
      stroke: #e2e8f0;
      stroke-width: 1;
      rx: 8;
    }
    .axis {
      stroke: #94a3b8;
      stroke-width: 1.2;
    }
    .grid-line {
      stroke: #e2e8f0;
      stroke-width: 1;
      stroke-dasharray: 3 3;
    }
    .tick-label {
      font-size: 11px;
      fill: #64748b;
      text-anchor: middle;
      font-family: system-ui, sans-serif;
    }
    .badge-fail {
      fill: #ef4444;
      font-size: 12px;
      font-weight: 700;
      text-anchor: end;
    }
    .badge-pass {
      fill: #16a34a;
      font-size: 12px;
      font-weight: 700;
      text-anchor: end;
    }
    .panel-title {
      font-size: 13px;
      font-weight: 700;
      fill: #1e2945;
    }
  </style>
</head>
<body>

  <div class="controls">
    <div class="slider-wrap">
      <span>y = <strong id="valText">0.50</strong></span>
      <input type="range" id="ySlider" min="-0.9" max="0.9" step="0.05" value="0.5">
    </div>
    <div class="presets">
      <button class="btn-preset" data-v="0.5">0.5</button>
      <button class="btn-preset" data-v="-0.5">-0.5</button>
      <button class="btn-preset" data-v="0.866">0.87</button>
    </div>
  </div>

  <div class="svg-container">
    <svg viewBox="0 0 580 380" id="graph">
      
      <rect x="10" y="8" width="560" height="172" class="panel-bg" />
      <text x="24" y="30" class="panel-title">Full Domain: y = sin(x)</text>
      <text x="556" y="30" class="badge-fail" id="topBadge">Fails: 4 Intersections ✕</text>

      <g id="topGrid"></g>
      <path id="topSine" fill="none" stroke="#64748b" stroke-width="2.5" />
      <line id="topHLine" stroke="#ef4444" stroke-width="1.8" stroke-dasharray="5 4" />
      <g id="topPoints"></g>

      
      <rect x="10" y="196" width="560" height="172" class="panel-bg" />
      <text x="24" y="218" class="panel-title">Restricted [-π/2, π/2]: Invertible</text>
      <text x="556" y="218" class="badge-pass" id="botBadge">Passes: 1 Unique Angle ✓</text>

      <g id="botGrid"></g>
      
      <path id="botSineFaded" fill="none" stroke="#cbd5e1" stroke-width="2" stroke-dasharray="4 4" />
      
      <path id="botSineActive" fill="none" stroke="#2563eb" stroke-width="3.5" stroke-linecap="round" />
      <line id="botHLine" stroke="#2563eb" stroke-width="1.8" stroke-dasharray="5 4" />
      <g id="botPoints"></g>
    </svg>
  </div>

  <script>
    const X_MIN = -2 * Math.PI;
    const X_MAX = 2 * Math.PI;
    const LEFT = 50;
    const RIGHT = 545;
    const Y_TOP_MID = 104;
    const Y_BOT_MID = 292;
    const Y_SCALE = 54; // +/- 1 maps to +/- 54px

    function toSvgX(x) {
      return LEFT + ((x - X_MIN) / (X_MAX - X_MIN)) * (RIGHT - LEFT);
    }
    function toSvgY(y, mid) {
      return mid - y * Y_SCALE;
    }

    const xTicks = [
      { v: -2 * Math.PI, l: "-2π" },
      { v: -Math.PI, l: "-π" },
      { v: -Math.PI / 2, l: "-π/2" },
      { v: 0, l: "0" },
      { v: Math.PI / 2, l: "π/2" },
      { v: Math.PI, l: "π" },
      { v: 2 * Math.PI, l: "2π" }
    ];

    function buildGrid(containerId, mid) {
      const g = document.getElementById(containerId);
      let html = `<line x1="${LEFT - 15}" y1="${mid}" x2="${RIGHT + 15}" y2="${mid}" class="axis" />`;
      const x0 = toSvgX(0);
      html += `<line x1="${x0}" y1="${mid - 60}" x2="${x0}" y2="${mid + 60}" class="axis" />`;

      // y ticks (+1, -1)
      [-1, 1].forEach(yVal => {
        const sy = toSvgY(yVal, mid);
        html += `<line x1="${LEFT - 5}" y1="${sy}" x2="${RIGHT + 5}" y2="${sy}" class="grid-line" />`;
        html += `<text x="${x0 - 8}" y="${sy + 4}" class="tick-label" style="text-anchor:end;">${yVal > 0 ? '+1' : '-1'}</text>`;
      });

      // x ticks
      xTicks.forEach(t => {
        const sx = toSvgX(t.v);
        html += `<line x1="${sx}" y1="${mid - 54}" x2="${sx}" y2="${mid + 54}" class="grid-line" />`;
        html += `<line x1="${sx}" y1="${mid - 3}" x2="${sx}" y2="${mid + 3}" class="axis" />`;
        html += `<text x="${sx}" y="${mid + 16}" class="tick-label">${t.l}</text>`;
      });
      g.innerHTML = html;
    }

    buildGrid('topGrid', Y_TOP_MID);
    buildGrid('botGrid', Y_BOT_MID);

    // Build static sine paths
    function generateSinePath(xStart, xEnd, mid) {
      let d = "";
      const steps = 140;
      for (let i = 0; i <= steps; i++) {
        const x = xStart + (i / steps) * (xEnd - xStart);
        const y = Math.sin(x);
        const sx = toSvgX(x);
        const sy = toSvgY(y, mid);
        d += (i === 0 ? `M ${sx.toFixed(1)} ${sy.toFixed(1)}` : ` L ${sx.toFixed(1)} ${sy.toFixed(1)}`);
      }
      return d;
    }

    document.getElementById('topSine').setAttribute('d', generateSinePath(X_MIN, X_MAX, Y_TOP_MID));
    document.getElementById('botSineFaded').setAttribute('d', generateSinePath(X_MIN, X_MAX, Y_BOT_MID));
    document.getElementById('botSineActive').setAttribute('d', generateSinePath(-Math.PI / 2, Math.PI / 2, Y_BOT_MID));

    const slider = document.getElementById('ySlider');
    const valText = document.getElementById('valText');

    function update(yVal) {
      valText.textContent = yVal.toFixed(2);

      // Update Horizontal lines
      const topY = toSvgY(yVal, Y_TOP_MID);
      const botY = toSvgY(yVal, Y_BOT_MID);

      const topHL = document.getElementById('topHLine');
      topHL.setAttribute('x1', LEFT - 10);
      topHL.setAttribute('y1', topY);
      topHL.setAttribute('x2', RIGHT + 10);
      topHL.setAttribute('y2', topY);

      const botHL = document.getElementById('botHLine');
      botHL.setAttribute('x1', LEFT - 10);
      botHL.setAttribute('y1', botY);
      botHL.setAttribute('x2', RIGHT + 10);
      botHL.setAttribute('y2', botY);

      // Compute intersection points
      const baseAngle = Math.asin(yVal);
      const candidates = [
        baseAngle - 2 * Math.PI,
        Math.PI - baseAngle - 2 * Math.PI,
        baseAngle,
        Math.PI - baseAngle,
        baseAngle + 2 * Math.PI,
        Math.PI - baseAngle + 2 * Math.PI
      ];

      const validInDomain = candidates.filter(x => x >= X_MIN - 0.001 && x <= X_MAX + 0.001);

      // Render Top Points (Fails HLT)
      let topPtsHtml = "";
      validInDomain.forEach(x => {
        const sx = toSvgX(x);
        topPtsHtml += `<circle cx="${sx}" cy="${topY}" r="5.5" fill="#ef4444" stroke="#ffffff" stroke-width="2" />`;
      });
      document.getElementById('topPoints').innerHTML = topPtsHtml;
      document.getElementById('topBadge').textContent = `Fails: ${validInDomain.length} Intersections ✕`;

      // Render Bottom Point (Passes HLT - exactly baseAngle in [-pi/2, pi/2])
      const botSx = toSvgX(baseAngle);
      const botPtsHtml = `
        <circle cx="${botSx}" cy="${botY}" r="6.5" fill="#2563eb" stroke="#ffffff" stroke-width="2" />
        <line x1="${botSx}" y1="${botY}" x2="${botSx}" y2="${Y_BOT_MID}" stroke="#2563eb" stroke-width="1.5" stroke-dasharray="2 2" />
      `;
      document.getElementById('botPoints').innerHTML = botPtsHtml;
    }

    slider.addEventListener('input', (e) => update(parseFloat(e.target.value)));

    document.querySelectorAll('.btn-preset').forEach(btn => {
      btn.addEventListener('click', () => {
        const v = parseFloat(btn.getAttribute('data-v'));
        slider.value = v;
        update(v);
      });
    });

    update(0.5);
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      color: #1e2945;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 8px 12px;
      user-select: none;
    }

    .diagram-area {
      width: 100%;
      max-width: 600px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    /* SVG Graph */
    .graph-container {
      width: 100%;
      position: relative;
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }

    .grid-line {
      stroke: #e2e8f0;
      stroke-width: 1;
      stroke-dasharray: 3 3;
    }
    .axis-line {
      stroke: #94a3b8;
      stroke-width: 1.5;
    }
    .midline {
      stroke: #64748b;
      stroke-width: 1.2;
      stroke-dasharray: 4 4;
    }
    .curve {
      fill: none;
      stroke: #22b7ff;
      stroke-width: 3.5;
      stroke-linecap: round;
    }
    .curve-fill {
      fill: rgba(34, 183, 255, 0.12);
      stroke: none;
    }
    .axis-text {
      font-size: 11px;
      fill: #64748b;
      font-weight: 500;
    }
    .axis-title {
      font-size: 11px;
      fill: #1e2945;
      font-weight: 700;
    }

    /* Pulsing tide markers */
    .tide-marker {
      cursor: pointer;
      transition: transform 0.2s ease;
    }
    .pulse-ring {
      fill: none;
      stroke: #0284c7;
      stroke-width: 1.5;
      animation: pulse 2s infinite ease-out;
      transform-origin: center;
    }
    @keyframes pulse {
      0% { r: 5; opacity: 1; }
      100% { r: 14; opacity: 0; }
    }

    /* Harbor Cross-section */
    .harbor-panel {
      position: relative;
      width: 100%;
      height: 90px;
      background: #f1f5f9;
      border-radius: 8px;
      overflow: hidden;
      display: flex;
      border: 1px solid #cbd5e1;
    }
    .harbor-wall {
      width: 48px;
      height: 100%;
      background: repeating-linear-gradient(
        45deg,
        #94a3b8,
        #94a3b8 6px,
        #64748b 6px,
        #64748b 12px
      );
      border-right: 2px solid #475569;
      flex-shrink: 0;
      position: relative;
    }
    .harbor-basin {
      flex: 1;
      position: relative;
      background: #e2e8f0;
      overflow: hidden;
    }
    .harbor-water {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%);
      transition: height 0.05s linear;
    }
    .water-surface {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: #bae6fd;
    }
    .boat {
      position: absolute;
      left: 50%;
      bottom: 100%;
      transform: translateX(-50%) translateY(6px);
      font-size: 24px;
      line-height: 1;
      filter: drop-shadow(0 2px 2px rgba(0,0,0,0.2));
      transition: bottom 0.05s linear;
    }
    .seabed {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 10px;
      background: #78716c;
      border-top: 2px solid #57534e;
    }
    .depth-badge {
      position: absolute;
      right: 10px;
      top: 8px;
      background: rgba(255, 255, 255, 0.95);
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 4px 8px;
      font-size: 13px;
      font-weight: 700;
      color: #0369a1;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    /* Controls */
    .controls {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .play-btn {
      background: #22b7ff;
      color: #fff;
      border: none;
      border-radius: 6px;
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 44px;
      height: 34px;
    }
    .play-btn:hover {
      background: #009be5;
    }
    .slider-wrap {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    input[type=range] {
      width: 100%;
      accent-color: #0284c7;
      cursor: pointer;
      height: 6px;
    }
    .key-buttons {
      display: flex;
      justify-content: space-between;
      gap: 4px;
      width: 100%;
    }
    .tide-tag {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 4px;
      padding: 2px 6px;
      font-size: 11px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
    }
    .tide-tag:hover {
      background: #e2e8f0;
      border-color: #94a3b8;
    }
  </style>
</head>
<body>

  <div class="diagram-area">
    
    <div class="graph-container">
      <svg id="tideSvg" viewBox="0 0 540 220">
        
        <g id="grid"></g>
        
        
        <line id="midlinePath" class="midline" x1="45" x2="520" y1="97.7" y2="97.7" />
        <text x="522" y="101" font-size="10" fill="#64748b" font-weight="600">Midline 10 ft</text>

        
        <path id="curveArea" class="curve-fill" />
        <path id="curveLine" class="curve" />

        
        <line class="axis-line" x1="45" y1="190" x2="520" y2="190" />
        <line class="axis-line" x1="45" y1="15" x2="45" y2="190" />

        
        <text class="axis-title" x="270" y="215" text-anchor="middle">Time (hours)</text>
        <text class="axis-title" x="12" y="14" text-anchor="start">Depth (ft)</text>

        
        <g id="scrubberIndicator">
          <line id="trackLine" stroke="#0284c7" stroke-width="1.5" stroke-dasharray="2 2" y1="20" y2="190" />
          <circle id="trackDot" r="6" fill="#0284c7" stroke="#ffffff" stroke-width="2" />
        </g>

        
        <g id="tidePoints"></g>
      </svg>
    </div>

    
    <div class="harbor-panel">
      <div class="harbor-wall"></div>
      <div class="harbor-basin">
        <div id="harborWater" class="harbor-water" style="height: 55%;">
          <div class="water-surface"></div>
          <div class="boat">⛵</div>
        </div>
        <div class="seabed"></div>
        <div id="depthBadge" class="depth-badge">10.0 ft</div>
      </div>
    </div>

    
    <div class="controls">
      <button id="playBtn" class="play-btn" onclick="togglePlay()">▶</button>
      <div class="slider-wrap">
        <input type="range" id="timeSlider" min="0" max="24" step="0.1" value="4" oninput="onSliderMove(this.value)">
        <div class="key-buttons">
          <button class="tide-tag" onclick="jumpTo(4)">High: 4h (16ft)</button>
          <button class="tide-tag" onclick="jumpTo(10.2)">Low: 10.2h (4ft)</button>
          <button class="tide-tag" onclick="jumpTo(16.4)">High: 16.4h (16ft)</button>
          <button class="tide-tag" onclick="jumpTo(22.6)">Low: 22.6h (4ft)</button>
        </div>
      </div>
    </div>
  </div>

  <script>
    // Formula: y(t) = 6 * cos(pi/6.2 * (t - 4)) + 10
    const xMin = 0, xMax = 24;
    const yMin = 0, yMax = 18;
    const svgLeft = 45, svgRight = 515;
    const svgTop = 20, svgBottom = 190;

    function getX(t) {
      return svgLeft + (t - xMin) / (xMax - xMin) * (svgRight - svgLeft);
    }
    function getY(v) {
      return svgBottom - (v - yMin) / (yMax - yMin) * (svgBottom - svgTop);
    }
    function tideFunc(t) {
      return 6 * Math.cos((Math.PI / 6.2) * (t - 4)) + 10;
    }

    // Build Grid & Labels
    const gridG = document.getElementById('grid');
    for (let v = 0; v <= 18; v += 3) {
      const y = getY(v);
      gridG.innerHTML += `<line class="grid-line" x1="${svgLeft}" y1="${y}" x2="${svgRight}" y2="${y}"/>`;
      gridG.innerHTML += `<text class="axis-text" x="${svgLeft - 8}" y="${y + 4}" text-anchor="end">${v}</text>`;
    }
    for (let t = 0; t <= 24; t += 4) {
      const x = getX(t);
      gridG.innerHTML += `<line class="grid-line" x1="${x}" y1="${svgTop}" x2="${x}" y2="${svgBottom}"/>`;
      gridG.innerHTML += `<text class="axis-text" x="${x}" y="${svgBottom + 14}" text-anchor="middle">${t}h</text>`;
    }

    // Build Curve Path
    let pathD = "";
    let fillD = `M ${getX(0)} ${svgBottom} `;
    for (let t = 0; t <= 24.05; t += 0.1) {
      const x = getX(t);
      const y = getY(tideFunc(t));
      if (t === 0) {
        pathD += `M ${x} ${y} `;
        fillD += `L ${x} ${y} `;
      } else {
        pathD += `L ${x} ${y} `;
        fillD += `L ${x} ${y} `;
      }
    }
    fillD += `L ${getX(24)} ${svgBottom} Z`;
    document.getElementById('curveLine').setAttribute('d', pathD);
    document.getElementById('curveArea').setAttribute('d', fillD);

    // Key Tide Points
    const keyPoints = [
      { t: 4, name: "High Tide", depth: 16 },
      { t: 10.2, name: "Low Tide", depth: 4 },
      { t: 16.4, name: "High Tide", depth: 16 },
      { t: 22.6, name: "Low Tide", depth: 4 }
    ];

    const tidePointsG = document.getElementById('tidePoints');
    keyPoints.forEach(pt => {
      const px = getX(pt.t);
      const py = getY(pt.depth);
      const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
      g.setAttribute('class', 'tide-marker');
      g.onclick = () => jumpTo(pt.t);
      g.innerHTML = `
        <circle class="pulse-ring" cx="${px}" cy="${py}" r="6"/>
        <circle cx="${px}" cy="${py}" r="4.5" fill="#0284c7" stroke="#ffffff" stroke-width="1.5"/>
        <text x="${px}" y="${pt.depth === 16 ? py - 9 : py + 16}" font-size="10" font-weight="700" fill="#0369a1" text-anchor="middle">
          ${pt.depth === 16 ? 'High (16 ft)' : 'Low (4 ft)'}
        </text>
      `;
      tidePointsG.appendChild(g);
    });

    // Scrubber & Water Level Update
    const slider = document.getElementById('timeSlider');
    const trackLine = document.getElementById('trackLine');
    const trackDot = document.getElementById('trackDot');
    const harborWater = document.getElementById('harborWater');
    const depthBadge = document.getElementById('depthBadge');

    function updateState(t) {
      t = Math.max(0, Math.min(24, t));
      slider.value = t;
      const depth = tideFunc(t);
      const x = getX(t);
      const y = getY(depth);

      trackLine.setAttribute('x1', x);
      trackLine.setAttribute('x2', x);
      trackDot.setAttribute('cx', x);
      trackDot.setAttribute('cy', y);

      // Map depth (0 to 18 ft) to harbor basin height (10% to 90%)
      const waterPct = 10 + (depth / 18) * 80;
      harborWater.style.height = `${waterPct}%`;
      depthBadge.textContent = `${t.toFixed(1)}h: ${depth.toFixed(1)} ft`;
    }

    function onSliderMove(val) {
      if (isPlaying) togglePlay();
      updateState(parseFloat(val));
    }

    function jumpTo(t) {
      if (isPlaying) togglePlay();
      updateState(t);
    }

    // Auto Play Animation
    let isPlaying = false;
    let animInterval = null;
    const playBtn = document.getElementById('playBtn');

    function togglePlay() {
      isPlaying = !isPlaying;
      playBtn.textContent = isPlaying ? '⏸' : '▶';
      if (isPlaying) {
        animInterval = setInterval(() => {
          let nextT = parseFloat(slider.value) + 0.1;
          if (nextT > 24) nextT = 0;
          updateState(nextT);
        }, 50);
      } else {
        clearInterval(animInterval);
      }
    }

    // Initial state
    updateState(4);
  </script>
</body>
</html>

Modeling Tidal and Water Depth Cycles with Sinusoids

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px 16px;
      user-select: none;
    }

    .diagram-wrap {
      width: 100%;
      max-width: 580px;
      position: relative;
    }

    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }

    .axis-line { stroke: #94a3b8; stroke-width: 1.5; }
    .grid-line { stroke: #f1f5f9; stroke-width: 1; }
    .tick-text { font-size: 11px; fill: #64748b; font-weight: 500; }
    .label-text { font-size: 12px; font-weight: 600; }

    /* Interactive control */
    .controls {
      width: 100%;
      max-width: 580px;
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 6px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 12px;
    }

    .slider {
      flex: 1;
      height: 6px;
      accent-color: #0284c7;
      cursor: pointer;
    }

    .status-badge {
      font-size: 12px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 6px;
      white-space: nowrap;
    }
    .status-safe { background: #dcfce7; color: #15803d; }
    .status-hazard { background: #fee2e2; color: #b91c1c; }
  </style>
</head>
<body>

  <div class="diagram-wrap">
    <svg id="chart" viewBox="0 0 560 340">
      <defs>
        
        <linearGradient id="safeGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#22c55e" stop-opacity="0.35"/>
          <stop offset="100%" stop-color="#22c55e" stop-opacity="0.1"/>
        </linearGradient>
        <linearGradient id="hazardGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#ef4444" stop-opacity="0.15"/>
          <stop offset="100%" stop-color="#ef4444" stop-opacity="0.05"/>
        </linearGradient>

        <marker id="arrow" viewBox="0 0 6 6" refX="3" refY="3" markerWidth="4" markerHeight="4" orient="auto-start-reverse">
          <path d="M 0 1.5 L 4.5 3 L 0 4.5 z" fill="#0284c7"/>
        </marker>
      </defs>

      
      <g id="gridLayer"></g>
      <path id="hazardArea" fill="url(#hazardGrad)"></path>
      <path id="safeArea" fill="url(#safeGrad)"></path>
      <line id="threshLine" stroke="#e11d48" stroke-width="1.75" stroke-dasharray="4,4"></line>
      <path id="curvePath" fill="none" stroke="#0284c7" stroke-width="3"></path>

      
      <g id="annotLayer">
        
        <rect x="420" y="112" width="105" height="20" rx="4" fill="#fff" stroke="#fda4af" stroke-width="1"/>
        <text x="472" y="126" text-anchor="middle" font-size="11" font-weight="700" fill="#e11d48">Draft: 13 ft</text>

        
        <rect x="230" y="98" width="100" height="20" rx="4" fill="#dcfce7" stroke="#86efac" stroke-width="1"/>
        <text x="280" y="112" text-anchor="middle" font-size="11" font-weight="700" fill="#15803d">Safe Window (≥13 ft)</text>

        
        <text x="75" y="240" font-size="12" font-weight="700" fill="#b91c1c">Hazard Zone (&lt;13 ft)</text>

        
        <circle id="peakDot" r="4.5" fill="#0284c7" stroke="#fff" stroke-width="1.5"></circle>
        <text x="280" y="32" text-anchor="middle" font-size="12" font-weight="700" fill="#0369a1">Peak: 4:00 AM (17 ft)</text>

        
        <line id="arrLeft" stroke="#0284c7" stroke-width="1.5" marker-end="url(#arrow)" marker-start="url(#arrow)"></line>
        <line id="arrRight" stroke="#0284c7" stroke-width="1.5" marker-end="url(#arrow)" marker-start="url(#arrow)"></line>
        
        <text id="txtLeft" text-anchor="middle" font-size="11" font-weight="600" fill="#0369a1"></text>
        <text id="txtRight" text-anchor="middle" font-size="11" font-weight="600" fill="#0369a1"></text>

        
        <line id="vGuide1" stroke="#22c55e" stroke-width="1" stroke-dasharray="3,3"></line>
        <line id="vGuide2" stroke="#22c55e" stroke-width="1" stroke-dasharray="3,3"></line>
      </g>

      
      <g id="tracker">
        <line id="trackLine" stroke="#64748b" stroke-width="1" stroke-dasharray="2,2"></line>
        <circle id="trackDot" r="6" fill="#0284c7" stroke="#fff" stroke-width="2"></circle>
        <text id="trackLabel" font-size="18" text-anchor="middle">⛵</text>
      </g>
    </svg>
  </div>

  
  <div class="controls">
    <span style="font-size: 12px; font-weight: 600; color: #475569;">Time:</span>
    <input type="range" id="timeSlider" class="slider" min="0" max="8" step="0.02" value="4">
    <div id="statusBadge" class="status-badge status-safe">17.0 ft • Safe</div>
  </div>

  <script>
    // Coordinate mapping & tidal math
    // y(t) = 9 + 8 * cos( pi / 6.21 * (t - 4) )
    // Safe threshold: y = 13 ft => t in [1.93, 6.07]
    const W = 560, H = 340;
    const padL = 48, padR = 24, padT = 44, padB = 40;
    const plotW = W - padL - padR;
    const plotH = H - padT - padB;

    const tMin = 0, tMax = 8;
    const yMin = 0, yMax = 20;

    function fx(t) { return padL + ((t - tMin) / (tMax - tMin)) * plotW; }
    function fy(y) { return padT + ((yMax - y) / (yMax - yMin)) * plotH; }
    function depth(t) { return 9 + 8 * Math.cos((Math.PI / 6.21) * (t - 4)); }

    // Render static grid & mathematically exact curves
    const gridLayer = document.getElementById('gridLayer');
    
    // Y-Grid
    for (let y = 0; y <= 20; y += 4) {
      const yPos = fy(y);
      const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      line.setAttribute('x1', padL);
      line.setAttribute('x2', W - padR);
      line.setAttribute('y1', yPos);
      line.setAttribute('y2', yPos);
      line.setAttribute('class', y === 0 ? 'axis-line' : 'grid-line');
      gridLayer.appendChild(line);

      const txt = document.createElementNS('http://www.w3.org/2000/svg', 'text');
      txt.setAttribute('x', padL - 8);
      txt.setAttribute('y', yPos + 4);
      txt.setAttribute('text-anchor', 'end');
      txt.setAttribute('class', 'tick-text');
      txt.textContent = y + ' ft';
      gridLayer.appendChild(txt);
    }

    // X-Grid
    const timeLabels = ['12 AM', '1 AM', '2 AM', '3 AM', '4 AM', '5 AM', '6 AM', '7 AM', '8 AM'];
    for (let t = 0; t <= 8; t += 1) {
      const xPos = fx(t);
      const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      line.setAttribute('x1', xPos);
      line.setAttribute('x2', xPos);
      line.setAttribute('y1', padT);
      line.setAttribute('y2', H - padB);
      line.setAttribute('class', 'grid-line');
      gridLayer.appendChild(line);

      const txt = document.createElementNS('http://www.w3.org/2000/svg', 'text');
      txt.setAttribute('x', xPos);
      txt.setAttribute('y', H - padB + 18);
      txt.setAttribute('text-anchor', 'middle');
      txt.setAttribute('class', 'tick-text');
      txt.textContent = timeLabels[t];
      gridLayer.appendChild(txt);
    }

    // Build Curve Path & Shaded Polygons
    let dCurve = '';
    const nSteps = 160;
    for (let i = 0; i <= nSteps; i++) {
      const t = tMin + (i / nSteps) * (tMax - tMin);
      const x = fx(t);
      const y = fy(depth(t));
      dCurve += (i === 0 ? 'M' : 'L') + ` ${x.toFixed(2)} ${y.toFixed(2)}`;
    }
    document.getElementById('curvePath').setAttribute('d', dCurve);

    // Hazard Area (entire region under y=13 down to datum)
    const y13Pos = fy(13);
    const y0Pos = fy(0);
    let dHazard = `M ${fx(0)} ${y13Pos} L ${fx(8)} ${y13Pos} L ${fx(8)} ${y0Pos} L ${fx(0)} ${y0Pos} Z`;
    document.getElementById('hazardArea').setAttribute('d', dHazard);

    // Safe Area (under curve between t=1.93 and t=6.07, down to y=13)
    const t1 = 1.93, t2 = 6.07;
    let dSafe = `M ${fx(t1)} ${y13Pos}`;
    const safeSteps = 60;
    for (let i = 0; i <= safeSteps; i++) {
      const t = t1 + (i / safeSteps) * (t2 - t1);
      dSafe += ` L ${fx(t).toFixed(2)} ${fy(depth(t)).toFixed(2)}`;
    }
    dSafe += ` L ${fx(t2)} ${y13Pos} Z`;
    document.getElementById('safeArea').setAttribute('d', dSafe);

    // Threshold Line
    const thresh = document.getElementById('threshLine');
    thresh.setAttribute('x1', padL);
    thresh.setAttribute('x2', W - padR);
    thresh.setAttribute('y1', y13Pos);
    thresh.setAttribute('y2', y13Pos);

    // Peak dot
    const peakDot = document.getElementById('peakDot');
    peakDot.setAttribute('cx', fx(4));
    peakDot.setAttribute('cy', fy(17));

    // Vertical guides at 1.93 and 6.07
    const vg1 = document.getElementById('vGuide1');
    vg1.setAttribute('x1', fx(t1)); vg1.setAttribute('x2', fx(t1));
    vg1.setAttribute('y1', y13Pos); vg1.setAttribute('y2', H - padB);

    const vg2 = document.getElementById('vGuide2');
    vg2.setAttribute('x1', fx(t2)); vg2.setAttribute('x2', fx(t2));
    vg2.setAttribute('y1', y13Pos); vg2.setAttribute('y2', H - padB);

    // Interval Arrows
    const arrY = 56;
    const aL = document.getElementById('arrLeft');
    aL.setAttribute('x1', fx(t1) + 4); aL.setAttribute('x2', fx(4) - 4);
    aL.setAttribute('y1', arrY); aL.setAttribute('y2', arrY);

    const aR = document.getElementById('arrRight');
    aR.setAttribute('x1', fx(4) + 4); aR.setAttribute('x2', fx(t2) - 4);
    aR.setAttribute('y1', arrY); aR.setAttribute('y2', arrY);

    const txtL = document.getElementById('txtLeft');
    txtL.setAttribute('x', (fx(t1) + fx(4)) / 2);
    txtL.setAttribute('y', arrY - 6);
    txtL.textContent = 'Δt = -2.07h (1:56 AM)';

    const txtR = document.getElementById('txtRight');
    txtR.setAttribute('x', (fx(4) + fx(t2)) / 2);
    txtR.setAttribute('y', arrY - 6);
    txtR.textContent = 'Δt = +2.07h (6:04 AM)';

    // Interactive slider logic
    const slider = document.getElementById('timeSlider');
    const trackLine = document.getElementById('trackLine');
    const trackDot = document.getElementById('trackDot');
    const trackLabel = document.getElementById('trackLabel');
    const statusBadge = document.getElementById('statusBadge');

    function updateTracker(t) {
      const d = depth(t);
      const px = fx(t);
      const py = fy(d);

      trackLine.setAttribute('x1', px);
      trackLine.setAttribute('x2', px);
      trackLine.setAttribute('y1', py);
      trackLine.setAttribute('y2', H - padB);

      trackDot.setAttribute('cx', px);
      trackDot.setAttribute('cy', py);

      trackLabel.setAttribute('x', px);
      trackLabel.setAttribute('y', py - 10);

      const isSafe = d >= 13;
      statusBadge.className = 'status-badge ' + (isSafe ? 'status-safe' : 'status-hazard');
      statusBadge.textContent = `${d.toFixed(1)} ft • ${isSafe ? 'Safe Depth' : 'Hazard (<13 ft)'}`;
    }

    slider.addEventListener('input', (e) => {
      updateTracker(parseFloat(e.target.value));
    });

    updateTracker(4);
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <title>Tidal Sinusoid Model</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      width: 100%;
      background: #f8f9fa;
      color: #1e2945;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* Top Equation Bar */
    .eq-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 15px;
      font-weight: 700;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 6px 12px;
      flex-wrap: wrap;
    }

    .eq-tag {
      padding: 2px 6px;
      border-radius: 6px;
      font-weight: 700;
      transition: background 0.2s, color 0.2s;
    }
    .tag-a { color: #0284c7; background: #e0f2fe; }
    .tag-b { color: #d97706; background: #fef3c7; }
    .tag-c { color: #059669; background: #d1fae5; }
    .tag-d { color: #7c3aed; background: #ede9fe; }

    /* SVG Graph Container */
    .graph-container {
      width: 100%;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 4px;
      position: relative;
    }

    svg {
      width: 100%;
      height: auto;
      display: block;
    }

    /* Highlight transitions */
    .graph-elem {
      transition: opacity 0.25s ease, stroke-width 0.25s ease;
    }

    .dimmed {
      opacity: 0.18 !important;
    }

    .active-elem {
      opacity: 1 !important;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.12));
    }

    /* Cards Grid */
    .cards-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
    }

    @media (max-width: 520px) {
      .cards-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .eq-bar {
        font-size: 13px;
      }
    }

    .param-card {
      background: #ffffff;
      border: 2px solid transparent;
      border-radius: 10px;
      padding: 8px 10px;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
      user-select: none;
    }

    .param-card.active {
      box-shadow: 0 3px 8px rgba(0,0,0,0.1);
    }

    .card-d { border-color: #ede9fe; }
    .card-d.active { border-color: #7c3aed; background: #faf5ff; }

    .card-a { border-color: #e0f2fe; }
    .card-a.active { border-color: #0284c7; background: #f0f9ff; }

    .card-t { border-color: #fef3c7; }
    .card-t.active { border-color: #d97706; background: #fffbeb; }

    .card-c { border-color: #d1fae5; }
    .card-c.active { border-color: #059669; background: #ecfdf5; }

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 2px;
    }

    .param-title {
      font-size: 13px;
      font-weight: 700;
    }
    .card-d .param-title { color: #7c3aed; }
    .card-a .param-title { color: #0284c7; }
    .card-t .param-title { color: #d97706; }
    .card-c .param-title { color: #059669; }

    .param-formula {
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    }

    .param-sub {
      font-size: 11px;
      color: #64748b;
      margin-top: 1px;
    }
  </style>
</head>
<body>

  
  <div class="eq-bar">
    <span>Depth:</span>
    <span>y =</span>
    <span class="eq-tag tag-a" id="tagA">A</span>
    <span>cos(</span>
    <span class="eq-tag tag-b" id="tagB">B</span>
    <span>(t −</span>
    <span class="eq-tag tag-c" id="tagC">C</span>
    <span>)) +</span>
    <span class="eq-tag tag-d" id="tagD">D</span>
  </div>

  
  <div class="graph-container">
    <svg viewBox="0 0 580 270" id="waveSvg" aria-label="Tidal sinusoid graph showing High Tide, Low Tide, Midline, Amplitude, Period, and Shift">
      <defs>
        
        <marker id="arrowUp" markerWidth="6" markerHeight="6" refX="3" refY="1.5" orient="auto">
          <polygon points="0 6, 3 0, 6 6" fill="#0284c7" />
        </marker>
        <marker id="arrowDown" markerWidth="6" markerHeight="6" refX="3" refY="4.5" orient="auto">
          <polygon points="0 0, 3 6, 6 0" fill="#0284c7" />
        </marker>
        <marker id="arrowLeft" markerWidth="6" markerHeight="6" refX="1.5" refY="3" orient="auto">
          <polygon points="6 0, 0 3, 6 6" fill="#d97706" />
        </marker>
        <marker id="arrowRight" markerWidth="6" markerHeight="6" refX="4.5" refY="3" orient="auto">
          <polygon points="0 0, 6 3, 0 6" fill="#d97706" />
        </marker>
        <marker id="arrowRightC" markerWidth="6" markerHeight="6" refX="4.5" refY="3" orient="auto">
          <polygon points="0 0, 6 3, 0 6" fill="#059669" />
        </marker>

        
        <linearGradient id="waterGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#0284c7" stop-opacity="0.22" />
          <stop offset="100%" stop-color="#0284c7" stop-opacity="0.03" />
        </linearGradient>
      </defs>

      
      <g stroke="#f1f5f9" stroke-width="1">
        <line x1="60" y1="35" x2="550" y2="35" />
        <line x1="60" y1="80" x2="550" y2="80" />
        <line x1="60" y1="130" x2="550" y2="130" />
        <line x1="60" y1="180" x2="550" y2="180" />
        <line x1="60" y1="225" x2="550" y2="225" />

        <line x1="125" y1="25" x2="125" y2="230" />
        <line x1="195" y1="25" x2="195" y2="230" />
        <line x1="265" y1="25" x2="265" y2="230" />
        <line x1="335" y1="25" x2="335" y2="230" />
        <line x1="405" y1="25" x2="405" y2="230" />
        <line x1="475" y1="25" x2="475" y2="230" />
        <line x1="545" y1="25" x2="545" y2="230" />
      </g>

      
      <line x1="55" y1="230" x2="555" y2="230" stroke="#94a3b8" stroke-width="1.5" />
      <line x1="55" y1="20" x2="55" y2="230" stroke="#94a3b8" stroke-width="1.5" />

      
      
      <text x="46" y="40" font-size="11" fill="#64748b" text-anchor="end" font-weight="600">Max</text>
      <text x="46" y="134" font-size="11" fill="#7c3aed" text-anchor="end" font-weight="700">D</text>
      <text x="46" y="228" font-size="11" fill="#64748b" text-anchor="end" font-weight="600">Min</text>
      <text x="24" y="26" font-size="11" fill="#64748b" font-weight="600" text-anchor="start">Depth</text>

      
      <text x="55" y="246" font-size="11" fill="#64748b" text-anchor="middle">0</text>
      <text x="125" y="246" font-size="11" fill="#059669" text-anchor="middle" font-weight="700">t = C</text>
      <text x="335" y="246" font-size="11" fill="#64748b" text-anchor="middle">Low</text>
      <text x="545" y="246" font-size="11" fill="#d97706" text-anchor="middle" font-weight="700">C + T</text>
      <text x="555" y="246" font-size="11" fill="#64748b" font-weight="600" text-anchor="end">Time (t) →</text>

      
      <path id="waterArea" fill="url(#waterGrad)" class="graph-elem"
        d="M 55,230 
           L 55,62.8
           C 78,41 101,36 125,36 
           C 177,36 230,130 282,192
           C 308,223 321,224 335,224 
           C 349,224 362,223 388,192 
           C 440,130 493,36 545,36 
           L 545,230 Z" />

      
      <path id="waveCurve" fill="none" stroke="#0284c7" stroke-width="3.2" stroke-linecap="round"
        d="M 55,62.8 
           C 78,41 101,36 125,36 
           C 177,36 230,130 282,192
           C 308,223 321,224 335,224 
           C 349,224 362,223 388,192 
           C 440,130 493,36 545,36" />

      
      <g id="elemD" class="graph-elem">
        <line x1="55" y1="130" x2="550" y2="130" stroke="#7c3aed" stroke-width="2" stroke-dasharray="6,4" />
        <rect x="235" y="118" width="104" height="23" rx="5" fill="#ede9fe" />
        <text x="287" y="134" fill="#7c3aed" font-size="12" font-weight="700" text-anchor="middle">Midline (D)</text>
      </g>

      
      <g id="elemA" class="graph-elem">
        <line x1="125" y1="130" x2="195" y2="130" stroke="#94a3b8" stroke-width="1" stroke-dasharray="2,2" />
        <line x1="125" y1="36" x2="195" y2="36" stroke="#94a3b8" stroke-width="1" stroke-dasharray="2,2" />
        
        <line x1="185" y1="46" x2="185" y2="120" stroke="#0284c7" stroke-width="2.5" marker-start="url(#arrowUp)" marker-end="url(#arrowDown)" />
        <rect x="195" y="72" width="94" height="22" rx="4" fill="#e0f2fe" />
        <text x="242" y="87" fill="#0284c7" font-size="12" font-weight="700" text-anchor="middle">Amplitude (A)</text>
      </g>

      
      <g id="elemT" class="graph-elem">
        <line x1="125" y1="36" x2="125" y2="15" stroke="#d97706" stroke-width="1" stroke-dasharray="2,2" />
        <line x1="545" y1="36" x2="545" y2="15" stroke="#d97706" stroke-width="1" stroke-dasharray="2,2" />
        
        <line x1="135" y1="20" x2="535" y2="20" stroke="#d97706" stroke-width="2.5" marker-start="url(#arrowLeft)" marker-end="url(#arrowRight)" />
        <rect x="300" y="9" width="70" height="22" rx="4" fill="#fef3c7" />
        <text x="335" y="24" fill="#d97706" font-size="12" font-weight="700" text-anchor="middle">Period (T)</text>
      </g>

      
      <g id="elemC" class="graph-elem">
        <line x1="125" y1="36" x2="125" y2="230" stroke="#059669" stroke-width="1.2" stroke-dasharray="3,3" />
        
        <line x1="57" y1="48" x2="117" y2="48" stroke="#059669" stroke-width="2" marker-end="url(#arrowRightC)" />
        <rect x="62" y="54" width="58" height="20" rx="4" fill="#d1fae5" />
        <text x="91" y="68" fill="#059669" font-size="11" font-weight="700" text-anchor="middle">Shift (C)</text>
      </g>

      
      
      <circle cx="125" cy="36" r="5" fill="#0284c7" stroke="#ffffff" stroke-width="2" />
      <text x="125" y="52" fill="#0284c7" font-size="11" font-weight="700" text-anchor="middle">High Tide</text>

      
      <circle cx="335" cy="224" r="5" fill="#0284c7" stroke="#ffffff" stroke-width="2" />
      <text x="335" y="214" fill="#0284c7" font-size="11" font-weight="700" text-anchor="middle">Low Tide</text>

      
      <circle cx="545" cy="36" r="5" fill="#0284c7" stroke="#ffffff" stroke-width="2" />
      <text x="535" y="52" fill="#0284c7" font-size="11" font-weight="700" text-anchor="end">High Tide</text>
    </svg>
  </div>

  
  <div class="cards-grid">
    <div class="param-card card-d active" id="cardD" onclick="selectParam('D')">
      <div class="card-header">
        <span class="param-title">Midline (D)</span>
      </div>
      <div class="param-formula">D = (Max + Min) / 2</div>
      <div class="param-sub">Vertical center / Avg depth</div>
    </div>

    <div class="param-card card-a active" id="cardA" onclick="selectParam('A')">
      <div class="card-header">
        <span class="param-title">Amplitude (A)</span>
      </div>
      <div class="param-formula">A = (Max − Min) / 2</div>
      <div class="param-sub">Peak height from midline</div>
    </div>

    <div class="param-card card-t active" id="cardT" onclick="selectParam('T')">
      <div class="card-header">
        <span class="param-title">Period & B</span>
      </div>
      <div class="param-formula">B = 2π / T</div>
      <div class="param-sub">T = Time peak to peak</div>
    </div>

    <div class="param-card card-c active" id="cardC" onclick="selectParam('C')">
      <div class="card-header">
        <span class="param-title">Shift (C)</span>
      </div>
      <div class="param-formula">C = First Peak Time</div>
      <div class="param-sub">Horizontal peak offset</div>
    </div>
  </div>

  <script>
    let activeSelection = 'ALL';

    const params = ['D', 'A', 'T', 'C'];

    function selectParam(paramKey) {
      if (activeSelection === paramKey) {
        // Toggle back to showing all
        activeSelection = 'ALL';
      } else {
        activeSelection = paramKey;
      }
      updateView();
    }

    function updateView() {
      params.forEach(p => {
        const card = document.getElementById('card' + p);
        const elem = document.getElementById('elem' + p);
        const tag = document.getElementById('tag' + (p === 'T' ? 'B' : p));

        if (activeSelection === 'ALL' || activeSelection === p) {
          card.classList.add('active');
          elem.classList.remove('dimmed');
          elem.classList.add('active-elem');
          if (tag) tag.style.opacity = '1';
        } else {
          card.classList.remove('active');
          elem.classList.add('dimmed');
          elem.classList.remove('active-elem');
          if (tag) tag.style.opacity = '0.35';
        }
      });
    }

    // Initialize all visible
    updateView();
  </script>
</body>
</html>

Amplitude and Vertical Shifts of Sinusoidal Functions

Period, Frequency, and Horizontal Scaling of Trig Graphs

Phase Shifts and Horizontal Translations in Sinusoidal Graphs

Graphing and Analyzing the Tangent Function

OGM.12.TRG.2

Aligned learning resources

Related diagrams