<!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">
  <title>Four Essentials of a Habitat</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }

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

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

    .quad-container {
      position: relative;
      width: 100%;
      aspect-ratio: 1 / 1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 10px;
    }

    .tile {
      position: relative;
      border-radius: 18px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      padding: 14px;
      transition: background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
      border: 2px solid transparent;
      text-align: center;
    }

    /* Quadrant styles */
    .tile-food {
      background: #ecfdf5;
      border-color: #a7f3d0;
      color: #065f46;
    }
    .tile-food.active, .tile-food:hover {
      background: #d1fae5;
      border-color: #10b981;
      box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
    }

    .tile-water {
      background: #f0f9ff;
      border-color: #bae6fd;
      color: #0369a1;
    }
    .tile-water.active, .tile-water:hover {
      background: #e0f2fe;
      border-color: #0284c7;
      box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.2);
    }

    .tile-shelter {
      background: #fffbeb;
      border-color: #fde68a;
      color: #92400e;
    }
    .tile-shelter.active, .tile-shelter:hover {
      background: #fef3c7;
      border-color: #f59e0b;
      box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
    }

    .tile-space {
      background: #f5f3ff;
      border-color: #ddd6fe;
      color: #5b21b6;
    }
    .tile-space.active, .tile-space:hover {
      background: #ede9fe;
      border-color: #7c3aed;
      box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
    }

    .icon-svg {
      width: 48px;
      height: 48px;
      margin-bottom: 6px;
    }

    .tile-label {
      font-size: 16px;
      font-weight: 700;
      letter-spacing: -0.01em;
    }

    .tile-letter {
      position: absolute;
      top: 8px;
      font-size: 11px;
      font-weight: 800;
      opacity: 0.5;
      letter-spacing: 0.05em;
    }
    .tile-food .tile-letter { left: 10px; }
    .tile-water .tile-letter { right: 10px; }
    .tile-shelter .tile-letter { left: 10px; bottom: 8px; top: auto; }
    .tile-space .tile-letter { right: 10px; bottom: 8px; top: auto; }

    /* Central Hub Badge */
    .hub {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 92px;
      height: 92px;
      background: #ffffff;
      border-radius: 50%;
      border: 3px solid #e2e8f0;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      z-index: 10;
      text-align: center;
      padding: 6px;
    }

    .hub-icon {
      width: 28px;
      height: 28px;
      margin-bottom: 2px;
    }

    .hub-title {
      font-size: 11px;
      font-weight: 800;
      color: #0f172a;
      line-height: 1.1;
      letter-spacing: 0.02em;
    }

    .hub-sub {
      font-size: 8px;
      font-weight: 600;
      color: #64748b;
      text-transform: uppercase;
      margin-top: 1px;
    }

    /* Informational Status Strip */
    .info-strip {
      width: 100%;
      min-height: 52px;
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      gap: 10px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
      transition: border-color 0.25s ease;
    }

    .info-badge {
      font-size: 11px;
      font-weight: 700;
      padding: 4px 8px;
      border-radius: 6px;
      white-space: nowrap;
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }

    .info-text {
      font-size: 13px;
      font-weight: 500;
      color: #334155;
      line-height: 1.35;
    }

    @media (max-width: 360px) {
      .icon-svg { width: 38px; height: 38px; }
      .tile-label { font-size: 14px; }
      .hub { width: 78px; height: 78px; }
      .hub-title { font-size: 10px; }
      .info-text { font-size: 12px; }
    }
  </style>
</head>
<body>
  <div class="diagram-wrap">
    <div class="quad-container" role="tablist" aria-label="Four Essentials of a Habitat">
      
      <div class="tile tile-food active" id="tile-food" role="tab" tabindex="0" aria-selected="true" aria-controls="info-desc">
        <span class="tile-letter">F</span>
        <svg class="icon-svg" viewBox="0 0 48 48" fill="none" stroke="#059669" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
          <path d="M12 36C18 36 28 30 36 12C20 14 12 24 12 36Z" fill="#10b981" fill-opacity="0.2"/>
          <path d="M12 36L26 22"/>
          <circle cx="16" cy="18" r="4" fill="#059669" stroke="none"/>
          <circle cx="24" cy="12" r="3.5" fill="#059669" stroke="none"/>
          <circle cx="11" cy="26" r="3" fill="#059669" stroke="none"/>
          <path d="M16 18c2-4 6-5 8-6"/>
        </svg>
        <span class="tile-label">Food</span>
      </div>

      
      <div class="tile tile-water" id="tile-water" role="tab" tabindex="0" aria-selected="false" aria-controls="info-desc">
        <span class="tile-letter">W</span>
        <svg class="icon-svg" viewBox="0 0 48 48" fill="none" stroke="#0284c7" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
          <path d="M24 8C24 8 13 22 13 29C13 35.075 17.925 40 24 40C30.075 40 35 35.075 35 29C35 22 24 8 24 8Z" fill="#0284c7" fill-opacity="0.18"/>
          <path d="M18 29c0-3.3 2.7-6 6-6" stroke="#38bdf8"/>
          <circle cx="34" cy="14" r="2.5" fill="#0284c7" stroke="none"/>
          <circle cx="38" cy="22" r="1.5" fill="#0284c7" stroke="none"/>
        </svg>
        <span class="tile-label">Water</span>
      </div>

      
      <div class="tile tile-shelter" id="tile-shelter" role="tab" tabindex="0" aria-selected="false" aria-controls="info-desc">
        <span class="tile-letter">S</span>
        <svg class="icon-svg" viewBox="0 0 48 48" fill="none" stroke="#d97706" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
          <path d="M8 38V22L24 10L40 22V38C40 39.1 39.1 40 38 40H10C8.9 40 8 39.1 8 38Z" fill="#f59e0b" fill-opacity="0.18"/>
          <path d="M19 40V27C19 24.2 21.2 22 24 22C26.8 22 29 24.2 29 27V40" fill="#d97706" fill-opacity="0.3"/>
          <line x1="15" y1="17" x2="15" y2="12"/>
          <line x1="33" y1="17" x2="33" y2="12"/>
        </svg>
        <span class="tile-label">Shelter</span>
      </div>

      
      <div class="tile tile-space" id="tile-space" role="tab" tabindex="0" aria-selected="false" aria-controls="info-desc">
        <span class="tile-letter">S</span>
        <svg class="icon-svg" viewBox="0 0 48 48" fill="none" stroke="#7c3aed" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
          <path d="M6 38L18 20L28 32L34 24L42 38H6Z" fill="#7c3aed" fill-opacity="0.18"/>
          <path d="M14 26L18 20L22 26"/>
          <circle cx="34" cy="14" r="3.5" fill="#a78bfa" stroke="none"/>
          <path d="M10 12l2 2m0-2l-2 2"/>
        </svg>
        <span class="tile-label">Space</span>
      </div>

      
      <div class="hub" aria-hidden="true">
        <svg class="hub-icon" viewBox="0 0 32 32" fill="none" stroke="#0f172a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="16" cy="16" r="13" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="2 2"/>
          <path d="M16 8v16" stroke="#10b981"/>
          <path d="M8 16h16" stroke="#0284c7"/>
          <circle cx="16" cy="16" r="4" fill="#0f172a"/>
        </svg>
        <span class="hub-title">FWSS</span>
        <span class="hub-sub">Essentials</span>
      </div>
    </div>

    
    <div class="info-strip" id="info-strip" role="region" aria-live="polite">
      <span class="info-badge" id="info-badge" style="background:#d1fae5; color:#065f46;">Food</span>
      <span class="info-text" id="info-desc">Tawny owls hunt woodland mice and voles for energy.</span>
    </div>
  </div>

  <script>
    const data = {
      food: {
        label: 'Food',
        bg: '#d1fae5',
        color: '#065f46',
        borderColor: '#a7f3d0',
        text: 'Tawny owls hunt woodland mice and voles for energy.'
      },
      water: {
        label: 'Water',
        bg: '#e0f2fe',
        color: '#0369a1',
        borderColor: '#bae6fd',
        text: 'Frogs absorb clean freshwater directly through their skin.'
      },
      shelter: {
        label: 'Shelter',
        bg: '#fef3c7',
        color: '#92400e',
        borderColor: '#fde68a',
        text: 'A dormouse nests inside hollow tree trunks for winter safety.'
      },
      space: {
        label: 'Space',
        bg: '#ede9fe',
        color: '#5b21b6',
        borderColor: '#ddd6fe',
        text: 'A red deer herd needs miles of open hillside to graze and roam.'
      }
    };

    const tiles = {
      food: document.getElementById('tile-food'),
      water: document.getElementById('tile-water'),
      shelter: document.getElementById('tile-shelter'),
      space: document.getElementById('tile-space')
    };

    const infoBadge = document.getElementById('info-badge');
    const infoDesc = document.getElementById('info-desc');
    const infoStrip = document.getElementById('info-strip');

    function selectQuadrant(key) {
      Object.keys(tiles).forEach(k => {
        const isSelected = k === key;
        tiles[k].classList.toggle('active', isSelected);
        tiles[k].setAttribute('aria-selected', isSelected ? 'true' : 'false');
      });

      const d = data[key];
      infoBadge.textContent = d.label;
      infoBadge.style.backgroundColor = d.bg;
      infoBadge.style.color = d.color;
      infoStrip.style.borderColor = d.borderColor;
      infoDesc.textContent = d.text;
    }

    Object.keys(tiles).forEach(key => {
      const tile = tiles[key];
      tile.addEventListener('click', () => selectQuadrant(key));
      tile.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          selectQuadrant(key);
        }
      });
    });
  </script>
</body>
</html>

What Is a Habitat?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <title>Pond Habitat Needs</title>
  <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;
      justify-content: space-between;
      width: 100%;
      min-height: 100%;
      padding: 8px;
      user-select: none;
    }

    .btn-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: center;
      width: 100%;
      max-width: 540px;
      margin-bottom: 8px;
    }

    .need-btn {
      flex: 1 1 calc(25% - 6px);
      min-width: 70px;
      background: #f1f5f9;
      border: 2px solid transparent;
      border-radius: 8px;
      padding: 6px 4px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      transition: all 0.25s ease;
      line-height: 1.2;
    }

    .need-btn .emoji {
      font-size: 16px;
      margin-bottom: 2px;
    }

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

    .scene-wrap {
      position: relative;
      width: 100%;
      max-width: 540px;
      aspect-ratio: 4 / 3;
      border-radius: 12px;
      overflow: hidden;
      background: #e0f2fe;
    }

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

    /* Glow highlights */
    .glow-layer {
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
    }

    .active-glow {
      opacity: 1;
    }

    /* Labels inside diagram */
    .tag {
      font-size: 11px;
      font-weight: 700;
      fill: #1e2945;
      text-anchor: middle;
      pointer-events: none;
    }

    .tag-bg {
      fill: rgba(255, 255, 255, 0.92);
      stroke: #cbd5e1;
      stroke-width: 1;
      rx: 5;
      cursor: pointer;
      transition: fill 0.2s ease;
    }

    .tag-group {
      cursor: pointer;
    }

    .tag-group.active .tag-bg {
      fill: #ffffff;
      stroke: #0284c7;
      stroke-width: 2;
      filter: drop-shadow(0 2px 4px rgba(2, 132, 199, 0.3));
    }

    .tag-group.active .tag {
      fill: #0369a1;
    }
  </style>
</head>
<body>

  <div class="btn-bar">
    <button class="need-btn active" data-need="food">
      <span class="emoji">🦟</span>
      <span>Food</span>
    </button>
    <button class="need-btn" data-need="water">
      <span class="emoji">💧</span>
      <span>Water</span>
    </button>
    <button class="need-btn" data-need="shelter">
      <span class="emoji">🪷</span>
      <span>Shelter</span>
    </button>
    <button class="need-btn" data-need="space">
      <span class="emoji">🌾</span>
      <span>Space</span>
    </button>
  </div>

  <div class="scene-wrap">
    <svg viewBox="0 0 400 300">
      <defs>
        
        <linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#bae6fd" />
          <stop offset="100%" stop-color="#e0f2fe" />
        </linearGradient>
        <linearGradient id="waterGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#38bdf8" stop-opacity="0.75" />
          <stop offset="100%" stop-color="#0284c7" stop-opacity="0.9" />
        </linearGradient>
        <linearGradient id="mudGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#785338" />
          <stop offset="100%" stop-color="#452a17" />
        </linearGradient>

        
        <filter id="yellowGlow" x="-20%" y="-20%" width="140%" height="140%">
          <feGaussianBlur stdDeviation="6" result="blur" />
          <feComposite in="SourceGraphic" in2="blur" operator="over" />
        </filter>
        <filter id="blueGlow" x="-20%" y="-20%" width="140%" height="140%">
          <feGaussianBlur stdDeviation="7" result="blur" />
          <feComposite in="SourceGraphic" in2="blur" operator="over" />
        </filter>
      </defs>

      
      <rect x="0" y="0" width="400" height="120" fill="url(#skyGrad)" />

      
      <path d="M 0,220 Q 80,245 200,245 T 400,220 L 400,300 L 0,300 Z" fill="url(#mudGrad)" />

      
      <path d="M 0,110 Q 100,105 200,110 T 400,105 L 400,250 Q 300,265 200,265 T 0,250 Z" fill="url(#waterGrad)" />

      
      
      <path d="M 20,150 Q 25,60 15,30 Q 30,70 30,150" fill="#4d7c0f" />
      <path d="M 35,160 Q 45,50 40,20 Q 52,65 48,160" fill="#65a30d" />
      <path d="M 50,170 Q 60,80 75,40 Q 68,90 62,170" fill="#4d7c0f" />
      
      <path d="M 360,160 Q 350,60 340,25 Q 360,70 370,160" fill="#4d7c0f" />
      <path d="M 375,170 Q 380,50 385,20 Q 390,75 385,170" fill="#65a30d" />

      
      <path d="M 0,110 Q 50,115 70,180 Q 20,185 0,160 Z" fill="#654321" />
      <path d="M 400,110 Q 350,115 330,180 Q 380,185 400,160 Z" fill="#654321" />

      
      <circle cx="120" cy="180" r="4" fill="rgba(255,255,255,0.4)" />
      <circle cx="123" cy="165" r="2.5" fill="rgba(255,255,255,0.5)" />
      <circle cx="280" cy="190" r="5" fill="rgba(255,255,255,0.4)" />
      <circle cx="285" cy="175" r="3" fill="rgba(255,255,255,0.5)" />

      
      <path d="M 260,200 Q 248,195 240,200 Q 235,193 230,197 L 232,203 Q 235,207 240,200 Z" fill="#f97316" opacity="0.85" />
      
      
      <path d="M 100,245 Q 85,200 110,160 Q 95,205 105,245" fill="#15803d" />
      <path d="M 115,245 Q 130,190 120,150 Q 120,195 120,245" fill="#16a34a" />
      <path d="M 300,245 Q 315,200 295,160 Q 305,205 305,245" fill="#15803d" />

      
      
      <ellipse cx="200" cy="125" rx="55" ry="18" fill="#16a34a" stroke="#15803d" stroke-width="2" />
      <path d="M 200,125 L 245,117 L 242,132 Z" fill="#38bdf8" /> 
      
      <ellipse cx="110" cy="132" rx="32" ry="11" fill="#22c55e" stroke="#16a34a" stroke-width="1.5" />
      <ellipse cx="300" cy="130" rx="36" ry="12" fill="#22c55e" stroke="#16a34a" stroke-width="1.5" />

      
      <ellipse cx="200" cy="110" rx="195" ry="10" fill="none" stroke="#bae6fd" stroke-width="2" opacity="0.6" />

      
      <g transform="translate(176, 76)">
        <text font-size="48" text-anchor="middle" x="24" y="38">🐸</text>
      </g>

      
      <g transform="translate(290, 42)">
        <text font-size="28" text-anchor="middle" x="14" y="20">🦟</text>
      </g>

      
      
      
      <g id="glow-food" class="glow-layer active-glow">
        <circle cx="305" cy="55" r="32" fill="#fef08a" opacity="0.5" filter="url(#yellowGlow)" />
        <circle cx="305" cy="55" r="24" fill="none" stroke="#eab308" stroke-width="2.5" stroke-dasharray="4 3" />
        
        <path d="M 220,95 Q 260,75 288,60" fill="none" stroke="#f43f5e" stroke-width="2" stroke-dasharray="3 3" opacity="0.8" />
      </g>

      
      <g id="glow-water" class="glow-layer">
        <ellipse cx="200" cy="180" rx="130" ry="45" fill="#38bdf8" opacity="0.35" filter="url(#blueGlow)" />
        <ellipse cx="200" cy="180" rx="120" ry="40" fill="none" stroke="#0284c7" stroke-width="2.5" stroke-dasharray="6 4" />
      </g>

      
      <g id="glow-shelter" class="glow-layer">
        <ellipse cx="110" cy="132" rx="42" ry="18" fill="#86efac" opacity="0.5" filter="url(#yellowGlow)" />
        <ellipse cx="110" cy="132" rx="38" ry="16" fill="none" stroke="#16a34a" stroke-width="2" stroke-dasharray="4 3" />
        
        <ellipse cx="108" cy="210" rx="40" ry="30" fill="#86efac" opacity="0.35" filter="url(#yellowGlow)" />
        <ellipse cx="108" cy="210" rx="35" ry="25" fill="none" stroke="#16a34a" stroke-width="2" stroke-dasharray="4 3" />
      </g>

      
      <g id="glow-space" class="glow-layer">
        <rect x="15" y="25" width="370" height="245" rx="16" fill="#67e8f9" opacity="0.2" />
        <rect x="15" y="25" width="370" height="245" rx="16" fill="none" stroke="#0284c7" stroke-width="2.5" stroke-dasharray="8 6" />
      </g>

      

      
      <g class="tag-group active" data-need="food" transform="translate(295, 12)">
        <rect class="tag-bg" x="-38" y="0" width="76" height="22" />
        <text class="tag" x="0" y="15">Food 🦟</text>
      </g>

      
      <g class="tag-group" data-need="water" transform="translate(200, 205)">
        <rect class="tag-bg" x="-40" y="0" width="80" height="22" />
        <text class="tag" x="0" y="15">Water 💧</text>
      </g>

      
      <g class="tag-group" data-need="shelter" transform="translate(75, 105)">
        <rect class="tag-bg" x="-42" y="0" width="84" height="22" />
        <text class="tag" x="0" y="15">Shelter 🪷</text>
      </g>

      
      <g class="tag-group" data-need="space" transform="translate(330, 245)">
        <rect class="tag-bg" x="-38" y="0" width="76" height="22" />
        <text class="tag" x="0" y="15">Space 🌾</text>
      </g>
    </svg>
  </div>

  <script>
    const buttons = document.querySelectorAll('.need-btn');
    const tagGroups = document.querySelectorAll('.tag-group');
    const glows = {
      food: document.getElementById('glow-food'),
      water: document.getElementById('glow-water'),
      shelter: document.getElementById('glow-shelter'),
      space: document.getElementById('glow-space')
    };

    function selectNeed(needKey) {
      // Update Buttons
      buttons.forEach(btn => {
        btn.classList.toggle('active', btn.dataset.need === needKey);
      });

      // Update In-Diagram Tags
      tagGroups.forEach(tg => {
        tg.classList.toggle('active', tg.dataset.need === needKey);
      });

      // Update Glows
      Object.keys(glows).forEach(key => {
        if (glows[key]) {
          glows[key].classList.toggle('active-glow', key === needKey);
        }
      });
    }

    // Attach click listeners to buttons
    buttons.forEach(btn => {
      btn.addEventListener('click', () => selectNeed(btn.dataset.need));
    });

    // Attach click listeners to in-diagram SVG tags
    tagGroups.forEach(tg => {
      tg.addEventListener('click', () => selectNeed(tg.dataset.need));
    });
  </script>
</body>
</html>

science.ks1.y2.t1.s2

Aligned learning resources

Related diagrams