<!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, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 100%;
      min-height: 360px;
      max-height: 480px;
      padding: 12px 10px;
      user-select: none;
      -webkit-user-select: none;
    }

    .header-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: 380px;
      padding: 0 4px 6px;
    }

    .title-pill {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      color: #475569;
      background: #f1f5f9;
      padding: 4px 10px;
      border-radius: 12px;
    }

    .controls {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .ctrl-btn {
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 4px 8px;
      font-size: 12px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      line-height: 1;
    }
    .ctrl-btn:active { background: #e2e8f0; }

    /* Cycle Stage Area */
    .cycle-area {
      position: relative;
      width: 100%;
      max-width: 360px;
      height: 250px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* SVG Track */
    .track-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: visible;
      pointer-events: none;
    }

    .flow-line {
      fill: none;
      stroke: #e2e8f0;
      stroke-width: 4;
      stroke-linecap: round;
    }

    .flow-active {
      fill: none;
      stroke: #22b7ff;
      stroke-width: 4;
      stroke-linecap: round;
      stroke-dasharray: 8 8;
      animation: dashFlow 2s linear infinite;
    }

    @keyframes dashFlow {
      to { stroke-dashoffset: -32; }
    }

    /* Nodes */
    .node {
      position: absolute;
      width: 124px;
      padding: 8px 6px;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      cursor: pointer;
      transition: border-color 0.25s, box-shadow 0.25s, background-color 0.25s;
      z-index: 2;
    }

    .node:hover {
      border-color: #94a3b8;
    }

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

    .node-icon {
      font-size: 20px;
      margin-bottom: 2px;
      line-height: 1.1;
    }

    .node-title {
      font-size: 11px;
      font-weight: 700;
      line-height: 1.2;
      color: #1e2945;
    }

    /* Positioning Nodes around cycle */
    .node-1 { top: 6px; left: 50%; transform: translateX(-50%); }
    .node-2 { top: 50%; right: 4px; transform: translateY(-50%); }
    .node-3 { bottom: 6px; left: 50%; transform: translateX(-50%); }
    .node-4 { top: 50%; left: 4px; transform: translateY(-50%); }

    /* Center Cycle Badge */
    .center-badge {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      pointer-events: none;
      z-index: 1;
    }

    .cycle-icon {
      font-size: 24px;
      color: #0ea5e9;
      animation: spinLoop 14s linear infinite;
    }

    @keyframes spinLoop {
      100% { transform: rotate(360deg); }
    }

    /* Dynamic Clinical Card */
    .clinical-panel {
      width: 100%;
      max-width: 360px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px 12px;
      display: flex;
      flex-direction: column;
      gap: 3px;
      min-height: 52px;
    }

    .panel-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .panel-tag {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #0284c7;
    }

    .step-indicator {
      display: flex;
      gap: 4px;
    }

    .step-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: background-color 0.2s;
    }

    .step-dot.active {
      background: #0284c7;
    }

    .panel-desc {
      font-size: 12px;
      font-weight: 500;
      color: #334155;
      line-height: 1.35;
    }
  </style>
</head>
<body>

  <div class="header-bar">
    <div class="title-pill">Interacting Disease Cycle</div>
    <div class="controls">
      <button class="ctrl-btn" id="playBtn">⏸ Pause</button>
      <button class="ctrl-btn" id="nextBtn">Next ➔</button>
    </div>
  </div>

  <div class="cycle-area">
    <svg class="track-svg" viewBox="0 0 360 250">
      <defs>
        <marker id="arrow" viewBox="0 0 10 10" refX="5" 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="#0ea5e9" />
        </marker>
      </defs>

      
      <path class="flow-line" d="M 180 34 C 280 34, 300 80, 300 125 C 300 170, 280 216, 180 216 C 80 216, 60 170, 60 125 C 60 80, 80 34, 180 34" />
      <path class="flow-active" marker-end="url(#arrow)" d="M 180 34 C 280 34, 300 80, 300 125 C 300 170, 280 216, 180 216 C 80 216, 60 170, 60 125 C 60 80, 80 34, 180 34" />
    </svg>

    <div class="center-badge">
      <span class="cycle-icon">↻</span>
    </div>

    
    <div class="node node-1 active" data-step="0">
      <span class="node-icon">🥗</span>
      <span class="node-title">Poor<br>Nutrition</span>
    </div>

    <div class="node node-2" data-step="1">
      <span class="node-icon">🛡️</span>
      <span class="node-title">Weakened<br>Immunity</span>
    </div>

    <div class="node node-3" data-step="2">
      <span class="node-icon">🩺</span>
      <span class="node-title">Physical<br>Illness</span>
    </div>

    <div class="node node-4" data-step="3">
      <span class="node-icon">🧠</span>
      <span class="node-title">Mental<br>Stress</span>
    </div>
  </div>

  
  <div class="clinical-panel">
    <div class="panel-meta">
      <span class="panel-tag" id="stageTag">Stage 1 of 4</span>
      <div class="step-indicator">
        <div class="step-dot active" data-step="0"></div>
        <div class="step-dot" data-step="1"></div>
        <div class="step-dot" data-step="2"></div>
        <div class="step-dot" data-step="3"></div>
      </div>
    </div>
    <div class="panel-desc" id="stageDesc">
      Deficiencies in protein and vitamins impair basic cellular repair.
    </div>
  </div>

  <script>
    const stepsData = [
      {
        tag: "Stage 1: Nutrition Deficit",
        desc: "Deficiencies in protein and key vitamins impair cellular repair."
      },
      {
        tag: "Stage 2: Impaired Defences",
        desc: "White blood cell production falls, lowering resistance to pathogens."
      },
      {
        tag: "Stage 3: Prolonged Disease",
        desc: "Infections persist, causing pain, tissue damage, and fatigue."
      },
      {
        tag: "Stage 4: Psychological Toll",
        desc: "Depression and lethargy reduce appetite, looping back to malnutrition."
      }
    ];

    let currentStep = 0;
    let isPlaying = true;
    let timer = null;

    const nodes = document.querySelectorAll('.node');
    const dots = document.querySelectorAll('.step-dot');
    const stageTag = document.getElementById('stageTag');
    const stageDesc = document.getElementById('stageDesc');
    const playBtn = document.getElementById('playBtn');
    const nextBtn = document.getElementById('nextBtn');

    function updateView(idx) {
      currentStep = idx;
      nodes.forEach((n, i) => n.classList.toggle('active', i === idx));
      dots.forEach((d, i) => d.classList.toggle('active', i === idx));
      stageTag.textContent = stepsData[idx].tag;
      stageDesc.textContent = stepsData[idx].desc;
    }

    function advance() {
      const next = (currentStep + 1) % stepsData.length;
      updateView(next);
    }

    function startAutoPlay() {
      stopAutoPlay();
      timer = setInterval(advance, 3600);
      isPlaying = true;
      playBtn.textContent = '⏸ Pause';
    }

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

    // Direct Interaction Handlers
    nodes.forEach(node => {
      node.addEventListener('click', () => {
        const idx = parseInt(node.getAttribute('data-step'), 10);
        updateView(idx);
        stopAutoPlay();
      });
    });

    dots.forEach(dot => {
      dot.addEventListener('click', () => {
        const idx = parseInt(dot.getAttribute('data-step'), 10);
        updateView(idx);
        stopAutoPlay();
      });
    });

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

    nextBtn.addEventListener('click', () => {
      advance();
      stopAutoPlay();
    });

    // Start cycle
    startAutoPlay();
  </script>
</body>
</html>

Defining Health and Disease Interactions

<!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;
      -webkit-tap-highlight-color: transparent;
    }
    body {
      background: #f8fafc;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      color: #1e2945;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }
    .diagram-wrap {
      width: 100%;
      max-width: 620px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
    }
    /* Top Main Badge */
    .top-badge {
      background: #ffffff;
      border: 1.5px solid #22b7ff;
      border-radius: 24px;
      padding: 8px 20px;
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
      box-shadow: 0 2px 8px rgba(34, 183, 255, 0.12);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .top-badge .dot-status {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #22b7ff;
    }

    /* Connector line */
    .connect-svg {
      width: 100%;
      max-width: 480px;
      height: 24px;
      display: block;
    }

    /* 3 Pillars Grid */
    .pillars-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      width: 100%;
    }

    .pillar-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 14px;
      padding: 14px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      cursor: pointer;
      user-select: none;
      transition: box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
      min-height: 110px;
    }

    .pillar-card:hover {
      box-shadow: 0 4px 14px rgba(34, 183, 255, 0.15);
      border-color: #93c5fd;
    }

    .pillar-card.active {
      border-color: #22b7ff;
      background: #f0f9ff;
      box-shadow: 0 0 0 2px #22b7ff, 0 6px 16px rgba(34, 183, 255, 0.18);
    }

    .pillar-icon {
      font-size: 26px;
      margin-bottom: 6px;
      line-height: 1;
    }

    .pillar-title {
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 4px;
      color: #0f172a;
    }

    .pillar-desc {
      font-size: 12px;
      line-height: 1.35;
      color: #64748b;
    }

    /* Dynamic Impact Panel */
    .impact-panel {
      width: 100%;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 16px;
      min-height: 72px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }

    .impact-header {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #0284c7;
      margin-bottom: 4px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .impact-text {
      font-size: 13px;
      line-height: 1.4;
      color: #334155;
    }

    .impact-text strong {
      color: #0f172a;
    }

    @media (max-width: 480px) {
      body {
        padding: 10px;
      }
      .top-badge {
        font-size: 14px;
        padding: 6px 16px;
      }
      .pillars-grid {
        gap: 8px;
      }
      .pillar-card {
        padding: 10px 6px;
        min-height: 100px;
      }
      .pillar-icon {
        font-size: 22px;
      }
      .pillar-title {
        font-size: 13px;
      }
      .pillar-desc {
        font-size: 11px;
      }
      .impact-panel {
        padding: 10px 12px;
        min-height: 68px;
      }
      .impact-text {
        font-size: 12px;
      }
    }
  </style>
</head>
<body>

  <div class="diagram-wrap">
    
    <div class="top-badge">
      <span class="dot-status"></span>
      Total Health (Well-being)
    </div>

    
    <svg class="connect-svg" viewBox="0 0 300 24" preserveAspectRatio="none">
      <line x1="150" y1="0" x2="150" y2="12" stroke="#cbd5e1" stroke-width="2" stroke-linecap="round"/>
      <path d="M 50 24 L 50 12 L 250 12 L 250 24" fill="none" stroke="#cbd5e1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      <line x1="150" y1="12" x2="150" y2="24" stroke="#cbd5e1" stroke-width="2" stroke-linecap="round"/>
    </svg>

    
    <div class="pillars-grid">
      <div class="pillar-card active" data-pillar="physical" onclick="selectPillar('physical')" onmouseenter="selectPillar('physical')">
        <div class="pillar-icon">❤️</div>
        <div class="pillar-title">Physical</div>
        <div class="pillar-desc">Fitness, organs &amp; disease defence</div>
      </div>

      <div class="pillar-card" data-pillar="mental" onclick="selectPillar('mental')" onmouseenter="selectPillar('mental')">
        <div class="pillar-icon">🧠</div>
        <div class="pillar-title">Mental</div>
        <div class="pillar-desc">Emotion, cognition &amp; stress control</div>
      </div>

      <div class="pillar-card" data-pillar="social" onclick="selectPillar('social')" onmouseenter="selectPillar('social')">
        <div class="pillar-icon">👥</div>
        <div class="pillar-title">Social</div>
        <div class="pillar-desc">Relationships &amp; community support</div>
      </div>
    </div>

    
    <div class="impact-panel">
      <div class="impact-header" id="impactTag">✦ Pillar Weakness Impact</div>
      <div class="impact-text" id="impactContent">
        <strong>Severe physical illness</strong> (e.g. arthritis) can prevent work, triggering depression and social isolation.
      </div>
    </div>
  </div>

  <script>
    const impacts = {
      physical: {
        tag: '✦ Physical Pillar Weakness',
        text: '<strong>Chronic physical illness</strong> limits mobility, which can trigger severe depression and social isolation.'
      },
      mental: {
        tag: '✦ Mental Pillar Weakness',
        text: '<strong>Chronic stress & depression</strong> impair immune defence, increasing vulnerability to physical diseases.'
      },
      social: {
        tag: '✦ Social Pillar Weakness',
        text: '<strong>Loneliness & poor housing</strong> raise stress hormones, increasing the risk of cardiovascular disease.'
      }
    };

    function selectPillar(key) {
      document.querySelectorAll('.pillar-card').forEach(card => {
        card.classList.toggle('active', card.dataset.pillar === key);
      });
      document.getElementById('impactTag').textContent = impacts[key].tag;
      document.getElementById('impactContent').innerHTML = impacts[key].text;
    }
  </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, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      color: #1e2945;
      background: #ffffff;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      user-select: none;
      -webkit-user-select: none;
    }
    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    .tile {
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 8px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      gap: 6px;
      transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
      position: relative;
    }
    .tile:hover {
      border-color: #cbd5e1;
    }
    .tile.active-0 {
      background: #eff6ff;
      border-color: #2563eb;
      box-shadow: 0 0 0 1px #2563eb;
    }
    .tile.active-1 {
      background: #fff1f2;
      border-color: #e11d48;
      box-shadow: 0 0 0 1px #e11d48;
    }
    .tile.active-2 {
      background: #fffbeb;
      border-color: #d97706;
      box-shadow: 0 0 0 1px #d97706;
    }
    .tile.active-3 {
      background: #faf5ff;
      border-color: #7c3aed;
      box-shadow: 0 0 0 1px #7c3aed;
    }
    .tile-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 4px;
    }
    .tag {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.3px;
      text-transform: uppercase;
      padding: 2px 6px;
      border-radius: 4px;
      background: #e2e8f0;
      color: #475569;
    }
    .tile.active-0 .tag { background: #dbeafe; color: #1d4ed8; }
    .tile.active-1 .tag { background: #ffe4e6; color: #be123c; }
    .tile.active-2 .tag { background: #fef3c7; color: #b45309; }
    .tile.active-3 .tag { background: #f3e8ff; color: #6d28d9; }

    .tile-title {
      font-size: 13px;
      font-weight: 700;
      line-height: 1.25;
      color: #1e2945;
    }
    .flow-mini {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 15px;
      padding: 4px 0;
      color: #64748b;
    }
    .flow-arrow {
      font-weight: 800;
      font-size: 13px;
    }
    .active-0 .flow-arrow { color: #2563eb; }
    .active-1 .flow-arrow { color: #e11d48; }
    .active-2 .flow-arrow { color: #d97706; }
    .active-3 .flow-arrow { color: #7c3aed; }

    /* Focus Detail Card */
    .detail-panel {
      border: 2px solid #e2e8f0;
      border-radius: 10px;
      background: #ffffff;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-height: 135px;
      transition: border-color 0.25s ease, background-color 0.25s ease;
    }
    .detail-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .detail-badge {
      font-size: 12px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 6px;
    }
    .step-chain {
      display: grid;
      grid-template-columns: 1fr auto 1fr auto 1fr;
      align-items: center;
      gap: 6px;
      text-align: center;
      margin-top: 2px;
    }
    .chain-box {
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 8px 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
    }
    .chain-icon {
      font-size: 20px;
      line-height: 1;
    }
    .chain-lbl {
      font-size: 11px;
      font-weight: 700;
      color: #1e2945;
      line-height: 1.15;
    }
    .chain-sub {
      font-size: 10px;
      color: #64748b;
      line-height: 1;
    }
    .chain-arr {
      font-size: 16px;
      font-weight: 900;
      color: #94a3b8;
    }
    .example-row {
      font-size: 12px;
      color: #334155;
      background: #f1f5f9;
      padding: 6px 10px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .example-tag {
      font-weight: 700;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.3px;
      color: #475569;
    }
    .example-text {
      font-weight: 500;
    }
  </style>
</head>
<body>

  <div class="grid" id="grid">
    
    <div class="tile active-0" data-index="0" role="button" tabindex="0">
      <div class="tile-header">
        <span class="tag">Interaction 1</span>
      </div>
      <div class="tile-title">Immune Defect → Infection</div>
      <div class="flow-mini">
        <span>🛡️⚡</span>
        <span class="flow-arrow">→</span>
        <span>🫁 🦠</span>
      </div>
    </div>

    
    <div class="tile" data-index="1" role="button" tabindex="0">
      <div class="tile-header">
        <span class="tag">Interaction 2</span>
      </div>
      <div class="tile-title">Viruses → Cancer</div>
      <div class="flow-mini">
        <span>🧬 🦠</span>
        <span class="flow-arrow">→</span>
        <span>⚠️ 🔬</span>
      </div>
    </div>

    
    <div class="tile" data-index="2" role="button" tabindex="0">
      <div class="tile-header">
        <span class="tag">Interaction 3</span>
      </div>
      <div class="tile-title">Immune Trigger → Allergies</div>
      <div class="flow-mini">
        <span>🛡️ ⚡</span>
        <span class="flow-arrow">→</span>
        <span>🫁 🌾</span>
      </div>
    </div>

    
    <div class="tile" data-index="3" role="button" tabindex="0">
      <div class="tile-header">
        <span class="tag">Interaction 4</span>
      </div>
      <div class="tile-title">Physical → Mental Illness</div>
      <div class="flow-mini">
        <span>🦴 ⚡</span>
        <span class="flow-arrow">→</span>
        <span>🧠 📉</span>
      </div>
    </div>
  </div>

  
  <div class="detail-panel" id="detailPanel">
    <div class="detail-header">
      <span class="detail-badge" id="detailBadge">Type 1 • Immune Defect</span>
    </div>

    <div class="step-chain" id="stepChain">
      <div class="chain-box">
        <span class="chain-icon" id="cIcon1">🛡️⚡</span>
        <span class="chain-lbl" id="cLbl1">Damaged<br>Defences</span>
        <span class="chain-sub" id="cSub1">Lowered WBCs</span>
      </div>
      <span class="chain-arr">→</span>
      <div class="chain-box">
        <span class="chain-icon" id="cIcon2">🦠</span>
        <span class="chain-lbl" id="cLbl2">Pathogen<br>Invasion</span>
        <span class="chain-sub" id="cSub2">Unchecked</span>
      </div>
      <span class="chain-arr">→</span>
      <div class="chain-box">
        <span class="chain-icon" id="cIcon3">🫁⚠️</span>
        <span class="chain-lbl" id="cLbl3">Severe<br>Disease</span>
        <span class="chain-sub" id="cSub3">Secondary</span>
      </div>
    </div>

    <div class="example-row">
      <span class="example-tag">GCSE Example:</span>
      <span class="example-text" id="exampleText">HIV damages white blood cells → Pneumonia &amp; TB</span>
    </div>
  </div>

  <script>
    const data = [
      {
        theme: 'active-0',
        badge: 'Interaction 1 • Immune Defect',
        badgeBg: '#dbeafe',
        badgeColor: '#1d4ed8',
        border: '#2563eb',
        bg: '#eff6ff',
        step1: { icon: '🛡️⚡', title: 'Damaged<br>Defences', sub: 'Low WBC count' },
        step2: { icon: '🦠', title: 'Pathogen<br>Invasion', sub: 'Unchecked spread' },
        step3: { icon: '🫁⚠️', title: 'Severe<br>Infection', sub: 'Opportunistic' },
        example: 'HIV destroys white blood cells → Pneumonia & TB'
      },
      {
        theme: 'active-1',
        badge: 'Interaction 2 • Viruses & Cancer',
        badgeBg: '#ffe4e6',
        badgeColor: '#be123c',
        border: '#e11d48',
        bg: '#fff1f2',
        step1: { icon: '🧬🦠', title: 'Viral<br>Infection', sub: 'Enters host cells' },
        step2: { icon: '⚡✂️', title: 'DNA<br>Mutation', sub: 'Disrupts genes' },
        step3: { icon: '🔬⚠️', title: 'Malignant<br>Tumours', sub: 'Rapid division' },
        example: 'HPV → Cervical cancer; Hepatitis B/C → Liver cancer'
      },
      {
        theme: 'active-2',
        badge: 'Interaction 3 • Immune Overreaction',
        badgeBg: '#fef3c7',
        badgeColor: '#b45309',
        border: '#d97706',
        bg: '#fffbeb',
        step1: { icon: '🦠', title: 'Initial<br>Infection', sub: 'Foreign antigen' },
        step2: { icon: '🛡️💥', title: 'Immune<br>Reaction', sub: 'Histamine surge' },
        step3: { icon: '🫁⚡', title: 'Allergies /<br>Asthma', sub: 'Hypersensitivity' },
        example: 'Immune response to pathogens triggers chronic asthma & skin rashes'
      },
      {
        theme: 'active-3',
        badge: 'Interaction 4 • Physical to Mental',
        badgeBg: '#f3e8ff',
        badgeColor: '#6d28d9',
        border: '#7c3aed',
        bg: '#faf5ff',
        step1: { icon: '🦴⚡', title: 'Chronic<br>Illness', sub: 'Pain & disability' },
        step2: { icon: '🛋️🔒', title: 'Isolation<br>& Stress', sub: 'Lifestyle impact' },
        step3: { icon: '🧠📉', title: 'Depression<br>& Anxiety', sub: 'Mental health' },
        example: 'Severe arthritis / chronic pain → Clinical depression'
      }
    ];

    const tiles = document.querySelectorAll('.tile');
    const panel = document.getElementById('detailPanel');
    const badge = document.getElementById('detailBadge');
    const cIcon1 = document.getElementById('cIcon1');
    const cLbl1 = document.getElementById('cLbl1');
    const cSub1 = document.getElementById('cSub1');
    const cIcon2 = document.getElementById('cIcon2');
    const cLbl2 = document.getElementById('cLbl2');
    const cSub2 = document.getElementById('cSub2');
    const cIcon3 = document.getElementById('cIcon3');
    const cLbl3 = document.getElementById('cLbl3');
    const cSub3 = document.getElementById('cSub3');
    const exText = document.getElementById('exampleText');

    function selectInteraction(index) {
      tiles.forEach((t, i) => {
        t.className = 'tile' + (i === index ? ' active-' + index : '');
      });

      const d = data[index];
      panel.style.borderColor = d.border;
      panel.style.backgroundColor = d.bg;

      badge.textContent = d.badge;
      badge.style.backgroundColor = d.badgeBg;
      badge.style.color = d.badgeColor;

      cIcon1.innerHTML = d.step1.icon;
      cLbl1.innerHTML = d.step1.title;
      cSub1.textContent = d.step1.sub;

      cIcon2.innerHTML = d.step2.icon;
      cLbl2.innerHTML = d.step2.title;
      cSub2.textContent = d.step2.sub;

      cIcon3.innerHTML = d.step3.icon;
      cLbl3.innerHTML = d.step3.title;
      cSub3.textContent = d.step3.sub;

      exText.innerHTML = d.example;
    }

    tiles.forEach(tile => {
      tile.addEventListener('click', () => {
        const idx = parseInt(tile.getAttribute('data-index'), 10);
        selectInteraction(idx);
      });
      tile.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          const idx = parseInt(tile.getAttribute('data-index'), 10);
          selectInteraction(idx);
        }
      });
    });

    selectInteraction(0);
  </script>
</body>
</html>

UK-GCSE-SCIENCE-BIO-HDM

Child standards (5)

Aligned learning resources

Related diagrams