<!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: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

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

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

    .time-card {
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 14px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-weight: 700;
      font-size: 15px;
      padding-bottom: 6px;
      border-bottom: 1px solid #e2e8f0;
    }

    .badge-am {
      background: #e0f2fe;
      color: #0284c7;
      border: 1px solid #bae6fd;
      padding: 2px 8px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 700;
    }

    .badge-pm {
      background: #fef3c7;
      color: #d97706;
      border: 1px solid #fde68a;
      padding: 2px 8px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 700;
    }

    .step-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #ffffff;
      border: 1px solid #edf2f7;
      border-radius: 8px;
      padding: 6px 10px;
      font-size: 13px;
      min-height: 38px;
      transition: all 0.3s ease;
    }

    .step-row.active {
      border-color: #38bdf8;
      box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
    }

    .step-row.active-pm {
      border-color: #f59e0b;
      box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
    }

    .step-label {
      color: #64748b;
      font-weight: 600;
      font-size: 12px;
    }

    .step-val {
      font-weight: 700;
      font-size: 15px;
      letter-spacing: 0.5px;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .tag-add0 {
      background: #e0f2fe;
      color: #0369a1;
      padding: 1px 6px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 700;
    }

    .tag-add12 {
      background: #fef3c7;
      color: #b45309;
      padding: 1px 6px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 700;
    }

    .strike {
      text-decoration: line-through;
      color: #94a3b8;
      font-weight: 500;
    }

    .result-row {
      background: #f0fdf4;
      border: 1.5px solid #86efac;
      border-radius: 8px;
      padding: 8px 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .result-val {
      font-size: 18px;
      font-weight: 800;
      color: #166534;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    }

    .highlight-blue {
      color: #0284c7;
      background: #e0f2fe;
      padding: 0 3px;
      border-radius: 3px;
    }

    .highlight-amber {
      color: #b45309;
      background: #fef3c7;
      padding: 0 3px;
      border-radius: 3px;
    }

    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 12px;
      width: 100%;
      max-width: 600px;
    }

    .btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #334155;
      padding: 6px 14px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      user-select: none;
    }

    .btn:active {
      background: #e2e8f0;
    }

    .btn.active-btn {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
    }
  </style>
</head>
<body>

  <div class="main-grid">
    
    <div class="time-card">
      <div class="card-header">
        <span>☀️ Morning</span>
        <span class="badge-am">+0 / Pad 0</span>
      </div>

      <div class="step-row" id="am-start">
        <span class="step-label">12-Hour</span>
        <span class="step-val">8:25 AM</span>
      </div>

      <div class="step-row" id="am-step1">
        <span class="step-label">Drop Label</span>
        <span class="step-val">8:25 <span class="strike">AM</span></span>
      </div>

      <div class="step-row" id="am-step2">
        <span class="step-label">Leading Zero</span>
        <span class="step-val"><span class="tag-add0">+0</span> 8 → <span class="highlight-blue">08</span></span>
      </div>

      <div class="result-row" id="am-result">
        <span class="step-label" style="color:#166534; font-weight:700;">24-Hour</span>
        <span class="result-val"><span class="highlight-blue">08</span>:25</span>
      </div>
    </div>

    
    <div class="time-card">
      <div class="card-header">
        <span>🌙 Evening</span>
        <span class="badge-pm">+12 Hours</span>
      </div>

      <div class="step-row" id="pm-start">
        <span class="step-label">12-Hour</span>
        <span class="step-val">6:15 PM</span>
      </div>

      <div class="step-row" id="pm-step1">
        <span class="step-label">Add 12</span>
        <span class="step-val"><span class="tag-add12">+12</span> 6 + 12 = <span class="highlight-amber">18</span></span>
      </div>

      <div class="step-row" id="pm-step2">
        <span class="step-label">Drop Label</span>
        <span class="step-val"><span class="highlight-amber">18</span>:15 <span class="strike">PM</span></span>
      </div>

      <div class="result-row" id="pm-result">
        <span class="step-label" style="color:#166534; font-weight:700;">24-Hour</span>
        <span class="result-val"><span class="highlight-amber">18</span>:15</span>
      </div>
    </div>
  </div>

  <div class="controls">
    <button class="btn active-btn" id="btn-all" onclick="setStep('all')">All Steps</button>
    <button class="btn" id="btn-1" onclick="setStep(1)">1: Start</button>
    <button class="btn" id="btn-2" onclick="setStep(2)">2: Convert</button>
    <button class="btn" id="btn-3" onclick="setStep(3)">3: Result</button>
  </div>

  <script>
    function setStep(step) {
      document.querySelectorAll('.btn').forEach(b => b.classList.remove('active-btn'));
      
      const amRows = [
        document.getElementById('am-start'),
        document.getElementById('am-step1'),
        document.getElementById('am-step2'),
        document.getElementById('am-result')
      ];
      
      const pmRows = [
        document.getElementById('pm-start'),
        document.getElementById('pm-step1'),
        document.getElementById('pm-step2'),
        document.getElementById('pm-result')
      ];

      // Reset
      amRows.forEach(r => { r.style.opacity = '1'; r.classList.remove('active'); });
      pmRows.forEach(r => { r.style.opacity = '1'; r.classList.remove('active-pm'); });

      if (step === 'all') {
        document.getElementById('btn-all').classList.add('active-btn');
      } else if (step === 1) {
        document.getElementById('btn-1').classList.add('active-btn');
        amRows[0].classList.add('active');
        pmRows[0].classList.add('active-pm');
        amRows[1].style.opacity = '0.3';
        amRows[2].style.opacity = '0.3';
        amRows[3].style.opacity = '0.3';
        pmRows[1].style.opacity = '0.3';
        pmRows[2].style.opacity = '0.3';
        pmRows[3].style.opacity = '0.3';
      } else if (step === 2) {
        document.getElementById('btn-2').classList.add('active-btn');
        amRows[1].classList.add('active');
        amRows[2].classList.add('active');
        pmRows[1].classList.add('active-pm');
        pmRows[2].classList.add('active-pm');
        amRows[0].style.opacity = '0.4';
        pmRows[0].style.opacity = '0.4';
        amRows[3].style.opacity = '0.3';
        pmRows[3].style.opacity = '0.3';
      } else if (step === 3) {
        document.getElementById('btn-3').classList.add('active-btn');
        amRows[3].classList.add('active');
        pmRows[3].classList.add('active-pm');
        amRows[0].style.opacity = '0.4';
        amRows[1].style.opacity = '0.4';
        amRows[2].style.opacity = '0.4';
        pmRows[0].style.opacity = '0.4';
        pmRows[1].style.opacity = '0.4';
        pmRows[2].style.opacity = '0.4';
      }
    }
  </script>
</body>
</html>

Converting Between 12-Hour and 24-Hour Clock Times

<!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: transparent;
      padding: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

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

    /* Top Node */
    .root-node {
      background: #ffffff;
      border: 2px solid #22b7ff;
      border-radius: 24px;
      padding: 6px 16px;
      font-size: 14px;
      font-weight: 700;
      color: #0f172a;
      box-shadow: 0 2px 8px rgba(34, 183, 255, 0.15);
      text-align: center;
      position: relative;
      z-index: 2;
    }

    /* Quick Test Bar */
    .selector-bar {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;
      margin-bottom: 2px;
    }

    .time-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 14px;
      padding: 3px 10px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      font-family: monospace;
      transition: background 0.2s, color 0.2s, border-color 0.2s;
    }

    .time-btn.active {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
    }

    /* Tree Grid */
    .grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
      width: 100%;
    }

    @media (min-width: 540px) {
      .grid {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    /* Branch Cards */
    .branch-card {
      border-radius: 12px;
      padding: 10px 8px;
      border: 2px solid transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 6px;
      cursor: pointer;
      opacity: 0.65;
      transition: opacity 0.25s, box-shadow 0.25s, border-color 0.25s;
    }

    .branch-card.active {
      opacity: 1;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }

    /* Pastel Themes */
    .branch-1 {
      background: #f5f3ff;
      border-color: #ddd6fe;
      color: #6b21a8;
    }
    .branch-1.active {
      border-color: #8b5cf6;
      box-shadow: 0 0 0 1px #8b5cf6, 0 4px 12px rgba(139, 92, 246, 0.15);
    }

    .branch-2 {
      background: #f0f9ff;
      border-color: #bae6fd;
      color: #0369a1;
    }
    .branch-2.active {
      border-color: #0ea5e9;
      box-shadow: 0 0 0 1px #0ea5e9, 0 4px 12px rgba(14, 165, 233, 0.15);
    }

    .branch-3 {
      background: #fefce8;
      border-color: #fef08a;
      color: #854d0e;
    }
    .branch-3.active {
      border-color: #eab308;
      box-shadow: 0 0 0 1px #eab308, 0 4px 12px rgba(234, 179, 8, 0.15);
    }

    .branch-4 {
      background: #f0fdf4;
      border-color: #bbf7d0;
      color: #15803d;
    }
    .branch-4.active {
      border-color: #22c55e;
      box-shadow: 0 0 0 1px #22c55e, 0 4px 12px rgba(34, 197, 94, 0.15);
    }

    .condition-badge {
      font-size: 12px;
      font-weight: 800;
      padding: 2px 6px;
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.7);
      text-transform: uppercase;
      letter-spacing: 0.02em;
    }

    .action-text {
      font-size: 13px;
      font-weight: 700;
      line-height: 1.25;
    }

    .example-box {
      font-family: monospace;
      font-size: 12px;
      font-weight: 700;
      background: rgba(255, 255, 255, 0.85);
      border-radius: 6px;
      padding: 4px 6px;
      width: 100%;
      white-space: nowrap;
      border: 1px dashed currentColor;
    }
  </style>
</head>
<body>

<div class="tree-container">
  
  <div class="root-node">Look at the Hour</div>

  
  <div class="selector-bar">
    <button class="time-btn active" onclick="selectBranch(0)">00:35</button>
    <button class="time-btn" onclick="selectBranch(1)">07:10</button>
    <button class="time-btn" onclick="selectBranch(2)">12:50</button>
    <button class="time-btn" onclick="selectBranch(3)">20:15</button>
  </div>

  
  <div class="grid">
    
    <div class="branch-card branch-1 active" onclick="selectBranch(0)">
      <span class="condition-badge">Hour is 00</span>
      <span class="action-text">00 → 12<br>+ AM</span>
      <div class="example-box">00:35 → 12:35 AM</div>
    </div>

    
    <div class="branch-card branch-2" onclick="selectBranch(1)">
      <span class="condition-badge">01 to 11</span>
      <span class="action-text">Drop 0<br>+ AM</span>
      <div class="example-box">07:10 → 7:10 AM</div>
    </div>

    
    <div class="branch-card branch-3" onclick="selectBranch(2)">
      <span class="condition-badge">Hour is 12</span>
      <span class="action-text">Keep 12<br>+ PM</span>
      <div class="example-box">12:50 → 12:50 PM</div>
    </div>

    
    <div class="branch-card branch-4" onclick="selectBranch(3)">
      <span class="condition-badge">13 to 23</span>
      <span class="action-text">Hour − 12<br>+ PM</span>
      <div class="example-box">20:15 → 8:15 PM</div>
    </div>
  </div>
</div>

<script>
  function selectBranch(index) {
    const cards = document.querySelectorAll('.branch-card');
    const btns = document.querySelectorAll('.time-btn');

    cards.forEach((card, i) => {
      card.classList.toggle('active', i === index);
    });

    btns.forEach((btn, i) => {
      btn.classList.toggle('active', i === index);
    });
  }
</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>12-Hour vs 24-Hour Clock Timeline</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      width: 100%;
    }

    .app-wrap {
      width: 100%;
      max-width: 620px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    /* Live Time Comparison Card */
    .compare-card {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 16px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      gap: 8px;
    }

    .time-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 8px;
      border-radius: 8px;
      transition: background 0.2s ease, border-color 0.2s ease;
      border: 1px solid transparent;
    }

    .time-box.am-theme {
      background: #e0f2fe;
      border-color: #bae6fd;
      color: #0369a1;
    }

    .time-box.pm-theme {
      background: #ffedd5;
      border-color: #fed7aa;
      color: #9a3412;
    }

    .time-box.h24-theme {
      background: #ede9fe;
      border-color: #ddd6fe;
      color: #4338ca;
    }

    .time-label {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 2px;
    }

    .time-val {
      font-size: 24px;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
    }

    .sync-arrow {
      font-size: 18px;
      font-weight: bold;
      color: #94a3b8;
      text-align: center;
    }

    /* Timeline Container */
    .timeline-section {
      position: relative;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      padding: 20px 16px 14px 16px;
    }

    .bars-container {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin: 10px 0 24px 0;
    }

    /* 12-Hour Bar Split */
    .bar-row {
      position: relative;
      width: 100%;
      height: 44px;
      border-radius: 8px;
      display: flex;
      overflow: hidden;
      border: 1px solid #cbd5e1;
    }

    .bar-half {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.3px;
      position: relative;
    }

    .bar-am {
      background: #e0f2fe;
      color: #0369a1;
      border-right: 2px dashed #94a3b8;
    }

    .bar-pm {
      background: #ffedd5;
      color: #9a3412;
    }

    /* 24-Hour Bar */
    .bar-24 {
      background: #ede9fe;
      color: #4338ca;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.3px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Alignment Ticks / Axis */
    .ticks-row {
      position: absolute;
      bottom: 2px;
      left: 0;
      right: 0;
      display: flex;
      justify-content: space-between;
      pointer-events: none;
    }

    .tick-label {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      transform: translateX(-50%);
      white-space: nowrap;
      text-align: center;
      line-height: 1.1;
    }

    .tick-label:first-child {
      transform: translateX(0);
      text-align: left;
    }

    .tick-label:last-child {
      transform: translateX(-100%);
      text-align: right;
    }

    /* Scrubber / Pointer Line */
    .scrub-line {
      position: absolute;
      top: -6px;
      bottom: 18px;
      width: 2px;
      background: #2563eb;
      transform: translateX(-50%);
      pointer-events: none;
      z-index: 10;
      transition: left 0.05s linear;
    }

    .scrub-handle {
      position: absolute;
      top: -6px;
      left: 50%;
      transform: translateX(-50%);
      width: 14px;
      height: 14px;
      background: #2563eb;
      border: 2px solid #ffffff;
      border-radius: 50%;
      box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    }

    /* Range Slider overlay */
    .range-input {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      cursor: ew-resize;
      z-index: 20;
    }

    /* Milestone Buttons */
    .milestones-title {
      font-size: 11px;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 8px;
      text-align: center;
    }

    .milestone-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 6px;
      width: 100%;
    }

    .btn-time {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 2px;
      font-size: 11px;
      font-weight: 700;
      color: #334155;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      transition: all 0.15s ease;
    }

    .btn-time span.sub {
      font-size: 9px;
      font-weight: 600;
      color: #64748b;
    }

    .btn-time:hover {
      background: #f1f5f9;
      border-color: #cbd5e1;
    }

    .btn-time.active {
      background: #eff6ff;
      border-color: #3b82f6;
      color: #1d4ed8;
      box-shadow: 0 0 0 1px #3b82f6;
    }

    .btn-time.active span.sub {
      color: #2563eb;
    }

    @media (max-width: 420px) {
      .time-val {
        font-size: 20px;
      }
      .bar-half, .bar-24 {
        font-size: 11px;
      }
      .btn-time {
        font-size: 10px;
        padding: 4px 1px;
      }
    }
  </style>
</head>
<body>

<div class="app-wrap">

  
  <div class="compare-card">
    <div id="box12" class="time-box am-theme">
      <div class="time-label">12-Hour Clock</div>
      <div id="val12" class="time-val">12:00 AM</div>
    </div>
    <div class="sync-arrow">⟷</div>
    <div class="time-box h24-theme">
      <div class="time-label">24-Hour Clock</div>
      <div id="val24" class="time-val">00:00</div>
    </div>
  </div>

  
  <div class="timeline-section" id="timelineArea">
    <div class="bars-container">
      
      <div class="bar-row">
        <div class="bar-half bar-am">AM (00:00 – 11:59)</div>
        <div class="bar-half bar-pm">PM (12:00 – 23:59)</div>
      </div>

      
      <div class="bar-row">
        <div class="bar-half bar-24" style="flex: 1;">24-Hour Continuous (00:00 – 23:59)</div>
      </div>

      
      <div id="scrubLine" class="scrub-line" style="left: 0%;">
        <div class="scrub-handle"></div>
      </div>

      
      <input type="range" id="timeSlider" class="range-input" min="0" max="1439" step="15" value="0" aria-label="Timeline Scrubber">
    </div>

    
    <div class="ticks-row">
      <div class="tick-label">12:00 AM<br>00:00</div>
      <div class="tick-label">6:00 AM<br>06:00</div>
      <div class="tick-label">12:00 PM<br>12:00</div>
      <div class="tick-label">6:00 PM<br>18:00</div>
      <div class="tick-label">11:59 PM<br>23:59</div>
    </div>
  </div>

  
  <div>
    <div class="milestones-title">Tap Key Milestones</div>
    <div class="milestone-grid">
      <button class="btn-time active" data-mins="0">
        12:00 AM
        <span class="sub">00:00</span>
      </button>
      <button class="btn-time" data-mins="360">
        6:00 AM
        <span class="sub">06:00</span>
      </button>
      <button class="btn-time" data-mins="720">
        12:00 PM
        <span class="sub">12:00</span>
      </button>
      <button class="btn-time" data-mins="1080">
        6:00 PM
        <span class="sub">18:00</span>
      </button>
      <button class="btn-time" data-mins="1439">
        11:59 PM
        <span class="sub">23:59</span>
      </button>
    </div>
  </div>

</div>

<script>
  const slider = document.getElementById('timeSlider');
  const scrubLine = document.getElementById('scrubLine');
  const val12 = document.getElementById('val12');
  const val24 = document.getElementById('val24');
  const box12 = document.getElementById('box12');
  const buttons = document.querySelectorAll('.btn-time');

  function updateTime(totalMins) {
    const minsNum = parseInt(totalMins, 10);
    const pct = (minsNum / 1439) * 100;
    scrubLine.style.left = `${pct}%`;

    const hours24 = Math.floor(minsNum / 60);
    const minutes = minsNum % 60;

    // 24-hour string
    const hh24 = String(hours24).padStart(2, '0');
    const mm = String(minutes).padStart(2, '0');
    val24.textContent = `${hh24}:${mm}`;

    // 12-hour calculation
    let hours12 = hours24 % 12;
    if (hours12 === 0) hours12 = 12;
    const period = hours24 < 12 ? 'AM' : 'PM';
    val12.textContent = `${hours12}:${mm} ${period}`;

    // Update styling theme
    if (period === 'AM') {
      box12.className = 'time-box am-theme';
    } else {
      box12.className = 'time-box pm-theme';
    }

    // Update active button state
    buttons.forEach(btn => {
      const btnMins = parseInt(btn.getAttribute('data-mins'), 10);
      if (Math.abs(btnMins - minsNum) <= 15) {
        btn.classList.add('active');
      } else {
        btn.classList.remove('active');
      }
    });
  }

  slider.addEventListener('input', (e) => {
    updateTime(e.target.value);
  });

  buttons.forEach(btn => {
    btn.addEventListener('click', () => {
      const mins = btn.getAttribute('data-mins');
      slider.value = mins;
      updateTime(mins);
    });
  });

  // Initial state
  updateTime(0);
</script>

</body>
</html>

OGM.6.MD.3

Aligned learning resources

Related diagrams