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

    .main-wrap {
      width: 100%;
      max-width: 600px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      flex-wrap: wrap;
      width: 100%;
    }

    .btn-step {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 20px;
      padding: 5px 12px;
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .btn-step:hover {
      background: #e2e8f0;
      color: #1e293b;
    }

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

    .btn-play {
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 50%;
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      cursor: pointer;
      color: #334155;
      transition: background 0.2s ease;
    }

    .btn-play:hover {
      background: #e2e8f0;
    }

    .content-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      width: 100%;
    }

    .graph-container {
      position: relative;
      width: 260px;
      height: 260px;
      flex-shrink: 0;
    }

    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
      user-select: none;
    }

    .card-panel {
      flex: 1;
      min-width: 200px;
      max-width: 280px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .card-title {
      font-size: 13px;
      font-weight: 700;
      color: #0f172a;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .card-body {
      font-size: 13px;
      line-height: 1.45;
      color: #334155;
      min-height: 48px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 3px;
    }

    .badge {
      display: inline-block;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 700;
    }
    .badge-true { background: #dcfce7; color: #15803d; }
    .badge-line { background: #dbeafe; color: #1d4ed8; }

    /* Graph element transitions */
    .g-intercepts, .g-line, .g-test, .g-shade {
      transition: opacity 0.4s ease;
    }

    .pulse-dot {
      animation: pulse 1.6s infinite ease-in-out;
      transform-origin: 106px 214px;
    }

    @keyframes pulse {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.6); opacity: 0.6; }
    }

    @media (max-width: 550px) {
      .content-row {
        flex-direction: column;
        align-items: center;
        gap: 10px;
      }
      .graph-container {
        width: 240px;
        height: 240px;
      }
      .card-panel {
        max-width: 100%;
        width: 100%;
        min-width: 0;
      }
      .controls {
        gap: 4px;
      }
      .btn-step {
        padding: 4px 10px;
        font-size: 11px;
      }
    }
  </style>
</head>
<body>
  <div class="main-wrap">
    <div class="controls">
      <button id="btn0" class="btn-step active" onclick="setStep(0)">1. Intercepts</button>
      <button id="btn1" class="btn-step" onclick="setStep(1)">2. Line</button>
      <button id="btn2" class="btn-step" onclick="setStep(2)">3. Test (0,0)</button>
      <button id="btn3" class="btn-step" onclick="setStep(3)">4. Shade</button>
      <button id="playBtn" class="btn-play" title="Auto Play" onclick="togglePlay()">⏸</button>
    </div>

    <div class="content-row">
      <div class="graph-container">
        <svg viewBox="0 0 320 320">
          <defs>
            <clipPath id="gridClip">
              <rect x="34" y="34" width="252" height="252" rx="4" />
            </clipPath>
          </defs>

          
          <rect x="34" y="34" width="252" height="252" fill="#ffffff" stroke="#cbd5e1" stroke-width="1.5" rx="4"/>

          
          <g stroke="#f1f5f9" stroke-width="1.5">
            <line x1="70" y1="34" x2="70" y2="286"/>
            <line x1="142" y1="34" x2="142" y2="286"/>
            <line x1="178" y1="34" x2="178" y2="286"/>
            <line x1="214" y1="34" x2="214" y2="286"/>
            <line x1="250" y1="34" x2="250" y2="286"/>

            <line x1="34" y1="70" x2="286" y2="70"/>
            <line x1="34" y1="106" x2="286" y2="106"/>
            <line x1="34" y1="142" x2="286" y2="142"/>
            <line x1="34" y1="178" x2="286" y2="178"/>
            <line x1="34" y1="250" x2="286" y2="250"/>
          </g>

          
          <g id="shadeGroup" class="g-shade" clip-path="url(#gridClip)" style="opacity: 0;">
            <polygon points="34,94 286,262 286,286 34,286" fill="#2563eb" fill-opacity="0.22" />
          </g>

          
          <g stroke="#64748b" stroke-width="1.5">
            
            <line x1="34" y1="214" x2="286" y2="214"/>
            
            <line x1="106" y1="34" x2="106" y2="286"/>
          </g>

          
          <g font-size="10" font-weight="600" fill="#94a3b8" text-anchor="middle" dominant-baseline="central">
            
            <text x="34" y="226">-2</text>
            <text x="70" y="226">-1</text>
            <text x="142" y="226">1</text>
            <text x="178" y="226">2</text>
            <text x="214" y="226">3</text>
            <text x="250" y="226">4</text>
            <text x="286" y="226">5</text>

            
            <text x="96" y="286">-2</text>
            <text x="96" y="250">-1</text>
            <text x="96" y="178">1</text>
            <text x="96" y="142">2</text>
            <text x="96" y="106">3</text>
            <text x="96" y="70">4</text>
            <text x="96" y="34">5</text>

            
            <text x="300" y="214" fill="#475569" font-weight="bold">x</text>
            <text x="106" y="22" fill="#475569" font-weight="bold">y</text>
          </g>

          
          <g id="lineGroup" class="g-line" clip-path="url(#gridClip)" style="opacity: 0;">
            <line x1="34" y1="94" x2="286" y2="262" stroke="#1d4ed8" stroke-width="3" stroke-linecap="round" />
          </g>

          
          <g id="interceptsGroup" class="g-intercepts" style="opacity: 1;">
            
            <circle cx="106" cy="142" r="5" fill="#1d4ed8" stroke="#ffffff" stroke-width="2"/>
            <text x="122" y="136" font-size="11" font-weight="700" fill="#1d4ed8">(0, 2)</text>

            
            <circle cx="214" cy="214" r="5" fill="#1d4ed8" stroke="#ffffff" stroke-width="2"/>
            <text x="228" y="204" font-size="11" font-weight="700" fill="#1d4ed8">(3, 0)</text>
          </g>

          
          <g id="testGroup" class="g-test" style="opacity: 0;">
            <circle class="pulse-dot" cx="106" cy="214" r="7" fill="#f97316" fill-opacity="0.4"/>
            <circle cx="106" cy="214" r="4.5" fill="#f97316" stroke="#ffffff" stroke-width="1.5"/>
            <text x="86" y="202" font-size="11" font-weight="700" fill="#ea580c">(0, 0)</text>
          </g>
        </svg>
      </div>

      <div class="card-panel">
        <div class="card-title">
          <span id="cardStepNum" class="badge badge-line">Step 1</span>
          <span id="cardTitle">Plot Intercepts</span>
        </div>
        <div class="card-body" id="cardMath"></div>
      </div>
    </div>
  </div>

  <script>
    const stepData = [
      {
        title: "Find Intercepts",
        tag: "Step 1",
        tagClass: "badge-line",
        html: `<div>2<i>x</i> + 3<i>y</i> = 6 &implies;</div><div>Plot <strong>(3, 0)</strong> and <strong>(0, 2)</strong></div>`,
        showIntercepts: true,
        showLine: false,
        showTest: false,
        showShade: false
      },
      {
        title: "Draw Boundary Line",
        tag: "Step 2",
        tagClass: "badge-line",
        html: `<div><strong>&le;</strong> indicates a <strong>solid line</strong> passing through the intercepts.</div>`,
        showIntercepts: true,
        showLine: true,
        showTest: false,
        showShade: false
      },
      {
        title: "Test Point (0,0)",
        tag: "Step 3",
        tagClass: "badge-true",
        html: `<div>2(0) + 3(0) &le; 6 &implies; 0 &le; 6</div><div><span style="font-weight:700; color:#15803d;">(TRUE &#x2713;)</span></div>`,
        showIntercepts: true,
        showLine: true,
        showTest: true,
        showShade: false
      },
      {
        title: "Shade Solution Region",
        tag: "Step 4",
        tagClass: "badge-true",
        html: `<div>Since (0, 0) is true, <strong>shade the region below the line</strong> containing (0, 0).</div>`,
        showIntercepts: true,
        showLine: true,
        showTest: true,
        showShade: true
      }
    ];

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

    function setStep(idx) {
      currentStep = idx;
      const data = stepData[idx];

      // Update buttons
      for (let i = 0; i < 4; i++) {
        const b = document.getElementById('btn' + i);
        if (i === idx) b.classList.add('active');
        else b.classList.remove('active');
      }

      // Update card
      const badge = document.getElementById('cardStepNum');
      badge.textContent = data.tag;
      badge.className = 'badge ' + data.tagClass;
      document.getElementById('cardTitle').textContent = data.title;
      document.getElementById('cardMath').innerHTML = data.html;

      // Update SVG visibility
      document.getElementById('interceptsGroup').style.opacity = data.showIntercepts ? '1' : '0';
      document.getElementById('lineGroup').style.opacity = data.showLine ? '1' : '0';
      document.getElementById('testGroup').style.opacity = data.showTest ? '1' : '0';
      document.getElementById('shadeGroup').style.opacity = data.showShade ? '1' : '0';
    }

    function nextStep() {
      setStep((currentStep + 1) % stepData.length);
    }

    function startTimer() {
      stopTimer();
      timer = setInterval(nextStep, 3600);
      isPlaying = true;
      document.getElementById('playBtn').textContent = '⏸';
    }

    function stopTimer() {
      if (timer) clearInterval(timer);
      timer = null;
      isPlaying = false;
      document.getElementById('playBtn').textContent = '▶';
    }

    function togglePlay() {
      if (isPlaying) stopTimer();
      else { nextStep(); startTimer(); }
    }

    // Initialize
    setStep(0);
    startTimer();
  </script>
</body>
</html>

Graphing Linear Inequalities in Two Variables

<!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;
      user-select: none;
      -webkit-user-select: none;
    }
    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: space-between;
      width: 100%;
      height: 100%;
      padding: 8px;
    }
    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: 380px;
      padding: 2px 4px 6px;
    }
    .ineq-badge {
      font-size: 17px;
      font-weight: 700;
      background: #f1f5f9;
      color: #0f172a;
      padding: 4px 12px;
      border-radius: 8px;
      letter-spacing: 0.5px;
    }
    .status-badge {
      font-size: 13px;
      font-weight: 600;
      padding: 4px 10px;
      border-radius: 8px;
      transition: background-color 0.2s ease, color 0.2s ease;
    }
    .status-false {
      background: #fee2e2;
      color: #dc2626;
    }
    .status-true {
      background: #dcfce7;
      color: #16a34a;
    }
    .svg-wrap {
      position: relative;
      width: 100%;
      max-width: 380px;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: crosshair;
      touch-action: manipulation;
    }
    svg {
      width: 100%;
      height: 100%;
      max-height: 380px;
      display: block;
    }
    .hint {
      font-size: 12px;
      color: #64748b;
      text-align: center;
      margin-top: 4px;
    }
  </style>
</head>
<body>

  <div class="header">
    <div class="ineq-badge">x − 2y > 4</div>
    <div id="statusBadge" class="status-badge status-false">(0, 0): 0 > 4 ✗</div>
  </div>

  <div class="svg-wrap" id="graphWrap">
    <svg id="gridSvg" viewBox="0 0 400 400" aria-label="Coordinate grid of linear inequality">
      <defs>
        
        <marker id="arr" viewBox="0 0 10 10" refX="5" 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>

      
      <polygon points="0,350 400,150 400,400 0,400" fill="#22c55e" fill-opacity="0.18" />

      
      <g stroke="#e2e8f0" stroke-width="1">
        
        <line x1="25" y1="0" x2="25" y2="400"/>
        <line x1="50" y1="0" x2="50" y2="400"/>
        <line x1="75" y1="0" x2="75" y2="400"/>
        <line x1="100" y1="0" x2="100" y2="400"/>
        <line x1="125" y1="0" x2="125" y2="400"/>
        <line x1="150" y1="0" x2="150" y2="400"/>
        <line x1="175" y1="0" x2="175" y2="400"/>
        <line x1="225" y1="0" x2="225" y2="400"/>
        <line x1="250" y1="0" x2="250" y2="400"/>
        <line x1="275" y1="0" x2="275" y2="400"/>
        <line x1="300" y1="0" x2="300" y2="400"/>
        <line x1="325" y1="0" x2="325" y2="400"/>
        <line x1="350" y1="0" x2="350" y2="400"/>
        <line x1="375" y1="0" x2="375" y2="400"/>
        
        <line x1="0" y1="25" x2="400" y2="25"/>
        <line x1="0" y1="50" x2="400" y2="50"/>
        <line x1="0" y1="75" x2="400" y2="75"/>
        <line x1="0" y1="100" x2="400" y2="100"/>
        <line x1="0" y1="125" x2="400" y2="125"/>
        <line x1="0" y1="150" x2="400" y2="150"/>
        <line x1="0" y1="175" x2="400" y2="175"/>
        <line x1="0" y1="225" x2="400" y2="225"/>
        <line x1="0" y1="250" x2="400" y2="250"/>
        <line x1="0" y1="275" x2="400" y2="275"/>
        <line x1="0" y1="300" x2="400" y2="300"/>
        <line x1="0" y1="325" x2="400" y2="325"/>
        <line x1="0" y1="350" x2="400" y2="350"/>
        <line x1="0" y1="375" x2="400" y2="375"/>
      </g>

      
      <line x1="10" y1="200" x2="390" y2="200" stroke="#64748b" stroke-width="1.75" marker-start="url(#arr)" marker-end="url(#arr)" />
      <line x1="200" y1="390" x2="200" y2="10" stroke="#64748b" stroke-width="1.75" marker-start="url(#arr)" marker-end="url(#arr)" />

      
      <text x="390" y="192" font-size="13" font-weight="700" fill="#64748b" text-anchor="end">x</text>
      <text x="208" y="18" font-size="13" font-weight="700" fill="#64748b">y</text>

      
      <text x="100" y="215" font-size="11" fill="#94a3b8" text-anchor="middle">-4</text>
      <text x="300" y="215" font-size="11" fill="#94a3b8" text-anchor="middle">4</text>
      <text x="188" y="104" font-size="11" fill="#94a3b8" text-anchor="end">4</text>
      <text x="188" y="304" font-size="11" fill="#94a3b8" text-anchor="end">-4</text>

      
      <line x1="0" y1="350" x2="400" y2="150" stroke="#2563eb" stroke-width="2.5" stroke-dasharray="7,6" />

      
      
      <circle cx="300" cy="200" r="4.5" fill="#2563eb" />
      <text x="300" y="188" font-size="11" font-weight="600" fill="#2563eb" text-anchor="middle">(4, 0)</text>

      
      <circle cx="200" cy="250" r="4.5" fill="#2563eb" />
      <text x="188" y="254" font-size="11" font-weight="600" fill="#2563eb" text-anchor="end">(0, -2)</text>

      
      <text x="45" y="320" font-size="11" font-weight="600" fill="#2563eb" transform="rotate(-26.5 45 320)">dashed: > (strict)</text>

      
      <g transform="translate(285, 315)">
        <rect x="-65" y="-14" width="130" height="26" rx="6" fill="#ffffff" fill-opacity="0.9" stroke="#86efac" stroke-width="1"/>
        <text x="0" y="4" font-size="12" font-weight="700" fill="#15803d" text-anchor="middle">Solution Region</text>
      </g>

      
      <g id="testPointGroup" transform="translate(200, 200)">
        
        <circle cx="0" cy="0" r="14" fill="#fee2e2" fill-opacity="0.7"/>
        <path id="markerIcon" d="M -5 -5 L 5 5 M 5 -5 L -5 5" stroke="#dc2626" stroke-width="2.5" stroke-linecap="round"/>
        <circle id="markerCenter" cx="0" cy="0" r="3.5" fill="#dc2626" />
      </g>
    </svg>
  </div>

  <div class="hint">Tap grid to test any point</div>

  <script>
    const svg = document.getElementById('gridSvg');
    const testPointGroup = document.getElementById('testPointGroup');
    const markerIcon = document.getElementById('markerIcon');
    const markerCenter = document.getElementById('markerCenter');
    const statusBadge = document.getElementById('statusBadge');

    function updatePoint(mathX, mathY) {
      // SVG origin is (200, 200), 1 unit = 25px
      const svgX = 200 + mathX * 25;
      const svgY = 200 - mathY * 25;

      testPointGroup.setAttribute('transform', `translate(${svgX}, ${svgY})`);

      // Evaluate x - 2y > 4
      const val = mathX - 2 * mathY;
      const isTrue = val > 4;

      if (isTrue) {
        // Green Checkmark
        markerIcon.setAttribute('d', 'M -5 0 L -1 4 L 6 -4');
        markerIcon.setAttribute('stroke', '#16a34a');
        markerCenter.setAttribute('fill', '#16a34a');
        testPointGroup.querySelector('circle').setAttribute('fill', '#dcfce7');

        statusBadge.className = 'status-badge status-true';
        statusBadge.textContent = `(${mathX}, ${mathY}): ${val} > 4 ✓`;
      } else {
        // Red Cross
        markerIcon.setAttribute('d', 'M -5 -5 L 5 5 M 5 -5 L -5 5');
        markerIcon.setAttribute('stroke', '#dc2626');
        markerCenter.setAttribute('fill', '#dc2626');
        testPointGroup.querySelector('circle').setAttribute('fill', '#fee2e2');

        statusBadge.className = 'status-badge status-false';
        statusBadge.textContent = `(${mathX}, ${mathY}): ${val} > 4 ✗`;
      }
    }

    function handleSvgClick(e) {
      const rect = svg.getBoundingClientRect();
      const clientX = e.clientX || (e.touches && e.touches[0].clientX);
      const clientY = e.clientY || (e.touches && e.touches[0].clientY);
      if (clientX === undefined || clientY === undefined) return;

      const clickX = ((clientX - rect.left) / rect.width) * 400;
      const clickY = ((clientY - rect.top) / rect.height) * 400;

      // Snap to nearest integer coordinate
      let mathX = Math.round((clickX - 200) / 25);
      let mathY = Math.round((200 - clickY) / 25);

      // Clamp within visible grid (-6 to 6)
      mathX = Math.max(-6, Math.min(6, mathX));
      mathY = Math.max(-6, Math.min(6, mathY));

      updatePoint(mathX, mathY);
    }

    svg.addEventListener('click', handleSvgClick);
    svg.addEventListener('touchstart', (e) => {
      e.preventDefault();
      handleSvgClick(e);
    }, { passive: false });
  </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;
      color: #1e2945;
      background: #ffffff;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }
    .header {
      font-size: 16px;
      font-weight: 700;
      text-align: center;
      margin-bottom: 12px;
      color: #0f172a;
    }
    .cards-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 560px;
    }
    .convention-card {
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: box-shadow 0.2s ease;
    }
    .card-title {
      font-size: 13px;
      font-weight: 700;
      color: #334155;
      text-align: center;
      margin-bottom: 6px;
      line-height: 1.2;
    }
    .card-subtitle {
      font-size: 11px;
      font-weight: 600;
      margin-bottom: 6px;
      padding: 2px 8px;
      border-radius: 10px;
    }
    .sub-us { background: #e0f2fe; color: #0369a1; }
    .sub-uk { background: #f1f5f9; color: #475569; }
    .graph-svg {
      width: 100%;
      max-width: 210px;
      height: auto;
      display: block;
    }
    .interactive-bar {
      margin-top: 10px;
      display: flex;
      gap: 8px;
      align-items: center;
    }
    .toggle-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 5px 12px;
      font-size: 12px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background 0.15s;
    }
    .toggle-btn:hover {
      background: #e2e8f0;
    }
    .toggle-btn.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #0284c7;
    }
    .point-marker {
      transition: opacity 0.25s ease;
      opacity: 0;
    }
    .point-marker.visible {
      opacity: 1;
    }
  </style>
</head>
<body>

  <div class="header">Global Shading Conventions</div>

  <div class="cards-grid">
    
    <div class="convention-card">
      <div class="card-title">US / Australian</div>
      <div class="card-subtitle sub-us">Shade Solutions</div>
      
      <svg class="graph-svg" viewBox="0 0 200 200">
        <defs>
          <marker id="arrow" viewBox="0 0 6 6" refX="5" refY="3" markerWidth="4" markerHeight="4" orient="auto-start-reverse">
            <path d="M 0 0 L 6 3 L 0 6 z" fill="#94a3b8"/>
          </marker>
        </defs>

        
        <g stroke="#f1f5f9" stroke-width="1">
          <line x1="20" y1="40" x2="180" y2="40"/>
          <line x1="20" y1="70" x2="180" y2="70"/>
          <line x1="20" y1="130" x2="180" y2="130"/>
          <line x1="20" y1="160" x2="180" y2="160"/>
          <line x1="40" y1="20" x2="40" y2="180"/>
          <line x1="70" y1="20" x2="70" y2="180"/>
          <line x1="130" y1="20" x2="130" y2="180"/>
          <line x1="160" y1="20" x2="160" y2="180"/>
        </g>

        
        <polygon points="20,40 180,140 180,180 20,180" fill="rgba(34, 183, 255, 0.3)" />

        
        <line x1="15" y1="100" x2="185" y2="100" stroke="#94a3b8" stroke-width="1.5" marker-end="url(#arrow)"/>
        <line x1="100" y1="185" x2="100" y2="15" stroke="#94a3b8" stroke-width="1.5" marker-end="url(#arrow)"/>

        
        <line x1="20" y1="40" x2="180" y2="140" stroke="#0284c7" stroke-width="2.5"/>

        
        <text x="188" y="104" font-size="11" fill="#64748b" font-weight="600">x</text>
        <text x="96" y="12" font-size="11" fill="#64748b" font-weight="600">y</text>

        
        <g class="point-marker">
          <circle cx="100" cy="100" r="4.5" fill="#16a34a"/>
          <text x="108" y="103" font-size="10" font-weight="700" fill="#16a34a">(0,0) ✓</text>
        </g>
      </svg>
    </div>

    
    <div class="convention-card">
      <div class="card-title">UK / Cambridge</div>
      <div class="card-subtitle sub-uk">Shade Out Non-Solutions</div>

      <svg class="graph-svg" viewBox="0 0 200 200">
        <defs>
          <pattern id="hatch" width="10" height="10" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
            <line x1="0" y1="0" x2="0" y2="10" stroke="#94a3b8" stroke-width="2" />
          </pattern>
        </defs>

        
        <g stroke="#f1f5f9" stroke-width="1">
          <line x1="20" y1="40" x2="180" y2="40"/>
          <line x1="20" y1="70" x2="180" y2="70"/>
          <line x1="20" y1="130" x2="180" y2="130"/>
          <line x1="20" y1="160" x2="180" y2="160"/>
          <line x1="40" y1="20" x2="40" y2="180"/>
          <line x1="70" y1="20" x2="70" y2="180"/>
          <line x1="130" y1="20" x2="130" y2="180"/>
          <line x1="160" y1="20" x2="160" y2="180"/>
        </g>

        
        <polygon points="20,40 180,140 180,20 20,20" fill="url(#hatch)" />

        
        <line x1="15" y1="100" x2="185" y2="100" stroke="#94a3b8" stroke-width="1.5" marker-end="url(#arrow)"/>
        <line x1="100" y1="185" x2="100" y2="15" stroke="#94a3b8" stroke-width="1.5" marker-end="url(#arrow)"/>

        
        <line x1="20" y1="40" x2="180" y2="140" stroke="#475569" stroke-width="2.5"/>

        
        <text x="65" y="150" font-size="28" font-weight="900" fill="#0f172a" text-anchor="middle">R</text>

        
        <text x="188" y="104" font-size="11" fill="#64748b" font-weight="600">x</text>
        <text x="96" y="12" font-size="11" fill="#64748b" font-weight="600">y</text>

        
        <g class="point-marker">
          <circle cx="100" cy="100" r="4.5" fill="#16a34a"/>
          <text x="108" y="103" font-size="10" font-weight="700" fill="#16a34a">(0,0) ✓</text>
        </g>
      </svg>
    </div>
  </div>

  <div class="interactive-bar">
    <button class="toggle-btn" id="testBtn">
      <span>✦</span> Test Point (0, 0)
    </button>
  </div>

  <script>
    const btn = document.getElementById('testBtn');
    const markers = document.querySelectorAll('.point-marker');
    let show = false;

    btn.addEventListener('click', () => {
      show = !show;
      btn.classList.toggle('active', show);
      markers.forEach(m => m.classList.toggle('visible', show));
    });
  </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; user-select: none; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      padding: 10px;
    }
    .graph-container {
      position: relative;
      width: 100%;
      max-width: 420px;
      aspect-ratio: 1 / 1;
    }
    svg {
      width: 100%;
      height: 100%;
      display: block;
      cursor: crosshair;
      touch-action: none;
    }
    .status-bar {
      margin-top: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      font-size: 14px;
      font-weight: 600;
      min-height: 28px;
    }
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 700;
      transition: all 0.2s ease;
    }
    .badge-true { background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }
    .badge-false { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }
    .badge-boundary { background: #ede9fe; color: #6d28d9; border: 1px solid #ddd6fe; }
  </style>
</head>
<body>
  <div class="graph-container">
    <svg id="svgGraph" viewBox="0 0 400 400">
      <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>
        <marker id="lineArrow" 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="#0284c7" />
        </marker>
      </defs>

      
      
      <polygon points="0,0 400,0 400,400 310,400 0,90" fill="#fee2e2" fill-opacity="0.45" />
      
      <polygon points="0,90 310,400 0,400" fill="#e0f2fe" fill-opacity="0.65" />

      
      <g stroke="#e2e8f0" stroke-width="1">
        
        <line x1="20" y1="0" x2="20" y2="400" />
        <line x1="65" y1="0" x2="65" y2="400" stroke="#cbd5e1" /> 
        <line x1="110" y1="0" x2="110" y2="400" />
        <line x1="155" y1="0" x2="155" y2="400" />
        <line x1="200" y1="0" x2="200" y2="400" />
        <line x1="245" y1="0" x2="245" y2="400" />
        <line x1="290" y1="0" x2="290" y2="400" />
        <line x1="335" y1="0" x2="335" y2="400" />
        <line x1="380" y1="0" x2="380" y2="400" />

        
        <line x1="0" y1="380" x2="400" y2="380" />
        <line x1="0" y1="335" x2="400" y2="335" stroke="#cbd5e1" /> 
        <line x1="0" y1="290" x2="400" y2="290" />
        <line x1="0" y1="245" x2="400" y2="245" />
        <line x1="0" y1="200" x2="400" y2="200" />
        <line x1="0" y1="155" x2="400" y2="155" />
        <line x1="0" y1="110" x2="400" y2="110" />
        <line x1="0" y1="65" x2="400" y2="65" />
        <line x1="0" y1="20" x2="400" y2="20" />
      </g>

      
      <line x1="10" y1="335" x2="390" y2="335" stroke="#64748b" stroke-width="1.75" marker-end="url(#arrow)" />
      <line x1="65" y1="390" x2="65" y2="10" stroke="#64748b" stroke-width="1.75" marker-end="url(#arrow)" />

      
      <g font-size="11" fill="#64748b" text-anchor="middle" font-weight="600">
        <text x="110" y="352">1</text>
        <text x="155" y="352">2</text>
        <text x="200" y="352">3</text>
        <text x="245" y="352">4</text>
        <text x="290" y="352">5</text>
        <text x="335" y="352">6</text>
        <text x="385" y="352">x</text>

        <text x="50" y="294">1</text>
        <text x="50" y="249">2</text>
        <text x="50" y="204">3</text>
        <text x="50" y="159">4</text>
        <text x="50" y="114">5</text>
        <text x="50" y="69">6</text>
        <text x="50" y="18">y</text>
        <text x="52" y="352">0</text>
      </g>

      
      <line x1="0" y1="90" x2="310" y2="400" stroke="#0284c7" stroke-width="3" />

      
      <g font-size="14" font-weight="700">
        <text x="95" y="265" fill="#0369a1" text-anchor="middle">True Half-Plane</text>
        <text x="95" y="283" fill="#0284c7" font-size="12" font-weight="600" text-anchor="middle">(Solutions)</text>

        <text x="275" y="125" fill="#b91c1c" text-anchor="middle">False Half-Plane</text>
      </g>

      
      <rect x="150" y="222" width="112" height="24" rx="6" fill="#ffffff" stroke="#0284c7" stroke-width="1.5" />
      <text x="206" y="238" fill="#0284c7" font-size="12" font-weight="700" text-anchor="middle">x + y = 4</text>

      
      <circle cx="65" cy="155" r="4.5" fill="#0284c7" />
      <circle cx="245" cy="335" r="4.5" fill="#0284c7" />

      
      <g id="probeGroup">
        <circle id="probeRing" cx="65" cy="335" r="12" fill="none" stroke="#0284c7" stroke-width="2" opacity="0.4" />
        <circle id="probeDot" cx="65" cy="335" r="6" fill="#0284c7" />
        <text id="probeLabel" x="78" y="330" font-size="12" font-weight="700" fill="#1e2945">(0, 0)</text>
      </g>
    </svg>
  </div>

  <div class="status-bar">
    <span id="mathExpr">0 + 0 ≤ 4</span>
    <span id="statusBadge" class="badge badge-true">✓ True (Solution)</span>
  </div>

  <script>
    const svg = document.getElementById('svgGraph');
    const probeDot = document.getElementById('probeDot');
    const probeRing = document.getElementById('probeRing');
    const probeLabel = document.getElementById('probeLabel');
    const mathExpr = document.getElementById('mathExpr');
    const statusBadge = document.getElementById('statusBadge');

    // Origin: (65, 335), scale: 45 px per unit
    const ox = 65, oy = 335, scale = 45;

    function updateProbe(svgX, svgY) {
      // Clamp to SVG grid bounds
      svgX = Math.max(20, Math.min(380, svgX));
      svgY = Math.max(20, Math.min(380, svgY));

      // Calculate nearest round mathematical point
      let x = Math.round((svgX - ox) / scale);
      let y = Math.round((oy - svgY) / scale);

      x = Math.max(-1, Math.min(6, x));
      y = Math.max(-1, Math.min(6, y));

      const px = ox + x * scale;
      const py = oy - y * scale;

      probeDot.setAttribute('cx', px);
      probeDot.setAttribute('cy', py);
      probeRing.setAttribute('cx', px);
      probeRing.setAttribute('cy', py);

      // Position label dynamically so it doesn't overflow edge
      const labelX = px > 310 ? px - 45 : px + 12;
      const labelY = py < 40 ? py + 16 : py - 10;
      probeLabel.setAttribute('x', labelX);
      probeLabel.setAttribute('y', labelY);
      probeLabel.textContent = `(${x}, ${y})`;

      const sum = x + y;
      mathExpr.textContent = `${x} + ${y} = ${sum}`;

      if (sum < 4) {
        statusBadge.className = 'badge badge-true';
        statusBadge.textContent = '✓ True (Solution)';
        probeDot.setAttribute('fill', '#0284c7');
        probeRing.setAttribute('stroke', '#0284c7');
      } else if (sum === 4) {
        statusBadge.className = 'badge badge-boundary';
        statusBadge.textContent = '= On Boundary Line';
        probeDot.setAttribute('fill', '#6d28d9');
        probeRing.setAttribute('stroke', '#6d28d9');
      } else {
        statusBadge.className = 'badge badge-false';
        statusBadge.textContent = '✗ False';
        probeDot.setAttribute('fill', '#dc2626');
        probeRing.setAttribute('stroke', '#dc2626');
      }
    }

    function handleEvent(e) {
      const rect = svg.getBoundingClientRect();
      const clientX = e.touches ? e.touches[0].clientX : e.clientX;
      const clientY = e.touches ? e.touches[0].clientY : e.clientY;
      const svgX = (clientX - rect.left) * (400 / rect.width);
      const svgY = (clientY - rect.top) * (400 / rect.height);
      updateProbe(svgX, svgY);
    }

    svg.addEventListener('pointerdown', (e) => {
      handleEvent(e);
      const moveHandler = (ev) => handleEvent(ev);
      const upHandler = () => {
        window.removeEventListener('pointermove', moveHandler);
        window.removeEventListener('pointerup', upHandler);
      };
      window.addEventListener('pointermove', moveHandler);
      window.addEventListener('pointerup', upHandler);
    });

    // Initial state at (0, 0)
    updateProbe(65, 335);
  </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;
      background: #f8fafc;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 12px;
      gap: 12px;
    }

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

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

    .boundary-card {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
      cursor: pointer;
      user-select: none;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .boundary-card.active {
      border-color: #2563eb;
      box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
    }

    .symbols {
      font-size: 22px;
      font-weight: 800;
      letter-spacing: 4px;
      padding: 4px 14px;
      border-radius: 20px;
      margin-bottom: 8px;
    }

    .solid-card .symbols {
      color: #16a34a;
      background: #f0fdf4;
    }

    .dashed-card .symbols {
      color: #ea580c;
      background: #fff7ed;
    }

    .card-title {
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
      margin-bottom: 2px;
    }

    .card-subtitle {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      margin-bottom: 10px;
    }

    .graph-wrap {
      width: 100%;
      max-width: 220px;
      aspect-ratio: 1.25 / 1;
    }

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

    .status-badge {
      margin-top: 10px;
      font-size: 12px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .solid-card .status-badge {
      background: #dcfce7;
      color: #15803d;
    }

    .dashed-card .status-badge {
      background: #ffedd5;
      color: #c2410c;
    }
  </style>
</head>
<body>

  <div class="comparison-grid">
    
    <div class="boundary-card solid-card active" id="cardSolid" onclick="setActive('solid')">
      <div class="symbols">≤ &nbsp; ≥</div>
      <div class="card-title">Solid Boundary</div>
      <div class="card-subtitle">Includes Line Points</div>

      <div class="graph-wrap">
        <svg viewBox="0 0 200 160">
          <defs>
            
            <linearGradient id="shadeSolid" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stop-color="#22c55e" stop-opacity="0.28" />
              <stop offset="100%" stop-color="#22c55e" stop-opacity="0.08" />
            </linearGradient>
          </defs>

          
          <line x1="20" y1="135" x2="180" y2="135" stroke="#cbd5e1" stroke-width="1.5" />
          <line x1="40" y1="145" x2="40" y2="15" stroke="#cbd5e1" stroke-width="1.5" />

          
          <polygon points="40,115 170,35 170,135 40,135" fill="url(#shadeSolid)" />

          
          <line x1="20" y1="127.3" x2="180" y2="28.8" stroke="#16a34a" stroke-width="3.5" stroke-linecap="round" />

          
          <circle cx="95" cy="81.2" r="5.5" fill="#16a34a" stroke="#ffffff" stroke-width="2" />
          <circle cx="145" cy="50.4" r="5.5" fill="#16a34a" stroke="#ffffff" stroke-width="2" />
        </svg>
      </div>

      <div class="status-badge">
        <span>✓</span> Points on line are solutions
      </div>
    </div>

    
    <div class="boundary-card dashed-card" id="cardDashed" onclick="setActive('dashed')">
      <div class="symbols">&lt; &nbsp; &gt;</div>
      <div class="card-title">Dashed Boundary</div>
      <div class="card-subtitle">Excludes Line Points</div>

      <div class="graph-wrap">
        <svg viewBox="0 0 200 160">
          <defs>
            
            <linearGradient id="shadeDashed" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stop-color="#f97316" stop-opacity="0.28" />
              <stop offset="100%" stop-color="#f97316" stop-opacity="0.08" />
            </linearGradient>
          </defs>

          
          <line x1="20" y1="135" x2="180" y2="135" stroke="#cbd5e1" stroke-width="1.5" />
          <line x1="40" y1="145" x2="40" y2="15" stroke="#cbd5e1" stroke-width="1.5" />

          
          <polygon points="40,115 170,35 170,135 40,135" fill="url(#shadeDashed)" />

          
          <line x1="20" y1="127.3" x2="180" y2="28.8" stroke="#ea580c" stroke-width="3" stroke-linecap="round" stroke-dasharray="6,6" />

          
          <circle cx="95" cy="81.2" r="5" fill="#ffffff" stroke="#ea580c" stroke-width="2.5" />
          <circle cx="145" cy="50.4" r="5" fill="#ffffff" stroke="#ea580c" stroke-width="2.5" />
        </svg>
      </div>

      <div class="status-badge">
        <span>✕</span> Points on line not solutions
      </div>
    </div>
  </div>

  <script>
    function setActive(type) {
      document.getElementById('cardSolid').classList.toggle('active', type === 'solid');
      document.getElementById('cardDashed').classList.toggle('active', type === 'dashed');
    }
  </script>
</body>
</html>

OGM.10.REI.6

Aligned learning resources

Related diagrams