<!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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 10px 8px;
      width: 100%;
      user-select: none;
    }

    /* Water Potential Gradient Bar */
    .gradient-bar {
      width: 100%;
      max-width: 600px;
      height: 28px;
      border-radius: 14px;
      background: linear-gradient(90deg, #0284c7 0%, #38bdf8 45%, #a855f7 70%, #6b21a8 100%);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 14px;
      color: #ffffff;
      font-size: 13px;
      font-weight: 700;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      margin-bottom: 8px;
    }
    .gradient-arrow {
      font-size: 14px;
      letter-spacing: 2px;
      opacity: 0.9;
    }

    /* Canvas Container */
    .sim-wrap {
      position: relative;
      width: 100%;
      max-width: 600px;
      height: 280px;
      border-radius: 12px;
      overflow: hidden;
      border: 2px solid #e2e8f0;
      background: #fff;
    }
    canvas {
      display: block;
      width: 100%;
      height: 100%;
    }

    /* Zone Overlay Headers */
    .zone-labels {
      position: absolute;
      top: 8px;
      left: 0;
      right: 0;
      display: flex;
      justify-content: space-between;
      padding: 0 16px;
      pointer-events: none;
    }
    .zone-tag {
      background: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(4px);
      padding: 4px 10px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 700;
      box-shadow: 0 1px 4px rgba(0,0,0,0.12);
      border: 1px solid rgba(0,0,0,0.06);
    }
    .zone-left { color: #0284c7; }
    .zone-right { color: #6b21a8; }

    /* Net Movement Pulse Overlay */
    .flow-badge {
      position: absolute;
      bottom: 8px;
      left: 50%;
      transform: translateX(-50%);
      background: #0284c7;
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      padding: 4px 12px;
      border-radius: 12px;
      letter-spacing: 0.5px;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.35);
      animation: pulseFlow 2s infinite ease-in-out;
      pointer-events: none;
      white-space: nowrap;
    }
    @keyframes pulseFlow {
      0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.95; }
      50% { transform: translateX(-50%) scale(1.05); opacity: 1; }
    }

    /* Legend & Interactive Controls */
    .footer-bar {
      width: 100%;
      max-width: 600px;
      margin-top: 8px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 8px;
    }
    .legend {
      display: flex;
      gap: 12px;
      align-items: center;
      font-size: 12px;
      font-weight: 600;
    }
    .legend-item {
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .dot-water {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #0284c7;
    }
    .dot-solute {
      width: 13px;
      height: 13px;
      border-radius: 3px;
      background: #8b5cf6;
      border: 1px solid #6b21a8;
    }
    .dot-pore {
      width: 4px;
      height: 12px;
      background: #10b981;
      border-radius: 2px;
    }
    .btn-toggle {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #334155;
      font-size: 12px;
      font-weight: 600;
      padding: 5px 12px;
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .btn-toggle:active {
      background: #e2e8f0;
    }
  </style>
</head>
<body>

  
  <div class="gradient-bar">
    <span>High &Psi; (Soil)</span>
    <span class="gradient-arrow">&rarr; &rarr; &rarr;</span>
    <span>Low &Psi; (Cell Sap)</span>
  </div>

  
  <div class="sim-wrap" id="simWrap">
    <canvas id="simCanvas"></canvas>
    
    <div class="zone-labels">
      <span class="zone-tag zone-left">Dilute Soil Solution</span>
      <span class="zone-tag zone-right">Root Hair Cell Sap</span>
    </div>

    <div class="flow-badge">Net Osmosis &rarr;</div>
  </div>

  
  <div class="footer-bar">
    <div class="legend">
      <div class="legend-item"><span class="dot-water"></span> Water (H&#8322;O)</div>
      <div class="legend-item"><span class="dot-solute"></span> Solute (Sugar/Ion)</div>
      <div class="legend-item"><span class="dot-pore"></span> Pore</div>
    </div>
    <button class="btn-toggle" id="resetBtn"><span>&#x21bb;</span> Reset Particles</button>
  </div>

  <script>
    const canvas = document.getElementById('simCanvas');
    const ctx = canvas.getContext('2d');
    const wrap = document.getElementById('simWrap');

    let width, height;
    let particles = [];
    let isRunning = true;

    // Membrane configuration
    const membraneWidth = 24;
    const poreHeight = 22; // Small enough to block solutes (r=9), big enough for water (r=4)
    const numPores = 5;

    function resize() {
      const rect = wrap.getBoundingClientRect();
      width = rect.width;
      height = rect.height;
      canvas.width = width * window.devicePixelRatio;
      canvas.height = height * window.devicePixelRatio;
      ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
    }

    class Particle {
      constructor(type, x, y) {
        this.type = type; // 'water' or 'solute'
        this.r = type === 'water' ? 4.5 : 9;
        this.x = x;
        this.y = y;
        const speed = type === 'water' ? 1.4 : 0.6;
        const angle = Math.random() * Math.PI * 2;
        this.vx = Math.cos(angle) * speed;
        this.vy = Math.sin(angle) * speed;
      }

      update(pores, memX) {
        this.x += this.vx;
        this.y += this.vy;

        // Top and bottom bounce
        if (this.y - this.r < 0) { this.y = this.r; this.vy *= -1; }
        if (this.y + this.r > height) { this.y = height - this.r; this.vy *= -1; }

        // Left and right boundary bounce
        if (this.x - this.r < 0) { this.x = this.r; this.vx *= -1; }
        if (this.x + this.r > width) { this.x = width - this.r; this.vx *= -1; }

        // Membrane interaction
        const memLeft = memX - membraneWidth / 2;
        const memRight = memX + membraneWidth / 2;

        if (this.x + this.r > memLeft && this.x - this.r < memRight) {
          if (this.type === 'solute') {
            // Solutes are too large: always bounce off membrane walls
            if (this.vx > 0 && this.x < memX) {
              this.x = memLeft - this.r;
              this.vx *= -1;
            } else if (this.vx < 0 && this.x > memX) {
              this.x = memRight + this.r;
              this.vx *= -1;
            }
          } else {
            // Water molecule: check if aligned with a pore channel
            let insidePore = false;
            for (let p of pores) {
              if (this.y > p.top && this.y < p.bottom) {
                insidePore = true;
                break;
              }
            }
            if (!insidePore) {
              // Hit membrane lipid block
              if (this.vx > 0 && this.x < memX) {
                this.x = memLeft - this.r;
                this.vx *= -1;
              } else if (this.vx < 0 && this.x > memX) {
                this.x = memRight + this.r;
                this.vx *= -1;
              }
            }
          }
        }
      }

      draw(ctx) {
        if (this.type === 'water') {
          ctx.beginPath();
          ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
          ctx.fillStyle = '#0284c7';
          ctx.fill();
          ctx.strokeStyle = '#bae6fd';
          ctx.lineWidth = 1;
          ctx.stroke();
        } else {
          // Solute (Hexagon-like round token)
          ctx.beginPath();
          ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
          ctx.fillStyle = '#8b5cf6';
          ctx.fill();
          ctx.strokeStyle = '#6b21a8';
          ctx.lineWidth = 2;
          ctx.stroke();
          // Inner core dot
          ctx.beginPath();
          ctx.arc(this.x, this.y, 2.5, 0, Math.PI * 2);
          ctx.fillStyle = '#ffffff';
          ctx.fill();
        }
      }
    }

    function initParticles() {
      particles = [];
      const memX = width / 2;

      // Left Zone (Soil): High water (32), Low solute (2)
      for (let i = 0; i < 32; i++) {
        particles.push(new Particle('water', Math.random() * (memX - 35) + 15, Math.random() * (height - 30) + 15));
      }
      for (let i = 0; i < 2; i++) {
        particles.push(new Particle('solute', Math.random() * (memX - 45) + 20, Math.random() * (height - 40) + 20));
      }

      // Right Zone (Cell interior): Low free water (8), High solute (14)
      for (let i = 0; i < 8; i++) {
        particles.push(new Particle('water', Math.random() * (width - memX - 40) + memX + 25, Math.random() * (height - 30) + 15));
      }
      for (let i = 0; i < 14; i++) {
        particles.push(new Particle('solute', Math.random() * (width - memX - 45) + memX + 25, Math.random() * (height - 40) + 20));
      }
    }

    function getPores() {
      const pores = [];
      const spacing = height / (numPores + 1);
      for (let i = 1; i <= numPores; i++) {
        const centerY = spacing * i;
        pores.push({
          top: centerY - poreHeight / 2,
          bottom: centerY + poreHeight / 2,
          center: centerY
        });
      }
      return pores;
    }

    function drawScene() {
      ctx.clearRect(0, 0, width, height);

      const memX = width / 2;
      const memLeft = memX - membraneWidth / 2;
      const memRight = memX + membraneWidth / 2;

      // Background tints
      ctx.fillStyle = '#f0f9ff'; // Soil dilute tint
      ctx.fillRect(0, 0, memLeft, height);

      ctx.fillStyle = '#faf5ff'; // Cell sap concentrated tint
      ctx.fillRect(memRight, 0, width - memRight, height);

      const pores = getPores();

      // Draw Membrane Lipid Sections
      let currentY = 0;
      ctx.fillStyle = '#10b981';
      ctx.strokeStyle = '#059669';
      ctx.lineWidth = 1;

      for (let p of pores) {
        if (p.top > currentY) {
          ctx.fillRect(memLeft, currentY, membraneWidth, p.top - currentY);
          ctx.strokeRect(memLeft, currentY, membraneWidth, p.top - currentY);
        }
        // Pore channel background (open pathway)
        ctx.fillStyle = '#e2e8f0';
        ctx.fillRect(memLeft, p.top, membraneWidth, poreHeight);
        ctx.fillStyle = '#10b981';
        currentY = p.bottom;
      }
      if (currentY < height) {
        ctx.fillRect(memLeft, currentY, membraneWidth, height - currentY);
        ctx.strokeRect(memLeft, currentY, membraneWidth, height - currentY);
      }

      // Update and draw particles
      for (let p of particles) {
        p.update(pores, memX);
        p.draw(ctx);
      }

      requestAnimationFrame(drawScene);
    }

    window.addEventListener('resize', () => {
      resize();
      initParticles();
    });

    document.getElementById('resetBtn').addEventListener('click', () => {
      initParticles();
    });

    // Start simulation
    resize();
    initParticles();
    requestAnimationFrame(drawScene);
  </script>
</body>
</html>

Root Hair Cells and Uptake of Water and Mineral Ions

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Osmosis vs Active Transport</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;
      padding: 6px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      user-select: none;
      width: 100%;
      max-width: 680px;
      margin: 0 auto;
    }

    /* Shared region header */
    .env-header {
      display: grid;
      grid-template-columns: 1fr 48px 1fr;
      text-align: center;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.3px;
      color: #334155;
      padding: 2px 4px;
    }
    .env-header .left-col { text-align: left; }
    .env-header .mid-col { font-size: 9.5px; line-height: 1.1; color: #475569; display: flex; align-items: center; justify-content: center; text-transform: uppercase; }
    .env-header .right-col { text-align: right; }

    .section {
      display: flex;
      flex-direction: column;
      gap: 4px;
      position: relative;
    }

    .section-title-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 2px;
      flex-wrap: wrap;
      gap: 4px;
    }

    .section-title {
      font-size: 12.5px;
      font-weight: 800;
      display: flex;
      align-items: center;
      gap: 5px;
      color: #0f172a;
    }

    .badge {
      font-size: 10.5px;
      font-weight: 800;
      padding: 2px 7px;
      border-radius: 6px;
      letter-spacing: 0.2px;
      white-space: nowrap;
    }
    .badge-passive { 
      background: #0284c7; 
      color: #ffffff; 
    }
    .badge-active { 
      background: #b45309; 
      color: #ffffff; 
    }

    /* Stage canvas */
    .stage {
      position: relative;
      height: 145px;
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 44px 1fr;
      border-radius: 8px;
      overflow: hidden;
      border: 1.5px solid #cbd5e1;
      background: #ffffff;
    }

    .zone {
      height: 100%;
      position: relative;
      overflow: hidden;
    }
    .zone-soil { 
      background: #fdfbf7; 
      border-right: 1px dashed #cbd5e1;
    }
    .zone-cyto { 
      background: #f0fdf4; 
      border-left: 1px dashed #cbd5e1;
    }
    .stage-osmosis .zone-cyto {
      background: #f0f9ff;
    }

    /* Membrane Column */
    .membrane {
      width: 44px;
      height: 100%;
      background: #e2e8f0;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
      position: relative;
      z-index: 3;
    }

    .lipids {
      display: flex;
      flex-direction: column;
      gap: 3px;
      width: 100%;
      align-items: center;
    }
    .lipid-row {
      display: flex;
      justify-content: space-between;
      width: 34px;
      position: relative;
    }
    .lipid-row::after {
      content: "";
      position: absolute;
      left: 7px;
      right: 7px;
      top: 3px;
      height: 2px;
      background: #94a3b8;
      z-index: 1;
    }
    .lipid-head {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #64748b;
      position: relative;
      z-index: 2;
    }

    /* Concentration labels */
    .conc-tag {
      position: absolute;
      top: 4px;
      font-size: 9.5px;
      font-weight: 800;
      color: #334155;
      background: rgba(255, 255, 255, 0.92);
      padding: 1px 5px;
      border-radius: 4px;
      border: 1px solid #cbd5e1;
      z-index: 2;
      pointer-events: none;
      line-height: 1.2;
    }
    .conc-left { left: 4px; }
    .conc-right { right: 4px; }

    /* Particles */
    .water-particle {
      position: absolute;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #0284c7;
      border: 1.5px solid #0369a1;
      color: #ffffff;
      font-size: 8.5px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 1px 3px rgba(2, 132, 199, 0.35);
      z-index: 4;
    }

    .flowing-water {
      animation: waterFlow 4.8s infinite cubic-bezier(0.4, 0, 0.2, 1);
    }
    .flowing-water:nth-child(2) { animation-delay: -1.6s; }
    .flowing-water:nth-child(3) { animation-delay: -3.2s; }

    @keyframes waterFlow {
      0% {
        left: 12%;
        top: 48%;
        opacity: 0;
      }
      15%, 30% { /* 720ms pause / visible in high Ψ region */
        opacity: 1;
        left: 24%;
        top: 48%;
      }
      50%, 65% { /* 720ms pause crossing lipid bilayer */
        left: calc(50% - 11px);
        top: 50%;
        opacity: 1;
      }
      85%, 95% { /* 480ms pause in cytoplams */
        left: 78%;
        top: 52%;
        opacity: 1;
      }
      100% {
        left: 88%;
        top: 52%;
        opacity: 0;
      }
    }

    /* Carrier Protein */
    .carrier-gate {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 38px;
      height: 94px;
      background: #ea580c;
      border: 2px solid #9a3412;
      border-radius: 8px;
      z-index: 3;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 5px rgba(154, 52, 18, 0.3);
    }
    .carrier-label {
      font-size: 7.5px;
      font-weight: 900;
      color: #ffffff;
      text-transform: uppercase;
      letter-spacing: -0.2px;
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      text-align: center;
    }

    /* Nitrate ion */
    .ion-particle {
      position: absolute;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: #7e22ce;
      border: 1.5px solid #581c87;
      color: #ffffff;
      font-size: 8px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 1px 4px rgba(88, 28, 135, 0.35);
      z-index: 4;
    }

    .pump-ion {
      animation: ionPump 5s infinite ease-in-out;
    }

    /* Clear pause >= 600ms on key states (5s cycle: 15% is 750ms) */
    @keyframes ionPump {
      0% {
        left: 10%;
        top: 42%;
        opacity: 0;
      }
      15%, 30% { /* 750ms soil uptake hold */
        left: 22%;
        top: 42%;
        opacity: 1;
      }
      45%, 60% { /* 750ms locked in carrier protein while ATP hydrolyzes */
        left: calc(50% - 12.5px);
        top: 42%;
        opacity: 1;
      }
      75%, 90% { /* 750ms released inside cytoplasm */
        left: 76%;
        top: 42%;
        opacity: 1;
      }
      100% {
        left: 86%;
        top: 42%;
        opacity: 0;
      }
    }

    /* ATP to ADP animation tag */
    .atp-packet {
      position: absolute;
      right: 6px;
      bottom: 6px;
      background: #991b1b;
      color: #ffffff;
      font-size: 9.5px;
      font-weight: 800;
      padding: 3px 6px;
      border-radius: 5px;
      border: 1.5px solid #7f1d1d;
      animation: atpFlash 5s infinite;
      z-index: 5;
      display: flex;
      align-items: center;
      gap: 3px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    @keyframes atpFlash {
      0%, 35% {
        opacity: 0.35;
        background: #475569;
        border-color: #334155;
      }
      45%, 65% { /* Pauses 1000ms active energy release */
        opacity: 1;
        background: #dc2626;
        border-color: #991b1b;
        box-shadow: 0 0 8px rgba(220, 38, 38, 0.7);
      }
      75%, 100% {
        opacity: 0.85;
        background: #0f766e;
        border-color: #115e59;
      }
    }

    .static-ion {
      opacity: 0.9;
    }

    .sub-note {
      position: absolute;
      left: 6px;
      bottom: 4px;
      font-size: 8.5px;
      font-weight: 700;
      color: #64748b;
      z-index: 2;
    }

    @media (max-width: 380px) {
      .env-header {
        font-size: 10px;
      }
      .conc-tag {
        font-size: 8.5px;
        padding: 1px 3px;
      }
      .section-title {
        font-size: 11.5px;
      }
      .badge {
        font-size: 9.5px;
        padding: 1px 5px;
      }
      .atp-packet {
        font-size: 8.5px;
        padding: 2px 4px;
      }
    }
  </style>
</head>
<body>

  
  <div class="env-header">
    <span class="left-col">🌱 Soil Solution</span>
    <span class="mid-col">Membrane</span>
    <span class="right-col">🧬 Root Cytoplasm</span>
  </div>

  
  <div class="section">
    <div class="section-title-bar">
      <span class="section-title">💧 Osmosis of Water</span>
      <span class="badge badge-passive">Passive (Zero ATP)</span>
    </div>
    <div class="stage stage-osmosis">
      <div class="zone zone-soil">
        <span class="conc-tag conc-left">High Water Potential (Ψ)</span>
        
        <div class="water-particle" style="left: 12%; top: 22%; opacity: 0.45;">H₂O</div>
        <div class="water-particle" style="left: 22%; top: 72%; opacity: 0.45;">H₂O</div>
        <div class="water-particle" style="left: 4%; top: 60%; opacity: 0.35;">H₂O</div>
      </div>

      <div class="membrane">
        <div class="lipids">
          <div class="lipid-row"><div class="lipid-head"></div><div class="lipid-head"></div></div>
          <div class="lipid-row"><div class="lipid-head"></div><div class="lipid-head"></div></div>
          <div class="lipid-row"><div class="lipid-head"></div><div class="lipid-head"></div></div>
          <div class="lipid-row"><div class="lipid-head"></div><div class="lipid-head"></div></div>
          <div class="lipid-row"><div class="lipid-head"></div><div class="lipid-head"></div></div>
          <div class="lipid-row"><div class="lipid-head"></div><div class="lipid-head"></div></div>
        </div>
      </div>

      <div class="zone zone-cyto">
        <span class="conc-tag conc-right">Low Water Potential (Ψ)</span>
        <div class="water-particle" style="right: 8%; top: 22%; opacity: 0.4;">H₂O</div>
      </div>

      
      <div class="water-particle flowing-water">H₂O</div>
      <div class="water-particle flowing-water">H₂O</div>
      <div class="water-particle flowing-water">H₂O</div>
    </div>
  </div>

  
  <div class="section">
    <div class="section-title-bar">
      <span class="section-title">⚡ Active Transport of Mineral Ions</span>
      <span class="badge badge-active">Requires ATP</span>
    </div>
    <div class="stage">
      <div class="zone zone-soil">
        <span class="conc-tag conc-left">Low Mineral Conc.</span>
        <span class="sub-note">Against gradient</span>
      </div>

      <div class="membrane">
        <div class="carrier-gate">
          <span class="carrier-label">Carrier</span>
        </div>
      </div>

      <div class="zone zone-cyto">
        <span class="conc-tag conc-right">High Mineral Conc.</span>
        
        <div class="ion-particle static-ion" style="right: 6%; top: 24%;">NO₃⁻</div>
        <div class="ion-particle static-ion" style="right: 28%; top: 20%;">NO₃⁻</div>
        <div class="ion-particle static-ion" style="right: 48%; top: 62%;">NO₃⁻</div>
        <div class="ion-particle static-ion" style="right: 14%; top: 68%;">NO₃⁻</div>
      </div>

      
      <div class="ion-particle pump-ion">NO₃⁻</div>

      
      <div class="atp-packet" title="ATP from Mitochondria">⚡ ATP → ADP + Pᵢ</div>
    </div>
  </div>

</body>
</html>

UK-GCSE-SCIENCE-BIO-TS-04-02

Aligned learning resources

Related diagrams