<!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: #f8fafc;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-height: 100%;
    }

    .steps-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      flex: 1;
    }

    @media (max-width: 480px) {
      .steps-grid {
        grid-template-columns: 1fr;
      }
    }

    .step-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      position: relative;
      overflow: hidden;
    }

    .step-card.active-step {
      border-color: #22b7ff;
      box-shadow: 0 4px 14px rgba(34, 183, 255, 0.15);
    }

    .step-badge {
      position: absolute;
      top: 10px;
      left: 10px;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: #22b7ff;
      color: #ffffff;
      font-size: 18px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.3);
    }

    .step-badge.green {
      background: #10b981;
      box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
    }

    .step-title {
      font-size: 15px;
      font-weight: 700;
      text-align: center;
      margin-top: 2px;
      margin-bottom: 8px;
      color: #0f172a;
    }

    .visual-area {
      width: 100%;
      height: 180px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    /* STEP 1 ILLUSTRATION */
    .face-wrap {
      position: relative;
      width: 140px;
      height: 140px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .face-avatar {
      font-size: 90px;
      line-height: 1;
      filter: drop-shadow(0 4px 8px rgba(0,0,0,0.08));
    }

    .lens-by-eye {
      position: absolute;
      top: 20px;
      right: 12px;
      width: 62px;
      height: 62px;
      border: 6px solid #f59e0b;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.8), rgba(34, 183, 255, 0.25));
      box-shadow: 0 4px 10px rgba(245, 158, 11, 0.3), inset 0 0 8px rgba(255,255,255,0.8);
      animation: holdSteady 3s ease-in-out infinite alternate;
    }

    .lens-handle {
      position: absolute;
      width: 10px;
      height: 38px;
      background: linear-gradient(to right, #d97706, #f59e0b);
      bottom: -32px;
      left: 12px;
      border-radius: 5px;
      transform: rotate(-35deg);
      box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    }

    .lens-glint {
      position: absolute;
      top: 6px;
      left: 10px;
      width: 14px;
      height: 7px;
      background: rgba(255,255,255,0.9);
      border-radius: 50%;
      transform: rotate(-30deg);
    }

    .eye-highlight {
      position: absolute;
      top: 36px;
      right: 32px;
      font-size: 24px;
    }

    /* STEP 2 INTERACTIVE AREA */
    .inspect-zone {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .big-lens {
      width: 130px;
      height: 130px;
      border: 8px solid #10b981;
      border-radius: 50%;
      position: relative;
      overflow: hidden;
      background: #f0fdf4;
      box-shadow: 0 6px 16px rgba(16, 185, 129, 0.25), inset 0 0 12px rgba(16, 185, 129, 0.15);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .leaf-view {
      position: absolute;
      transition: filter 0.2s ease, transform 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .leaf-svg {
      width: 110px;
      height: 110px;
      transition: all 0.2s ease;
    }

    .vein {
      transition: stroke-opacity 0.25s ease, stroke-width 0.25s ease;
    }

    .distance-track {
      width: 100%;
      padding: 4px 8px 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .slider-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .slider-label {
      font-size: 12px;
      font-weight: 700;
      color: #64748b;
      min-width: 32px;
    }

    .slider-label.right {
      text-align: right;
      color: #10b981;
    }

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

    .status-pill {
      margin-top: 4px;
      font-size: 13px;
      font-weight: 800;
      padding: 3px 12px;
      border-radius: 20px;
      background: #e2e8f0;
      color: #475569;
      transition: all 0.25s ease;
    }

    .status-pill.clear {
      background: #dcfce7;
      color: #15803d;
      box-shadow: 0 2px 8px rgba(34, 197, 94, 0.25);
    }

    @keyframes holdSteady {
      0% { transform: translate(0, 0); }
      100% { transform: translate(2px, -3px); }
    }
  </style>
</head>
<body>

  <div class="steps-grid">
    
    <div class="step-card active-step">
      <div class="step-badge">1</div>
      <div class="step-title">Lens to eye</div>
      
      <div class="visual-area">
        <div class="face-wrap">
          <div class="face-avatar">🧒</div>
          <div class="eye-highlight">✨</div>
          <div class="lens-by-eye">
            <div class="lens-glint"></div>
            <div class="lens-handle"></div>
          </div>
        </div>
      </div>

      <div class="status-pill">Hold close to eye</div>
    </div>

    
    <div class="step-card active-step">
      <div class="step-badge green">2</div>
      <div class="step-title">Move closer until clear!</div>
      
      <div class="visual-area">
        <div class="inspect-zone">
          <div class="big-lens">
            <div id="leafView" class="leaf-view">
              <svg class="leaf-svg" viewBox="0 0 100 100">
                
                <path d="M50 10 C75 25 85 60 50 90 C15 60 25 25 50 10 Z" fill="#22c55e" stroke="#15803d" stroke-width="2" />
                
                <path d="M50 15 L50 88" stroke="#15803d" stroke-width="3" stroke-linecap="round" />
                
                <path class="vein" d="M50 30 L68 22" stroke="#166534" stroke-width="2" stroke-linecap="round" />
                <path class="vein" d="M50 30 L32 22" stroke="#166534" stroke-width="2" stroke-linecap="round" />
                <path class="vein" d="M50 46 L74 36" stroke="#166534" stroke-width="2" stroke-linecap="round" />
                <path class="vein" d="M50 46 L26 36" stroke="#166534" stroke-width="2" stroke-linecap="round" />
                <path class="vein" d="M50 62 L70 54" stroke="#166534" stroke-width="2" stroke-linecap="round" />
                <path class="vein" d="M50 62 L30 54" stroke="#166534" stroke-width="2" stroke-linecap="round" />
                <path class="vein" d="M50 76 L62 70" stroke="#166534" stroke-width="1.8" stroke-linecap="round" />
                <path class="vein" d="M50 76 L38 70" stroke="#166534" stroke-width="1.8" stroke-linecap="round" />
              </svg>
            </div>
          </div>
        </div>
      </div>

      <div class="distance-track">
        <div class="slider-row">
          <span class="slider-label">Far</span>
          <input type="range" id="focusSlider" min="0" max="100" value="85" aria-label="Distance to lens">
          <span class="slider-label right">Close</span>
        </div>
        <div style="display:flex; justify-content:center;">
          <div id="statusBadge" class="status-pill clear">Clear! ✨</div>
        </div>
      </div>
    </div>
  </div>

  <script>
    const slider = document.getElementById('focusSlider');
    const leafView = document.getElementById('leafView');
    const statusBadge = document.getElementById('statusBadge');
    const veins = document.querySelectorAll('.vein');

    function updateFocus(val) {
      const pct = val / 100;
      
      // Calculate blur from 7px (far) to 0px (close)
      const blurAmount = (1 - pct) * 7.5;
      const scale = 0.65 + (pct * 0.55);
      
      leafView.style.filter = `blur(${blurAmount.toFixed(1)}px)`;
      leafView.style.transform = `scale(${scale.toFixed(2)})`;

      // Vein opacity and sharpness
      veins.forEach(v => {
        v.style.strokeOpacity = Math.max(0.1, pct);
      });

      if (pct >= 0.75) {
        statusBadge.textContent = 'Clear! ✨';
        statusBadge.className = 'status-pill clear';
      } else {
        statusBadge.textContent = 'Blurry...';
        statusBadge.className = 'status-pill';
      }
    }

    slider.addEventListener('input', (e) => {
      updateFocus(e.target.value);
    });

    // Auto-cycle slowly once to demonstrate for younger learners
    let autoStep = 0;
    let dir = 1;
    let userInteracted = false;

    slider.addEventListener('pointerdown', () => { userInteracted = true; });
    slider.addEventListener('touchstart', () => { userInteracted = true; });

    const demoTimer = setInterval(() => {
      if (userInteracted) {
        clearInterval(demoTimer);
        return;
      }
      autoStep += dir * 2;
      if (autoStep >= 100) {
        autoStep = 100;
        dir = -1;
      } else if (autoStep <= 15) {
        autoStep = 15;
        dir = 1;
      }
      slider.value = autoStep;
      updateFocus(autoStep);
    }, 60);

    // Initial render
    updateFocus(slider.value);
  </script>
</body>
</html>

Using Hand Lenses to See Tiny Details

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

    .toolbar {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
      background: #e2e8f0;
      padding: 4px;
      border-radius: 999px;
    }

    .toggle-btn {
      border: none;
      background: transparent;
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      border-radius: 999px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.25s ease;
    }

    .toggle-btn.active {
      background: #ffffff;
      color: #0284c7;
      box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }

    .cards-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 540px;
    }

    .obs-card {
      background: #ffffff;
      border-radius: 16px;
      border: 1px solid #e2e8f0;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }

    .card-title {
      font-size: 15px;
      font-weight: 700;
      color: #334155;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .viewport {
      position: relative;
      width: 100%;
      aspect-ratio: 1;
      max-width: 220px;
      border-radius: 50%;
      background: #f1f5f9;
      border: 4px solid #cbd5e1;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: border-color 0.3s ease;
    }

    .viewport.magnified-mode {
      border-color: #38bdf8;
      box-shadow: inset 0 0 16px rgba(56, 189, 248, 0.25);
    }

    .view-pane {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .view-pane.hidden {
      opacity: 0;
      pointer-events: none;
      transform: scale(0.92);
    }

    svg {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>

  <div class="toolbar">
    <button id="btnRegular" class="toggle-btn active" onclick="setView('regular')">
      <span>👁</span> Regular
    </button>
    <button id="btnMag" class="toggle-btn" onclick="setView('mag')">
      <span>🔍</span> Magnified
    </button>
  </div>

  <div class="cards-grid">
    
    <div class="obs-card">
      <div class="card-title">🍃 Leaf</div>
      <div id="leafPort" class="viewport">
        
        <div id="leafReg" class="view-pane">
          <svg viewBox="0 0 160 160">
            
            <path d="M 30 130 C 30 65, 80 25, 135 25 C 135 80, 95 130, 30 130 Z" fill="#22c55e" stroke="#16a34a" stroke-width="2" />
            <line x1="22" y1="138" x2="35" y2="125" stroke="#15803d" stroke-width="4" stroke-linecap="round" />
          </svg>
        </div>
        
        <div id="leafMag" class="view-pane hidden">
          <svg viewBox="0 0 160 160">
            
            <rect width="160" height="160" fill="#4ade80" />
            
            
            <g fill="#22c55e" opacity="0.45">
              <circle cx="25" cy="30" r="3.5" />
              <circle cx="45" cy="20" r="3" />
              <circle cx="35" cy="48" r="4" />
              <circle cx="55" cy="38" r="3.5" />
              <circle cx="120" cy="35" r="4" />
              <circle cx="140" cy="50" r="3.5" />
              <circle cx="130" cy="68" r="4" />
              <circle cx="28" cy="115" r="4" />
              <circle cx="42" cy="135" r="3.5" />
              <circle cx="118" cy="110" r="4" />
              <circle cx="138" cy="125" r="3.5" />
              <circle cx="125" cy="140" r="3" />
              <circle cx="70" cy="18" r="3" />
              <circle cx="95" cy="142" r="3.5" />
            </g>

            
            <path d="M 15 145 Q 80 80, 145 15" stroke="#fef08a" stroke-width="9" fill="none" stroke-linecap="round" />
            <path d="M 15 145 Q 80 80, 145 15" stroke="#86efac" stroke-width="5" fill="none" stroke-linecap="round" />

            
            <g stroke="#bbf7d0" stroke-width="3" stroke-linecap="round" fill="none">
              <path d="M 50 110 Q 30 75, 10 70" />
              <path d="M 80 80 Q 55 50, 30 40" />
              <path d="M 110 50 Q 85 25, 60 15" />
              <path d="M 80 80 Q 110 105, 135 120" />
              <path d="M 110 50 Q 135 75, 155 90" />
            </g>

            
            <g stroke="#86efac" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.8">
              <path d="M 32 80 Q 20 95, 12 105" />
              <path d="M 42 62 Q 25 58, 15 48" />
              <path d="M 68 45 Q 52 35, 45 22" />
              <path d="M 98 96 Q 118 85, 138 82" />
              <path d="M 125 65 Q 142 55, 152 42" />
              <path d="M 92 112 Q 105 130, 115 145" />
            </g>
          </svg>
        </div>
      </div>
    </div>

    
    <div class="obs-card">
      <div class="card-title">🧂 Sugar</div>
      <div id="sugarPort" class="viewport" style="background:#0f172a; border-color:#334155;">
        
        <div id="sugarReg" class="view-pane">
          <svg viewBox="0 0 160 160">
            
            <circle cx="80" cy="80" r="2.5" fill="#ffffff" />
            <circle cx="74" cy="83" r="1.5" fill="#e2e8f0" />
            <circle cx="86" cy="77" r="1.5" fill="#f8fafc" />
          </svg>
        </div>
        
        <div id="sugarMag" class="view-pane hidden">
          <svg viewBox="0 0 160 160">
            
            
            <g transform="translate(82, 38)">
              <polygon points="0,-18 24,-6 0,6 -24,-6" fill="#e0f2fe" opacity="0.9" />
              <polygon points="-24,-6 0,6 0,34 -24,22" fill="#7dd3fc" opacity="0.9" />
              <polygon points="0,6 24,-6 24,22 0,34" fill="#38bdf8" opacity="0.9" />
              
              <line x1="-24" y1="-6" x2="0" y2="6" stroke="#ffffff" stroke-width="1.5" />
              <line x1="0" y1="6" x2="24" y2="-6" stroke="#ffffff" stroke-width="1.5" />
            </g>

            
            <g transform="translate(48, 92)">
              <polygon points="0,-22 28,-8 0,6 -28,-8" fill="#f0f9ff" />
              <polygon points="-28,-8 0,6 0,38 -28,24" fill="#bae6fd" />
              <polygon points="0,6 28,-8 28,24 0,38" fill="#7dd3fc" />
              
              <polygon points="-10,-10 0,-5 5,-12" fill="#ffffff" />
              <line x1="-28" y1="-8" x2="0" y2="6" stroke="#ffffff" stroke-width="1.5" />
              <line x1="0" y1="6" x2="0" y2="38" stroke="#ffffff" stroke-width="1.5" />
            </g>

            
            <g transform="translate(104, 98)">
              <polygon points="0,-28 34,-10 0,8 -34,-10" fill="#ffffff" />
              <polygon points="-34,-10 0,8 0,44 -34,26" fill="#bae6fd" />
              <polygon points="0,8 34,-10 34,26 0,44" fill="#38bdf8" />
              
              <polygon points="-12,-12 2,-7 6,-16" fill="#ffffff" opacity="0.9" />
              <line x1="-34" y1="-10" x2="0" y2="8" stroke="#ffffff" stroke-width="2" />
              <line x1="0" y1="8" x2="34" y2="-10" stroke="#ffffff" stroke-width="2" />
              <line x1="0" y1="8" x2="0" y2="44" stroke="#ffffff" stroke-width="1.5" />
            </g>
          </svg>
        </div>
      </div>
    </div>
  </div>

  <script>
    function setView(mode) {
      const isMag = (mode === 'mag');
      
      document.getElementById('btnRegular').classList.toggle('active', !isMag);
      document.getElementById('btnMag').classList.toggle('active', isMag);
      
      document.getElementById('leafPort').classList.toggle('magnified-mode', isMag);
      document.getElementById('leafReg').classList.toggle('hidden', isMag);
      document.getElementById('leafMag').classList.toggle('hidden', !isMag);
      
      document.getElementById('sugarPort').classList.toggle('magnified-mode', isMag);
      document.getElementById('sugarReg').classList.toggle('hidden', isMag);
      document.getElementById('sugarMag').classList.toggle('hidden', !isMag);
    }
  </script>
</body>
</html>

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

    .tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
      width: 100%;
      max-width: 420px;
    }

    .tab-btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 8px 12px;
      font-size: 14px;
      font-weight: 700;
      border: 2px solid #e2e8f0;
      border-radius: 999px;
      background: #f8fafc;
      color: #64748b;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .tab-btn.active {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.25);
    }

    .scene-container {
      width: 100%;
      max-width: 480px;
      position: relative;
      height: 280px;
    }

    .view-panel {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: space-around;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    .view-panel.active {
      opacity: 1;
      pointer-events: auto;
    }

    .sub-view {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }

    .label {
      font-size: 13px;
      font-weight: 700;
      color: #475569;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    svg {
      display: block;
      overflow: visible;
    }
  </style>
</head>
<body>

  <div class="tabs">
    <button class="tab-btn active" id="btnWater" onclick="showView('water')">
      <span>💧</span> Water Droplet
    </button>
    <button class="tab-btn" id="btnSoap" onclick="showView('soap')">
      <span>🫧</span> Soap Foam
    </button>
  </div>

  <div class="scene-container">
    
    <div class="view-panel active" id="panelWater">
      
      <div class="sub-view">
        <span class="label">Naked Eye</span>
        <svg width="100" height="100" viewBox="0 0 100 100">
          <circle cx="50" cy="50" r="46" fill="#f8fafc" stroke="#e2e8f0" stroke-width="2"/>
          
          <rect x="20" y="65" width="60" height="8" rx="2" fill="#fed7aa"/>
          
          <ellipse cx="50" cy="64" rx="7" ry="4" fill="#38bdf8"/>
        </svg>
      </div>

      
      <div class="sub-view">
        <span class="label">Under Lens</span>
        <svg width="180" height="180" viewBox="0 0 180 180">
          <defs>
            
            <radialGradient id="waterGrad" cx="40%" cy="35%" r="65%">
              <stop offset="0%" stop-color="#bae6fd"/>
              <stop offset="50%" stop-color="#38bdf8"/>
              <stop offset="90%" stop-color="#0284c7"/>
              <stop offset="100%" stop-color="#0369a1"/>
            </radialGradient>
            
            <linearGradient id="rimGrad" x1="0%" y1="0%" x2="100%" y2="100%">
              <stop offset="0%" stop-color="#fbbf24"/>
              <stop offset="100%" stop-color="#d97706"/>
            </linearGradient>
          </defs>

          
          <path d="M142 142 L172 172" stroke="#b45309" stroke-width="12" stroke-linecap="round"/>

          
          <circle cx="85" cy="85" r="75" fill="#f0f9ff" stroke="url(#rimGrad)" stroke-width="8"/>
          <circle cx="85" cy="85" r="71" fill="none" stroke="#ffffff" stroke-width="2"/>

          
          <rect x="25" y="118" width="120" height="24" rx="4" fill="#fed7aa" stroke="#fbd38d" stroke-width="2"/>
          <line x1="25" y1="124" x2="145" y2="124" stroke="#fcd34d" stroke-width="1" stroke-dasharray="4 4"/>

          
          <ellipse cx="85" cy="120" rx="42" ry="7" fill="rgba(3,105,161,0.25)"/>

          
          <path d="M48 120 C46 72, 124 72, 122 120 Z" fill="url(#waterGrad)"/>

          
          <g transform="translate(64, 82) rotate(-8)">
            <rect x="0" y="0" width="10" height="9" rx="1.5" fill="#ffffff" opacity="0.95"/>
            <rect x="13" y="0" width="10" height="9" rx="1.5" fill="#ffffff" opacity="0.95"/>
            <rect x="0" y="12" width="10" height="9" rx="1.5" fill="#ffffff" opacity="0.95"/>
            <rect x="13" y="12" width="10" height="9" rx="1.5" fill="#ffffff" opacity="0.95"/>
          </g>
          
          
          <ellipse cx="85" cy="116" rx="24" ry="3" fill="#ffffff" opacity="0.4"/>
        </svg>
      </div>
    </div>

    
    <div class="view-panel" id="panelSoap">
      
      <div class="sub-view">
        <span class="label">Naked Eye</span>
        <svg width="100" height="100" viewBox="0 0 100 100">
          <circle cx="50" cy="50" r="46" fill="#f8fafc" stroke="#e2e8f0" stroke-width="2"/>
          
          <path d="M35 62 C28 62 25 54 30 48 C27 42 34 36 40 38 C45 32 55 32 60 38 C66 36 73 42 70 48 C75 54 72 62 65 62 Z" fill="#e2e8f0"/>
          <path d="M37 60 C32 60 28 53 32 48 C30 43 36 38 41 40 C46 35 54 35 59 40 C64 38 70 43 68 48 C72 53 69 60 63 60 Z" fill="#ffffff"/>
        </svg>
      </div>

      
      <div class="sub-view">
        <span class="label">Under Lens</span>
        <svg width="180" height="180" viewBox="0 0 180 180">
          <defs>
            <linearGradient id="rainbow1" x1="0%" y1="0%" x2="100%" y2="100%">
              <stop offset="0%" stop-color="#f472b6" stop-opacity="0.8"/>
              <stop offset="50%" stop-color="#38bdf8" stop-opacity="0.6"/>
              <stop offset="100%" stop-color="#4ade80" stop-opacity="0.8"/>
            </linearGradient>
            <linearGradient id="rainbow2" x1="100%" y1="0%" x2="0%" y2="100%">
              <stop offset="0%" stop-color="#fbbf24" stop-opacity="0.8"/>
              <stop offset="50%" stop-color="#ec4899" stop-opacity="0.6"/>
              <stop offset="100%" stop-color="#818cf8" stop-opacity="0.8"/>
            </linearGradient>
          </defs>

          
          <path d="M142 142 L172 172" stroke="#b45309" stroke-width="12" stroke-linecap="round"/>

          
          <circle cx="85" cy="85" r="75" fill="#f0f9ff" stroke="url(#rimGrad)" stroke-width="8"/>
          <circle cx="85" cy="85" r="71" fill="none" stroke="#ffffff" stroke-width="2"/>

          
          
          <circle cx="62" cy="65" r="16" fill="none" stroke="url(#rainbow1)" stroke-width="2.5" opacity="0.7"/>
          <circle cx="108" cy="65" r="15" fill="none" stroke="url(#rainbow2)" stroke-width="2.5" opacity="0.7"/>
          <circle cx="60" cy="105" r="17" fill="none" stroke="url(#rainbow2)" stroke-width="2.5" opacity="0.7"/>
          <circle cx="110" cy="105" r="16" fill="none" stroke="url(#rainbow1)" stroke-width="2.5" opacity="0.7"/>

          
          
          <circle cx="70" cy="85" r="22" fill="rgba(255,255,255,0.4)" stroke="url(#rainbow1)" stroke-width="3"/>
          <ellipse cx="62" cy="74" rx="6" ry="3" fill="#ffffff" opacity="0.9" transform="rotate(-30 62 74)"/>
          <path d="M62 98 A14 14 0 0 0 78 102" fill="none" stroke="#f472b6" stroke-width="2" stroke-linecap="round"/>

          
          <circle cx="100" cy="85" r="20" fill="rgba(255,255,255,0.4)" stroke="url(#rainbow2)" stroke-width="3"/>
          <ellipse cx="94" cy="74" rx="5" ry="2.5" fill="#ffffff" opacity="0.9" transform="rotate(-30 94 74)"/>
          <path d="M94 97 A12 12 0 0 0 108 100" fill="none" stroke="#38bdf8" stroke-width="2" stroke-linecap="round"/>

          
          <circle cx="85" cy="58" r="18" fill="rgba(255,255,255,0.35)" stroke="url(#rainbow2)" stroke-width="2.5"/>
          <ellipse cx="80" cy="48" rx="4" ry="2" fill="#ffffff" opacity="0.9" transform="rotate(-30 80 48)"/>

          
          <circle cx="85" cy="112" r="19" fill="rgba(255,255,255,0.35)" stroke="url(#rainbow1)" stroke-width="2.5"/>
          <ellipse cx="79" cy="102" rx="4" ry="2" fill="#ffffff" opacity="0.9" transform="rotate(-30 79 102)"/>

          
          <circle cx="42" cy="85" r="9" fill="none" stroke="url(#rainbow1)" stroke-width="2"/>
          <circle cx="128" cy="85" r="9" fill="none" stroke="url(#rainbow2)" stroke-width="2"/>
          <circle cx="85" cy="35" r="8" fill="none" stroke="url(#rainbow1)" stroke-width="2"/>
          <circle cx="85" cy="135" r="8" fill="none" stroke="url(#rainbow2)" stroke-width="2"/>
        </svg>
      </div>
    </div>
  </div>

  <script>
    function showView(type) {
      const isWater = type === 'water';
      document.getElementById('btnWater').classList.toggle('active', isWater);
      document.getElementById('btnSoap').classList.toggle('active', !isWater);
      document.getElementById('panelWater').classList.toggle('active', isWater);
      document.getElementById('panelSoap').classList.toggle('active', !isWater);
    }
  </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>Using a Hand Lens</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #1e293b;
      padding: 12px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }
    .container {
      width: 100%;
      max-width: 620px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
    }
    .grid {
      display: grid;
      grid-template-columns: 1.1fr 0.8fr 1.2fr;
      gap: 10px;
      width: 100%;
      align-items: stretch;
    }
    @media (max-width: 480px) {
      .grid {
        grid-template-columns: 1fr;
        gap: 12px;
      }
    }
    .panel {
      background: #f8fafc;
      border-radius: 14px;
      padding: 12px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      text-align: center;
      position: relative;
    }
    .panel-title {
      font-size: 14px;
      font-weight: 700;
      color: #334155;
      margin-bottom: 4px;
      letter-spacing: -0.01em;
    }
    .label-tag {
      display: inline-block;
      background: #e0f2fe;
      color: #0369a1;
      font-size: 12px;
      font-weight: 750;
      padding: 3px 10px;
      border-radius: 12px;
      margin-top: 4px;
    }

    /* Hand lens diagram */
    .lens-svg {
      width: 100%;
      max-width: 165px;
      height: 145px;
      overflow: visible;
    }

    /* Actual size panel */
    .actual-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 140px;
      background: #ffffff;
      border-radius: 10px;
      width: 100%;
      border: 1.5px dashed #cbd5e1;
    }
    .tiny-bug {
      width: 12px;
      height: 12px;
      background: #ef4444;
      border-radius: 50%;
      border: 1.5px solid #0f172a;
      position: relative;
    }
    .tiny-bug::before {
      content: '';
      position: absolute;
      top: -3px;
      left: 3px;
      width: 4px;
      height: 4px;
      background: #0f172a;
      border-radius: 50%;
    }

    /* Magnified view */
    .mag-circle {
      width: 135px;
      height: 135px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 35%, #ffffff 0%, #f0f9ff 75%, #e0f2fe 100%);
      border: 4px solid #38bdf8;
      box-shadow: 0 4px 14px rgba(56, 189, 248, 0.2);
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: border-color 0.25s ease, box-shadow 0.25s ease;
    }
    .big-bug-svg {
      width: 105px;
      height: 105px;
    }
    .legend {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      margin-top: 6px;
    }
    .legend-item {
      display: inline-flex;
      align-items: center;
      gap: 3px;
    }
    .highlight-btn {
      background: #0284c7;
      color: #ffffff;
      border: none;
      border-radius: 20px;
      padding: 8px 18px;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25);
      transition: background-color 0.2s ease, opacity 0.2s ease;
    }
    .highlight-btn:hover {
      background: #0369a1;
    }
    .highlight-btn:active {
      opacity: 0.9;
    }
  </style>
</head>
<body>

  <div class="container">
    <div class="grid">
      
      <div class="panel">
        <span class="panel-title">Hand Lens</span>
        <svg class="lens-svg" viewBox="0 0 170 150">
          
          <text x="65" y="15" text-anchor="middle" font-size="12" font-weight="700" fill="#0369a1">Curved Lens</text>
          <line x1="65" y1="20" x2="65" y2="34" stroke="#0284c7" stroke-width="1.5" stroke-dasharray="2 2" />

          
          <circle cx="65" cy="66" r="30" fill="#e0f2fe" stroke="#38bdf8" stroke-width="5" opacity="0.95" />
          <ellipse cx="55" cy="56" rx="11" ry="5" fill="#ffffff" opacity="0.75" transform="rotate(-30 55 56)" />
          
          
          <rect x="60" y="96" width="10" height="46" rx="5" fill="#fb923c" stroke="#ea580c" stroke-width="1.5" />
          <circle cx="65" cy="134" r="2.5" fill="#ffffff" />
          
          
          <line x1="72" y1="120" x2="106" y2="120" stroke="#c2410c" stroke-width="1.5" stroke-dasharray="2 2" />
          <text x="110" y="124" text-anchor="start" font-size="12" font-weight="700" fill="#c2410c">Handle</text>
        </svg>
        <span class="label-tag">Magnifier Tool</span>
      </div>

      
      <div class="panel">
        <span class="panel-title">Actual Size</span>
        <div class="actual-box">
          <div class="tiny-bug" id="tinyBug" title="Actual size ladybug"></div>
          <div style="font-size: 11px; color: #64748b; margin-top: 10px; font-weight: 600;">Tiny Ladybug</div>
        </div>
        <span class="label-tag" style="background:#f1f5f9; color:#475569;">1× View</span>
      </div>

      
      <div class="panel">
        <span class="panel-title">Magnified View</span>
        <div class="mag-circle" id="magLens">
          <svg class="big-bug-svg" viewBox="0 0 100 100">
            
            <g stroke="#0f172a" stroke-width="2.5" stroke-linecap="round">
              
              <path d="M 30 40 L 12 30" />
              <path d="M 28 52 L 8 52" />
              <path d="M 32 64 L 14 74" />
              
              <path d="M 70 40 L 88 30" />
              <path d="M 72 52 L 92 52" />
              <path d="M 68 64 L 86 74" />
            </g>

            
            <g stroke="#64748b" stroke-width="1.2" stroke-linecap="round" id="hairs">
              <line x1="16" y1="32" x2="14" y2="27" />
              <line x1="22" y1="36" x2="20" y2="31" />
              <line x1="12" y1="52" x2="12" y2="46" />
              <line x1="18" y1="52" x2="18" y2="46" />
              <line x1="18" y1="72" x2="16" y2="77" />
              <line x1="84" y1="32" x2="86" y2="27" />
              <line x1="78" y1="36" x2="80" y2="31" />
              <line x1="88" y1="52" x2="88" y2="46" />
              <line x1="82" y1="52" x2="82" y2="46" />
              <line x1="82" y1="72" x2="84" y2="77" />
            </g>

            
            <circle cx="50" cy="28" r="12" fill="#0f172a" />
            <path d="M 46 20 Q 42 12 36 14" fill="none" stroke="#0f172a" stroke-width="1.5" stroke-linecap="round" />
            <path d="M 54 20 Q 58 12 64 14" fill="none" stroke="#0f172a" stroke-width="1.5" stroke-linecap="round" />
            <circle cx="44" cy="25" r="2.5" fill="#ffffff" />
            <circle cx="56" cy="25" r="2.5" fill="#ffffff" />

            
            <ellipse cx="50" cy="56" rx="26" ry="26" fill="#ef4444" stroke="#0f172a" stroke-width="2" />
            <line x1="50" y1="30" x2="50" y2="82" stroke="#0f172a" stroke-width="2" />

            
            <g fill="#0f172a" id="spots">
              <circle cx="38" cy="46" r="4.5" />
              <circle cx="62" cy="46" r="4.5" />
              <circle cx="34" cy="62" r="4" />
              <circle cx="66" cy="62" r="4" />
              <circle cx="48" cy="72" r="3.5" />
            </g>
          </svg>
        </div>
        <div class="legend">
          <span class="legend-item"><span id="spotDot" style="color:#ef4444; font-size:14px;">●</span> Spots</span>
          <span class="legend-item"><span id="hairLine" style="color:#64748b; font-weight:bold;">—</span> Leg Hairs</span>
        </div>
      </div>
    </div>

    <button class="highlight-btn" id="toggleDetailsBtn" onclick="toggleDetails()">✦ Highlight Hidden Details</button>
  </div>

  <script>
    let highlighted = false;
    function toggleDetails() {
      highlighted = !highlighted;
      const spots = document.getElementById('spots');
      const hairs = document.getElementById('hairs');
      const lens = document.getElementById('magLens');
      const btn = document.getElementById('toggleDetailsBtn');
      const spotDot = document.getElementById('spotDot');
      const hairLine = document.getElementById('hairLine');

      if (highlighted) {
        lens.style.borderColor = '#f59e0b';
        lens.style.boxShadow = '0 0 16px rgba(245, 158, 11, 0.45)';
        spots.setAttribute('fill', '#0284c7');
        hairs.setAttribute('stroke', '#d97706');
        hairs.setAttribute('stroke-width', '2.2');
        spotDot.style.color = '#0284c7';
        hairLine.style.color = '#d97706';
        btn.textContent = '✓ Details Highlighted!';
      } else {
        lens.style.borderColor = '#38bdf8';
        lens.style.boxShadow = '0 4px 14px rgba(56, 189, 248, 0.2)';
        spots.setAttribute('fill', '#0f172a');
        hairs.setAttribute('stroke', '#64748b');
        hairs.setAttribute('stroke-width', '1.2');
        spotDot.style.color = '#ef4444';
        hairLine.style.color = '#64748b';
        btn.textContent = '✦ Highlight Hidden Details';
      }
    }
  </script>
</body>
</html>

OGS.1.SEP.3

Aligned learning resources

Related diagrams