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

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      font-weight: 700;
      color: #1e2945;
    }

    .badge-speed {
      background: #eef2f6;
      padding: 3px 8px;
      border-radius: 12px;
      font-size: 12px;
    }

    .chart {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .row-item {
      display: grid;
      grid-template-columns: 80px 1fr;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      padding: 4px;
      border-radius: 8px;
      transition: background 0.2s ease;
    }

    .row-item:hover, .row-item.active {
      background: #f8fafc;
    }

    .label-col {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .surface-name {
      font-size: 13px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .multiplier {
      font-size: 11px;
      color: #64748b;
      font-weight: 600;
    }

    .track-container {
      position: relative;
      background: #f1f5f9;
      height: 28px;
      border-radius: 6px;
      overflow: hidden;
      display: flex;
      align-items: center;
    }

    .bar {
      height: 100%;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 8px;
      color: #ffffff;
      font-size: 12px;
      font-weight: 700;
      transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
      white-space: nowrap;
      min-width: 44px;
    }

    .bar-dry    { background: #16a34a; width: 10%; }
    .bar-wet    { background: #eab308; width: 20%; color: #1e2945; }
    .bar-gravel { background: #f97316; width: 30%; }
    .bar-ice    { background: #ef4444; width: 100%; }

    /* Microscopic Inset View */
    .inset-panel {
      display: grid;
      grid-template-columns: 90px 1fr;
      align-items: center;
      gap: 12px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 12px;
      min-height: 78px;
    }

    .micro-canvas-wrap {
      width: 80px;
      height: 60px;
      border-radius: 6px;
      overflow: hidden;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .micro-desc {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

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

    .micro-sub {
      font-size: 12px;
      color: #64748b;
    }

    .axis {
      display: flex;
      justify-content: space-between;
      padding: 0 4px 0 88px;
      font-size: 10px;
      color: #94a3b8;
      font-weight: 600;
    }
  </style>
</head>
<body>

  <div class="header">
    <span>Braking Distance</span>
    <span class="badge-speed">50 mph (80 km/h)</span>
  </div>

  <div class="chart" id="chart">
    <div class="row-item active" data-idx="0">
      <div class="label-col">
        <span class="surface-name">☀️ Dry</span>
        <span class="multiplier">1× baseline</span>
      </div>
      <div class="track-container">
        <div class="bar bar-dry">38 m</div>
      </div>
    </div>

    <div class="row-item" data-idx="1">
      <div class="label-col">
        <span class="surface-name">🌧️ Wet</span>
        <span class="multiplier">2× baseline</span>
      </div>
      <div class="track-container">
        <div class="bar bar-wet">76 m</div>
      </div>
    </div>

    <div class="row-item" data-idx="2">
      <div class="label-col">
        <span class="surface-name">🪨 Gravel</span>
        <span class="multiplier">3× baseline</span>
      </div>
      <div class="track-container">
        <div class="bar bar-gravel">114 m</div>
      </div>
    </div>

    <div class="row-item" data-idx="3">
      <div class="label-col">
        <span class="surface-name">❄️ Ice</span>
        <span class="multiplier">10× baseline</span>
      </div>
      <div class="track-container">
        <div class="bar bar-ice">380 m</div>
      </div>
    </div>
  </div>

  <div class="axis">
    <span>0 m</span>
    <span>100 m</span>
    <span>200 m</span>
    <span>300 m</span>
    <span>380 m</span>
  </div>

  
  <div class="inset-panel" id="insetPanel">
    <div class="micro-canvas-wrap">
      <svg id="microSvg" width="80" height="60" viewBox="0 0 80 60"></svg>
    </div>
    <div class="micro-desc">
      <div class="micro-title" id="microTitle">☀️ Dry Asphalt</div>
      <div class="micro-sub" id="microSub">Rubber interlocks with rough texture (high grip).</div>
    </div>
  </div>

  <script>
    const data = [
      {
        title: "☀️ Dry Asphalt",
        desc: "Rubber interlocks directly with rough texture (high grip).",
        draw: (svg) => `
          
          <path d="M0,0 L80,0 L80,24 L68,24 L65,30 L55,30 L52,24 L38,24 L35,30 L25,30 L22,24 L0,24 Z" fill="#334155" />
          
          <path d="M0,28 Q10,24 20,30 T40,26 T60,32 T80,27 L80,60 L0,60 Z" fill="#64748b" />
          <line x1="0" y1="28" x2="80" y2="28" stroke="#16a34a" stroke-width="2" stroke-dasharray="2,2"/>
        `
      },
      {
        title: "🌧️ Wet Road",
        desc: "Water film prevents direct tyre-surface contact.",
        draw: (svg) => `
          
          <path d="M0,0 L80,0 L80,20 L68,20 L65,25 L55,25 L52,20 L38,20 L35,25 L25,25 L22,20 L0,20 Z" fill="#334155" />
          
          <rect x="0" y="22" width="80" height="8" fill="#38bdf8" opacity="0.8" />
          
          <path d="M0,32 Q10,30 20,34 T40,31 T60,35 T80,32 L80,60 L0,60 Z" fill="#64748b" />
        `
      },
      {
        title: "🪨 Loose Gravel",
        desc: "Pebbles roll beneath tyre, acting as ball bearings.",
        draw: (svg) => `
          
          <rect x="0" y="0" width="80" height="20" fill="#334155" />
          
          <circle cx="12" cy="27" r="5" fill="#d97706" />
          <circle cx="26" cy="28" r="6" fill="#b45309" />
          <circle cx="42" cy="26" r="5.5" fill="#d97706" />
          <circle cx="58" cy="28" r="5" fill="#b45309" />
          <circle cx="72" cy="27" r="4.5" fill="#d97706" />
          
          <rect x="0" y="35" width="80" height="25" fill="#78716c" />
        `
      },
      {
        title: "❄️ Icy Road",
        desc: "Near-frictionless ice glaze layer prevents any grip.",
        draw: (svg) => `
          
          <rect x="0" y="0" width="80" height="22" fill="#334155" />
          
          <rect x="0" y="23" width="80" height="12" fill="#bae6fd" opacity="0.9" />
          <line x1="10" y1="29" x2="25" y2="29" stroke="#ffffff" stroke-width="1.5" />
          <line x1="40" y1="27" x2="60" y2="27" stroke="#ffffff" stroke-width="1.5" />
          
          <rect x="0" y="36" width="80" height="24" fill="#64748b" />
        `
      }
    ];

    const rows = document.querySelectorAll('.row-item');
    const microSvg = document.getElementById('microSvg');
    const microTitle = document.getElementById('microTitle');
    const microSub = document.getElementById('microSub');

    function selectCondition(idx) {
      rows.forEach((r, i) => {
        r.classList.toggle('active', i === idx);
      });
      const item = data[idx];
      microTitle.textContent = item.title;
      microSub.textContent = item.desc;
      microSvg.innerHTML = item.draw(microSvg);
    }

    rows.forEach((row, i) => {
      row.addEventListener('click', () => selectCondition(i));
    });

    selectCondition(0);
  </script>
</body>
</html>

Factors Affecting Braking Distance: Road and Weather Conditions

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Work-Energy Braking Distance</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 10px 12px;
      gap: 12px;
      width: 100%;
      min-height: 100%;
      user-select: none;
    }

    /* Interactive mode switcher */
    .controls {
      display: flex;
      gap: 10px;
      width: 100%;
      max-width: 560px;
    }
    .toggle-btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 10px 14px;
      border: 2px solid #e2e8f0;
      border-radius: 10px;
      background: #ffffff;
      color: #475569;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s, color 0.2s;
    }
    .toggle-btn.active {
      border-color: #22b7ff;
      background: #f0f9ff;
      color: #0284c7;
    }
    .toggle-btn:hover:not(.active) {
      background: #f8fafc;
      border-color: #cbd5e1;
    }

    /* Physics & Equation Section (No card borders) */
    .math-section {
      width: 100%;
      max-width: 560px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      text-align: center;
      padding: 4px 6px;
      gap: 8px;
    }
    .eq-step {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
    }
    .eq-title {
      font-size: 12px;
      font-weight: 700;
      color: #64748b;
      letter-spacing: 0.4px;
      text-transform: uppercase;
    }
    .formula {
      font-size: 16px;
      font-weight: 700;
      color: #1e2945;
      line-height: 1.25;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .fraction {
      display: inline-flex;
      flex-direction: column;
      vertical-align: middle;
      text-align: center;
      font-size: 15px;
      line-height: 1.1;
      padding: 0 2px;
    }
    .fraction .num {
      border-bottom: 2px solid #94a3b8;
      padding-bottom: 1px;
    }
    .fraction .den {
      padding-top: 1px;
    }
    .var-f { color: #e11d48; font-weight: 800; }
    .var-d { color: #16a34a; font-weight: 800; }
    .var-v { color: #0284c7; font-weight: 800; }
    .eq-arrow {
      font-size: 20px;
      font-weight: 700;
      color: #94a3b8;
    }

    /* Simulation Canvas Wrapper (No redundant borders/shadows) */
    .sim-wrap {
      width: 100%;
      max-width: 560px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }

    /* Action Trigger */
    .btn-play {
      background: #22b7ff;
      color: #ffffff;
      border: none;
      border-radius: 8px;
      padding: 8px 20px;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 6px;
      transition: background 0.2s ease, opacity 0.2s ease;
    }
    .btn-play:hover {
      background: #0284c7;
    }
    .btn-play:active {
      opacity: 0.9;
    }

    @media (max-width: 440px) {
      .toggle-btn {
        font-size: 12px;
        padding: 8px 10px;
      }
      .formula {
        font-size: 14px;
      }
      .fraction {
        font-size: 13px;
      }
      .eq-title {
        font-size: 11px;
      }
      .eq-arrow {
        font-size: 16px;
      }
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="toggle-btn active" id="dryBtn" onclick="setCondition('dry')">
      ☀️ Dry Road <span style="font-weight:500;">(Large F)</span>
    </button>
    <button class="toggle-btn" id="iceBtn" onclick="setCondition('ice')">
      ❄️ Slick Ice <span style="font-weight:500;">(Small F)</span>
    </button>
  </div>

  
  <div class="math-section">
    <div class="eq-step">
      <span class="eq-title">Work Done = &Delta;KE</span>
      <div class="formula">
        <span class="var-f">F</span> &sdot; <span class="var-d">d</span> = &frac12;<span class="var-v">m v&sup2;</span>
      </div>
    </div>
    <span class="eq-arrow">&rarr;</span>
    <div class="eq-step">
      <span class="eq-title">Stopping Distance</span>
      <div class="formula">
        <span class="var-d">d</span> = 
        <span class="fraction">
          <span class="num"><span class="var-v">m v&sup2;</span></span>
          <span class="den">2<span class="var-f">F</span></span>
        </span>
      </div>
    </div>
  </div>

  
  <div class="sim-wrap">
    <svg viewBox="0 0 560 215" id="simSvg">
      <defs>
        
        <marker id="arrowRed" viewBox="0 0 10 10" refX="2" refY="5" markerWidth="6" markerHeight="6" orient="auto">
          <path d="M 10 1 L 1 5 L 10 9 z" fill="#e11d48"/>
        </marker>
        
        <marker id="arrowBlue" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto">
          <path d="M 0 1 L 9 5 L 0 9 z" fill="#0284c7"/>
        </marker>
        
        <marker id="arrowDistL-green" viewBox="0 0 10 10" refX="2" refY="5" markerWidth="6" markerHeight="6" orient="auto">
          <path d="M 10 1 L 1 5 L 10 9 z" fill="#16a34a"/>
        </marker>
        <marker id="arrowDistR-green" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto">
          <path d="M 0 1 L 9 5 L 0 9 z" fill="#16a34a"/>
        </marker>
        
        <marker id="arrowDistL-red" viewBox="0 0 10 10" refX="2" refY="5" markerWidth="6" markerHeight="6" orient="auto">
          <path d="M 10 1 L 1 5 L 10 9 z" fill="#e11d48"/>
        </marker>
        <marker id="arrowDistR-red" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto">
          <path d="M 0 1 L 9 5 L 0 9 z" fill="#e11d48"/>
        </marker>
      </defs>

      
      <rect id="roadSurface" x="15" y="115" width="530" height="30" rx="6" fill="#334155"/>
      <line x1="15" y1="130" x2="545" y2="130" stroke="#ffffff" stroke-width="2.5" stroke-dasharray="20 14" opacity="0.75"/>

      
      <line x1="135" y1="50" x2="135" y2="152" stroke="#64748b" stroke-width="2.5" stroke-dasharray="5 4"/>
      <text x="135" y="42" text-anchor="middle" font-size="13" font-weight="800" fill="#475569">Brakes Applied</text>

      
      <g id="distGroup">
        <line id="stopLine" x1="280" y1="50" x2="280" y2="185" stroke="#16a34a" stroke-width="2" stroke-dasharray="4 3"/>
        <line id="distLine" x1="135" y1="172" x2="280" y2="172" stroke="#16a34a" stroke-width="2.5" marker-start="url(#arrowDistL-green)" marker-end="url(#arrowDistR-green)"/>
        <rect id="distPill" x="145" y="185" width="125" height="24" rx="12" fill="#dcfce7"/>
        <text id="distLabel" x="207" y="201" text-anchor="middle" font-size="13" font-weight="800" fill="#16a34a">Short d (Dry)</text>
      </g>

      
      <g id="carGroup" transform="translate(60, 68)">
        
        
        <g id="velVector">
          <line x1="72" y1="24" x2="125" y2="24" stroke="#0284c7" stroke-width="3.5" marker-end="url(#arrowBlue)"/>
          <text x="132" y="28" font-size="15" font-weight="900" fill="#0284c7">v</text>
        </g>

        
        <g id="fricVector">
          
          <line id="fricLineRear" x1="18" y1="47" x2="-45" y2="47" stroke="#e11d48" stroke-width="3.5" marker-end="url(#arrowRed)"/>
          
          <line id="fricLineFront" x1="57" y1="47" x2="-6" y2="47" stroke="#e11d48" stroke-width="3.5" marker-end="url(#arrowRed)"/>
          <text id="fricLabel" x="-52" y="42" text-anchor="end" font-size="13" font-weight="800" fill="#e11d48">Large F_friction</text>
        </g>

        
        
        <path d="M 14 20 Q 26 5, 42 5 Q 58 5, 62 20 Z" fill="#0284c7"/>
        
        <path d="M 24 18 Q 32 8, 44 8 Q 52 8, 55 18 Z" fill="#e0f2fe" opacity="0.9"/>
        
        <rect x="0" y="20" width="75" height="20" rx="6" fill="#22b7ff"/>
        
        <text x="36" y="34" text-anchor="middle" font-size="12" font-weight="800" fill="#ffffff">m</text>
        
        <rect x="70" y="24" width="5" height="7" rx="2" fill="#fef08a"/>
        
        <rect x="0" y="24" width="4" height="6" rx="1.5" fill="#f43f5e"/>

        
        <g transform="translate(18, 44)">
          <circle cx="0" cy="0" r="8" fill="#1e2945"/>
          <circle cx="0" cy="0" r="3.5" fill="#94a3b8"/>
        </g>
        <g transform="translate(57, 44)">
          <circle cx="0" cy="0" r="8" fill="#1e2945"/>
          <circle cx="0" cy="0" r="3.5" fill="#94a3b8"/>
        </g>
      </g>
    </svg>
    
    <button class="btn-play" onclick="animateBraking()">▶ Replay Braking</button>
  </div>

  <script>
    let mode = 'dry';
    let animId = null;

    const config = {
      dry: {
        fricRearX2: -45,
        fricFrontX2: -6,
        fricLabelX: -52,
        fricText: "Large F_friction",
        stopX: 280,
        distText: "Short d (Dry)",
        roadColor: "#334155",
        distColor: "#16a34a",
        distBg: "#dcfce7",
        markerPrefix: "green"
      },
      ice: {
        fricRearX2: -10,
        fricFrontX2: 29,
        fricLabelX: -17,
        fricText: "Small F_friction",
        stopX: 500,
        distText: "Long d (Slick)",
        roadColor: "#64748b",
        distColor: "#e11d48",
        distBg: "#ffe4e6",
        markerPrefix: "red"
      }
    };

    function setCondition(newMode) {
      mode = newMode;
      document.getElementById('dryBtn').classList.toggle('active', mode === 'dry');
      document.getElementById('iceBtn').classList.toggle('active', mode === 'ice');
      
      const dVar = document.querySelector('.formula span.var-d');
      if (dVar) dVar.style.color = config[mode].distColor;

      updateVisuals();
      animateBraking();
    }

    function updateVisuals() {
      const cfg = config[mode];
      
      // Update road & vectors
      document.getElementById('roadSurface').setAttribute('fill', cfg.roadColor);
      
      document.getElementById('fricLineRear').setAttribute('x2', cfg.fricRearX2);
      document.getElementById('fricLineFront').setAttribute('x2', cfg.fricFrontX2);
      
      const fLabel = document.getElementById('fricLabel');
      fLabel.setAttribute('x', cfg.fricLabelX);
      fLabel.textContent = cfg.fricText;

      // Update distance visualizer
      const startX = 135;
      const dLine = document.getElementById('distLine');
      dLine.setAttribute('x2', cfg.stopX);
      dLine.setAttribute('stroke', cfg.distColor);
      dLine.setAttribute('marker-start', `url(#arrowDistL-${cfg.markerPrefix})`);
      dLine.setAttribute('marker-end', `url(#arrowDistR-${cfg.markerPrefix})`);

      const sLine = document.getElementById('stopLine');
      sLine.setAttribute('x1', cfg.stopX);
      sLine.setAttribute('x2', cfg.stopX);
      sLine.setAttribute('stroke', cfg.distColor);

      const dMid = startX + (cfg.stopX - startX) / 2;
      const dPill = document.getElementById('distPill');
      const pillWidth = mode === 'dry' ? 125 : 130;
      dPill.setAttribute('x', dMid - pillWidth / 2);
      dPill.setAttribute('width', pillWidth);
      dPill.setAttribute('fill', cfg.distBg);

      const dLabel = document.getElementById('distLabel');
      dLabel.setAttribute('x', dMid);
      dLabel.setAttribute('fill', cfg.distColor);
      dLabel.textContent = cfg.distText;
    }

    function animateBraking() {
      if (animId) cancelAnimationFrame(animId);
      
      const startX = 55;
      const brakeX = 135;
      const carLength = 75;
      const targetStopX = config[mode].stopX - carLength; 
      const duration = mode === 'dry' ? 1500 : 2500;
      
      const carGroup = document.getElementById('carGroup');
      const velVector = document.getElementById('velVector');
      const fricVector = document.getElementById('fricVector');
      
      const startTime = performance.now();

      function step(now) {
        const elapsed = now - startTime;
        const p = Math.min(elapsed / duration, 1);
        
        let currentX;
        // Phase 1: Approaching brake line (0 to 0.22)
        // Phase 2: Decelerating under friction (0.22 to 1.0)
        if (p < 0.22) {
          const pSub = p / 0.22;
          currentX = startX + (brakeX - carLength - startX) * pSub;
          fricVector.style.opacity = '0.3';
          velVector.style.opacity = '1';
        } else {
          const pBrake = (p - 0.22) / 0.78;
          // Quadratic ease-out for constant deceleration
          const easeOut = 1 - (1 - pBrake) * (1 - pBrake);
          currentX = (brakeX - carLength) + (targetStopX - (brakeX - carLength)) * easeOut;
          
          fricVector.style.opacity = pBrake < 1 ? '1' : '0.8';
          velVector.style.opacity = (1 - easeOut * 0.85).toString();
        }

        carGroup.setAttribute('transform', `translate(${currentX}, 68)`);

        if (p < 1) {
          animId = requestAnimationFrame(step);
        } else {
          velVector.style.opacity = '1';
          fricVector.style.opacity = '1';
        }
      }

      animId = requestAnimationFrame(step);
    }

    // Initialize
    updateVisuals();
    setTimeout(animateBraking, 200);
  </script>
</body>
</html>

<!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;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      background: #ffffff;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      margin: 0;
    }

    .container {
      width: 100%;
      max-width: 580px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* Speed Switcher */
    .controls-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }

    .controls-label {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

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

    .btn-speed {
      background: #f1f5f9;
      border: 2px solid #cbd5e1;
      color: #475569;
      padding: 6px 18px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }

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

    .btn-speed.active {
      background: #eff6ff;
      border-color: #2563eb;
      color: #1d4ed8;
      box-shadow: 0 2px 5px rgba(37, 99, 235, 0.2);
    }

    /* Road Section */
    .road-scene {
      position: relative;
      width: 100%;
      height: 58px;
      background: #334155;
      border-radius: 8px;
      overflow: hidden;
      display: flex;
      align-items: center;
    }

    .road-markings {
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      height: 2px;
      transform: translateY(-50%);
      background: repeating-linear-gradient(90deg, #ffffff 0, #ffffff 16px, transparent 16px, transparent 32px);
      opacity: 0.6;
    }

    .hazard {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 24px;
      z-index: 2;
      line-height: 1;
    }

    .car {
      position: absolute;
      left: 4px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 26px;
      z-index: 3;
      transition: left 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
      line-height: 1;
    }

    /* Visualization Tracks */
    .diagram-area {
      display: flex;
      flex-direction: column;
      gap: 6px;
      width: 100%;
    }

    .track-outer {
      position: relative;
      width: 100%;
      height: 38px;
      background: #f8fafc;
      border-radius: 6px;
      display: flex;
      overflow: hidden;
      border: 1px solid #cbd5e1;
    }

    .segment {
      height: 100%;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      gap: 4px;
      padding: 0 4px;
      text-align: center;
      transition: width 0.4s ease;
      white-space: nowrap;
      overflow: hidden;
    }

    .segment-thinking {
      background: #fef3c7;
      border-right: 2px dashed #d97706;
      color: #78350f;
    }

    .segment-braking {
      background: #fee2e2;
      border-right: 2px solid #dc2626;
      color: #991b1b;
    }

    .seg-title {
      font-size: 11px;
      font-weight: 700;
    }

    .seg-value {
      font-size: 11px;
      font-weight: 800;
      background: rgba(255, 255, 255, 0.7);
      padding: 1px 5px;
      border-radius: 4px;
    }

    /* Total Bracket Bar */
    .total-container {
      position: relative;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin-top: 2px;
    }

    .total-bracket {
      height: 8px;
      border-left: 2px solid #2563eb;
      border-right: 2px solid #2563eb;
      border-bottom: 2px solid #2563eb;
      transition: width 0.4s ease;
      margin-bottom: 4px;
    }

    /* Scale Reference Line */
    .scale-bar {
      width: 100%;
      display: flex;
      justify-content: space-between;
      border-top: 1px solid #cbd5e1;
      padding-top: 2px;
      font-size: 10px;
      color: #64748b;
      font-weight: 600;
    }

    /* Formula Banner */
    .formula-banner {
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      border-radius: 8px;
      padding: 8px 10px;
      text-align: center;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .formula-title {
      font-size: 11px;
      font-weight: 700;
      color: #1e40af;
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }

    .formula-calc {
      font-size: 13px;
      font-weight: 700;
      color: #1e293b;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: 4px;
    }

    .calc-total {
      color: #1d4ed8;
      font-weight: 800;
    }

    .calc-thinking {
      color: #b45309;
      background: #fef3c7;
      padding: 1px 6px;
      border-radius: 4px;
      border: 1px solid #fde68a;
    }

    .calc-braking {
      color: #b91c1c;
      background: #fee2e2;
      padding: 1px 6px;
      border-radius: 4px;
      border: 1px solid #fecaca;
    }

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

    .info-card {
      padding: 8px 10px;
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .info-card-thinking {
      background: #fffbeb;
      border: 1px solid #fde68a;
    }

    .info-card-braking {
      background: #fef2f2;
      border: 1px solid #fecaca;
    }

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 4px;
    }

    .card-title {
      font-size: 12px;
      font-weight: 700;
    }

    .info-card-thinking .card-title {
      color: #78350f;
    }

    .info-card-braking .card-title {
      color: #991b1b;
    }

    .card-badge {
      font-size: 11px;
      font-weight: 800;
      padding: 1px 5px;
      border-radius: 4px;
    }

    .info-card-thinking .card-badge {
      background: #fef3c7;
      color: #78350f;
      border: 1px solid #fcd34d;
    }

    .info-card-braking .card-badge {
      background: #fee2e2;
      color: #991b1b;
      border: 1px solid #fca5a5;
    }

    .card-desc {
      font-size: 11px;
      line-height: 1.35;
      color: #334155;
      font-weight: 500;
    }

    @media (max-width: 400px) {
      .seg-title {
        display: none;
      }
      .seg-value {
        font-size: 10px;
        padding: 0 3px;
      }
      .cards-grid {
        grid-template-columns: 1fr;
        gap: 6px;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    
    <div class="controls-wrapper">
      <span class="controls-label">Select Vehicle Speed:</span>
      <div class="controls">
        <button class="btn-speed active" id="btn30" onclick="setSpeed(30)">30 mph</button>
        <button class="btn-speed" id="btn50" onclick="setSpeed(50)">50 mph</button>
      </div>
    </div>

    
    <div class="road-scene">
      <div class="road-markings"></div>
      <div class="car" id="car">🚗</div>
      <div class="hazard" title="Hazard ahead">🦌</div>
    </div>

    
    <div class="diagram-area">
      <div class="track-outer">
        <div class="segment segment-thinking" id="segThinking">
          <span class="seg-title">Thinking</span>
          <span class="seg-value" id="valThinking">9 m</span>
        </div>
        <div class="segment segment-braking" id="segBraking">
          <span class="seg-title">Braking</span>
          <span class="seg-value" id="valBraking">14 m</span>
        </div>
      </div>

      
      <div class="total-container">
        <div class="total-bracket" id="totalBracket"></div>
      </div>

      
      <div class="scale-bar">
        <span>0 m</span>
        <span>15 m</span>
        <span>30 m</span>
        <span>45 m</span>
        <span>60 m</span>
      </div>
    </div>

    
    <div class="formula-banner">
      <div class="formula-title">Total Stopping Distance = Thinking + Braking</div>
      <div class="formula-calc">
        <span class="calc-total" id="formulaTotal">23 m</span>
        <span>=</span>
        <span class="calc-thinking" id="formulaThinking">9 m (Thinking)</span>
        <span>+</span>
        <span class="calc-braking" id="formulaBraking">14 m (Braking)</span>
      </div>
    </div>

    
    <div class="cards-grid">
      <div class="info-card info-card-thinking">
        <div class="card-header">
          <span class="card-title">Thinking Distance</span>
          <span class="card-badge" id="cardValThinking">9 m</span>
        </div>
        <p class="card-desc">Driver perceives hazard and reacts (before brakes are touched).</p>
      </div>

      <div class="info-card info-card-braking">
        <div class="card-header">
          <span class="card-title">Braking Distance</span>
          <span class="card-badge" id="cardValBraking">14 m</span>
        </div>
        <p class="card-desc">Brakes applied, car decelerates to a full stop (0 m/s).</p>
      </div>
    </div>
  </div>

  <script>
    // Max scale mapped to 60m for proportional visual comparison
    const MAX_METRES = 60;

    const DATA = {
      30: { thinking: 9, braking: 14, total: 23 },
      50: { thinking: 15, braking: 38, total: 53 }
    };

    function setSpeed(speed) {
      document.getElementById('btn30').classList.toggle('active', speed === 30);
      document.getElementById('btn50').classList.toggle('active', speed === 50);

      const d = DATA[speed];
      const thinkingPct = (d.thinking / MAX_METRES) * 100;
      const brakingPct = (d.braking / MAX_METRES) * 100;
      const totalPct = (d.total / MAX_METRES) * 100;

      // Update segment widths & bar text
      const segT = document.getElementById('segThinking');
      const segB = document.getElementById('segBraking');
      
      segT.style.width = thinkingPct + '%';
      segB.style.width = brakingPct + '%';
      
      document.getElementById('valThinking').textContent = d.thinking + ' m';
      document.getElementById('valBraking').textContent = d.braking + ' m';

      // Update total bracket
      document.getElementById('totalBracket').style.width = totalPct + '%';

      // Update formula banner
      document.getElementById('formulaTotal').textContent = d.total + ' m Total';
      document.getElementById('formulaThinking').textContent = d.thinking + ' m Thinking';
      document.getElementById('formulaBraking').textContent = d.braking + ' m Braking';

      // Update explanatory card badges
      document.getElementById('cardValThinking').textContent = d.thinking + ' m';
      document.getElementById('cardValBraking').textContent = d.braking + ' m';

      // Animate car position on the road
      const car = document.getElementById('car');
      car.style.left = '4px';
      
      setTimeout(() => {
        // Car travels total stopping distance (adjusted for car width)
        const stopPosition = Math.min((d.total / MAX_METRES) * 82, 82);
        car.style.left = stopPosition + '%';
      }, 50);
    }

    // Initialize with 30 mph
    setSpeed(30);
  </script>
</body>
</html>

UK-GCSE-SCIENCE-PHYS-FM-03

Child standards (3)

Aligned learning resources

Related diagrams