<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Count Rate vs Activity</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8fafc;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 10px 12px;
      user-select: none;
      min-height: 100vh;
    }

    .app-container {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

    .header-row {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .metric-badge {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 6px 10px;
      font-size: 12px;
      font-weight: 600;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
      display: flex;
      align-items: center;
      gap: 4px;
      flex: 1 1 auto;
      justify-content: center;
      min-width: 140px;
    }
    .badge-source { color: #9a3412; border-left: 4px solid #f59e0b; }
    .badge-detector { color: #1d4ed8; border-left: 4px solid #3b82f6; }

    /* SVG wrapper without inner card/border box */
    .svg-wrapper {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background: transparent;
      padding: 2px 0;
    }

    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }

    .controls {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: center;
    }

    .btn-group {
      display: flex;
      gap: 8px;
      width: 100%;
      justify-content: center;
    }

    .btn-step {
      flex: 1;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      font-size: 12.5px;
      font-weight: 600;
      padding: 8px 10px;
      border-radius: 6px;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
      transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
      text-align: center;
    }
    .btn-step:hover {
      background-color: #f1f5f9;
    }
    .btn-step.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #1d4ed8;
    }

    .callout {
      font-size: 12px;
      color: #334155;
      text-align: center;
      line-height: 1.4;
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      padding: 8px 12px;
      border-radius: 6px;
      width: 100%;
    }
    .callout strong { color: #1e2945; }

    /* Pulse animation along rays */
    @keyframes pulseRay {
      0% { stroke-dashoffset: 24; }
      100% { stroke-dashoffset: 0; }
    }
    .ray-detected {
      stroke: #2563eb;
      stroke-width: 2.4;
      stroke-dasharray: 6 3;
      animation: pulseRay 1.2s linear infinite;
    }
    .ray-missed {
      stroke: #64748b;
      stroke-width: 1.6;
      stroke-dasharray: 4 3;
      animation: pulseRay 2.2s linear infinite;
    }

    #gmGroup {
      transition: transform 0.4s ease;
    }
  </style>
</head>
<body>

  <div class="app-container">
    <div class="header-row">
      <div class="metric-badge badge-source">
        <span>Source: <strong>12 Bq (12 decays/s)</strong></span>
      </div>
      <div class="metric-badge badge-detector">
        <span id="rateLabel">Count Rate: <strong>2 cps</strong></span>
      </div>
    </div>

    <div class="svg-wrapper">
      <svg viewBox="0 0 460 195">
        <defs>
          
          <marker id="arrow-blue" markerWidth="7" markerHeight="7" refX="6" refY="3.5" orient="auto">
            <path d="M0,0 L0,7 L7,3.5 z" fill="#2563eb" />
          </marker>
          <marker id="arrow-gray" markerWidth="7" markerHeight="7" refX="6" refY="3.5" orient="auto">
            <path d="M0,0 L0,7 L7,3.5 z" fill="#64748b" />
          </marker>
          
          
          <linearGradient id="gmGrad" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stop-color="#334155" />
            <stop offset="35%" stop-color="#64748b" />
            <stop offset="70%" stop-color="#475569" />
            <stop offset="100%" stop-color="#1e293b" />
          </linearGradient>
        </defs>

        
        <circle cx="105" cy="100" r="88" fill="none" stroke="#cbd5e1" stroke-width="1.2" stroke-dasharray="3 3" />

        
        <g id="emissionRays"></g>

        
        <g transform="translate(105, 100)">
          <circle r="24" fill="#fef3c7" stroke="#f59e0b" stroke-width="2" />
          
          <circle r="11" fill="#f59e0b" />
          <path d="M 0 0 L -5 -10 A 11 11 0 0 1 5 -10 Z" fill="#78350f" />
          <path d="M 0 0 L 10 1 A 11 11 0 0 1 5 9 Z" fill="#78350f" />
          <path d="M 0 0 L -5 9 A 11 11 0 0 1 -10 1 Z" fill="#78350f" />
          <circle r="3" fill="#fef3c7" />
          
          <text y="38" text-anchor="middle" font-size="12" font-weight="700" fill="#9a3412">Source (12 Bq)</text>
        </g>

        
        <g id="gmGroup" transform="translate(280, 100)">
          
          <line x1="0" y1="-35" x2="0" y2="-43" stroke="#0284c7" stroke-width="1.5" />
          <text x="0" y="-47" text-anchor="middle" font-size="11.5" font-weight="700" fill="#0284c7">Window</text>

          
          <rect x="0" y="-35" width="105" height="70" rx="5" fill="url(#gmGrad)" stroke="#1e293b" stroke-width="1.5" />

          
          <rect x="-3" y="-32" width="5" height="64" rx="2" fill="#38bdf8" stroke="#0284c7" stroke-width="1" />

          
          <text x="52" y="-15" text-anchor="middle" font-size="12" font-weight="700" fill="#ffffff" letter-spacing="0.5">GM TUBE</text>

          
          <line x1="6" y1="-2" x2="98" y2="-2" stroke="#fef08a" stroke-width="1.5" stroke-dasharray="3 2" />

          
          <rect x="15" y="10" width="75" height="19" rx="3" fill="#090d16" stroke="#334155" stroke-width="1" />
          <text id="counterDisplay" x="52" y="24" text-anchor="middle" font-size="12.5" font-family="ui-monospace, monospace" font-weight="700" fill="#38bdf8">2 cps</text>

          
          <path d="M -8 -32 L -13 -32 L -13 32 L -8 32" fill="none" stroke="#2563eb" stroke-width="1.5" />
        </g>

        
        <g id="missedCalloutGroup">
          <rect x="10" y="8" width="155" height="24" rx="5" fill="#f1f5f9" stroke="#cbd5e1" stroke-width="1" />
          <text id="missCalloutText" x="87" y="24" text-anchor="middle" font-size="11" font-weight="700" fill="#334155">10 of 12 rays miss</text>
          
          <path d="M 87 32 L 77 54" fill="none" stroke="#64748b" stroke-width="1.3" marker-end="url(#arrow-gray)" />
        </g>
      </svg>
    </div>

    <div class="controls">
      <div class="btn-group">
        <button class="btn-step" onclick="setDistance('close')">Close (4 cps)</button>
        <button class="btn-step active" onclick="setDistance('medium')">Medium (2 cps)</button>
        <button class="btn-step" onclick="setDistance('far')">Far (1 cps)</button>
      </div>
      <div class="callout">
        Radiation spreads in <strong>all 360° directions</strong> &bull; Tube intercepts a fraction &bull; <strong>Count Rate &lt; Activity</strong>
      </div>
    </div>
  </div>

  <script>
    const totalRays = 12;
    // 12 rays evenly distributed around the full circle
    const angles = [];
    for (let i = 0; i < totalRays; i++) {
      angles.push((i * 360) / totalRays - 15);
    }

    const configs = {
      close: { x: 200, detectedIndices: [0, 1, 11, 2], count: 4 },
      medium: { x: 280, detectedIndices: [0, 1], count: 2 },
      far: { x: 360, detectedIndices: [0], count: 1 }
    };

    let currentMode = 'medium';

    function renderRays() {
      const g = document.getElementById('emissionRays');
      g.innerHTML = '';
      const cfg = configs[currentMode];
      const cx = 105, cy = 100;
      const sourceRadius = 25;

      angles.forEach((deg, idx) => {
        const rad = (deg * Math.PI) / 180;
        const isDetected = cfg.detectedIndices.includes(idx);
        
        let x2, y2;
        if (isDetected) {
          x2 = cfg.x;
          y2 = Math.max(cy - 30, Math.min(cy + 30, cy + Math.tan(rad) * (cfg.x - cx)));
        } else {
          const length = 85;
          x2 = cx + Math.cos(rad) * length;
          y2 = cy + Math.sin(rad) * length;
        }

        const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
        line.setAttribute('x1', cx + Math.cos(rad) * sourceRadius);
        line.setAttribute('y1', cy + Math.sin(rad) * sourceRadius);
        line.setAttribute('x2', x2);
        line.setAttribute('y2', y2);
        line.setAttribute('class', isDetected ? 'ray-detected' : 'ray-missed');
        line.setAttribute('marker-end', isDetected ? 'url(#arrow-blue)' : 'url(#arrow-gray)');
        g.appendChild(line);
      });

      // Update GM Tube position & readouts
      document.getElementById('gmGroup').setAttribute('transform', `translate(${cfg.x}, 100)`);
      document.getElementById('counterDisplay').textContent = `${cfg.count} cps`;
      document.getElementById('rateLabel').innerHTML = `Count Rate: <strong>${cfg.count} cps</strong>`;
      
      const missedCount = totalRays - cfg.count;
      document.getElementById('missCalloutText').textContent = `${missedCount} of 12 rays miss`;
    }

    function setDistance(mode) {
      currentMode = mode;
      document.querySelectorAll('.btn-step').forEach((btn, idx) => {
        btn.classList.toggle('active', ['close', 'medium', 'far'][idx] === mode);
      });
      renderRays();
    }

    // Initial render
    renderRays();
  </script>
</body>
</html>

Radioactive Activity and Count Rate in Becquerels

<!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;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    body {
      background: transparent;
      color: #1e293b;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      user-select: none;
      max-width: 680px;
      margin: 0 auto;
    }

    /* Equation Section */
    .equation-row {
      display: flex;
      align-items: stretch;
      justify-content: space-between;
      gap: 6px;
    }

    .tile {
      flex: 1;
      min-width: 0;
      background: #ffffff;
      border-radius: 8px;
      padding: 8px 4px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      gap: 4px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }

    .tile-total {
      border: 2px solid #0284c7;
    }

    .tile-bg {
      border: 2px solid #f59e0b;
    }

    .tile-net {
      background: #ecfdf5;
      border: 2px solid #10b981;
    }

    .tile-label {
      font-size: 10.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.02em;
      line-height: 1.15;
      white-space: normal;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 26px;
    }

    .tile-total .tile-label { color: #0369a1; }
    .tile-bg .tile-label { color: #b45309; }
    .tile-net .tile-label { color: #047857; }

    .tile-val-group {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1px;
    }

    .tile-val {
      font-size: 20px;
      font-weight: 800;
      line-height: 1.1;
      color: #0f172a;
    }

    .tile-net .tile-val {
      color: #065f46;
    }

    .tile-unit {
      font-size: 10px;
      font-weight: 600;
      color: #64748b;
    }

    .op {
      font-size: 22px;
      font-weight: 800;
      color: #64748b;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 1px;
    }

    /* Bar Visualization Section - Seamless flat styling */
    .visual-area {
      display: flex;
      flex-direction: column;
      gap: 10px;
      background: transparent;
      border: none;
      padding: 0;
    }

    .bar-group {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .bar-track {
      width: 100%;
      height: 30px;
      background: #e2e8f0;
      border-radius: 6px;
      overflow: hidden;
      display: flex;
      position: relative;
    }

    .bar-total {
      height: 100%;
      background: #1e293b;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.02em;
      transition: width 0.3s ease-out;
      white-space: nowrap;
      overflow: hidden;
      padding: 0 6px;
    }

    .bar-segment-bg {
      height: 100%;
      background: repeating-linear-gradient(
        45deg,
        #f59e0b,
        #f59e0b 6px,
        #d97706 6px,
        #d97706 12px
      );
      color: #ffffff;
      font-size: 11px;
      font-weight: 700;
      text-shadow: 0 1px 2px rgba(0,0,0,0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: width 0.3s ease-out;
      overflow: hidden;
      white-space: nowrap;
      padding: 0 4px;
    }

    .bar-segment-net {
      height: 100%;
      background: #10b981;
      color: #ffffff;
      font-size: 12px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: width 0.3s ease-out;
      overflow: hidden;
      white-space: nowrap;
      padding: 0 6px;
    }

    /* Key/Legend */
    .legend-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px;
      font-size: 11.5px;
      font-weight: 600;
      color: #334155;
    }

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

    .chip {
      width: 14px;
      height: 10px;
      border-radius: 2px;
      flex-shrink: 0;
    }

    .chip-total { background: #1e293b; }
    .chip-bg {
      background: repeating-linear-gradient(
        45deg,
        #f59e0b,
        #f59e0b 3px,
        #d97706 3px,
        #d97706 6px
      );
    }
    .chip-net { background: #10b981; }

    /* Controls Section */
    .controls {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .control-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .control-label {
      flex: 0 0 120px;
      font-size: 12px;
      font-weight: 600;
      color: #334155;
    }

    .slider {
      flex: 1;
      height: 6px;
      -webkit-appearance: none;
      appearance: none;
      background: #cbd5e1;
      border-radius: 3px;
      outline: none;
      cursor: pointer;
    }

    .slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #0284c7;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    }

    #bgSlider::-webkit-slider-thumb {
      background: #f59e0b;
    }

    .slider::-moz-range-thumb {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #0284c7;
      cursor: pointer;
      border: none;
    }

    #bgSlider::-moz-range-thumb {
      background: #f59e0b;
    }

    .control-val {
      flex: 0 0 45px;
      text-align: right;
      font-size: 12px;
      font-weight: 700;
      color: #0f172a;
    }

    .summary-tag {
      text-align: center;
      font-size: 12px;
      font-weight: 700;
      color: #047857;
      background: #ecfdf5;
      padding: 7px;
      border-radius: 6px;
      letter-spacing: 0.02em;
      border: 1px solid #a7f3d0;
    }

    @media (max-width: 400px) {
      body {
        gap: 12px;
        padding: 8px;
      }
      .control-label { flex: 0 0 95px; font-size: 11px; }
      .tile-label { font-size: 9.5px; min-height: 24px; }
      .tile-val { font-size: 17px; }
      .tile-unit { font-size: 9px; }
      .op { font-size: 18px; }
      .tile { padding: 6px 3px; }
      .bar-track { height: 26px; }
      .bar-total, .bar-segment-net, .bar-segment-bg { font-size: 10.5px; }
    }
  </style>
</head>
<body>

  
  <div class="equation-row">
    <div class="tile tile-total">
      <span class="tile-label">Total Measured</span>
      <div class="tile-val-group">
        <span class="tile-val" id="eqTotal">45</span>
        <span class="tile-unit">Bq (cps)</span>
      </div>
    </div>
    <span class="op">−</span>
    <div class="tile tile-bg">
      <span class="tile-label">Background</span>
      <div class="tile-val-group">
        <span class="tile-val" id="eqBg">5</span>
        <span class="tile-unit">Bq (cps)</span>
      </div>
    </div>
    <span class="op">=</span>
    <div class="tile tile-net">
      <span class="tile-label">Corrected Source</span>
      <div class="tile-val-group">
        <span class="tile-val" id="eqNet">40</span>
        <span class="tile-unit">Bq (cps)</span>
      </div>
    </div>
  </div>

  
  <div class="visual-area">
    <div class="bar-group">
      <div class="bar-track">
        <div class="bar-total" id="barTotal" style="width: 100%;">
          <span id="barTotalTxt">45 Bq Total Detected</span>
        </div>
      </div>
      <div class="bar-track">
        <div class="bar-segment-bg" id="barBg" style="width: 11.1%;">
          <span id="barBgTxt">5</span>
        </div>
        <div class="bar-segment-net" id="barNet" style="width: 88.9%;">
          <span id="barNetTxt">40 Bq Net</span>
        </div>
      </div>
    </div>

    
    <div class="legend-row">
      <div class="legend-item">
        <span class="chip chip-total"></span>
        <span>Total Detected</span>
      </div>
      <div class="legend-item">
        <span class="chip chip-bg"></span>
        <span>Background</span>
      </div>
      <div class="legend-item">
        <span class="chip chip-net"></span>
        <span>Source</span>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <div class="control-row">
      <label class="control-label" for="totalSlider">Total Measured</label>
      <input type="range" id="totalSlider" class="slider" min="20" max="100" value="45">
      <span class="control-val" id="ctrlTotalVal">45 Bq</span>
    </div>
    <div class="control-row">
      <label class="control-label" for="bgSlider">Background Rate</label>
      <input type="range" id="bgSlider" class="slider" min="2" max="15" value="5">
      <span class="control-val" id="ctrlBgVal">5 Bq</span>
    </div>
  </div>

  <div class="summary-tag">
    Net Count = Total − Background
  </div>

  <script>
    const totalSlider = document.getElementById('totalSlider');
    const bgSlider = document.getElementById('bgSlider');

    const eqTotal = document.getElementById('eqTotal');
    const eqBg = document.getElementById('eqBg');
    const eqNet = document.getElementById('eqNet');

    const ctrlTotalVal = document.getElementById('ctrlTotalVal');
    const ctrlBgVal = document.getElementById('ctrlBgVal');

    const barTotalTxt = document.getElementById('barTotalTxt');
    const barBg = document.getElementById('barBg');
    const barBgTxt = document.getElementById('barBgTxt');
    const barNet = document.getElementById('barNet');
    const barNetTxt = document.getElementById('barNetTxt');

    function update() {
      let total = parseInt(totalSlider.value, 10);
      let bg = parseInt(bgSlider.value, 10);

      // Keep background strictly less than total
      if (bg >= total) {
        bg = total - 1;
        bgSlider.value = bg;
      }

      const net = total - bg;

      // Update equations & values
      eqTotal.textContent = total;
      eqBg.textContent = bg;
      eqNet.textContent = net;

      ctrlTotalVal.textContent = total + ' Bq';
      ctrlBgVal.textContent = bg + ' Bq';

      // Update proportional bar widths
      const bgPercent = (bg / total) * 100;
      const netPercent = 100 - bgPercent;

      barTotalTxt.textContent = total + ' Bq Total';
      
      barBg.style.width = bgPercent + '%';
      barBgTxt.textContent = bgPercent > 14 ? bg + ' Bq' : bg;
      
      barNet.style.width = netPercent + '%';
      barNetTxt.textContent = net + ' Bq Net';
    }

    totalSlider.addEventListener('input', update);
    bgSlider.addEventListener('input', update);

    update();
  </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, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: #f8fafc;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }

    .top-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: 440px;
      gap: 8px;
    }

    .stat-badge {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 12px;
      font-size: 14px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }

    .accent-badge {
      background: #eff9ff;
      border-color: #22b7ff;
      color: #0077b6;
    }

    .counter-num {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 16px;
      color: #1e2945;
      min-width: 24px;
      text-align: right;
    }

    .btn-toggle {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 5px 10px;
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .btn-toggle:active { background: #f1f5f9; }

    .stage-container {
      position: relative;
      width: 100%;
      max-width: 440px;
      height: 230px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 6px rgba(0,0,0,0.03);
    }

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

    .footer-bar {
      width: 100%;
      max-width: 440px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 12px;
      text-align: center;
      font-size: 14px;
      font-weight: 600;
      color: #1e2945;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }

    .footer-bar span {
      color: #0284c7;
    }
  </style>
</head>
<body>

  <div class="top-bar">
    <div class="stat-badge accent-badge">
      Activity: <strong>5 Bq</strong> (5/s)
    </div>
    <div class="stat-badge">
      Decays: <span id="decayCount" class="counter-num">0</span>
    </div>
    <button id="toggleBtn" class="btn-toggle" aria-label="Play/Pause">⏸ Pause</button>
  </div>

  <div class="stage-container">
    <svg viewBox="0 0 400 210">
      <defs>
        
        <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
          <feGaussianBlur stdDeviation="2" result="blur" />
          <feMerge>
            <feMergeNode in="blur" />
            <feMergeNode in="SourceGraphic" />
          </feMerge>
        </filter>
      </defs>

      
      <path d="M 120 70 L 120 185 L 280 185 L 280 70 L 250 70 L 250 160 L 150 160 L 150 70 Z" 
            fill="#475569" stroke="#334155" stroke-width="2"/>
      
      
      <text x="200" y="177" text-anchor="middle" fill="#cbd5e1" font-size="11" font-weight="600" letter-spacing="1">LEAD SHIELD</text>

      
      <rect x="156" y="115" width="88" height="42" rx="4" fill="#ede9fe" stroke="#c4b5fd" stroke-width="1.5"/>
      <text x="200" y="152" text-anchor="middle" fill="#7c3aed" font-size="10" font-weight="700" opacity="0.6">SAMPLE</text>

      
      <g id="nucleiGroup"></g>

      
      <g id="raysGroup"></g>
    </svg>
  </div>

  <div class="footer-bar">
    <span>1 Becquerel (Bq)</span> = 1 decay per second
  </div>

  <script>
    const nucleiGroup = document.getElementById('nucleiGroup');
    const raysGroup = document.getElementById('raysGroup');
    const decayCountEl = document.getElementById('decayCount');
    const toggleBtn = document.getElementById('toggleBtn');

    let count = 0;
    let isRunning = true;
    let decayTimer = null;

    // Generate nuclei positions in sample bed
    const nuclei = [];
    const rows = 3;
    const cols = 7;
    for (let r = 0; r < rows; r++) {
      for (let c = 0; c < cols; c++) {
        const cx = 166 + c * 11 + (r % 2 === 1 ? 4 : 0);
        const cy = 122 + r * 10;
        const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
        circle.setAttribute('cx', cx);
        circle.setAttribute('cy', cy);
        circle.setAttribute('r', '3.5');
        circle.setAttribute('fill', '#8b5cf6');
        nucleiGroup.appendChild(circle);
        nuclei.push({ el: circle, cx, cy });
      }
    }

    function emitDecay() {
      if (!isRunning) return;

      count++;
      decayCountEl.textContent = count;

      // Pick a random nucleus to decay/flash
      const n = nuclei[Math.floor(Math.random() * nuclei.length)];
      n.el.setAttribute('fill', '#ef4444');
      n.el.setAttribute('r', '4.5');

      setTimeout(() => {
        n.el.setAttribute('fill', '#8b5cf6');
        n.el.setAttribute('r', '3.5');
      }, 120);

      // Create emitted ray / particle
      const ray = document.createElementNS('http://www.w3.org/2000/svg', 'g');
      
      const angle = -Math.PI / 2 + (Math.random() - 0.5) * 0.5; // Upwards through aperture
      const startX = n.cx;
      const startY = n.cy;
      const endX = startX + Math.sin((Math.random() - 0.5) * 0.8) * 35;
      const endY = 15;

      const particle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
      particle.setAttribute('cx', startX);
      particle.setAttribute('cy', startY);
      particle.setAttribute('r', '3');
      particle.setAttribute('fill', '#eab308');
      particle.setAttribute('filter', 'url(#glow)');

      ray.appendChild(particle);
      raysGroup.appendChild(ray);

      const startTime = performance.now();
      const duration = 400; // Fast radiation escape

      function animateParticle(now) {
        const elapsed = now - startTime;
        const progress = Math.min(elapsed / duration, 1);
        
        const curX = startX + (endX - startX) * progress;
        const curY = startY + (endY - startY) * progress;
        
        particle.setAttribute('cx', curX);
        particle.setAttribute('cy', curY);
        particle.setAttribute('opacity', 1 - progress * 0.8);

        if (progress < 1) {
          requestAnimationFrame(animateParticle);
        } else {
          ray.remove();
        }
      }
      requestAnimationFrame(animateParticle);
    }

    // 5 Bq = 5 decays per second = 1 decay every 200ms
    function start() {
      decayTimer = setInterval(emitDecay, 200);
    }

    function pause() {
      clearInterval(decayTimer);
      decayTimer = null;
    }

    toggleBtn.addEventListener('click', () => {
      isRunning = !isRunning;
      if (isRunning) {
        toggleBtn.innerHTML = '⏸ Pause';
        start();
      } else {
        toggleBtn.innerHTML = '▶ Play';
        pause();
      }
    });

    start();
  </script>
</body>
</html>

UK-GCSE-SCIENCE-PHYS-AST-02-04

Aligned learning resources

Related diagrams