<!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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background: transparent;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px;
      min-height: 100%;
    }

    .main-grid {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: 16px;
      width: 100%;
      max-width: 660px;
      align-items: center;
    }

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

    /* Diagram Viewport (card container removed) */
    .svg-container {
      width: 100%;
      aspect-ratio: 1 / 1;
      max-height: 360px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

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

    /* Side Information Panel (card container removed) */
    .info-card {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .card-title {
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
      text-align: center;
    }

    .repr-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 12px;
      background: #f8fafc;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      transition: background 0.3s ease, border-color 0.3s ease;
    }

    .repr-row:hover {
      background: #f1f5f9;
      border-color: #cbd5e1;
    }

    .repr-label {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      text-transform: uppercase;
    }

    .math-text {
      font-family: "Cambria Math", "Times New Roman", serif;
      font-size: 17px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 3px;
    }

    /* Column Vector Bracket styling */
    .col-vec {
      display: inline-flex;
      align-items: center;
      font-family: "Cambria Math", "Times New Roman", serif;
      font-size: 15px;
      line-height: 1.15;
    }
    .bracket-left {
      border-left: 2px solid #1e293b;
      border-top: 2px solid #1e293b;
      border-bottom: 2px solid #1e293b;
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
      width: 5px;
      height: 48px;
      margin-right: 4px;
    }
    .bracket-right {
      border-right: 2px solid #1e293b;
      border-top: 2px solid #1e293b;
      border-bottom: 2px solid #1e293b;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
      width: 5px;
      height: 48px;
      margin-left: 4px;
    }
    .col-stack {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-weight: 700;
    }

    /* Highlight Badges */
    .val-x { color: #dc2626; font-weight: 700; }
    .val-y { color: #059669; font-weight: 700; }
    .val-z { color: #7c3aed; font-weight: 700; }
    .val-v { color: #2563eb; font-weight: 700; }

    /* Interactive Filter Buttons */
    .filter-bar {
      display: flex;
      gap: 6px;
      margin-top: 4px;
      justify-content: center;
      flex-wrap: wrap;
    }

    .pill-btn {
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #475569;
      font-size: 11px;
      font-weight: 700;
      padding: 5px 9px;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.3s ease;
      outline: none;
    }
    .pill-btn:hover { background: #f1f5f9; }
    .pill-btn.active {
      background: #1e293b;
      color: #ffffff;
      border-color: #1e293b;
    }

    /* SVG Transitions (at least 300ms for smooth state changes) */
    .dimmed { opacity: 0.15 !important; }
    .emphasized { stroke-width: 3.5px !important; }
    path, line, text, circle { transition: opacity 0.35s ease, stroke 0.35s ease, fill 0.35s ease; }
  </style>
</head>
<body>

  <div class="main-grid">
    
    <div class="svg-container">
      <svg viewBox="0 0 360 340">
        <defs>
          
          <marker id="arrow-x" viewBox="0 0 10 10" refX="7" 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="#dc2626"/>
          </marker>
          <marker id="arrow-y" viewBox="0 0 10 10" refX="7" 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="#059669"/>
          </marker>
          <marker id="arrow-z" viewBox="0 0 10 10" refX="7" 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="#7c3aed"/>
          </marker>
          <marker id="arrow-v" viewBox="0 0 10 10" refX="7" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
            <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#2563eb"/>
          </marker>
          <marker id="arrow-axis" viewBox="0 0 10 10" refX="7" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
            <path d="M 0 2 L 7 5 L 0 8 z" fill="#94a3b8"/>
          </marker>
        </defs>

        
        <g stroke="#e2e8f0" stroke-width="1" stroke-dasharray="3,3">
          <line x1="160" y1="230" x2="270.8" y2="294" />
          <line x1="104.6" y1="262" x2="215.4" y2="326" />
        </g>

        
        
        <line class="axis-elem" x1="160" y1="230" x2="63.0" y2="286.0" stroke="#94a3b8" stroke-width="1.75" marker-end="url(#arrow-axis)"/>
        <text class="axis-elem" x="52" y="296" font-size="14" font-weight="700" fill="#dc2626" text-anchor="middle">+x</text>

        
        <line class="axis-elem" x1="160" y1="230" x2="298.5" y2="310.0" stroke="#94a3b8" stroke-width="1.75" marker-end="url(#arrow-axis)"/>
        <text class="axis-elem" x="310" y="318" font-size="14" font-weight="700" fill="#059669" text-anchor="middle">+y</text>

        
        <line class="axis-elem" x1="160" y1="230" x2="160" y2="38" stroke="#94a3b8" stroke-width="1.75" marker-end="url(#arrow-axis)"/>
        <text class="axis-elem" x="160" y="28" font-size="14" font-weight="700" fill="#7c3aed" text-anchor="middle">+z</text>

        
        <g stroke="#cbd5e1" stroke-width="1.5" stroke-dasharray="4,4" fill="none">
          
          <path id="box-xy" class="comp-x comp-y" d="M 104.6 262 L 187.7 310 L 243.1 278" />
          
          <line id="pillar-x" class="comp-x comp-z" x1="104.6" y1="262" x2="104.6" y2="134" />
          <line id="pillar-xy" class="comp-x comp-y comp-z" x1="187.7" y1="310" x2="187.7" y2="182" stroke="#94a3b8" stroke-width="1.75"/>
          <line id="pillar-y" class="comp-y comp-z" x1="243.1" y1="278" x2="243.1" y2="150" />
          
          <path id="box-top" class="comp-x comp-y comp-z" d="M 160 102 L 104.6 134 L 187.7 182 L 243.1 150 Z" fill="rgba(37, 99, 235, 0.04)"/>
        </g>

        
        
        <g class="comp-i">
          <line x1="160" y1="230" x2="132.3" y2="246" stroke="#dc2626" stroke-width="3" marker-end="url(#arrow-x)"/>
          <text x="120" y="248" font-size="13" font-weight="700" fill="#dc2626">i</text>
          <path d="M 120 237 L 124 235 L 122 237" stroke="#dc2626" stroke-width="1.2" fill="none"/>
        </g>

        
        <g class="comp-j">
          <line x1="160" y1="230" x2="187.7" y2="246" stroke="#059669" stroke-width="3" marker-end="url(#arrow-y)"/>
          <text x="194" y="243" font-size="13" font-weight="700" fill="#059669">j</text>
          <path d="M 194 232 L 198 230 L 196 232" stroke="#059669" stroke-width="1.2" fill="none"/>
        </g>

        
        <g class="comp-k">
          <line x1="160" y1="230" x2="160" y2="198" stroke="#7c3aed" stroke-width="3" marker-end="url(#arrow-z)"/>
          <text x="168" y="202" font-size="13" font-weight="700" fill="#7c3aed">k</text>
          <path d="M 168 191 L 172 189 L 170 191" stroke="#7c3aed" stroke-width="1.2" fill="none"/>
        </g>

        
        <g class="comp-v">
          <line x1="160" y1="230" x2="187.7" y2="182" stroke="#2563eb" stroke-width="3.5" marker-end="url(#arrow-v)"/>
          <circle cx="187.7" cy="182" r="3.5" fill="#2563eb"/>
          <text x="198" y="176" font-size="14" font-weight="700" fill="#2563eb">(2, 3, 4)</text>
          <text x="162" y="172" font-size="16" font-weight="800" fill="#2563eb">v</text>
          <path d="M 161 159 L 171 159" stroke="#2563eb" stroke-width="1.8"/>
        </g>

        
        <circle cx="160" cy="230" r="3.5" fill="#64748b"/>
        <text x="146" y="222" font-size="11" font-weight="600" fill="#64748b" text-anchor="end">(0,0,0)</text>
      </svg>
    </div>

    
    <div class="info-card">
      <div class="card-title">Vector Representations</div>

      
      <div class="repr-row" id="row-bracket">
        <span class="repr-label">Component</span>
        <div class="math-text">
          <span>⟨</span>
          <span class="val-x">2</span><span>,</span>
          <span class="val-y" style="margin-left: 2px;">3</span><span>,</span>
          <span class="val-z" style="margin-left: 2px;">4</span>
          <span>⟩</span>
        </div>
      </div>

      
      <div class="repr-row" id="row-col">
        <span class="repr-label">Column</span>
        <div class="col-vec">
          <div class="bracket-left"></div>
          <div class="col-stack">
            <span class="val-x">2</span>
            <span class="val-y">3</span>
            <span class="val-z">4</span>
          </div>
          <div class="bracket-right"></div>
        </div>
      </div>

      
      <div class="repr-row" id="row-ijk">
        <span class="repr-label">Unit Vectors</span>
        <div class="math-text" style="font-size: 15px;">
          <span class="val-x">2i</span>
          <span style="color: #64748b; margin: 0 1px;">+</span>
          <span class="val-y">3j</span>
          <span style="color: #64748b; margin: 0 1px;">+</span>
          <span class="val-z">4k</span>
        </div>
      </div>

      
      <div class="filter-bar">
        <button class="pill-btn active" onclick="setFocus('all', this)">All</button>
        <button class="pill-btn" onclick="setFocus('i', this)">2i (x)</button>
        <button class="pill-btn" onclick="setFocus('j', this)">3j (y)</button>
        <button class="pill-btn" onclick="setFocus('k', this)">4k (z)</button>
        <button class="pill-btn" onclick="setFocus('v', this)">v</button>
      </div>
    </div>
  </div>

  <script>
    function setFocus(type, btn) {
      document.querySelectorAll('.pill-btn').forEach(b => b.classList.remove('active'));
      btn.classList.add('active');

      const allSvgGroups = document.querySelectorAll('.comp-i, .comp-j, .comp-k, .comp-v, #box-xy, #pillar-x, #pillar-y, #pillar-xy, #box-top');
      const allVals = document.querySelectorAll('.val-x, .val-y, .val-z');

      if (type === 'all') {
        allSvgGroups.forEach(el => el.classList.remove('dimmed'));
        allVals.forEach(el => el.classList.remove('dimmed'));
        return;
      }

      allSvgGroups.forEach(el => el.classList.add('dimmed'));
      allVals.forEach(el => el.classList.add('dimmed'));

      if (type === 'i') {
        document.querySelectorAll('.comp-i, .val-x').forEach(el => el.classList.remove('dimmed'));
      } else if (type === 'j') {
        document.querySelectorAll('.comp-j, .val-y').forEach(el => el.classList.remove('dimmed'));
      } else if (type === 'k') {
        document.querySelectorAll('.comp-k, .val-z').forEach(el => el.classList.remove('dimmed'));
      } else if (type === 'v') {
        document.querySelectorAll('.comp-v, .val-x, .val-y, .val-z, #box-xy, #pillar-xy, #box-top').forEach(el => el.classList.remove('dimmed'));
      }
    }
  </script>
</body>
</html>

Vector Representations: Column Form and i-j-k Unit Vectors

<!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: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 10px;
      gap: 8px;
      user-select: none;
    }

    .stepper {
      display: flex;
      gap: 6px;
      width: 100%;
      max-width: 440px;
    }
    .step-btn {
      flex: 1;
      padding: 6px 4px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      background: #f8fafc;
      color: #64748b;
      cursor: pointer;
      text-align: center;
      transition: all 0.25s ease;
    }
    .step-btn.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
      box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
    }

    .main-stage {
      position: relative;
      width: 100%;
      max-width: 480px;
      aspect-ratio: 16 / 10;
      display: flex;
      align-items: center;
      justify-content: center;
    }

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

    /* SVG Elements styling & transitions */
    .edge-box {
      stroke: #cbd5e1;
      stroke-width: 1.5;
      fill: none;
    }
    .edge-box-dash {
      stroke: #cbd5e1;
      stroke-width: 1.5;
      stroke-dasharray: 4 3;
      fill: none;
    }
    .edge-axis {
      stroke-width: 2.5;
      stroke-linecap: round;
    }
    .plane-fill {
      transition: fill-opacity 0.3s ease, stroke-opacity 0.3s ease;
    }
    .label-text {
      font-size: 13px;
      font-weight: 700;
      text-anchor: middle;
      dominant-baseline: central;
    }

    /* Math Card */
    .calc-card {
      width: 100%;
      max-width: 440px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px 12px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      text-align: center;
    }
    .calc-formula {
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
      letter-spacing: 0.2px;
    }
    .calc-sub {
      font-size: 13px;
      font-weight: 600;
      color: #2563eb;
    }
  </style>
</head>
<body>

  
  <div class="stepper">
    <button class="step-btn active" id="btn1" onclick="setStep(1)">1. Base Triangle</button>
    <button class="step-btn" id="btn2" onclick="setStep(2)">2. 3D Vector</button>
    <button class="step-btn" id="btn3" onclick="setStep(3)">3. Worked Example</button>
  </div>

  
  <div class="main-stage">
    <svg viewBox="0 0 400 240">
      <defs>
        
        <marker id="arrow" viewBox="0 0 10 10" refX="7" 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="#2563eb" />
        </marker>
        <marker id="arrow-amber" viewBox="0 0 10 10" refX="7" 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="#d97706" />
        </marker>
      </defs>

      
      
      <polygon id="baseTri" points="60,150 180,180 320,135" fill="#fef3c7" stroke="#f59e0b" stroke-width="1.5" fill-opacity="0.85" />

      
      <polygon id="vertTri" points="60,150 320,135 320,40" fill="#dbeafe" stroke="#3b82f6" stroke-width="1.5" fill-opacity="0.75" />

      
      
      <line x1="60" y1="150" x2="200" y2="105" class="edge-box-dash" />
      <line x1="200" y1="105" x2="320" y2="135" class="edge-box-dash" />
      <line x1="200" y1="105" x2="200" y2="10" class="edge-box-dash" />

      
      <line x1="60" y1="150" x2="180" y2="180" stroke="#059669" class="edge-axis" />
      <line x1="180" y1="180" x2="320" y2="135" stroke="#0d9488" class="edge-axis" />
      <line x1="60" y1="150" x2="60" y2="55" class="edge-box" />
      <line x1="180" y1="180" x2="180" y2="85" class="edge-box" />
      <line x1="320" y1="135" x2="320" y2="40" stroke="#7c3aed" class="edge-axis" />

      
      <line x1="60" y1="55" x2="180" y2="85" class="edge-box" />
      <line x1="180" y1="85" x2="320" y2="40" class="edge-box" />
      <line x1="320" y1="40" x2="200" y2="10" class="edge-box" />
      <line x1="200" y1="10" x2="60" y2="55" class="edge-box" />

      
      
      <path d="M 166 176.5 L 176 173.5 L 190 177" fill="none" stroke="#059669" stroke-width="1.2" />

      
      <path d="M 307 130 L 307 121 L 320 126" fill="none" stroke="#3b82f6" stroke-width="1.2" />

      
      <line id="baseDiag" x1="60" y1="150" x2="320" y2="135" stroke="#d97706" stroke-width="2.5" stroke-dasharray="5 3" />

      
      <line id="vecV" x1="60" y1="150" x2="314" y2="43" stroke="#2563eb" stroke-width="3.5" marker-end="url(#arrow)" />

      
      <circle cx="60" cy="150" r="4.5" fill="#1e2945" />
      <circle cx="320" cy="40" r="4.5" fill="#2563eb" />

      
      <text x="44" y="162" class="label-text" fill="#1e2945">(0,0,0)</text>
      <text x="348" y="36" class="label-text" fill="#2563eb" id="lblTarget">(x, y, z)</text>

      
      <text x="115" y="177" class="label-text" fill="#059669" id="lblX">x</text>
      <text x="260" y="169" class="label-text" fill="#0d9488" id="lblY">y</text>
      <text x="338" y="88" class="label-text" fill="#7c3aed" id="lblZ">z</text>

      
      <text x="175" y="132" class="label-text" fill="#b45309" id="lblD">d = √(x² + y²)</text>
      <text x="160" y="80" class="label-text" fill="#2563eb" id="lblV">‖v‖ = √(d² + z²)</text>
    </svg>
  </div>

  
  <div class="calc-card">
    <div class="calc-formula" id="formulaText">‖v‖ = √(x² + y² + z²)</div>
    <div class="calc-sub" id="subText">Step 1: Base hypotenuse d² = x² + y²</div>
  </div>

  <script>
    function setStep(step) {
      document.querySelectorAll('.step-btn').forEach((b, i) => {
        b.classList.toggle('active', i + 1 === step);
      });

      const baseTri = document.getElementById('baseTri');
      const vertTri = document.getElementById('vertTri');
      const baseDiag = document.getElementById('baseDiag');
      const vecV = document.getElementById('vecV');
      const lblTarget = document.getElementById('lblTarget');
      const lblX = document.getElementById('lblX');
      const lblY = document.getElementById('lblY');
      const lblZ = document.getElementById('lblZ');
      const lblD = document.getElementById('lblD');
      const lblV = document.getElementById('lblV');
      const formulaText = document.getElementById('formulaText');
      const subText = document.getElementById('subText');

      if (step === 1) {
        baseTri.setAttribute('fill-opacity', '0.9');
        vertTri.setAttribute('fill-opacity', '0.15');
        baseDiag.setAttribute('stroke-width', '3.5');
        vecV.setAttribute('stroke-opacity', '0.35');
        lblD.setAttribute('fill-opacity', '1');
        lblV.setAttribute('fill-opacity', '0.3');

        lblTarget.textContent = '(x, y, z)';
        lblX.textContent = 'x';
        lblY.textContent = 'y';
        lblZ.textContent = 'z';
        lblD.textContent = 'd = √(x² + y²)';
        lblV.textContent = '‖v‖';

        formulaText.textContent = 'd² = x² + y²';
        subText.textContent = 'Base diagonal from 2D Pythagorean theorem';
      } else if (step === 2) {
        baseTri.setAttribute('fill-opacity', '0.35');
        vertTri.setAttribute('fill-opacity', '0.85');
        baseDiag.setAttribute('stroke-width', '2');
        vecV.setAttribute('stroke-opacity', '1');
        lblD.setAttribute('fill-opacity', '0.7');
        lblV.setAttribute('fill-opacity', '1');

        lblTarget.textContent = '(x, y, z)';
        lblX.textContent = 'x';
        lblY.textContent = 'y';
        lblZ.textContent = 'z';
        lblD.textContent = 'd';
        lblV.textContent = '‖v‖ = √(d² + z²)';

        formulaText.textContent = '‖v‖ = √(x² + y² + z²)';
        subText.textContent = 'Substitute d²: ‖v‖ = √((x² + y²) + z²)';
      } else if (step === 3) {
        baseTri.setAttribute('fill-opacity', '0.5');
        vertTri.setAttribute('fill-opacity', '0.7');
        baseDiag.setAttribute('stroke-width', '2');
        vecV.setAttribute('stroke-opacity', '1');
        lblD.setAttribute('fill-opacity', '1');
        lblV.setAttribute('fill-opacity', '1');

        lblTarget.textContent = '(1, 2, 2)';
        lblX.textContent = '1';
        lblY.textContent = '2';
        lblZ.textContent = '2';
        lblD.textContent = 'd = √5';
        lblV.textContent = '‖v‖ = 3';

        formulaText.textContent = 'v = ⟨1, 2, 2⟩  →  ‖v‖ = √(1² + 2² + 2²)';
        subText.textContent = '‖v‖ = √(1 + 4 + 4) = √9 = 3';
      }
    }

    // Auto-cycle through steps calmly
    let currentStep = 1;
    let timer = setInterval(() => {
      currentStep = (currentStep % 3) + 1;
      setStep(currentStep);
    }, 4000);

    // Pause auto-cycle on direct user click
    document.querySelectorAll('.step-btn').forEach(btn => {
      btn.addEventListener('click', () => {
        clearInterval(timer);
      });
    });

    // Initialize
    setStep(1);
  </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%;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: #ffffff;
      padding: 12px;
      user-select: none;
    }
    .layout {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      align-items: center;
      justify-content: center;
      max-width: 650px;
      margin: 0 auto;
    }
    .graph-pane {
      flex: 1 1 280px;
      max-width: 320px;
      aspect-ratio: 1 / 1;
      position: relative;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .cards-pane {
      flex: 1 1 220px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      justify-content: center;
    }
    .badge-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .badge-card:hover {
      border-color: #cbd5e1;
      box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    }
    .badge-label {
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
    }
    .badge-value {
      font-size: 16px;
      font-weight: 700;
      color: #1e2945;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      display: flex;
      align-items: center;
    }
    .col-matrix {
      display: inline-flex;
      align-items: center;
      padding: 0 4px;
      border-left: 2px solid #1e2945;
      border-right: 2px solid #1e2945;
      border-radius: 3px;
      margin: 0 2px;
      line-height: 1.1;
    }
    .col-inner {
      display: flex;
      flex-direction: column;
      text-align: center;
      font-size: 14px;
    }
    .x-val { color: #d97706; }
    .y-val { color: #059669; }
    .v-val { color: #2563eb; }

    .hint {
      font-size: 12px;
      color: #64748b;
      text-align: center;
      margin-top: 4px;
    }
    .grid-line { stroke: #f1f5f9; stroke-width: 1; }
    .axis-line { stroke: #94a3b8; stroke-width: 1.5; }
    .axis-tick { font-size: 9px; fill: #64748b; text-anchor: middle; dominant-baseline: middle; }
    .vector-line { stroke: #2563eb; stroke-width: 3; stroke-linecap: round; }
    .comp-x { stroke: #d97706; stroke-width: 2; stroke-dasharray: 4 3; }
    .comp-y { stroke: #059669; stroke-width: 2; stroke-dasharray: 4 3; }
    .label-comp { font-size: 11px; font-weight: 600; }
    .point-handle { cursor: grab; fill: #2563eb; stroke: #ffffff; stroke-width: 2.5; filter: drop-shadow(0 2px 4px rgba(37,99,235,0.3)); }
    .point-handle:active { cursor: grabbing; }
  </style>
</head>
<body>

<div class="layout">
  <div class="graph-pane">
    <svg id="svgGrid" viewBox="-20 -20 300 300">
      <defs>
        <marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1 L 10 5 L 0 9 z" fill="#2563eb" />
        </marker>
      </defs>

      
      <g id="gridGroup"></g>
      
      <g id="axesGroup"></g>

      
      <line id="compX" class="comp-x" />
      <line id="compY" class="comp-y" />

      
      <line id="vecArrow" class="vector-line" marker-end="url(#arrow)" />

      
      <text id="vecLabel" font-weight="700" fill="#2563eb" font-size="14" text-anchor="middle">v</text>

      
      <text id="lblX" class="label-comp" fill="#d97706" text-anchor="middle">x = 3</text>
      <text id="lblY" class="label-comp" fill="#059669" text-anchor="start">y = 4</text>

      
      <circle id="handle" class="point-handle" r="7" />
    </svg>
  </div>

  <div class="cards-pane">
    <div class="badge-card">
      <span class="badge-label">Component form</span>
      <span class="badge-value">⟨<span id="cx" class="x-val">3</span>, <span id="cy" class="y-val">4</span>⟩</span>
    </div>

    <div class="badge-card">
      <span class="badge-label">Column form</span>
      <span class="badge-value">
        <span class="col-matrix">
          <span class="col-inner">
            <span id="mx" class="x-val">3</span>
            <span id="my" class="y-val">4</span>
          </span>
        </span>
      </span>
    </div>

    <div class="badge-card">
      <span class="badge-label">Coordinates</span>
      <span class="badge-value">(<span id="px" class="x-val">3</span>, <span id="py" class="y-val">4</span>)</span>
    </div>

    <div class="hint">Drag endpoint to explore</div>
  </div>
</div>

<script>
  const minG = -1, maxG = 5;
  const size = 260;
  const pad = 0;
  const range = maxG - minG;
  const step = size / range;

  function toScreen(x, y) {
    return {
      x: (x - minG) * step + pad,
      y: (maxG - y) * step + pad
    };
  }

  function toMath(sx, sy) {
    return {
      x: Math.round(((sx - pad) / step) + minG),
      y: Math.round(maxG - ((sy - pad) / step))
    };
  }

  // Draw Grid & Axes
  const gridGroup = document.getElementById('gridGroup');
  const axesGroup = document.getElementById('axesGroup');

  for (let i = minG; i <= maxG; i++) {
    const p1 = toScreen(i, minG);
    const p2 = toScreen(i, maxG);
    const p3 = toScreen(minG, i);
    const p4 = toScreen(maxG, i);

    gridGroup.innerHTML += `<line x1="${p1.x}" y1="${p1.y}" x2="${p2.x}" y2="${p2.y}" class="grid-line" />`;
    gridGroup.innerHTML += `<line x1="${p3.x}" y1="${p3.y}" x2="${p4.x}" y2="${p4.y}" class="grid-line" />`;

    if (i !== 0) {
      const pX = toScreen(i, 0);
      const pY = toScreen(0, i);
      axesGroup.innerHTML += `<text x="${pX.x}" y="${pX.y + 12}" class="axis-tick">${i}</text>`;
      axesGroup.innerHTML += `<text x="${pY.x - 10}" y="${pY.y}" class="axis-tick">${i}</text>`;
    }
  }

  // Main axes
  const ox1 = toScreen(minG, 0), ox2 = toScreen(maxG, 0);
  const oy1 = toScreen(0, minG), oy2 = toScreen(0, maxG);
  axesGroup.innerHTML += `<line x1="${ox1.x}" y1="${ox1.y}" x2="${ox2.x}" y2="${ox2.y}" class="axis-line" />`;
  axesGroup.innerHTML += `<line x1="${oy1.x}" y1="${oy1.y}" x2="${oy2.x}" y2="${oy2.y}" class="axis-line" />`;
  axesGroup.innerHTML += `<text x="${ox1.x - 6}" y="${ox1.y + 12}" class="axis-tick">0</text>`;

  let curX = 3, curY = 4;

  function update() {
    const orig = toScreen(0, 0);
    const pt = toScreen(curX, curY);
    const midX = toScreen(curX, 0);

    // Vector line with offset so marker doesn't overshoot
    const dx = pt.x - orig.x;
    const dy = pt.y - orig.y;
    const len = Math.sqrt(dx*dx + dy*dy);
    const shorten = len > 8 ? 6 : 0;
    const endX = len > 0 ? pt.x - (dx / len) * shorten : orig.x;
    const endY = len > 0 ? pt.y - (dy / len) * shorten : orig.y;

    document.getElementById('vecArrow').setAttribute('x1', orig.x);
    document.getElementById('vecArrow').setAttribute('y1', orig.y);
    document.getElementById('vecArrow').setAttribute('x2', endX);
    document.getElementById('vecArrow').setAttribute('y2', endY);

    // Dotted components: along x axis, then up to (x,y)
    document.getElementById('compX').setAttribute('x1', orig.x);
    document.getElementById('compX').setAttribute('y1', orig.y);
    document.getElementById('compX').setAttribute('x2', midX.x);
    document.getElementById('compX').setAttribute('y2', midX.y);

    document.getElementById('compY').setAttribute('x1', midX.x);
    document.getElementById('compY').setAttribute('y1', midX.y);
    document.getElementById('compY').setAttribute('x2', pt.x);
    document.getElementById('compY').setAttribute('y2', pt.y);

    // Handle
    document.getElementById('handle').setAttribute('cx', pt.x);
    document.getElementById('handle').setAttribute('cy', pt.y);

    // Labels position
    const lblX = document.getElementById('lblX');
    lblX.setAttribute('x', (orig.x + midX.x) / 2);
    lblX.setAttribute('y', orig.y + (curY >= 0 ? 15 : -8));
    lblX.textContent = `x = ${curX}`;

    const lblY = document.getElementById('lblY');
    const alignLeft = curX >= 0;
    lblY.setAttribute('x', midX.x + (alignLeft ? 8 : -8));
    lblY.setAttribute('text-anchor', alignLeft ? 'start' : 'end');
    lblY.setAttribute('y', (midX.y + pt.y) / 2 + 4);
    lblY.textContent = `y = ${curY}`;

    // Vector label
    const vecLabel = document.getElementById('vecLabel');
    vecLabel.setAttribute('x', (orig.x + pt.x) / 2 - 10);
    vecLabel.setAttribute('y', (orig.y + pt.y) / 2 - 8);

    // HTML badges
    document.getElementById('cx').textContent = curX;
    document.getElementById('cy').textContent = curY;
    document.getElementById('mx').textContent = curX;
    document.getElementById('my').textContent = curY;
    document.getElementById('px').textContent = curX;
    document.getElementById('py').textContent = curY;
  }

  // Drag interaction
  const svg = document.getElementById('svgGrid');
  const handle = document.getElementById('handle');
  let isDragging = false;

  function handlePointer(e) {
    const rect = svg.getBoundingClientRect();
    const clientX = e.touches ? e.touches[0].clientX : e.clientX;
    const clientY = e.touches ? e.touches[0].clientY : e.clientY;
    const sx = ((clientX - rect.left) / rect.width) * 300 - 20;
    const sy = ((clientY - rect.top) / rect.height) * 300 - 20;

    const mathPt = toMath(sx, sy);
    const clampedX = Math.max(minG, Math.min(maxG, mathPt.x));
    const clampedY = Math.max(minG, Math.min(maxG, mathPt.y));

    if (clampedX !== curX || clampedY !== curY) {
      curX = clampedX;
      curY = clampedY;
      update();
    }
  }

  svg.addEventListener('pointerdown', (e) => {
    isDragging = true;
    handlePointer(e);
  });

  window.addEventListener('pointermove', (e) => {
    if (isDragging) {
      e.preventDefault();
      handlePointer(e);
    }
  });

  window.addEventListener('pointerup', () => { isDragging = false; });
  window.addEventListener('pointercancel', () => { isDragging = false; });

  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, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      user-select: none;
    }

    /* Panels container */
    .panels-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      width: 100%;
    }

    .panel-card {
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 8px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
      position: relative;
    }
    .panel-card.active {
      border-color: #2563eb;
      background: #f0f7ff;
      box-shadow: 0 0 0 1px #2563eb;
    }

    .panel-header {
      font-size: 13px;
      font-weight: 700;
      margin-bottom: 4px;
      display: flex;
      align-items: center;
      gap: 4px;
      text-align: center;
    }

    .svg-container {
      width: 100%;
      aspect-ratio: 1 / 1;
      max-height: 145px;
    }

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

    /* Math Proof section */
    .proof-box {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .proof-title {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #64748b;
      text-align: center;
    }

    .equation-row {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 6px 8px;
      font-size: 14px;
      font-weight: 600;
    }

    .eq-step {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 6px;
      border-radius: 8px;
      transition: background 0.25s ease, transform 0.25s ease;
    }
    .eq-step.highlight {
      background: #dbeafe;
      color: #1e40af;
    }

    /* Column vector notation */
    .col-vec {
      display: inline-flex;
      align-items: center;
      position: relative;
      padding: 0 4px;
      font-family: inherit;
    }
    .col-vec::before, .col-vec::after {
      content: "";
      position: absolute;
      top: 1px;
      bottom: 1px;
      width: 3px;
      border: 1.5px solid #1e2945;
    }
    .col-vec::before {
      left: 0;
      border-right: none;
      border-radius: 3px 0 0 3px;
    }
    .col-vec::after {
      right: 0;
      border-left: none;
      border-radius: 0 3px 3px 0;
    }
    .col-vec-inner {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      line-height: 1.15;
      font-size: 13px;
      padding: 1px 2px;
    }

    .i-color { color: #dc2626; }
    .j-color { color: #16a34a; }
    .v-color { color: #2563eb; }

    /* Stepper Controls */
    .controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      border-radius: 8px;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .btn:active { background: #f1f5f9; }
    .dots {
      display: flex;
      gap: 6px;
    }
    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: background 0.2s ease;
    }
    .dot.active {
      background: #2563eb;
    }

    @media (max-width: 480px) {
      .panels-row {
        gap: 6px;
      }
      .panel-card {
        padding: 6px 3px;
      }
      .panel-header {
        font-size: 11px;
      }
      .equation-row {
        font-size: 12px;
        gap: 4px;
      }
      .col-vec-inner {
        font-size: 11px;
      }
    }
  </style>
</head>
<body>

  
  <div class="panels-row">
    
    <div class="panel-card active" id="card-0" onclick="setStep(0)">
      <div class="panel-header">
        <span class="i-color">i</span> &amp; <span class="j-color">j</span> Units
      </div>
      <div class="svg-container">
        <svg viewBox="-5 -5 110 110">
          <defs>
            <marker id="m-red" viewBox="0 0 6 6" refX="5" refY="3" markerWidth="4" markerHeight="4" orient="auto-start-reverse">
              <path d="M 0 0 L 6 3 L 0 6 z" fill="#dc2626"/>
            </marker>
            <marker id="m-green" viewBox="0 0 6 6" refX="5" refY="3" markerWidth="4" markerHeight="4" orient="auto-start-reverse">
              <path d="M 0 0 L 6 3 L 0 6 z" fill="#16a34a"/>
            </marker>
          </defs>
          
          <g stroke="#e2e8f0" stroke-width="1">
            <line x1="10" y1="10" x2="10" y2="90"/>
            <line x1="30" y1="10" x2="30" y2="90"/>
            <line x1="50" y1="10" x2="50" y2="90"/>
            <line x1="70" y1="10" x2="70" y2="90"/>
            <line x1="90" y1="10" x2="90" y2="90"/>
            <line x1="10" y1="10" x2="90" y2="10"/>
            <line x1="10" y1="30" x2="90" y2="30"/>
            <line x1="10" y1="50" x2="90" y2="50"/>
            <line x1="10" y1="70" x2="90" y2="70"/>
            <line x1="10" y1="90" x2="90" y2="90"/>
          </g>
          
          <line x1="10" y1="90" x2="95" y2="90" stroke="#94a3b8" stroke-width="1.5"/>
          <line x1="10" y1="90" x2="10" y2="5" stroke="#94a3b8" stroke-width="1.5"/>
          
          <line x1="10" y1="90" x2="28" y2="90" stroke="#dc2626" stroke-width="3" marker-end="url(#m-red)"/>
          <text x="20" y="103" font-size="11" font-weight="bold" fill="#dc2626" text-anchor="middle">i</text>
          
          <line x1="10" y1="90" x2="10" y2="72" stroke="#16a34a" stroke-width="3" marker-end="url(#m-green)"/>
          <text x="3" y="78" font-size="11" font-weight="bold" fill="#16a34a" text-anchor="end">j</text>
        </svg>
      </div>
    </div>

    
    <div class="panel-card" id="card-1" onclick="setStep(1)">
      <div class="panel-header">
        <span class="i-color">3i</span> + <span class="j-color">4j</span> Chained
      </div>
      <div class="svg-container">
        <svg viewBox="-5 -5 110 110">
          
          <g stroke="#e2e8f0" stroke-width="1">
            <line x1="10" y1="10" x2="10" y2="90"/>
            <line x1="30" y1="10" x2="30" y2="90"/>
            <line x1="50" y1="10" x2="50" y2="90"/>
            <line x1="70" y1="10" x2="70" y2="90"/>
            <line x1="90" y1="10" x2="90" y2="90"/>
            <line x1="10" y1="10" x2="90" y2="10"/>
            <line x1="10" y1="30" x2="90" y2="30"/>
            <line x1="10" y1="50" x2="90" y2="50"/>
            <line x1="10" y1="70" x2="90" y2="70"/>
            <line x1="10" y1="90" x2="90" y2="90"/>
          </g>
          
          <line x1="10" y1="90" x2="95" y2="90" stroke="#94a3b8" stroke-width="1.5"/>
          <line x1="10" y1="90" x2="10" y2="5" stroke="#94a3b8" stroke-width="1.5"/>
          
          <line x1="10" y1="90" x2="28" y2="90" stroke="#dc2626" stroke-width="2.5" marker-end="url(#m-red)"/>
          <line x1="30" y1="90" x2="48" y2="90" stroke="#dc2626" stroke-width="2.5" marker-end="url(#m-red)"/>
          <line x1="50" y1="90" x2="68" y2="90" stroke="#dc2626" stroke-width="2.5" marker-end="url(#m-red)"/>
          <text x="40" y="103" font-size="11" font-weight="bold" fill="#dc2626" text-anchor="middle">3i</text>
          
          <line x1="70" y1="90" x2="70" y2="72" stroke="#16a34a" stroke-width="2.5" marker-end="url(#m-green)"/>
          <line x1="70" y1="70" x2="70" y2="52" stroke="#16a34a" stroke-width="2.5" marker-end="url(#m-green)"/>
          <line x1="70" y1="50" x2="70" y2="32" stroke="#16a34a" stroke-width="2.5" marker-end="url(#m-green)"/>
          <line x1="70" y1="30" x2="70" y2="12" stroke="#16a34a" stroke-width="2.5" marker-end="url(#m-green)"/>
          <text x="82" y="52" font-size="11" font-weight="bold" fill="#16a34a" text-anchor="start">4j</text>
        </svg>
      </div>
    </div>

    
    <div class="panel-card" id="card-2" onclick="setStep(2)">
      <div class="panel-header">
        <span class="v-color">v</span> = 3<span class="i-color">i</span> + 4<span class="j-color">j</span>
      </div>
      <div class="svg-container">
        <svg viewBox="-5 -5 110 110">
          <defs>
            <marker id="m-blue" viewBox="0 0 6 6" refX="5" refY="3" markerWidth="4" markerHeight="4" orient="auto-start-reverse">
              <path d="M 0 0 L 6 3 L 0 6 z" fill="#2563eb"/>
            </marker>
          </defs>
          
          <g stroke="#e2e8f0" stroke-width="1">
            <line x1="10" y1="10" x2="10" y2="90"/>
            <line x1="30" y1="10" x2="30" y2="90"/>
            <line x1="50" y1="10" x2="50" y2="90"/>
            <line x1="70" y1="10" x2="70" y2="90"/>
            <line x1="90" y1="10" x2="90" y2="90"/>
            <line x1="10" y1="10" x2="90" y2="10"/>
            <line x1="10" y1="30" x2="90" y2="30"/>
            <line x1="10" y1="50" x2="90" y2="50"/>
            <line x1="10" y1="70" x2="90" y2="70"/>
            <line x1="10" y1="90" x2="90" y2="90"/>
          </g>
          
          <line x1="10" y1="90" x2="95" y2="90" stroke="#94a3b8" stroke-width="1.5"/>
          <line x1="10" y1="90" x2="10" y2="5" stroke="#94a3b8" stroke-width="1.5"/>
          
          <line x1="10" y1="90" x2="70" y2="90" stroke="#dc2626" stroke-dasharray="3,3" stroke-width="1.5"/>
          <line x1="70" y1="90" x2="70" y2="10" stroke="#16a34a" stroke-dasharray="3,3" stroke-width="1.5"/>
          
          <line x1="10" y1="90" x2="68" y2="12.6" stroke="#2563eb" stroke-width="3" marker-end="url(#m-blue)"/>
          <circle cx="70" cy="10" r="3" fill="#2563eb"/>
          <text x="35" y="44" font-size="12" font-weight="bold" fill="#2563eb">v</text>
        </svg>
      </div>
    </div>
  </div>

  
  <div class="proof-box">
    <div class="proof-title">Column Form Proof</div>
    <div class="equation-row">
      <span class="v-color" style="font-size:15px;">v</span>
      <span>=</span>

      
      <span class="eq-step highlight" id="eq-0">
        3<span class="col-vec i-color"><span class="col-vec-inner"><span>1</span><span>0</span></span></span>
        +
        4<span class="col-vec j-color"><span class="col-vec-inner"><span>0</span><span>1</span></span></span>
      </span>

      <span>=</span>

      
      <span class="eq-step" id="eq-1">
        <span class="col-vec i-color"><span class="col-vec-inner"><span>3</span><span>0</span></span></span>
        +
        <span class="col-vec j-color"><span class="col-vec-inner"><span>0</span><span>4</span></span></span>
      </span>

      <span>=</span>

      
      <span class="eq-step" id="eq-2">
        <span class="col-vec v-color"><span class="col-vec-inner"><span>3</span><span>4</span></span></span>
      </span>
    </div>
  </div>

  
  <div class="controls">
    <button class="btn" id="prevBtn" onclick="prevStep()">←</button>
    <div class="dots">
      <div class="dot active" onclick="setStep(0)"></div>
      <div class="dot" onclick="setStep(1)"></div>
      <div class="dot" onclick="setStep(2)"></div>
    </div>
    <button class="btn" id="playBtn" onclick="togglePlay()">⏸</button>
    <button class="btn" id="nextBtn" onclick="nextStep()">→</button>
  </div>

  <script>
    let currentStep = 0;
    let isPlaying = true;
    let autoInterval = null;

    function updateView() {
      for (let i = 0; i < 3; i++) {
        const card = document.getElementById('card-' + i);
        const eq = document.getElementById('eq-' + i);
        const dot = document.querySelectorAll('.dot')[i];

        if (i === currentStep) {
          card.classList.add('active');
          eq.classList.add('highlight');
          dot.classList.add('active');
        } else {
          card.classList.remove('active');
          eq.classList.remove('highlight');
          dot.classList.remove('active');
        }
      }
    }

    function setStep(step) {
      currentStep = (step + 3) % 3;
      updateView();
    }

    function nextStep() {
      setStep(currentStep + 1);
    }

    function prevStep() {
      setStep(currentStep - 1);
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      document.getElementById('playBtn').textContent = isPlaying ? '⏸' : '▶';
      if (isPlaying) {
        startTimer();
      } else {
        clearInterval(autoInterval);
      }
    }

    function startTimer() {
      clearInterval(autoInterval);
      autoInterval = setInterval(() => {
        if (isPlaying) {
          nextStep();
        }
      }, 3500);
    }

    startTimer();
  </script>
</body>
</html>

OGM.12.VEC.1

Aligned learning resources

Related diagrams