Embed

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>Even Spacer Calculator</title>
  <style>
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
      width: 100vw;
      min-height: 100vh;
      background: #f4f4f4;
      font-family: Arial, sans-serif;
      overflow-x: hidden;
    }
    body {
      min-height: 100vh;
      width: 100vw;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .container {
      width: 100vw;
      max-width: 420px;
      min-height: 100vh;
      margin: 0 auto;
      background: #fff;
      border-radius: 0;
      box-shadow: none;
      padding: 2.5vw 0 0 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      border: 3vw solid transparent; /* Invisible border for mobile accommodation, scales with screen */
      box-sizing: border-box;
      transition: padding 0.2s, border 0.2s;
    }
    h2 {
      text-align: center;
      margin-bottom: 18px;
    }
    label {
      display: block;
      margin-top: 12px;
      font-weight: bold;
    }
    input, select {
      width: 100%;
      padding: 2vw 1vw;
      margin-top: 1vw;
      border-radius: 4px;
      border: 1px solid #ccc;
      font-size: 4vw;
      max-width: 100%;
      box-sizing: border-box;
      min-width: 0;
      transition: font-size 0.2s, padding 0.2s;
    }
    button {
      margin-top: 3vw;
      width: 100%;
      padding: 2vw 0;
      background: #fdf3e4;
      color: #fff;
      border: none;
      border-radius: 4px;
      font-size: 4vw;
      cursor: pointer;
      max-width: 100%;
      transition: font-size 0.2s, padding 0.2s;
    }
    .result {
      margin-top: 4vw;
      background: #e9f7ef;
      padding: 2vw;
      border-radius: 4px;
      font-size: 4vw;
      word-break: break-word;
    }

    @media (min-width: 500px) {
      .container {
        max-width: 420px;
        border-width: 12px;
        padding-top: 16px;
      }
      input, select, button, .result {
        font-size: 17px;
        padding: 8px;
        margin-top: 4px;
      }
    }
  </style>
    <style>
      /* Remove spinner arrows from number input (cross-browser) */
      input[type=number]::-webkit-inner-spin-button, 
      input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
      input[type=number] {
        appearance: textfield;
        -moz-appearance: textfield;
      }
    </style>
    <style>
      /* Toggle switch styles */
      .switch {
        position: relative;
        display: inline-block;
        width: 44px;
        height: 24px;
      }
      .switch input {
        opacity: 0;
        width: 0;
        height: 0;
      }
      .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: .3s;
        border-radius: 24px;
      }
      .slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: .3s;
        border-radius: 50%;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
      }
      .switch input:checked + .slider {
        background-color: #007BFF;
      }
      .switch input:checked + .slider:before {
        transform: translateX(20px);
      }
    </style>
</head>
<body>
  <div class="container">
    <h2>Even Spacer Calculator</h2>
    <form id="spacerForm">
      <label for="totalLength">Total Length (inches & fraction):</label>
      <input type="text" id="totalLength" placeholder="e.g. 48 1/2" required>

      <label for="spacerWidth">Spacer Width (inches & fraction):</label>
      <input type="text" id="spacerWidth" placeholder="e.g. 1 3/8" required>

      <label for="numSpacers">Number of Spacers:</label>
      <div style="display:flex;align-items:center;gap:8px;justify-content:center;">
        <button type="button" id="decrementSpacers" style="background:#e74c3c;color:#fff;border:none;border-radius:4px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;font-size:28px;box-shadow:0 1px 3px rgba(0,0,0,0.07);cursor:pointer;transition:background 0.2s;">&#8595;</button>
        <input type="number" id="numSpacers" min="1" value="1" required style="width:48px;height:48px;text-align:center;font-size:22px;border-radius:4px;border:1px solid #ccc;">
        <button type="button" id="incrementSpacers" style="background:#27ae60;color:#fff;border:none;border-radius:4px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;font-size:28px;box-shadow:0 1px 3px rgba(0,0,0,0.07);cursor:pointer;transition:background 0.2s;">&#8593;</button>
      </div>
    


      <div class="toggle-row">
        <span class="toggle-label">Spacers at ends</span>
        <label class="switch">
          <input type="checkbox" id="endsToggle">
          <span class="slider"></span>
        </label>
      </div>
  <style>
    .toggle-row {
      margin-top: 16px;
      display: flex;
      align-items: center;
      gap: 18px;
      justify-content: flex-start;
      width: 100%;
    }
    .toggle-label {
      font-size: 1rem;
      min-width: 120px;
      text-align: left;
    }
    @media (max-width: 500px) {
      .toggle-label {
        font-size: 4vw;
        min-width: 0;
      }
      .toggle-row {
        gap: 10px;
      }
    }
  </style>

      <label for="rounding" style="margin-top:16px;">Rounding:</label>
      <select id="rounding">
        <option value="16">Nearest 1/16"</option>
        <option value="8">Nearest 1/8"</option>
      </select>

    </form>
    <div class="result" id="result"></div>
    <div id="visualization" style="margin-top:24px;"></div>
    <div id="spacerTable" style="margin-top:24px;"></div>
  </div>

  <script>
    // Parse input like "48 1/2" or "1 3/8" to decimal inches
    function parseInches(str) {
      str = str.trim();
      if (!str) return 0;
      let parts = str.split(' ');
      let inches = 0;
      if (parts.length === 2) {
        inches += parseInt(parts[0], 10);
        let frac = parts[1].split('/');
        if (frac.length === 2) {
          inches += parseInt(frac[0], 10) / parseInt(frac[1], 10);
        }
      } else if (parts.length === 1) {
        if (parts[0].includes('/')) {
          let frac = parts[0].split('/');
          if (frac.length === 2) {
            inches += parseInt(frac[0], 10) / parseInt(frac[1], 10);
          }
        } else {
          inches += parseFloat(parts[0]);
        }
      }
      return inches;
    }

    // Convert decimal inches to "x y/z" format, rounding to nearest denominator and simplifying fraction
    function gcd(a, b) {
      while (b) {
        [a, b] = [b, a % b];
      }
      return a;
    }

    function formatInches(val, denom) {
      let whole = Math.floor(val);
      let frac = val - whole;
      let num = Math.round(frac * denom);
      if (num === denom) {
        whole += 1;
        num = 0;
      }
      if (num === 0) return `${whole}"`;
      // Simplify fraction
      let divisor = gcd(num, denom);
      let simpNum = num / divisor;
      let simpDenom = denom / divisor;
      if (whole === 0) return `${simpNum}/${simpDenom}"`;
      return `${whole} ${simpNum}/${simpDenom}"`;
    }

    function calculateAndShow() {
      const totalLength = parseInches(document.getElementById('totalLength').value);
      const spacerWidth = parseInches(document.getElementById('spacerWidth').value);
      const numSpacers = parseInt(document.getElementById('numSpacers').value, 10);
      const ends = document.getElementById('endsToggle').checked;
      const rounding = parseInt(document.getElementById('rounding').value, 10);
      const resultDiv = document.getElementById('result');
      const vizDiv = document.getElementById('visualization');
      if (numSpacers < 1 || totalLength <= 0 || spacerWidth < 0) {
        resultDiv.textContent = 'Please enter valid values.';
        vizDiv.innerHTML = '';
        return;
      }
      // Adjust spacers and spaces logic
      let actualSpacers, numSpaces, showEnds = ends;
      if (ends) {
        // Spacers at both ends
        actualSpacers = numSpacers + 2;
        numSpaces = numSpacers + 1;
      } else {
        // Centered: always start and end with a space
        actualSpacers = numSpacers;
        numSpaces = numSpacers + 1;
      }
      // Calculate total width taken by spacers
      const totalSpacersWidth = actualSpacers * spacerWidth;
      if (totalSpacersWidth > totalLength) {
        resultDiv.textContent = 'Spacers are too wide for the given length.';
        vizDiv.innerHTML = '';
        return;
      }
      // Remaining length to be divided
      const remaining = totalLength - totalSpacersWidth;
      const space = numSpaces > 0 ? remaining / numSpaces : 0;
      resultDiv.innerHTML =
        `<b>Each space between spacers${showEnds ? ' (including ends)' : ''}:</b> ${formatInches(space, rounding)}<br>` +
        `<b>Total length:</b> ${formatInches(totalLength, rounding)}<br>` +
        `<b>Spacer width:</b> ${formatInches(spacerWidth, rounding)}<br>` +
        `<b>Number of spacers:</b> ${actualSpacers}<br>` +
        `<b>Spacers at ends:</b> ${showEnds ? 'Yes' : 'No'}`;


      // Visualization (no measurements inside blocks)
      const maxVizWidth = 350;
      const totalSpacesWidth = numSpaces * space;
      const totalBlocksWidth = totalSpacersWidth + totalSpacesWidth;
      const scale = totalBlocksWidth > 0 ? maxVizWidth / totalBlocksWidth : 1;
      let html = `<div style="width:${maxVizWidth}px;display:flex;align-items:center;justify-content:left;">`;
      let spaceOrder = [];
      if (ends) {
        for (let i = 0; i < actualSpacers + numSpaces; i++) {
          if (i % 2 === 0) {
            // Spacer
            html += `<div style=\"height:32px;width:${spacerWidth * scale}px;background:#fdf3e4;border-radius:4px;margin:0 2px;display:flex;align-items:center;justify-content:center;color:#333;font-size:13px;\">S</div>`;
          } else {
            // Space
            html += `<div style=\"height:32px;width:${space * scale}px;background:#eee;border-radius:4px;margin:0 2px;display:flex;align-items:center;justify-content:center;color:#333;font-size:13px;border:1px dashed #bbb;\"></div>`;
            spaceOrder.push(formatInches(space, rounding));
          }
        }
      } else {
        // Start and end with a space, spacers in between
        for (let i = 0; i < actualSpacers + numSpaces; i++) {
          if (i % 2 === 0) {
            // Space
            html += `<div style=\"height:32px;width:${space * scale}px;background:#eee;border-radius:4px;margin:0 2px;display:flex;align-items:center;justify-content:center;color:#333;font-size:13px;border:1px dashed #bbb;\"></div>`;
            spaceOrder.push(formatInches(space, rounding));
          } else {
            // Spacer
            html += `<div style=\"height:32px;width:${spacerWidth * scale}px;background:#fdf3e4;border-radius:4px;margin:0 2px;display:flex;align-items:center;justify-content:center;color:#333;font-size:13px;\">S</div>`;
          }
        }
      }
      html += '</div>';
      vizDiv.innerHTML = html;

      // Static block below visualization with a single measurement (all spaces are the same)
      let staticMeas = '';
      if (spaceOrder.length > 0) {
        staticMeas = `<div style=\"margin-top:8px;text-align:center;font-size:15px;color:#333;\"><b>Each space:</b> ${spaceOrder[0]}</div>`;
      }
      vizDiv.innerHTML += staticMeas;

      // Table of spacer measurements
      let tableHtml = '';
      if (actualSpacers > 0) {
        tableHtml = '<table style="width:100%;border-collapse:collapse;margin-top:16px;font-size:15px;">';
        tableHtml += '<tr style="background:#f0f0f0;"><th style="padding:4px 6px;border:1px solid #ccc;">Spacer #</th><th style="padding:4px 6px;border:1px solid #ccc;">Start</th><th style="padding:4px 6px;border:1px solid #ccc;">Center</th><th style="padding:4px 6px;border:1px solid #ccc;">End</th></tr>';
        let pos = 0;
        // For centered layout, first space, then spacer, then ...
        for (let i = 0, spacerIdx = 1; i < actualSpacers + numSpaces; i++) {
          if ((ends && i % 2 === 0) || (!ends && i % 2 === 1)) {
            // It's a spacer
            let start = pos;
            let center = start + spacerWidth / 2;
            let end = start + spacerWidth;
            tableHtml += `<tr><td style="padding:4px 6px;border:1px solid #ccc;text-align:center;">${spacerIdx}</td>` +
              `<td style="padding:4px 6px;border:1px solid #ccc;text-align:center;">${formatInches(start, rounding)}</td>` +
              `<td style="padding:4px 6px;border:1px solid #ccc;text-align:center;">${formatInches(center, rounding)}</td>` +
              `<td style="padding:4px 6px;border:1px solid #ccc;text-align:center;">${formatInches(end, rounding)}</td></tr>`;
            pos += spacerWidth;
            spacerIdx++;
          } else {
            // It's a space
            pos += space;
          }
        }
        tableHtml += '</table>';
      }
      document.getElementById('spacerTable').innerHTML = tableHtml;
    }

    document.getElementById('spacerForm').onsubmit = function(e) {
      e.preventDefault();
      calculateAndShow();
    };

    // Add event listeners for increment/decrement buttons
    document.getElementById('incrementSpacers').addEventListener('click', function() {
      const input = document.getElementById('numSpacers');
      input.value = Math.max(1, parseInt(input.value, 10) + 1);
      calculateAndShow();
    });
    document.getElementById('decrementSpacers').addEventListener('click', function() {
      const input = document.getElementById('numSpacers');
      input.value = Math.max(1, parseInt(input.value, 10) - 1);
      calculateAndShow();
    });

    // Real-time update on toggle and rounding
    document.getElementById('endsToggle').addEventListener('change', calculateAndShow);
    document.getElementById('rounding').addEventListener('change', calculateAndShow);
    document.getElementById('totalLength').addEventListener('input', calculateAndShow);
    document.getElementById('spacerWidth').addEventListener('input', calculateAndShow);
    document.getElementById('numSpacers').addEventListener('input', calculateAndShow);
  </script>
</body>
</html>
