<!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>Energy in Reversible Reactions</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    body {
      width: 100%;
      background: #ffffff;
      color: #0f172a;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
    }

    /* Header */
    .header {
      text-align: center;
      margin-bottom: 8px;
    }

    .title-badge {
      display: inline-block;
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #475569;
      background: #f1f5f9;
      padding: 4px 12px;
      border-radius: 20px;
    }

    /* Mode selector */
    .btn-group {
      display: flex;
      gap: 6px;
      margin: 6px 0 10px;
      justify-content: center;
      flex-wrap: wrap;
    }

    .tab-btn {
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #334155;
      padding: 6px 14px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    }

    .tab-btn.active {
      background: #0f172a;
      color: #ffffff;
      border-color: #0f172a;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    /* Reaction layout */
    .reaction-stage {
      width: 100%;
      max-width: 580px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin: 4px 0;
      position: relative;
    }

    .substance-card {
      flex: 0 0 105px;
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 14px 6px;
      text-align: center;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      transition: border-color 0.3s;
    }

    .substance-card .formula {
      font-size: 17px;
      font-weight: 800;
      color: #0f172a;
      line-height: 1.2;
    }

    .substance-card .role {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      margin-top: 4px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    /* Pathways */
    .pathways-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-width: 140px;
    }

    .pathway {
      position: relative;
      border-radius: 10px;
      padding: 8px 10px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      cursor: pointer;
      transition: opacity 0.3s, filter 0.3s, box-shadow 0.3s;
      border: 1.5px solid transparent;
    }

    .pathway.dimmed {
      opacity: 0.25;
      filter: grayscale(80%);
    }

    /* Forward (Exothermic) */
    .pathway.forward {
      background: #fff7ed;
      border-color: #fdba74;
    }

    .pathway.forward.active-focus {
      box-shadow: 0 0 0 2px #ea580c;
    }

    /* Reverse (Endothermic) */
    .pathway.reverse {
      background: #f0f9ff;
      border-color: #7dd3fc;
    }

    .pathway.reverse.active-focus {
      box-shadow: 0 0 0 2px #0284c7;
    }

    .pathway-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      font-weight: 700;
    }

    .forward .label { color: #c2410c; }
    .forward .val { color: #ea580c; font-size: 14px; font-weight: 800; }
    
    .reverse .label { color: #0369a1; }
    .reverse .val { color: #0284c7; font-size: 14px; font-weight: 800; }

    .arrow-track {
      width: 100%;
      height: 6px;
      border-radius: 3px;
      position: relative;
    }

    .forward .arrow-track {
      background: #fed7aa;
    }

    .reverse .arrow-track {
      background: #bae6fd;
    }

    .arrow-track::after {
      content: "";
      position: absolute;
      top: -3px;
      width: 0;
      height: 0;
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
    }

    .forward .arrow-track::after {
      right: -2px;
      border-left: 8px solid #ea580c;
    }

    .reverse .arrow-track::after {
      left: -2px;
      border-right: 8px solid #0284c7;
    }

    .action-note {
      font-size: 11px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .forward .action-note { color: #9a3412; }
    .reverse .action-note { color: #075985; }

    /* Comparison Key */
    .comparison-grid {
      width: 100%;
      max-width: 580px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-top: 8px;
    }

    .comp-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px 10px;
      text-align: center;
    }

    .comp-title {
      font-size: 11px;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
      margin-bottom: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
    }

    .comp-value {
      font-size: 13px;
      font-weight: 800;
      color: #0f172a;
    }

    .comp-tags {
      display: flex;
      justify-content: center;
      gap: 4px;
      margin-top: 3px;
    }

    .tag {
      font-size: 11px;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 4px;
    }

    .tag-exo {
      background: #ffedd5;
      color: #c2410c;
    }

    .tag-endo {
      background: #e0f2fe;
      color: #0369a1;
    }

    @media (max-width: 420px) {
      .substance-card {
        flex: 0 0 85px;
        padding: 10px 4px;
      }
      .substance-card .formula {
        font-size: 14px;
      }
      .pathway-row {
        font-size: 11px;
      }
      .forward .val, .reverse .val {
        font-size: 12px;
      }
      .action-note {
        font-size: 10px;
      }
    }
  </style>
</head>
<body>

  
  <div class="header">
    <div class="title-badge">Energy in Reversible Reactions</div>
  </div>

  
  <div class="btn-group">
    <button class="tab-btn active" onclick="setMode('both')">Both Directions</button>
    <button class="tab-btn" onclick="setMode('forward')">Forward (Exothermic)</button>
    <button class="tab-btn" onclick="setMode('reverse')">Reverse (Endothermic)</button>
  </div>

  
  <div class="reaction-stage">
    
    <div class="substance-card" id="leftCard">
      <div class="formula">N₂ + 3H₂</div>
      <div class="role">Reactants</div>
    </div>

    
    <div class="pathways-container">
      
      
      <div class="pathway forward" id="forwardPath" onclick="setMode('forward')">
        <div class="pathway-row">
          <span class="label">Forward: Exothermic</span>
          <span class="val">ΔH = −92 kJ/mol</span>
        </div>
        <div class="arrow-track"></div>
        <div class="action-note">
          <span>🔥</span> Releases heat to surroundings
        </div>
      </div>

      
      <div class="pathway reverse" id="reversePath" onclick="setMode('reverse')">
        <div class="pathway-row">
          <span class="label">Reverse: Endothermic</span>
          <span class="val">ΔH = +92 kJ/mol</span>
        </div>
        <div class="arrow-track"></div>
        <div class="action-note">
          <span>❄️</span> Absorbs heat from surroundings
        </div>
      </div>

    </div>

    
    <div class="substance-card" id="rightCard">
      <div class="formula">2NH₃</div>
      <div class="role">Products</div>
    </div>
  </div>

  
  <div class="comparison-grid">
    <div class="comp-card">
      <div class="comp-title">⚖️ Same Magnitude</div>
      <div class="comp-value">|−92| = |+92| = 92 kJ</div>
    </div>
    <div class="comp-card">
      <div class="comp-title">⇄ Opposite Signs</div>
      <div class="comp-tags">
        <span class="tag tag-exo">(−) Out</span>
        <span class="tag tag-endo">(+) In</span>
      </div>
    </div>
  </div>

  <script>
    function setMode(mode) {
      const btns = document.querySelectorAll('.tab-btn');
      btns.forEach(b => b.classList.remove('active'));

      const forward = document.getElementById('forwardPath');
      const reverse = document.getElementById('reversePath');

      if (mode === 'forward') {
        btns[1].classList.add('active');
        forward.classList.remove('dimmed');
        forward.classList.add('active-focus');
        reverse.classList.add('dimmed');
        reverse.classList.remove('active-focus');
      } else if (mode === 'reverse') {
        btns[2].classList.add('active');
        reverse.classList.remove('dimmed');
        reverse.classList.add('active-focus');
        forward.classList.add('dimmed');
        forward.classList.remove('active-focus');
      } else {
        btns[0].classList.add('active');
        forward.classList.remove('dimmed', 'active-focus');
        reverse.classList.remove('dimmed', 'active-focus');
      }
    }
  </script>
</body>
</html>

Identifying Exothermic and Endothermic Directions in Equilibria

<!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>Equilibrium Energy Directions</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      color: #1e2945;
      background: transparent;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      user-select: none;
    }

    /* Direction filter tabs */
    .controls {
      display: flex;
      justify-content: center;
      gap: 6px;
      background: #f1f5f9;
      padding: 4px;
      border-radius: 10px;
      width: fit-content;
      margin: 0 auto;
    }
    .filter-btn {
      border: none;
      background: transparent;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      border-radius: 7px;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .filter-btn.active {
      background: #ffffff;
      color: #1e2945;
      box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    }

    /* Equation Cards */
    .cards-grid {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .eq-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 14px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    /* Chemical equation bar */
    .eq-display {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 700;
      letter-spacing: 0.5px;
      color: #1e2945;
      gap: 8px;
      padding: 6px 0;
      border-bottom: 1px dashed #e2e8f0;
    }
    .heat-tag {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px 8px;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 700;
    }
    .heat-tag.product {
      background: #ffedd5;
      color: #c2410c;
      border: 1px solid #fdba74;
    }
    .heat-tag.reactant {
      background: #e0f2fe;
      color: #0369a1;
      border: 1px solid #7dd3fc;
    }

    /* Arrow tracks */
    .direction-rows {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .dir-row {
      display: grid;
      grid-template-columns: 80px 1fr;
      align-items: center;
      gap: 10px;
      padding: 6px 10px;
      border-radius: 8px;
      transition: opacity 0.25s ease, background 0.25s ease;
      cursor: pointer;
    }
    .dir-row:hover {
      background: #f8fafc;
    }
    .dir-row.dimmed {
      opacity: 0.25;
    }

    /* Arrow badges */
    .arrow-badge {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 700;
      padding: 4px 8px;
      border-radius: 6px;
    }
    .arrow-badge.exo {
      background: #ea580c;
      color: #ffffff;
    }
    .arrow-badge.endo {
      background: #0284c7;
      color: #ffffff;
    }

    /* Label text */
    .dir-label {
      font-size: 13px;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
    }
    .type-tag {
      font-size: 11px;
      font-weight: 600;
      padding: 2px 6px;
      border-radius: 4px;
    }
    .type-tag.exo-sub {
      background: #fff7ed;
      color: #ea580c;
    }
    .type-tag.endo-sub {
      background: #f0f9ff;
      color: #0284c7;
    }

    /* Responsive adjustments */
    @media (max-width: 400px) {
      .eq-display { font-size: 16px; gap: 5px; }
      .dir-row { grid-template-columns: 75px 1fr; padding: 5px 6px; }
      .dir-label { font-size: 12px; }
      .type-tag { font-size: 10px; }
    }
  </style>
</head>
<body>

  
  <div class="controls" role="tablist">
    <button class="filter-btn active" data-filter="all">All Directions</button>
    <button class="filter-btn" data-filter="forward">Forward (→)</button>
    <button class="filter-btn" data-filter="reverse">Reverse (←)</button>
  </div>

  <div class="cards-grid">
    
    <div class="eq-card">
      <div class="eq-display">
        <span>A + B</span>
        <span style="color: #64748b; font-weight: 500;">⇌</span>
        <span>C +</span>
        <span class="heat-tag product">🔥 Heat</span>
      </div>
      <div class="direction-rows">
        <div class="dir-row" data-dir="forward">
          <div class="arrow-badge exo">Forward →</div>
          <div class="dir-label">
            <span style="color: #ea580c;">Exothermic</span>
            <span class="type-tag exo-sub">Produces Heat</span>
          </div>
        </div>
        <div class="dir-row" data-dir="reverse">
          <div class="arrow-badge endo">← Reverse</div>
          <div class="dir-label">
            <span style="color: #0284c7;">Endothermic</span>
            <span class="type-tag endo-sub">Absorbs Heat</span>
          </div>
        </div>
      </div>
    </div>

    
    <div class="eq-card">
      <div class="eq-display">
        <span>A +</span>
        <span class="heat-tag reactant">❄️ Heat</span>
        <span style="color: #64748b; font-weight: 500;">⇌</span>
        <span>B</span>
      </div>
      <div class="direction-rows">
        <div class="dir-row" data-dir="forward">
          <div class="arrow-badge endo">Forward →</div>
          <div class="dir-label">
            <span style="color: #0284c7;">Endothermic</span>
            <span class="type-tag endo-sub">Consumes Heat</span>
          </div>
        </div>
        <div class="dir-row" data-dir="reverse">
          <div class="arrow-badge exo">← Reverse</div>
          <div class="dir-label">
            <span style="color: #ea580c;">Exothermic</span>
            <span class="type-tag exo-sub">Releases Heat</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    const filterBtns = document.querySelectorAll('.filter-btn');
    const dirRows = document.querySelectorAll('.dir-row');

    function setFilter(filter) {
      filterBtns.forEach(btn => {
        btn.classList.toggle('active', btn.dataset.filter === filter);
      });

      dirRows.forEach(row => {
        if (filter === 'all' || row.dataset.dir === filter) {
          row.classList.remove('dimmed');
        } else {
          row.classList.add('dimmed');
        }
      });
    }

    filterBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        setFilter(btn.dataset.filter);
      });
    });

    dirRows.forEach(row => {
      row.addEventListener('click', () => {
        setFilter(row.dataset.dir);
      });
    });
  </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">
  <title>Exothermic vs Endothermic Enthalpy</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      width: 100%;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      color: #1e2945;
      background: transparent;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

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

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

    .reaction-card {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      transition: box-shadow 0.2s ease, border-color 0.2s ease;
    }

    .reaction-card:focus,
    .reaction-card.active {
      box-shadow: 0 4px 12px rgba(30, 41, 69, 0.08);
    }

    .card-exo {
      border-color: #fdba74;
    }
    .card-exo.active {
      border-color: #ea580c;
    }

    .card-endo {
      border-color: #93c5fd;
    }
    .card-endo.active {
      border-color: #0284c7;
    }

    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      margin-bottom: 6px;
    }

    .card-title {
      font-size: 15px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .title-exo { color: #c2410c; }
    .title-endo { color: #0369a1; }

    .delta-badge {
      font-size: 13px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 6px;
    }
    .badge-exo { background: #ffedd5; color: #c2410c; }
    .badge-endo { background: #e0f2fe; color: #0369a1; }

    .diagram-svg {
      width: 100%;
      height: 180px;
      overflow: visible;
    }

    .energy-level {
      stroke-width: 3;
      stroke-linecap: round;
    }

    .label-text {
      font-size: 11px;
      font-weight: 600;
      fill: #475569;
    }

    .val-text {
      font-size: 13px;
      font-weight: 700;
    }

    .heat-arrow {
      stroke-dasharray: 6 3;
      animation: heatFlow 2s linear infinite;
    }

    @keyframes heatFlow {
      to {
        stroke-dashoffset: -18;
      }
    }

    .heat-banner {
      width: 100%;
      text-align: center;
      font-size: 12px;
      font-weight: 700;
      padding: 6px;
      border-radius: 8px;
      margin-top: 6px;
    }

    .banner-exo {
      background: #fff7ed;
      color: #9a3412;
      border: 1px solid #ffedd5;
    }

    .banner-endo {
      background: #f0f9ff;
      color: #075985;
      border: 1px solid #e0f2fe;
    }

    .controls {
      display: flex;
      justify-content: center;
      gap: 8px;
    }

    .btn-toggle {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      padding: 6px 14px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.15s ease, border-color 0.15s ease;
    }

    .btn-toggle.active {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
    }
  </style>
</head>
<body>

  <div class="controls">
    <button class="btn-toggle active" id="btnBoth" onclick="showMode('both')">Compare Both</button>
    <button class="btn-toggle" id="btnExo" onclick="showMode('exo')">Exothermic (−ΔH)</button>
    <button class="btn-toggle" id="btnEndo" onclick="showMode('endo')">Endothermic (+ΔH)</button>
  </div>

  <div class="grid-container">
    
    <div class="reaction-card card-exo active" id="cardExo" onclick="showMode('exo')">
      <div class="card-header">
        <span class="card-title title-exo">🔥 Exothermic</span>
        <span class="delta-badge badge-exo">−ΔH</span>
      </div>

      <svg class="diagram-svg" viewBox="0 0 240 170">
        
        <line x1="25" y1="150" x2="25" y2="20" stroke="#94a3b8" stroke-width="2" marker-end="url(#arrow-axis)"/>
        <text x="18" y="14" font-size="10" font-weight="700" fill="#64748b" text-anchor="middle">Energy</text>

        
        
        <line x1="35" y1="50" x2="105" y2="50" stroke="#ea580c" class="energy-level"/>
        <text x="70" y="42" text-anchor="middle" class="label-text">Reactants</text>

        
        <line x1="135" y1="125" x2="205" y2="125" stroke="#ea580c" class="energy-level"/>
        <text x="170" y="143" text-anchor="middle" class="label-text">Products</text>

        
        <path d="M 105 50 Q 120 28 135 125" fill="none" stroke="#cbd5e1" stroke-width="2" stroke-dasharray="4 3"/>

        
        <line x1="215" y1="50" x2="215" y2="125" stroke="#ea580c" stroke-width="2.5" marker-end="url(#arrow-exo)"/>
        <text x="218" y="92" class="val-text" fill="#ea580c">−ΔH</text>

        
        <g stroke="#f97316" stroke-width="2.5" fill="none">
          <path class="heat-arrow" d="M 115 80 L 85 88" marker-end="url(#arrow-heat-out)"/>
          <path class="heat-arrow" d="M 125 95 L 95 110" marker-end="url(#arrow-heat-out)"/>
        </g>

        
        <defs>
          <marker id="arrow-axis" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
            <path d="M 0 10 L 5 0 L 10 10 z" fill="#94a3b8" />
          </marker>
          <marker id="arrow-exo" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto">
            <path d="M 0 0 L 10 5 L 0 10 z" fill="#ea580c" />
          </marker>
          <marker id="arrow-heat-out" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto">
            <path d="M 0 0 L 10 5 L 0 10 z" fill="#f97316" />
          </marker>
        </defs>
      </svg>

      <div class="heat-banner banner-exo">
        Heat Released to Surroundings
      </div>
    </div>

    
    <div class="reaction-card card-endo active" id="cardEndo" onclick="showMode('endo')">
      <div class="card-header">
        <span class="card-title title-endo">❄️ Endothermic</span>
        <span class="delta-badge badge-endo">+ΔH</span>
      </div>

      <svg class="diagram-svg" viewBox="0 0 240 170">
        
        <line x1="25" y1="150" x2="25" y2="20" stroke="#94a3b8" stroke-width="2" marker-end="url(#arrow-axis-endo)"/>
        <text x="18" y="14" font-size="10" font-weight="700" fill="#64748b" text-anchor="middle">Energy</text>

        
        
        <line x1="35" y1="125" x2="105" y2="125" stroke="#0284c7" class="energy-level"/>
        <text x="70" y="143" text-anchor="middle" class="label-text">Reactants</text>

        
        <line x1="135" y1="50" x2="205" y2="50" stroke="#0284c7" class="energy-level"/>
        <text x="170" y="42" text-anchor="middle" class="label-text">Products</text>

        
        <path d="M 105 125 Q 120 28 135 50" fill="none" stroke="#cbd5e1" stroke-width="2" stroke-dasharray="4 3"/>

        
        <line x1="215" y1="125" x2="215" y2="50" stroke="#0284c7" stroke-width="2.5" marker-end="url(#arrow-endo)"/>
        <text x="218" y="92" class="val-text" fill="#0284c7">+ΔH</text>

        
        <g stroke="#0ea5e9" stroke-width="2.5" fill="none">
          <path class="heat-arrow" d="M 85 88 L 115 80" marker-end="url(#arrow-heat-in)"/>
          <path class="heat-arrow" d="M 95 110 L 125 95" marker-end="url(#arrow-heat-in)"/>
        </g>

        
        <defs>
          <marker id="arrow-axis-endo" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
            <path d="M 0 10 L 5 0 L 10 10 z" fill="#94a3b8" />
          </marker>
          <marker id="arrow-endo" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto">
            <path d="M 0 0 L 10 5 L 0 10 z" fill="#0284c7" />
          </marker>
          <marker id="arrow-heat-in" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto">
            <path d="M 0 0 L 10 5 L 0 10 z" fill="#0ea5e9" />
          </marker>
        </defs>
      </svg>

      <div class="heat-banner banner-endo">
        Heat Absorbed from Surroundings
      </div>
    </div>
  </div>

  <script>
    function showMode(mode) {
      const cardExo = document.getElementById('cardExo');
      const cardEndo = document.getElementById('cardEndo');
      const btnBoth = document.getElementById('btnBoth');
      const btnExo = document.getElementById('btnExo');
      const btnEndo = document.getElementById('btnEndo');

      btnBoth.classList.remove('active');
      btnExo.classList.remove('active');
      btnEndo.classList.remove('active');

      if (mode === 'exo') {
        cardExo.classList.add('active');
        cardExo.style.opacity = '1';
        cardEndo.classList.remove('active');
        cardEndo.style.opacity = '0.35';
        btnExo.classList.add('active');
      } else if (mode === 'endo') {
        cardEndo.classList.add('active');
        cardEndo.style.opacity = '1';
        cardExo.classList.remove('active');
        cardExo.style.opacity = '0.35';
        btnEndo.classList.add('active');
      } else {
        cardExo.classList.add('active');
        cardEndo.classList.add('active');
        cardExo.style.opacity = '1';
        cardEndo.style.opacity = '1';
        btnBoth.classList.add('active');
      }
    }
  </script>
</body>
</html>

UK-GCSE-SCIENCE-CHEM-RC-02-03

Aligned learning resources

Related diagrams