<!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 {
      background: #f8fafc;
      color: #1e2945;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
    }

    /* Flow Tree */
    .flow-tree {
      width: 100%;
      max-width: 580px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }

    .node {
      background: #ffffff;
      border: 2px solid #cbd5e1;
      border-radius: 8px;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 700;
      color: #1e2945;
      cursor: pointer;
      user-select: none;
      transition: all 0.25s ease;
      display: flex;
      align-items: center;
      gap: 6px;
      text-align: center;
    }

    .node:hover {
      border-color: #93c5fd;
      box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
    }

    .node.active {
      border-color: #3b82f6;
      background: #eff6ff;
      color: #1d4ed8;
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
    }

    .goal-node {
      font-size: 14px;
      padding: 8px 16px;
      border-color: #3b82f6;
      background: #f0fdf4;
      color: #166534;
      border-color: #86efac;
    }

    .goal-node.active {
      background: #dcfce7;
      border-color: #22c55e;
      color: #15803d;
      box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25);
    }

    .branch-svg {
      width: 100%;
      height: 32px;
      display: block;
      margin: 2px 0;
    }

    .subroutines {
      display: flex;
      justify-content: space-between;
      width: 100%;
      gap: 8px;
    }

    .sub-node {
      flex: 1;
      flex-direction: column;
      padding: 6px 4px;
      font-size: 11px;
      line-height: 1.2;
    }

    .sub-tag {
      font-size: 10px;
      font-weight: 500;
      color: #64748b;
      margin-top: 2px;
    }

    .sub-node.active .sub-tag {
      color: #3b82f6;
    }

    /* Preview Canvas Area */
    .preview-card {
      width: 100%;
      max-width: 580px;
      height: 230px;
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 10px;
      margin-top: 10px;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .preview-badge {
      position: absolute;
      top: 8px;
      left: 10px;
      font-size: 11px;
      font-weight: 700;
      color: #64748b;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      background: #f1f5f9;
      padding: 3px 8px;
      border-radius: 4px;
      z-index: 5;
    }

    .view-svg {
      width: 100%;
      height: 100%;
    }

    /* Construction Geometry Elements */
    .line-base { stroke: #1e2945; stroke-width: 2.5; stroke-linecap: round; }
    .line-target { stroke: #22c55e; stroke-width: 2.5; stroke-linecap: round; }
    .line-perp { stroke: #3b82f6; stroke-width: 2; stroke-linecap: round; }
    .arc { fill: none; stroke: #f97316; stroke-width: 1.8; stroke-dasharray: 4 3; }
    .arc-solid { fill: none; stroke: #f97316; stroke-width: 1.8; }
    .pt { fill: #1e2945; }
    .pt-accent { fill: #3b82f6; }
    .guide-text { font-size: 11px; fill: #64748b; font-weight: 600; font-family: system-ui; }

    /* Animated transitions */
    .step-fade {
      opacity: 0;
      transition: opacity 0.5s ease;
    }
    .step-fade.show {
      opacity: 1;
    }

    .pulse {
      animation: gentle-pulse 2s infinite ease-in-out;
    }
    @keyframes gentle-pulse {
      0%, 100% { opacity: 0.8; }
      50% { opacity: 1; }
    }
  </style>
</head>
<body>

  
  <div class="flow-tree">
    <div id="btnGoal" class="node goal-node active" onclick="selectView('square')">
      <span>◼</span> Goal: Construct Square
    </div>

    <svg class="branch-svg" viewBox="0 0 360 32" preserveAspectRatio="none">
      <path d="M 180 0 L 180 14 M 60 32 L 60 14 L 300 14 L 300 32 M 180 14 L 180 32" fill="none" stroke="#cbd5e1" stroke-width="2"/>
    </svg>

    <div class="subroutines">
      <div id="btnPerp" class="node sub-node" onclick="selectView('perp')">
        <span>⟂ Bisector</span>
        <span class="sub-tag">90° Angles</span>
      </div>
      <div id="btnDup" class="node sub-node" onclick="selectView('dup')">
        <span>📏 Duplicate</span>
        <span class="sub-tag">Equal Sides</span>
      </div>
      <div id="btnCopy" class="node sub-node" onclick="selectView('copy')">
        <span>∠ Copy Angle</span>
        <span class="sub-tag">Parallel Edge</span>
      </div>
    </div>
  </div>

  
  <div class="preview-card">
    <span id="badgeText" class="preview-badge">Main Program: Square</span>

    
    <svg id="viewSquare" class="view-svg" viewBox="0 0 320 200">
      
      <line x1="85" y1="150" x2="215" y2="150" class="line-base" />
      <circle cx="85" cy="150" r="3.5" class="pt" />
      <circle cx="215" cy="150" r="3.5" class="pt" />

      
      <g id="sqSub1" class="step-fade show">
        <line x1="85" y1="165" x2="85" y2="25" class="line-perp" stroke-dasharray="3 3"/>
        <line x1="215" y1="165" x2="215" y2="25" class="line-perp" stroke-dasharray="3 3"/>
        <path d="M 85 140 L 95 140 L 95 150" fill="none" stroke="#3b82f6" stroke-width="1.5"/>
        <path d="M 215 140 L 205 140 L 205 150" fill="none" stroke="#3b82f6" stroke-width="1.5"/>
      </g>

      
      <g id="sqSub2" class="step-fade show">
        <path d="M 60 40 A 130 130 0 0 1 110 15" class="arc" />
        <path d="M 190 15 A 130 130 0 0 1 240 40" class="arc" />
        <circle cx="85" cy="35" r="3.5" class="pt-accent" />
        <circle cx="215" cy="35" r="3.5" class="pt-accent" />
      </g>

      
      <g id="sqSub3" class="step-fade show">
        <line x1="85" y1="35" x2="215" y2="35" class="line-target" />
        <line x1="85" y1="150" x2="85" y2="35" class="line-target" />
        <line x1="215" y1="150" x2="215" y2="35" class="line-target" />
        <line x1="85" y1="150" x2="215" y2="150" class="line-target" />
      </g>
    </svg>

    
    <svg id="viewPerp" class="view-svg" viewBox="0 0 320 200" style="display:none;">
      <line x1="60" y1="100" x2="260" y2="100" class="line-base"/>
      <circle cx="90" cy="100" r="3.5" class="pt"/>
      <circle cx="230" cy="100" r="3.5" class="pt"/>
      
      <path d="M 140 30 A 110 110 0 0 1 180 170" class="arc"/>
      <path d="M 180 30 A 110 110 0 0 0 140 170" class="arc"/>
      
      <circle cx="160" cy="45" r="3.5" class="pt-accent"/>
      <circle cx="160" cy="155" r="3.5" class="pt-accent"/>
      
      <line x1="160" y1="20" x2="160" y2="180" class="line-perp"/>
      
      <path d="M 160 88 L 172 88 L 172 100" fill="none" stroke="#3b82f6" stroke-width="1.5"/>
    </svg>

    
    <svg id="viewDup" class="view-svg" viewBox="0 0 320 200" style="display:none;">
      
      <line x1="50" y1="60" x2="170" y2="60" class="line-base"/>
      <circle cx="50" cy="60" r="3.5" class="pt"/>
      <circle cx="170" cy="60" r="3.5" class="pt"/>
      <text x="100" y="48" class="guide-text" text-anchor="middle">Length r</text>

      
      <line x1="50" y1="140" x2="270" y2="140" stroke="#94a3b8" stroke-width="2" stroke-linecap="round"/>
      <circle cx="50" cy="140" r="3.5" class="pt"/>
      
      
      <path d="M 170 110 A 120 120 0 0 1 170 170" class="arc-solid"/>
      <circle cx="170" cy="140" r="3.5" class="pt-accent"/>
      
      
      <line x1="50" y1="140" x2="170" y2="140" class="line-target"/>
      <text x="105" y="162" class="guide-text" fill="#16a34a" text-anchor="middle">Equal length r</text>
    </svg>

    
    <svg id="viewCopy" class="view-svg" viewBox="0 0 320 200" style="display:none;">
      
      <line x1="30" y1="100" x2="120" y2="100" class="line-base"/>
      <line x1="30" y1="100" x2="100" y2="40" class="line-base"/>
      <circle cx="30" cy="100" r="3.5" class="pt"/>
      <path d="M 80 100 A 50 50 0 0 0 68 68" class="arc"/>

      
      <line x1="180" y1="100" x2="290" y2="100" class="line-base"/>
      <circle cx="180" cy="100" r="3.5" class="pt"/>
      
      <path d="M 230 100 A 50 50 0 0 0 218 68" class="arc"/>
      <circle cx="230" cy="100" r="3" class="pt"/>
      
      <path d="M 224 60 A 28 28 0 0 1 212 76" class="arc-solid"/>
      <circle cx="218" cy="68" r="3.5" class="pt-accent"/>
      
      <line x1="180" y1="100" x2="250" y2="40" class="line-target"/>
    </svg>
  </div>

  <script>
    const views = {
      square: { btn: 'btnGoal', el: 'viewSquare', badge: 'Main Program: Square' },
      perp: { btn: 'btnPerp', el: 'viewPerp', badge: 'Subroutine 1: ⟂ Bisector' },
      dup: { btn: 'btnDup', el: 'viewDup', badge: 'Subroutine 2: Duplicate Segment' },
      copy: { btn: 'btnCopy', el: 'viewCopy', badge: 'Subroutine 3: Copy Angle' }
    };

    let activeKey = 'square';
    let squareStepTimer = null;

    function selectView(key) {
      activeKey = key;
      Object.keys(views).forEach(k => {
        const v = views[k];
        document.getElementById(v.btn).classList.toggle('active', k === key);
        document.getElementById(v.el).style.display = k === key ? 'block' : 'none';
      });
      document.getElementById('badgeText').textContent = views[key].badge;

      if (key === 'square') {
        runSquareSequence();
      } else {
        if (squareStepTimer) clearInterval(squareStepTimer);
      }
    }

    function runSquareSequence() {
      if (squareStepTimer) clearInterval(squareStepTimer);
      const s1 = document.getElementById('sqSub1');
      const s2 = document.getElementById('sqSub2');
      const s3 = document.getElementById('sqSub3');

      let step = 0;
      const stepElements = [s1, s2, s3];

      function update() {
        stepElements.forEach((el, idx) => {
          if (step === 0) {
            el.classList.add('show');
          } else {
            el.classList.toggle('show', idx < step);
          }
        });
        step = (step + 1) % 4;
      }

      update();
      squareStepTimer = setInterval(update, 1200);
    }

    // Initialize animation sequence
    runSquareSequence();
  </script>
</body>
</html>

Describing Geometric Constructions as Step-by-Step Algorithms

<!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>Perpendicular Bisector Algorithm</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background: #f8fafc;
      color: #1e293b;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-height: 100%;
    }
    .layout-grid {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: 10px;
      width: 100%;
    }
    @media (max-width: 540px) {
      .layout-grid {
        grid-template-columns: 1fr;
      }
    }
    .panel {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .panel-header {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .code-container {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      padding: 8px 10px;
      font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
      font-size: 11.5px;
      line-height: 1.5;
      color: #1e293b;
      overflow-x: auto;
    }
    .kw { color: #2563eb; font-weight: 600; }
    .fn { color: #7c3aed; }
    .num { color: #d97706; }
    .prop { color: #0891b2; }
    .ret-val {
      background: #e0f2fe;
      color: #0369a1;
      padding: 1px 4px;
      border-radius: 3px;
      font-weight: 600;
    }
    .input-row {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 600;
    }
    .point-tag {
      display: inline-block;
      width: 24px;
      text-align: center;
      padding: 2px 4px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 700;
    }
    .tag-p1 { background: #fee2e2; color: #dc2626; }
    .tag-p2 { background: #dbeafe; color: #2563eb; }
    .coord-field {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      color: #64748b;
    }
    input[type="number"] {
      width: 44px;
      padding: 3px 5px;
      font-size: 12px;
      font-family: inherit;
      border: 1px solid #cbd5e1;
      border-radius: 4px;
      background: #ffffff;
      color: #0f172a;
      text-align: center;
    }
    input[type="number"]:focus {
      outline: none;
      border-color: #2563eb;
      box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
    }
    .graph-box {
      width: 100%;
      height: 140px;
      background: #fdfdfd;
      border: 1px solid #f1f5f9;
      border-radius: 6px;
      position: relative;
    }
    svg {
      width: 100%;
      height: 100%;
      display: block;
    }
    .stats-summary {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
      font-size: 11px;
    }
    .stat-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 5px;
      padding: 4px 6px;
    }
    .stat-label {
      color: #64748b;
      font-size: 10px;
      font-weight: 600;
    }
    .stat-val {
      font-weight: 700;
      color: #0f172a;
      font-family: monospace;
      font-size: 11.5px;
    }
  </style>
</head>
<body>

  <div class="layout-grid">
    
    <div class="panel">
      <div class="panel-header">
        <span>Algorithm: Bisector</span>
        <span style="color:#2563eb;">JS Implementation</span>
      </div>

      <div class="code-container">
<span class="kw">function</span> <span class="fn">calculatePerpendicularBisector</span>(p1, p2) {
  <span class="kw">const</span> M = {
    <span class="prop">x</span>: (p1.x + p2.x) / <span class="num">2</span>, <span id="midXLive" class="ret-val">2.0</span>
    <span class="prop">y</span>: (p1.y + p2.y) / <span class="num">2</span>  <span id="midYLive" class="ret-val">2.0</span>
  };

  <span class="kw">const</span> m = (p2.y - p1.y) / (p2.x - p1.x); <span id="slopeLive" class="ret-val">1.0</span>
  <span class="kw">const</span> perpSlope = <span class="num">-1</span> / m; <span id="perpLive" class="ret-val">-1.0</span>

  <span class="kw">return</span> { M, perpSlope };
}
      </div>

      <div class="stats-summary">
        <div class="stat-card">
          <div class="stat-label">Midpoint M</div>
          <div class="stat-val" id="statM">(2.0, 2.0)</div>
        </div>
        <div class="stat-card">
          <div class="stat-label">Perpendicular Slope</div>
          <div class="stat-val" id="statPerp">-1.00</div>
        </div>
      </div>
    </div>

    
    <div class="panel">
      <div class="panel-header">
        <span>Inputs & Visual</span>
        <span style="font-size:10px; color:#10b981;">Live Render</span>
      </div>

      <div style="display:flex; flex-direction:column; gap:6px;">
        <div class="input-row">
          <span class="point-tag tag-p1">P1</span>
          <div class="coord-field">x: <input id="p1x" type="number" value="0" min="-5" max="5" step="1"></div>
          <div class="coord-field">y: <input id="p1y" type="number" value="0" min="-5" max="5" step="1"></div>
        </div>
        <div class="input-row">
          <span class="point-tag tag-p2">P2</span>
          <div class="coord-field">x: <input id="p2x" type="number" value="4" min="-5" max="5" step="1"></div>
          <div class="coord-field">y: <input id="p2y" type="number" value="4" min="-5" max="5" step="1"></div>
        </div>
      </div>

      <div class="graph-box">
        <svg id="geoSvg" viewBox="0 0 200 140">
          <defs>
            <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
              <path d="M 20 0 L 0 0 0 20" fill="none" stroke="#f1f5f9" stroke-width="1"/>
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill="url(#grid)" />
          
          
          <line x1="0" y1="70" x2="200" y2="70" stroke="#cbd5e1" stroke-width="1" stroke-dasharray="2,2"/>
          <line x1="100" y1="0" x2="100" y2="140" stroke="#cbd5e1" stroke-width="1" stroke-dasharray="2,2"/>

          
          <line id="perpLine" stroke="#10b981" stroke-width="2.5" />

          
          <line id="segmentLine" stroke="#94a3b8" stroke-width="2" stroke-dasharray="3,3" />

          
          <circle id="dotP1" r="5" fill="#ef4444" stroke="#ffffff" stroke-width="1.5" />
          <text id="lblP1" font-size="9" font-weight="700" fill="#dc2626" dy="-7" text-anchor="middle">P1</text>

          
          <circle id="dotP2" r="5" fill="#3b82f6" stroke="#ffffff" stroke-width="1.5" />
          <text id="lblP2" font-size="9" font-weight="700" fill="#2563eb" dy="-7" text-anchor="middle">P2</text>

          
          <circle id="dotM" r="4.5" fill="#10b981" stroke="#ffffff" stroke-width="1.5" />
          <text id="lblM" font-size="9" font-weight="700" fill="#047857" dy="13" text-anchor="middle">M</text>
        </svg>
      </div>
    </div>
  </div>

  <script>
    const scale = 14; 
    const cx = 100;
    const cy = 70;

    function toSvg(x, y) {
      return {
        x: cx + x * scale,
        y: cy - y * scale
      };
    }

    function update() {
      const p1 = {
        x: parseFloat(document.getElementById('p1x').value) || 0,
        y: parseFloat(document.getElementById('p1y').value) || 0
      };
      const p2 = {
        x: parseFloat(document.getElementById('p2x').value) || 0,
        y: parseFloat(document.getElementById('p2y').value) || 0
      };

      // Math calculations
      const midX = (p1.x + p2.x) / 2;
      const midY = (p1.y + p2.y) / 2;
      const dx = p2.x - p1.x;
      const dy = p2.y - p1.y;

      let mStr, perpStr;
      let perpSlope;

      if (dx === 0 && dy === 0) {
        mStr = "und.";
        perpStr = "und.";
        perpSlope = 0;
      } else if (dx === 0) {
        mStr = "∞";
        perpStr = "0.0";
        perpSlope = 0;
      } else if (dy === 0) {
        mStr = "0.0";
        perpStr = "∞";
        perpSlope = Infinity;
      } else {
        const m = dy / dx;
        perpSlope = -1 / m;
        mStr = m.toFixed(2);
        perpStr = perpSlope.toFixed(2);
      }

      // Live code elements
      document.getElementById('midXLive').textContent = midX.toFixed(1);
      document.getElementById('midYLive').textContent = midY.toFixed(1);
      document.getElementById('slopeLive').textContent = mStr;
      document.getElementById('perpLive').textContent = perpStr;

      // Stats
      document.getElementById('statM').textContent = `(${midX.toFixed(1)}, ${midY.toFixed(1)})`;
      document.getElementById('statPerp').textContent = perpStr;

      // Geometry plotting
      const sP1 = toSvg(p1.x, p1.y);
      const sP2 = toSvg(p2.x, p2.y);
      const sM = toSvg(midX, midY);

      // Dots and labels
      const dotP1 = document.getElementById('dotP1');
      dotP1.setAttribute('cx', sP1.x);
      dotP1.setAttribute('cy', sP1.y);
      const lblP1 = document.getElementById('lblP1');
      lblP1.setAttribute('x', sP1.x);
      lblP1.setAttribute('y', sP1.y);

      const dotP2 = document.getElementById('dotP2');
      dotP2.setAttribute('cx', sP2.x);
      dotP2.setAttribute('cy', sP2.y);
      const lblP2 = document.getElementById('lblP2');
      lblP2.setAttribute('x', sP2.x);
      lblP2.setAttribute('y', sP2.y);

      const dotM = document.getElementById('dotM');
      dotM.setAttribute('cx', sM.x);
      dotM.setAttribute('cy', sM.y);
      const lblM = document.getElementById('lblM');
      lblM.setAttribute('x', sM.x);
      lblM.setAttribute('y', sM.y);

      // Segment P1-P2
      const seg = document.getElementById('segmentLine');
      seg.setAttribute('x1', sP1.x);
      seg.setAttribute('y1', sP1.y);
      seg.setAttribute('x2', sP2.x);
      seg.setAttribute('y2', sP2.y);

      // Perpendicular Bisector line (extend through midpoint)
      const perpLine = document.getElementById('perpLine');
      const len = 90;
      let angle;

      if (dx === 0 && dy === 0) {
        perpLine.setAttribute('stroke-opacity', '0');
      } else {
        perpLine.setAttribute('stroke-opacity', '1');
        if (dx === 0) {
          // Segment is vertical -> bisector is horizontal
          perpLine.setAttribute('x1', sM.x - len);
          perpLine.setAttribute('y1', sM.y);
          perpLine.setAttribute('x2', sM.x + len);
          perpLine.setAttribute('y2', sM.y);
        } else if (dy === 0) {
          // Segment is horizontal -> bisector is vertical
          perpLine.setAttribute('x1', sM.x);
          perpLine.setAttribute('y1', sM.y - len);
          perpLine.setAttribute('x2', sM.x);
          perpLine.setAttribute('y2', sM.y + len);
        } else {
          angle = Math.atan(perpSlope);
          const xOffset = Math.cos(angle) * len;
          const yOffset = -Math.sin(angle) * len;
          perpLine.setAttribute('x1', sM.x - xOffset);
          perpLine.setAttribute('y1', sM.y - yOffset);
          perpLine.setAttribute('x2', sM.x + xOffset);
          perpLine.setAttribute('y2', sM.y + yOffset);
        }
      }
    }

    ['p1x', 'p1y', 'p2x', 'p2y'].forEach(id => {
      document.getElementById(id).addEventListener('input', update);
    });

    update();
  </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>Euclidean Primitive Operations</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }
    body {
      width: 100%;
      background: #f8fafc;
      color: #1e2945;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 12px;
    }
    .container {
      width: 100%;
      max-width: 460px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .header {
      text-align: center;
    }
    .header h1 {
      font-size: 16px;
      font-weight: 700;
      color: #1e2945;
      letter-spacing: -0.01em;
    }
    .tabs {
      display: flex;
      width: 100%;
      gap: 6px;
    }
    .tab-btn {
      flex: 1;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #64748b;
      padding: 8px 6px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    }
    .tab-btn svg {
      width: 14px;
      height: 14px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      flex-shrink: 0;
    }
    .tab-btn.active {
      background: #eff6ff;
      border-color: #3b82f6;
      color: #1d4ed8;
      box-shadow: 0 0 0 1px #3b82f6;
    }
    .tab-btn:hover:not(.active) {
      background: #f1f5f9;
      color: #334155;
    }
    .stage-container {
      position: relative;
      width: 100%;
      height: 200px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    svg.stage-svg {
      width: 100%;
      height: 100%;
      display: block;
    }
    .point {
      fill: #3b82f6;
    }
    .point-accent {
      fill: #f59e0b;
    }
    .point-intersect {
      fill: #ec4899;
    }
    .label-text {
      font-size: 14px;
      font-weight: 700;
      fill: #1e2945;
      user-select: none;
    }
    .math-var {
      font-style: italic;
      font-family: "Cambria Math", "Times New Roman", Times, serif;
      font-weight: 600;
      color: #1e2945;
    }
    .geom-line {
      stroke: #3b82f6;
      stroke-width: 2.5;
      stroke-linecap: round;
    }
    .geom-dashed {
      stroke: #94a3b8;
      stroke-width: 1.5;
      stroke-dasharray: 4 3;
    }
    .geom-circle {
      stroke: #3b82f6;
      stroke-width: 2.5;
      fill: #3b82f6;
      fill-opacity: 0.04;
    }
    .geom-circle-2 {
      stroke: #6366f1;
      stroke-width: 2.5;
      fill: #6366f1;
      fill-opacity: 0.04;
    }
    .pulse-ring {
      animation: pulse 2s infinite ease-out;
      transform-origin: center;
    }
    @keyframes pulse {
      0% { r: 6; opacity: 0.9; }
      100% { r: 15; opacity: 0; }
    }
    .info-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-left: 4px solid #3b82f6;
      border-radius: 8px;
      padding: 10px 14px;
      font-size: 13px;
      line-height: 1.5;
      color: #334155;
      min-height: 54px;
      display: block;
    }
    .info-card-text {
      display: inline;
      word-spacing: normal;
      letter-spacing: normal;
    }
    .info-card strong {
      color: #1e2945;
      font-weight: 700;
      margin-right: 4px;
    }
    .controls {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    .replay-btn {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      color: #1e2945;
      padding: 6px 14px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      transition: background-color 0.15s ease, border-color 0.15s ease;
    }
    .replay-btn:hover {
      background: #f1f5f9;
      border-color: #cbd5e1;
    }
    .replay-btn:active {
      background: #e2e8f0;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>Euclidean Primitive Operations</h1>
    </div>

    <div class="tabs">
      <button class="tab-btn active" id="tab0" onclick="setMode(0)">
        <svg viewBox="0 0 16 16"><line x1="2" y1="14" x2="14" y2="2" stroke-linecap="round"/><circle cx="5" cy="11" r="1.5" fill="currentColor"/><circle cx="11" cy="5" r="1.5" fill="currentColor"/></svg>
        <span>1. Line</span>
      </button>
      <button class="tab-btn" id="tab1" onclick="setMode(1)">
        <svg viewBox="0 0 16 16"><circle cx="8" cy="8" r="6"/><circle cx="8" cy="8" r="1.5" fill="currentColor"/><line x1="8" y1="8" x2="14" y2="8" stroke-dasharray="2 1"/></svg>
        <span>2. Circle</span>
      </button>
      <button class="tab-btn" id="tab2" onclick="setMode(2)">
        <svg viewBox="0 0 16 16"><circle cx="6" cy="8" r="4.5"/><circle cx="10" cy="8" r="4.5"/><circle cx="8" cy="4.5" r="1.2" fill="#ec4899"/><circle cx="8" cy="11.5" r="1.2" fill="#ec4899"/></svg>
        <span>3. Intersect</span>
      </button>
    </div>

    <div class="stage-container">
      <svg id="stage" class="stage-svg" viewBox="0 0 360 200">
        
      </svg>
    </div>

    <div class="info-card">
      <p class="info-card-text" id="info-desc">
        
      </p>
    </div>

    <div class="controls">
      <button class="replay-btn" onclick="renderCurrent()">
        <svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M2.5 8a5.5 5.5 0 1 1 1.6 3.9L1.5 14"/>
          <path d="M1.5 9.5V14h4.5"/>
        </svg>
        Replay Animation
      </button>
    </div>
  </div>

  <script>
    const descriptions = [
      '<strong>1. Line:</strong> Draw a straight line or ray through two distinct given points <span class="math-var">A</span> and <span class="math-var">B</span>, extendable indefinitely in both directions.',
      '<strong>2. Circle:</strong> Construct a circle with a specified center point <span class="math-var">P</span> and a given radius <span class="math-var">r</span> (compass operation).',
      '<strong>3. Intersect:</strong> Identify and label intersection points (<span class="math-var">X₁</span>, <span class="math-var">X₂</span>) of lines and circles.'
    ];

    let currentMode = 0;
    let animTimer = null;

    function setMode(idx) {
      currentMode = idx;
      document.querySelectorAll('.tab-btn').forEach((btn, i) => {
        btn.classList.toggle('active', i === idx);
      });
      document.getElementById('info-desc').innerHTML = descriptions[idx];
      renderCurrent();
    }

    function clearTimer() {
      if (animTimer) {
        clearInterval(animTimer);
        animTimer = null;
      }
    }

    function renderCurrent() {
      clearTimer();
      const svg = document.getElementById('stage');
      
      if (currentMode === 0) {
        // Line through 2 points
        svg.innerHTML = `
          
          <line id="line" x1="40" y1="150" x2="40" y2="150" class="geom-line" />
          
          
          <circle cx="100" cy="125" r="5" class="point" />
          <text x="94" y="148" class="label-text math-var">A</text>
          
          
          <circle cx="260" cy="55" r="5" class="point" />
          <text x="265" y="48" class="label-text math-var">B</text>
        `;

        let progress = 0;
        animTimer = setInterval(() => {
          progress += 0.04;
          if (progress > 1) {
            progress = 1;
            clearInterval(animTimer);
          }
          const x1 = 100 - 70 * progress;
          const y1 = 125 + 30.6 * progress;
          const x2 = 100 + 230 * progress;
          const y2 = 125 - 100.6 * progress;
          
          const line = document.getElementById('line');
          if (line) {
            line.setAttribute('x1', x1);
            line.setAttribute('y1', y1);
            line.setAttribute('x2', x2);
            line.setAttribute('y2', y2);
          }
        }, 16);

      } else if (currentMode === 1) {
        // Circle (Center + Radius)
        const cx = 180, cy = 100, R = 68;
        svg.innerHTML = `
          
          <circle cx="${cx}" cy="${cy}" r="5" class="point" />
          <text x="${cx - 16}" y="${cy + 5}" class="label-text math-var">P</text>
          
          
          <line id="rad-line" x1="${cx}" y1="${cy}" x2="${cx + R}" y2="${cy}" class="geom-dashed" />
          
          
          <text id="rad-label" x="${cx + R / 2}" y="${cy - 8}" text-anchor="middle" class="label-text math-var" fill="#64748b">r</text>
          
          
          <circle id="rad-point" cx="${cx + R}" cy="${cy}" r="4" class="point-accent" />
          
          
          <path id="circle-arc" d="" class="geom-circle" />
        `;

        let angle = 0;
        animTimer = setInterval(() => {
          angle += 0.08;
          if (angle >= Math.PI * 2) {
            angle = Math.PI * 2;
            clearInterval(animTimer);
          }

          const currX = cx + R * Math.cos(angle);
          const currY = cy + R * Math.sin(angle);

          const radLine = document.getElementById('rad-line');
          const radPoint = document.getElementById('rad-point');
          const radLabel = document.getElementById('rad-label');
          const arc = document.getElementById('circle-arc');

          if (radLine) {
            radLine.setAttribute('x2', currX);
            radLine.setAttribute('y2', currY);
          }
          if (radPoint) {
            radPoint.setAttribute('cx', currX);
            radPoint.setAttribute('cy', currY);
          }
          if (radLabel) {
            const midX = (cx + currX) / 2;
            const midY = (cy + currY) / 2;
            const perpX = -Math.sin(angle) * 10;
            const perpY = Math.cos(angle) * 10;
            radLabel.setAttribute('x', midX + perpX);
            radLabel.setAttribute('y', midY + perpY + 4);
          }
          if (arc) {
            if (angle >= Math.PI * 2) {
              arc.setAttribute('d', `M ${cx-R},${cy} a ${R},${R} 0 1,0 ${R*2},0 a ${R},${R} 0 1,0 -${R*2},0`);
            } else {
              const largeArc = angle > Math.PI ? 1 : 0;
              arc.setAttribute('d', `M ${cx+R},${cy} A ${R} ${R} 0 ${largeArc} 1 ${currX} ${currY}`);
            }
          }
        }, 16);

      } else if (currentMode === 2) {
        // Intersect
        const c1x = 145, c2x = 215, cy = 100, r = 58;
        // Intersections calculation
        const ix = 180;
        const halfDist = 35;
        const h = Math.sqrt(r * r - halfDist * halfDist);
        const iy1 = cy - h;
        const iy2 = cy + h;

        svg.innerHTML = `
          
          <circle cx="${c1x}" cy="${cy}" r="${r}" class="geom-circle" />
          <circle cx="${c1x}" cy="${cy}" r="4" class="point" />
          <text x="${c1x - 14}" y="${cy + 4}" class="label-text math-var">A</text>

          
          <circle cx="${c2x}" cy="${cy}" r="${r}" class="geom-circle-2" />
          <circle cx="${c2x}" cy="${cy}" r="4" class="point" fill="#6366f1" />
          <text x="${c2x + 8}" y="${cy + 4}" class="label-text math-var">B</text>

          
          <g id="intersections" opacity="0">
            
            <circle cx="${ix}" cy="${iy1}" r="8" stroke="#ec4899" stroke-width="2" fill="none" class="pulse-ring" />
            <circle cx="${ix}" cy="${iy1}" r="5" class="point-intersect" />
            <text x="${ix + 9}" y="${iy1 + 4}" class="label-text math-var" fill="#ec4899">X₁</text>
            
            
            <circle cx="${ix}" cy="${iy2}" r="8" stroke="#ec4899" stroke-width="2" fill="none" class="pulse-ring" />
            <circle cx="${ix}" cy="${iy2}" r="5" class="point-intersect" />
            <text x="${ix + 9}" y="${iy2 + 4}" class="label-text math-var" fill="#ec4899">X₂</text>
          </g>
        `;

        let opacity = 0;
        animTimer = setInterval(() => {
          opacity += 0.05;
          const group = document.getElementById('intersections');
          if (group) {
            group.setAttribute('opacity', opacity);
          }
          if (opacity >= 1) {
            clearInterval(animTimer);
          }
        }, 20);
      }
    }

    // Auto-advance loop every 5s if idle
    let autoStep = 0;
    let autoCycle = setInterval(() => {
      autoStep = (autoStep + 1) % 3;
      setMode(autoStep);
    }, 5000);

    // Stop auto-cycling on manual interaction
    document.body.addEventListener('pointerdown', () => {
      if (autoCycle) {
        clearInterval(autoCycle);
        autoCycle = null;
      }
    }, { once: true });

    // Initial setup
    setMode(0);
  </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>Perpendicular Bisector Construction</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }

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

    /* Step Selector Pills */
    .steps-nav {
      display: flex;
      gap: 6px;
      width: 100%;
      max-width: 400px;
      justify-content: center;
    }

    .step-pill {
      flex: 1;
      height: 6px;
      background: #e2e8f0;
      border-radius: 999px;
      cursor: pointer;
      transition: background 0.3s ease;
    }

    .step-pill.active {
      background: #3b82f6;
    }

    .step-pill.completed {
      background: #93c5fd;
    }

    /* Geometric Stage */
    .stage-container {
      position: relative;
      width: 100%;
      max-width: 400px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

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

    .geom-elem {
      transition: opacity 0.35s ease;
      opacity: 0;
    }

    .geom-elem.visible {
      opacity: 1;
    }

    /* Bottom Control Bar */
    .controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: 400px;
      gap: 8px;
    }

    .step-info {
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
      text-align: center;
      flex: 1;
      line-height: 1.2;
    }

    .btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      padding: 6px 12px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: opacity 0.2s ease, background-color 0.2s ease;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .btn:hover:not(:disabled) {
      background-color: #f1f5f9;
    }

    .btn:active {
      box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
    }

    .btn:disabled {
      opacity: 0.35;
      cursor: not-allowed;
      box-shadow: none;
    }

    .btn-primary {
      background: #3b82f6;
      border-color: #3b82f6;
      color: #ffffff;
    }

    .btn-primary:hover:not(:disabled) {
      background-color: #2563eb;
    }
  </style>
</head>
<body>

  
  <div class="steps-nav" id="pillGroup">
    <div class="step-pill active" onclick="setStep(0)"></div>
    <div class="step-pill" onclick="setStep(1)"></div>
    <div class="step-pill" onclick="setStep(2)"></div>
    <div class="step-pill" onclick="setStep(3)"></div>
    <div class="step-pill" onclick="setStep(4)"></div>
  </div>

  
  <div class="stage-container">
    <svg viewBox="0 0 400 320">
      
      <circle id="circleA" class="geom-elem" cx="140" cy="160" r="120" fill="none" stroke="#60a5fa" stroke-width="1.5" stroke-dasharray="5 4" />

      
      <circle id="circleB" class="geom-elem" cx="260" cy="160" r="120" fill="none" stroke="#60a5fa" stroke-width="1.5" stroke-dasharray="5 4" />

      
      <line id="bisectorLine" class="geom-elem" x1="200" y1="28" x2="200" y2="292" stroke="#2563eb" stroke-width="2.5" stroke-linecap="round" />

      
      <polyline id="rightAngle" class="geom-elem" points="200,148 212,148 212,160" fill="none" stroke="#64748b" stroke-width="1.5" />

      
      <line id="tickA" class="geom-elem" x1="170" y1="154" x2="170" y2="166" stroke="#64748b" stroke-width="1.5" />
      <line id="tickB" class="geom-elem" x1="230" y1="154" x2="230" y2="166" stroke="#64748b" stroke-width="1.5" />

      
      <line id="segAB" class="geom-elem visible" x1="140" y1="160" x2="260" y2="160" stroke="#1e2945" stroke-width="3" stroke-linecap="round" />

      
      <g id="ptsAB" class="geom-elem visible">
        <circle cx="140" cy="160" r="4.5" fill="#ef4444" stroke="#ffffff" stroke-width="1.5" />
        <text x="122" y="165" font-size="14" font-weight="700" fill="#1e2945" text-anchor="middle">A</text>
        <circle cx="260" cy="160" r="4.5" fill="#ef4444" stroke="#ffffff" stroke-width="1.5" />
        <text x="278" y="165" font-size="14" font-weight="700" fill="#1e2945" text-anchor="middle">B</text>
      </g>

      
      <g id="ptsPQ" class="geom-elem">
        <circle cx="200" cy="56" r="4.5" fill="#ef4444" stroke="#ffffff" stroke-width="1.5" />
        <text x="200" y="46" font-size="14" font-weight="700" fill="#1e2945" text-anchor="middle">P</text>
        <circle cx="200" cy="264" r="4.5" fill="#ef4444" stroke="#ffffff" stroke-width="1.5" />
        <text x="200" y="284" font-size="14" font-weight="700" fill="#1e2945" text-anchor="middle">Q</text>
      </g>

      
      <g id="ptM" class="geom-elem">
        <circle cx="200" cy="160" r="4" fill="#10b981" stroke="#ffffff" stroke-width="1.5" />
        <text x="190" y="180" font-size="13" font-weight="700" fill="#10b981" text-anchor="middle">M</text>
      </g>
    </svg>
  </div>

  
  <div class="controls">
    <button class="btn" id="prevBtn" onclick="prevStep()">← Prev</button>
    <div class="step-info" id="stepInfo">1. Segment AB</div>
    <button class="btn btn-primary" id="nextBtn" onclick="nextStep()">Next →</button>
  </div>

  <script>
    const steps = [
      {
        title: "1. Segment AB",
        visible: ['segAB', 'ptsAB']
      },
      {
        title: "2. Circle(A, radius AB)",
        visible: ['segAB', 'ptsAB', 'circleA']
      },
      {
        title: "3. Circle(B, radius AB)",
        visible: ['segAB', 'ptsAB', 'circleA', 'circleB']
      },
      {
        title: "4. Intersections P, Q",
        visible: ['segAB', 'ptsAB', 'circleA', 'circleB', 'ptsPQ']
      },
      {
        title: "5. Line PQ ⊥ AB at M",
        visible: ['segAB', 'ptsAB', 'circleA', 'circleB', 'ptsPQ', 'bisectorLine', 'rightAngle', 'tickA', 'tickB', 'ptM']
      }
    ];

    let current = 0;
    const allElemIds = ['segAB', 'ptsAB', 'circleA', 'circleB', 'ptsPQ', 'bisectorLine', 'rightAngle', 'tickA', 'tickB', 'ptM'];

    function render() {
      const step = steps[current];

      // Update visibility of geometric elements
      allElemIds.forEach(id => {
        const el = document.getElementById(id);
        if (el) {
          if (step.visible.includes(id)) {
            el.classList.add('visible');
          } else {
            el.classList.remove('visible');
          }
        }
      });

      // Update pills
      const pills = document.querySelectorAll('.step-pill');
      pills.forEach((p, idx) => {
        p.className = 'step-pill';
        if (idx === current) p.classList.add('active');
        else if (idx < current) p.classList.add('completed');
      });

      // Update label & buttons
      document.getElementById('stepInfo').textContent = step.title;
      document.getElementById('prevBtn').disabled = (current === 0);
      document.getElementById('nextBtn').disabled = (current === steps.length - 1);
    }

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

    function nextStep() {
      if (current < steps.length - 1) {
        current++;
        render();
      }
    }

    function prevStep() {
      if (current > 0) {
        current--;
        render();
      }
    }

    render();
  </script>
</body>
</html>

OGM.10.MPA.2

Aligned learning resources

Related diagrams