<!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="1:1">
  <title>Collecting and Sorting Data</title>
  <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: #f8fafc;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 12px;
      min-height: 100%;
    }
    .diagram-root {
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* Clipboard container */
    .clipboard {
      background: #fefcf6;
      border: 2px solid #e2d9cc;
      border-radius: 16px;
      padding: 14px 10px 12px;
      position: relative;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }
    .clip {
      position: absolute;
      top: -10px;
      left: 50%;
      transform: translateX(-50%);
      width: 70px;
      height: 18px;
      background: #94a3b8;
      border-radius: 6px;
      border: 2px solid #64748b;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .clip::after {
      content: "";
      position: absolute;
      top: 3px;
      left: 50%;
      transform: translateX(-50%);
      width: 24px;
      height: 6px;
      background: #cbd5e1;
      border-radius: 3px;
    }

    .clipboard-title {
      text-align: center;
      font-size: 17px;
      font-weight: 700;
      color: #1e2945;
      margin-top: 4px;
      margin-bottom: 12px;
    }

    /* Columns Layout */
    .columns-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      min-height: 220px;
    }
    .column {
      background: #ffffff;
      border: 1.5px dashed #cbd5e1;
      border-radius: 10px;
      padding: 6px 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: border-color 0.3s ease, background 0.3s ease;
    }
    .column.highlight {
      border-color: #3b82f6;
      background: #f0f7ff;
    }
    .col-header {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      padding-bottom: 6px;
      border-bottom: 1px solid #f1f5f9;
      width: 100%;
    }
    .col-icon {
      font-size: 20px;
      line-height: 1;
    }
    .col-label {
      font-size: 14px;
      font-weight: 700;
      color: #334155;
    }
    .col-count {
      font-size: 12px;
      font-weight: 700;
      color: #2563eb;
      background: #dbeafe;
      padding: 1px 6px;
      border-radius: 10px;
      margin-top: 2px;
      opacity: 0;
      transform: scale(0.8);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    .col-count.show {
      opacity: 1;
      transform: scale(1);
    }

    /* Slots inside column */
    .col-slots {
      display: flex;
      flex-direction: column;
      gap: 6px;
      width: 100%;
      margin-top: 8px;
      flex: 1;
    }

    /* Sticky notes */
    .sticky-card {
      padding: 6px 4px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      text-align: center;
      box-shadow: 0 1.5px 3px rgba(0, 0, 0, 0.08);
      opacity: 0;
      transform: translateY(-8px) scale(0.92);
      transition: opacity 0.35s ease, transform 0.35s ease;
    }
    .sticky-card.placed {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    /* Note Color Themes */
    .note-cat {
      background: #fef08a;
      color: #713f12;
      border-left: 3px solid #eab308;
    }
    .note-dog {
      background: #bae6fd;
      color: #0369a1;
      border-left: 3px solid #0284c7;
    }
    .note-fish {
      background: #bbf7d0;
      color: #15803d;
      border-left: 3px solid #16a34a;
    }

    /* Survey incoming queue */
    .queue-box {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
    }
    .queue-title {
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      white-space: nowrap;
    }
    .queue-items {
      display: flex;
      gap: 4px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .queue-pill {
      font-size: 12px;
      padding: 3px 6px;
      border-radius: 4px;
      font-weight: 600;
      background: #f1f5f9;
      color: #64748b;
      transition: background 0.3s, color 0.3s, opacity 0.3s;
    }
    .queue-pill.active {
      background: #3b82f6;
      color: #ffffff;
      box-shadow: 0 0 0 2px #93c5fd;
    }
    .queue-pill.done {
      opacity: 0.35;
      text-decoration: line-through;
    }

    /* Stepper Controls */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 2px;
    }
    .btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 5px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      user-select: none;
    }
    .btn:active {
      background: #e2e8f0;
    }
    .btn-primary {
      background: #2563eb;
      color: #ffffff;
      border-color: #1d4ed8;
    }
    .btn-primary:active {
      background: #1d4ed8;
    }
    .step-text {
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      min-width: 68px;
      text-align: center;
    }
  </style>
</head>
<body>

<div class="diagram-root">

  
  <div class="queue-box">
    <span class="queue-title">Responses:</span>
    <div class="queue-items">
      <span class="queue-pill" id="pill-0">Maya: 🐱</span>
      <span class="queue-pill" id="pill-1">Leo: 🐶</span>
      <span class="queue-pill" id="pill-2">Sam: 🐱</span>
      <span class="queue-pill" id="pill-3">Ava: 🐟</span>
      <span class="queue-pill" id="pill-4">Ben: 🐶</span>
    </div>
  </div>

  
  <div class="clipboard">
    <div class="clip"></div>
    <div class="clipboard-title">📋 Favorite Pet?</div>

    <div class="columns-grid">
      
      <div class="column" id="col-cat">
        <div class="col-header">
          <span class="col-icon">🐱</span>
          <span class="col-label">Cat</span>
          <span class="col-count" id="count-cat">0</span>
        </div>
        <div class="col-slots">
          <div class="sticky-card note-cat" id="card-0">Maya</div>
          <div class="sticky-card note-cat" id="card-2">Sam</div>
        </div>
      </div>

      
      <div class="column" id="col-dog">
        <div class="col-header">
          <span class="col-icon">🐶</span>
          <span class="col-label">Dog</span>
          <span class="col-count" id="count-dog">0</span>
        </div>
        <div class="col-slots">
          <div class="sticky-card note-dog" id="card-1">Leo</div>
          <div class="sticky-card note-dog" id="card-4">Ben</div>
        </div>
      </div>

      
      <div class="column" id="col-fish">
        <div class="col-header">
          <span class="col-icon">🐟</span>
          <span class="col-label">Fish</span>
          <span class="col-count" id="count-fish">0</span>
        </div>
        <div class="col-slots">
          <div class="sticky-card note-fish" id="card-3">Ava</div>
        </div>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button class="btn" id="prevBtn">◀ Prev</button>
    <button class="btn btn-primary" id="playBtn">▶ Auto</button>
    <button class="btn" id="nextBtn">Next ▶</button>
    <span class="step-text" id="stepText">Start</span>
  </div>

</div>

<script>
  const steps = [
    { targetCol: null, placedIdx: [] },
    { targetCol: 'cat',  placedIdx: [0] },
    { targetCol: 'dog',  placedIdx: [0, 1] },
    { targetCol: 'cat',  placedIdx: [0, 1, 2] },
    { targetCol: 'fish', placedIdx: [0, 1, 2, 3] },
    { targetCol: 'dog',  placedIdx: [0, 1, 2, 3, 4] }
  ];

  let currentStep = 0;
  let timer = null;

  const cards = [
    document.getElementById('card-0'),
    document.getElementById('card-1'),
    document.getElementById('card-2'),
    document.getElementById('card-3'),
    document.getElementById('card-4')
  ];

  const pills = [
    document.getElementById('pill-0'),
    document.getElementById('pill-1'),
    document.getElementById('pill-2'),
    document.getElementById('pill-3'),
    document.getElementById('pill-4')
  ];

  const cols = {
    cat: document.getElementById('col-cat'),
    dog: document.getElementById('col-dog'),
    fish: document.getElementById('col-fish')
  };

  const countCat = document.getElementById('count-cat');
  const countDog = document.getElementById('count-dog');
  const countFish = document.getElementById('count-fish');
  const stepText = document.getElementById('stepText');
  const playBtn = document.getElementById('playBtn');

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

    // Cards placed state
    cards.forEach((c, i) => {
      if (s.placedIdx.includes(i)) {
        c.classList.add('placed');
      } else {
        c.classList.remove('placed');
      }
    });

    // Pills state
    pills.forEach((p, i) => {
      p.classList.remove('active', 'done');
      if (s.placedIdx.includes(i)) {
        p.classList.add('done');
      } else if (i === currentStep) {
        p.classList.add('active');
      }
    });

    // Column highlight
    Object.keys(cols).forEach(k => cols[k].classList.remove('highlight'));
    if (s.targetCol && cols[s.targetCol]) {
      cols[s.targetCol].classList.add('highlight');
    }

    // Counts
    const numCat = s.placedIdx.filter(i => i === 0 || i === 2).length;
    const numDog = s.placedIdx.filter(i => i === 1 || i === 4).length;
    const numFish = s.placedIdx.filter(i => i === 3).length;

    countCat.textContent = numCat;
    countDog.textContent = numDog;
    countFish.textContent = numFish;

    countCat.classList.toggle('show', numCat > 0);
    countDog.classList.toggle('show', numDog > 0);
    countFish.classList.toggle('show', numFish > 0);

    stepText.textContent = currentStep === 0 ? 'Start' : (currentStep === 5 ? 'All Sorted!' : `${currentStep} / 5`);
  }

  function setStep(idx) {
    currentStep = Math.max(0, Math.min(steps.length - 1, idx));
    render();
  }

  function next() {
    if (currentStep < steps.length - 1) {
      setStep(currentStep + 1);
    } else {
      setStep(0);
    }
  }

  function prev() {
    if (currentStep > 0) {
      setStep(currentStep - 1);
    } else {
      setStep(steps.length - 1);
    }
  }

  function togglePlay() {
    if (timer) {
      clearInterval(timer);
      timer = null;
      playBtn.textContent = '▶ Auto';
    } else {
      playBtn.textContent = '⏸ Pause';
      next();
      timer = setInterval(() => {
        next();
      }, 3000);
    }
  }

  document.getElementById('nextBtn').addEventListener('click', () => {
    if (timer) togglePlay();
    next();
  });

  document.getElementById('prevBtn').addEventListener('click', () => {
    if (timer) togglePlay();
    prev();
  });

  playBtn.addEventListener('click', togglePlay);

  pills.forEach((p, idx) => {
    p.addEventListener('click', () => {
      if (timer) togglePlay();
      setStep(idx + 1);
    });
  });

  // Initial render
  render();
</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;
      color: #1e2945;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px;
      gap: 8px;
      user-select: none;
      -webkit-user-select: none;
    }

    /* Controls Header */
    .controls {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      max-width: 480px;
      justify-content: center;
    }

    .btn {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      color: #1e2945;
      font-size: 13px;
      font-weight: 600;
      padding: 6px 14px;
      border-radius: 20px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background 0.2s, border-color 0.2s;
    }

    .btn.active {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.3);
    }

    /* Diagram Canvas */
    .diagram-area {
      position: relative;
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      flex: 1;
    }

    /* Top: Messy Pile Card */
    .pile-card {
      position: relative;
      width: 100%;
      background: #f8fafc;
      border: 1.5px dashed #cbd5e1;
      border-radius: 14px;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    }

    .pile-title {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
    }

    .pile-items {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 6px 10px;
      min-height: 48px;
    }

    .item {
      font-size: 24px;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      background: #ffffff;
      border-radius: 8px;
      border: 1px solid #e6e6e6;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      transition: opacity 0.4s ease, transform 0.4s ease;
    }

    /* Messy slight tilt in pile */
    .item.t1 { transform: rotate(-8deg); }
    .item.t2 { transform: rotate(10deg); }
    .item.t3 { transform: rotate(-14deg); }
    .item.t4 { transform: rotate(12deg); }
    .item.t5 { transform: rotate(-6deg); }
    .item.t6 { transform: rotate(15deg); }
    .item.t7 { transform: rotate(-12deg); }
    .item.t8 { transform: rotate(8deg); }
    .item.t9 { transform: rotate(-5deg); }

    /* Sorted state pile dimming */
    .sorted-mode .pile-items .item {
      opacity: 0.25;
      transform: scale(0.9);
    }

    /* Mid: Animated Flow Arrows */
    .arrow-container {
      width: 100%;
      height: 28px;
      position: relative;
    }

    .arrow-svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .flow-line {
      stroke-dasharray: 4, 4;
      stroke-width: 2;
      animation: dashMove 1.2s linear infinite;
    }

    @keyframes dashMove {
      from { stroke-dashoffset: 16; }
      to { stroke-dashoffset: 0; }
    }

    /* Bottom: 3 Crates */
    .crates-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      width: 100%;
    }

    .crate {
      background: #ffffff;
      border: 2px solid #e6e6e6;
      border-radius: 12px;
      padding: 8px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
      transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .crate.apple {
      border-color: #f87171;
    }
    .crate.banana {
      border-color: #facc15;
    }
    .crate.grape {
      border-color: #c084fc;
    }

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

    .crate.apple .crate-header { color: #dc2626; }
    .crate.banana .crate-header { color: #ca8a04; }
    .crate.grape .crate-header { color: #7c3aed; }

    .crate-slot {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      gap: 4px;
      width: 100%;
      background: #f8fafc;
      border-radius: 8px;
      padding: 6px 2px;
      min-height: 36px;
    }

    .crate-slot .item {
      width: 28px;
      height: 28px;
      font-size: 18px;
      border-radius: 6px;
      transform: none;
      opacity: 0;
      transform: translateY(-8px);
      transition: opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .sorted-mode .crate-slot .item {
      opacity: 1;
      transform: translateY(0);
    }

    /* Stagger crate fruits entry */
    .sorted-mode .crate.apple .crate-slot .item:nth-child(1) { transition-delay: 0.1s; }
    .sorted-mode .crate.apple .crate-slot .item:nth-child(2) { transition-delay: 0.2s; }
    .sorted-mode .crate.apple .crate-slot .item:nth-child(3) { transition-delay: 0.3s; }

    .sorted-mode .crate.banana .crate-slot .item:nth-child(1) { transition-delay: 0.2s; }
    .sorted-mode .crate.banana .crate-slot .item:nth-child(2) { transition-delay: 0.3s; }
    .sorted-mode .crate.banana .crate-slot .item:nth-child(3) { transition-delay: 0.4s; }

    .sorted-mode .crate.grape .crate-slot .item:nth-child(1) { transition-delay: 0.3s; }
    .sorted-mode .crate.grape .crate-slot .item:nth-child(2) { transition-delay: 0.4s; }
    .sorted-mode .crate.grape .crate-slot .item:nth-child(3) { transition-delay: 0.5s; }

    .crate-count {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      background: #f1f5f9;
      padding: 2px 8px;
      border-radius: 10px;
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button id="btnMixed" class="btn active" onclick="setMode('mixed')">🔀 Mixed Pile</button>
    <button id="btnSorted" class="btn" onclick="setMode('sorted')">📦 Sorted Crates</button>
  </div>

  <div id="diagramArea" class="diagram-area">
    
    <div class="pile-card">
      <div class="pile-title">Mixed Fruit Pile (9 Items)</div>
      <div class="pile-items">
        <span class="item t1">🍎</span>
        <span class="item t2">🍌</span>
        <span class="item t3">🍇</span>
        <span class="item t4">🍌</span>
        <span class="item t5">🍎</span>
        <span class="item t6">🍇</span>
        <span class="item t7">🍎</span>
        <span class="item t8">🍇</span>
        <span class="item t9">🍌</span>
      </div>
    </div>

    
    <div class="arrow-container">
      <svg class="arrow-svg" viewBox="0 0 300 28" preserveAspectRatio="none">
        <defs>
          <marker id="arrowRed" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
            <polygon points="0 0, 6 3, 0 6" fill="#f87171" />
          </marker>
          <marker id="arrowYellow" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
            <polygon points="0 0, 6 3, 0 6" fill="#eab308" />
          </marker>
          <marker id="arrowPurple" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
            <polygon points="0 0, 6 3, 0 6" fill="#c084fc" />
          </marker>
        </defs>
        
        <path class="flow-line" d="M 150 0 C 130 14, 50 10, 50 24" stroke="#f87171" fill="none" marker-end="url(#arrowRed)" />
        <path class="flow-line" d="M 150 0 L 150 24" stroke="#eab308" fill="none" marker-end="url(#arrowYellow)" />
        <path class="flow-line" d="M 150 0 C 170 14, 250 10, 250 24" stroke="#c084fc" fill="none" marker-end="url(#arrowPurple)" />
      </svg>
    </div>

    
    <div class="crates-row">
      
      <div class="crate apple">
        <div class="crate-header">Apples</div>
        <div class="crate-slot">
          <span class="item">🍎</span>
          <span class="item">🍎</span>
          <span class="item">🍎</span>
        </div>
        <div class="crate-count">3 items</div>
      </div>

      
      <div class="crate banana">
        <div class="crate-header">Bananas</div>
        <div class="crate-slot">
          <span class="item">🍌</span>
          <span class="item">🍌</span>
          <span class="item">🍌</span>
        </div>
        <div class="crate-count">3 items</div>
      </div>

      
      <div class="crate grape">
        <div class="crate-header">Grapes</div>
        <div class="crate-slot">
          <span class="item">🍇</span>
          <span class="item">🍇</span>
          <span class="item">🍇</span>
        </div>
        <div class="crate-count">3 items</div>
      </div>
    </div>
  </div>

  <script>
    let isSorted = false;
    let autoInterval = null;

    function setMode(mode) {
      const diagram = document.getElementById('diagramArea');
      const btnMixed = document.getElementById('btnMixed');
      const btnSorted = document.getElementById('btnSorted');

      if (mode === 'sorted') {
        isSorted = true;
        diagram.classList.add('sorted-mode');
        btnSorted.classList.add('active');
        btnMixed.classList.remove('active');
      } else {
        isSorted = false;
        diagram.classList.remove('sorted-mode');
        btnMixed.classList.add('active');
        btnSorted.classList.remove('active');
      }
    }

    // Auto-cycle gently every 3.5 seconds
    function startCycle() {
      autoInterval = setInterval(() => {
        setMode(isSorted ? 'mixed' : 'sorted');
      }, 3500);
    }

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

    // Start auto demo
    startCycle();
  </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;
      font-family: system-ui, -apple-system, sans-serif;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      background: #ffffff;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      user-select: none;
    }

    .main-stage {
      position: relative;
      width: 100%;
      max-width: 620px;
      display: flex;
      gap: 16px;
      justify-content: space-between;
      align-items: stretch;
      margin: auto 0;
    }

    /* Left: Unsorted Tray */
    .tray-panel {
      flex: 1;
      background: #f8fafc;
      border: 2px dashed #cbd5e1;
      border-radius: 14px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }

    .panel-label {
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 8px;
    }

    .items-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      width: 100%;
      max-width: 180px;
    }

    .item-slot {
      aspect-ratio: 1;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      transition: box-shadow 0.3s ease, border-color 0.3s ease;
    }

    .item-slot.active {
      box-shadow: 0 0 0 3px #3b82f6, 0 4px 12px rgba(59, 130, 246, 0.25);
      border-color: #3b82f6;
      z-index: 10;
    }

    .item-slot.sorted {
      opacity: 0.25;
      background: #f1f5f9;
    }

    .shape {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Right: Categorized Boxes */
    .boxes-panel {
      flex: 1.1;
      display: flex;
      flex-direction: column;
      gap: 8px;
      justify-content: space-between;
    }

    .cat-box {
      border-radius: 12px;
      padding: 8px 12px;
      display: flex;
      flex-direction: column;
      min-height: 64px;
      border: 2px solid transparent;
      transition: box-shadow 0.3s ease, transform 0.2s ease;
    }

    .cat-box.red { background: #fef2f2; border-color: #fca5a5; }
    .cat-box.blue { background: #eff6ff; border-color: #93c5fd; }
    .cat-box.green { background: #ecfdf5; border-color: #6ee7b7; }

    .cat-box.target-active {
      box-shadow: 0 0 0 3px currentColor, 0 6px 14px rgba(0,0,0,0.08);
    }
    .cat-box.red.target-active { color: #ef4444; }
    .cat-box.blue.target-active { color: #3b82f6; }
    .cat-box.green.target-active { color: #10b981; }

    .box-header {
      font-size: 13px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 6px;
      color: #1e2945;
    }

    .box-items {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 4px;
      min-height: 28px;
      align-items: center;
    }

    .mini-shape {
      width: 24px;
      height: 24px;
    }

    /* Magnifier Callout */
    .callout {
      position: absolute;
      top: -12px;
      left: 50%;
      transform: translateX(-50%);
      background: #1e2945;
      color: #ffffff;
      font-size: 12px;
      font-weight: 600;
      padding: 4px 10px;
      border-radius: 20px;
      white-space: nowrap;
      box-shadow: 0 4px 12px rgba(30, 41, 69, 0.25);
      display: flex;
      align-items: center;
      gap: 6px;
      z-index: 20;
      pointer-events: none;
    }

    .magnifier-lens {
      position: absolute;
      width: 44px;
      height: 44px;
      border: 3px solid #f59e0b;
      border-radius: 50%;
      box-shadow: 0 0 12px rgba(245, 158, 11, 0.6), inset 0 0 8px rgba(245, 158, 11, 0.3);
      pointer-events: none;
      z-index: 15;
      transform: translate(-50%, -50%);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .magnifier-lens::after {
      content: '';
      position: absolute;
      bottom: -10px;
      right: -8px;
      width: 5px;
      height: 14px;
      background: #f59e0b;
      border-radius: 2px;
      transform: rotate(-45deg);
    }

    /* SVG Connecting Flight Arrow */
    .overlay-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 12;
    }

    .flow-arrow {
      stroke: #3b82f6;
      stroke-width: 3;
      stroke-linecap: round;
      fill: none;
      stroke-dasharray: 6, 6;
      animation: dashFlow 1s linear infinite;
    }

    @keyframes dashFlow {
      to { stroke-dashoffset: -24; }
    }

    /* Controls */
    .controls {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 10px;
    }

    .btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      padding: 6px 14px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .btn:active { background: #e2e8f0; }

    .step-pill {
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      padding: 4px 8px;
    }

    /* Mobile adjustments */
    @media (max-width: 440px) {
      .main-stage {
        flex-direction: column;
        gap: 12px;
      }
      .items-grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: 260px;
      }
      .boxes-panel {
        gap: 6px;
      }
      .cat-box {
        min-height: 52px;
        padding: 6px 10px;
      }
    }
  </style>
</head>
<body>

  <div class="main-stage" id="stage">
    
    <svg class="overlay-svg" id="svgOverlay">
      <defs>
        <marker id="arrowhead" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto">
          <path d="M 0 1 L 8 5 L 0 9 z" fill="#3b82f6" id="arrowColor" />
        </marker>
      </defs>
      <path id="flightPath" class="flow-arrow" marker-end="url(#arrowhead)" d="" />
    </svg>

    
    <div id="lens" class="magnifier-lens"></div>

    
    <div class="tray-panel">
      <div class="panel-label">Unsorted Tray</div>
      <div class="items-grid" id="trayGrid">
        
        <div class="item-slot" id="slot-0" data-color="blue" data-shape="star"></div>
        <div class="item-slot" id="slot-1" data-color="red" data-shape="circle"></div>
        <div class="item-slot" id="slot-2" data-color="green" data-shape="triangle"></div>
        <div class="item-slot" id="slot-3" data-color="blue" data-shape="square"></div>
        <div class="item-slot" id="slot-4" data-color="red" data-shape="star"></div>
        <div class="item-slot" id="slot-5" data-color="green" data-shape="circle"></div>
      </div>
      <div class="callout" id="calloutBubble">🔍 Blue star → Blue Box</div>
    </div>

    
    <div class="boxes-panel">
      <div class="cat-box red" id="box-red">
        <div class="box-header">🔴 Red Items</div>
        <div class="box-items" id="items-red"></div>
      </div>
      <div class="cat-box blue" id="box-blue">
        <div class="box-header">🔵 Blue Items</div>
        <div class="box-items" id="items-blue"></div>
      </div>
      <div class="cat-box green" id="box-green">
        <div class="box-header">🟢 Green Items</div>
        <div class="box-items" id="items-green"></div>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button class="btn" id="prevBtn">‹ Prev</button>
    <span class="step-pill" id="stepCounter">1 / 6</span>
    <button class="btn" id="nextBtn">Next ›</button>
    <button class="btn" id="autoBtn" style="margin-left: 4px;">⏸ Pause</button>
  </div>

  <script>
    // Shape SVG Renderers
    function getShapeSvg(type, colorHex, size = 32) {
      if (type === 'star') {
        return `<svg class="shape" style="width:${size}px;height:${size}px;" viewBox="0 0 24 24" fill="${colorHex}"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>`;
      } else if (type === 'circle') {
        return `<svg class="shape" style="width:${size}px;height:${size}px;" viewBox="0 0 24 24" fill="${colorHex}"><circle cx="12" cy="12" r="9"/></svg>`;
      } else if (type === 'triangle') {
        return `<svg class="shape" style="width:${size}px;height:${size}px;" viewBox="0 0 24 24" fill="${colorHex}"><path d="M12 3L2 20h20L12 3z"/></svg>`;
      } else if (type === 'square') {
        return `<svg class="shape" style="width:${size}px;height:${size}px;" viewBox="0 0 24 24" fill="${colorHex}"><rect x="3" y="3" width="18" height="18" rx="3"/></svg>`;
      }
      return '';
    }

    const colorMap = {
      blue: '#3b82f6',
      red: '#ef4444',
      green: '#10b981'
    };

    const itemsData = [
      { color: 'blue', shape: 'star', label: 'Color = Blue → Blue Box' },
      { color: 'red', shape: 'circle', label: 'Color = Red → Red Box' },
      { color: 'green', shape: 'triangle', label: 'Color = Green → Green Box' },
      { color: 'blue', shape: 'square', label: 'Color = Blue → Blue Box' },
      { color: 'red', shape: 'star', label: 'Color = Red → Red Box' },
      { color: 'green', shape: 'circle', label: 'Color = Green → Green Box' }
    ];

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

    // Elements
    const stage = document.getElementById('stage');
    const lens = document.getElementById('lens');
    const callout = document.getElementById('calloutBubble');
    const flightPath = document.getElementById('flightPath');
    const arrowColor = document.getElementById('arrowColor');
    const stepCounter = document.getElementById('stepCounter');
    const autoBtn = document.getElementById('autoBtn');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');

    // Populate initial tray slots
    itemsData.forEach((item, idx) => {
      const slot = document.getElementById(`slot-${idx}`);
      slot.innerHTML = getShapeSvg(item.shape, colorMap[item.color], 30);
    });

    function updateView() {
      const item = itemsData[currentStep];
      const activeSlot = document.getElementById(`slot-${currentStep}`);
      const targetBox = document.getElementById(`box-${item.color}`);
      const hex = colorMap[item.color];

      // Update Tray slots
      itemsData.forEach((d, idx) => {
        const slot = document.getElementById(`slot-${idx}`);
        slot.classList.remove('active', 'sorted');
        if (idx < currentStep) slot.classList.add('sorted');
        else if (idx === currentStep) slot.classList.add('active');
      });

      // Update right boxes items
      ['red', 'blue', 'green'].forEach(c => {
        const container = document.getElementById(`items-${c}`);
        const box = document.getElementById(`box-${c}`);
        container.innerHTML = '';
        box.classList.remove('target-active');
      });

      // Fill items sorted up to and including current step
      for (let i = 0; i <= currentStep; i++) {
        const prevItem = itemsData[i];
        const container = document.getElementById(`items-${prevItem.color}`);
        const mini = document.createElement('div');
        mini.className = 'mini-shape';
        mini.innerHTML = getShapeSvg(prevItem.shape, colorMap[prevItem.color], 24);
        container.appendChild(mini);
      }

      targetBox.classList.add('target-active');

      // Update Magnifier & Callout
      const stageRect = stage.getBoundingClientRect();
      const slotRect = activeSlot.getBoundingClientRect();
      const lensX = slotRect.left + slotRect.width / 2 - stageRect.left;
      const lensY = slotRect.top + slotRect.height / 2 - stageRect.top;

      lens.style.left = `${lensX}px`;
      lens.style.top = `${lensY}px`;
      lens.style.borderColor = hex;
      lens.style.boxShadow = `0 0 14px ${hex}88`;

      callout.textContent = `🔍 ${item.label}`;
      callout.style.borderColor = hex;

      // Update Arrow
      const targetRect = targetBox.getBoundingClientRect();
      const targetX = targetRect.left + 24 - stageRect.left;
      const targetY = targetRect.top + targetRect.height / 2 - stageRect.top;

      const deltaX = targetX - lensX;
      const cpX = lensX + deltaX * 0.5;
      const cpY = Math.min(lensY, targetY) - 30;

      flightPath.setAttribute('d', `M ${lensX + 16} ${lensY} Q ${cpX} ${cpY} ${targetX} ${targetY}`);
      flightPath.style.stroke = hex;
      arrowColor.setAttribute('fill', hex);

      // Step text
      stepCounter.textContent = `${currentStep + 1} / ${itemsData.length}`;
    }

    function nextStep() {
      currentStep = (currentStep + 1) % itemsData.length;
      updateView();
    }

    function prevStep() {
      currentStep = (currentStep - 1 + itemsData.length) % itemsData.length;
      updateView();
    }

    function startAuto() {
      stopAuto();
      autoPlaying = true;
      autoBtn.textContent = '⏸ Pause';
      timer = setInterval(nextStep, 3200);
    }

    function stopAuto() {
      autoPlaying = false;
      autoBtn.textContent = '▶ Play';
      if (timer) clearInterval(timer);
    }

    // Events
    nextBtn.addEventListener('click', () => { stopAuto(); nextStep(); });
    prevBtn.addEventListener('click', () => { stopAuto(); prevStep(); });
    autoBtn.addEventListener('click', () => {
      if (autoPlaying) stopAuto();
      else startAuto();
    });

    itemsData.forEach((_, idx) => {
      document.getElementById(`slot-${idx}`).addEventListener('click', () => {
        stopAuto();
        currentStep = idx;
        updateView();
      });
    });

    // Window resize handler for SVG path recalculation
    window.addEventListener('resize', updateView);

    // Initial render
    setTimeout(() => {
      updateView();
      startAuto();
    }, 100);
  </script>
</body>
</html>

OGM.2.DAT.1

Aligned learning resources

Related diagrams