<!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;
      user-select: none;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 16px;
    }

    .controls {
      display: flex;
      gap: 8px;
      margin-bottom: 24px;
      background: #f1f5f9;
      padding: 4px;
      border-radius: 24px;
    }

    .btn {
      border: none;
      background: transparent;
      padding: 8px 18px;
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      border-radius: 20px;
      cursor: pointer;
      transition: all 0.25s ease;
    }

    .btn.active {
      background: #ffffff;
      color: #0284c7;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    }

    .matrix-stage {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px 28px;
    }

    /* Large Matrix Brackets */
    .bracket {
      width: 14px;
      position: absolute;
      top: 6px;
      bottom: 6px;
      border: 3px solid #334155;
      pointer-events: none;
    }

    .bracket-left {
      left: 6px;
      border-right: none;
      border-radius: 8px 0 0 8px;
    }

    .bracket-right {
      right: 6px;
      border-left: none;
      border-radius: 0 8px 8px 0;
    }

    /* Grid & Diagonal Overlay */
    .grid-wrap {
      position: relative;
      display: grid;
      grid-template-columns: repeat(3, 72px);
      grid-template-rows: repeat(3, 64px);
      gap: 10px;
      align-items: center;
      justify-items: center;
    }

    .diag-line-svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
    }

    .diag-line-svg line {
      stroke: #38bdf8;
      stroke-width: 4;
      stroke-linecap: round;
      stroke-dasharray: 6 6;
      opacity: 0.6;
    }

    .cell {
      position: relative;
      z-index: 2;
      width: 64px;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      font-weight: 700;
      border-radius: 12px;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Diagonal elements */
    .cell.diagonal {
      background: #e0f2fe;
      color: #0284c7;
      box-shadow: 0 0 0 2px #38bdf8, 0 4px 10px rgba(2, 132, 199, 0.15);
    }

    /* Off-diagonal elements */
    .cell.off-diagonal {
      background: #f8fafc;
      color: #475569;
    }

    .cell.off-diagonal.zero {
      color: #cbd5e1;
      background: transparent;
    }

    .sub {
      font-size: 13px;
      font-weight: 600;
      margin-top: 6px;
      margin-left: 1px;
    }

    .tag-container {
      margin-top: 18px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #f0f9ff;
      color: #0369a1;
      padding: 5px 12px;
      border-radius: 14px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid #bae6fd;
    }

    .badge-dot {
      width: 8px;
      height: 8px;
      background: #0284c7;
      border-radius: 50%;
    }

    @media (max-width: 380px) {
      .grid-wrap {
        grid-template-columns: repeat(3, 58px);
        grid-template-rows: repeat(3, 52px);
        gap: 6px;
      }
      .cell {
        width: 52px;
        height: 46px;
        font-size: 18px;
      }
      .sub {
        font-size: 11px;
      }
    }
  </style>
</head>
<body>

  <div class="controls">
    <button class="btn active" id="btn-gen" onclick="setMode(0)">General Square</button>
    <button class="btn" id="btn-diag" onclick="setMode(1)">Diagonal Matrix</button>
  </div>

  <div class="matrix-stage">
    <div class="bracket bracket-left"></div>
    
    <div class="grid-wrap" id="grid">
      <svg class="diag-line-svg">
        <line x1="12%" y1="12%" x2="88%" y2="88%" />
      </svg>
      
      <div class="cell diagonal" id="c00">a<span class="sub">11</span></div>
      <div class="cell off-diagonal" id="c01">a<span class="sub">12</span></div>
      <div class="cell off-diagonal" id="c02">a<span class="sub">13</span></div>

      
      <div class="cell off-diagonal" id="c10">a<span class="sub">21</span></div>
      <div class="cell diagonal" id="c11">a<span class="sub">22</span></div>
      <div class="cell off-diagonal" id="c12">a<span class="sub">23</span></div>

      
      <div class="cell off-diagonal" id="c20">a<span class="sub">31</span></div>
      <div class="cell off-diagonal" id="c21">a<span class="sub">32</span></div>
      <div class="cell diagonal" id="c22">a<span class="sub">33</span></div>
    </div>

    <div class="bracket bracket-right"></div>
  </div>

  <div class="tag-container">
    <div class="badge">
      <div class="badge-dot"></div>
      Main Diagonal
    </div>
  </div>

  <script>
    const data = [
      {
        d: ["a<span class='sub'>11</span>", "a<span class='sub'>22</span>", "a<span class='sub'>33</span>"],
        off: [
          ["a<span class='sub'>12</span>", "a<span class='sub'>13</span>"],
          ["a<span class='sub'>21</span>", "a<span class='sub'>23</span>"],
          ["a<span class='sub'>31</span>", "a<span class='sub'>32</span>"]
        ],
        isZero: false
      },
      {
        d: ["5", "−2", "8"],
        off: [
          ["0", "0"],
          ["0", "0"],
          ["0", "0"]
        ],
        isZero: true
      }
    ];

    function setMode(idx) {
      document.getElementById('btn-gen').classList.toggle('active', idx === 0);
      document.getElementById('btn-diag').classList.toggle('active', idx === 1);

      const d = data[idx];
      document.getElementById('c00').innerHTML = d.d[0];
      document.getElementById('c11').innerHTML = d.d[1];
      document.getElementById('c22').innerHTML = d.d[2];

      const offCells = [
        ['c01', d.off[0][0]],
        ['c02', d.off[0][1]],
        ['c10', d.off[1][0]],
        ['c12', d.off[1][1]],
        ['c20', d.off[2][0]],
        ['c21', d.off[2][1]]
      ];

      offCells.forEach(([id, val]) => {
        const el = document.getElementById(id);
        el.innerHTML = val;
        el.classList.toggle('zero', d.isZero);
      });
    }
  </script>
</body>
</html>

Types of Matrices: Row, Column, Square, Diagonal, Zero and Identity

<!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;
      gap: 12px;
      user-select: none;
      -webkit-user-select: none;
    }

    /* Top Grid: Matrix Types Showcase */
    .showcase-row {
      display: flex;
      justify-content: space-around;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .matrix-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      background: #f8fafc;
      padding: 6px 10px;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
    }

    .matrix-title {
      font-size: 13px;
      font-weight: 700;
      color: #475569;
    }

    /* Matrix Bracket Styling */
    .mat {
      display: inline-grid;
      gap: 3px;
      padding: 3px 6px;
      position: relative;
      background: #ffffff;
      border-radius: 4px;
    }
    .mat::before, .mat::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: 4px;
      border: 2px solid #1e2945;
    }
    .mat::before {
      left: 0;
      border-right: none;
      border-radius: 4px 0 0 4px;
    }
    .mat::after {
      right: 0;
      border-left: none;
      border-radius: 0 4px 4px 0;
    }

    .grid-2x2 { grid-template-columns: repeat(2, 22px); }
    .grid-3x3 { grid-template-columns: repeat(3, 20px); }
    .grid-2x3 { grid-template-columns: repeat(3, 20px); }

    .cell {
      height: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 600;
      border-radius: 3px;
      transition: all 0.25s ease;
      color: #64748b;
    }
    .cell.diag {
      color: #0284c7;
      font-weight: 800;
      background: #e0f2fe;
    }
    .cell.zero {
      color: #94a3b8;
    }

    /* Bottom Section: Interactive Multiplication */
    .demo-section {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .eq-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .op {
      font-size: 18px;
      font-weight: 700;
      color: #64748b;
    }

    .calc-mat .cell {
      width: 26px;
      height: 26px;
      font-size: 14px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      color: #1e2945;
    }
    .calc-mat.grid-2x2 {
      grid-template-columns: repeat(2, 26px);
      gap: 4px;
      padding: 4px 7px;
    }

    /* Highlight States */
    .cell.hl-row {
      background: #ffedd5;
      color: #c2410c;
      border-color: #fdba74;
      font-weight: 800;
    }
    .cell.hl-col {
      background: #e0f2fe;
      color: #0369a1;
      border-color: #7dd3fc;
      font-weight: 800;
    }
    .cell.hl-active-one {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
      font-weight: 800;
    }
    .cell.hl-res {
      background: #dcfce7;
      color: #15803d;
      border-color: #86efac;
      font-weight: 800;
    }

    /* Detail calculation bar */
    .detail-calc {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 14px;
      font-weight: 600;
      background: #ffffff;
      padding: 6px 14px;
      border-radius: 20px;
      border: 1px solid #cbd5e1;
      min-height: 34px;
    }
    .tag-val {
      padding: 1px 6px;
      border-radius: 4px;
    }
    .tag-a { background: #ffedd5; color: #c2410c; }
    .tag-i { background: #e0f2fe; color: #0369a1; }
    .tag-out { background: #dcfce7; color: #15803d; font-weight: 800; }

    /* Controls */
    .controls {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .step-btn {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      font-size: 12px;
      font-weight: 700;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
    }
    .step-btn.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
      box-shadow: 0 2px 4px rgba(2, 132, 199, 0.25);
    }
    .nav-btn {
      padding: 4px 10px;
      height: 28px;
      border-radius: 6px;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      font-size: 12px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
    }
  </style>
</head>
<body>

  
  <div class="showcase-row">
    
    <div class="matrix-card">
      <span class="matrix-title">I₂</span>
      <div class="mat grid-2x2">
        <div class="cell diag">1</div>
        <div class="cell zero">0</div>
        <div class="cell zero">0</div>
        <div class="cell diag">1</div>
      </div>
    </div>

    
    <div class="matrix-card">
      <span class="matrix-title">I₃</span>
      <div class="mat grid-3x3">
        <div class="cell diag">1</div>
        <div class="cell zero">0</div>
        <div class="cell zero">0</div>
        <div class="cell zero">0</div>
        <div class="cell diag">1</div>
        <div class="cell zero">0</div>
        <div class="cell zero">0</div>
        <div class="cell zero">0</div>
        <div class="cell diag">1</div>
      </div>
    </div>

    
    <div class="matrix-card">
      <span class="matrix-title">O₂×₃</span>
      <div class="mat grid-2x3">
        <div class="cell zero">0</div>
        <div class="cell zero">0</div>
        <div class="cell zero">0</div>
        <div class="cell zero">0</div>
        <div class="cell zero">0</div>
        <div class="cell zero">0</div>
      </div>
    </div>
  </div>

  
  <div class="demo-section">
    <div class="eq-row">
      
      <div class="mat calc-mat grid-2x2" id="matA">
        <div class="cell" id="a00">3</div>
        <div class="cell" id="a01">5</div>
        <div class="cell" id="a10">7</div>
        <div class="cell" id="a11">2</div>
      </div>

      <div class="op">×</div>

      
      <div class="mat calc-mat grid-2x2" id="matI">
        <div class="cell" id="i00">1</div>
        <div class="cell" id="i01">0</div>
        <div class="cell" id="i10">0</div>
        <div class="cell" id="i11">1</div>
      </div>

      <div class="op">=</div>

      
      <div class="mat calc-mat grid-2x2" id="matR">
        <div class="cell" id="r00">3</div>
        <div class="cell" id="r01">5</div>
        <div class="cell" id="r10">7</div>
        <div class="cell" id="r11">2</div>
      </div>
    </div>

    
    <div class="detail-calc" id="calcText">
      <span class="tag-val tag-a">3</span>×<span class="tag-val tag-i">1</span> + 
      <span class="tag-val tag-a">5</span>×<span class="tag-val tag-i">0</span> = 
      <span class="tag-val tag-out">3</span>
    </div>

    
    <div class="controls">
      <button class="nav-btn" id="playBtn">⏸</button>
      <button class="step-btn active" data-step="0">1</button>
      <button class="step-btn" data-step="1">2</button>
      <button class="step-btn" data-step="2">3</button>
      <button class="step-btn" data-step="3">4</button>
    </div>
  </div>

  <script>
    const steps = [
      {
        row: [0, 0], // row 0 of A (a00, a01)
        col: [0, 0], // col 0 of I (i00, i10)
        resId: 'r00',
        aVals: ['3', '5'],
        iVals: ['1', '0'],
        activeI: 'i00',
        outVal: '3'
      },
      {
        row: [0, 0], // row 0 of A (a00, a01)
        col: [1, 1], // col 1 of I (i01, i11)
        resId: 'r01',
        aVals: ['3', '5'],
        iVals: ['0', '1'],
        activeI: 'i11',
        outVal: '5'
      },
      {
        row: [1, 1], // row 1 of A (a10, a11)
        col: [0, 0], // col 0 of I (i00, i10)
        resId: 'r10',
        aVals: ['7', '2'],
        iVals: ['1', '0'],
        activeI: 'i00',
        outVal: '7'
      },
      {
        row: [1, 1], // row 1 of A (a10, a11)
        col: [1, 1], // col 1 of I (i01, i11)
        resId: 'r11',
        aVals: ['7', '2'],
        iVals: ['0', '1'],
        activeI: 'i11',
        outVal: '2'
      }
    ];

    let currentStep = 0;
    let isPlaying = true;
    let timer = null;

    const stepBtns = document.querySelectorAll('.step-btn');
    const playBtn = document.getElementById('playBtn');
    const calcText = document.getElementById('calcText');

    const allACells = ['a00', 'a01', 'a10', 'a11'];
    const allICells = ['i00', 'i01', 'i10', 'i11'];
    const allRCells = ['r00', 'r01', 'r10', 'r11'];

    function renderStep(idx) {
      currentStep = idx;
      const s = steps[idx];

      // Update button styles
      stepBtns.forEach((btn, i) => {
        btn.classList.toggle('active', i === idx);
      });

      // Clear highlights
      allACells.forEach(id => document.getElementById(id).className = 'cell');
      allICells.forEach(id => document.getElementById(id).className = 'cell');
      allRCells.forEach(id => document.getElementById(id).className = 'cell');

      // Highlight Row in A
      if (s.row[0] === 0) {
        document.getElementById('a00').classList.add('hl-row');
        document.getElementById('a01').classList.add('hl-row');
      } else {
        document.getElementById('a10').classList.add('hl-row');
        document.getElementById('a11').classList.add('hl-row');
      }

      // Highlight Column in I
      if (s.col[0] === 0) {
        document.getElementById('i00').classList.add('hl-col');
        document.getElementById('i10').classList.add('hl-col');
      } else {
        document.getElementById('i01').classList.add('hl-col');
        document.getElementById('i11').classList.add('hl-col');
      }

      // Highlight the active 1 preserving the value
      document.getElementById(s.activeI).className = 'cell hl-active-one';

      // Highlight Result Cell
      document.getElementById(s.resId).classList.add('hl-res');

      // Update formula text
      calcText.innerHTML = `
        <span class="tag-val tag-a">${s.aVals[0]}</span>×<span class="tag-val tag-i">${s.iVals[0]}</span> + 
        <span class="tag-val tag-a">${s.aVals[1]}</span>×<span class="tag-val tag-i">${s.iVals[1]}</span> = 
        <span class="tag-val tag-out">${s.outVal}</span>
      `;
    }

    function nextStep() {
      currentStep = (currentStep + 1) % steps.length;
      renderStep(currentStep);
    }

    function startAutoPlay() {
      stopAutoPlay();
      timer = setInterval(nextStep, 3200);
      isPlaying = true;
      playBtn.textContent = '⏸';
    }

    function stopAutoPlay() {
      if (timer) clearInterval(timer);
      timer = null;
      isPlaying = false;
      playBtn.textContent = '▶';
    }

    stepBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        stopAutoPlay();
        renderStep(parseInt(btn.dataset.step, 10));
      });
    });

    playBtn.addEventListener('click', () => {
      if (isPlaying) {
        stopAutoPlay();
      } else {
        nextStep();
        startAutoPlay();
      }
    });

    renderStep(0);
    startAutoPlay();
  </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>Anatomy of a Matrix</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      width: 100%;
      min-height: 100%;
      background: #f8fafc;
      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: 16px 12px;
      user-select: none;
      -webkit-user-select: none;
    }

    .container {
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }

    /* Matrix layout grid */
    .matrix-workspace {
      display: grid;
      grid-template-columns: auto auto;
      grid-template-rows: auto auto;
      align-items: center;
      justify-content: center;
      gap: 8px 12px;
    }

    /* Column labels (top) */
    .col-labels {
      grid-column: 2;
      grid-row: 1;
      display: grid;
      grid-template-columns: repeat(3, 58px);
      gap: 8px;
      text-align: center;
    }

    .col-tag {
      font-size: 13px;
      font-weight: 700;
      color: #0284c7;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      transition: color 0.25s, transform 0.25s;
    }
    .col-tag.active {
      color: #0369a1;
      transform: translateY(2px);
    }
    .col-tag .arrow {
      font-size: 14px;
      line-height: 1;
    }

    /* Row labels (left) */
    .row-labels {
      grid-column: 1;
      grid-row: 2;
      display: grid;
      grid-template-rows: repeat(2, 52px);
      gap: 8px;
      align-items: center;
      text-align: right;
    }

    .row-tag {
      font-size: 13px;
      font-weight: 700;
      color: #7c3aed;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 4px;
      white-space: nowrap;
      transition: color 0.25s, transform 0.25s;
    }
    .row-tag.active {
      color: #6d28d9;
      transform: translateX(2px);
    }

    /* Matrix box with bracket styling */
    .matrix-box {
      grid-column: 2;
      grid-row: 2;
      position: relative;
      padding: 6px 10px;
      display: grid;
      grid-template-columns: repeat(3, 58px);
      grid-template-rows: repeat(2, 52px);
      gap: 8px;
    }

    /* Bracket outlines */
    .matrix-box::before,
    .matrix-box::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 8px;
      border: 3px solid #1e2945;
      pointer-events: none;
    }
    .matrix-box::before {
      left: 0;
      border-right: none;
      border-radius: 6px 0 0 6px;
    }
    .matrix-box::after {
      right: 0;
      border-left: none;
      border-radius: 0 6px 6px 0;
    }

    /* Interactive Matrix Cells */
    .cell-btn {
      appearance: none;
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 8px;
      color: #1e2945;
      font-family: inherit;
      font-size: 17px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    }
    .cell-btn:active {
      transform: scale(0.96);
    }
    .cell-btn sub {
      font-size: 11px;
      font-weight: 700;
      margin-left: 1px;
    }
    .cell-btn .idx-r { color: #7c3aed; }
    .cell-btn .idx-c { color: #0284c7; }

    /* In-focus row / col highlighting */
    .cell-btn.in-row {
      background: #f5f3ff;
      border-color: #ddd6fe;
    }
    .cell-btn.in-col {
      background: #f0f9ff;
      border-color: #bae6fd;
    }
    .cell-btn.active {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
      z-index: 2;
    }
    .cell-btn.active .idx-r,
    .cell-btn.active .idx-c {
      color: #ffffff;
    }

    /* Inspector Card */
    .inspector {
      width: 100%;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      gap: 12px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    }

    .active-badge {
      font-size: 24px;
      font-weight: 800;
      color: #2563eb;
      min-width: 48px;
      text-align: center;
    }
    .active-badge sub {
      font-size: 15px;
      font-weight: 800;
    }

    .divider {
      width: 1px;
      height: 32px;
      background: #e2e8f0;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 600;
    }

    .pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 800;
      color: #ffffff;
    }
    .pill-r { background: #7c3aed; }
    .pill-c { background: #0284c7; }

    .size-tag {
      font-size: 12px;
      font-weight: 700;
      color: #64748b;
      letter-spacing: 0.5px;
    }
  </style>
</head>
<body>

  <div class="container">
    <div class="size-tag">2 × 3 MATRIX</div>

    <div class="matrix-workspace">
      
      <div class="col-labels">
        <div class="col-tag" id="col-1"><span>Col 1</span><span class="arrow">↓</span></div>
        <div class="col-tag" id="col-2"><span>Col 2</span><span class="arrow">↓</span></div>
        <div class="col-tag" id="col-3"><span>Col 3</span><span class="arrow">↓</span></div>
      </div>

      
      <div class="row-labels">
        <div class="row-tag" id="row-1"><span>Row 1</span><span>→</span></div>
        <div class="row-tag" id="row-2"><span>Row 2</span><span>→</span></div>
      </div>

      
      <div class="matrix-box">
        <button class="cell-btn" data-r="1" data-c="1">a<sub class="idx-r">1</sub><sub class="idx-c">1</sub></button>
        <button class="cell-btn" data-r="1" data-c="2">a<sub class="idx-r">1</sub><sub class="idx-c">2</sub></button>
        <button class="cell-btn" data-r="1" data-c="3">a<sub class="idx-r">1</sub><sub class="idx-c">3</sub></button>
        <button class="cell-btn" data-r="2" data-c="1">a<sub class="idx-r">2</sub><sub class="idx-c">1</sub></button>
        <button class="cell-btn" data-r="2" data-c="2">a<sub class="idx-r">2</sub><sub class="idx-c">2</sub></button>
        <button class="cell-btn" data-r="2" data-c="3">a<sub class="idx-r">2</sub><sub class="idx-c">3</sub></button>
      </div>
    </div>

    
    <div class="inspector">
      <div class="active-badge" id="badge">a<sub><span style="color:#7c3aed;">1</span><span style="color:#0284c7;">2</span></sub></div>
      <div class="divider"></div>
      <div class="legend-item">
        <span class="pill pill-r">i</span>
        <span>Row <strong id="val-r" style="color:#7c3aed;">1</strong></span>
      </div>
      <div class="legend-item">
        <span class="pill pill-c">j</span>
        <span>Col <strong id="val-c" style="color:#0284c7;">2</strong></span>
      </div>
    </div>
  </div>

  <script>
    const cells = document.querySelectorAll('.cell-btn');
    const rowTags = [document.getElementById('row-1'), document.getElementById('row-2')];
    const colTags = [document.getElementById('col-1'), document.getElementById('col-2'), document.getElementById('col-3')];
    const badge = document.getElementById('badge');
    const valR = document.getElementById('val-r');
    const valC = document.getElementById('val-c');

    function selectCell(r, c) {
      cells.forEach(btn => {
        const br = parseInt(btn.dataset.r);
        const bc = parseInt(btn.dataset.c);
        btn.classList.remove('active', 'in-row', 'in-col');

        if (br === r && bc === c) {
          btn.classList.add('active');
        } else if (br === r) {
          btn.classList.add('in-row');
        } else if (bc === c) {
          btn.classList.add('in-col');
        }
      });

      rowTags.forEach((el, idx) => el.classList.toggle('active', idx + 1 === r));
      colTags.forEach((el, idx) => el.classList.toggle('active', idx + 1 === c));

      badge.innerHTML = `a<sub><span style="color:#7c3aed;">${r}</span><span style="color:#0284c7;">${c}</span></sub>`;
      valR.textContent = r;
      valC.textContent = c;
    }

    cells.forEach(btn => {
      btn.addEventListener('click', () => {
        selectCell(parseInt(btn.dataset.r), parseInt(btn.dataset.c));
      });
    });

    // Initialize with a12 highlighted
    selectCell(1, 2);
  </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;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background-color: #f8fafc;
      color: #1e293b;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .main-layout {
      width: 100%;
      max-width: 620px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    /* Top Decoder Bar */
    .decoder-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 8px;
      background: #ffffff;
      padding: 10px 16px;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      font-size: 14px;
      font-weight: 500;
      color: #475569;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }

    .pill {
      display: inline-flex;
      align-items: center;
      padding: 3px 10px;
      border-radius: 9999px;
      font-weight: 700;
      font-size: 13px;
      letter-spacing: 0.02em;
    }

    .pill-row {
      background-color: #eff6ff;
      color: #2563eb;
      border: 1px solid #bfdbfe;
    }

    .pill-col {
      background-color: #f0fdf4;
      color: #16a34a;
      border: 1px solid #bbf7d0;
    }

    .times-sign {
      color: #94a3b8;
      font-weight: 600;
    }

    /* Cards Grid */
    .cards-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 16px;
      width: 100%;
    }

    .matrix-card {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 16px;
      padding: 20px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
      cursor: pointer;
      user-select: none;
      transition: border-color 0.25s ease, box-shadow 0.25s ease;
    }

    .matrix-card:hover, .matrix-card.active {
      box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
    }

    .matrix-card.row-card:hover, .matrix-card.row-card.active {
      border-color: #93c5fd;
    }

    .matrix-card.col-card:hover, .matrix-card.col-card.active {
      border-color: #86efac;
    }

    /* Header inside Card */
    .card-header {
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }

    .card-title {
      font-size: 17px;
      font-weight: 700;
      color: #0f172a;
    }

    .card-subtag {
      font-size: 12px;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: 6px;
    }

    .row-card .card-subtag {
      background: #eff6ff;
      color: #1d4ed8;
    }

    .col-card .card-subtag {
      background: #f0fdf4;
      color: #15803d;
    }

    /* Visual Matrix Presentation */
    .matrix-display-area {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 120px;
      font-family: 'Cambria Math', 'Times New Roman', serif;
    }

    .matrix-symbol {
      font-size: 20px;
      font-style: italic;
      font-weight: 600;
      color: #334155;
    }

    .matrix-bracket-box {
      position: relative;
      display: inline-flex;
      padding: 8px 14px;
      align-items: center;
      justify-content: center;
    }

    /* Crisp CSS Matrix Brackets */
    .matrix-bracket-box::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 6px;
      border-left: 2.5px solid #334155;
      border-top: 2.5px solid #334155;
      border-bottom: 2.5px solid #334155;
      border-radius: 4px 0 0 4px;
    }

    .matrix-bracket-box::after {
      content: '';
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 6px;
      border-right: 2.5px solid #334155;
      border-top: 2.5px solid #334155;
      border-bottom: 2.5px solid #334155;
      border-radius: 0 4px 4px 0;
    }

    /* Row Matrix Orientation Elements */
    .row-content {
      display: flex;
      gap: 18px;
      padding: 6px 12px;
      border-radius: 8px;
      background: #eff6ff;
      border: 1px dashed #93c5fd;
      position: relative;
      transition: background-color 0.2s ease;
    }

    .row-card:hover .row-content, .row-card.active .row-content {
      background-color: #dbeafe;
    }

    /* Column Matrix Orientation Elements */
    .col-content {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 8px 14px;
      border-radius: 8px;
      background: #f0fdf4;
      border: 1px dashed #86efac;
      position: relative;
      transition: background-color 0.2s ease;
    }

    .col-card:hover .col-content, .col-card.active .col-content {
      background-color: #dcfce7;
    }

    .matrix-val {
      font-size: 20px;
      font-weight: 700;
      color: #0f172a;
      width: 24px;
      text-align: center;
    }

    /* Dimension Footer */
    .card-footer {
      width: 100%;
      background: #f8fafc;
      border-radius: 10px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      border: 1px solid #f1f5f9;
    }

    .dim-breakdown {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .dim-result {
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
      font-family: system-ui, sans-serif;
    }
  </style>
</head>
<body>

  <div class="main-layout">
    
    <div class="decoder-bar">
      <span>Order format:</span>
      <span class="pill pill-row">m (Rows)</span>
      <span class="times-sign">×</span>
      <span class="pill pill-col">n (Columns)</span>
    </div>

    
    <div class="cards-grid">
      
      
      <div class="matrix-card row-card active" id="rowCard" onclick="setActive('row')">
        <div class="card-header">
          <h2 class="card-title">Row Matrix</h2>
          <span class="card-subtag">1 × n</span>
        </div>

        <div class="matrix-display-area">
          <span class="matrix-symbol">R =</span>
          <div class="matrix-bracket-box">
            <div class="row-content">
              <span class="matrix-val">3</span>
              <span class="matrix-val">-1</span>
              <span class="matrix-val">5</span>
            </div>
          </div>
        </div>

        <div class="card-footer">
          <div class="dim-breakdown">
            <span class="pill pill-row">1 row</span>
            <span class="times-sign">×</span>
            <span class="pill pill-col">3 columns</span>
          </div>
          <div class="dim-result">Dimension: 1 × 3</div>
        </div>
      </div>

      
      <div class="matrix-card col-card" id="colCard" onclick="setActive('col')">
        <div class="card-header">
          <h2 class="card-title">Column Matrix</h2>
          <span class="card-subtag">m × 1</span>
        </div>

        <div class="matrix-display-area">
          <span class="matrix-symbol">C =</span>
          <div class="matrix-bracket-box">
            <div class="col-content">
              <span class="matrix-val">4</span>
              <span class="matrix-val">0</span>
              <span class="matrix-val">-2</span>
            </div>
          </div>
        </div>

        <div class="card-footer">
          <div class="dim-breakdown">
            <span class="pill pill-row">3 rows</span>
            <span class="times-sign">×</span>
            <span class="pill pill-col">1 column</span>
          </div>
          <div class="dim-result">Dimension: 3 × 1</div>
        </div>
      </div>

    </div>
  </div>

  <script>
    function setActive(type) {
      const rowCard = document.getElementById('rowCard');
      const colCard = document.getElementById('colCard');
      if (type === 'row') {
        rowCard.classList.add('active');
        colCard.classList.remove('active');
      } else {
        colCard.classList.add('active');
        rowCard.classList.remove('active');
      }
    }
  </script>
</body>
</html>

OGM.12.VEC.3

Aligned learning resources

Related diagrams