<!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>GHS Hazard Pictograms</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background: #f8fafc;
      color: #1e2945;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      min-height: 100%;
    }

    /* Filter Controls */
    .controls {
      display: flex;
      gap: 6px;
      margin-bottom: 10px;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;
      max-width: 600px;
    }

    .filter-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 20px;
      padding: 5px 12px;
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

    .filter-btn.active {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
      box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
    }

    /* Grid Layout */
    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      width: 100%;
      max-width: 600px;
      perspective: 1000px;
    }

    @media (max-width: 380px) {
      .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
      }
    }

    /* Card Flip Structure */
    .card-container {
      position: relative;
      height: 140px;
      cursor: pointer;
      perspective: 1000px;
      transition: opacity 0.25s ease;
    }

    .card-container.dimmed {
      opacity: 0.25;
      pointer-events: none;
    }

    .card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      text-align: center;
      transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      transform-style: preserve-3d;
      border-radius: 8px;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    }

    .card-container.flipped .card-inner {
      transform: rotateY(180deg);
    }

    .card-face {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      border-radius: 8px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 6px;
    }

    /* Front Face */
    .card-front {
      z-index: 2;
    }

    .diamond {
      width: 52px;
      height: 52px;
      border: 3.5px solid #dc2626;
      border-radius: 4px;
      transform: rotate(45deg);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 6px 0 10px 0;
      background: #ffffff;
      box-shadow: 0 1px 3px rgba(220, 38, 38, 0.15);
    }

    .diamond-content {
      transform: rotate(-45deg);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
    }

    .diamond svg {
      width: 32px;
      height: 32px;
      fill: #0f172a;
    }

    .card-title {
      font-size: 11.5px;
      font-weight: 700;
      color: #0f172a;
      line-height: 1.15;
      text-align: center;
      max-width: 95%;
    }

    .card-hint {
      font-size: 9.5px;
      color: #94a3b8;
      margin-top: 3px;
    }

    /* Back Face */
    .card-back {
      transform: rotateY(180deg);
      background: #f8fafc;
      border-color: #cbd5e1;
      justify-content: space-between;
      padding: 8px;
      text-align: left;
    }

    .back-header {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #e2e8f0;
      padding-bottom: 3px;
    }

    .category-tag {
      font-size: 9px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.4px;
      padding: 1px 5px;
      border-radius: 4px;
    }

    .tag-physical { background: #fee2e2; color: #b91c1c; }
    .tag-health { background: #fef3c7; color: #b45309; }
    .tag-env { background: #dcfce7; color: #15803d; }

    .back-flip-icon {
      font-size: 10px;
      color: #94a3b8;
    }

    .back-body {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 4px;
      font-size: 10.5px;
      color: #334155;
    }

    .data-row {
      display: flex;
      flex-direction: column;
    }

    .data-label {
      font-size: 8.5px;
      font-weight: 700;
      text-transform: uppercase;
      color: #64748b;
    }

    .data-val {
      font-weight: 600;
      color: #0f172a;
      line-height: 1.1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .data-val.storage {
      color: #2563eb;
      font-size: 10px;
    }
  </style>
</head>
<body>

  <div class="controls">
    <button class="filter-btn active" onclick="setFilter('all')">All (9)</button>
    <button class="filter-btn" onclick="setFilter('physical')">⚙️ Physical</button>
    <button class="filter-btn" onclick="setFilter('health')">⚠️ Health</button>
    <button class="filter-btn" onclick="setFilter('env')">🌱 Environment</button>
  </div>

  <div class="grid" id="cardGrid">

    
    <div class="card-container" data-cat="physical" onclick="toggleCard(this)">
      <div class="card-inner">
        <div class="card-face card-front">
          <div class="diamond">
            <div class="diamond-content">
              <svg viewBox="0 0 24 24"><path d="M12 2C10.5 5 7.5 8 7.5 12.5a4.5 4.5 0 009 0C16.5 8 13.5 5 12 2zm0 17a2.5 2.5 0 01-2.5-2.5c0-1.8 1.5-3 2.5-4.5 1 1.5 2.5 2.7 2.5 4.5A2.5 2.5 0 0112 19z"/></svg>
            </div>
          </div>
          <div class="card-title">Flame</div>
          <div class="card-hint">Tap to inspect ↻</div>
        </div>
        <div class="card-face card-back">
          <div class="back-header">
            <span class="category-tag tag-physical">Physical</span>
            <span class="back-flip-icon">↻</span>
          </div>
          <div class="back-body">
            <div class="data-row">
              <span class="data-label">Trigger</span>
              <span class="data-val">Flash Point &lt; 60°C</span>
            </div>
            <div class="data-row">
              <span class="data-label">Reagent</span>
              <span class="data-val">Acetone, Ethanol</span>
            </div>
            <div class="data-row">
              <span class="data-label">Storage</span>
              <span class="data-val storage">Flammables Cabinet</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    
    <div class="card-container" data-cat="physical" onclick="toggleCard(this)">
      <div class="card-inner">
        <div class="card-face card-front">
          <div class="diamond">
            <div class="diamond-content">
              <svg viewBox="0 0 24 24"><circle cx="12" cy="14" r="5" fill="none" stroke="#0f172a" stroke-width="2.5"/><path d="M12 3c-1.5 2.5-3 4-3 6.5a3 3 0 006 0c0-2.5-1.5-4-3-6.5z"/></svg>
            </div>
          </div>
          <div class="card-title">Oxidizer</div>
          <div class="card-hint">Tap to inspect ↻</div>
        </div>
        <div class="card-face card-back">
          <div class="back-header">
            <span class="category-tag tag-physical">Physical</span>
            <span class="back-flip-icon">↻</span>
          </div>
          <div class="back-body">
            <div class="data-row">
              <span class="data-label">Trigger</span>
              <span class="data-val">Yields Oxygen / Burns</span>
            </div>
            <div class="data-row">
              <span class="data-label">Reagent</span>
              <span class="data-val">KMnO₄, 30% H₂O₂</span>
            </div>
            <div class="data-row">
              <span class="data-label">Storage</span>
              <span class="data-val storage">Isolate from Organics</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    
    <div class="card-container" data-cat="physical" onclick="toggleCard(this)">
      <div class="card-inner">
        <div class="card-face card-front">
          <div class="diamond">
            <div class="diamond-content">
              <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 3v3m0 12v3M3 12h3m12 0h3m-15.5-6.5l2.5 2.5m10 10l2.5 2.5m-15 0l2.5-2.5m10-10l2.5-2.5" stroke="#0f172a" stroke-width="2" stroke-linecap="round"/></svg>
            </div>
          </div>
          <div class="card-title">Explosive</div>
          <div class="card-hint">Tap to inspect ↻</div>
        </div>
        <div class="card-face card-back">
          <div class="back-header">
            <span class="category-tag tag-physical">Physical</span>
            <span class="back-flip-icon">↻</span>
          </div>
          <div class="back-body">
            <div class="data-row">
              <span class="data-label">Trigger</span>
              <span class="data-val">Self-Reactive / Blast</span>
            </div>
            <div class="data-row">
              <span class="data-label">Reagent</span>
              <span class="data-val">Picric Acid (Dry), TNT</span>
            </div>
            <div class="data-row">
              <span class="data-label">Storage</span>
              <span class="data-val storage">Explosion-Proof / Wet</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    
    <div class="card-container" data-cat="physical" onclick="toggleCard(this)">
      <div class="card-inner">
        <div class="card-face card-front">
          <div class="diamond">
            <div class="diamond-content">
              <svg viewBox="0 0 24 24"><rect x="7" y="6" width="10" height="14" rx="4"/><rect x="10" y="3" width="4" height="3" rx="1"/></svg>
            </div>
          </div>
          <div class="card-title">Gas Cylinder</div>
          <div class="card-hint">Tap to inspect ↻</div>
        </div>
        <div class="card-face card-back">
          <div class="back-header">
            <span class="category-tag tag-physical">Physical</span>
            <span class="back-flip-icon">↻</span>
          </div>
          <div class="back-body">
            <div class="data-row">
              <span class="data-label">Trigger</span>
              <span class="data-val">Pressure ≥ 200 kPa</span>
            </div>
            <div class="data-row">
              <span class="data-label">Reagent</span>
              <span class="data-val">Liquid N₂, Compressed He</span>
            </div>
            <div class="data-row">
              <span class="data-label">Storage</span>
              <span class="data-val storage">Chained Upright + Cap</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    
    <div class="card-container" data-cat="physical" onclick="toggleCard(this)">
      <div class="card-inner">
        <div class="card-face card-front">
          <div class="diamond">
            <div class="diamond-content">
              <svg viewBox="0 0 24 24"><path d="M4 4l5 7h6l5-7M3 17h18v3H3zM9 13v2m6-2v2" stroke="#0f172a" stroke-width="2" stroke-linecap="round"/></svg>
            </div>
          </div>
          <div class="card-title">Corrosive</div>
          <div class="card-hint">Tap to inspect ↻</div>
        </div>
        <div class="card-face card-back">
          <div class="back-header">
            <span class="category-tag tag-physical">Phys / Health</span>
            <span class="back-flip-icon">↻</span>
          </div>
          <div class="back-body">
            <div class="data-row">
              <span class="data-label">Trigger</span>
              <span class="data-val">pH ≤ 2 or ≥ 11.5 / Skin</span>
            </div>
            <div class="data-row">
              <span class="data-label">Reagent</span>
              <span class="data-val">HNO₃, NaOH, HCl</span>
            </div>
            <div class="data-row">
              <span class="data-label">Storage</span>
              <span class="data-val storage">Acid / Base Cabinets</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    
    <div class="card-container" data-cat="health" onclick="toggleCard(this)">
      <div class="card-inner">
        <div class="card-face card-front">
          <div class="diamond">
            <div class="diamond-content">
              <svg viewBox="0 0 24 24"><path d="M12 3a6 6 0 00-6 6c0 2.5 1.5 4.5 3.5 5.5v1.5h5V14.5c2-.9 3.5-3 3.5-5.5a6 6 0 00-6-6zm-2 5a1 1 0 110 2 1 1 0 010-2zm4 0a1 1 0 110 2 1 1 0 010-2z"/><path d="M4 19l16-3M4 16l16 3" stroke="#0f172a" stroke-width="2" stroke-linecap="round"/></svg>
            </div>
          </div>
          <div class="card-title">Acute Toxicity</div>
          <div class="card-hint">Tap to inspect ↻</div>
        </div>
        <div class="card-face card-back">
          <div class="back-header">
            <span class="category-tag tag-health">Health</span>
            <span class="back-flip-icon">↻</span>
          </div>
          <div class="back-body">
            <div class="data-row">
              <span class="data-label">Trigger</span>
              <span class="data-val">Oral LD₅₀ ≤ 300 mg/kg</span>
            </div>
            <div class="data-row">
              <span class="data-label">Reagent</span>
              <span class="data-val">NaCN, OsO₄, Nicotine</span>
            </div>
            <div class="data-row">
              <span class="data-label">Storage</span>
              <span class="data-val storage">Locked Toxic Cabinet</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    
    <div class="card-container" data-cat="health" onclick="toggleCard(this)">
      <div class="card-inner">
        <div class="card-face card-front">
          <div class="diamond">
            <div class="diamond-content">
              <svg viewBox="0 0 24 24"><circle cx="12" cy="7" r="3"/><path d="M7 19c0-3 2-5 5-5s5 2 5 5"/><path d="M12 11l1 3 3 1-3 1-1 3-1-3-3-1 3-1z" fill="#0f172a"/></svg>
            </div>
          </div>
          <div class="card-title">Health Hazard</div>
          <div class="card-hint">Tap to inspect ↻</div>
        </div>
        <div class="card-face card-back">
          <div class="back-header">
            <span class="category-tag tag-health">Health</span>
            <span class="back-flip-icon">↻</span>
          </div>
          <div class="back-body">
            <div class="data-row">
              <span class="data-label">Trigger</span>
              <span class="data-val">Carcinogen / Mutagen</span>
            </div>
            <div class="data-row">
              <span class="data-label">Reagent</span>
              <span class="data-val">Benzene, Formaldehyde</span>
            </div>
            <div class="data-row">
              <span class="data-label">Storage</span>
              <span class="data-val storage">Fume Hood / Vented</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    
    <div class="card-container" data-cat="health" onclick="toggleCard(this)">
      <div class="card-inner">
        <div class="card-face card-front">
          <div class="diamond">
            <div class="diamond-content">
              <svg viewBox="0 0 24 24"><path d="M12 4v10m0 4v2" stroke="#0f172a" stroke-width="3.5" stroke-linecap="round"/></svg>
            </div>
          </div>
          <div class="card-title">Irritant</div>
          <div class="card-hint">Tap to inspect ↻</div>
        </div>
        <div class="card-face card-back">
          <div class="back-header">
            <span class="category-tag tag-health">Health</span>
            <span class="back-flip-icon">↻</span>
          </div>
          <div class="back-body">
            <div class="data-row">
              <span class="data-label">Trigger</span>
              <span class="data-val">Sensitizer / Eye Irritant</span>
            </div>
            <div class="data-row">
              <span class="data-label">Reagent</span>
              <span class="data-val">Isopropanol, Bleach</span>
            </div>
            <div class="data-row">
              <span class="data-label">Storage</span>
              <span class="data-val storage">General Chemical Shelf</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    
    <div class="card-container" data-cat="env" onclick="toggleCard(this)">
      <div class="card-inner">
        <div class="card-face card-front">
          <div class="diamond">
            <div class="diamond-content">
              <svg viewBox="0 0 24 24"><path d="M6 18c2-2 3-5 3-9m0 4l4-3m-4 5l3 3M4 20h16" stroke="#0f172a" stroke-width="2" stroke-linecap="round"/><circle cx="17" cy="14" r="3"/></svg>
            </div>
          </div>
          <div class="card-title">Environmental</div>
          <div class="card-hint">Tap to inspect ↻</div>
        </div>
        <div class="card-face card-back">
          <div class="back-header">
            <span class="category-tag tag-env">Environment</span>
            <span class="back-flip-icon">↻</span>
          </div>
          <div class="back-body">
            <div class="data-row">
              <span class="data-label">Trigger</span>
              <span class="data-val">Aquatic LC₅₀ ≤ 1 mg/L</span>
            </div>
            <div class="data-row">
              <span class="data-label">Reagent</span>
              <span class="data-val">Copper Sulfate, Lindane</span>
            </div>
            <div class="data-row">
              <span class="data-label">Storage</span>
              <span class="data-val storage">No Drain Disposal</span>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>

  <script>
    function toggleCard(container) {
      container.classList.toggle('flipped');
    }

    function setFilter(category) {
      // Update buttons
      const buttons = document.querySelectorAll('.filter-btn');
      buttons.forEach(btn => btn.classList.remove('active'));
      event.target.classList.add('active');

      // Filter cards
      const cards = document.querySelectorAll('.card-container');
      cards.forEach(card => {
        const cardCat = card.getAttribute('data-cat');
        if (category === 'all' || cardCat === category) {
          card.classList.remove('dimmed');
        } else {
          card.classList.add('dimmed');
          card.classList.remove('flipped'); // reset flip if filtered out
        }
      });
    }
  </script>
</body>
</html>

Interpreting Safety Data Sheets and GHS Hazard Classifications

<!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>SDS 16-Section Structure</title>
  <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;
      padding: 10px;
      user-select: none;
    }

    .main-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      margin-bottom: 10px;
    }

    @media (max-width: 520px) {
      .main-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    .group-col {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .group-header {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 4px 6px;
      border-radius: 4px;
      text-align: center;
    }

    .g1-head { background: #fef3c7; color: #92400e; }
    .g2-head { background: #fee2e2; color: #991b1b; }
    .g3-head { background: #e0f2fe; color: #075985; }
    .g4-head { background: #f1f5f9; color: #475569; }

    .sec-btn {
      position: relative;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      padding: 6px 6px 6px 26px;
      text-align: left;
      font-size: 12px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      line-height: 1.2;
      min-height: 38px;
      display: flex;
      align-items: center;
      transition: background-color 0.15s ease, box-shadow 0.15s ease;
    }

    .sec-btn:active {
      background: #e2e8f0;
    }

    .sec-btn.active {
      border-color: #22b7ff;
      background: #f0f9ff;
      box-shadow: 0 0 0 2px #22b7ff;
    }

    .sec-num {
      position: absolute;
      left: 5px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 11px;
      font-weight: 800;
      color: #94a3b8;
      width: 16px;
      text-align: center;
    }

    /* Mandatory Pre-Lab Rings */
    .mandatory {
      border-color: #f59e0b;
      background: #fffbeb;
      box-shadow: 0 0 0 1.5px #f59e0b;
    }

    .mandatory .sec-num {
      color: #d97706;
    }

    .mandatory::after {
      content: "✦";
      position: absolute;
      right: 4px;
      top: 2px;
      font-size: 10px;
      color: #d97706;
    }

    /* Action Scenario Drawer */
    .scenario-box {
      border: 1px solid #cbd5e1;
      background: #ffffff;
      border-radius: 8px;
      padding: 10px 12px;
      min-height: 84px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    .scenario-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 4px;
      font-size: 11px;
      font-weight: 700;
    }

    .scenario-title {
      color: #0284c7;
    }

    .badge-prelab {
      background: #fef3c7;
      color: #b45309;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 800;
    }

    .action-text {
      font-size: 13px;
      color: #1e2945;
      line-height: 1.35;
    }

    .action-label {
      font-weight: 700;
      color: #0f172a;
    }

    .legend-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-top: 8px;
      font-size: 11px;
      color: #64748b;
      font-weight: 500;
    }

    .legend-tag {
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
  </style>
</head>
<body>

  <div class="main-grid">
    
    <div class="group-col">
      <div class="group-header g1-head">1. Identity</div>
      <button class="sec-btn" data-sec="1"><span class="sec-num">1</span>Identification</button>
      <button class="sec-btn mandatory" data-sec="2"><span class="sec-num">2</span>Hazards ID</button>
      <button class="sec-btn" data-sec="3"><span class="sec-num">3</span>Composition</button>
    </div>

    
    <div class="group-col">
      <div class="group-header g2-head">2. Emergency</div>
      <button class="sec-btn mandatory" data-sec="4"><span class="sec-num">4</span>First-Aid</button>
      <button class="sec-btn" data-sec="5"><span class="sec-num">5</span>Firefighting</button>
      <button class="sec-btn" data-sec="6"><span class="sec-num">6</span>Accidental Spill</button>
    </div>

    
    <div class="group-col">
      <div class="group-header g3-head">3. Lab Handling</div>
      <button class="sec-btn mandatory" data-sec="7"><span class="sec-num">7</span>Handling/Store</button>
      <button class="sec-btn mandatory" data-sec="8"><span class="sec-num">8</span>PPE & Exposure</button>
      <button class="sec-btn" data-sec="9"><span class="sec-num">9</span>Properties</button>
      <button class="sec-btn" data-sec="10"><span class="sec-num">10</span>Reactivity</button>
    </div>

    
    <div class="group-col">
      <div class="group-header g4-head">4. Technical</div>
      <button class="sec-btn" data-sec="11"><span class="sec-num">11</span>Toxicology</button>
      <button class="sec-btn" data-sec="12"><span class="sec-num">12</span>Ecological</button>
      <button class="sec-btn" data-sec="13"><span class="sec-num">13</span>Disposal</button>
      <button class="sec-btn" data-sec="14"><span class="sec-num">14</span>Transport</button>
      <button class="sec-btn" data-sec="15"><span class="sec-num">15</span>Regulatory</button>
      <button class="sec-btn" data-sec="16"><span class="sec-num">16</span>Other Info</button>
    </div>
  </div>

  <div class="scenario-box">
    <div class="scenario-meta">
      <span class="scenario-title" id="secHeading">Section 2: Hazard Identification</span>
      <span class="badge-prelab" id="badgePrelab">✦ Mandatory Pre-Lab</span>
    </div>
    <div class="action-text" id="secAction">
      <span class="action-label">Lab Action:</span> Check GHS pictograms & signal words ("DANGER: Oxidizer & Severe Skin Burns") before handling.
    </div>
  </div>

  <div class="legend-row">
    <span class="legend-tag"><span style="color:#d97706; font-weight:800;">✦</span> Mandatory Pre-Lab Review (Sec 2, 4, 7, 8)</span>
    <span class="legend-tag">⚡ Tap sections for HNO₃ lab decisions</span>
  </div>

  <script>
    const data = {
      1: { title: "Section 1: Identification", pre: false, action: "Verify product identifier (HNO₃ 70%), manufacturer emergency hotline, and restricted chemical uses." },
      2: { title: "Section 2: Hazard Identification", pre: true, action: "Confirm pictograms (Flame Over Circle, Corrosion) and GHS Hazard Codes (H272 Oxidizer, H314 Severe Burns)." },
      3: { title: "Section 3: Composition / Ingredients", pre: false, action: "Check purity vs aqueous balance (68-70% Nitric Acid, CAS 7697-37-2, in 30% H₂O)." },
      4: { title: "Section 4: First-Aid Measures", pre: true, action: "Skin contact: Flush under eyewash/shower ≥15 min immediately. Do NOT induce vomiting if swallowed." },
      5: { title: "Section 5: Firefighting Measures", pre: false, action: "Identify non-flammable nature but strong oxidizing capacity; extinguish surrounding fire with water spray." },
      6: { title: "Section 6: Accidental Release Measures", pre: false, action: "Evacuate area, ventilate vapors, and neutralize acid spill cautiously using sodium bicarbonate slurry." },
      7: { title: "Section 7: Handling and Storage", pre: true, action: "Store in dedicated acid cabinet away from organic bases, flammable solvents, and metal powders." },
      8: { title: "Section 8: Exposure Controls & PPE", pre: true, action: "Work exclusively inside a certified fume hood. Wear neoprene/butyl gloves and a chemical face shield." },
      9: { title: "Section 9: Physical & Chemical Properties", pre: false, action: "Note boiling point (121°C), pungent choking odor, and high density (1.41 g/cm³) before pouring." },
      10: { title: "Section 10: Stability & Reactivity", pre: false, action: "Avoid heat and organic contact; decomposing acid releases toxic reddish-brown nitrogen dioxide gas." },
      11: { title: "Section 11: Toxicological Information", pre: false, action: "Review acute inhalation toxicity (LC50) and corrosive tissue destruction profiles." },
      12: { title: "Section 12: Ecological Information", pre: false, action: "Assess pH shock danger to aquatic ecosystems before drain discharges." },
      13: { title: "Section 13: Disposal Considerations", pre: false, action: "Segregate into inorganic hazardous waste container; never pour unneutralized into sinks." },
      14: { title: "Section 14: Transport Information", pre: false, action: "Verify UN2031 Class 8 (Corrosive) with Class 5.1 (Oxidizer) subsidiary risk labels." },
      15: { title: "Section 15: Regulatory Information", pre: false, action: "Check national hazardous substance inventories and threshold report quantities (OSHA/EPA)." },
      16: { title: "Section 16: Other Information", pre: false, action: "Check SDS revision date and NFPA 704 diamond ratings (Health 4, Flammability 0, Instability 0, OX)." }
    };

    const buttons = document.querySelectorAll('.sec-btn');
    const heading = document.getElementById('secHeading');
    const action = document.getElementById('secAction');
    const badge = document.getElementById('badgePrelab');

    function selectSection(num) {
      buttons.forEach(b => b.classList.toggle('active', b.dataset.sec == num));
      const info = data[num];
      heading.textContent = info.title;
      action.innerHTML = `<span class="action-label">Lab Action:</span> ${info.action}`;
      badge.style.display = info.pre ? 'inline-block' : 'none';
    }

    buttons.forEach(btn => {
      btn.addEventListener('click', () => selectSection(btn.dataset.sec));
    });

    // Default to Section 2 (Hazards)
    selectSection(2);
  </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>SDS to Protocol Translation</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      background: #ffffff;
      color: #1e2945;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* Top SDS Data Strip */
    .sds-strip {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 8px;
      align-items: center;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 12px;
    }

    .chemical-id {
      display: flex;
      flex-direction: column;
    }

    .chem-title {
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
    }

    .danger-badge {
      display: inline-block;
      background: #ef4444;
      color: #ffffff;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.5px;
      padding: 2px 6px;
      border-radius: 4px;
      text-transform: uppercase;
      margin-top: 2px;
      width: fit-content;
    }

    .ghs-diamonds {
      display: flex;
      gap: 6px;
      justify-content: center;
    }

    .diamond {
      width: 26px;
      height: 26px;
      border: 2px solid #ef4444;
      background: #ffffff;
      transform: rotate(45deg);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }

    .diamond-icon {
      transform: rotate(-45deg);
      font-size: 13px;
      line-height: 1;
    }

    .haz-codes {
      display: flex;
      gap: 4px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .haz-pill {
      font-size: 11px;
      font-weight: 600;
      padding: 2px 6px;
      background: #fee2e2;
      color: #b91c1c;
      border-radius: 4px;
      border: 1px solid #fecaca;
    }

    /* Protocol Checklist Grid */
    .grid-cards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

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

    .mitigation-card {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 10px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 10px;
      transition: background-color 0.2s ease, border-color 0.2s ease;
      user-select: none;
    }

    .mitigation-card:active {
      background-color: #f1f5f9;
    }

    .mitigation-card.checked {
      background: #f0fdf4;
      border-color: #86efac;
    }

    .check-circle {
      width: 24px;
      height: 24px;
      min-width: 24px;
      border-radius: 50%;
      border: 2px solid #cbd5e1;
      background: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 700;
      color: transparent;
      transition: all 0.2s ease;
    }

    .mitigation-card.checked .check-circle {
      background: #16a34a;
      border-color: #16a34a;
      color: #ffffff;
    }

    .card-content {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }

    .card-category {
      font-size: 10px;
      text-transform: uppercase;
      font-weight: 700;
      letter-spacing: 0.5px;
      color: #64748b;
    }

    .card-label {
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
      line-height: 1.2;
    }

    .card-icon {
      font-size: 18px;
      margin-left: auto;
      opacity: 0.8;
    }

    /* Bench Execution Stage */
    .bench-stage {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 110px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .bench-visual {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      width: 100%;
      transition: opacity 0.3s ease;
    }

    .locked-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      color: #64748b;
    }

    .lock-icon {
      font-size: 26px;
    }

    .lock-msg {
      font-size: 13px;
      font-weight: 600;
      color: #475569;
    }

    .ready-state {
      display: none;
      flex-direction: row;
      align-items: center;
      justify-content: space-around;
      width: 100%;
      animation: fadeIn 0.3s ease;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .flask-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }

    .flask-art {
      font-size: 32px;
      line-height: 1;
    }

    .flow-arrow {
      font-size: 18px;
      color: #0284c7;
      font-weight: bold;
    }

    .action-text {
      font-size: 12px;
      font-weight: 700;
      color: #0f172a;
      background: #e0f2fe;
      padding: 4px 8px;
      border-radius: 4px;
      border: 1px solid #bae6fd;
    }

    /* Reset / Progress bar */
    .progress-bar-container {
      width: 100%;
      height: 4px;
      background: #e2e8f0;
      border-radius: 2px;
      overflow: hidden;
    }

    .progress-fill {
      height: 100%;
      width: 0%;
      background: #16a34a;
      transition: width 0.25s ease;
    }
  </style>
</head>
<body>

  
  <div class="sds-strip">
    <div class="chemical-id">
      <span class="chem-title">12 M HCl</span>
      <span class="danger-badge">DANGER</span>
    </div>
    
    <div class="ghs-diamonds">
      <div class="diamond" title="Corrosive">
        <span class="diamond-icon">🧪</span>
      </div>
      <div class="diamond" title="Irritant">
        <span class="diamond-icon">❗</span>
      </div>
    </div>

    <div class="haz-codes">
      <span class="haz-pill">H314: Skin/Eye</span>
      <span class="haz-pill">H335: Vapors</span>
    </div>
  </div>

  
  <div class="grid-cards">
    
    <div class="mitigation-card" onclick="toggleCheck(0)" id="card-0">
      <div class="check-circle" id="chk-0">✓</div>
      <div class="card-content">
        <span class="card-category">PPE</span>
        <span class="card-label">Nitrile + Apron + Goggles</span>
      </div>
      <span class="card-icon">🥽</span>
    </div>

    
    <div class="mitigation-card" onclick="toggleCheck(1)" id="card-1">
      <div class="check-circle" id="chk-1">✓</div>
      <div class="card-content">
        <span class="card-category">Engineering</span>
        <span class="card-label">Chemical Fume Hood</span>
      </div>
      <span class="card-icon">💨</span>
    </div>

    
    <div class="mitigation-card" onclick="toggleCheck(2)" id="card-2">
      <div class="check-circle" id="chk-2">✓</div>
      <div class="card-content">
        <span class="card-category">Safe Technique</span>
        <span class="card-label">Acid to Water (Stir)</span>
      </div>
      <span class="card-icon">💧</span>
    </div>

    
    <div class="mitigation-card" onclick="toggleCheck(3)" id="card-3">
      <div class="check-circle" id="chk-3">✓</div>
      <div class="card-content">
        <span class="card-category">Spill Neutralize</span>
        <span class="card-label">Sodium Bicarbonate</span>
      </div>
      <span class="card-icon">🧼</span>
    </div>
  </div>

  
  <div class="progress-bar-container">
    <div class="progress-fill" id="progressFill"></div>
  </div>

  
  <div class="bench-stage">
    <div class="locked-state" id="lockedState">
      <span class="lock-icon">🔒</span>
      <span class="lock-msg">Select All 4 Controls to Unlock Bench</span>
    </div>

    <div class="ready-state" id="readyState">
      <div class="flask-container">
        <span class="flask-art">🧪</span>
        <span style="font-size:11px;font-weight:600;color:#64748b;">12 M Acid</span>
      </div>
      <div style="display:flex;flex-direction:column;align-items:center;gap:3px;">
        <span class="flow-arrow">➔ ➔ ➔</span>
        <span class="action-text">Slow Addition + Stir</span>
      </div>
      <div class="flask-container">
        <span class="flask-art">🫗</span>
        <span style="font-size:11px;font-weight:600;color:#64748b;">Water Pool</span>
      </div>
    </div>
  </div>

  <script>
    const checked = [false, false, false, false];

    function toggleCheck(index) {
      checked[index] = !checked[index];
      updateUI();
    }

    function updateUI() {
      let count = 0;
      for (let i = 0; i < 4; i++) {
        const card = document.getElementById('card-' + i);
        if (checked[i]) {
          card.classList.add('checked');
          count++;
        } else {
          card.classList.remove('checked');
        }
      }

      const progress = (count / 4) * 100;
      document.getElementById('progressFill').style.width = progress + '%';

      const lockedState = document.getElementById('lockedState');
      const readyState = document.getElementById('readyState');

      if (count === 4) {
        lockedState.style.display = 'none';
        readyState.style.display = 'flex';
      } else {
        lockedState.style.display = 'flex';
        readyState.style.display = 'none';
      }
    }
  </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">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #ffffff;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
    }

    /* Header Prompt */
    .quiz-bar {
      width: 100%;
      max-width: 480px;
      text-align: center;
      margin-bottom: 8px;
    }
    .prompt {
      font-size: 14px;
      font-weight: 700;
      color: #0f172a;
      margin-bottom: 8px;
    }
    .btn-group {
      display: flex;
      gap: 10px;
      justify-content: center;
    }
    .choice-btn {
      flex: 1;
      max-width: 170px;
      padding: 8px 12px;
      font-size: 13px;
      font-weight: 700;
      border: 2px solid #cbd5e1;
      border-radius: 8px;
      background: #f8fafc;
      color: #1e2945;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    .choice-btn:active { transform: translateY(1px); }
    .choice-btn.selected-correct {
      border-color: #16a34a;
      background: #f0fdf4;
      color: #15803d;
      box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2);
    }
    .choice-btn.selected-wrong {
      border-color: #dc2626;
      background: #fef2f2;
      color: #b91c1c;
      box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
    }

    /* Scales Area */
    .scales-container {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 8px;
      width: 100%;
      max-width: 480px;
      align-items: center;
      margin: 4px 0;
    }

    .scale-column {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .scale-title {
      font-size: 13px;
      font-weight: 800;
      text-align: center;
      letter-spacing: 0.5px;
      color: #334155;
    }

    .gauge-block {
      height: 38px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      font-weight: 800;
      font-size: 13px;
      color: #ffffff;
      transition: opacity 0.25s, transform 0.25s, box-shadow 0.25s;
      position: relative;
    }

    /* Severity colors */
    .lvl-extreme { background: #ef4444; }
    .lvl-high    { background: #f97316; }
    .lvl-med     { background: #eab308; color: #713f12; }
    .lvl-low     { background: #84cc16; color: #1a2e05; }
    .lvl-min     { background: #22c55e; }

    .dimmed {
      opacity: 0.25;
      transform: scale(0.97);
    }
    .highlight-active {
      opacity: 1 !important;
      transform: scale(1.04);
      box-shadow: 0 0 0 3px #0f172a;
      z-index: 2;
    }

    /* Center Axis */
    .axis-column {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      height: 190px;
      padding: 4px 0;
    }
    .axis-label {
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .axis-label.danger { color: #dc2626; }
    .axis-label.safe   { color: #16a34a; }
    .axis-line {
      flex: 1;
      width: 4px;
      border-radius: 2px;
      background: linear-gradient(to bottom, #ef4444, #f97316, #eab308, #22c55e);
      margin: 4px 0;
    }

    /* Feedback Banner */
    .feedback-box {
      width: 100%;
      max-width: 480px;
      min-height: 42px;
      background: #f1f5f9;
      border-radius: 8px;
      padding: 8px 12px;
      font-size: 12px;
      font-weight: 600;
      color: #334155;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
    .badge-hl {
      font-weight: 800;
      padding: 1px 5px;
      border-radius: 4px;
      margin: 0 3px;
    }
    .badge-red { background: #fee2e2; color: #991b1b; }
    .badge-green { background: #dcfce7; color: #166534; }
  </style>
</head>
<body>

  
  <div class="quiz-bar">
    <div class="prompt">Which is more hazardous?</div>
    <div class="btn-group">
      <button class="choice-btn" id="btnGHS" onclick="selectOption('GHS')">GHS Category 1</button>
      <button class="choice-btn" id="btnNFPA" onclick="selectOption('NFPA')">NFPA Rating 1</button>
    </div>
  </div>

  
  <div class="scales-container">
    
    
    <div class="scale-column">
      <div class="scale-title">GHS System</div>
      <div class="gauge-block lvl-extreme" id="ghs-1"><span>Cat 1</span><span>💥 Max</span></div>
      <div class="gauge-block lvl-high" id="ghs-2"><span>Cat 2</span><span>High</span></div>
      <div class="gauge-block lvl-med" id="ghs-3"><span>Cat 3</span><span>Mod</span></div>
      <div class="gauge-block lvl-low" id="ghs-4"><span>Cat 4</span><span>Low</span></div>
    </div>

    
    <div class="axis-column">
      <span class="axis-label danger">▲ Extreme</span>
      <div class="axis-line"></div>
      <span class="axis-label safe">▼ Minimal</span>
    </div>

    
    <div class="scale-column">
      <div class="scale-title">NFPA 704</div>
      <div class="gauge-block lvl-extreme" id="nfpa-4"><span>Rating 4</span><span>Severe</span></div>
      <div class="gauge-block lvl-high" id="nfpa-3"><span>Rating 3</span><span>Serious</span></div>
      <div class="gauge-block lvl-med" id="nfpa-2"><span>Rating 2</span><span>Mod</span></div>
      <div class="gauge-block lvl-low" id="nfpa-1"><span>Rating 1</span><span>Slight</span></div>
    </div>

  </div>

  
  <div class="feedback-box" id="feedback">
    Tap either label above to compare severity scales.
  </div>

  <script>
    function selectOption(choice) {
      const btnG = document.getElementById('btnGHS');
      const btnN = document.getElementById('btnNFPA');
      const ghs1 = document.getElementById('ghs-1');
      const nfpa1 = document.getElementById('nfpa-1');
      const fb = document.getElementById('feedback');

      // Reset states
      document.querySelectorAll('.gauge-block').forEach(el => el.classList.remove('highlight-active', 'dimmed'));
      btnG.className = 'choice-btn';
      btnN.className = 'choice-btn';

      // Highlight target blocks
      ghs1.classList.add('highlight-active');
      nfpa1.classList.add('highlight-active');
      document.querySelectorAll('.gauge-block:not(#ghs-1):not(#nfpa-1)').forEach(el => el.classList.add('dimmed'));

      if (choice === 'GHS') {
        btnG.classList.add('selected-correct');
        btnN.classList.add('selected-wrong');
        fb.innerHTML = '✓ <b>Correct!</b> <span class="badge-hl badge-red">GHS 1</span> = Extreme Hazard (Flash &lt; 23°C) vs <span class="badge-hl badge-green">NFPA 1</span> = Slight Hazard';
        if (window.answerCorrect) {
          window.answerCorrect({ answer: 'GHS Category 1', explanation: 'GHS 1 represents highest hazard rank, whereas NFPA 1 is low hazard.' });
        }
      } else {
        btnN.classList.add('selected-wrong');
        btnG.classList.add('selected-correct');
        fb.innerHTML = '⚠️ Inversion Trap: <span class="badge-hl badge-red">GHS 1</span> is Highest Severity, while <span class="badge-hl badge-green">NFPA 1</span> is Low.';
        if (window.answerIncorrect) {
          window.answerIncorrect({ answer: 'NFPA Rating 1', feedback: 'NFPA 1 is low danger; GHS 1 is the most hazardous.' });
        }
      }
    }
  </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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      color: #1e2945;
      background: transparent;
      padding: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      user-select: none;
    }

    .selector-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      justify-content: center;
      width: 100%;
      max-width: 480px;
      margin-bottom: 6px;
    }

    .chip {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 12px;
      padding: 3px 8px;
      font-size: 11px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: all 0.2s ease;
    }

    .chip .num {
      width: 14px;
      height: 14px;
      background: #94a3b8;
      color: #fff;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 9px;
    }

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

    .chip.active .num {
      background: #0284c7;
    }

    /* GHS Label Container */
    .ghs-label {
      width: 100%;
      max-width: 440px;
      background: #ffffff;
      border: 2px solid #0f172a;
      border-radius: 6px;
      padding: 8px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }

    .label-block {
      border: 1.5px solid transparent;
      border-radius: 4px;
      padding: 4px 6px;
      cursor: pointer;
      position: relative;
      transition: background 0.2s ease, box-shadow 0.2s ease;
    }

    .label-block:hover {
      background: #f8fafc;
    }

    .label-block.active {
      background: #f0f9ff;
      box-shadow: inset 0 0 0 1.5px #0284c7;
    }

    .tag-badge {
      position: absolute;
      top: -6px;
      right: 4px;
      background: #0284c7;
      color: #fff;
      font-size: 9px;
      font-weight: 700;
      padding: 1px 5px;
      border-radius: 4px;
      display: none;
    }

    .label-block.active .tag-badge {
      display: block;
    }

    /* Block 1: Product Identifier */
    .product-title {
      font-size: 15px;
      font-weight: 800;
      color: #0f172a;
      text-transform: uppercase;
      letter-spacing: 0.3px;
      line-height: 1.2;
    }
    .product-sub {
      font-size: 11px;
      color: #64748b;
      font-weight: 600;
    }

    /* Middle Row: Signal + Pictograms + Hazard */
    .mid-row {
      display: grid;
      grid-template-columns: 1fr 1.3fr;
      gap: 6px;
      align-items: stretch;
    }

    .left-col {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .signal-box {
      background: #dc2626;
      color: #ffffff;
      font-size: 13px;
      font-weight: 900;
      text-align: center;
      padding: 3px 0;
      letter-spacing: 1px;
      border-radius: 3px;
    }

    .pictograms-row {
      display: flex;
      gap: 6px;
      justify-content: center;
      align-items: center;
      padding: 4px 0;
    }

    .picto-diamond {
      width: 44px;
      height: 44px;
      background: #ffffff;
      border: 3px solid #dc2626;
      transform: rotate(45deg);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin: 4px;
    }

    .picto-diamond svg {
      transform: rotate(-45deg);
      width: 28px;
      height: 28px;
    }

    .statement-text {
      font-size: 10px;
      line-height: 1.3;
      color: #1e2945;
    }

    .statement-text b {
      color: #0f172a;
    }

    .supplier-text {
      font-size: 9px;
      color: #64748b;
      line-height: 1.2;
      border-top: 1px solid #e2e8f0;
      padding-top: 4px;
    }

    /* Explanation Banner */
    .info-panel {
      width: 100%;
      max-width: 440px;
      background: #0f172a;
      color: #f8fafc;
      border-radius: 6px;
      padding: 8px 12px;
      margin-top: 6px;
      min-height: 48px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .info-title {
      font-size: 11px;
      font-weight: 700;
      color: #38bdf8;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 2px;
    }

    .info-desc {
      font-size: 11.5px;
      line-height: 1.35;
      color: #e2e8f0;
    }
  </style>
</head>
<body>

  
  <div class="selector-bar">
    <div class="chip active" onclick="selectSection(1)">
      <span class="num">1</span> Product
    </div>
    <div class="chip" onclick="selectSection(2)">
      <span class="num">2</span> Signal
    </div>
    <div class="chip" onclick="selectSection(3)">
      <span class="num">3</span> Pictograms
    </div>
    <div class="chip" onclick="selectSection(4)">
      <span class="num">4</span> Hazards
    </div>
    <div class="chip" onclick="selectSection(5)">
      <span class="num">5</span> Precaution
    </div>
    <div class="chip" onclick="selectSection(6)">
      <span class="num">6</span> Supplier
    </div>
  </div>

  
  <div class="ghs-label">

    
    <div class="label-block active" id="sec-1" onclick="selectSection(1)">
      <span class="tag-badge">① PRODUCT</span>
      <div class="product-title">NITRIC ACID 68%</div>
      <div class="product-sub">HNO₃ · CAS 7697-37-2 · UN 2031 · EC 231-714-2</div>
    </div>

    
    <div class="mid-row">
      <div class="left-col">
        
        <div class="label-block" id="sec-2" onclick="selectSection(2)">
          <span class="tag-badge">② SIGNAL</span>
          <div class="signal-box">DANGER</div>
        </div>

        
        <div class="label-block" id="sec-3" onclick="selectSection(3)">
          <span class="tag-badge">③ PICTOGRAMS</span>
          <div class="pictograms-row">
            
            <div class="picto-diamond" title="Oxidizer">
              <svg viewBox="0 0 100 100" fill="#000">
                <circle cx="50" cy="58" r="18" fill="none" stroke="#000" stroke-width="8"/>
                <path d="M50 20 C42 32, 38 42, 45 52 C48 46, 52 46, 55 52 C62 42, 58 32, 50 20 Z"/>
              </svg>
            </div>
            
            <div class="picto-diamond" title="Corrosive">
              <svg viewBox="0 0 100 100" fill="#000">
                
                <rect x="18" y="22" width="10" height="24" rx="2" transform="rotate(45 23 34)"/>
                <path d="M36 38 L36 50" stroke="#000" stroke-width="4" stroke-linecap="round"/>
                
                <rect x="72" y="22" width="10" height="24" rx="2" transform="rotate(-45 77 34)"/>
                <path d="M64 38 L64 50" stroke="#000" stroke-width="4" stroke-linecap="round"/>
                
                <rect x="22" y="56" width="26" height="8" rx="2"/>
                <path d="M54 62 C58 56, 68 56, 78 58 L78 66 L54 66 Z"/>
              </svg>
            </div>
          </div>
        </div>
      </div>

      
      <div class="label-block" id="sec-4" onclick="selectSection(4)">
        <span class="tag-badge">④ HAZARD</span>
        <div class="statement-text">
          <b>H272:</b> May intensify fire; oxidizer.<br>
          <b>H314:</b> Causes severe skin burns and serious eye damage.<br>
          <b>H330:</b> Fatal if inhaled.
        </div>
      </div>
    </div>

    
    <div class="label-block" id="sec-5" onclick="selectSection(5)">
      <span class="tag-badge">⑤ PRECAUTION</span>
      <div class="statement-text">
        <b>P220:</b> Keep away from clothing & combustible materials.<br>
        <b>P280:</b> Wear acid-resistant gloves, apron & eye/face shield.<br>
        <b>P305+P351+P338:</b> IF IN EYES: Rinse cautiously with water.
      </div>
    </div>

    
    <div class="label-block" id="sec-6" onclick="selectSection(6)">
      <span class="tag-badge">⑥ SUPPLIER</span>
      <div class="supplier-text">
        <b>Apex Chemical Reagents Ltd.</b> · 100 Science Pkwy · Emergency: +1 (800) 535-5053
      </div>
    </div>

  </div>

  
  <div class="info-panel">
    <div class="info-title" id="info-role">1. PRODUCT IDENTIFIER</div>
    <div class="info-desc" id="info-desc">Identifies chemical name, formula & CAS registry number to match against the laboratory Safety Data Sheet (SDS) and protocol.</div>
  </div>

  <script>
    const data = {
      1: {
        role: "1. PRODUCT IDENTIFIER",
        desc: "Identifies exact chemical name, concentration & CAS number to verify protocol requirements and check compatibility."
      },
      2: {
        role: "2. SIGNAL WORD",
        desc: "Indicates hazard severity. 'DANGER' denotes severe hazards; 'WARNING' denotes moderate hazards."
      },
      3: {
        role: "3. GHS PICTOGRAMS",
        desc: "Universal visual symbols: Flame-Over-Circle warns of strong oxidizer; Corrosive symbol warns of severe tissue/metal destruction."
      },
      4: {
        role: "4. HAZARD STATEMENTS (H-CODES)",
        desc: "Standardized mandatory phrases describing specific risks (e.g., skin corrosion, vapor toxicity, fire intensification)."
      },
      5: {
        role: "5. PRECAUTIONARY STATEMENTS (P-CODES)",
        desc: "Direct guidance on required PPE (face shield, neoprene gloves), storage barriers, and immediate first-aid actions."
      },
      6: {
        role: "6. SUPPLIER IDENTIFICATION",
        desc: "Manufacturer identity and 24/7 emergency response hotline for rapid SDS retrieval and spill protocol assistance."
      }
    };

    function selectSection(idx) {
      document.querySelectorAll('.chip').forEach((c, i) => {
        c.classList.toggle('active', i + 1 === idx);
      });
      document.querySelectorAll('.label-block').forEach((b, i) => {
        b.classList.toggle('active', i + 1 === idx);
      });

      document.getElementById('info-role').textContent = data[idx].role;
      document.getElementById('info-desc').textContent = data[idx].desc;
    }
  </script>
</body>
</html>

Diferenciación epistemológica entre hipótesis, leyes, teorías y modelos

Formulación de preguntas investigables fundamentadas en teorías

Formulación de hipótesis mecanicistas y modelos predictivos

Identificación y operacionalización de variables dependientes, independientes y controladas

Selección, calibración y límites de precisión de instrumentos

Diseño experimental con grupos de control y aleatorización

Registro fidedigno y trazabilidad de datos en bitácora

science

Diseño experimental y metodología científica

Pengenalan Metode Ilmiah dalam Sains

Mengamati Fenomena Sosial-Geografis secara Sistematis

Mendokumentasikan Hasil Observasi dan Penyelidikan

Mengajukan Pertanyaan untuk Menggali Informasi

Membuat Prediksi dan Hipotesis Ilmiah

Merencanakan Penyelidikan Sosial secara Kolaboratif

Variabel dalam Penyelidikan: Bebas, Terikat, dan Kontrol

Merancang Penyelidikan Ilmiah

Identifying Patterns and Relationships to Investigate

Formulating Testable Hypotheses

Using Models to Predict Outcomes

Designing Investigations to Answer Scientific Questions

Controlling Variables for Reproducible Investigations

Planning Scientific Investigations

Formulating Testable Scientific Research Questions

Developing Testable Hypotheses from Scientific Theories

Operationalizing Variables in Scientific Hypotheses

Designing Controlled and Comparative Scientific Investigations

Designing Descriptive and Observational Studies

Sampling Strategies and Sample Size Determination

Evaluating Confounding Variables and Experimental Controls

Scientific Inquiry, Hypothesis Formulation, and Experimental Design

Selecting and Utilizing Laboratory Glassware and Measurement Tools

Safety Equipment, SDS, and Safe Laboratory Practices

Formulating Testable Questions and Defining Scientific Problems

Planning and Conducting Descriptive, Comparative, and Experimental Investigations

Data Presentation Formats: Labeled Drawings, Particle Diagrams, and Tables

How Scientific Theories Develop and Change

Evaluating Advantages and Limitations of Scientific Models

Scientific Research Methods, Cost-Benefit Analysis, and Diverse Contributions

Scientific Practices and Laboratory Investigations

Writing Risk Assessments for Investigations

Identifying Sources of Error in Investigations

Ethical and Cultural Considerations in Investigations

Selecting Appropriate Equipment for Investigations

Ensuring Precision and Accuracy in Measurements

Determining Appropriate Sample Sizes

Conducting Investigations Safely and Accurately

Menggunakan Alat Ukur dan Peralatan Laboratorium Sains

Keselamatan di Laboratorium Sains

Mengumpulkan Informasi dari Sumber Primer

Mengumpulkan Informasi dari Sumber Sekunder

Mengolah dan Memprioritaskan Informasi yang Relevan

Keselamatan dan Pengumpulan Data Penyelidikan

Laboratory Waste Management and Chemical Handling Protocols

Selecting and Calibrating Volumetric Glassware

Calibrating and Using Analytical Balances and Mechanical Tools

Using Digital Probes and Data Loggers for Environmental Data

Spectrophotometry and Optical Instrumentation Techniques

Recording Qualitative and Quantitative Laboratory Observations

Laboratory Apparatus, Chemical Safety, and Precision Measurement

Enzyme Structure and the Active Site Model

Activation Energy and Catalytic Mechanisms

Temperature Effects on Enzyme Reaction Rates

pH Effects and Denaturation in Enzymes

Substrate and Enzyme Concentration Dynamics

Enzyme Inhibition: Competitive vs. Noncompetitive Regulation

Enzyme Kinetics and Reaction Velocity Calculations

Designing and Evaluating Enzyme Activity Experiments

Enzymes and Cellular Regulation

Distinguishing Between Hazard and Risk in Science

Conducting a Formal Laboratory Risk Assessment

Public Perception of Risk Versus Statistical Reality

Evaluating Lifestyle Risks and Relative Risk Ratios

The Peer-Review Process in Scientific Publishing

Detecting Bias and Conflicts of Interest in Scientific Reports

Communicating Science to the Public and Media Distortions

Scientific Consensus and the Reproducibility Challenge

Analysing Historical Failures of Peer Review and Fraud

Tailoring Scientific Communication for Diverse Audiences

Risk Evaluation, Hazards and Scientific Peer Review

Identifying Independent, Dependent, and Control Variables

Fair Testing and the Importance of Control Variables

Designing Negative and Positive Experimental Controls

Selecting Range, Interval, and Sample Size in Investigations

Planning Preliminary Trials and Pilot Experiments

Writing Step-by-Step Reproducible Methods

Designing Procedures to Characterise Unknown Substances

Planning Experiments to Verify Physical Laws

Exam-Style Planning Questions: 6-Mark Investigation Design

Formulating Hypotheses and Experimental Design

Selecting Appropriate Measuring Instruments for Volume and Mass

Selecting Instruments for Length, Time, and Temperature

Electrical Test Apparatus: Meters, Power Supplies, and Components

Microscopy Techniques: Light Microscope Operation and Staining

Heating Techniques: Bunsen Burners, Water Baths, and Electric Mantles

Chemical Handling: Fume Cupboards, Acids, and Spill Management

Aseptic Techniques in Microbiological Investigations

Gas Collection Methods: Downward Displacement and Gas Syringes

Digital Sensors and Automated Datalogging in Experiments

Troubleshooting Apparatus Malfunctions and Experimental Faults

Laboratory Apparatus, Precision Tools and Safe Handling

Xylem and Phloem Function in Plant Transport

Root and Leaf Structures in Water Absorption and Transpiration

Flower Structures and Mechanisms of Plant Reproduction

Tropisms and Hormonal Responses to Environmental Stimuli

Stomatal Regulation and Gas Exchange in Plant Systems

Modeling Integrated Plant System Interactions

Evaluating Plant Adaptation Designs in Changing Environments

Plant Structure and System Interactions

Mengamati Sel di Bawah Mikroskop

Transpor Sel: Difusi dan Osmosis

Merencanakan Penyelidikan Osmosis pada Sel

Transpor Sel: Transport Aktif dan Fasilitasi

Transpor Sel: Endositosis dan Eksositosis

Siklus Sel: Interfase

Siklus Sel: Mitosis

Siklus Sel: Meiosis

Transpor Sel dan Siklus Pembelahan Sel

Enzimas como catalizadores biológicos: energía de activación y cinética

Inhibición enzimática: modelos competitivos, no competitivos y regulación alostérica

Glucólisis y rutas anaeróbicas: fermentación láctica y alcohólica

Ciclo de Krebs y oxidación mitocondrial del piruvato

Cadena respiratoria, gradiente de protones y fosforilación oxidativa

Enzimas y respiración celular

Merencanakan Percobaan Laju Reaksi

Persamaan Laju Reaksi dan Orde Reaksi

Menentukan Orde Reaksi dari Data Eksperimen

Menganalisis Data Eksperimen Laju Reaksi

Mengevaluasi dan Mengomunikasikan Hasil Eksperimen Laju Reaksi

Penyelidikan Eksperimen dan Orde Reaksi

Principles of Representative Sampling and Avoiding Bias

Random Sampling Using Quadrats and Coordinate Grids

Systematic Sampling Along Transects and Environmental Gradients

Calculating Population Size Estimates from Sample Data

Sampling Mobile Organisms: The Lincoln Index (Capture-Recapture)

Measuring Abiotic Factors in Ecological Sampling

Sampling in Chemical and Industrial Quality Control

Evaluating Sample Size Sufficiency and Running Means

Stratified Sampling in Heterogeneous Environments

Exam-Style Sampling Critique and Investigation Plans

Scientific Sampling, Fieldwork and Representativeness

Factors Affecting Reaction Rates: Temperature

Factors Affecting Reaction Rates: Concentration

Factors Affecting Reaction Rates: Surface Area

Factors Affecting Reaction Rates: Catalysts

Investigating Reaction Rate with Changing Temperature

Interpreting Reaction Rate Graphs

Factors That Affect How Fast Equilibrium Is Reached

Chemical Reaction Products and Global Climate Change

Reaction Rates and Equilibrium

Habitat Fragmentation and Biodiversity Loss

Invasive Species and Competitive Disruption of Ecosystems

Human-Induced Climate Disturbances and Ecosystem Resilience

Quantifying Species Richness and Biodiversity Metrics

Conservation Strategies and Ecosystem Restoration Design

Designing Solutions for Human Environmental Impact

Critiquing Conservation Solutions Using Empirical Evidence

Environmental Change, Biodiversity, and Conservation

Hidrolisis Garam

Konsep Larutan Penyangga

Menghitung pH Larutan Penyangga

Merencanakan dan Melakukan Titrasi Asam Basa

Menganalisis Data Titrasi Asam Basa

Penerapan pH dan Larutan Penyangga dalam Kehidupan Sehari-hari

Hidrolisis Garam, Larutan Penyangga, dan Titrasi

Teoría sintética de la evolución: articulación entre genética mendeliana y selección natural

OGS.11.SEP.2

Aligned learning resources

Related diagrams