<!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%;
      background: #ffffff;
      font-family: system-ui, -apple-system, sans-serif;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 10px 12px 14px;
    }

    /* Top Badges */
    .counters {
      display: flex;
      gap: 12px;
      justify-content: center;
      width: 100%;
      margin-bottom: 4px;
    }
    .badge {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 700;
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
      transition: all 0.3s ease;
    }
    .badge-sticks {
      background: #fef3c7;
      color: #92400e;
      border: 1.5px solid #fcd34d;
    }
    .badge-clay {
      background: #f3e8ff;
      color: #6b21a8;
      border: 1.5px solid #d8b4fe;
    }
    .count-num {
      display: inline-block;
      font-size: 16px;
      min-width: 18px;
      text-align: center;
    }

    /* Diagram Stage */
    .stage {
      position: relative;
      width: 100%;
      max-width: 440px;
      aspect-ratio: 4 / 3;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    /* SVG Stick and Clay Styling */
    .stick {
      stroke: #f59e0b;
      stroke-width: 11;
      stroke-linecap: round;
      transition: opacity 0.4s ease, transform 0.4s ease;
      filter: drop-shadow(0px 2px 2px rgba(180, 83, 9, 0.25));
    }
    .stick-core {
      stroke: #fef08a;
      stroke-width: 3.5;
      stroke-linecap: round;
      transition: opacity 0.4s ease;
      pointer-events: none;
    }
    .clay-ball {
      transition: opacity 0.4s ease, transform 0.4s ease;
      transform-origin: center;
      cursor: default;
    }

    /* Visibility Step Classes */
    .elem-step1 { opacity: 1; }
    .elem-step2, .elem-step3 {
      opacity: 0;
      pointer-events: none;
    }
    body[data-step="2"] .elem-step2 {
      opacity: 1;
      pointer-events: auto;
    }
    body[data-step="3"] .elem-step2,
    body[data-step="3"] .elem-step3 {
      opacity: 1;
      pointer-events: auto;
    }

    /* Step Navigation Bar */
    .controls {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      width: 100%;
    }
    .step-buttons {
      display: flex;
      gap: 6px;
      background: #f1f5f9;
      padding: 4px;
      border-radius: 24px;
    }
    .step-btn {
      border: none;
      background: transparent;
      padding: 6px 14px;
      border-radius: 18px;
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 5px;
      transition: all 0.2s ease;
    }
    .step-btn:hover {
      color: #0f172a;
    }
    .step-btn.active {
      background: #ffffff;
      color: #0284c7;
      box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    }
    .play-btn {
      border: 1px solid #cbd5e1;
      background: #ffffff;
      padding: 4px 10px;
      border-radius: 14px;
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .play-btn:hover {
      background: #f8fafc;
      border-color: #94a3b8;
    }
  </style>
</head>
<body data-step="1">

  
  <div class="counters">
    <div class="badge badge-sticks">
      <span>🪵 Sticks</span>
      <span class="count-num" id="stickCount">4</span>
    </div>
    <div class="badge badge-clay">
      <span>🟣 Clay</span>
      <span class="count-num" id="clayCount">4</span>
    </div>
  </div>

  
  <div class="stage">
    <svg viewBox="0 0 400 300">
      <defs>
        
        <radialGradient id="clayGrad" cx="35%" cy="35%" r="65%">
          <stop offset="0%" stop-color="#f5d0fe" />
          <stop offset="35%" stop-color="#d946ef" />
          <stop offset="80%" stop-color="#86198f" />
          <stop offset="100%" stop-color="#4a044e" />
        </radialGradient>
        
        <ellipse id="shadow" cx="200" cy="242" rx="110" ry="42" fill="rgba(15, 23, 42, 0.05)" />
      </defs>

      
      <use href="#shadow" />

      
      <line class="stick elem-step1" x1="115" y1="230" x2="200" y2="185" />
      <line class="stick-core elem-step1" x1="115" y1="230" x2="200" y2="185" />

      <line class="stick elem-step1" x1="285" y1="230" x2="200" y2="185" />
      <line class="stick-core elem-step1" x1="285" y1="230" x2="200" y2="185" />

      
      <circle class="clay-ball elem-step1" cx="200" cy="185" r="13" fill="url(#clayGrad)" />

      
      <line class="stick elem-step2" x1="200" y1="185" x2="200" y2="90" />
      <line class="stick-core elem-step2" x1="200" y1="185" x2="200" y2="90" />

      
      <line class="stick elem-step1" x1="115" y1="230" x2="200" y2="275" />
      <line class="stick-core elem-step1" x1="115" y1="230" x2="200" y2="275" />

      <line class="stick elem-step1" x1="285" y1="230" x2="200" y2="275" />
      <line class="stick-core elem-step1" x1="285" y1="230" x2="200" y2="275" />

      
      <circle class="clay-ball elem-step1" cx="115" cy="230" r="13" fill="url(#clayGrad)" />
      <circle class="clay-ball elem-step1" cx="285" cy="230" r="13" fill="url(#clayGrad)" />
      <circle class="clay-ball elem-step1" cx="200" cy="275" r="13" fill="url(#clayGrad)" />

      
      <line class="stick elem-step2" x1="115" y1="230" x2="115" y2="135" />
      <line class="stick-core elem-step2" x1="115" y1="230" x2="115" y2="135" />

      <line class="stick elem-step2" x1="285" y1="230" x2="285" y2="135" />
      <line class="stick-core elem-step2" x1="285" y1="230" x2="285" y2="135" />

      <line class="stick elem-step2" x1="200" y1="275" x2="200" y2="180" />
      <line class="stick-core elem-step2" x1="200" y1="275" x2="200" y2="180" />

      
      <line class="stick elem-step3" x1="115" y1="135" x2="200" y2="90" />
      <line class="stick-core elem-step3" x1="115" y1="135" x2="200" y2="90" />

      <line class="stick elem-step3" x1="285" y1="135" x2="200" y2="90" />
      <line class="stick-core elem-step3" x1="285" y1="135" x2="200" y2="90" />

      
      <circle class="clay-ball elem-step3" cx="200" cy="90" r="13" fill="url(#clayGrad)" />

      
      <line class="stick elem-step3" x1="115" y1="135" x2="200" y2="180" />
      <line class="stick-core elem-step3" x1="115" y1="135" x2="200" y2="180" />

      <line class="stick elem-step3" x1="285" y1="135" x2="200" y2="180" />
      <line class="stick-core elem-step3" x1="285" y1="135" x2="200" y2="180" />

      
      <circle class="clay-ball elem-step3" cx="115" cy="135" r="13" fill="url(#clayGrad)" />
      <circle class="clay-ball elem-step3" cx="285" cy="135" r="13" fill="url(#clayGrad)" />
      <circle class="clay-ball elem-step3" cx="200" cy="180" r="13" fill="url(#clayGrad)" />
    </svg>
  </div>

  
  <div class="controls">
    <div class="step-buttons">
      <button class="step-btn active" data-step="1">1. Base</button>
      <button class="step-btn" data-step="2">2. Posts</button>
      <button class="step-btn" data-step="3">3. Cube</button>
    </div>
    <button class="play-btn" id="playBtn">
      <span id="playIcon">⏸</span> Auto-Play
    </button>
  </div>

  <script>
    let currentStep = 1;
    let isPlaying = true;
    let timer = null;

    const stickCounts = [0, 4, 8, 12];
    const clayCounts = [0, 4, 4, 8];

    const stickCountEl = document.getElementById('stickCount');
    const clayCountEl = document.getElementById('clayCount');
    const stepBtns = document.querySelectorAll('.step-btn');
    const playBtn = document.getElementById('playBtn');
    const playIcon = document.getElementById('playIcon');

    function setStep(step) {
      currentStep = step;
      document.body.setAttribute('data-step', step);
      stickCountEl.textContent = stickCounts[step];
      clayCountEl.textContent = clayCounts[step];

      stepBtns.forEach(btn => {
        btn.classList.toggle('active', parseInt(btn.dataset.step, 10) === step);
      });
    }

    function nextStep() {
      const next = currentStep === 3 ? 1 : currentStep + 1;
      setStep(next);
    }

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

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

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

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

    // Start auto loop
    startAutoPlay();
  </script>
</body>
</html>

Building Shapes With Sticks and Clay

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

    .filter-bar {
      display: flex;
      gap: 8px;
      margin-bottom: 8px;
      width: 100%;
      max-width: 480px;
      justify-content: center;
    }

    .filter-btn {
      flex: 1;
      padding: 8px 10px;
      font-size: 13px;
      font-weight: 700;
      border: 2px solid #e2e8f0;
      background: #f8fafc;
      border-radius: 20px;
      color: #475569;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: all 0.25s ease;
    }

    .filter-btn.active {
      background: #e0f2fe;
      border-color: #0284c7;
      color: #0369a1;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.15);
    }

    .shapes-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 600px;
      flex: 1;
      align-items: stretch;
    }

    .shape-card {
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      padding: 10px 8px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
    }

    .shape-title {
      font-size: 16px;
      font-weight: 800;
      color: #0f172a;
      margin-bottom: 4px;
    }

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

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

    /* Sticks styling */
    .stick {
      stroke: #f59e0b;
      stroke-width: 8;
      stroke-linecap: round;
      transition: opacity 0.3s ease, stroke 0.3s ease, stroke-width 0.3s ease;
    }

    .stick-back {
      stroke: #d97706;
      stroke-dasharray: 4 4;
      stroke-width: 5;
    }

    /* Clay ball styling */
    .clay {
      fill: #8b5cf6;
      stroke: #6d28d9;
      stroke-width: 2;
      transition: opacity 0.3s ease, transform 0.3s ease, fill 0.3s ease;
      cursor: pointer;
    }

    .clay-back {
      opacity: 0.7;
    }

    .clay-shine {
      fill: #ddd6fe;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    /* Filter mode styles */
    body[data-mode="sticks"] .clay,
    body[data-mode="sticks"] .clay-shine {
      opacity: 0.2;
    }
    body[data-mode="sticks"] .stick {
      stroke: #d97706;
      stroke-width: 9;
    }

    body[data-mode="clay"] .stick {
      opacity: 0.15;
    }
    body[data-mode="clay"] .clay {
      transform-origin: center;
      transform: scale(1.15);
      fill: #7c3aed;
    }

    .badges {
      display: flex;
      gap: 6px;
      width: 100%;
      justify-content: center;
      flex-wrap: wrap;
      margin-top: 6px;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 8px;
      border-radius: 12px;
      font-size: 13px;
      font-weight: 700;
      transition: all 0.25s ease;
    }

    .badge-sticks {
      background: #fef3c7;
      color: #b45309;
      border: 1px solid #fde68a;
    }

    .badge-clay {
      background: #ede9fe;
      color: #6d28d9;
      border: 1px solid #ddd6fe;
    }

    body[data-mode="sticks"] .badge-clay {
      opacity: 0.35;
    }
    body[data-mode="clay"] .badge-sticks {
      opacity: 0.35;
    }
    body[data-mode="sticks"] .badge-sticks {
      box-shadow: 0 0 0 2px #f59e0b;
    }
    body[data-mode="clay"] .badge-clay {
      box-shadow: 0 0 0 2px #8b5cf6;
    }

    .dot-icon {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      display: inline-block;
    }
    .dot-clay { background: #8b5cf6; }
    .bar-stick {
      width: 12px;
      height: 4px;
      border-radius: 2px;
      background: #f59e0b;
      display: inline-block;
    }
  </style>
</head>
<body data-mode="all">

  <div class="filter-bar">
    <button class="filter-btn active" data-filter="all">All Parts</button>
    <button class="filter-btn" data-filter="sticks">
      <span class="bar-stick"></span> Sticks
    </button>
    <button class="filter-btn" data-filter="clay">
      <span class="dot-icon dot-clay"></span> Clay
    </button>
  </div>

  <div class="shapes-grid">
    
    <div class="shape-card">
      <div class="shape-title">Cube</div>
      <div class="svg-container">
        <svg viewBox="0 0 200 190">
          
          <line x1="60" y1="125" x2="60" y2="55" class="stick stick-back" />
          <line x1="60" y1="125" x2="30" y2="155" class="stick stick-back" />
          <line x1="60" y1="125" x2="140" y2="125" class="stick stick-back" />

          
          <circle cx="60" cy="125" r="8" class="clay clay-back" />

          
          
          <line x1="30" y1="155" x2="110" y2="155" class="stick" />
          <line x1="110" y1="155" x2="140" y2="125" class="stick" />
          
          
          <line x1="60" y1="55" x2="140" y2="55" class="stick" />
          <line x1="140" y1="55" x2="110" y2="85" class="stick" />
          <line x1="110" y1="85" x2="30" y2="85" class="stick" />
          <line x1="30" y1="85" x2="60" y2="55" class="stick" />

          
          <line x1="30" y1="85" x2="30" y2="155" class="stick" />
          <line x1="110" y1="85" x2="110" y2="155" class="stick" />
          <line x1="140" y1="55" x2="140" y2="125" class="stick" />

          
          
          <circle cx="60" cy="55" r="9" class="clay" />
          <circle cx="58" cy="52" r="3" class="clay-shine" />

          <circle cx="140" cy="55" r="9" class="clay" />
          <circle cx="138" cy="52" r="3" class="clay-shine" />

          <circle cx="30" cy="85" r="9" class="clay" />
          <circle cx="28" cy="82" r="3" class="clay-shine" />

          <circle cx="110" cy="85" r="9" class="clay" />
          <circle cx="108" cy="82" r="3" class="clay-shine" />

          
          <circle cx="30" cy="155" r="9" class="clay" />
          <circle cx="28" cy="152" r="3" class="clay-shine" />

          <circle cx="110" cy="155" r="9" class="clay" />
          <circle cx="108" cy="152" r="3" class="clay-shine" />

          <circle cx="140" cy="125" r="9" class="clay" />
          <circle cx="138" cy="122" r="3" class="clay-shine" />
        </svg>
      </div>
      <div class="badges">
        <span class="badge badge-sticks">12 Sticks</span>
        <span class="badge badge-clay">8 Clay</span>
      </div>
    </div>

    
    <div class="shape-card">
      <div class="shape-title">Pyramid</div>
      <div class="svg-container">
        <svg viewBox="0 0 200 190">
          
          <line x1="40" y1="150" x2="160" y2="150" class="stick stick-back" />

          
          <line x1="40" y1="150" x2="100" y2="168" class="stick" />
          <line x1="100" y1="168" x2="160" y2="150" class="stick" />

          
          <line x1="40" y1="150" x2="100" y2="35" class="stick" />
          <line x1="160" y1="150" x2="100" y2="35" class="stick" />
          <line x1="100" y1="168" x2="100" y2="35" class="stick" />

          
          <circle cx="40" cy="150" r="9" class="clay" />
          <circle cx="38" cy="147" r="3" class="clay-shine" />

          <circle cx="160" cy="150" r="9" class="clay" />
          <circle cx="158" cy="147" r="3" class="clay-shine" />

          <circle cx="100" cy="168" r="9" class="clay" />
          <circle cx="98" cy="165" r="3" class="clay-shine" />

          
          <circle cx="100" cy="35" r="10" class="clay" />
          <circle cx="97" cy="32" r="3.5" class="clay-shine" />
        </svg>
      </div>
      <div class="badges">
        <span class="badge badge-sticks">6 Sticks</span>
        <span class="badge badge-clay">4 Clay</span>
      </div>
    </div>
  </div>

  <script>
    const buttons = document.querySelectorAll('.filter-btn');
    buttons.forEach(btn => {
      btn.addEventListener('click', () => {
        buttons.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        document.body.setAttribute('data-mode', btn.dataset.filter);
      });
    });
  </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>Building Shapes With Sticks and Clay</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      width: 100%;
      min-height: 100%;
      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: center;
      padding: 16px;
    }

    .grid-container {
      display: grid;
      grid-template-columns: 1fr 1.1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 640px;
    }

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

    .item-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 18px;
      padding: 12px 8px 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      text-align: center;
      box-shadow: 0 4px 12px rgba(30, 41, 69, 0.04);
      cursor: pointer;
      user-select: none;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .item-card:active {
      box-shadow: 0 0 0 3px #22b7ff;
    }

    .item-card.highlight-card {
      background: #fdfaff;
      border-color: #c084fc;
      box-shadow: 0 4px 14px rgba(168, 85, 247, 0.12);
    }

    .visual-box {
      width: 100%;
      height: 110px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    svg {
      width: 100%;
      height: 100%;
      max-height: 105px;
      overflow: visible;
    }

    .card-label {
      font-size: 16px;
      font-weight: 800;
      line-height: 1.25;
      color: #1e2945;
      margin-top: 6px;
    }

    .badge {
      display: inline-block;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      padding: 3px 8px;
      border-radius: 10px;
      margin-top: 4px;
    }

    .badge-yellow { background: #fef08a; color: #854d0e; }
    .badge-purple { background: #f3e8ff; color: #6b21a8; }
    .badge-blue { background: #e0f2fe; color: #0369a1; }
  </style>
</head>
<body>

  <div class="grid-container">

    
    <div class="item-card" onclick="playTone(440)">
      <span class="badge badge-yellow">Material</span>
      <div class="visual-box">
        <svg viewBox="0 0 140 90">
          
          <rect x="18" y="44" width="104" height="20" rx="10" fill="#cbd5e1" opacity="0.5" />
          
          <rect x="16" y="38" width="108" height="20" rx="10" fill="#fbbf24" stroke="#d97706" stroke-width="2.5" />
          
          <line x1="32" y1="44" x2="108" y2="44" stroke="#f59e0b" stroke-width="1.5" stroke-linecap="round" />
          <line x1="28" y1="52" x2="100" y2="52" stroke="#f59e0b" stroke-width="1.5" stroke-linecap="round" />
        </svg>
      </div>
      <div class="card-label">Stick =<br>Straight Side</div>
    </div>

    
    <div class="item-card highlight-card" onclick="playTone(587.33)">
      <span class="badge badge-blue">Connected!</span>
      <div class="visual-box">
        <svg viewBox="0 0 160 90">
          <defs>
            <radialGradient id="midClay" cx="35%" cy="35%" r="65%">
              <stop offset="0%" stop-color="#d8b4fe" />
              <stop offset="60%" stop-color="#9333ea" />
              <stop offset="100%" stop-color="#581c87" />
            </radialGradient>
          </defs>

          
          <rect x="18" y="46" width="76" height="16" rx="8" fill="#cbd5e1" opacity="0.5" />

          
          <rect x="16" y="40" width="80" height="16" rx="8" fill="#fbbf24" stroke="#d97706" stroke-width="2.5" />

          
          <ellipse cx="106" cy="62" rx="28" ry="10" fill="#cbd5e1" opacity="0.6" />

          
          <circle cx="104" cy="48" r="26" fill="url(#midClay)" stroke="#6b21a8" stroke-width="2.5" />
          <ellipse cx="96" cy="38" rx="7" ry="4" fill="#f3e8ff" opacity="0.75" />

          
          <g>
            <path d="M 68 18 C 76 18, 86 24, 88 34" fill="none" stroke="#2563eb" stroke-width="3" stroke-linecap="round" />
            <polygon points="82,34 90,41 94,31" fill="#2563eb" />
            <text x="58" y="15" font-size="12" font-weight="900" fill="#1d4ed8" text-anchor="middle">JOIN!</text>
          </g>
        </svg>
      </div>
      <div class="card-label">Stick + Ball =<br>Corner Joint</div>
    </div>

    
    <div class="item-card" onclick="playTone(523.25)">
      <span class="badge badge-purple">Material</span>
      <div class="visual-box">
        <svg viewBox="0 0 140 90">
          <defs>
            <radialGradient id="singleClay" cx="35%" cy="35%" r="65%">
              <stop offset="0%" stop-color="#e9d5ff" />
              <stop offset="60%" stop-color="#a855f7" />
              <stop offset="100%" stop-color="#6b21a8" />
            </radialGradient>
          </defs>

          
          <ellipse cx="70" cy="68" rx="30" ry="11" fill="#cbd5e1" opacity="0.6" />

          
          <circle cx="70" cy="46" r="28" fill="url(#singleClay)" stroke="#6b21a8" stroke-width="2.5" />
          <ellipse cx="60" cy="35" rx="8" ry="5" fill="#faf5ff" opacity="0.8" />
          
          <circle cx="82" cy="54" r="2" fill="#581c87" opacity="0.4" />
        </svg>
      </div>
      <div class="card-label">Clay Ball =<br>Corner</div>
    </div>

  </div>

  <script>
    function playTone(freq) {
      try {
        const ctx = new (window.AudioContext || window.webkitAudioContext)();
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.type = 'triangle';
        osc.frequency.setValueAtTime(freq, ctx.currentTime);
        osc.connect(gain);
        gain.connect(ctx.destination);
        gain.gain.setValueAtTime(0.2, ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.35);
        osc.start();
        osc.stop(ctx.currentTime + 0.35);
      } catch (e) {}
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Building 2D Shapes with Sticks and Clay</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }

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

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

    .title-banner {
      text-align: center;
    }

    .title-banner h1 {
      font-size: 20px;
      font-weight: 800;
      color: #0f172a;
      letter-spacing: -0.3px;
    }

    .title-banner p {
      font-size: 13px;
      color: #64748b;
      font-weight: 500;
      margin-top: 2px;
    }

    .main-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      width: 100%;
    }

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

    .shape-panel {
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      padding: 12px 10px;
    }

    .shape-header {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      margin-bottom: 6px;
    }

    .shape-title {
      font-size: 18px;
      font-weight: 800;
      color: #0f172a;
      letter-spacing: -0.2px;
    }

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

    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
      filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.07));
    }

    .stick {
      stroke-linecap: round;
      cursor: pointer;
      transition: filter 0.15s ease, opacity 0.15s ease;
    }

    .stick-outline {
      stroke-linecap: round;
      pointer-events: none;
    }

    .clay-ball {
      cursor: pointer;
      transition: filter 0.15s ease;
    }

    .stick:hover {
      filter: brightness(1.12);
    }

    .clay-ball:hover {
      filter: brightness(1.15);
    }

    .counts-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      width: 100%;
      max-width: 220px;
      margin-top: 10px;
    }

    .count-badge {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 6px 4px;
      border-radius: 10px;
      text-align: center;
    }

    .badge-sticks {
      background: #fef3c7;
      border: 1.5px solid #fde68a;
    }

    .badge-clay {
      background: #f3e8ff;
      border: 1.5px solid #e9d5ff;
    }

    .count-num {
      font-size: 22px;
      font-weight: 900;
      line-height: 1;
    }

    .badge-sticks .count-num {
      color: #d97706;
    }

    .badge-clay .count-num {
      color: #7e22ce;
    }

    .count-label {
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-top: 2px;
    }

    .badge-sticks .count-label {
      color: #92400e;
    }

    .badge-clay .count-label {
      color: #6b21a8;
    }

    .legend-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 16px;
      padding: 8px 16px;
      font-size: 12px;
      font-weight: 700;
      color: #475569;
      background: #ffffff;
      border-radius: 20px;
      border: 1px solid #e2e8f0;
      width: 100%;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .legend-stick-icon {
      width: 22px;
      height: 8px;
      background: #facc15;
      border: 1.5px solid #b45309;
      border-radius: 4px;
    }

    .legend-clay-icon {
      width: 14px;
      height: 14px;
      background: radial-gradient(circle at 35% 35%, #e9d5ff 0%, #a855f7 50%, #6b21a8 100%);
      border: 1.5px solid #581c87;
      border-radius: 50%;
    }
  </style>
</head>
<body>

  <div class="container">
    <div class="title-banner">
      <h1>Building 2D Shapes</h1>
      <p>Connect sticks with clay balls at the corners</p>
    </div>

    <div class="main-grid">
      
      <div class="shape-panel">
        <div class="shape-header">
          <span class="shape-title">Triangle</span>
        </div>
        <div class="svg-container">
          <svg viewBox="0 0 160 160">
            <defs>
              
              <radialGradient id="clayTri" cx="35%" cy="30%" r="70%">
                <stop offset="0%" stop-color="#f3e8ff" />
                <stop offset="25%" stop-color="#d8b4fe" />
                <stop offset="65%" stop-color="#9333ea" />
                <stop offset="100%" stop-color="#581c87" />
              </radialGradient>
            </defs>

            
            <g class="stick-borders" stroke="#b45309" stroke-width="14" stroke-linecap="round">
              <line x1="30" y1="130" x2="130" y2="130" />
              <line x1="80" y1="30" x2="30" y2="130" />
              <line x1="80" y1="30" x2="130" y2="130" />
            </g>

            
            <g class="sticks-group" stroke="#facc15" stroke-width="11" stroke-linecap="round">
              
              <line class="stick" x1="30" y1="130" x2="130" y2="130" />
              
              <line class="stick" x1="80" y1="30" x2="30" y2="130" />
              
              <line class="stick" x1="80" y1="30" x2="130" y2="130" />
            </g>

            
            <g stroke="#fef08a" stroke-width="3" stroke-linecap="round" opacity="0.8" pointer-events="none">
              <line x1="36" y1="128.5" x2="124" y2="128.5" />
              <line x1="77" y1="34" x2="32" y2="124" />
              <line x1="83" y1="34" x2="128" y2="124" />
            </g>

            
            <g class="clay-group">
              
              <g class="clay-ball">
                <circle cx="80" cy="30" r="14" fill="url(#clayTri)" stroke="#4a044e" stroke-width="1.5" />
                <circle cx="76" cy="26" r="3.5" fill="#ffffff" opacity="0.75" />
              </g>
              
              <g class="clay-ball">
                <circle cx="30" cy="130" r="14" fill="url(#clayTri)" stroke="#4a044e" stroke-width="1.5" />
                <circle cx="26" cy="126" r="3.5" fill="#ffffff" opacity="0.75" />
              </g>
              
              <g class="clay-ball">
                <circle cx="130" cy="130" r="14" fill="url(#clayTri)" stroke="#4a044e" stroke-width="1.5" />
                <circle cx="126" cy="126" r="3.5" fill="#ffffff" opacity="0.75" />
              </g>
            </g>
          </svg>
        </div>

        <div class="counts-row">
          <div class="count-badge badge-sticks">
            <div class="count-num">3</div>
            <div class="count-label">Sticks</div>
          </div>
          <div class="count-badge badge-clay">
            <div class="count-num">3</div>
            <div class="count-label">Clay Balls</div>
          </div>
        </div>
      </div>

      
      <div class="shape-panel">
        <div class="shape-header">
          <span class="shape-title">Square</span>
        </div>
        <div class="svg-container">
          <svg viewBox="0 0 160 160">
            <defs>
              
              <radialGradient id="claySq" cx="35%" cy="30%" r="70%">
                <stop offset="0%" stop-color="#f3e8ff" />
                <stop offset="25%" stop-color="#d8b4fe" />
                <stop offset="65%" stop-color="#9333ea" />
                <stop offset="100%" stop-color="#581c87" />
              </radialGradient>
            </defs>

            
            <g class="stick-borders" stroke="#b45309" stroke-width="14" stroke-linecap="round">
              <line x1="30" y1="30" x2="130" y2="30" />
              <line x1="130" y1="30" x2="130" y2="130" />
              <line x1="130" y1="130" x2="30" y2="130" />
              <line x1="30" y1="130" x2="30" y2="30" />
            </g>

            
            <g class="sticks-group" stroke="#facc15" stroke-width="11" stroke-linecap="round">
              
              <line class="stick" x1="30" y1="30" x2="130" y2="30" />
              
              <line class="stick" x1="130" y1="30" x2="130" y2="130" />
              
              <line class="stick" x1="130" y1="130" x2="30" y2="130" />
              
              <line class="stick" x1="30" y1="130" x2="30" y2="30" />
            </g>

            
            <g stroke="#fef08a" stroke-width="3" stroke-linecap="round" opacity="0.8" pointer-events="none">
              <line x1="36" y1="28.5" x2="124" y2="28.5" />
              <line x1="128.5" y1="36" x2="128.5" y2="124" />
              <line x1="124" y1="128.5" x2="36" y2="128.5" />
              <line x1="28.5" y1="124" x2="28.5" y2="36" />
            </g>

            
            <g class="clay-group">
              
              <g class="clay-ball">
                <circle cx="30" cy="30" r="14" fill="url(#claySq)" stroke="#4a044e" stroke-width="1.5" />
                <circle cx="26" cy="26" r="3.5" fill="#ffffff" opacity="0.75" />
              </g>
              
              <g class="clay-ball">
                <circle cx="130" cy="30" r="14" fill="url(#claySq)" stroke="#4a044e" stroke-width="1.5" />
                <circle cx="126" cy="26" r="3.5" fill="#ffffff" opacity="0.75" />
              </g>
              
              <g class="clay-ball">
                <circle cx="130" cy="130" r="14" fill="url(#claySq)" stroke="#4a044e" stroke-width="1.5" />
                <circle cx="126" cy="126" r="3.5" fill="#ffffff" opacity="0.75" />
              </g>
              
              <g class="clay-ball">
                <circle cx="30" cy="130" r="14" fill="url(#claySq)" stroke="#4a044e" stroke-width="1.5" />
                <circle cx="26" cy="126" r="3.5" fill="#ffffff" opacity="0.75" />
              </g>
            </g>
          </svg>
        </div>

        <div class="counts-row">
          <div class="count-badge badge-sticks">
            <div class="count-num">4</div>
            <div class="count-label">Sticks</div>
          </div>
          <div class="count-badge badge-clay">
            <div class="count-num">4</div>
            <div class="count-label">Clay Balls</div>
          </div>
        </div>
      </div>
    </div>

    
    <div class="legend-bar">
      <div class="legend-item">
        <div class="legend-stick-icon"></div>
        <span>Sticks = <strong>Sides</strong></span>
      </div>
      <div class="legend-item">
        <div class="legend-clay-icon"></div>
        <span>Clay Balls = <strong>Corners</strong></span>
      </div>
    </div>
  </div>

</body>
</html>

K.G.B.5

Aligned learning resources