<!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: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 16px 8px;
    }

    .baskets-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
      width: 100%;
      max-width: 600px;
    }

    .basket-column {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

    .check-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      font-size: 20px;
      font-weight: 800;
      box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    }

    .check-red {
      background: #fee2e2;
      color: #dc2626;
      border: 2px solid #ef4444;
    }

    .check-green {
      background: #dcfce7;
      color: #16a34a;
      border: 2px solid #22c55e;
    }

    .basket {
      width: 100%;
      border-radius: 18px;
      padding: 16px 12px 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      transition: box-shadow 0.25s ease;
    }

    .basket-red {
      background: #fef2f2;
      border: 2.5px solid #ef4444;
      box-shadow: 0 4px 12px rgba(239, 68, 68, 0.08);
    }

    .basket-green {
      background: #f0fdf4;
      border: 2.5px solid #22c55e;
      box-shadow: 0 4px 12px rgba(34, 197, 94, 0.08);
    }

    .basket-label {
      font-size: 16px;
      font-weight: 800;
      letter-spacing: 0.2px;
      padding: 4px 14px;
      border-radius: 20px;
      margin-bottom: 12px;
    }

    .label-red {
      background: #ef4444;
      color: #ffffff;
    }

    .label-green {
      background: #22c55e;
      color: #ffffff;
    }

    .items-container {
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%;
    }

    .item-card {
      display: flex;
      align-items: center;
      justify-content: center;
      background: #ffffff;
      border-radius: 12px;
      padding: 10px 8px;
      font-size: 28px;
      line-height: 1;
      border: 1.5px solid rgba(0,0,0,0.06);
      box-shadow: 0 2px 4px rgba(0,0,0,0.03);
      cursor: pointer;
      user-select: none;
      transition: background-color 0.2s ease;
    }

    .item-card:active {
      background-color: #f8fafc;
    }

    .basket-rim {
      width: 80%;
      height: 4px;
      border-radius: 2px;
      margin-top: 10px;
      opacity: 0.4;
    }

    .rim-red { background: #ef4444; }
    .rim-green { background: #22c55e; }

    @media (max-width: 400px) {
      .item-card {
        font-size: 24px;
        padding: 8px 4px;
      }
      .basket-label {
        font-size: 14px;
        padding: 3px 10px;
      }
      .check-badge {
        width: 32px;
        height: 32px;
        font-size: 18px;
      }
    }
  </style>
</head>
<body>
  <div class="baskets-grid">
    
    <div class="basket-column">
      <div class="check-badge check-red" title="Color Match">✓</div>
      <div class="basket basket-red">
        <div class="basket-label label-red">Red Group</div>
        <div class="items-container">
          <div class="item-card" title="Red Shoe">👠</div>
          <div class="item-card" title="Red Heart">❤️</div>
          <div class="item-card" title="Red Fire Truck">🚒</div>
        </div>
        <div class="basket-rim rim-red"></div>
      </div>
    </div>

    
    <div class="basket-column">
      <div class="check-badge check-green" title="Color Match">✓</div>
      <div class="basket basket-green">
        <div class="basket-label label-green">Green Group</div>
        <div class="items-container">
          <div class="item-card" title="Green Frog">🐸</div>
          <div class="item-card" title="Green Leaf">🍃</div>
          <div class="item-card" title="Green Dinosaur">🦖</div>
        </div>
        <div class="basket-rim rim-green"></div>
      </div>
    </div>
  </div>
</body>
</html>

Sorting Objects by Color

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sorting Objects by Color</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
      -webkit-user-select: none;
    }

    body {
      width: 100%;
      margin: 0;
      padding: 12px 10px 14px;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e293b;
      background: #f8fafc;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      overflow-x: hidden;
    }

    .diagram-container {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      position: relative;
    }

    /* Top Bins Row */
    .bins-row {
      display: flex;
      width: 100%;
      justify-content: space-between;
      gap: 8px;
      z-index: 2;
    }

    .bin {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      border-radius: 12px;
      padding: 8px 4px 6px;
      border: 2px solid transparent;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
      min-height: 94px;
      position: relative;
    }

    .bin-red {
      border-color: #fca5a5;
      background: #fef2f2;
    }
    .bin-blue {
      border-color: #93c5fd;
      background: #eff6ff;
    }
    .bin-yellow {
      border-color: #fde047;
      background: #fefce8;
    }

    .bin.active-red {
      border-color: #ef4444;
      box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3), 0 6px 14px rgba(239, 68, 68, 0.15);
      transform: translateY(-2px);
    }
    .bin.active-blue {
      border-color: #3b82f6;
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3), 0 6px 14px rgba(59, 130, 246, 0.15);
      transform: translateY(-2px);
    }
    .bin.active-yellow {
      border-color: #eab308;
      box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.3), 0 6px 14px rgba(234, 179, 8, 0.15);
      transform: translateY(-2px);
    }

    .bin-title {
      font-size: 13px;
      font-weight: 700;
      margin-bottom: 3px;
      white-space: nowrap;
    }
    .bin-red .bin-title { color: #dc2626; }
    .bin-blue .bin-title { color: #2563eb; }
    .bin-yellow .bin-title { color: #b45309; }

    .badge {
      font-size: 11px;
      font-weight: 700;
      padding: 1px 7px;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.95);
      border: 1px solid rgba(0, 0, 0, 0.08);
      margin-bottom: 5px;
      color: #475569;
      transition: color 0.2s ease, background-color 0.2s ease;
    }

    .badge.highlight {
      background: #1e293b;
      color: #ffffff;
    }

    .bin-slots {
      display: flex;
      gap: 6px;
      justify-content: center;
      align-items: center;
      width: 100%;
      min-height: 36px;
    }

    .slot {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      border: 1.5px dashed rgba(0, 0, 0, 0.18);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Center Stage Area */
    .stage {
      position: relative;
      width: 100%;
      height: 125px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: visible;
    }

    .start-pile {
      position: relative;
      width: 126px;
      height: 90px;
      background: #ffffff;
      border-radius: 14px;
      border: 2px dashed #cbd5e1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding-top: 5px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    }

    .start-label {
      font-size: 11px;
      font-weight: 700;
      color: #64748b;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

    /* Floating Animated Items */
    .fly-item {
      position: absolute;
      width: 34px;
      height: 34px;
      border-radius: 8px;
      background: #ffffff;
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      pointer-events: none;
      z-index: 10;
      border: 1px solid rgba(0, 0, 0, 0.08);
      will-change: transform, opacity;
      top: 50%;
      left: 50%;
      margin-top: -17px;
      margin-left: -17px;
    }

    /* Bottom Controls */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      z-index: 2;
    }

    .ctrl-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #334155;
      padding: 5px 12px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
      transition: background-color 0.15s, border-color 0.15s;
    }

    .ctrl-btn:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }

    .ctrl-btn:active {
      background: #e2e8f0;
    }

    .status-text {
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      min-width: 130px;
      text-align: left;
    }

    @media (max-width: 400px) {
      body { padding: 8px 6px 10px; }
      .bin-title { font-size: 11px; }
      .badge { font-size: 10px; padding: 1px 5px; }
      .slot { width: 28px; height: 28px; }
      .fly-item { width: 30px; height: 30px; font-size: 17px; margin-top: -15px; margin-left: -15px; }
      .start-pile { width: 108px; height: 82px; }
      .stage { height: 115px; }
      .status-text { font-size: 11px; min-width: 110px; }
      .ctrl-btn { padding: 4px 9px; font-size: 11px; }
    }
  </style>
</head>
<body>

  <div class="diagram-container">
    
    <div class="bins-row">
      
      <div class="bin bin-red" id="binRed">
        <span class="bin-title">Red Bin</span>
        <span class="badge" id="badgeRed">0 items</span>
        <div class="bin-slots">
          <div class="slot" id="slot-r1"></div>
          <div class="slot" id="slot-r2"></div>
        </div>
      </div>

      
      <div class="bin bin-blue" id="binBlue">
        <span class="bin-title">Blue Bin</span>
        <span class="badge" id="badgeBlue">0 items</span>
        <div class="bin-slots">
          <div class="slot" id="slot-b1"></div>
          <div class="slot" id="slot-b2"></div>
        </div>
      </div>

      
      <div class="bin bin-yellow" id="binYellow">
        <span class="bin-title">Yellow Bin</span>
        <span class="badge" id="badgeYellow">0 items</span>
        <div class="bin-slots">
          <div class="slot" id="slot-y1"></div>
          <div class="slot" id="slot-y2"></div>
        </div>
      </div>
    </div>

    
    <div class="stage" id="stage">
      <div class="start-pile" id="startPile">
        <span class="start-label">Start Pile</span>
      </div>

      
      <div class="fly-item" id="item1">🔴</div>
      <div class="fly-item" id="item2">🟦</div>
      <div class="fly-item" id="item3">🚕</div>
      <div class="fly-item" id="item4">🍓</div>
      <div class="fly-item" id="item5">🧢</div>
      <div class="fly-item" id="item6">🔔</div>
    </div>

    
    <div class="controls">
      <button class="ctrl-btn" id="playBtn">⏸ Pause</button>
      <button class="ctrl-btn" id="restartBtn">↺ Replay</button>
      <span class="status-text" id="statusLabel">Sorting by color...</span>
    </div>
  </div>

  <script>
    (function () {
      const items = [
        { id: 'item1', emoji: '🔴', color: 'red', slot: 'slot-r1', pileX: -34, pileY: 10 },
        { id: 'item2', emoji: '🟦', color: 'blue', slot: 'slot-b1', pileX: 0,   pileY: 10 },
        { id: 'item3', emoji: '🚕', color: 'yellow', slot: 'slot-y1', pileX: 34,  pileY: 10 },
        { id: 'item4', emoji: '🍓', color: 'red', slot: 'slot-r2', pileX: -34, pileY: -22 },
        { id: 'item5', emoji: '🧢', color: 'blue', slot: 'slot-b2', pileX: 0,   pileY: -22 },
        { id: 'item6', emoji: '🔔', color: 'yellow', slot: 'slot-y2', pileX: 34,  pileY: -22 }
      ];

      const binElements = {
        red: document.getElementById('binRed'),
        blue: document.getElementById('binBlue'),
        yellow: document.getElementById('binYellow')
      };

      const badgeElements = {
        red: document.getElementById('badgeRed'),
        blue: document.getElementById('badgeBlue'),
        yellow: document.getElementById('badgeYellow')
      };

      const statusLabel = document.getElementById('statusLabel');
      const stage = document.getElementById('stage');
      const playBtn = document.getElementById('playBtn');
      const restartBtn = document.getElementById('restartBtn');

      let isPaused = false;
      let animTime = 0;
      let lastTimestamp = null;
      const TOTAL_CYCLE = 6.2; // total animation loop duration in seconds

      // Timing constants
      const ITEM_INTERVAL = 0.75;
      const ITEM_START_OFFSET = 0.2;
      const FLY_DURATION = 0.55;

      function easeInOutCubic(x) {
        return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2;
      }

      function getSlotOffset(slotId) {
        const slotEl = document.getElementById(slotId);
        const stageRect = stage.getBoundingClientRect();
        const slotRect = slotEl.getBoundingClientRect();
        return {
          x: (slotRect.left + slotRect.width / 2) - (stageRect.left + stageRect.width / 2),
          y: (slotRect.top + slotRect.height / 2) - (stageRect.top + stageRect.height / 2)
        };
      }

      function render(t) {
        const counts = { red: 0, blue: 0, yellow: 0 };
        const activeBins = { red: false, blue: false, yellow: false };

        // Handle loop wrap fade
        let fadeAlpha = 1;
        if (t > TOTAL_CYCLE - 0.4) {
          fadeAlpha = Math.max(0, (TOTAL_CYCLE - t) / 0.4);
        }

        items.forEach((it, idx) => {
          const el = document.getElementById(it.id);
          const tStart = ITEM_START_OFFSET + idx * ITEM_INTERVAL;
          const tFlyEnd = tStart + FLY_DURATION;
          const target = getSlotOffset(it.slot);

          let curX = it.pileX;
          let curY = it.pileY;
          let curScale = 1;
          let opacity = fadeAlpha;

          if (t < tStart) {
            // In pile
            curX = it.pileX;
            curY = it.pileY;
            curScale = 1;
          } else if (t >= tStart && t < tFlyEnd) {
            // Flying to slot
            const progress = (t - tStart) / FLY_DURATION;
            const eased = easeInOutCubic(progress);

            curX = it.pileX + (target.x - it.pileX) * eased;
            // Arc trajectory
            const arc = Math.sin(progress * Math.PI) * -16;
            curY = it.pileY + (target.y - it.pileY) * eased + arc;

            // Scale effect: lifts up slightly then settles
            if (progress < 0.3) {
              curScale = 1 + (progress / 0.3) * 0.25;
            } else {
              curScale = 1.25 - ((progress - 0.3) / 0.7) * 0.3;
            }

            // Glow active bin as item approaches
            if (progress > 0.4) {
              activeBins[it.color] = true;
            }
          } else {
            // Landed in slot
            curX = target.x;
            curY = target.y;
            curScale = 0.95;
            counts[it.color]++;

            // Brief lingering active glow on bin
            if (t < tFlyEnd + 0.25) {
              activeBins[it.color] = true;
            }
          }

          el.style.transform = `translate(${curX}px, ${curY}px) scale(${curScale})`;
          el.style.opacity = opacity;
        });

        // Update Bins and Badges
        ['red', 'blue', 'yellow'].forEach(color => {
          const binEl = binElements[color];
          const badgeEl = badgeElements[color];
          const c = counts[color];

          badgeEl.textContent = `${c} item${c === 1 ? '' : 's'}`;

          if (activeBins[color]) {
            binEl.classList.add('active-' + color);
            badgeEl.classList.add('highlight');
          } else {
            binEl.classList.remove('active-' + color);
            badgeEl.classList.remove('highlight');
          }
        });

        // Update status text
        if (t >= ITEM_START_OFFSET + 5 * ITEM_INTERVAL + FLY_DURATION) {
          statusLabel.textContent = 'All items sorted! ✨';
        } else {
          statusLabel.textContent = 'Sorting by color...';
        }
      }

      function animationLoop(timestamp) {
        if (!lastTimestamp) lastTimestamp = timestamp;
        const delta = (timestamp - lastTimestamp) / 1000;
        lastTimestamp = timestamp;

        if (!isPaused) {
          animTime += delta;
          if (animTime >= TOTAL_CYCLE) {
            animTime = 0;
          }
          render(animTime);
        }

        requestAnimationFrame(animationLoop);
      }

      // Controls
      playBtn.addEventListener('click', () => {
        isPaused = !isPaused;
        playBtn.textContent = isPaused ? '▶ Play' : '⏸ Pause';
      });

      restartBtn.addEventListener('click', () => {
        animTime = 0;
        isPaused = false;
        playBtn.textContent = '⏸ Pause';
        render(0);
      });

      window.addEventListener('resize', () => {
        render(animTime);
      });

      // Start animation
      requestAnimationFrame(animationLoop);
    })();
  </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>Coin Edge Textures</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      width: 100%;
      min-height: 100%;
      background: transparent;
      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: 10px;
      user-select: none;
    }
    .grid {
      display: flex;
      gap: 12px;
      width: 100%;
      max-width: 620px;
    }
    .card-panel {
      flex: 1 1 0;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      padding: 14px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(30, 41, 69, 0.05);
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .card-panel:hover, .card-panel.active {
      border-color: #22b7ff;
      box-shadow: 0 6px 18px rgba(34, 183, 255, 0.18);
    }
    .title {
      font-size: 16px;
      font-weight: 800;
      color: #1e2945;
      margin-bottom: 4px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .badge-row {
      display: flex;
      gap: 6px;
      margin-bottom: 10px;
    }
    .coin-badge {
      font-size: 12px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .badge-penny {
      background: #fed7aa;
      color: #9a3412;
      border: 1px solid #fdba74;
    }
    .badge-silver {
      background: #e2e8f0;
      color: #475569;
      border: 1px solid #cbd5e1;
    }
    .zoom-stage {
      width: 100%;
      height: 180px;
      background: #f8fafc;
      border-radius: 12px;
      border: 1px solid #edf2f7;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    svg {
      width: 100%;
      height: 100%;
    }
    .touch-prompt {
      margin-top: 8px;
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .active .touch-prompt {
      color: #0284c7;
    }
    @media (max-width: 400px) {
      .grid {
        flex-direction: column;
      }
      .zoom-stage {
        height: 140px;
      }
      .title {
        font-size: 15px;
      }
    }
  </style>
</head>
<body>

  <div class="grid">
    
    <div class="card-panel active" id="smoothCard" onclick="feelEdge('smooth')">
      <div class="title">
        <span>Smooth</span>
        <span style="color:#16a34a; font-size:15px;">✓</span>
      </div>
      <div class="badge-row">
        <span class="coin-badge badge-penny">Penny</span>
        <span class="coin-badge badge-silver">Nickel</span>
      </div>
      
      <div class="zoom-stage">
        <svg viewBox="0 0 200 160">
          <defs>
            <linearGradient id="smoothGrad" x1="0" y1="0" x2="1" y2="0">
              <stop offset="0%" stop-color="#b45309" />
              <stop offset="25%" stop-color="#f59e0b" />
              <stop offset="50%" stop-color="#fef3c7" />
              <stop offset="75%" stop-color="#f59e0b" />
              <stop offset="100%" stop-color="#b45309" />
            </linearGradient>
            <linearGradient id="silverGrad" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stop-color="#94a3b8" />
              <stop offset="50%" stop-color="#f1f5f9" />
              <stop offset="100%" stop-color="#64748b" />
            </linearGradient>
          </defs>

          
          <circle cx="100" cy="80" r="68" fill="#ffffff" stroke="#cbd5e1" stroke-width="4" />
          <circle cx="100" cy="80" r="64" fill="#f8fafc" />

          
          <rect x="70" y="26" width="60" height="108" rx="4" fill="url(#smoothGrad)" stroke="#92400e" stroke-width="2" />
          
          
          <line x1="100" y1="28" x2="100" y2="132" stroke="#ffffff" stroke-width="4" opacity="0.8" />
          <line x1="82" y1="28" x2="82" y2="132" stroke="#d97706" stroke-width="1.5" opacity="0.6" />
          <line x1="118" y1="28" x2="118" y2="132" stroke="#d97706" stroke-width="1.5" opacity="0.6" />

          
          <g id="smoothFinger" transform="translate(132, 60)">
            <text x="0" y="20" font-size="28">👆</text>
            
            <path d="M 6,-18 L 6, -2 M 3, -6 L 6, -1 L 9, -6" stroke="#0284c7" stroke-width="2.5" fill="none" stroke-linecap="round" />
          </g>
        </svg>
      </div>
      <div class="touch-prompt">Flat Surface</div>
    </div>

    
    <div class="card-panel" id="ridgedCard" onclick="feelEdge('ridged')">
      <div class="title">
        <span>Ridged</span>
        <span style="color:#0284c7; font-size:14px;">✦</span>
      </div>
      <div class="badge-row">
        <span class="coin-badge badge-silver">Dime</span>
        <span class="coin-badge badge-silver">Quarter</span>
      </div>

      <div class="zoom-stage">
        <svg viewBox="0 0 200 160">
          
          <circle cx="100" cy="80" r="68" fill="#ffffff" stroke="#cbd5e1" stroke-width="4" />
          <circle cx="100" cy="80" r="64" fill="#f8fafc" />

          
          <rect x="74" y="26" width="52" height="108" rx="2" fill="#64748b" />

          
          
          <rect x="66" y="30" width="68" height="9" rx="3" fill="url(#silverGrad)" stroke="#475569" stroke-width="1" />
          
          <rect x="66" y="44" width="68" height="9" rx="3" fill="url(#silverGrad)" stroke="#475569" stroke-width="1" />
          
          <rect x="66" y="58" width="68" height="9" rx="3" fill="url(#silverGrad)" stroke="#475569" stroke-width="1" />
          
          <rect x="66" y="72" width="68" height="9" rx="3" fill="url(#silverGrad)" stroke="#475569" stroke-width="1" />
          
          <rect x="66" y="86" width="68" height="9" rx="3" fill="url(#silverGrad)" stroke="#475569" stroke-width="1" />
          
          <rect x="66" y="100" width="68" height="9" rx="3" fill="url(#silverGrad)" stroke="#475569" stroke-width="1" />
          
          <rect x="66" y="114" width="68" height="9" rx="3" fill="url(#silverGrad)" stroke="#475569" stroke-width="1" />

          
          <g id="ridgedFinger" transform="translate(132, 66)">
            <text x="0" y="20" font-size="28">👆</text>
            
            <path d="M 5,-14 C 11,-10 11,-4 5,0 C 11,4 11,10 5,14" fill="none" stroke="#0284c7" stroke-width="2.5" stroke-linecap="round" />
          </g>
        </svg>
      </div>
      <div class="touch-prompt">Groovy Ridges</div>
    </div>
  </div>

  <script>
    let audioCtx = null;

    function playTone(freq, dur = 0.15, type = 'sine') {
      try {
        if (!audioCtx) {
          audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        }
        if (audioCtx.state === 'suspended') {
          audioCtx.resume();
        }
        const osc = audioCtx.createOscillator();
        const gain = audioCtx.createGain();
        osc.type = type;
        osc.frequency.setValueAtTime(freq, audioCtx.currentTime);
        osc.connect(gain);
        gain.connect(audioCtx.destination);
        gain.gain.setValueAtTime(0.18, audioCtx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + dur);
        osc.start();
        osc.stop(audioCtx.currentTime + dur);
      } catch (e) {}
    }

    function feelEdge(type) {
      const smoothCard = document.getElementById('smoothCard');
      const ridgedCard = document.getElementById('ridgedCard');
      const smoothFinger = document.getElementById('smoothFinger');
      const ridgedFinger = document.getElementById('ridgedFinger');

      if (type === 'smooth') {
        smoothCard.classList.add('active');
        ridgedCard.classList.remove('active');
        playTone(440, 0.25, 'sine');
        
        // Smooth slide animation
        smoothFinger.style.transition = 'transform 0.4s ease-in-out';
        smoothFinger.setAttribute('transform', 'translate(132, 40)');
        setTimeout(() => {
          smoothFinger.setAttribute('transform', 'translate(132, 80)');
        }, 400);
        setTimeout(() => {
          smoothFinger.setAttribute('transform', 'translate(132, 60)');
        }, 800);
      } else {
        ridgedCard.classList.add('active');
        smoothCard.classList.remove('active');
        
        // Tactile clicks
        playTone(320, 0.08, 'triangle');
        setTimeout(() => playTone(360, 0.08, 'triangle'), 100);
        setTimeout(() => playTone(400, 0.08, 'triangle'), 200);

        // Bumpy step animation
        ridgedFinger.style.transition = 'transform 0.1s ease';
        ridgedFinger.setAttribute('transform', 'translate(128, 54)');
        setTimeout(() => ridgedFinger.setAttribute('transform', 'translate(134, 68)'), 100);
        setTimeout(() => ridgedFinger.setAttribute('transform', 'translate(128, 82)'), 200);
        setTimeout(() => ridgedFinger.setAttribute('transform', 'translate(132, 66)'), 350);
      }
    }
  </script>
</body>
</html>

Sorting Coins by Color, Size, and Shape

<!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, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

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

    .toolbar {
      display: flex;
      gap: 6px;
      margin-bottom: 12px;
      background: #f1f5f9;
      padding: 4px;
      border-radius: 20px;
    }

    .filter-btn {
      border: none;
      background: transparent;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      border-radius: 16px;
      cursor: pointer;
      transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    }

    .filter-btn.active {
      background: #ffffff;
      color: #0284c7;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    .matrix {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      width: 100%;
      max-width: 620px;
    }

    @media (max-width: 480px) {
      .matrix {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
      }
    }

    .coin-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      box-shadow: 0 1px 4px rgba(0,0,0,0.04);
      transition: border-color 0.2s;
    }

    .coin-stage {
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 6px;
    }

    /* Coin CSS Visuals */
    .coin-disc {
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 14px;
      box-shadow: inset 0 2px 4px rgba(255,255,255,0.6), inset 0 -2px 4px rgba(0,0,0,0.15), 0 2px 5px rgba(0,0,0,0.12);
      border: 2px dashed transparent;
      user-select: none;
    }

    .penny-disc {
      width: 50px;
      height: 50px;
      background: radial-gradient(circle at 35% 35%, #fdbb74, #c2410c);
      color: #7c2d12;
      border-color: #9a3412;
      border-style: solid;
    }

    .nickel-disc {
      width: 58px;
      height: 58px;
      background: radial-gradient(circle at 35% 35%, #f8fafc, #94a3b8);
      color: #334155;
      border-color: #cbd5e1;
      border-style: solid;
    }

    .dime-disc {
      width: 42px;
      height: 42px;
      background: radial-gradient(circle at 35% 35%, #f8fafc, #94a3b8);
      color: #334155;
      border-color: #64748b;
      border-style: dashed;
    }

    .quarter-disc {
      width: 68px;
      height: 68px;
      background: radial-gradient(circle at 35% 35%, #f8fafc, #94a3b8);
      color: #334155;
      border-color: #64748b;
      border-style: dashed;
    }

    .coin-name {
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
      margin-bottom: 8px;
    }

    .tags-list {
      display: flex;
      flex-direction: column;
      gap: 5px;
      width: 100%;
    }

    .tag {
      font-size: 11.5px;
      font-weight: 600;
      padding: 4px 6px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: opacity 0.2s, transform 0.2s;
    }

    /* Tag Types */
    .tag-copper {
      background: #ffedd5;
      color: #9a3412;
    }

    .tag-silver {
      background: #e0f2fe;
      color: #0369a1;
    }

    .tag-size, .tag-edge {
      background: #f1f5f9;
      color: #475569;
    }

    /* Trait Highlight States */
    .dimmed {
      opacity: 0.25;
    }

    .highlighted {
      box-shadow: 0 0 0 2px #0284c7;
      font-weight: 700;
    }
  </style>
</head>
<body>

  
  <div class="toolbar" role="tablist">
    <button class="filter-btn active" data-trait="all">Show All</button>
    <button class="filter-btn" data-trait="color">Color</button>
    <button class="filter-btn" data-trait="size">Size</button>
    <button class="filter-btn" data-trait="edge">Edge</button>
  </div>

  
  <div class="matrix">
    
    
    <div class="coin-card">
      <div class="coin-stage">
        <div class="coin-disc penny-disc">1¢</div>
      </div>
      <div class="coin-name">Penny</div>
      <div class="tags-list">
        <span class="tag tag-copper" data-type="color">🟠 Copper</span>
        <span class="tag tag-size" data-type="size">📏 Small</span>
        <span class="tag tag-edge" data-type="edge">⭕ Smooth</span>
      </div>
    </div>

    
    <div class="coin-card">
      <div class="coin-stage">
        <div class="coin-disc nickel-disc">5¢</div>
      </div>
      <div class="coin-name">Nickel</div>
      <div class="tags-list">
        <span class="tag tag-silver" data-type="color">⚪ Silver</span>
        <span class="tag tag-size" data-type="size">📏 Medium</span>
        <span class="tag tag-edge" data-type="edge">⭕ Smooth</span>
      </div>
    </div>

    
    <div class="coin-card">
      <div class="coin-stage">
        <div class="coin-disc dime-disc">10¢</div>
      </div>
      <div class="coin-name">Dime</div>
      <div class="tags-list">
        <span class="tag tag-silver" data-type="color">⚪ Silver</span>
        <span class="tag tag-size" data-type="size">📏 Small</span>
        <span class="tag tag-edge" data-type="edge">🪚 Ridged</span>
      </div>
    </div>

    
    <div class="coin-card">
      <div class="coin-stage">
        <div class="coin-disc quarter-disc">25¢</div>
      </div>
      <div class="coin-name">Quarter</div>
      <div class="tags-list">
        <span class="tag tag-silver" data-type="color">⚪ Silver</span>
        <span class="tag tag-size" data-type="size">📏 Large</span>
        <span class="tag tag-edge" data-type="edge">🪚 Ridged</span>
      </div>
    </div>

  </div>

  <script>
    const buttons = document.querySelectorAll('.filter-btn');
    const tags = document.querySelectorAll('.tag');

    buttons.forEach(btn => {
      btn.addEventListener('click', () => {
        buttons.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');

        const trait = btn.dataset.trait;

        tags.forEach(tag => {
          tag.classList.remove('dimmed', 'highlighted');
          if (trait !== 'all') {
            if (tag.dataset.type === trait) {
              tag.classList.add('highlighted');
            } else {
              tag.classList.add('dimmed');
            }
          }
        });
      });
    });
  </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;
      user-select: none;
    }

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

    .sorting-area {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 16px;
      width: 100%;
      max-width: 600px;
    }

    .bowl {
      flex: 1 1 240px;
      min-height: 240px;
      border-radius: 24px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 16px 12px 20px;
      position: relative;
      overflow: hidden;
    }

    .bowl-copper {
      background: linear-gradient(180deg, #fff8f3 0%, #f7e6dc 100%);
      border: 3px solid #b87333;
      box-shadow: inset 0 -6px 12px rgba(184, 115, 51, 0.15), 0 4px 12px rgba(184, 115, 51, 0.08);
    }

    .bowl-silver {
      background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
      border: 3px solid #94a3b8;
      box-shadow: inset 0 -6px 12px rgba(148, 163, 184, 0.2), 0 4px 12px rgba(148, 163, 184, 0.1);
    }

    .bowl-label {
      font-size: 18px;
      font-weight: 800;
      letter-spacing: 0.5px;
      display: flex;
      align-items: center;
      gap: 6px;
      z-index: 2;
    }

    .bowl-copper .bowl-label {
      color: #964e16;
    }

    .bowl-silver .bowl-label {
      color: #475569;
    }

    .dish-rim {
      position: absolute;
      bottom: 12px;
      left: 12px;
      right: 12px;
      height: 150px;
      border-radius: 18px;
      border: 2px dashed rgba(0, 0, 0, 0.08);
      pointer-events: none;
    }

    .coin-group {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
      flex: 1;
      z-index: 2;
      flex-wrap: wrap;
    }

    .coin-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      transition: transform 0.2s ease;
    }

    .coin-wrapper:active {
      transform: translateY(-3px);
    }

    .coin {
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), inset 0 2px 3px rgba(255, 255, 255, 0.6), inset 0 -2px 3px rgba(0, 0, 0, 0.25);
    }

    .coin::before {
      content: "";
      position: absolute;
      inset: 3px;
      border-radius: 50%;
      border: 1px dashed rgba(255, 255, 255, 0.4);
      pointer-events: none;
    }

    /* Copper Penny */
    .coin-penny {
      width: 74px;
      height: 74px;
      background: radial-gradient(circle at 35% 35%, #d9884e 0%, #b87333 60%, #804313 100%);
      border: 2px solid #804313;
    }

    /* Silver Coins: Proportional sizes */
    .coin-dime {
      width: 54px;
      height: 54px;
      background: radial-gradient(circle at 35% 35%, #ffffff 0%, #cbd5e1 55%, #64748b 100%);
      border: 2px solid #64748b;
    }

    .coin-nickel {
      width: 68px;
      height: 68px;
      background: radial-gradient(circle at 35% 35%, #ffffff 0%, #cbd5e1 55%, #64748b 100%);
      border: 2px solid #64748b;
    }

    .coin-quarter {
      width: 82px;
      height: 82px;
      background: radial-gradient(circle at 35% 35%, #ffffff 0%, #cbd5e1 55%, #64748b 100%);
      border: 2px solid #64748b;
    }

    .coin-val {
      font-weight: 900;
      line-height: 1;
      text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);
    }

    .coin-penny .coin-val {
      font-size: 20px;
      color: #4a2105;
    }

    .coin-silver-text {
      color: #334155;
    }

    .coin-dime .coin-val { font-size: 15px; }
    .coin-nickel .coin-val { font-size: 18px; }
    .coin-quarter .coin-val { font-size: 22px; }

    .coin-name {
      font-size: 13px;
      font-weight: 700;
      color: #1e2945;
    }

    .sparkle {
      position: absolute;
      color: #f59e0b;
      font-size: 14px;
      pointer-events: none;
      animation: pulse 2.4s infinite ease-in-out;
    }

    .sp-1 { top: 12px; right: 16px; animation-delay: 0.2s; }
    .sp-2 { top: 14px; left: 16px; animation-delay: 1.1s; color: #94a3b8; }
    .sp-3 { bottom: 16px; right: 20px; animation-delay: 0.7s; color: #64748b; }

    @keyframes pulse {
      0%, 100% { transform: scale(0.85); opacity: 0.4; }
      50% { transform: scale(1.2); opacity: 0.9; }
    }
  </style>
</head>
<body>

  <div class="sorting-area">
    
    <div class="bowl bowl-copper">
      <span class="sparkle sp-1">✦</span>
      <div class="bowl-label">
        <span>Copper</span>
      </div>
      <div class="dish-rim"></div>
      <div class="coin-group">
        <div class="coin-wrapper" onclick="shine(this)">
          <div class="coin coin-penny">
            <span class="coin-val">1¢</span>
          </div>
          <span class="coin-name">Penny</span>
        </div>
      </div>
    </div>

    
    <div class="bowl bowl-silver">
      <span class="sparkle sp-2">✦</span>
      <span class="sparkle sp-3">✦</span>
      <div class="bowl-label">
        <span>Silver</span>
      </div>
      <div class="dish-rim"></div>
      <div class="coin-group">
        <div class="coin-wrapper" onclick="shine(this)">
          <div class="coin coin-dime">
            <span class="coin-val coin-silver-text">10¢</span>
          </div>
          <span class="coin-name">Dime</span>
        </div>
        <div class="coin-wrapper" onclick="shine(this)">
          <div class="coin coin-nickel">
            <span class="coin-val coin-silver-text">5¢</span>
          </div>
          <span class="coin-name">Nickel</span>
        </div>
        <div class="coin-wrapper" onclick="shine(this)">
          <div class="coin coin-quarter">
            <span class="coin-val coin-silver-text">25¢</span>
          </div>
          <span class="coin-name">Quarter</span>
        </div>
      </div>
    </div>
  </div>

  <script>
    function playChime() {
      try {
        const ctx = new (window.AudioContext || window.webkitAudioContext)();
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.frequency.setValueAtTime(880, ctx.currentTime);
        osc.frequency.exponentialRampToValueAtTime(1320, ctx.currentTime + 0.15);
        gain.gain.setValueAtTime(0.15, ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.3);
        osc.connect(gain);
        gain.connect(ctx.destination);
        osc.start();
        osc.stop(ctx.currentTime + 0.3);
      } catch(e) {}
    }

    function shine(el) {
      playChime();
      const coin = el.querySelector('.coin');
      coin.style.boxShadow = '0 0 16px rgba(245, 158, 11, 0.6), inset 0 2px 3px rgba(255, 255, 255, 0.8)';
      setTimeout(() => {
        coin.style.boxShadow = '';
      }, 350);
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      width: 100%;
      height: 100%;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: transparent;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .svg-container {
      width: 100%;
      max-width: 580px;
      height: auto;
      padding: 10px;
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }
    .coin-label {
      font-size: 15px;
      font-weight: 700;
      fill: #1e2945;
      text-anchor: middle;
    }
    .coin-sublabel {
      font-size: 12px;
      font-weight: 600;
      fill: #64748b;
      text-anchor: middle;
    }
    .coin-val {
      font-size: 13px;
      font-weight: 700;
      text-anchor: middle;
      dominant-baseline: central;
    }
    .val-silver {
      fill: #475569;
    }
    .val-copper {
      fill: #7c2d12;
    }
    .ruler-line {
      stroke: #94a3b8;
      stroke-dasharray: 4 4;
      stroke-width: 1.5;
    }
    .base-line {
      stroke: #cbd5e1;
      stroke-width: 2;
    }
  </style>
</head>
<body>
  <div class="svg-container">
    <svg viewBox="0 0 500 320" aria-label="Coin size comparison: Dime, Penny, Nickel, Quarter">
      <defs>
        
        <linearGradient id="silverGrad" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stop-color="#f8fafc" />
          <stop offset="40%" stop-color="#e2e8f0" />
          <stop offset="100%" stop-color="#cbd5e1" />
        </linearGradient>

        
        <linearGradient id="copperGrad" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stop-color="#fed7aa" />
          <stop offset="40%" stop-color="#f97316" />
          <stop offset="100%" stop-color="#c2410c" />
        </linearGradient>

        
        <linearGradient id="nickelGrad" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stop-color="#ffffff" />
          <stop offset="35%" stop-color="#e2e8f0" />
          <stop offset="100%" stop-color="#94a3b8" />
        </linearGradient>
      </defs>

      
      <line x1="20" y1="210" x2="480" y2="210" class="base-line" />

      
      
      <line x1="30" y1="110" x2="480" y2="110" class="ruler-line" />
      
      <line x1="30" y1="123" x2="350" y2="123" class="ruler-line" />
      
      <line x1="30" y1="131" x2="230" y2="131" class="ruler-line" />
      
      <line x1="30" y1="136" x2="115" y2="136" class="ruler-line" />

      
      <g>
        <circle cx="75" cy="173" r="37" fill="url(#silverGrad)" stroke="#94a3b8" stroke-width="2" />
        <circle cx="75" cy="173" r="33" fill="none" stroke="#cbd5e1" stroke-width="1" stroke-dasharray="2 2" />
        <text x="75" y="173" class="coin-val val-silver">10¢</text>
        <text x="75" y="240" class="coin-label">Dime</text>
        <text x="75" y="258" class="coin-sublabel">Smallest</text>
      </g>

      
      <g>
        <circle cx="185" cy="170.5" r="39.5" fill="url(#copperGrad)" stroke="#9a3412" stroke-width="2" />
        <circle cx="185" cy="170.5" r="35.5" fill="none" stroke="#fdba74" stroke-width="1" />
        <text x="185" y="170.5" class="coin-val val-copper">1¢</text>
        <text x="185" y="240" class="coin-label">Penny</text>
      </g>

      
      <g>
        <circle cx="300" cy="166.5" r="43.5" fill="url(#nickelGrad)" stroke="#475569" stroke-width="3.5" />
        <circle cx="300" cy="166.5" r="38" fill="none" stroke="#cbd5e1" stroke-width="1" />
        <text x="300" y="166.5" class="coin-val val-silver">5¢</text>
        <text x="300" y="240" class="coin-label">Nickel</text>
        <text x="300" y="258" class="coin-sublabel">Medium</text>
      </g>

      
      <g>
        <circle cx="425" cy="160" r="50" fill="url(#silverGrad)" stroke="#64748b" stroke-width="2.5" />
        <circle cx="425" cy="160" r="45" fill="none" stroke="#cbd5e1" stroke-width="1.5" stroke-dasharray="3 2" />
        <text x="425" y="160" class="coin-val val-silver">25¢</text>
        <text x="425" y="240" class="coin-label">Quarter</text>
        <text x="425" y="258" class="coin-sublabel">Largest</text>
      </g>
    </svg>
  </div>
</body>
</html>

OGM.1.MD.5

Aligned learning resources

Related diagrams