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

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

    /* Caterpillar Puzzle Target */
    .board-area {
      position: relative;
      width: 100%;
      max-width: 360px;
      height: 84px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    /* Caterpillar segments */
    .segment {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: #4ade80;
      border: 3px solid #22c55e;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 3px 6px rgba(34, 197, 94, 0.25);
      flex-shrink: 0;
    }

    .head {
      background: #86efac;
      font-size: 26px;
      z-index: 2;
    }

    .antenna {
      position: absolute;
      top: -12px;
      font-size: 14px;
      display: flex;
      gap: 10px;
    }

    .tail-small {
      width: 44px;
      height: 44px;
      background: #22c55e;
      border-color: #16a34a;
    }

    .tail-mid {
      width: 52px;
      height: 52px;
      background: #34d399;
      border-color: #10b981;
    }

    /* Empty Slot */
    .slot {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      border: 3px dashed #94a3b8;
      background: #f1f5f9;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .slot-hint {
      font-size: 20px;
      font-weight: 700;
      color: #94a3b8;
      opacity: 0.7;
    }

    /* Play/Work area */
    .work-area {
      position: relative;
      width: 100%;
      max-width: 360px;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Rotatable puzzle piece */
    .piece-container {
      position: absolute;
      width: 64px;
      height: 64px;
      transition: transform 380ms cubic-bezier(0.34, 1.25, 0.64, 1);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10;
    }

    .piece {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: #4ade80;
      border: 3px solid #22c55e;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }

    .spot {
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background: #fef08a;
      border: 2px solid #eab308;
      margin-top: -6px;
    }

    .feet {
      position: absolute;
      bottom: -6px;
      display: flex;
      gap: 10px;
      font-size: 13px;
    }

    /* Match Success Effects */
    .bubble {
      position: absolute;
      top: -32px;
      background: #f59e0b;
      color: #ffffff;
      font-weight: 800;
      font-size: 13px;
      padding: 3px 9px;
      border-radius: 12px;
      opacity: 0;
      transform: scale(0.6);
      transition: opacity 350ms ease, transform 350ms cubic-bezier(0.34, 1.5, 0.64, 1);
      pointer-events: none;
      box-shadow: 0 3px 8px rgba(245, 158, 11, 0.35);
      white-space: nowrap;
      z-index: 20;
    }

    .bubble.show {
      opacity: 1;
      transform: scale(1);
    }

    .sparkle {
      position: absolute;
      font-size: 18px;
      opacity: 0;
      transform: scale(0);
      transition: opacity 350ms ease, transform 350ms cubic-bezier(0.34, 1.5, 0.64, 1);
      pointer-events: none;
      z-index: 15;
    }

    .sparkle.show {
      opacity: 1;
      transform: scale(1.15);
    }

    .sp1 { top: -12px; left: -10px; }
    .sp2 { top: -12px; right: -10px; }
    .sp3 { bottom: -10px; left: -6px; }
    .sp4 { bottom: -10px; right: -6px; }

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

    .btn {
      appearance: none;
      border: none;
      background: #0284c7;
      color: #ffffff;
      font-size: 15px;
      font-weight: 700;
      padding: 8px 20px;
      border-radius: 10px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 3px 0 #0369a1;
      transition: background-color 0.15s ease, box-shadow 0.15s ease;
    }

    .btn:hover {
      background: #0369a1;
    }

    .btn:active {
      transform: translateY(2px);
      box-shadow: 0 1px 0 #0369a1;
    }

    .btn-reset {
      background: #e2e8f0;
      color: #475569;
      box-shadow: 0 3px 0 #cbd5e1;
      padding: 8px 14px;
      font-size: 15px;
    }

    .btn-reset:hover {
      background: #cbd5e1;
    }

    .btn-reset:active {
      transform: translateY(2px);
      box-shadow: 0 1px 0 #cbd5e1;
    }
  </style>
</head>
<body>

  
  <div class="board-area" id="board">
    
    <div class="segment tail-small"></div>
    <div class="segment tail-mid"></div>

    
    <div class="slot" id="slotTarget">
      <span class="slot-hint">?</span>
      <div class="bubble" id="snapBubble">Click! ✓</div>
      <span class="sparkle sp1" id="sp1">⭐</span>
      <span class="sparkle sp2" id="sp2">✨</span>
      <span class="sparkle sp3" id="sp3">✨</span>
      <span class="sparkle sp4" id="sp4">🌟</span>
    </div>

    
    <div class="segment head">
      <div class="antenna">
        <span>🌱</span>
        <span>🌱</span>
      </div>
      😊
    </div>
  </div>

  
  <div class="work-area" id="workArea">
    <div class="piece-container" id="pieceContainer" title="Click or tap to rotate">
      <div class="piece">
        <div class="spot"></div>
        <div class="feet">
          <span>🦶</span>
          <span>🦶</span>
        </div>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button class="btn" id="rotateBtn" aria-label="Rotate piece">
      <span>Rotate</span>
      <span style="font-size: 16px;">↻</span>
    </button>
    <button class="btn btn-reset" id="resetBtn" title="Reset piece">
      <span>↺ Reset</span>
    </button>
  </div>

  <script>
    let currentAngle = 90; // Starts rotated sideways
    let isSnapped = false;
    let snapTimeout = null;

    const pieceContainer = document.getElementById('pieceContainer');
    const slotTarget = document.getElementById('slotTarget');
    const rotateBtn = document.getElementById('rotateBtn');
    const resetBtn = document.getElementById('resetBtn');
    const snapBubble = document.getElementById('snapBubble');
    const sparkles = [
      document.getElementById('sp1'),
      document.getElementById('sp2'),
      document.getElementById('sp3'),
      document.getElementById('sp4')
    ];

    function playChime() {
      try {
        const ctx = new (window.AudioContext || window.webkitAudioContext)();
        const notes = [523.25, 659.25, 783.99, 1046.50]; // C5, E5, G5, C6
        notes.forEach((freq, idx) => {
          const osc = ctx.createOscillator();
          const gain = ctx.createGain();
          osc.type = 'triangle';
          osc.frequency.value = freq;
          osc.connect(gain);
          gain.connect(ctx.destination);
          const start = ctx.currentTime + (idx * 0.07);
          gain.gain.setValueAtTime(0, start);
          gain.gain.linearRampToValueAtTime(0.18, start + 0.02);
          gain.gain.exponentialRampToValueAtTime(0.001, start + 0.32);
          osc.start(start);
          osc.stop(start + 0.32);
        });
      } catch (e) {}
    }

    function playClick() {
      try {
        const ctx = new (window.AudioContext || window.webkitAudioContext)();
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.type = 'sine';
        osc.frequency.value = 440;
        osc.connect(gain);
        gain.connect(ctx.destination);
        gain.gain.setValueAtTime(0.1, ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.07);
        osc.start();
        osc.stop(ctx.currentTime + 0.07);
      } catch (e) {}
    }

    function snapToSlot() {
      if (isSnapped) return;
      isSnapped = true;
      playChime();

      const pieceRect = pieceContainer.getBoundingClientRect();
      const slotRect = slotTarget.getBoundingClientRect();
      const deltaX = slotRect.left + (slotRect.width - pieceRect.width) / 2 - pieceRect.left;
      const deltaY = slotRect.top + (slotRect.height - pieceRect.height) / 2 - pieceRect.top;

      pieceContainer.style.transform = `translate(${deltaX}px, ${deltaY}px) rotate(${currentAngle}deg)`;

      setTimeout(() => {
        snapBubble.classList.add('show');
        sparkles.forEach(s => s.classList.add('show'));
      }, 300);
    }

    function updatePiece() {
      if (isSnapped) return;

      if (snapTimeout) {
        clearTimeout(snapTimeout);
        snapTimeout = null;
      }

      pieceContainer.style.transform = `translate(0px, 0px) rotate(${currentAngle}deg)`;

      const normalized = ((currentAngle % 360) + 360) % 360;
      if (normalized === 0) {
        snapTimeout = setTimeout(snapToSlot, 400);
      }
    }

    function reset() {
      if (snapTimeout) {
        clearTimeout(snapTimeout);
        snapTimeout = null;
      }
      isSnapped = false;
      snapBubble.classList.remove('show');
      sparkles.forEach(s => s.classList.remove('show'));
      currentAngle = 90;
      pieceContainer.style.transform = `translate(0px, 0px) rotate(${currentAngle}deg)`;
    }

    rotateBtn.addEventListener('click', () => {
      if (isSnapped) {
        reset();
        return;
      }
      playClick();
      currentAngle += 90;
      updatePiece();
    });

    pieceContainer.addEventListener('click', () => {
      if (!isSnapped) {
        playClick();
        currentAngle += 90;
        updatePiece();
      }
    });

    resetBtn.addEventListener('click', () => {
      playClick();
      reset();
    });

    // Initial positioning
    updatePiece();
  </script>
</body>
</html>

Assembling Multi-Piece Specimen and Nature Puzzles

<!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%;
      min-height: 100%;
      font-family: system-ui, -apple-system, sans-serif;
      background: #fdfefe;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 16px 12px;
      user-select: none;
      -webkit-user-select: none;
    }

    .header-text {
      font-size: 18px;
      font-weight: 700;
      color: #475569;
      text-align: center;
    }

    .pieces-grid {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 12px;
      width: 100%;
      max-width: 520px;
    }

    .piece-card {
      flex: 1;
      max-width: 155px;
      background: #ffffff;
      border: 3px solid #e2e8f0;
      border-radius: 20px;
      padding: 10px 6px 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                  border-color 0.3s ease,
                  box-shadow 0.3s ease;
      touch-action: manipulation;
    }

    .piece-card:hover {
      border-color: #cbd5e1;
    }

    .piece-card.active {
      transform: translateY(-6px);
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
    }

    .piece-card.active.card-corner {
      border-color: #f59e0b;
      background: #fffbeb;
    }

    .piece-card.active.card-edge {
      border-color: #06b6d4;
      background: #ecfeff;
    }

    .piece-card.active.card-inside {
      border-color: #a855f7;
      background: #faf5ff;
    }

    .svg-container {
      width: 100%;
      max-width: 100px;
      aspect-ratio: 1 / 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }

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

    .piece-name {
      margin-top: 10px;
      font-size: 15px;
      font-weight: 800;
      text-align: center;
      line-height: 1.2;
    }

    .piece-sub {
      margin-top: 3px;
      font-size: 12px;
      font-weight: 700;
      text-align: center;
      border-radius: 6px;
      padding: 2px 6px;
    }

    /* Color styles */
    .card-corner .piece-name { color: #b45309; }
    .card-corner .piece-sub { background: #fef3c7; color: #92400e; }

    .card-edge .piece-name { color: #0e7490; }
    .card-edge .piece-sub { background: #cffafe; color: #155e75; }

    .card-inside .piece-name { color: #7e22ce; }
    .card-inside .piece-sub { background: #f3e8ff; color: #581c87; }

    /* Highlights for puzzle edges */
    .flat-yellow {
      stroke: #f59e0b;
      stroke-width: 6;
      stroke-linecap: round;
    }

    .flat-cyan {
      stroke: #06b6d4;
      stroke-width: 6;
      stroke-linecap: round;
    }

    .bumpy-side {
      stroke: #94a3b8;
      stroke-width: 3;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .banner {
      width: 100%;
      max-width: 520px;
      background: #f8fafc;
      border-radius: 16px;
      padding: 10px 16px;
      text-align: center;
      font-size: 17px;
      font-weight: 800;
      color: #1e2945;
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px dashed #cbd5e1;
      transition: all 0.3s ease;
    }
  </style>
</head>
<body>

  <div class="header-text">🧩 Tap a Puzzle Piece</div>

  <div class="pieces-grid">
    
    <div class="piece-card card-corner active" id="card-corner">
      <div class="svg-container">
        <svg viewBox="0 0 100 100">
          
          <path d="M 22,22 
                   L 78,22 
                   L 78,42 C 86,42 90,46 90,50 C 90,54 86,58 78,58 L 78,78 
                   L 58,78 C 58,70 54,66 50,66 C 46,66 42,70 42,78 L 22,78 
                   Z" 
                fill="#fde68a" stroke="#d97706" stroke-width="2.5" stroke-linejoin="round" />
          
          <path d="M 22,78 L 22,22 L 78,22" fill="none" class="flat-yellow" />
        </svg>
      </div>
      <div class="piece-name">Corner</div>
      <div class="piece-sub">2 Flat Sides</div>
    </div>

    
    <div class="piece-card card-edge" id="card-edge">
      <div class="svg-container">
        <svg viewBox="0 0 100 100">
          
          <path d="M 22,22 
                   L 78,22 
                   L 78,42 C 86,42 90,46 90,50 C 90,54 86,58 78,58 L 78,78 
                   L 58,78 C 58,86 54,90 50,90 C 46,90 42,86 42,78 L 22,78 
                   L 22,58 C 14,58 10,54 10,50 C 10,46 14,42 22,42 Z" 
                fill="#a5f3fc" stroke="#0891b2" stroke-width="2.5" stroke-linejoin="round" />
          
          <path d="M 22,22 L 78,22" fill="none" class="flat-cyan" />
        </svg>
      </div>
      <div class="piece-name">Edge</div>
      <div class="piece-sub">1 Flat Side</div>
    </div>

    
    <div class="piece-card card-inside" id="card-inside">
      <div class="svg-container">
        <svg viewBox="0 0 100 100">
          
          <path d="M 22,22 
                   L 42,22 C 42,14 46,10 50,10 C 54,10 58,14 58,22 L 78,22 
                   L 78,42 C 86,42 90,46 90,50 C 90,54 86,58 78,58 L 78,78 
                   L 58,78 C 58,86 54,90 50,90 C 46,90 42,86 42,78 L 22,78 
                   L 22,58 C 14,58 10,54 10,50 C 10,46 14,42 22,42 Z" 
                fill="#e9d5ff" stroke="#9333ea" stroke-width="2.5" stroke-linejoin="round" />
        </svg>
      </div>
      <div class="piece-name">Inside</div>
      <div class="piece-sub">All Bumps</div>
    </div>
  </div>

  <div class="banner" id="banner">Corner: 2 Flat Sides</div>

  <script>
    const cards = [
      { id: 'card-corner', label: 'Corner: 2 Flat Sides' },
      { id: 'card-edge',   label: 'Edge: 1 Flat Side' },
      { id: 'card-inside', label: 'Inside: All Bumps' }
    ];

    function playTone(freq) {
      try {
        const ctx = new (window.AudioContext || window.webkitAudioContext)();
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.frequency.setValueAtTime(freq, ctx.currentTime);
        osc.connect(gain);
        gain.connect(ctx.destination);
        gain.gain.setValueAtTime(0.18, ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.25);
        osc.start();
        osc.stop(ctx.currentTime + 0.25);
      } catch (e) {}
    }

    const tones = [523.25, 659.25, 783.99]; // C5, E5, G5

    cards.forEach((item, idx) => {
      const el = document.getElementById(item.id);
      el.addEventListener('click', () => {
        cards.forEach(c => document.getElementById(c.id).classList.remove('active'));
        el.classList.add('active');
        document.getElementById('banner').textContent = item.label;
        playTone(tones[idx]);
      });
    });
  </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; }
    body {
      width: 100%;
      min-height: 100%;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 12px;
      user-select: none;
    }
    .layout {
      width: 100%;
      max-width: 580px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      gap: 12px;
      position: relative;
    }
    .panel {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }
    .panel-label {
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
    }
    .puzzle-board {
      width: 190px;
      height: 190px;
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      position: relative;
      overflow: visible;
      box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    }
    .candidates {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .piece-btn {
      width: 86px;
      height: 86px;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
      transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
    }
    .piece-btn.active {
      border-color: #22b7ff;
      box-shadow: 0 0 0 3px rgba(34, 183, 255, 0.2);
    }
    .piece-btn.correct-glow {
      border-color: #22c55e;
      background: #f0fdf4;
      box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
    }
    .piece-btn.wrong-glow {
      border-color: #ef4444;
      background: #fef2f2;
      box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
    }
    .badge {
      position: absolute;
      top: -6px;
      right: -6px;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: bold;
      color: #fff;
      opacity: 0;
      transition: opacity 0.2s;
    }
    .badge.wrong { background: #ef4444; opacity: 1; }
    .badge.correct { background: #22c55e; opacity: 1; }
    
    /* Guide Line Layer */
    .connector-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 10;
    }

    /* Controls */
    .controls {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 8px;
    }
    .btn {
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 8px;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #334155;
      cursor: pointer;
    }
    .btn.active {
      background: #22b7ff;
      border-color: #0284c7;
      color: #ffffff;
    }

    /* Animation Elements */
    .sparkle {
      position: absolute;
      font-size: 16px;
      color: #eab308;
      pointer-events: none;
      opacity: 0;
      transform: scale(0.5);
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .sparkle.show {
      opacity: 1;
      transform: scale(1.2);
    }
  </style>
</head>
<body>

  <div class="layout" id="scene">
    
    <div class="panel">
      <span class="panel-label">Puzzle Slot</span>
      <div class="puzzle-board">
        <svg viewBox="0 0 200 200" width="100%" height="100%">
          <defs>
            <clipPath id="slot-clip">
              <path d="M 100,100 L 195,100 Q 195,145 150,195 L 100,195 Z" />
            </clipPath>
          </defs>

          
          <g id="piece-tl">
            <path d="M 100,100 L 10,95 Q 15,20 90,10 L 100,100" fill="#f97316" stroke="#0f172a" stroke-width="3" />
            
            <path d="M 95,85 Q 50,55 35,30 M 75,70 Q 30,75 20,80" stroke="#0f172a" stroke-width="2.5" fill="none" />
            <path d="M 10,95 Q 15,20 90,10" stroke="#0f172a" stroke-width="8" fill="none" />
            <circle cx="30" cy="25" r="2.5" fill="#fff" />
            <circle cx="50" cy="18" r="2.5" fill="#fff" />
            <circle cx="70" cy="14" r="2.5" fill="#fff" />
            
            <ellipse cx="100" cy="100" rx="6" ry="38" fill="#1e293b" />
            <circle cx="100" cy="58" r="7" fill="#1e293b" />
            <line x1="97" y1="54" x2="82" y2="36" stroke="#1e293b" stroke-width="2.5" stroke-linecap="round" />
            <line x1="103" y1="54" x2="118" y2="36" stroke="#1e293b" stroke-width="2.5" stroke-linecap="round" />
          </g>

          
          <g id="piece-tr">
            <path d="M 100,100 L 190,95 Q 185,20 110,10 L 100,100" fill="#f97316" stroke="#0f172a" stroke-width="3" />
            <path d="M 105,85 Q 150,55 165,30 M 125,70 Q 170,75 180,80" stroke="#0f172a" stroke-width="2.5" fill="none" />
            <path d="M 190,95 Q 185,20 110,10" stroke="#0f172a" stroke-width="8" fill="none" />
            <circle cx="170" cy="25" r="2.5" fill="#fff" />
            <circle cx="150" cy="18" r="2.5" fill="#fff" />
            <circle cx="130" cy="14" r="2.5" fill="#fff" />
          </g>

          
          <g id="piece-bl">
            <path d="M 100,100 L 10,105 Q 10,155 60,190 L 100,100" fill="#ea580c" stroke="#0f172a" stroke-width="3" />
            <path d="M 85,120 Q 40,140 30,165 M 70,145 Q 50,175 60,185" stroke="#0f172a" stroke-width="2.5" fill="none" />
            <path d="M 10,105 Q 10,155 60,190" stroke="#0f172a" stroke-width="7" fill="none" />
            <circle cx="22" cy="140" r="2.5" fill="#fff" />
            <circle cx="35" cy="165" r="2.5" fill="#fff" />
          </g>

          
          <path id="slot-guide" d="M 100,100 L 190,105 Q 190,155 140,190 L 100,100" 
                fill="#f1f5f9" stroke="#94a3b8" stroke-width="2.5" stroke-dasharray="5 4" />

          
          <g id="slotted-wing" style="opacity: 0; transition: opacity 0.3s ease;">
            <path d="M 100,100 L 190,105 Q 190,155 140,190 L 100,100" fill="#ea580c" stroke="#0f172a" stroke-width="3" />
            <path d="M 115,120 Q 160,140 170,165 M 130,145 Q 150,175 140,185" stroke="#0f172a" stroke-width="2.5" fill="none" />
            <path d="M 190,105 Q 190,155 140,190" stroke="#0f172a" stroke-width="7" fill="none" />
            <circle cx="178" cy="140" r="2.5" fill="#fff" />
            <circle cx="165" cy="165" r="2.5" fill="#fff" />
          </g>

          
          <line x1="100" y1="0" x2="100" y2="200" stroke="#e2e8f0" stroke-width="1.5" stroke-dasharray="3 3" />
          <line x1="0" y1="100" x2="200" y2="100" stroke="#e2e8f0" stroke-width="1.5" stroke-dasharray="3 3" />
        </svg>

        
        <span class="sparkle" id="sp1" style="top: 105px; right: 25px;">✦</span>
        <span class="sparkle" id="sp2" style="bottom: 15px; right: 55px;">✨</span>
        <span class="sparkle" id="sp3" style="top: 140px; right: 8px;">✦</span>
      </div>
    </div>

    
    <div class="panel">
      <span class="panel-label">Select Match</span>
      <div class="candidates">
        
        
        <button class="piece-btn" id="btn-leaf" onclick="selectPiece('leaf')">
          <svg viewBox="0 0 80 80" width="60" height="60">
            <path d="M 15,65 C 10,35 40,10 68,12 C 70,40 45,70 15,65 Z" fill="#22c55e" stroke="#15803d" stroke-width="2.5" />
            <path d="M 15,65 Q 40,40 68,12" stroke="#15803d" stroke-width="2.5" fill="none" />
            <path d="M 35,46 Q 30,35 24,36 M 48,32 Q 52,22 60,24" stroke="#15803d" stroke-width="2" fill="none" />
          </svg>
          <div class="badge wrong" id="badge-leaf">✗</div>
        </button>

        
        <button class="piece-btn" id="btn-wing" onclick="selectPiece('wing')">
          <svg viewBox="0 0 80 80" width="60" height="60">
            <g transform="translate(-100, -105)">
              <path d="M 105,110 L 172,114 Q 172,154 134,178 L 105,110" fill="#ea580c" stroke="#0f172a" stroke-width="2.5" />
              <path d="M 117,126 Q 150,140 158,160 M 128,145 Q 144,166 135,174" stroke="#0f172a" stroke-width="2" fill="none" />
              <path d="M 172,114 Q 172,154 134,178" stroke="#0f172a" stroke-width="5" fill="none" />
              <circle cx="164" cy="140" r="2" fill="#fff" />
              <circle cx="152" cy="160" r="2" fill="#fff" />
            </g>
          </svg>
          <div class="badge correct" id="badge-wing">✓</div>
        </button>

      </div>
    </div>

    
    <svg class="connector-svg" id="guide-svg">
      <path id="guide-line" d="" fill="none" stroke="#22b7ff" stroke-width="3" stroke-dasharray="6 6" style="opacity: 0; transition: opacity 0.3s;" />
    </svg>
  </div>

  
  <div class="controls">
    <button class="btn active" id="mode-auto" onclick="setMode('auto')">Auto ▶</button>
    <button class="btn" id="mode-leaf" onclick="selectPiece('leaf')">Try Leaf</button>
    <button class="btn" id="mode-wing" onclick="selectPiece('wing')">Try Wing</button>
  </div>

  <script>
    let currentMode = 'auto';
    let autoTimer = null;
    let autoStep = 0;

    function updateGuidePath() {
      const wingBtn = document.getElementById('btn-wing');
      const scene = document.getElementById('scene');
      const slot = document.getElementById('slot-guide');

      const sRect = scene.getBoundingClientRect();
      const wRect = wingBtn.getBoundingClientRect();
      const slRect = slot.getBoundingClientRect();

      const startX = (wRect.left - sRect.left) + 10;
      const startY = (wRect.top - sRect.top) + wRect.height / 2;
      const endX = (slRect.left - sRect.left) + slRect.width / 2 + 10;
      const endY = (slRect.top - sRect.top) + slRect.height / 2;

      const c1X = startX - 40;
      const c1Y = startY;
      const c2X = endX + 40;
      const c2Y = endY;

      const pathData = `M ${startX},${startY} C ${c1X},${c1Y} ${c2X},${c2Y} ${endX},${endY}`;
      document.getElementById('guide-line').setAttribute('d', pathData);
    }

    window.addEventListener('resize', updateGuidePath);
    window.addEventListener('load', updateGuidePath);

    function selectPiece(type) {
      updateGuidePath();
      const btnLeaf = document.getElementById('btn-leaf');
      const btnWing = document.getElementById('btn-wing');
      const badgeLeaf = document.getElementById('badge-leaf');
      const badgeWing = document.getElementById('badge-wing');
      const slottedWing = document.getElementById('slotted-wing');
      const guideLine = document.getElementById('guide-line');
      const sparkles = [document.getElementById('sp1'), document.getElementById('sp2'), document.getElementById('sp3')];

      // Reset
      btnLeaf.className = 'piece-btn';
      btnWing.className = 'piece-btn';
      badgeLeaf.style.opacity = '0';
      badgeWing.style.opacity = '0';
      slottedWing.style.opacity = '0';
      guideLine.style.opacity = '0';
      sparkles.forEach(s => s.classList.remove('show'));

      if (type === 'leaf') {
        btnLeaf.classList.add('wrong-glow');
        badgeLeaf.style.opacity = '1';
      } else if (type === 'wing') {
        btnWing.classList.add('correct-glow');
        badgeWing.style.opacity = '1';
        guideLine.style.opacity = '1';
        slottedWing.style.opacity = '1';
        setTimeout(() => {
          sparkles.forEach(s => s.classList.add('show'));
        }, 150);
      }
    }

    function setMode(mode) {
      currentMode = mode;
      document.getElementById('mode-auto').classList.toggle('active', mode === 'auto');
      document.getElementById('mode-leaf').classList.toggle('active', mode === 'leaf');
      document.getElementById('mode-wing').classList.toggle('active', mode === 'wing');

      if (mode !== 'auto') {
        clearInterval(autoTimer);
        selectPiece(mode);
      } else {
        startAuto();
      }
    }

    function startAuto() {
      clearInterval(autoTimer);
      autoStep = 0;
      runAutoStep();
      autoTimer = setInterval(runAutoStep, 3200);
    }

    function runAutoStep() {
      if (autoStep === 0) {
        // Show compare / neutral
        selectPiece('none');
      } else if (autoStep === 1) {
        // Try leaf (incorrect)
        selectPiece('leaf');
      } else if (autoStep === 2) {
        // Try wing (correct + snap)
        selectPiece('wing');
      }
      autoStep = (autoStep + 1) % 3;
    }

    // Start on load
    startAuto();
  </script>
</body>
</html>

OGS.0.ETAS.1

Aligned learning resources

Related diagrams