/home/awneajlw/www/codestechvista.com/cal.php
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Optical Cross / Near Calculator</title>
  <style>
    body { font-family: Arial, sans-serif; padding: 20px; }
    .input-group { margin-bottom: 10px; }
    label { display: inline-block; width: 120px; }
    input[type="number"] { width: 80px; }
    .results-container { margin-top: 20px; border-top: 1px solid #ccc; padding-top: 10px; }
    .eye-results-section { margin-bottom: 20px; }
    .prescription-line { margin: 4px 0; }
    .eye-title { margin-bottom: 8px; font-weight: bold; }
  </style>
</head>
<body>

  <h2>OpticTool-style Calculator</h2>

  <div>
    <div class="input-group">
      <label>Dist Sph R:</label>
      <input type="number" id="dist_sph_r" step="0.25" placeholder="e.g. +0.25" />
    </div>
    <div class="input-group">
      <label>Dist Cyl R:</label>
      <input type="number" id="dist_cyl_r" step="0.25" placeholder="e.g. +1.75" />
    </div>
    <div class="input-group">
      <label>Dist Axis R:</label>
      <input type="number" id="dist_axis_r" step="1" placeholder="e.g. 90" />
    </div>

    <div class="input-group">
      <label>Dist Sph L:</label>
      <input type="number" id="dist_sph_l" step="0.25" placeholder="e.g. +0.75" />
    </div>
    <div class="input-group">
      <label>Dist Cyl L:</label>
      <input type="number" id="dist_cyl_l" step="0.25" placeholder="e.g. +1.75" />
    </div>
    <div class="input-group">
      <label>Dist Axis L:</label>
      <input type="number" id="dist_axis_l" step="1" placeholder="e.g. 90" />
    </div>

    <div class="input-group">
      <label>Add Power:</label>
      <input type="number" id="add_power" step="0.25" placeholder="e.g. +2.00" />
    </div>

    <button onclick="calculatePrescription()">Calculate</button>
    <button onclick="clearForm()">Clear</button>
  </div>

  <div id="resultsSection" style="display:none;">
    <div id="calculationResults" class="results-container"></div>
  </div>

  <script>
    // Transpose (minus <-> plus cylinder) function
    function transposeRx(sph, cyl, axis) {
      const newSph = sph + cyl;
      const newCyl = -cyl;
      let newAxis = axis <= 90 ? axis + 90 : axis - 90;
      if (newAxis > 180) newAxis -= 180;
      if (newAxis <= 0) newAxis += 180;
      return { sphere: newSph, cylinder: newCyl, axis: newAxis };
    }

    // Format number as optical style
    function formatOpticalNumber(num) {
      if (Math.abs(num) < 1e-6) return '0.00';
      const formatted = Math.abs(num).toFixed(2);
      return num > 0 ? `+${formatted}` : `-${formatted}`;
    }

    function calculatePrescription() {
      const distSphR = parseFloat(document.getElementById('dist_sph_r').value) || 0;
      const distCylR = parseFloat(document.getElementById('dist_cyl_r').value) || 0;
      const distAxisR = parseInt(document.getElementById('dist_axis_r').value) || 0;

      const distSphL = parseFloat(document.getElementById('dist_sph_l').value) || 0;
      const distCylL = parseFloat(document.getElementById('dist_cyl_l').value) || 0;
      const distAxisL = parseInt(document.getElementById('dist_axis_l').value) || 0;

      const add = parseFloat(document.getElementById('add_power').value) || 0;

      let resultsHTML = '';

      function processEye(label, dsph, dcyl, daxis) {
        let html = `<div class="eye-results-section"><div class="eye-title">${label} Eye Results</div>`;

        // Distance
        html += `<div class="prescription-line">Dist : Sph: ${formatOpticalNumber(dsph)}, Cyl: ${formatOpticalNumber(dcyl)}, Axis: ${daxis}</div>`;
        if (dcyl !== 0) {
          const t = transposeRx(dsph, dcyl, daxis);
          html += `<div class="prescription-line">Sph: ${formatOpticalNumber(t.sphere)}, Cyl: ${formatOpticalNumber(t.cylinder)}, Axis: ${t.axis}</div>`;
        }

        // Near
        if (add !== 0) {
          const nearSph = dsph + add;
          html += `<div class="prescription-line">Near : Sph: ${formatOpticalNumber(nearSph)}, Cyl: ${formatOpticalNumber(dcyl)}, Axis: ${daxis}</div>`;
          if (dcyl !== 0) {
            const tn = transposeRx(nearSph, dcyl, daxis);
            html += `<div class="prescription-line">Sph: ${formatOpticalNumber(tn.sphere)}, Cyl: ${formatOpticalNumber(tn.cylinder)}, Axis: ${tn.axis}</div>`;
          }
        }

        html += `</div>`;
        return html;
      }

      // Right eye
      if (distSphR || distCylR || distAxisR) {
        resultsHTML += processEye('Right', distSphR, distCylR, distAxisR);
      }
      // Left eye
      if (distSphL || distCylL || distAxisL) {
        resultsHTML += processEye('Left', distSphL, distCylL, distAxisL);
      }

      document.getElementById('calculationResults').innerHTML = resultsHTML;
      document.getElementById('resultsSection').style.display = 'block';
    }

    function clearForm() {
      document.getElementById('dist_sph_r').value = '';
      document.getElementById('dist_cyl_r').value = '';
      document.getElementById('dist_axis_r').value = '';
      document.getElementById('dist_sph_l').value = '';
      document.getElementById('dist_cyl_l').value = '';
      document.getElementById('dist_axis_l').value = '';
      document.getElementById('add_power').value = '';
      document.getElementById('resultsSection').style.display = 'none';
    }
  </script>

</body>
</html>
Path: home/awneajlw/www/codestechvista.com