Foundations of Auxiliary Projection Planes

<!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: 10px 12px;
      user-select: none;
    }

    .canvas-container {
      width: 100%;
      max-width: 480px;
      position: relative;
      aspect-ratio: 4 / 3;
      display: flex;
      align-items: center;
      justify-content: center;
    }

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

    /* Step visibility transitions */
    .step-element {
      transition: opacity 0.4s ease, stroke-dashoffset 0.6s ease;
      opacity: 0;
      pointer-events: none;
    }

    .step-element.visible {
      opacity: 1;
      pointer-events: all;
    }

    /* Controls styling */
    .controls {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      width: 100%;
      max-width: 440px;
      margin-top: 4px;
    }

    .step-buttons {
      display: flex;
      width: 100%;
      gap: 6px;
    }

    .step-btn {
      flex: 1;
      border: 1px solid #cbd5e1;
      background: #f8fafc;
      color: #475569;
      padding: 8px 4px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
    }

    .step-btn.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
      box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
    }

    .playback-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }

    .nav-btn {
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      color: #1e2945;
      font-size: 13px;
      font-weight: 600;
      padding: 4px 12px;
      border-radius: 6px;
      cursor: pointer;
    }

    .nav-btn:hover {
      background: #e2e8f0;
    }

    /* Measure highlight pulse */
    @keyframes pulseDim {
      0%, 100% { stroke: #f59e0b; }
      50% { stroke: #d97706; }
    }
    .caliper-highlight {
      animation: pulseDim 2s infinite ease-in-out;
    }
  </style>
</head>
<body>

  <div class="canvas-container">
    <svg viewBox="0 0 460 340" aria-label="Auxiliary Projection Canvas">
      <defs>
        
        <marker id="arrow-amber" viewBox="0 0 6 6" refX="5" refY="3" markerWidth="4" markerHeight="4" orient="auto">
          <path d="M 0 0 L 6 3 L 0 6 z" fill="#f59e0b" />
        </marker>
        <marker id="arrow-amber-rev" viewBox="0 0 6 6" refX="1" refY="3" markerWidth="4" markerHeight="4" orient="auto">
          <path d="M 6 0 L 0 3 L 6 6 z" fill="#f59e0b" />
        </marker>
        <marker id="arrow-blue" viewBox="0 0 6 6" refX="5" refY="3" markerWidth="4" markerHeight="4" orient="auto">
          <path d="M 0 0 L 6 3 L 0 6 z" fill="#2563eb" />
        </marker>
      </defs>

      
      <g stroke="#f1f5f9" stroke-width="1">
        <line x1="0" y1="60" x2="460" y2="60" />
        <line x1="0" y1="120" x2="460" y2="120" />
        <line x1="0" y1="180" x2="460" y2="180" />
        <line x1="0" y1="240" x2="460" y2="240" />
        <line x1="0" y1="300" x2="460" y2="300" />
        <line x1="80" y1="0" x2="80" y2="340" />
        <line x1="160" y1="0" x2="160" y2="340" />
        <line x1="240" y1="0" x2="240" y2="340" />
        <line x1="320" y1="0" x2="320" y2="340" />
        <line x1="400" y1="0" x2="400" y2="340" />
      </g>

      
      
      <line x1="30" y1="210" x2="220" y2="210" stroke="#475569" stroke-width="2.5" stroke-linecap="round" />
      <text x="36" y="202" font-size="14" font-weight="700" fill="#475569">H</text>
      <line x1="36" y1="205" x2="52" y2="205" stroke="#94a3b8" stroke-width="1" />
      <text x="36" y="224" font-size="14" font-weight="700" fill="#475569">F</text>

      
      <line x1="120" y1="140" x2="120" y2="280" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="4,4" />

      
      <circle cx="120" cy="140" r="4.5" fill="#1e2945" />
      <text x="100" y="136" font-size="15" font-weight="700" fill="#1e2945">a<tspan baseline-shift="sub" font-size="11">h</tspan></text>

      
      <circle cx="120" cy="280" r="4.5" fill="#1e2945" />
      <text x="100" y="286" font-size="15" font-weight="700" fill="#1e2945">a<tspan baseline-shift="sub" font-size="11">f</tspan></text>

      
      <line x1="140" y1="210" x2="140" y2="280" stroke="#cbd5e1" stroke-width="1.5" id="base-dim-line" />
      <line x1="134" y1="210" x2="146" y2="210" stroke="#cbd5e1" stroke-width="1.5" />
      <line x1="134" y1="280" x2="146" y2="280" stroke="#cbd5e1" stroke-width="1.5" />
      <text x="150" y="249" font-size="13" font-weight="600" fill="#64748b" id="base-dim-text">d = 35mm</text>

      
      <g id="step1-group" class="step-element">
        
        <line x1="188.2" y1="8.2" x2="278.2" y2="164.1" stroke="#0284c7" stroke-width="2.5" stroke-linecap="round" />
        
        <text x="195" y="24" font-size="14" font-weight="700" fill="#0284c7">H</text>
        <line x1="205" y1="26" x2="216" y2="20" stroke="#38bdf8" stroke-width="1" />
        <text x="214" y="36" font-size="14" font-weight="700" fill="#0284c7">1</text>
        
        <path d="M 245 106.6 A 35 35 0 0 1 258 129" fill="none" stroke="#0284c7" stroke-width="1.2" stroke-dasharray="3,2" />
        <text x="256" y="116" font-size="11" font-weight="600" fill="#0284c7">30°</text>
      </g>

      
      <g id="step2-group" class="step-element">
        
        <line x1="120" y1="140" x2="310" y2="30.3" stroke="#2563eb" stroke-width="1.5" stroke-dasharray="5,4" />
        
        
        <path d="M 219.6 82.5 L 224.6 91.2 L 233.3 86.2" fill="none" stroke="#2563eb" stroke-width="1.5" />
      </g>

      
      <g id="step3-group" class="step-element">
        
        <line x1="140" y1="210" x2="140" y2="280" stroke="#f59e0b" stroke-width="2.5" class="caliper-highlight" />
        <line x1="132" y1="210" x2="148" y2="210" stroke="#f59e0b" stroke-width="2" />
        <line x1="132" y1="280" x2="148" y2="280" stroke="#f59e0b" stroke-width="2" />
        <text x="150" y="249" font-size="13" font-weight="700" fill="#f59e0b">d = 35mm</text>

        
        
        <g stroke="#f59e0b" stroke-width="2" class="caliper-highlight">
          
          <line x1="235.8" y1="64.5" x2="296.4" y2="29.5" marker-start="url(#arrow-amber-rev)" marker-end="url(#arrow-amber)" />
          
          <line x1="228.2" y1="77.5" x2="238.2" y2="60.2" stroke-width="1" />
          <line x1="288.9" y1="42.5" x2="298.9" y2="25.2" stroke-width="1" />
        </g>
        <text x="274" y="44" font-size="13" font-weight="700" fill="#f59e0b">d = 35mm</text>

        
        <circle cx="288.9" cy="42.5" r="5" fill="#f59e0b" stroke="#1e2945" stroke-width="1.5" />
        <text x="298" y="58" font-size="16" font-weight="800" fill="#f59e0b">a<tspan baseline-shift="sub" font-size="12">1</tspan></text>
      </g>
    </svg>
  </div>

  
  <div class="controls">
    <div class="step-buttons">
      <button class="step-btn active" id="btn-0" onclick="setStep(0)">1. Plane H/1</button>
      <button class="step-btn" id="btn-1" onclick="setStep(1)">2. Projector ⟂</button>
      <button class="step-btn" id="btn-2" onclick="setStep(2)">3. Plot a₁ (d)</button>
    </div>
    <div class="playback-bar">
      <button class="nav-btn" onclick="prevStep()">◀ Prev</button>
      <button class="nav-btn" id="play-btn" onclick="togglePlay()">Auto ▶</button>
      <button class="nav-btn" onclick="nextStep()">Next ▶</button>
    </div>
  </div>

  <script>
    let currentStep = 0;
    let autoInterval = null;

    const steps = [
      { id: 'step1-group', minStep: 0 },
      { id: 'step2-group', minStep: 1 },
      { id: 'step3-group', minStep: 2 }
    ];

    function updateView() {
      // Toggle SVG element visibilities
      steps.forEach(s => {
        const el = document.getElementById(s.id);
        if (currentStep >= s.minStep) {
          el.classList.add('visible');
        } else {
          el.classList.remove('visible');
        }
      });

      // Update base dimension color when step 3 is active
      const baseDimText = document.getElementById('base-dim-text');
      const baseDimLine = document.getElementById('base-dim-line');
      if (currentStep === 2) {
        baseDimText.style.opacity = '0';
        baseDimLine.style.opacity = '0';
      } else {
        baseDimText.style.opacity = '1';
        baseDimLine.style.opacity = '1';
      }

      // Update buttons
      for (let i = 0; i < 3; i++) {
        const btn = document.getElementById(`btn-${i}`);
        if (i === currentStep) {
          btn.classList.add('active');
        } else {
          btn.classList.remove('active');
        }
      }
    }

    function setStep(index) {
      currentStep = index;
      updateView();
    }

    function nextStep() {
      currentStep = (currentStep + 1) % 3;
      updateView();
    }

    function prevStep() {
      currentStep = (currentStep - 1 + 3) % 3;
      updateView();
    }

    function togglePlay() {
      const playBtn = document.getElementById('play-btn');
      if (autoInterval) {
        clearInterval(autoInterval);
        autoInterval = null;
        playBtn.textContent = 'Auto ▶';
      } else {
        playBtn.textContent = 'Pause ⏸';
        autoInterval = setInterval(() => {
          nextStep();
        }, 3200);
      }
    }

    // Initialize initial state
    updateView();
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      color: #1e2945;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 12px;
      gap: 12px;
      user-select: none;
    }
    .toggle-bar {
      display: flex;
      gap: 8px;
      background: #f1f5f9;
      padding: 4px;
      border-radius: 8px;
    }
    .btn {
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 600;
      border: none;
      background: transparent;
      color: #64748b;
      cursor: pointer;
      border-radius: 6px;
      transition: all 0.2s ease;
    }
    .btn.active {
      background: #ffffff;
      color: #2563eb;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    .views-container {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      width: 100%;
      max-width: 640px;
      justify-content: center;
    }
    .view-card {
      flex: 1 1 290px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }
    .view-title {
      font-size: 14px;
      font-weight: 700;
      color: #475569;
      margin-bottom: 8px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    svg {
      width: 100%;
      height: auto;
      max-height: 280px;
      overflow: visible;
    }
    .legend {
      display: flex;
      gap: 16px;
      font-size: 12px;
      font-weight: 600;
      margin-top: 4px;
    }
    .legend-item {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .legend-color {
      width: 12px;
      height: 3px;
      border-radius: 2px;
    }
    .trans-active {
      transition: opacity 0.3s ease, stroke-dashoffset 0.5s ease;
    }
  </style>
</head>
<body>

  <div class="toggle-bar">
    <button class="btn active" id="btn-ortho" onclick="setView('standard')">Standard Planes</button>
    <button class="btn" id="btn-aux" onclick="setView('auxiliary')">Auxiliary Plane (H/1)</button>
  </div>

  <div class="views-container">
    
    <div class="view-card">
      <div class="view-title">3D Projection Space</div>
      <svg viewBox="0 0 300 260">
        <defs>
          <marker id="arrow" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
            <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#3b82f6"/>
          </marker>
        </defs>

        
        
        <polygon points="50,190 190,190 250,140 110,140" fill="#f1f5f9" stroke="#cbd5e1" stroke-width="1.5" stroke-dasharray="3,3"/>
        <polygon points="50,70 190,70 190,190 50,190" fill="none" stroke="#cbd5e1" stroke-width="1.5"/>
        <polygon points="190,70 250,20 250,140 190,190" fill="none" stroke="#cbd5e1" stroke-width="1.5"/>
        <polygon points="50,70 110,20 250,20 190,70" fill="#f8fafc" opacity="0.5" stroke="#cbd5e1" stroke-width="1.5"/>

        
        
        
        <polygon points="90,175 160,175 160,175 90,175" fill="#94a3b8" opacity="0.3" />
        
        <polygon points="90,175 125,145 125,95" fill="#cbd5e1" stroke="#475569" stroke-width="1.5"/>
        
        <polygon points="125,95 195,95 195,145 125,145" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
        
        <polygon points="160,175 195,145 195,95" fill="#94a3b8" stroke="#475569" stroke-width="1.5"/>
        
        <polygon id="ramp-face" points="90,175 160,175 195,95 125,95" fill="#38bdf8" fill-opacity="0.45" stroke="#0284c7" stroke-width="2"/>

        
        <g id="std-rays" class="trans-active">
          
          <line x1="90" y1="175" x2="90" y2="70" stroke="#3b82f6" stroke-width="1.5" stroke-dasharray="3,3"/>
          <line x1="125" y1="95" x2="125" y2="40" stroke="#3b82f6" stroke-width="1.5" stroke-dasharray="3,3"/>
          <line x1="195" y1="95" x2="195" y2="40" stroke="#3b82f6" stroke-width="1.5" stroke-dasharray="3,3"/>
          
          <polygon points="90,70 160,70 195,40 125,40" fill="#93c5fd" fill-opacity="0.6" stroke="#2563eb" stroke-width="1.5"/>
          <text x="142" y="58" font-size="10" font-weight="700" fill="#1e40af" text-anchor="middle">Foreshortened</text>
        </g>

        
        <g id="aux-plane" class="trans-active" opacity="0">
          
          <polygon points="40,140 110,140 190,40 120,40" fill="#fbcfe8" fill-opacity="0.3" stroke="#ef4444" stroke-width="1.5" stroke-dasharray="4,2"/>
          <text x="175" y="45" font-size="11" font-weight="700" fill="#dc2626">Plane 1</text>
          
          
          <line x1="125" y1="95" x2="100" y2="60" stroke="#3b82f6" stroke-width="1.5" stroke-dasharray="2,2" marker-end="url(#arrow)"/>
          <line x1="160" y1="175" x2="135" y2="140" stroke="#3b82f6" stroke-width="1.5" stroke-dasharray="2,2" marker-end="url(#arrow)"/>
          
          
          <polygon points="65,125 135,125 165,70 95,70" fill="#f43f5e" fill-opacity="0.4" stroke="#e11d48" stroke-width="2"/>
          <text x="115" y="102" font-size="10" font-weight="700" fill="#9f1239" text-anchor="middle">True Size</text>
        </g>
      </svg>
    </div>

    
    <div class="view-card">
      <div class="view-title">2D Multiview Sheet</div>
      <svg viewBox="0 0 300 260">
        
        <line x1="30" y1="120" x2="270" y2="120" stroke="#ef4444" stroke-width="2"/>
        <text x="35" y="114" font-size="12" font-weight="700" fill="#dc2626">H</text>
        <text x="35" y="133" font-size="12" font-weight="700" fill="#dc2626">F</text>

        
        <rect x="70" y="30" width="70" height="60" fill="#f8fafc" stroke="#475569" stroke-width="1.5"/>
        
        <rect x="70" y="30" width="70" height="60" fill="#93c5fd" fill-opacity="0.5" stroke="#2563eb" stroke-width="1.5"/>
        <text x="105" y="58" font-size="11" font-weight="700" fill="#1e40af" text-anchor="middle">Top View<tspan x="105" dy="13" font-size="9" fill="#64748b">(Foreshortened)</tspan></text>

        
        <polygon points="70,150 140,150 140,210 70,210" fill="#f8fafc" stroke="#475569" stroke-width="1.5"/>
        <line x1="70" y1="210" x2="140" y2="150" stroke="#0284c7" stroke-width="2.5"/>
        <text x="105" y="185" font-size="11" font-weight="700" fill="#1e40af" text-anchor="middle">Front View<tspan x="105" dy="13" font-size="9" fill="#0284c7">(Edge View)</tspan></text>

        
        <line x1="70" y1="90" x2="70" y2="150" stroke="#3b82f6" stroke-width="1" stroke-dasharray="3,3"/>
        <line x1="140" y1="90" x2="140" y2="150" stroke="#3b82f6" stroke-width="1" stroke-dasharray="3,3"/>

        
        <g id="aux-multiview" class="trans-active" opacity="0">
          
          
          <line x1="180" y1="80" x2="260" y2="10" stroke="#ef4444" stroke-width="2"/>
          <text x="180" y="70" font-size="11" font-weight="700" fill="#dc2626">H</text>
          <text x="250" y="25" font-size="11" font-weight="700" fill="#dc2626">1</text>

          
          <line x1="70" y1="30" x2="175" y2="135" stroke="#3b82f6" stroke-width="1.2" stroke-dasharray="3,3"/>
          <line x1="140" y1="90" x2="245" y2="195" stroke="#3b82f6" stroke-width="1.2" stroke-dasharray="3,3"/>

          
          
          <g transform="translate(190, 70) rotate(49.4)">
            <rect x="0" y="0" width="70" height="92" fill="#f43f5e" fill-opacity="0.3" stroke="#e11d48" stroke-width="2"/>
            <text x="35" y="45" font-size="11" font-weight="700" fill="#9f1239" text-anchor="middle">True Size<tspan x="35" dy="13" font-size="9" fill="#e11d48">&amp; Length</tspan></text>
          </g>
        </g>
      </svg>
    </div>
  </div>

  <div class="legend">
    <div class="legend-item">
      <div class="legend-color" style="background:#ef4444;"></div>
      <span>Reference Line</span>
    </div>
    <div class="legend-item">
      <div class="legend-color" style="background:#3b82f6;"></div>
      <span>Projection Ray</span>
    </div>
    <div class="legend-item">
      <div class="legend-color" style="background:#e11d48;"></div>
      <span>True Measure</span>
    </div>
  </div>

  <script>
    function setView(type) {
      const isAux = type === 'auxiliary';
      
      // Update toggle buttons
      document.getElementById('btn-ortho').classList.toggle('active', !isAux);
      document.getElementById('btn-aux').classList.toggle('active', isAux);
      
      // Update 3D & 2D views
      document.getElementById('aux-plane').style.opacity = isAux ? '1' : '0';
      document.getElementById('aux-multiview').style.opacity = isAux ? '1' : '0';
      document.getElementById('std-rays').style.opacity = isAux ? '0.2' : '1';
    }
  </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>Dihedral Angle Unfolding</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
      -webkit-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;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      overflow-x: hidden;
      padding: 12px;
      box-sizing: border-box;
    }

    .viewport-container {
      position: relative;
      width: 100%;
      flex: 1;
      min-height: 240px;
      max-height: 480px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

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

    /* Controls Bar */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      max-width: 420px;
      padding: 6px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 999px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
      z-index: 10;
      margin-top: 8px;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 32px;
      padding: 0 12px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      background: transparent;
      border: none;
      border-radius: 999px;
      cursor: pointer;
      transition: background-color 0.2s, color 0.2s;
    }

    .btn:hover {
      background: #f1f5f9;
      color: #0f172a;
    }

    .btn-play {
      width: 32px;
      min-width: 32px;
      padding: 0;
      background: #0284c7;
      color: #ffffff;
    }
    .btn-play:hover {
      background: #0369a1;
      color: #ffffff;
    }

    .step-pills {
      display: flex;
      gap: 4px;
      flex-wrap: nowrap;
    }

    .pill {
      height: 28px;
      padding: 0 10px;
      font-size: 12px;
      font-weight: 600;
      border-radius: 999px;
      border: none;
      background: #f1f5f9;
      color: #64748b;
      cursor: pointer;
      transition: background-color 0.2s, color 0.2s;
      white-space: nowrap;
    }

    .pill:hover {
      background: #e2e8f0;
      color: #1e293b;
    }

    .pill.active {
      background: #0284c7;
      color: #ffffff;
    }

    @media (max-width: 380px) {
      .controls {
        gap: 4px;
        padding: 4px;
      }
      .pill {
        padding: 0 7px;
        font-size: 11px;
        height: 26px;
      }
      .btn-play {
        width: 28px;
        height: 28px;
      }
    }
  </style>
</head>
<body>

  <div class="viewport-container">
    <svg id="scene" viewBox="-240 -160 480 320">
      <defs>
        
        <linearGradient id="gradF" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stop-color="#e0f2fe" stop-opacity="0.85" />
          <stop offset="100%" stop-color="#bae6fd" stop-opacity="0.85" />
        </linearGradient>
        <linearGradient id="gradH" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stop-color="#fef3c7" stop-opacity="0.85" />
          <stop offset="100%" stop-color="#fde68a" stop-opacity="0.85" />
        </linearGradient>
      </defs>

      
      <polygon id="planeF" fill="url(#gradF)" stroke="#0284c7" stroke-width="1.5" stroke-linejoin="round"/>
      <polygon id="planeH" fill="url(#gradH)" stroke="#d97706" stroke-width="1.5" stroke-linejoin="round"/>

      
      <line id="hingeLine" stroke="#0f172a" stroke-width="2.5" stroke-linecap="round"/>

      
      <line id="rayF" stroke="#0284c7" stroke-width="1.5" stroke-dasharray="4 3"/>
      
      <line id="rayH" stroke="#d97706" stroke-width="1.5" stroke-dasharray="4 3"/>

      
      <line id="projectorLine" stroke="#475569" stroke-width="2" stroke-dasharray="3 3"/>

      
      <path id="rightAngleMark" fill="none" stroke="#ea580c" stroke-width="1.75"/>

      
      <circle id="dotPf" r="4.5" fill="#0284c7" stroke="#ffffff" stroke-width="1.5"/>
      <circle id="dotPh" r="4.5" fill="#d97706" stroke="#ffffff" stroke-width="1.5"/>
      <circle id="dotP" r="5.5" fill="#7c3aed" stroke="#ffffff" stroke-width="2"/>

      
      <text id="lblPlaneF" font-size="13" font-weight="700" fill="#0369a1">Plane F</text>
      <text id="lblPlaneH" font-size="13" font-weight="700" fill="#b45309">Plane H</text>
      <text id="lblHF" font-size="13" font-weight="800" fill="#0f172a">H / F</text>
      <text id="lblP" font-size="14" font-weight="800" fill="#7c3aed">P</text>
      <text id="lblPf" font-size="12" font-weight="700" fill="#0369a1">p<tspan font-size="9" dy="3">f</tspan></text>
      <text id="lblPh" font-size="12" font-weight="700" fill="#b45309">p<tspan font-size="9" dy="3">h</tspan></text>
      <text id="lblPerp" font-size="13" font-weight="800" fill="#ea580c">90°</text>
    </svg>
  </div>

  <div class="controls">
    <button class="btn btn-play" id="btnPlay" title="Play / Pause">⏸</button>
    <div class="step-pills">
      <button class="pill active" data-step="0">3D</button>
      <button class="pill" data-step="1">Project</button>
      <button class="pill" data-step="2">Unfold</button>
      <button class="pill" data-step="3">2D Sheet</button>
    </div>
  </div>

  <script>
    // State model for 3D rendering & transitions
    const state = {
      unfold: 0,      // 0 = 90 deg folded dihedral, 1 = 180 deg flat
      rays: 0,        // 0 to 1 visibility of projection rays from P
      showP: 1,       // 1 = P visible, 0 = P hidden (2D mode)
      camFlat: 0,     // 0 = 3D isometric angle, 1 = direct 2D front view
      perpAlpha: 0    // 0 to 1 visibility of 90 deg right angle marker
    };

    const W = 260; // Plane width along X
    const H_F = 110; // Plane F height
    const H_H = 110; // Plane H depth

    // Point P 3D coordinates: (X, Y_depth, Z_up)
    const P3D = { x: 30, y: 70, z: 65 };

    function project(x, y, z) {
      // Interpolate camera angle between 3D Isometric and 2D Orthographic
      const yaw = (1 - state.camFlat) * (26 * Math.PI / 180);
      const pitch = (1 - state.camFlat) * (18 * Math.PI / 180);

      // Rotate around Z (yaw)
      const cosY = Math.cos(yaw), sinY = Math.sin(yaw);
      const x1 = x * cosY - y * sinY;
      const y1 = x * sinY + y * cosY;

      // Rotate around X (pitch)
      const cosP = Math.cos(pitch), sinP = Math.sin(pitch);
      const y2 = y1 * sinP + z * cosP;

      // Center offset
      const cx = 0;
      const cy = 10;
      return { sx: cx + x1, sy: cy - y2 };
    }

    function render() {
      // Plane F vertices: fixed vertical (Z from 0 to H_F, Y = 0)
      const f_bl = project(-W/2, 0, 0);
      const f_br = project(W/2, 0, 0);
      const f_tr = project(W/2, 0, H_F);
      const f_tl = project(-W/2, 0, H_F);

      document.getElementById('planeF').setAttribute(
        'points',
        `${f_bl.sx},${f_bl.sy} ${f_br.sx},${f_br.sy} ${f_tr.sx},${f_tr.sy} ${f_tl.sx},${f_tl.sy}`
      );

      // Plane H: hinges around X axis from Y=+H_H, Z=0 down to Y=0, Z=-H_H
      // unfold: 0 -> angle = 0 (Y = depth, Z = 0)
      // unfold: 1 -> angle = 90 deg (Y = 0, Z = -H_H)
      const rad = state.unfold * (Math.PI / 2);
      const hy = H_H * Math.cos(rad);
      const hz = -H_H * Math.sin(rad);

      const h_tl = project(-W/2, 0, 0);
      const h_tr = project(W/2, 0, 0);
      const h_br = project(W/2, hy, hz);
      const h_bl = project(-W/2, hy, hz);

      document.getElementById('planeH').setAttribute(
        'points',
        `${h_tl.sx},${h_tl.sy} ${h_tr.sx},${h_tr.sy} ${h_br.sx},${h_br.sy} ${h_bl.sx},${h_bl.sy}`
      );

      // Reference Line H/F
      const r_l = project(-W/2 - 15, 0, 0);
      const r_r = project(W/2 + 15, 0, 0);
      const hinge = document.getElementById('hingeLine');
      hinge.setAttribute('x1', r_l.sx);
      hinge.setAttribute('y1', r_l.sy);
      hinge.setAttribute('x2', r_r.sx);
      hinge.setAttribute('y2', r_r.sy);

      // Point P & Projections
      // pf is on Plane F: (P.x, 0, P.z)
      const pf_2d = project(P3D.x, 0, P3D.z);
      // ph is on Plane H: (P.x, P.y * cos(rad), -P.y * sin(rad))
      const ph_y = P3D.y * Math.cos(rad);
      const ph_z = -P3D.y * Math.sin(rad);
      const ph_2d = project(P3D.x, ph_y, ph_z);

      // P in 3D
      const p_2d = project(P3D.x, P3D.y, P3D.z);

      // Update Point Elements
      const dotPf = document.getElementById('dotPf');
      dotPf.setAttribute('cx', pf_2d.sx);
      dotPf.setAttribute('cy', pf_2d.sy);
      dotPf.style.opacity = Math.max(state.rays, state.camFlat);

      const dotPh = document.getElementById('dotPh');
      dotPh.setAttribute('cx', ph_2d.sx);
      dotPh.setAttribute('cy', ph_2d.sy);
      dotPh.style.opacity = Math.max(state.rays, state.camFlat);

      const dotP = document.getElementById('dotP');
      dotP.setAttribute('cx', p_2d.sx);
      dotP.setAttribute('cy', p_2d.sy);
      dotP.style.opacity = state.showP;

      // Projection Rays from P
      const rayF = document.getElementById('rayF');
      rayF.setAttribute('x1', p_2d.sx);
      rayF.setAttribute('y1', p_2d.sy);
      rayF.setAttribute('x2', pf_2d.sx);
      rayF.setAttribute('y2', pf_2d.sy);
      rayF.style.opacity = state.rays * state.showP;

      const rayH = document.getElementById('rayH');
      rayH.setAttribute('x1', p_2d.sx);
      rayH.setAttribute('y1', p_2d.sy);
      rayH.setAttribute('x2', ph_2d.sx);
      rayH.setAttribute('y2', ph_2d.sy);
      rayH.style.opacity = state.rays * state.showP;

      // Projector between pf and ph
      const proj = document.getElementById('projectorLine');
      proj.setAttribute('x1', pf_2d.sx);
      proj.setAttribute('y1', pf_2d.sy);
      proj.setAttribute('x2', ph_2d.sx);
      proj.setAttribute('y2', ph_2d.sy);
      proj.style.opacity = state.unfold > 0.05 ? state.unfold : (state.rays > 0.5 ? 0.35 : 0);

      // Right Angle Perpendicular Indicator at (P.x, 0, 0)
      const p_hf_axis = project(P3D.x, 0, 0);
      const sz = 10;
      const corner1 = project(P3D.x - sz, 0, 0);
      const corner2 = project(P3D.x - sz, 0, sz);
      const corner3 = project(P3D.x, 0, sz);
      const ra = document.getElementById('rightAngleMark');
      ra.setAttribute('d', `M ${corner1.sx} ${corner1.sy} L ${corner2.sx} ${corner2.sy} L ${corner3.sx} ${corner3.sy}`);
      ra.style.opacity = state.perpAlpha;

      // Labels Positioning
      const lblF = document.getElementById('lblPlaneF');
      const f_label_pos = project(-W/2 + 25, 0, H_F - 16);
      lblF.setAttribute('x', f_label_pos.sx);
      lblF.setAttribute('y', f_label_pos.sy);

      const lblH = document.getElementById('lblPlaneH');
      const h_label_pos = project(-W/2 + 25, hy * 0.75, hz * 0.75);
      lblH.setAttribute('x', h_label_pos.sx);
      lblH.setAttribute('y', h_label_pos.sy);

      const lblHF = document.getElementById('lblHF');
      lblHF.setAttribute('x', r_r.sx + 6);
      lblHF.setAttribute('y', r_r.sy + 4);

      const lblP = document.getElementById('lblP');
      lblP.setAttribute('x', p_2d.sx + 8);
      lblP.setAttribute('y', p_2d.sy - 8);
      lblP.style.opacity = state.showP;

      const lblPf = document.getElementById('lblPf');
      lblPf.setAttribute('x', pf_2d.sx + 8);
      lblPf.setAttribute('y', pf_2d.sy - 6);
      lblPf.style.opacity = Math.max(state.rays, state.camFlat);

      const lblPh = document.getElementById('lblPh');
      lblPh.setAttribute('x', ph_2d.sx + 8);
      lblPh.setAttribute('y', ph_2d.sy + 14);
      lblPh.style.opacity = Math.max(state.rays, state.camFlat);

      const lblPerp = document.getElementById('lblPerp');
      lblPerp.setAttribute('x', corner2.sx - 16);
      lblPerp.setAttribute('y', corner2.sy - 4);
      lblPerp.style.opacity = state.perpAlpha;
    }

    // Vanilla JS animation engine replacing GSAP
    let animFrame = null;
    function easeInOutQuad(t) {
      return t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
    }

    function tweenState(target, duration = 1000) {
      if (animFrame) {
        cancelAnimationFrame(animFrame);
      }
      const startState = { ...state };
      const startTime = performance.now();

      function step(now) {
        const elapsed = now - startTime;
        const progress = Math.min(elapsed / duration, 1);
        const t = easeInOutQuad(progress);

        for (const key in target) {
          state[key] = startState[key] + (target[key] - startState[key]) * t;
        }

        render();

        if (progress < 1) {
          animFrame = requestAnimationFrame(step);
        } else {
          animFrame = null;
        }
      }

      animFrame = requestAnimationFrame(step);
    }

    // Step definitions
    let currentStep = 0;
    let isPlaying = true;
    let autoTimer = null;

    const stepConfigs = [
      // Step 0: 3D Point P
      { unfold: 0, rays: 0, showP: 1, camFlat: 0, perpAlpha: 0 },
      // Step 1: Project rays
      { unfold: 0, rays: 1, showP: 1, camFlat: 0, perpAlpha: 0 },
      // Step 2: Unfold Hinge
      { unfold: 1, rays: 1, showP: 0.15, camFlat: 0, perpAlpha: 0.2 },
      // Step 3: 2D Orthographic Sheet
      { unfold: 1, rays: 1, showP: 0, camFlat: 1, perpAlpha: 1 }
    ];

    function applyStep(idx, duration = 1000) {
      currentStep = idx;
      document.querySelectorAll('.pill').forEach((p, i) => {
        p.classList.toggle('active', i === idx);
      });
      tweenState(stepConfigs[idx], duration);
    }

    function nextStep() {
      const next = (currentStep + 1) % stepConfigs.length;
      applyStep(next);
    }

    function scheduleNext() {
      if (autoTimer) clearTimeout(autoTimer);
      if (!isPlaying) return;
      autoTimer = setTimeout(() => {
        nextStep();
        scheduleNext();
      }, 3200);
    }

    // Controls
    const btnPlay = document.getElementById('btnPlay');
    btnPlay.addEventListener('click', () => {
      isPlaying = !isPlaying;
      btnPlay.textContent = isPlaying ? '⏸' : '▶';
      if (isPlaying) {
        scheduleNext();
      } else if (autoTimer) {
        clearTimeout(autoTimer);
      }
    });

    document.querySelectorAll('.pill').forEach((pill) => {
      pill.addEventListener('click', () => {
        const step = parseInt(pill.dataset.step, 10);
        applyStep(step);
        if (isPlaying) {
          scheduleNext();
        }
      });
    });

    // Initial render & run
    render();
    scheduleNext();
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 100%;
      padding: 12px;
      user-select: none;
    }

    .controls-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      margin-bottom: 6px;
    }

    .step-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
    }

    .step-btn.active {
      background: #0d9488;
      border-color: #0d9488;
      color: #ffffff;
      box-shadow: 0 2px 4px rgba(13, 148, 136, 0.25);
    }

    .play-btn {
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 14px;
      color: #334155;
    }
    .play-btn:active { background: #e2e8f0; }

    .svg-wrap {
      position: relative;
      width: 100%;
      flex: 1;
      max-height: 400px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

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

    /* SVG Styling */
    .view-label {
      font-size: 13px;
      font-weight: 600;
      fill: #64748b;
      letter-spacing: 0.5px;
    }
    .axis-label {
      font-size: 14px;
      font-weight: 700;
      fill: #334155;
    }
    .point-label {
      font-size: 14px;
      font-weight: 600;
      font-family: inherit;
    }
    .edge-teal {
      stroke: #0d9488;
      stroke-width: 3;
      stroke-linecap: round;
      transition: stroke 0.3s ease;
    }
    .line-blue {
      stroke: #2563eb;
      stroke-width: 3;
      stroke-linecap: round;
      transition: opacity 0.4s ease, stroke-dashoffset 0.5s ease;
    }
    .proj-line {
      stroke: #cbd5e1;
      stroke-width: 1.5;
      stroke-dasharray: 4 4;
    }
    .angle-arc {
      stroke: #2563eb;
      stroke-width: 1.5;
      fill: none;
    }
    .angle-ref {
      stroke: #94a3b8;
      stroke-width: 1;
      stroke-dasharray: 3 3;
    }
    .dim-text {
      font-size: 12px;
      font-weight: 600;
      fill: #2563eb;
    }
  </style>
</head>
<body>

  <div class="controls-bar">
    <button id="btnStep1" class="step-btn active" onclick="setStep(1)">Step 1</button>
    <button id="btnStep2" class="step-btn" onclick="setStep(2)">Step 2</button>
    <button id="btnStep3" class="step-btn" onclick="setStep(3)">Step 3</button>
    <button id="playBtn" class="play-btn" onclick="togglePlay()" title="Play/Pause">⏸</button>
  </div>

  <div class="svg-wrap">
    <svg viewBox="0 0 540 360">
      <defs>
        <marker id="arrow" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1 L 8 5 L 0 9 z" fill="#2563eb" />
        </marker>
      </defs>

      
      <rect x="20" y="20" width="500" height="150" fill="#f8fafc" rx="6" />
      <rect x="20" y="190" width="500" height="150" fill="#f8fafc" rx="6" />

      <text x="32" y="42" class="view-label">FRONT VIEW</text>
      <text x="32" y="212" class="view-label">TOP VIEW</text>

      
      <line x1="120" y1="50" x2="120" y2="310" class="proj-line" />
      <line x1="260" y1="50" x2="260" y2="310" class="proj-line" />
      <line x1="330" y1="50" x2="330" y2="310" class="proj-line" />

      
      <line x1="10" y1="180" x2="530" y2="180" stroke="#475569" stroke-width="2" />
      <text x="515" y="174" class="axis-label">x</text>

      
      
      <line id="ab2" x1="120" y1="130" x2="260" y2="60" class="edge-teal" />
      <circle cx="120" cy="130" r="4.5" fill="#0d9488" />
      <text x="100" y="142" class="point-label" fill="#0f766e">A₂</text>
      <circle cx="260" cy="60" r="4.5" fill="#0d9488" />
      <text x="265" y="55" class="point-label" fill="#0f766e">B₂</text>

      
      <line id="ab1" x1="120" y1="240" x2="260" y2="310" class="edge-teal" />
      <circle cx="120" cy="240" r="4.5" fill="#0d9488" />
      <text x="100" y="244" class="point-label" fill="#0f766e">A₁</text>
      <circle cx="260" cy="310" r="4.5" fill="#0d9488" />
      <text x="268" y="322" class="point-label" fill="#0f766e">B₁</text>

      
      <circle cx="330" cy="135" r="4.5" fill="#1e2945" />
      <text x="340" y="142" class="point-label" fill="#1e2945">P₂</text>
      <circle cx="330" cy="245" r="4.5" fill="#1e2945" />
      <text x="340" y="248" class="point-label" fill="#1e2945">P₁</text>

      
      
      <g id="step2Group" opacity="0" style="transition: opacity 0.4s ease;">
        
        <line x1="330" y1="135" x2="410" y2="135" class="angle-ref" />
        <line x1="120" y1="130" x2="200" y2="130" class="angle-ref" />
        
        
        <path d="M 170 130 A 50 50 0 0 0 164.7 107.6" class="angle-arc" />
        <text x="178" y="122" class="dim-text">α</text>
        
        <path d="M 380 135 A 50 50 0 0 0 374.7 112.6" class="angle-arc" />
        <text x="388" y="127" class="dim-text">α</text>

        
        <line x1="220" y1="190" x2="470" y2="65" class="line-blue" />
        <text x="478" y="70" class="point-label" fill="#2563eb" font-weight="700">l₂ ∥ A₂B₂</text>
      </g>

      
      
      <g id="step3Group" opacity="0" style="transition: opacity 0.4s ease;">
        
        <line x1="330" y1="245" x2="410" y2="245" class="angle-ref" />
        <line x1="120" y1="240" x2="200" y2="240" class="angle-ref" />

        <path d="M 170 240 A 50 50 0 0 1 164.7 262.4" class="angle-arc" />
        <text x="178" y="258" class="dim-text">β</text>

        <path d="M 380 245 A 50 50 0 0 1 374.7 267.4" class="angle-arc" />
        <text x="388" y="263" class="dim-text">β</text>

        
        <line x1="210" y1="185" x2="470" y2="315" class="line-blue" />
        <text x="478" y="322" class="point-label" fill="#2563eb" font-weight="700">l₁ ∥ A₁B₁</text>
      </g>
    </svg>
  </div>

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

    const btn1 = document.getElementById('btnStep1');
    const btn2 = document.getElementById('btnStep2');
    const btn3 = document.getElementById('btnStep3');
    const playBtn = document.getElementById('playBtn');

    const s2Group = document.getElementById('step2Group');
    const s3Group = document.getElementById('step3Group');

    function updateVisuals(step) {
      btn1.classList.toggle('active', step === 1);
      btn2.classList.toggle('active', step === 2);
      btn3.classList.toggle('active', step === 3);

      if (step === 1) {
        s2Group.setAttribute('opacity', '0');
        s3Group.setAttribute('opacity', '0');
      } else if (step === 2) {
        s2Group.setAttribute('opacity', '1');
        s3Group.setAttribute('opacity', '0');
      } else if (step === 3) {
        s2Group.setAttribute('opacity', '1');
        s3Group.setAttribute('opacity', '1');
      }
    }

    function setStep(step) {
      currentStep = step;
      updateVisuals(currentStep);
    }

    function nextStep() {
      currentStep = (currentStep % 3) + 1;
      updateVisuals(currentStep);
    }

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

    function pauseAutoPlay() {
      if (timer) clearInterval(timer);
      isPlaying = false;
      playBtn.textContent = '▶';
    }

    function togglePlay() {
      if (isPlaying) {
        pauseAutoPlay();
      } else {
        nextStep();
        startAutoPlay();
      }
    }

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

Constructing and Proving Parallelism Between Lines and Planes

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Auxiliary Edge View Method</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      width: 100%;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #0f172a;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 6px;
      user-select: none;
    }
    .controls {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;
      margin-bottom: 8px;
      width: 100%;
      max-width: 660px;
    }
    .btn {
      background: #ffffff;
      border: 1.5px solid #94a3b8;
      border-radius: 6px;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }
    .btn:hover {
      border-color: #0284c7;
      color: #0284c7;
      background: #f0f9ff;
    }
    .btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
    }
    .svg-container {
      width: 100%;
      max-width: 660px;
      background: transparent;
      margin: 0 auto;
    }
    svg {
      display: block;
      width: 100%;
      height: auto;
      overflow: visible;
    }
    .label {
      font-size: 14px;
      font-family: inherit;
      font-weight: 700;
    }
    .sublabel {
      font-size: 12px;
      font-family: inherit;
      font-weight: 600;
    }
    .math-label {
      font-size: 14px;
      font-style: italic;
      font-weight: 700;
    }
    .trans {
      transition: opacity 0.35s ease;
    }
    @media (max-width: 480px) {
      body { padding: 4px; }
      .btn {
        font-size: 11.5px;
        padding: 5px 8px;
      }
    }
  </style>
</head>
<body>

  <div class="controls" role="tablist" aria-label="Step Navigation">
    <button class="btn active" id="btn-0" onclick="setStep(0)">1. Standard Views</button>
    <button class="btn" id="btn-1" onclick="setStep(1)">2. True-Length Line</button>
    <button class="btn" id="btn-2" onclick="setStep(2)">3. Auxiliary Edge View</button>
  </div>

  <div class="svg-container">
    <svg viewBox="0 0 660 450" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Auxiliary Edge-View Geometry Diagram">
      <defs>
        <marker id="arrow" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#0369a1" />
        </marker>
      </defs>

      
      <line x1="20" y1="225" x2="370" y2="225" stroke="#334155" stroke-width="2" />
      <text x="25" y="217" class="label" fill="#1e293b">H</text>
      <text x="25" y="243" class="label" fill="#1e293b">F</text>
      <text x="45" y="217" class="sublabel" fill="#475569">Top View</text>
      <text x="45" y="243" class="sublabel" fill="#475569">Front View</text>

      
      <g stroke="#94a3b8" stroke-width="1.2" stroke-dasharray="4,3">
        <line x1="120" y1="60" x2="120" y2="290" />
        <line x1="260" y1="90" x2="260" y2="330" />
        <line x1="180" y1="200" x2="180" y2="420" />
        <line x1="70" y1="170" x2="70" y2="390" />
        <line x1="290" y1="130" x2="290" y2="350" />
      </g>

      
      <g id="fold-aux" class="trans" opacity="0.45">
        <line x1="390" y1="30" x2="490" y2="435" stroke="#0369a1" stroke-width="2.5" stroke-dasharray="8,4" />
        <rect x="410" y="44" width="46" height="34" rx="4" fill="#ffffff" fill-opacity="0.85" />
        <text x="416" y="62" class="label" fill="#0369a1">H</text>
        <text x="416" y="75" class="label" fill="#0369a1">1</text>
        <line x1="414" y1="65" x2="430" y2="65" stroke="#0369a1" stroke-width="1.5" />
        <rect x="450" y="405" width="200" height="22" rx="4" fill="#ffffff" fill-opacity="0.85" />
        <text x="454" y="421" class="sublabel" fill="#0369a1" font-weight="700">Auxiliary Plane (H ⊥ 1)</text>
      </g>

      
      
      <polygon points="120,290 260,330 180,420" fill="#3b82f6" fill-opacity="0.18" stroke="#1d4ed8" stroke-width="2.2" />
      
      <line x1="70" y1="390" x2="290" y2="350" stroke="#c2410c" stroke-width="2.5" />
      
      
      <circle cx="120" cy="290" r="4" fill="#1d4ed8" />
      <circle cx="260" cy="330" r="4" fill="#1d4ed8" />
      <circle cx="180" cy="420" r="4" fill="#1d4ed8" />
      <circle cx="70" cy="390" r="3.5" fill="#c2410c" />
      <circle cx="290" cy="350" r="3.5" fill="#c2410c" />

      <text x="100" y="285" class="math-label" fill="#0f172a">A₂</text>
      <text x="270" y="335" class="math-label" fill="#0f172a">B₂</text>
      <text x="185" y="435" class="math-label" fill="#0f172a">C₂</text>
      <text x="48" y="395" class="math-label" fill="#c2410c">l₂</text>

      
      <g id="step1-front" class="trans" opacity="0">
        <line x1="120" y1="290" x2="210" y2="290" stroke="#0f766e" stroke-width="2.2" stroke-dasharray="5,3" />
        <circle cx="210" cy="290" r="3.5" fill="#0f766e" />
        <text x="216" y="286" class="math-label" fill="#0f766e">1₂</text>
        <line x1="210" y1="290" x2="210" y2="132" stroke="#0f766e" stroke-width="1.5" stroke-dasharray="3,3" />
      </g>

      
      
      <polygon points="120,60 260,90 180,200" fill="#3b82f6" fill-opacity="0.18" stroke="#1d4ed8" stroke-width="2.2" />
      
      <line x1="70" y1="170" x2="290" y2="130" stroke="#c2410c" stroke-width="2.5" />

      
      <circle cx="120" cy="60" r="4" fill="#1d4ed8" />
      <circle cx="260" cy="90" r="4" fill="#1d4ed8" />
      <circle cx="180" cy="200" r="4" fill="#1d4ed8" />
      <circle cx="70" cy="170" r="3.5" fill="#c2410c" />
      <circle cx="290" cy="130" r="3.5" fill="#c2410c" />

      <text x="100" y="55" class="math-label" fill="#0f172a">A₁</text>
      <text x="270" y="92" class="math-label" fill="#0f172a">B₁</text>
      <text x="188" y="215" class="math-label" fill="#0f172a">C₁</text>
      <text x="48" y="175" class="math-label" fill="#c2410c">l₁</text>

      
      <g id="step1-top" class="trans" opacity="0">
        <line x1="120" y1="60" x2="210" y2="132" stroke="#0f766e" stroke-width="2.8" />
        <circle cx="210" cy="132" r="3.5" fill="#0f766e" />
        <text x="216" y="132" class="math-label" fill="#0f766e">1₁</text>
        <text x="130" y="90" class="sublabel" fill="#0f766e" font-weight="700">True Length (TL)</text>
        
        <line x1="210" y1="132" x2="260" y2="172" stroke="#0369a1" stroke-width="2.2" marker-end="url(#arrow)" />
        <text x="252" y="196" class="sublabel" fill="#0369a1" font-weight="700">Sight line ∥ TL</text>
      </g>

      
      
      <g id="aux-projections" class="trans" opacity="0" stroke="#64748b" stroke-width="1.2" stroke-dasharray="3,3">
        <line x1="120" y1="60" x2="570" y2="175" />
        <line x1="260" y1="90" x2="530" y2="165" />
        <line x1="180" y1="200" x2="615" y2="187" />
        <line x1="70" y1="170" x2="530" y2="290" />
        <line x1="290" y1="130" x2="630" y2="316" />
      </g>

      
      <g id="aux-edge" class="trans" opacity="0">
        
        <line x1="505" y1="158" x2="640" y2="194" stroke="#1d4ed8" stroke-width="4.5" stroke-linecap="round" />
        <circle cx="530" cy="165" r="4.5" fill="#1d4ed8" />
        <circle cx="570" cy="175" r="4.5" fill="#1d4ed8" />
        <circle cx="615" cy="187" r="4.5" fill="#1d4ed8" />
        
        <text x="502" y="145" class="math-label" fill="#1d4ed8">B₃</text>
        <text x="565" y="156" class="math-label" fill="#1d4ed8">A₃</text>
        <text x="618" y="172" class="math-label" fill="#1d4ed8">C₃</text>
        <text x="625" y="210" class="label" fill="#1d4ed8">α_edge</text>
        <text x="625" y="226" class="sublabel" fill="#1e40af">(Plane ABC)</text>

        
        <line x1="505" y1="284" x2="640" y2="320" stroke="#c2410c" stroke-width="3.5" stroke-linecap="round" />
        <circle cx="530" cy="290" r="4" fill="#c2410c" />
        <circle cx="630" cy="316" r="4" fill="#c2410c" />

        <text x="646" y="324" class="label" fill="#c2410c">l_aux</text>
        
        
        <path d="M 568 170 L 576 172 L 568 178" fill="none" stroke="#1d4ed8" stroke-width="2.2" />
        <path d="M 568 296 L 576 298 L 568 304" fill="none" stroke="#c2410c" stroke-width="2.2" />

        
        <g transform="translate(470, 360)">
          <rect x="0" y="0" width="180" height="56" rx="6" fill="#f0fdf4" stroke="#15803d" stroke-width="1.8" />
          <text x="90" y="23" text-anchor="middle" class="label" fill="#15803d">l_aux ∥ α_edge</text>
          <text x="90" y="43" text-anchor="middle" class="sublabel" fill="#166534" font-weight="700">∴ Line l ∥ Plane ABC</text>
        </g>
      </g>
    </svg>
  </div>

  <script>
    function setStep(step) {
      for (let i = 0; i < 3; i++) {
        const btn = document.getElementById('btn-' + i);
        if (btn) {
          if (i === step) {
            btn.classList.add('active');
          } else {
            btn.classList.remove('active');
          }
        }
      }

      const step1Front = document.getElementById('step1-front');
      const step1Top = document.getElementById('step1-top');
      const foldAux = document.getElementById('fold-aux');
      const auxProj = document.getElementById('aux-projections');
      const auxEdge = document.getElementById('aux-edge');

      if (step === 0) {
        if (step1Front) step1Front.setAttribute('opacity', '0');
        if (step1Top) step1Top.setAttribute('opacity', '0');
        if (foldAux) foldAux.setAttribute('opacity', '0.45');
        if (auxProj) auxProj.setAttribute('opacity', '0');
        if (auxEdge) auxEdge.setAttribute('opacity', '0');
      } else if (step === 1) {
        if (step1Front) step1Front.setAttribute('opacity', '1');
        if (step1Top) step1Top.setAttribute('opacity', '1');
        if (foldAux) foldAux.setAttribute('opacity', '0.85');
        if (auxProj) auxProj.setAttribute('opacity', '0');
        if (auxEdge) auxEdge.setAttribute('opacity', '0');
      } else if (step === 2) {
        if (step1Front) step1Front.setAttribute('opacity', '1');
        if (step1Top) step1Top.setAttribute('opacity', '1');
        if (foldAux) foldAux.setAttribute('opacity', '1');
        if (auxProj) auxProj.setAttribute('opacity', '1');
        if (auxEdge) auxEdge.setAttribute('opacity', '1');
      }
    }
  </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="1:1">
  <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;
      width: 100%;
      height: 100%;
      padding: 12px;
      user-select: none;
    }
    .controls {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
      z-index: 10;
    }
    .btn {
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 20px;
      border: 1px solid #d1d5db;
      background: #f8fafc;
      color: #4b5563;
      cursor: pointer;
      transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    }
    .btn.active {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
    }
    .svg-wrap {
      width: 100%;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 0;
    }
    svg {
      width: 100%;
      height: 100%;
      max-height: 420px;
    }
    .axis { stroke: #94a3b8; stroke-width: 1.5; }
    .proj { stroke: #cbd5e1; stroke-width: 1.5; stroke-dasharray: 4 4; }
    .plane-a { stroke: #2563eb; transition: stroke-width 0.25s, opacity 0.25s; }
    .plane-b { stroke: #059669; transition: stroke-width 0.25s, opacity 0.25s; }
    .label { font-size: 13px; font-weight: 700; dominant-baseline: middle; fill: #1e2945; }
    .sub { font-size: 10px; font-weight: 600; }
    .view-tag { font-size: 12px; font-weight: 700; fill: #64748b; }
    .dimmed { opacity: 0.2; }
    .highlight { stroke-width: 3.5 !important; }
  </style>
</head>
<body>

  <div class="controls">
    <button class="btn active" onclick="setMode('all')">Both Planes</button>
    <button class="btn" onclick="setMode('alpha')">Plane α (K)</button>
    <button class="btn" onclick="setMode('beta')">Plane β (M)</button>
    <button class="btn" onclick="setMode('pairs')">Parallel Pairs</button>
  </div>

  <div class="svg-wrap">
    <svg viewBox="0 0 460 410">
      
      <line x1="30" y1="205" x2="430" y2="205" class="axis" />
      <text x="35" y="197" class="label" fill="#64748b">x</text>
      <text x="390" y="30" class="view-tag">Front (Π₂)</text>
      <text x="390" y="390" class="view-tag">Top (Π₁)</text>

      
      <line x1="140" y1="95" x2="140" y2="315" class="proj" />
      <line x1="320" y1="115" x2="320" y2="335" class="proj" />

      
      
      <g id="front-a">
        
        <line id="line-a2" x1="60" y1="135" x2="220" y2="55" class="plane-a" stroke-width="2.5" />
        <text x="50" y="145" class="label" fill="#2563eb">a<tspan class="sub" dy="4">2</tspan></text>

        
        <line id="line-b2" x1="80" y1="50" x2="200" y2="140" class="plane-a" stroke-width="2.5" />
        <text x="208" y="145" class="label" fill="#2563eb">b<tspan class="sub" dy="4">2</tspan></text>

        
        <circle id="pt-k2" cx="140" cy="95" r="4.5" fill="#2563eb" />
        <text x="146" y="88" class="label" fill="#2563eb">K<tspan class="sub" dy="4">2</tspan></text>
      </g>

      
      <g id="front-b">
        
        <line id="line-c2" x1="240" y1="155" x2="400" y2="75" class="plane-b" stroke-width="2.5" />
        <text x="230" y="165" class="label" fill="#059669">c<tspan class="sub" dy="4">2</tspan></text>

        
        <line id="line-d2" x1="260" y1="70" x2="380" y2="160" class="plane-b" stroke-width="2.5" />
        <text x="388" y="165" class="label" fill="#059669">d<tspan class="sub" dy="4">2</tspan></text>

        
        <circle id="pt-m2" cx="320" cy="115" r="4.5" fill="#059669" />
        <text x="326" y="108" class="label" fill="#059669">M<tspan class="sub" dy="4">2</tspan></text>
      </g>

      
      
      <g id="top-a">
        
        <line id="line-a1" x1="60" y1="267" x2="220" y2="363" class="plane-a" stroke-width="2.5" />
        <text x="50" y="262" class="label" fill="#2563eb">a<tspan class="sub" dy="4">1</tspan></text>

        
        <line id="line-b1" x1="80" y1="357" x2="200" y2="273" class="plane-a" stroke-width="2.5" />
        <text x="208" y="270" class="label" fill="#2563eb">b<tspan class="sub" dy="4">1</tspan></text>

        
        <circle id="pt-k1" cx="140" cy="315" r="4.5" fill="#2563eb" />
        <text x="146" y="328" class="label" fill="#2563eb">K<tspan class="sub" dy="4">1</tspan></text>
      </g>

      
      <g id="top-b">
        
        <line id="line-c1" x1="240" y1="287" x2="400" y2="383" class="plane-b" stroke-width="2.5" />
        <text x="230" y="282" class="label" fill="#059669">c<tspan class="sub" dy="4">1</tspan></text>

        
        <line id="line-d1" x1="260" y1="377" x2="380" y2="293" class="plane-b" stroke-width="2.5" />
        <text x="388" y="290" class="label" fill="#059669">d<tspan class="sub" dy="4">1</tspan></text>

        
        <circle id="pt-m1" cx="320" cy="335" r="4.5" fill="#059669" />
        <text x="326" y="348" class="label" fill="#059669">M<tspan class="sub" dy="4">1</tspan></text>
      </g>
    </svg>
  </div>

  <script>
    function setMode(mode) {
      document.querySelectorAll('.btn').forEach(b => b.classList.remove('active'));
      const activeBtn = Array.from(document.querySelectorAll('.btn')).find(b => 
        (mode === 'all' && b.textContent.includes('Both')) ||
        (mode === 'alpha' && b.textContent.includes('Plane α')) ||
        (mode === 'beta' && b.textContent.includes('Plane β')) ||
        (mode === 'pairs' && b.textContent.includes('Pairs'))
      );
      if (activeBtn) activeBtn.classList.add('active');

      const fa = document.getElementById('front-a');
      const fb = document.getElementById('front-b');
      const ta = document.getElementById('top-a');
      const tb = document.getElementById('top-b');

      const la2 = document.getElementById('line-a2');
      const lc2 = document.getElementById('line-c2');
      const lb2 = document.getElementById('line-b2');
      const ld2 = document.getElementById('line-d2');

      const la1 = document.getElementById('line-a1');
      const lc1 = document.getElementById('line-c1');
      const lb1 = document.getElementById('line-b1');
      const ld1 = document.getElementById('line-d1');

      [fa, fb, ta, tb].forEach(el => el.classList.remove('dimmed'));
      [la2, lc2, lb2, ld2, la1, lc1, lb1, ld1].forEach(l => l.classList.remove('highlight'));

      if (mode === 'alpha') {
        fb.classList.add('dimmed');
        tb.classList.add('dimmed');
      } else if (mode === 'beta') {
        fa.classList.add('dimmed');
        ta.classList.add('dimmed');
      } else if (mode === 'pairs') {
        [la2, lc2, la1, lc1, lb2, ld2, lb1, ld1].forEach(l => l.classList.add('highlight'));
      }
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8fafc;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      min-height: 100vh;
      padding: 8px;
      user-select: none;
    }
    .wrapper {
      width: 100%;
      max-width: 680px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }
    .panels-container {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      gap: 10px;
      width: 100%;
    }
    .panel-svg {
      flex: 1 1 0;
      min-width: 0;
      max-width: 330px;
      width: 100%;
      height: auto;
      display: block;
      transition: max-width 0.35s ease, opacity 0.35s ease;
    }
    .ctrl-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 2px;
    }
    .btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      padding: 6px 14px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    }
    .btn:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }
    .btn.active {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
    }
    .legend {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: 16px;
      font-size: 12px;
      font-weight: 600;
    }
    .legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .legend-color {
      width: 14px;
      height: 4px;
      border-radius: 2px;
    }
  </style>
</head>
<body>

  <div class="wrapper">
    <div class="panels-container" id="panelsContainer">
      
      <svg class="panel-svg" id="panel-3d" viewBox="0 0 320 380">
        
        <text x="16" y="26" font-size="14" font-weight="700" fill="#1e2945">3D Space (Monge)</text>
        
        
        <polygon points="40,44 280,44 280,200 40,200" fill="#f1f5f9" stroke="#94a3b8" stroke-width="1.2"/>
        <text x="48" y="66" font-size="13" font-weight="700" fill="#64748b">V</text>

        
        <line x1="20" y1="200" x2="300" y2="200" stroke="#1e2945" stroke-width="2"/>
        <text x="290" y="195" font-size="13" font-weight="700" fill="#1e2945">x</text>

        
        <polygon id="plane-h-poly" points="40,200 280,200 225,325 10,325" fill="#e2e8f0" fill-opacity="0.6" stroke="#94a3b8" stroke-width="1.2"/>
        <text x="20" y="315" font-size="13" font-weight="700" fill="#64748b">H</text>

        
        <polygon id="plane-alpha-3d" points="130,158 255,95 230,270 105,332" fill="#ffe4e6" fill-opacity="0.75" stroke="#fda4af" stroke-width="1.2"/>
        <text id="label-alpha" x="246" y="112" font-size="14" font-weight="700" fill="#e11d48">α</text>

        
        <g stroke="#94a3b8" stroke-width="1" stroke-dasharray="3,3" opacity="0.85">
          <line x1="145" y1="250" x2="145" y2="178"/>
          <line x1="210" y1="172" x2="210" y2="118"/>
          <line x1="95" y1="205" x2="95" y2="133"/>
          <line x1="160" y1="128" x2="160" y2="74"/>
        </g>

        
        <line x1="145" y1="178" x2="210" y2="118" stroke="#e11d48" stroke-width="2.5" stroke-dasharray="4,2"/>
        <text x="214" y="122" font-size="12" font-weight="700" fill="#e11d48">m₂</text>

        
        <line x1="95" y1="133" x2="160" y2="74" stroke="#2563eb" stroke-width="2.5" stroke-dasharray="4,2"/>
        <text x="164" y="78" font-size="12" font-weight="700" fill="#2563eb">l₂</text>

        
        <g id="proj-h-3d">
          <g stroke="#94a3b8" stroke-width="1" stroke-dasharray="3,3" opacity="0.85">
            <line x1="145" y1="250" x2="115" y2="285"/>
            <line x1="210" y1="172" x2="180" y2="225"/>
            <line x1="95" y1="205" x2="65" y2="240"/>
            <line x1="160" y1="128" x2="130" y2="180"/>
          </g>
          
          <line x1="115" y1="285" x2="180" y2="225" stroke="#e11d48" stroke-width="2.5" stroke-dasharray="4,2"/>
          <text x="183" y="232" font-size="12" font-weight="700" fill="#e11d48">m₁</text>

          
          <line x1="65" y1="240" x2="130" y2="180" stroke="#2563eb" stroke-width="2.5" stroke-dasharray="4,2"/>
          <text x="133" y="187" font-size="12" font-weight="700" fill="#2563eb">l₁</text>
        </g>

        
        
        <line x1="145" y1="250" x2="210" y2="172" stroke="#e11d48" stroke-width="3"/>
        <circle cx="145" cy="250" r="3.5" fill="#e11d48"/>
        <circle cx="210" cy="172" r="3.5" fill="#e11d48"/>
        <text x="214" y="172" font-size="13" font-weight="700" fill="#e11d48">m</text>

        
        <line x1="95" y1="205" x2="160" y2="128" stroke="#2563eb" stroke-width="3"/>
        <circle cx="95" cy="205" r="3.5" fill="#2563eb"/>
        <circle cx="160" cy="128" r="3.5" fill="#2563eb"/>
        <text x="164" y="128" font-size="13" font-weight="700" fill="#2563eb">l</text>
        
        
        <rect x="30" y="342" width="260" height="26" rx="4" fill="#f1f5f9" stroke="#cbd5e1"/>
        <text x="160" y="359" text-anchor="middle" font-size="12" font-weight="700" fill="#1e2945">l ∥ m ⊂ α  ⇒  l ∥ α</text>
      </svg>

      
      <svg class="panel-svg" id="panel-2d" viewBox="0 0 320 380">
        
        <text x="16" y="26" font-size="14" font-weight="700" fill="#1e2945">2D Monge Projection</text>

        
        <rect x="15" y="44" width="290" height="156" fill="#f1f5f9" rx="4"/>
        <rect x="15" y="200" width="290" height="136" fill="#e2e8f0" fill-opacity="0.5" rx="4"/>
        <text x="25" y="66" font-size="11" font-weight="700" fill="#64748b">V (Front view)</text>
        <text x="25" y="324" font-size="11" font-weight="700" fill="#64748b">H (Top view)</text>

        
        <line x1="15" y1="200" x2="305" y2="200" stroke="#1e2945" stroke-width="2"/>
        <text x="295" y="194" font-size="13" font-weight="700" fill="#1e2945">x</text>

        
        <g stroke="#94a3b8" stroke-width="1.2" stroke-dasharray="3,3">
          <line x1="75" y1="130" x2="75" y2="265"/>
          <line x1="150" y1="65" x2="150" y2="212"/>
          <line x1="185" y1="175" x2="185" y2="318"/>
          <line x1="260" y1="110" x2="260" y2="268"/>
        </g>

        
        
        <line x1="75" y1="130" x2="150" y2="65" stroke="#2563eb" stroke-width="2.8"/>
        <circle cx="75" cy="130" r="3.5" fill="#2563eb"/>
        <circle cx="150" cy="65" r="3.5" fill="#2563eb"/>
        <text x="155" y="68" font-size="13" font-weight="700" fill="#2563eb">l₂</text>

        
        <line x1="185" y1="175" x2="260" y2="110" stroke="#e11d48" stroke-width="2.8"/>
        <circle cx="185" cy="175" r="3.5" fill="#e11d48"/>
        <circle cx="260" cy="110" r="3.5" fill="#e11d48"/>
        <text x="265" y="112" font-size="13" font-weight="700" fill="#e11d48">m₂</text>

        
        
        <line x1="75" y1="265" x2="150" y2="212" stroke="#2563eb" stroke-width="2.8"/>
        <circle cx="75" cy="265" r="3.5" fill="#2563eb"/>
        <circle cx="150" cy="212" r="3.5" fill="#2563eb"/>
        <text x="155" y="217" font-size="13" font-weight="700" fill="#2563eb">l₁</text>

        
        <line x1="185" y1="318" x2="260" y2="268" stroke="#e11d48" stroke-width="2.8"/>
        <circle cx="185" cy="318" r="3.5" fill="#e11d48"/>
        <circle cx="260" cy="268" r="3.5" fill="#e11d48"/>
        <text x="265" y="273" font-size="13" font-weight="700" fill="#e11d48">m₁</text>

        
        <rect x="30" y="342" width="260" height="26" rx="4" fill="#f1f5f9" stroke="#cbd5e1"/>
        <text x="160" y="359" text-anchor="middle" font-size="12" font-weight="700" fill="#1e2945">l₁ ∥ m₁  and  l₂ ∥ m₂</text>
      </svg>
    </div>

    
    <div class="legend">
      <div class="legend-item">
        <div class="legend-color" style="background: #2563eb;"></div>
        <span>Line l (l₁, l₂)</span>
      </div>
      <div class="legend-item">
        <div class="legend-color" style="background: #e11d48;"></div>
        <span>Plane α & Line m (m₁, m₂)</span>
      </div>
    </div>

    
    <div class="ctrl-bar">
      <button class="btn active" id="btnBoth" onclick="setMode('both')">Split View</button>
      <button class="btn" id="btn3d" onclick="setMode('3d')">Focus 3D</button>
      <button class="btn" id="btn2d" onclick="setMode('2d')">Focus 2D</button>
    </div>
  </div>

  <script>
    function setMode(mode) {
      const p3d = document.getElementById('panel-3d');
      const p2d = document.getElementById('panel-2d');
      const btnBoth = document.getElementById('btnBoth');
      const btn3d = document.getElementById('btn3d');
      const btn2d = document.getElementById('btn2d');

      btnBoth.classList.remove('active');
      btn3d.classList.remove('active');
      btn2d.classList.remove('active');

      if (mode === 'both') {
        p3d.style.display = 'block';
        p2d.style.display = 'block';
        p3d.style.maxWidth = '330px';
        p2d.style.maxWidth = '330px';
        btnBoth.classList.add('active');
      } else if (mode === '3d') {
        p3d.style.display = 'block';
        p2d.style.display = 'none';
        p3d.style.maxWidth = '420px';
        btn3d.classList.add('active');
      } else if (mode === '2d') {
        p3d.style.display = 'none';
        p2d.style.display = 'block';
        p2d.style.maxWidth = '420px';
        btn2d.classList.add('active');
      }
    }
  </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="1:1">
  <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;
      width: 100%;
      min-height: 100%;
      padding: 12px 16px;
      user-select: none;
    }
    .stepper {
      display: flex;
      gap: 8px;
      margin-bottom: 8px;
      width: 100%;
      max-width: 460px;
    }
    .step-btn {
      flex: 1;
      padding: 6px 4px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid #cbd5e1;
      background: #f8fafc;
      color: #64748b;
      border-radius: 6px;
      cursor: pointer;
      text-align: center;
      transition: all 0.2s ease;
    }
    .step-btn.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
      box-shadow: 0 2px 4px rgba(37,99,235,0.2);
    }
    svg {
      width: 100%;
      max-width: 480px;
      height: auto;
      aspect-ratio: 500 / 430;
    }
    .label {
      font-size: 13px;
      font-family: system-ui, sans-serif;
      font-weight: 600;
      fill: #1e2945;
    }
    .sub {
      font-size: 10px;
      font-weight: 600;
    }
    .proj-line {
      stroke: #94a3b8;
      stroke-width: 1;
      stroke-dasharray: 4, 4;
    }
    .tri {
      fill: rgba(37, 99, 235, 0.07);
      stroke: #2563eb;
      stroke-width: 2;
    }
    .line-m {
      stroke: #16a34a;
      stroke-width: 2.5;
      transition: opacity 0.3s ease;
    }
    .line-l {
      stroke: #d97706;
      stroke-width: 2.5;
      transition: opacity 0.3s ease;
    }
    .pt {
      transition: opacity 0.3s ease;
    }
    .conclusion {
      font-size: 13px;
      font-weight: 700;
      color: #1e2945;
      text-align: center;
      min-height: 20px;
      margin-top: 4px;
    }
  </style>
</head>
<body>

  <div class="stepper">
    <button class="step-btn active" id="s1" onclick="setStep(1)">1. Given</button>
    <button class="step-btn" id="s2" onclick="setStep(2)">2. Draw m ⊂ ABC</button>
    <button class="step-btn" id="s3" onclick="setStep(3)">3. Draw l ∥ m</button>
  </div>

  <svg viewBox="0 0 500 430">
    
    <line x1="20" y1="215" x2="480" y2="215" stroke="#475569" stroke-width="1.5" />
    <text x="485" y="219" class="label" fill="#475569">x</text>
    <text x="24" y="208" font-size="11" font-weight="700" fill="#64748b">V (Front)</text>
    <text x="24" y="232" font-size="11" font-weight="700" fill="#64748b">H (Top)</text>

    
    <g class="proj-line">
      <line x1="110" y1="55" x2="110" y2="395" />
      <line x1="240" y1="185" x2="240" y2="265" />
      <line x1="350" y1="85" x2="350" y2="365" />
      <line x1="400" y1="65" x2="400" y2="275" />
      <line id="proj-1" x1="175" y1="120" x2="175" y2="325" opacity="0" />
      <line id="proj-2" x1="278" y1="81" x2="278" y2="369" opacity="0" />
    </g>

    
    
    <polygon points="110,60 240,180 350,90" class="tri" />
    
    <circle cx="110" cy="60" r="3.5" fill="#2563eb" />
    <text x="96" y="55" class="label">A<tspan class="sub" dy="3">2</tspan></text>
    <circle cx="240" cy="180" r="3.5" fill="#2563eb" />
    <text x="246" y="192" class="label">B<tspan class="sub" dy="3">2</tspan></text>
    <circle cx="350" cy="90" r="3.5" fill="#2563eb" />
    <text x="358" y="90" class="label">C<tspan class="sub" dy="3">2</tspan></text>

    
    <g id="grp-m2" opacity="0" class="pt">
      <line x1="144" y1="132" x2="309" y2="69" class="line-m" />
      <circle cx="175" cy="120" r="3.5" fill="#16a34a" />
      <text x="160" y="138" class="label" fill="#16a34a">1<tspan class="sub" dy="3">2</tspan></text>
      <circle cx="278" cy="81" r="3.5" fill="#16a34a" />
      <text x="272" y="70" class="label" fill="#16a34a">2<tspan class="sub" dy="3">2</tspan></text>
      <text x="316" y="68" class="label" fill="#16a34a">m<tspan class="sub" dy="3">2</tspan></text>
    </g>

    
    <circle cx="400" cy="70" r="3.5" fill="#d97706" />
    <text x="408" y="65" class="label" fill="#d97706">P<tspan class="sub" dy="3">2</tspan></text>
    <g id="grp-l2" opacity="0" class="pt">
      <line x1="320" y1="100" x2="475" y2="41" class="line-l" />
      <text x="478" y="44" class="label" fill="#d97706">l<tspan class="sub" dy="3">2</tspan></text>
    </g>

    
    
    <polygon points="110,390 240,260 350,360" class="tri" />
    
    <circle cx="110" cy="390" r="3.5" fill="#2563eb" />
    <text x="96" y="405" class="label">A<tspan class="sub" dy="3">1</tspan></text>
    <circle cx="240" cy="260" r="3.5" fill="#2563eb" />
    <text x="246" y="255" class="label">B<tspan class="sub" dy="3">1</tspan></text>
    <circle cx="350" cy="360" r="3.5" fill="#2563eb" />
    <text x="358" y="375" class="label">C<tspan class="sub" dy="3">1</tspan></text>

    
    <g id="grp-m1" opacity="0" class="pt">
      <line x1="144" y1="312" x2="309" y2="382" class="line-m" />
      <circle cx="175" cy="325" r="3.5" fill="#16a34a" />
      <text x="160" y="342" class="label" fill="#16a34a">1<tspan class="sub" dy="3">1</tspan></text>
      <circle cx="278" cy="369" r="3.5" fill="#16a34a" />
      <text x="282" y="385" class="label" fill="#16a34a">2<tspan class="sub" dy="3">1</tspan></text>
      <text x="316" y="392" class="label" fill="#16a34a">m<tspan class="sub" dy="3">1</tspan></text>
    </g>

    
    <circle cx="400" cy="270" r="3.5" fill="#d97706" />
    <text x="408" y="265" class="label" fill="#d97706">P<tspan class="sub" dy="3">1</tspan></text>
    <g id="grp-l1" opacity="0" class="pt">
      <line x1="320" y1="236" x2="475" y2="302" class="line-l" />
      <text x="478" y="312" class="label" fill="#d97706">l<tspan class="sub" dy="3">1</tspan></text>
    </g>
  </svg>

  <div class="conclusion" id="msg">Plane ABC and point P</div>

  <script>
    function setStep(s) {
      document.querySelectorAll('.step-btn').forEach((b, i) => {
        b.classList.toggle('active', i + 1 === s);
      });

      const showM = s >= 2;
      const showL = s >= 3;

      document.getElementById('grp-m2').setAttribute('opacity', showM ? '1' : '0');
      document.getElementById('grp-m1').setAttribute('opacity', showM ? '1' : '0');
      document.getElementById('proj-1').setAttribute('opacity', showM ? '1' : '0');
      document.getElementById('proj-2').setAttribute('opacity', showM ? '1' : '0');

      document.getElementById('grp-l2').setAttribute('opacity', showL ? '1' : '0');
      document.getElementById('grp-l1').setAttribute('opacity', showL ? '1' : '0');

      const texts = [
        "Plane ABC and point P",
        "m ⊂ ABC via points 1 and 2",
        "l ∥ m  ⟹  l ∥ Plane(ABC)"
      ];
      document.getElementById('msg').textContent = texts[s - 1];
    }
  </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>Rotation around Vertical Axis - Monge Projection</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #0f172a;
      background: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      padding: 10px 12px;
      user-select: none;
    }

    .toolbar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      max-width: 480px;
      margin-bottom: 8px;
      flex-wrap: wrap;
    }

    .btn {
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #1e293b;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: background-color 0.15s, border-color 0.15s, color 0.15s;
    }
    .btn:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }
    .btn:active {
      background: #e2e8f0;
    }

    .btn-step.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
    }
    .btn-step.active:hover {
      background: #0369a1;
      border-color: #0369a1;
    }

    .slider-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 1;
      min-width: 140px;
      max-width: 200px;
    }

    input[type="range"] {
      flex: 1;
      height: 6px;
      accent-color: #0284c7;
      cursor: pointer;
    }

    .svg-container {
      width: 100%;
      max-width: 500px;
      aspect-ratio: 500 / 430;
      margin: 0 auto;
    }

    svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    text {
      font-family: system-ui, -apple-system, sans-serif;
    }
  </style>
</head>
<body>

  <div class="toolbar">
    <button id="playBtn" class="btn" title="Toggle Auto-Play">▶ Play</button>
    <div class="slider-wrap">
      <input id="rotSlider" type="range" min="0" max="100" value="0" aria-label="Rotation angle slider">
    </div>
    <button id="step0" class="btn btn-step active">Start (A)</button>
    <button id="step1" class="btn btn-step">Rotated (A₁)</button>
  </div>

  <div class="svg-container">
    <svg viewBox="0 0 500 430" aria-label="Monge projection diagram of rotation around vertical axis">
      <defs>
        
        <marker id="arrow" viewBox="0 0 6 6" refX="5" refY="3" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M0,1 L5,3 L0,5 Z" fill="#0284c7" />
        </marker>
      </defs>

      
      
      <rect x="20" y="15" width="460" height="145" fill="#f8fafc" stroke="#e2e8f0" stroke-width="1" rx="6" />
      
      <rect x="20" y="180" width="460" height="235" fill="#f1f5f9" stroke="#e2e8f0" stroke-width="1" opacity="0.8" rx="6" />

      
      <text x="32" y="38" font-size="13" font-weight="700" fill="#334155">Front View (Π₂)</text>
      <text x="32" y="204" font-size="13" font-weight="700" fill="#334155">Top View (Π₁)</text>

      
      <line x1="20" y1="170" x2="480" y2="170" stroke="#0f172a" stroke-width="2" />
      <text x="472" y="164" font-size="14" font-weight="800" fill="#0f172a" text-anchor="end">x</text>

      
      <line x1="260" y1="28" x2="260" y2="170" stroke="#e11d48" stroke-width="1.75" stroke-dasharray="6,4" />
      <text x="266" y="44" font-size="13" font-weight="700" fill="#e11d48">e' (axis)</text>

      
      <line x1="70" y1="90" x2="415" y2="90" stroke="#0284c7" stroke-width="1.5" stroke-dasharray="4,4" opacity="0.6" />
      <text x="422" y="94" font-size="12" font-weight="700" fill="#0284c7">z = const</text>

      
      <line id="frontPath" x1="160" y1="90" x2="160" y2="90" stroke="#0284c7" stroke-width="2" marker-end="url(#arrow)" style="display: none;" />

      
      <line id="projInit" x1="160" y1="90" x2="160" y2="252" stroke="#94a3b8" stroke-width="1.2" stroke-dasharray="3,3" />
      <line id="projCurr" x1="160" y1="90" x2="160" y2="252" stroke="#0284c7" stroke-width="1.5" stroke-dasharray="3,3" style="opacity: 0;" />

      
      <circle cx="260" cy="298" r="110" fill="none" stroke="#cbd5e1" stroke-width="1.2" stroke-dasharray="4,4" />

      
      <path id="rotArc" d="" fill="none" stroke="#0284c7" stroke-width="2.5" stroke-dasharray="5,3" style="display: none;" />

      
      <line x1="260" y1="298" x2="160" y2="252" stroke="#94a3b8" stroke-width="1.2" />
      <text x="206" y="284" font-size="12" font-weight="700" fill="#475569">R</text>

      
      <line id="radiusCurrent" x1="260" y1="298" x2="160" y2="252" stroke="#0284c7" stroke-width="1.5" style="opacity: 0;" />

      
      <circle cx="260" cy="298" r="4.5" fill="#e11d48" />
      <text x="268" y="312" font-size="13" font-weight="700" fill="#e11d48">e</text>

      
      <circle cx="160" cy="90" r="4.5" fill="#475569" />
      <text x="146" y="86" font-size="13" font-weight="700" fill="#334155" text-anchor="end">a'</text>

      
      <circle cx="160" cy="252" r="4.5" fill="#475569" />
      <text x="146" y="257" font-size="13" font-weight="700" fill="#334155" text-anchor="end">a</text>

      
      <g id="pointA1Front" style="opacity: 0; transition: opacity 0.1s ease;">
        <circle cx="160" cy="90" r="5" fill="#0284c7" stroke="#ffffff" stroke-width="1.5" />
        <text id="labelA1Front" x="160" y="74" font-size="13" font-weight="800" fill="#0284c7" text-anchor="middle">a₁'</text>
      </g>

      
      <g id="pointA1Top" style="opacity: 0; transition: opacity 0.1s ease;">
        <circle cx="160" cy="252" r="5" fill="#0284c7" stroke="#ffffff" stroke-width="1.5" />
        <text id="labelA1Top" x="174" y="258" font-size="13" font-weight="800" fill="#0284c7" text-anchor="start">a₁</text>
      </g>
    </svg>
  </div>

  <script>
    const e_x = 260;
    const e_y_top = 298;
    const a0_x = 160;
    const a0_y_top = 252;
    const z_const_y = 90;

    const dx = a0_x - e_x;
    const dy = a0_y_top - e_y_top;
    const R = Math.sqrt(dx * dx + dy * dy);
    const startAngle = Math.atan2(dy, dx); // ~ -155.38 deg
    const maxDeltaAngle = (72 * Math.PI) / 180; // Smooth rotation forward

    const rotSlider = document.getElementById('rotSlider');
    const playBtn = document.getElementById('playBtn');
    const step0Btn = document.getElementById('step0');
    const step1Btn = document.getElementById('step1');

    const projCurr = document.getElementById('projCurr');
    const frontPath = document.getElementById('frontPath');
    const rotArc = document.getElementById('rotArc');
    const radiusCurrent = document.getElementById('radiusCurrent');

    const gA1Front = document.getElementById('pointA1Front');
    const ptA1Front = gA1Front.querySelector('circle');
    const lblA1Front = document.getElementById('labelA1Front');

    const gA1Top = document.getElementById('pointA1Top');
    const ptA1Top = gA1Top.querySelector('circle');
    const lblA1Top = document.getElementById('labelA1Top');

    let isPlaying = false;
    let animProgress = 0;
    let animDirection = 1;
    let animId = null;

    function updatePositions(t) {
      const currentAngle = startAngle + t * maxDeltaAngle;
      const cur_x = e_x + R * Math.cos(currentAngle);
      const cur_y_top = e_y_top + R * Math.sin(currentAngle);

      // 1. Update Front View point a1'
      ptA1Front.setAttribute('cx', cur_x);
      ptA1Front.setAttribute('cy', z_const_y);
      lblA1Front.setAttribute('x', cur_x);
      lblA1Front.setAttribute('y', z_const_y - 14);

      // 2. Update Top View point a1
      ptA1Top.setAttribute('cx', cur_x);
      ptA1Top.setAttribute('cy', cur_y_top);
      lblA1Top.setAttribute('x', cur_x + 12);
      lblA1Top.setAttribute('y', cur_y_top + 4);

      // 3. Visibility and Front View motion trajectory
      if (t > 0.02) {
        gA1Front.style.opacity = '1';
        gA1Top.style.opacity = '1';
        radiusCurrent.style.opacity = '0.7';
        projCurr.style.opacity = '1';

        frontPath.setAttribute('x1', a0_x);
        frontPath.setAttribute('y1', z_const_y);
        frontPath.setAttribute('x2', cur_x);
        frontPath.setAttribute('y2', z_const_y);
        frontPath.style.display = 'inline';

        const d = `M ${a0_x} ${a0_y_top} A ${R} ${R} 0 0 1 ${cur_x} ${cur_y_top}`;
        rotArc.setAttribute('d', d);
        rotArc.style.display = 'inline';
      } else {
        gA1Front.style.opacity = '0';
        gA1Top.style.opacity = '0';
        radiusCurrent.style.opacity = '0';
        projCurr.style.opacity = '0';
        frontPath.style.display = 'none';
        rotArc.style.display = 'none';
      }

      // 4. Update Current Projector & Radius
      projCurr.setAttribute('x1', cur_x);
      projCurr.setAttribute('y1', z_const_y);
      projCurr.setAttribute('x2', cur_x);
      projCurr.setAttribute('y2', cur_y_top);

      radiusCurrent.setAttribute('x2', cur_x);
      radiusCurrent.setAttribute('y2', cur_y_top);

      // 5. Highlight step buttons
      if (t < 0.1) {
        step0Btn.classList.add('active');
        step1Btn.classList.remove('active');
      } else if (t > 0.9) {
        step0Btn.classList.remove('active');
        step1Btn.classList.add('active');
      } else {
        step0Btn.classList.remove('active');
        step1Btn.classList.remove('active');
      }
    }

    function setT(t) {
      animProgress = Math.max(0, Math.min(1, t));
      rotSlider.value = animProgress * 100;
      updatePositions(animProgress);
    }

    rotSlider.addEventListener('input', (e) => {
      stopAutoPlay();
      setT(e.target.value / 100);
    });

    step0Btn.addEventListener('click', () => {
      stopAutoPlay();
      setT(0);
    });

    step1Btn.addEventListener('click', () => {
      stopAutoPlay();
      setT(1);
    });

    function loop() {
      if (!isPlaying) return;
      animProgress += animDirection * 0.008;
      if (animProgress >= 1) {
        animProgress = 1;
        animDirection = -1;
      } else if (animProgress <= 0) {
        animProgress = 0;
        animDirection = 1;
      }
      setT(animProgress);
      animId = requestAnimationFrame(loop);
    }

    function startAutoPlay() {
      isPlaying = true;
      playBtn.textContent = '⏸ Pause';
      animId = requestAnimationFrame(loop);
    }

    function stopAutoPlay() {
      isPlaying = false;
      playBtn.textContent = '▶ Play';
      if (animId) cancelAnimationFrame(animId);
    }

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

    // Initialize state
    setT(0);
  </script>
</body>
</html>

OGM.11.DES.2

Aligned learning resources

Related diagrams