<!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: transparent;
      padding: 10px;
      user-select: none;
    }

    .toolbar {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-bottom: 10px;
    }

    .btn {
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 6px;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #334155;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      transition: background 0.2s, border-color 0.2s, color 0.2s;
    }
    .btn:hover { background: #f1f5f9; }
    .btn.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
    }

    .comparison-grid {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 12px;
      align-items: start;
    }

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

    .panel {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 10px;
    }

    .panel-header {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
      margin-bottom: 8px;
      text-align: center;
    }

    /* Flowchart SVG styles */
    svg {
      width: 100%;
      height: auto;
      display: block;
    }

    .node {
      cursor: pointer;
      transition: filter 0.2s, opacity 0.2s;
    }
    .node text {
      font-family: inherit;
      font-size: 10.5px;
      font-weight: 600;
      text-anchor: middle;
      dominant-baseline: central;
      fill: #1e2945;
      pointer-events: none;
    }

    /* Standard colors */
    .shape-term { fill: #f1f5f9; stroke: #94a3b8; stroke-width: 1.5; }
    .shape-io { fill: #e0f2fe; stroke: #0284c7; stroke-width: 1.5; }
    .shape-dec { fill: #fef3c7; stroke: #d97706; stroke-width: 1.5; }
    .shape-true { fill: #dcfce7; stroke: #16a34a; stroke-width: 1.5; }
    .shape-false { fill: #fee2e2; stroke: #dc2626; stroke-width: 1.5; }

    .flow-line {
      fill: none;
      stroke: #94a3b8;
      stroke-width: 1.5;
      marker-end: url(#arrow);
    }
    .branch-lbl {
      font-size: 9px;
      font-weight: 700;
    }
    .lbl-yes { fill: #16a34a; }
    .lbl-no { fill: #dc2626; }

    /* Code Panel */
    .code-box {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 12px;
      line-height: 1.7;
      background: #f8fafc;
      border-radius: 6px;
      padding: 10px 8px;
      border: 1px solid #e2e8f0;
    }

    .code-line {
      padding: 3px 6px;
      border-radius: 4px;
      cursor: pointer;
      display: block;
      transition: background 0.2s, opacity 0.2s;
      border-left: 3px solid transparent;
    }

    .c-io { color: #0369a1; }
    .c-kw { color: #d97706; font-weight: 700; }
    .c-true { color: #15803d; font-weight: 600; }
    .c-false { color: #b91c1c; font-weight: 600; }
    .indent { padding-left: 14px; }

    /* Linked Highlight States */
    .hl-io {
      background: #bae6fd !important;
      border-left-color: #0284c7 !important;
    }
    .hl-dec {
      background: #fde68a !important;
      border-left-color: #d97706 !important;
    }
    .hl-true {
      background: #bbf7d0 !important;
      border-left-color: #16a34a !important;
    }
    .hl-false {
      background: #fecaca !important;
      border-left-color: #dc2626 !important;
    }

    .node.active .shape-io { fill: #bae6fd; stroke-width: 2.5; }
    .node.active .shape-dec { fill: #fde68a; stroke-width: 2.5; }
    .node.active .shape-true { fill: #bbf7d0; stroke-width: 2.5; }
    .node.active .shape-false { fill: #fecaca; stroke-width: 2.5; }
    .node.active .shape-term { fill: #e2e8f0; stroke-width: 2.5; }

    .node.dimmed, .code-line.dimmed {
      opacity: 0.35;
    }
  </style>
</head>
<body>

  <div class="toolbar">
    <button class="btn" id="btnChild" onclick="runTrace('child')">Trace: Age = 8</button>
    <button class="btn" id="btnAdult" onclick="runTrace('adult')">Trace: Age = 15</button>
    <button class="btn" id="btnReset" onclick="resetView()">Reset</button>
  </div>

  <div class="comparison-grid">
    
    <div class="panel">
      <div class="panel-header">Flowchart (Visual)</div>
      <svg viewBox="0 0 240 280">
        <defs>
          <marker id="arrow" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
            <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#94a3b8" />
          </marker>
        </defs>

        
        <path class="flow-line" d="M 120 26 L 120 42" />
        <path class="flow-line" d="M 120 68 L 120 84" />
        
        
        <path class="flow-line" d="M 75 110 L 48 110 L 48 140" />
        <path class="flow-line" d="M 165 110 L 192 110 L 192 140" />
        
        
        <path class="flow-line" d="M 48 168 L 48 190 L 105 190" />
        <path class="flow-line" d="M 192 168 L 192 190 L 135 190" />
        
        <path class="flow-line" d="M 120 190 L 120 206" />
        <path class="flow-line" d="M 120 232 L 120 248" />

        
        <text class="branch-lbl lbl-yes" x="52" y="104">True</text>
        <text class="branch-lbl lbl-no" x="170" y="104">False</text>

        
        <g class="node" id="n-start" onmouseenter="hoverItem('start')" onmouseleave="clearHover()">
          <rect class="shape-term" x="80" y="6" width="80" height="20" rx="10" />
          <text x="120" y="16">Start</text>
        </g>

        <g class="node" id="n-input" onmouseenter="hoverItem('input')" onmouseleave="clearHover()">
          <polygon class="shape-io" points="75,68 175,68 165,42 65,42" />
          <text x="120" y="55">INPUT age</text>
        </g>

        <g class="node" id="n-dec" onmouseenter="hoverItem('dec')" onmouseleave="clearHover()">
          <polygon class="shape-dec" points="120,85 165,110 120,135 75,110" />
          <text x="120" y="110">age &lt; 12 ?</text>
        </g>

        <g class="node" id="n-true" onmouseenter="hoverItem('true')" onmouseleave="clearHover()">
          <rect class="shape-true" x="12" y="140" width="72" height="28" rx="4" />
          <text x="48" y="154">price = $8</text>
        </g>

        <g class="node" id="n-false" onmouseenter="hoverItem('false')" onmouseleave="clearHover()">
          <rect class="shape-false" x="156" y="140" width="72" height="28" rx="4" />
          <text x="192" y="154">price = $12</text>
        </g>

        <g class="node" id="n-output" onmouseenter="hoverItem('output')" onmouseleave="clearHover()">
          <polygon class="shape-io" points="75,232 175,232 165,206 65,206" />
          <text x="120" y="219">OUTPUT price</text>
        </g>

        <g class="node" id="n-end" onmouseenter="hoverItem('end')" onmouseleave="clearHover()">
          <rect class="shape-term" x="80" y="248" width="80" height="20" rx="10" />
          <text x="120" y="258">End</text>
        </g>
      </svg>
    </div>

    
    <div class="panel">
      <div class="panel-header">Pseudocode (Text)</div>
      <div class="code-box">
        <span class="code-line c-io" id="c-input" onmouseenter="hoverItem('input')" onmouseleave="clearHover()">
          INPUT age
        </span>
        <span class="code-line c-kw" id="c-dec" onmouseenter="hoverItem('dec')" onmouseleave="clearHover()">
          IF age &lt; 12 THEN
        </span>
        <span class="code-line c-true indent" id="c-true" onmouseenter="hoverItem('true')" onmouseleave="clearHover()">
          price = 8
        </span>
        <span class="code-line c-kw" id="c-else" onmouseenter="hoverItem('dec')" onmouseleave="clearHover()">
          ELSE
        </span>
        <span class="code-line c-false indent" id="c-false" onmouseenter="hoverItem('false')" onmouseleave="clearHover()">
          price = 12
        </span>
        <span class="code-line c-kw" id="c-endif" onmouseenter="hoverItem('dec')" onmouseleave="clearHover()">
          ENDIF
        </span>
        <span class="code-line c-io" id="c-output" onmouseenter="hoverItem('output')" onmouseleave="clearHover()">
          OUTPUT price
        </span>
      </div>
    </div>
  </div>

  <script>
    let activeTrace = null;

    const groupMap = {
      'start': { nodes: ['n-start'], code: [], hlClass: '' },
      'input': { nodes: ['n-input'], code: ['c-input'], hlClass: 'hl-io' },
      'dec': { nodes: ['n-dec'], code: ['c-dec', 'c-else', 'c-endif'], hlClass: 'hl-dec' },
      'true': { nodes: ['n-true'], code: ['c-true'], hlClass: 'hl-true' },
      'false': { nodes: ['n-false'], code: ['c-false'], hlClass: 'hl-false' },
      'output': { nodes: ['n-output'], code: ['c-output'], hlClass: 'hl-io' },
      'end': { nodes: ['n-end'], code: [], hlClass: '' }
    };

    function hoverItem(key) {
      if (activeTrace) return;
      highlightGroup(key);
    }

    function clearHover() {
      if (activeTrace) return;
      resetHighlights();
    }

    function highlightGroup(key) {
      resetHighlights();
      const g = groupMap[key];
      if (!g) return;

      g.nodes.forEach(id => {
        const el = document.getElementById(id);
        if (el) el.classList.add('active');
      });

      g.code.forEach(id => {
        const el = document.getElementById(id);
        if (el && g.hlClass) el.classList.add(g.hlClass);
      });
    }

    function resetHighlights() {
      document.querySelectorAll('.node').forEach(n => n.classList.remove('active', 'dimmed'));
      document.querySelectorAll('.code-line').forEach(c => {
        c.className = c.className.replace(/hl-\w+/g, '').trim();
        c.classList.remove('dimmed');
      });
    }

    function runTrace(type) {
      activeTrace = type;
      document.getElementById('btnChild').classList.toggle('active', type === 'child');
      document.getElementById('btnAdult').classList.toggle('active', type === 'adult');

      resetHighlights();

      const isChild = type === 'child';
      const activeKeys = ['start', 'input', 'dec', isChild ? 'true' : 'false', 'output', 'end'];
      const dimKeys = isChild ? ['false'] : ['true'];

      // Highlight active path
      activeKeys.forEach(k => {
        const g = groupMap[k];
        g.nodes.forEach(id => document.getElementById(id)?.classList.add('active'));
        g.code.forEach(id => {
          if (g.hlClass) document.getElementById(id)?.classList.add(g.hlClass);
        });
      });

      // Dim unused branches
      dimKeys.forEach(k => {
        const g = groupMap[k];
        g.nodes.forEach(id => document.getElementById(id)?.classList.add('dimmed'));
        g.code.forEach(id => document.getElementById(id)?.classList.add('dimmed'));
      });
    }

    function resetView() {
      activeTrace = null;
      document.getElementById('btnChild').classList.remove('active');
      document.getElementById('btnAdult').classList.remove('active');
      resetHighlights();
    }
  </script>
</body>
</html>

Software Design Process: From Plan to Code

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

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

    .badge {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 3px 8px;
      border-radius: 6px;
      background: #e2e8f0;
      color: #475569;
    }

    .badge.active-badge {
      background: #dbeafe;
      color: #1d4ed8;
    }

    .code-container {
      position: relative;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 640px;
      background: transparent;
      padding: 0;
    }

    .code-panel {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    .panel-title {
      font-size: 11px;
      font-weight: 700;
      color: #64748b;
      margin-bottom: 6px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .code-col {
      display: flex;
      flex-direction: column;
      gap: 3px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 11px;
      line-height: 1.4;
      z-index: 2;
      overflow-x: auto;
    }

    .code-line {
      padding: 4px 6px;
      border-radius: 5px;
      white-space: pre;
      transition: background 0.25s ease, color 0.25s ease, outline 0.25s ease;
      color: #334155;
      outline: 1.5px solid transparent;
    }

    .code-line.active {
      background: #eff6ff;
      color: #1e2945;
      font-weight: 600;
      outline: 1.5px solid #3b82f6;
    }

    .kw { color: #2563eb; font-weight: 700; }
    .fn { color: #7c3aed; }
    .num { color: #d97706; }
    .op { color: #059669; }
    .br { color: #ea580c; font-weight: 700; }

    /* SVG Connecting Lines */
    .connectors-svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 3;
    }

    .connector-path {
      fill: none;
      stroke: #3b82f6;
      stroke-width: 2;
      stroke-dasharray: 5 4;
      opacity: 0;
      transition: opacity 0.25s ease;
    }

    .connector-path.active {
      opacity: 0.9;
      animation: dash 1s linear infinite;
    }

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

    /* Controls */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 8px;
      width: 100%;
      max-width: 640px;
    }

    .nav-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      border-radius: 6px;
      padding: 5px 12px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s ease;
    }

    .nav-btn:hover {
      background: #f1f5f9;
    }

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

    .step-dots {
      display: flex;
      gap: 6px;
      align-items: center;
      margin: 0 4px;
    }

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: background 0.25s ease;
    }

    .dot.active {
      background: #2563eb;
    }

    /* Responsive adjustments for mobile viewports */
    @media (max-width: 580px) {
      .code-container {
        grid-template-columns: 1fr;
        gap: 8px;
      }
      .code-col {
        font-size: 10.5px;
      }
      .code-panel {
        padding: 8px;
      }
    }
  </style>
</head>
<body>

  <div class="header-bar">
    <span class="badge active-badge" id="stepName">Function Header</span>
    <span class="badge" id="stepCounter">1 / 5</span>
  </div>

  <div class="code-container" id="codeContainer">
    <svg class="connectors-svg" id="svgStage"></svg>

    
    <div class="code-panel">
      <div class="panel-title">Pseudocode (Plan)</div>
      <div class="code-col">
        <div class="code-line" id="pseudo-0"><span class="kw">FUNCTION</span> <span class="fn">calculateTicket</span>(age, isStudent)</div>
        <div class="code-line" id="pseudo-1">  <span class="kw">IF</span> age &lt; <span class="num">12</span> <span class="kw">THEN</span> <span class="kw">return</span> <span class="num">8</span></div>
        <div class="code-line" id="pseudo-2">  <span class="kw">ELSE IF</span> isStudent == <span class="op">true</span> <span class="kw">THEN</span> <span class="kw">return</span> <span class="num">10</span></div>
        <div class="code-line" id="pseudo-3">  <span class="kw">ELSE</span> <span class="kw">return</span> <span class="num">15</span></div>
        <div class="code-line" id="pseudo-4"><span class="kw">ENDIF</span><br><span class="kw">ENDFUNCTION</span></div>
      </div>
    </div>

    
    <div class="code-panel">
      <div class="panel-title">JavaScript (Code)</div>
      <div class="code-col">
        <div class="code-line" id="js-0"><span class="kw">function</span> <span class="fn">calculateTicket</span>(age, isStudent) <span class="br">{</span></div>
        <div class="code-line" id="js-1">  <span class="kw">if</span> (age &lt; <span class="num">12</span>) <span class="br">{</span> <span class="kw">return</span> <span class="num">8</span>; <span class="br">}</span></div>
        <div class="code-line" id="js-2">  <span class="kw">else if</span> (isStudent) <span class="br">{</span> <span class="kw">return</span> <span class="num">10</span>; <span class="br">}</span></div>
        <div class="code-line" id="js-3">  <span class="kw">else</span> <span class="br">{</span> <span class="kw">return</span> <span class="num">15</span>; <span class="br">}</span></div>
        <div class="code-line" id="js-4"><span class="br">}</span></div>
      </div>
    </div>
  </div>

  <div class="controls">
    <button class="nav-btn" id="prevBtn" aria-label="Previous Step">◀</button>
    <div class="step-dots" id="dotsGroup">
      <div class="dot active" data-step="0"></div>
      <div class="dot" data-step="1"></div>
      <div class="dot" data-step="2"></div>
      <div class="dot" data-step="3"></div>
      <div class="dot" data-step="4"></div>
    </div>
    <button class="nav-btn" id="nextBtn" aria-label="Next Step">▶</button>
    <button class="nav-btn" id="playBtn" aria-label="Play/Pause">⏸</button>
  </div>

  <script>
    const steps = [
      { name: "Function Header", pId: "pseudo-0", jId: "js-0" },
      { name: "IF Condition", pId: "pseudo-1", jId: "js-1" },
      { name: "ELSE IF Branch", pId: "pseudo-2", jId: "js-2" },
      { name: "ELSE Default", pId: "pseudo-3", jId: "js-3" },
      { name: "Block Closures", pId: "pseudo-4", jId: "js-4" }
    ];

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

    const stepName = document.getElementById("stepName");
    const stepCounter = document.getElementById("stepCounter");
    const playBtn = document.getElementById("playBtn");
    const prevBtn = document.getElementById("prevBtn");
    const nextBtn = document.getElementById("nextBtn");
    const dots = document.querySelectorAll(".dot");
    const svg = document.getElementById("svgStage");
    const container = document.getElementById("codeContainer");

    function renderLines() {
      svg.innerHTML = "";
      const containerRect = container.getBoundingClientRect();
      const isStacked = window.innerWidth <= 580;

      steps.forEach((step, index) => {
        const pEl = document.getElementById(step.pId);
        const jEl = document.getElementById(step.jId);
        if (!pEl || !jEl) return;

        const pRect = pEl.getBoundingClientRect();
        const jRect = jEl.getBoundingClientRect();

        let startX, startY, endX, endY, pathData;

        if (isStacked) {
          startX = (pRect.left + pRect.right) / 2 - containerRect.left;
          startY = pRect.bottom - containerRect.top;
          endX = (jRect.left + jRect.right) / 2 - containerRect.left;
          endY = jRect.top - containerRect.top;
          const midY = (startY + endY) / 2;
          pathData = `M ${startX} ${startY} C ${startX} ${midY}, ${endX} ${midY}, ${endX} ${endY}`;
        } else {
          startX = pRect.right - containerRect.left;
          startY = pRect.top + pRect.height / 2 - containerRect.top;
          endX = jRect.left - containerRect.left;
          endY = jRect.top + jRect.height / 2 - containerRect.top;
          const deltaX = (endX - startX) * 0.5;
          pathData = `M ${startX} ${startY} C ${startX + deltaX} ${startY}, ${endX - deltaX} ${endY}, ${endX} ${endY}`;
        }

        const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
        path.setAttribute("d", pathData);
        path.setAttribute("class", `connector-path ${index === currentStep ? "active" : ""}`);
        path.setAttribute("id", `path-${index}`);
        svg.appendChild(path);
      });
    }

    function setStep(index) {
      currentStep = (index + steps.length) % steps.length;

      stepName.textContent = steps[currentStep].name;
      stepCounter.textContent = `${currentStep + 1} / ${steps.length}`;

      steps.forEach((step, i) => {
        const pEl = document.getElementById(step.pId);
        const jEl = document.getElementById(step.jId);
        const path = document.getElementById(`path-${i}`);

        if (i === currentStep) {
          pEl.classList.add("active");
          jEl.classList.add("active");
          if (path) path.classList.add("active");
          dots[i].classList.add("active");
        } else {
          pEl.classList.remove("active");
          jEl.classList.remove("active");
          if (path) path.classList.remove("active");
          dots[i].classList.remove("active");
        }
      });
    }

    function nextStep() { setStep(currentStep + 1); }
    function prevStep() { setStep(currentStep - 1); }

    function startAutoPlay() {
      stopAutoPlay();
      timer = setInterval(nextStep, 3200);
      isPlaying = true;
      playBtn.textContent = "⏸";
    }

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

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

    prevBtn.addEventListener("click", () => { stopAutoPlay(); prevStep(); });
    nextBtn.addEventListener("click", () => { stopAutoPlay(); nextStep(); });

    dots.forEach((dot, idx) => {
      dot.addEventListener("click", () => {
        stopAutoPlay();
        setStep(idx);
      });
    });

    window.addEventListener("resize", renderLines);

    // Initial render
    renderLines();
    setStep(0);
    startAutoPlay();
  </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>Trace Table Simulation</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: #ffffff;
      padding: 12px;
      line-height: 1.4;
    }

    .diagram {
      display: flex;
      flex-direction: column;
      gap: 12px;
      max-width: 680px;
      margin: 0 auto;
    }

    .panels {
      display: grid;
      grid-template-columns: 1fr 1.35fr;
      gap: 12px;
    }

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

    .panel-box {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 10px;
    }

    .panel-title {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      color: #64748b;
      margin-bottom: 8px;
    }

    .code-list {
      display: flex;
      flex-direction: column;
      gap: 4px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 13px;
    }

    .code-line {
      display: flex;
      align-items: center;
      padding: 5px 8px;
      border-radius: 6px;
      background: #ffffff;
      border: 1px solid transparent;
      box-shadow: 0 0 0 1px #e2e8f0 inset;
      transition: all 0.25s ease;
    }

    .code-line.active {
      background: #eff6ff;
      border-color: #3b82f6;
      box-shadow: 0 0 0 1px #3b82f6 inset;
      font-weight: 600;
    }

    .line-num {
      color: #94a3b8;
      width: 20px;
      flex-shrink: 0;
      font-size: 11px;
      user-select: none;
    }

    .line-text {
      color: #1e2945;
      white-space: pre;
    }

    .code-line.active .line-num {
      color: #3b82f6;
      font-weight: 700;
    }

    .table-container {
      overflow-x: auto;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
      text-align: center;
    }

    th {
      background: #e2e8f0;
      color: #1e2945;
      font-weight: 600;
      padding: 6px 4px;
      border: 1px solid #cbd5e1;
      font-size: 11px;
    }

    td {
      padding: 6px 4px;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #94a3b8;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 12px;
      transition: all 0.25s ease;
    }

    tr.active td {
      background: #eff6ff;
      color: #1e2945;
      font-weight: 700;
      border-color: #bfdbfe;
    }

    tr.active td.val-highlight {
      color: #2563eb;
      background: #dbeafe;
    }

    tr.visible td {
      color: #1e2945;
    }

    tr.pending td {
      color: #cbd5e1;
    }

    .controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 12px;
    }

    .btn-group {
      display: flex;
      gap: 6px;
    }

    button {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      padding: 6px 12px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: background 0.2s, border-color 0.2s;
    }

    button:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }

    button.btn-primary {
      background: #3b82f6;
      color: #ffffff;
      border-color: #2563eb;
    }

    button.btn-primary:hover {
      background: #2563eb;
    }

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

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .dot.active {
      background: #3b82f6;
      transform: scale(1.25);
    }
  </style>
</head>
<body>
  <div class="diagram">
    <div class="panels">
      
      <div class="panel-box">
        <div class="panel-title">Algorithm Code</div>
        <div class="code-list">
          <div class="code-line" id="line-1">
            <span class="line-num">1</span>
            <span class="line-text">total = 0</span>
          </div>
          <div class="code-line" id="line-2">
            <span class="line-num">2</span>
            <span class="line-text">FOR count = 1 TO 3</span>
          </div>
          <div class="code-line" id="line-3">
            <span class="line-num">3</span>
            <span class="line-text">  total = total + count</span>
          </div>
          <div class="code-line" id="line-4">
            <span class="line-num">4</span>
            <span class="line-text">OUTPUT total</span>
          </div>
        </div>
      </div>

      
      <div class="panel-box">
        <div class="panel-title">Trace Table</div>
        <div class="table-container">
          <table>
            <thead>
              <tr>
                <th>Line</th>
                <th>Iteration</th>
                <th>count</th>
                <th>total</th>
                <th>Output</th>
              </tr>
            </thead>
            <tbody>
              <tr id="row-1" class="pending">
                <td class="cell-line">1</td>
                <td>-</td>
                <td>-</td>
                <td class="cell-total">0</td>
                <td></td>
              </tr>
              <tr id="row-2" class="pending">
                <td class="cell-line">2, 3</td>
                <td>1</td>
                <td class="cell-count">1</td>
                <td class="cell-total">1</td>
                <td></td>
              </tr>
              <tr id="row-3" class="pending">
                <td class="cell-line">2, 3</td>
                <td>2</td>
                <td class="cell-count">2</td>
                <td class="cell-total">3</td>
                <td></td>
              </tr>
              <tr id="row-4" class="pending">
                <td class="cell-line">2, 3</td>
                <td>3</td>
                <td class="cell-count">3</td>
                <td class="cell-total">6</td>
                <td></td>
              </tr>
              <tr id="row-5" class="pending">
                <td class="cell-line">4</td>
                <td>-</td>
                <td>-</td>
                <td>-</td>
                <td class="cell-out">6</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    
    <div class="controls">
      <div class="btn-group">
        <button id="prevBtn" title="Previous Step">◀</button>
        <button id="playBtn" class="btn-primary" title="Play / Pause"><span id="playIcon">▶</span> Auto</button>
        <button id="nextBtn" class="btn-primary">Step Next ❯</button>
      </div>
      <div class="step-dots">
        <div class="dot active" data-step="1"></div>
        <div class="dot" data-step="2"></div>
        <div class="dot" data-step="3"></div>
        <div class="dot" data-step="4"></div>
        <div class="dot" data-step="5"></div>
      </div>
    </div>
  </div>

  <script>
    const steps = [
      { step: 1, lines: [1], highlightCol: 'cell-total' },
      { step: 2, lines: [2, 3], highlightCol: 'cell-total' },
      { step: 3, lines: [2, 3], highlightCol: 'cell-total' },
      { step: 4, lines: [2, 3], highlightCol: 'cell-total' },
      { step: 5, lines: [4], highlightCol: 'cell-out' }
    ];

    let currentStep = 1;
    let timer = null;

    const lineEls = {
      1: document.getElementById('line-1'),
      2: document.getElementById('line-2'),
      3: document.getElementById('line-3'),
      4: document.getElementById('line-4')
    };

    const rowEls = [
      document.getElementById('row-1'),
      document.getElementById('row-2'),
      document.getElementById('row-3'),
      document.getElementById('row-4'),
      document.getElementById('row-5')
    ];

    const dots = document.querySelectorAll('.dot');
    const playBtn = document.getElementById('playBtn');
    const playIcon = document.getElementById('playIcon');
    const nextBtn = document.getElementById('nextBtn');
    const prevBtn = document.getElementById('prevBtn');

    function renderStep(s) {
      currentStep = s;

      // Update Code Line Highlighting
      Object.values(lineEls).forEach(el => el.classList.remove('active'));
      const activeLines = steps[s - 1].lines;
      activeLines.forEach(ln => {
        if (lineEls[ln]) lineEls[ln].classList.add('active');
      });

      // Update Trace Table Rows
      rowEls.forEach((r, idx) => {
        const stepNum = idx + 1;
        r.classList.remove('active', 'visible', 'pending');
        r.querySelectorAll('td').forEach(td => td.classList.remove('val-highlight'));

        if (stepNum < s) {
          r.classList.add('visible');
        } else if (stepNum === s) {
          r.classList.add('active');
          const targetCol = steps[s - 1].highlightCol;
          const hlCell = r.querySelector('.' + targetCol);
          if (hlCell) hlCell.classList.add('val-highlight');
        } else {
          r.classList.add('pending');
        }
      });

      // Update Step Dots
      dots.forEach((dot, idx) => {
        dot.classList.toggle('active', idx + 1 === s);
      });
    }

    function next() {
      if (currentStep < 5) {
        renderStep(currentStep + 1);
      } else {
        renderStep(1);
      }
    }

    function prev() {
      if (currentStep > 1) {
        renderStep(currentStep - 1);
      } else {
        renderStep(5);
      }
    }

    function togglePlay() {
      if (timer) {
        clearInterval(timer);
        timer = null;
        playIcon.textContent = '▶';
      } else {
        playIcon.textContent = '⏸';
        timer = setInterval(() => {
          next();
        }, 3200);
      }
    }

    nextBtn.addEventListener('click', () => {
      if (timer) togglePlay();
      next();
    });

    prevBtn.addEventListener('click', () => {
      if (timer) togglePlay();
      prev();
    });

    playBtn.addEventListener('click', togglePlay);

    dots.forEach(dot => {
      dot.addEventListener('click', (e) => {
        if (timer) togglePlay();
        const target = parseInt(e.target.getAttribute('data-step'), 10);
        renderStep(target);
      });
    });

    // Initialize Step 1
    renderStep(1);
  </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">
  <title>Software Development Lifecycle</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;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 12px;
    }

    .pipeline-container {
      width: 100%;
      max-width: 440px;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }

    .cycle-grid {
      position: relative;
      width: 100%;
      aspect-ratio: 1 / 1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 20px;
      padding: 10px;
    }

    /* Connecting arrows SVG layer */
    .arrows-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
    }

    .arrow-path {
      stroke: #cbd5e1;
      stroke-width: 2.5;
      fill: none;
      stroke-linecap: round;
      stroke-dasharray: 6 6;
      transition: stroke 0.3s ease, stroke-width 0.3s ease;
    }

    .arrow-path.active {
      stroke: #3b82f6;
      stroke-width: 3.5;
      stroke-dasharray: none;
    }

    .stage-card {
      position: relative;
      z-index: 2;
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 14px;
      padding: 12px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      cursor: pointer;
      user-select: none;
      transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    }

    .stage-card:hover {
      border-color: #93c5fd;
    }

    .stage-card.active {
      background: #eff6ff;
      border-color: #3b82f6;
      box-shadow: 0 4px 14px rgba(59, 130, 246, 0.22);
    }

    .icon-box {
      font-size: 26px;
      line-height: 1;
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 34px;
    }

    .stage-num {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
      margin-bottom: 2px;
    }

    .stage-card.active .stage-num {
      color: #2563eb;
    }

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

    .stage-sub {
      font-size: 12px;
      color: #64748b;
      margin-top: 2px;
      font-weight: 500;
    }

    .stage-card.active .stage-sub {
      color: #1e40af;
    }

    /* Center Hub */
    .center-hub {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 72px;
      height: 72px;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 3;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      cursor: pointer;
    }

    .hub-arrow {
      font-size: 20px;
      color: #3b82f6;
      transition: transform 0.4s ease;
    }

    .hub-label {
      font-size: 9px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
    }

    /* Controls bar */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
    }

    .btn {
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      user-select: none;
    }

    .btn:hover {
      background: #e2e8f0;
    }

    .dots {
      display: flex;
      gap: 6px;
    }

    .dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: background 0.3s ease;
    }

    .dot.active {
      background: #3b82f6;
    }
  </style>
</head>
<body>

  <div class="pipeline-container">
    <div class="cycle-grid">
      
      <svg class="arrows-svg" viewBox="0 0 400 400" preserveAspectRatio="none">
        <defs>
          <marker id="arrowHead" markerWidth="8" markerHeight="8" refX="5" refY="4" orient="auto">
            <polygon points="0 1, 7 4, 0 7" fill="#cbd5e1" id="arrowHeadPoly" />
          </marker>
          <marker id="arrowHeadActive" markerWidth="8" markerHeight="8" refX="5" refY="4" orient="auto">
            <polygon points="0 1, 7 4, 0 7" fill="#3b82f6" />
          </marker>
        </defs>
        
        <path id="path0" class="arrow-path" d="M 180 85 Q 200 65 220 85" marker-end="url(#arrowHead)" />
        
        <path id="path1" class="arrow-path" d="M 315 180 Q 335 200 315 220" marker-end="url(#arrowHead)" />
        
        <path id="path2" class="arrow-path" d="M 220 315 Q 200 335 180 315" marker-end="url(#arrowHead)" />
        
        <path id="path3" class="arrow-path" d="M 85 220 Q 65 200 85 180" marker-end="url(#arrowHead)" />
      </svg>

      
      <div class="center-hub" id="centerHub" title="Click to Advance">
        <div class="hub-arrow" id="hubIcon">↻</div>
        <div class="hub-label">Cycle</div>
      </div>

      
      <div class="stage-card active" data-index="0">
        <div class="stage-num">Stage 1</div>
        <div class="icon-box">🔍</div>
        <div class="stage-title">Analysis</div>
        <div class="stage-sub">Deconstruct</div>
      </div>

      
      <div class="stage-card" data-index="1">
        <div class="stage-num">Stage 2</div>
        <div class="icon-box">📐</div>
        <div class="stage-title">Design</div>
        <div class="stage-sub">Algorithms</div>
      </div>

      
      <div class="stage-card" data-index="3" style="grid-column: 1; grid-row: 2;">
        <div class="stage-num">Stage 4</div>
        <div class="icon-box">🐞</div>
        <div class="stage-title">Testing</div>
        <div class="stage-sub">Test Tables</div>
      </div>

      
      <div class="stage-card" data-index="2" style="grid-column: 2; grid-row: 2;">
        <div class="stage-num">Stage 3</div>
        <div class="icon-box">💻</div>
        <div class="stage-title">Implement</div>
        <div class="stage-sub">Code Syntax</div>
      </div>
    </div>

    
    <div class="controls">
      <button class="btn" id="playBtn">⏸ Pause</button>
      <div class="dots">
        <div class="dot active" data-index="0"></div>
        <div class="dot" data-index="1"></div>
        <div class="dot" data-index="2"></div>
        <div class="dot" data-index="3"></div>
      </div>
      <button class="btn" id="nextBtn">Next →</button>
    </div>
  </div>

  <script>
    const stages = document.querySelectorAll('.stage-card');
    const dots = document.querySelectorAll('.dot');
    const paths = [
      document.getElementById('path0'),
      document.getElementById('path1'),
      document.getElementById('path2'),
      document.getElementById('path3')
    ];
    const playBtn = document.getElementById('playBtn');
    const nextBtn = document.getElementById('nextBtn');
    const centerHub = document.getElementById('centerHub');
    const hubIcon = document.getElementById('hubIcon');

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

    function updateStage(index) {
      currentIndex = index;

      stages.forEach((card) => {
        const i = parseInt(card.dataset.index);
        card.classList.toggle('active', i === currentIndex);
      });

      dots.forEach((dot, i) => {
        dot.classList.toggle('active', i === currentIndex);
      });

      paths.forEach((path, i) => {
        const isActive = i === currentIndex;
        path.classList.toggle('active', isActive);
        path.setAttribute('marker-end', isActive ? 'url(#arrowHeadActive)' : 'url(#arrowHead)');
      });

      hubIcon.style.transform = `rotate(${currentIndex * 90}deg)`;
    }

    function nextStage() {
      updateStage((currentIndex + 1) % 4);
    }

    function startAutoPlay() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStage, 3200);
      isPlaying = true;
      playBtn.textContent = '⏸ Pause';
    }

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

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

    nextBtn.addEventListener('click', () => {
      pauseAutoPlay();
      nextStage();
    });

    centerHub.addEventListener('click', () => {
      pauseAutoPlay();
      nextStage();
    });

    stages.forEach(card => {
      card.addEventListener('click', () => {
        pauseAutoPlay();
        updateStage(parseInt(card.dataset.index));
      });
    });

    dots.forEach(dot => {
      dot.addEventListener('click', () => {
        pauseAutoPlay();
        updateStage(parseInt(dot.dataset.index));
      });
    });

    // Start on load
    updateStage(0);
    startAutoPlay();
  </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;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

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

    /* Scenario Header */
    .scenario-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 8px;
      padding: 6px 12px;
      background: #f8fafc;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
    }

    .scenario-title {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.02em;
      color: #334155;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .badge-scenario {
      background: #e0f2fe;
      color: #0369a1;
      font-size: 11px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 999px;
      text-transform: uppercase;
    }

    /* Comparison Grid */
    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }

    @media (max-width: 580px) {
      .grid {
        grid-template-columns: 1fr;
        gap: 16px;
      }
    }

    /* Column Styles */
    .column {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .col-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 2px solid #f1f5f9;
      padding-bottom: 6px;
    }

    .col-title {
      font-size: 14px;
      font-weight: 800;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .col-title.blue { color: #2563eb; }
    .col-title.emerald { color: #059669; }

    .col-desc {
      font-size: 11px;
      color: #64748b;
      font-weight: 500;
    }

    /* Decomposition Modules */
    .decomp-list {
      display: flex;
      flex-direction: column;
      position: relative;
      gap: 8px;
    }

    .decomp-item {
      display: flex;
      align-items: center;
      gap: 10px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 10px;
      position: relative;
      z-index: 1;
      transition: box-shadow 0.2s ease, border-color 0.2s ease;
    }

    .decomp-item:hover {
      border-color: #93c5fd;
      box-shadow: 0 2px 6px rgba(37, 99, 235, 0.08);
    }

    .decomp-num {
      width: 24px;
      height: 24px;
      background: #2563eb;
      color: #ffffff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 700;
      flex-shrink: 0;
    }

    .decomp-content {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    .decomp-name {
      font-size: 13px;
      font-weight: 700;
      color: #1e2945;
      line-height: 1.2;
    }

    .decomp-sub {
      font-size: 11px;
      color: #64748b;
      line-height: 1.2;
      margin-top: 2px;
    }

    /* Vertical connector line */
    .decomp-list::before {
      content: '';
      position: absolute;
      left: 21px;
      top: 14px;
      bottom: 14px;
      width: 2px;
      border-left: 2px dashed #cbd5e1;
      z-index: 0;
    }

    /* Abstraction Filter Section */
    .filter-ctrl {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 10px;
    }

    .filter-label {
      font-size: 12px;
      font-weight: 700;
      color: #475569;
    }

    .toggle-group {
      display: flex;
      background: #e2e8f0;
      border-radius: 6px;
      padding: 2px;
      gap: 2px;
    }

    .toggle-btn {
      border: none;
      background: transparent;
      padding: 3px 8px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .toggle-btn.active {
      background: #ffffff;
      color: #047857;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .data-grid {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .tag-cluster {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .data-tag {
      font-size: 11px;
      font-weight: 600;
      padding: 4px 8px;
      border-radius: 6px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: opacity 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, text-decoration 0.25s ease;
      white-space: nowrap;
    }

    .data-tag.essential {
      background: #ecfdf5;
      color: #047857;
      border: 1px solid #a7f3d0;
    }

    .data-tag.irrelevant {
      background: #f1f5f9;
      color: #64748b;
      border: 1px solid #e2e8f0;
    }

    /* Filtered Out State */
    .filtered .data-tag.irrelevant {
      opacity: 0.35;
      text-decoration: line-through;
      background: #f8fafc;
      border-color: #f1f5f9;
      color: #94a3b8;
    }

    .filtered .data-tag.essential {
      box-shadow: 0 0 0 1px #059669;
    }

    .section-tag-label {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      margin-top: 2px;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .label-keep { color: #047857; }
    .label-discard { color: #64748b; }

    /* Footer Takeaway */
    .takeaway-bar {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      padding: 8px 10px;
      background: #f8fafc;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
    }

    @media (max-width: 580px) {
      .takeaway-bar {
        grid-template-columns: 1fr;
      }
    }

    .takeaway-item {
      font-size: 11px;
      color: #334155;
      display: flex;
      align-items: center;
      gap: 6px;
      line-height: 1.3;
    }

    .takeaway-bullet {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .bullet-blue { background: #2563eb; }
    .bullet-green { background: #059669; }
  </style>
</head>
<body>

  
  <div class="scenario-bar">
    <div class="scenario-title">
      <span class="badge-scenario">Problem</span>
      Automated Cinema Ticket Checkout
    </div>
    <div style="font-size: 11px; color: #64748b; font-weight: 600;">
      GCSE Computational Thinking
    </div>
  </div>

  
  <div class="grid">

    
    <div class="column">
      <div class="col-header">
        <div class="col-title blue">
          <span>🧩</span> Decomposition
        </div>
        <div class="col-desc">Break into sub-problems</div>
      </div>

      <div class="decomp-list">
        <div class="decomp-item">
          <div class="decomp-num">1</div>
          <div class="decomp-content">
            <div class="decomp-name">Seat Selection</div>
            <div class="decomp-sub">Screen, Row & Seat ID</div>
          </div>
        </div>

        <div class="decomp-item">
          <div class="decomp-num">2</div>
          <div class="decomp-content">
            <div class="decomp-name">Calculate Total</div>
            <div class="decomp-sub">Age Concession & Multi-tickets</div>
          </div>
        </div>

        <div class="decomp-item">
          <div class="decomp-num">3</div>
          <div class="decomp-content">
            <div class="decomp-name">Process Payment</div>
            <div class="decomp-sub">Card / Digital Wallet & Receipt</div>
          </div>
        </div>
      </div>
    </div>

    
    <div class="column">
      <div class="col-header">
        <div class="col-title emerald">
          <span>🔍</span> Abstraction
        </div>
        <div class="col-desc">Filter essential details</div>
      </div>

      <div class="filter-ctrl">
        <span class="filter-label">Data Filter:</span>
        <div class="toggle-group">
          <button id="btnEssential" class="toggle-btn active" onclick="setFilter(true)">Essential</button>
          <button id="btnAll" class="toggle-btn" onclick="setFilter(false)">All Data</button>
        </div>
      </div>

      <div id="dataContainer" class="data-grid filtered">
        
        <div>
          <div class="section-tag-label label-keep">✓ Essential Variables (Keep)</div>
          <div class="tag-cluster" style="margin-top: 4px;">
            <span class="data-tag essential">Age Band</span>
            <span class="data-tag essential">Seat Number</span>
            <span class="data-tag essential">Base Price</span>
            <span class="data-tag essential">Quantity</span>
          </div>
        </div>

        
        <div>
          <div class="section-tag-label label-discard">✕ Non-Essential Data (Ignore)</div>
          <div class="tag-cluster" style="margin-top: 4px;">
            <span class="data-tag irrelevant">Shoe Size</span>
            <span class="data-tag irrelevant">Eye Colour</span>
            <span class="data-tag irrelevant">Director Name</span>
            <span class="data-tag irrelevant">Weather</span>
          </div>
        </div>
      </div>
    </div>

  </div>

  
  <div class="takeaway-bar">
    <div class="takeaway-item">
      <span class="takeaway-bullet bullet-blue"></span>
      <span><strong>Decomposition:</strong> Solves complexity step-by-step.</span>
    </div>
    <div class="takeaway-item">
      <span class="takeaway-bullet bullet-green"></span>
      <span><strong>Abstraction:</strong> Removes noise to focus on what matters.</span>
    </div>
  </div>

  <script>
    function setFilter(essentialOnly) {
      const container = document.getElementById('dataContainer');
      const btnEssential = document.getElementById('btnEssential');
      const btnAll = document.getElementById('btnAll');

      if (essentialOnly) {
        container.classList.add('filtered');
        btnEssential.classList.add('active');
        btnAll.classList.remove('active');
      } else {
        container.classList.remove('filtered');
        btnEssential.classList.remove('active');
        btnAll.classList.add('active');
      }
    }
  </script>
</body>
</html>

CS-16

Aligned learning resources

Related diagrams