<!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 {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: transparent;
      padding: 6px;
      line-height: 1.35;
    }

    /* Filter Bar */
    .filter-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 12px;
      justify-content: center;
    }
    .pill-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      padding: 5px 10px;
      border-radius: 9999px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
      transition: all 0.2s ease;
    }
    .pill-btn:hover {
      background: #f8fafc;
      border-color: #94a3b8;
    }
    .pill-btn.active {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
    }
    .gas-swatch {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    /* Columns Layout */
    .columns-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-bottom: 12px;
    }
    @media (max-width: 580px) {
      .columns-grid {
        grid-template-columns: 1fr;
        gap: 10px;
      }
    }

    .column-panel {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px;
      display: flex;
      flex-direction: column;
    }
    .panel-header {
      margin-bottom: 8px;
      text-align: center;
    }
    .panel-title {
      font-size: 14px;
      font-weight: 700;
      color: #0f172a;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
    }
    .panel-subtitle {
      font-size: 11px;
      font-weight: 500;
      color: #64748b;
      margin-top: 1px;
    }

    /* Stacked Bar */
    .stacked-bar-wrapper {
      margin-bottom: 10px;
    }
    .stacked-bar {
      display: flex;
      width: 100%;
      height: 24px;
      border-radius: 6px;
      overflow: hidden;
      background: #e2e8f0;
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
    }
    .bar-segment {
      height: 100%;
      transition: opacity 0.25s ease, filter 0.25s ease;
    }

    /* Data List */
    .data-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 4px;
      font-size: 12px;
    }
    .data-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 3px 6px;
      border-radius: 4px;
      background: #ffffff;
      border: 1px solid #f1f5f9;
      transition: opacity 0.25s ease, background 0.25s ease, border-color 0.25s ease;
    }
    .data-label-group {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .data-name {
      font-weight: 500;
      color: #334155;
    }
    .data-pct {
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      color: #0f172a;
    }

    /* Dimming logic when a specific gas is selected */
    .dimmed {
      opacity: 0.2;
      filter: grayscale(80%);
    }
    .highlighted-row {
      background: #eff6ff !important;
      border-color: #bfdbfe !important;
    }

    /* Color definitions */
    .bg-co2 { background-color: #ea580c; }
    .bg-n2  { background-color: #4f46e5; }
    .bg-h2o { background-color: #0284c7; }
    .bg-o2  { background-color: #10b981; }
    .bg-other { background-color: #94a3b8; }

    /* Key takeaway banner */
    .insight-card {
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
      border-radius: 8px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      color: #166534;
      line-height: 1.3;
    }
    .insight-icon {
      font-size: 16px;
      flex-shrink: 0;
    }
  </style>
</head>
<body>

  
  <div class="filter-bar">
    <button class="pill-btn active" data-gas="all">All Gases</button>
    <button class="pill-btn" data-gas="co2">
      <span class="gas-swatch bg-co2"></span>CO₂
    </button>
    <button class="pill-btn" data-gas="n2">
      <span class="gas-swatch bg-n2"></span>N₂
    </button>
    <button class="pill-btn" data-gas="h2o">
      <span class="gas-swatch bg-h2o"></span>H₂O Vapor
    </button>
    <button class="pill-btn" data-gas="o2">
      <span class="gas-swatch bg-o2"></span>O₂
    </button>
  </div>

  
  <div class="columns-grid">
    
    
    <div class="column-panel">
      <div class="panel-header">
        <div class="panel-title">🌋 Early Earth</div>
        <div class="panel-subtitle">~4.4 Ga (Volcanic Era)</div>
      </div>
      <div class="stacked-bar-wrapper">
        <div class="stacked-bar">
          <div class="bar-segment bg-co2" data-gas="co2" style="width: 75%;" title="CO₂ ~75%"></div>
          <div class="bar-segment bg-h2o" data-gas="h2o" style="width: 15%;" title="H₂O ~15%"></div>
          <div class="bar-segment bg-n2" data-gas="n2" style="width: 5%;" title="N₂ ~5%"></div>
          <div class="bar-segment bg-other" data-gas="other" style="width: 5%;" title="Trace ~5%"></div>
        </div>
      </div>
      <ul class="data-list">
        <li class="data-row" data-gas="co2">
          <span class="data-label-group"><span class="gas-swatch bg-co2"></span><span class="data-name">CO₂</span></span>
          <span class="data-pct">~75%</span>
        </li>
        <li class="data-row" data-gas="h2o">
          <span class="data-label-group"><span class="gas-swatch bg-h2o"></span><span class="data-name">H₂O vapor</span></span>
          <span class="data-pct">~15%</span>
        </li>
        <li class="data-row" data-gas="n2">
          <span class="data-label-group"><span class="gas-swatch bg-n2"></span><span class="data-name">N₂</span></span>
          <span class="data-pct">~5%</span>
        </li>
        <li class="data-row" data-gas="o2">
          <span class="data-label-group"><span class="gas-swatch bg-o2"></span><span class="data-name">O₂</span></span>
          <span class="data-pct">0%</span>
        </li>
        <li class="data-row" data-gas="other">
          <span class="data-label-group"><span class="gas-swatch bg-other"></span><span class="data-name">Trace gases</span></span>
          <span class="data-pct">~5%</span>
        </li>
      </ul>
    </div>

    
    <div class="column-panel">
      <div class="panel-header">
        <div class="panel-title">🪐 Venus &amp; Mars</div>
        <div class="panel-subtitle">No Oceans or Life</div>
      </div>
      <div class="stacked-bar-wrapper">
        <div class="stacked-bar">
          <div class="bar-segment bg-co2" data-gas="co2" style="width: 96%;" title="CO₂ ~96%"></div>
          <div class="bar-segment bg-n2" data-gas="n2" style="width: 3.5%;" title="N₂ ~3.5%"></div>
          <div class="bar-segment bg-other" data-gas="other" style="width: 0.5%;" title="Other <0.5%"></div>
        </div>
      </div>
      <ul class="data-list">
        <li class="data-row" data-gas="co2">
          <span class="data-label-group"><span class="gas-swatch bg-co2"></span><span class="data-name">CO₂</span></span>
          <span class="data-pct">~96%</span>
        </li>
        <li class="data-row" data-gas="n2">
          <span class="data-label-group"><span class="gas-swatch bg-n2"></span><span class="data-name">N₂</span></span>
          <span class="data-pct">~3.5%</span>
        </li>
        <li class="data-row" data-gas="h2o">
          <span class="data-label-group"><span class="gas-swatch bg-h2o"></span><span class="data-name">H₂O vapor</span></span>
          <span class="data-pct">&lt;0.1%</span>
        </li>
        <li class="data-row" data-gas="o2">
          <span class="data-label-group"><span class="gas-swatch bg-o2"></span><span class="data-name">O₂</span></span>
          <span class="data-pct">0%</span>
        </li>
        <li class="data-row" data-gas="other">
          <span class="data-label-group"><span class="gas-swatch bg-other"></span><span class="data-name">Trace gases</span></span>
          <span class="data-pct">&lt;0.5%</span>
        </li>
      </ul>
    </div>

    
    <div class="column-panel">
      <div class="panel-header">
        <div class="panel-title">🌍 Modern Earth</div>
        <div class="panel-subtitle">Oceans + Photosynthesis</div>
      </div>
      <div class="stacked-bar-wrapper">
        <div class="stacked-bar">
          <div class="bar-segment bg-n2" data-gas="n2" style="width: 78%;" title="N₂ 78%"></div>
          <div class="bar-segment bg-o2" data-gas="o2" style="width: 21%;" title="O₂ 21%"></div>
          <div class="bar-segment bg-other" data-gas="other" style="width: 1%;" title="Argon/Trace ~1%"></div>
        </div>
      </div>
      <ul class="data-list">
        <li class="data-row" data-gas="n2">
          <span class="data-label-group"><span class="gas-swatch bg-n2"></span><span class="data-name">N₂</span></span>
          <span class="data-pct">78%</span>
        </li>
        <li class="data-row" data-gas="o2">
          <span class="data-label-group"><span class="gas-swatch bg-o2"></span><span class="data-name">O₂</span></span>
          <span class="data-pct">21%</span>
        </li>
        <li class="data-row" data-gas="h2o">
          <span class="data-label-group"><span class="gas-swatch bg-h2o"></span><span class="data-name">H₂O vapor</span></span>
          <span class="data-pct">0–4%</span>
        </li>
        <li class="data-row" data-gas="co2">
          <span class="data-label-group"><span class="gas-swatch bg-co2"></span><span class="data-name">CO₂</span></span>
          <span class="data-pct">0.04%</span>
        </li>
        <li class="data-row" data-gas="other">
          <span class="data-label-group"><span class="gas-swatch bg-other"></span><span class="data-name">Ar &amp; Trace</span></span>
          <span class="data-pct">~1%</span>
        </li>
      </ul>
    </div>

  </div>

  
  <div class="insight-card">
    <span class="insight-icon">💡</span>
    <span><strong>GCSE Key Idea:</strong> Venus &amp; Mars show what Early Earth looked like before oceans dissolved CO₂ and plants generated O₂.</span>
  </div>

  <script>
    const buttons = document.querySelectorAll('.pill-btn');
    const segments = document.querySelectorAll('.bar-segment');
    const rows = document.querySelectorAll('.data-row');

    buttons.forEach(btn => {
      btn.addEventListener('click', () => {
        const gas = btn.getAttribute('data-gas');

        // Update active button
        buttons.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');

        // Filter visual segments and rows
        if (gas === 'all') {
          segments.forEach(seg => seg.classList.remove('dimmed'));
          rows.forEach(row => {
            row.classList.remove('dimmed');
            row.classList.remove('highlighted-row');
          });
        } else {
          segments.forEach(seg => {
            if (seg.getAttribute('data-gas') === gas) {
              seg.classList.remove('dimmed');
            } else {
              seg.classList.add('dimmed');
            }
          });

          rows.forEach(row => {
            if (row.getAttribute('data-gas') === gas) {
              row.classList.remove('dimmed');
              row.classList.add('highlighted-row');
            } else {
              row.classList.add('dimmed');
              row.classList.remove('highlighted-row');
            }
          });
        }
      });
    });
  </script>
</body>
</html>

The Formation of Earth's Early Atmosphere

Comparing Earth's Early Atmosphere to Mars and Venus

Condensation of Water Vapour and Ocean Formation

How Oceans Reduced Atmospheric Carbon Dioxide

The Evolution of Photosynthetic Organisms and Algae

The Great Oxygenation Event and Animal Evolution

Formation of Sedimentary Carbonate Rocks and Limestone

Formation of Fossil Fuels as Carbon Sinks

Composition of Earth's Modern Atmosphere

Interpreting Geological Evidence for Atmospheric Change

science

History and Evolution of Earth's Atmosphere

UK-GCSE-SCIENCE-CHEM-EA-01

UK-GCSE-SCIENCE-CHEM-EA-01

Child standards (2)

Aligned learning resources

Related diagrams