index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Dosage Calculator</title>
  <style>
    body { font-family: sans-serif; max-width: 420px; margin: 40px auto; padding: 0 16px; }
    h1 { font-size: 22px; }
    label { display: block; margin-top: 14px; font-weight: bold; }
    input { width: 100%; padding: 8px; font-size: 16px; margin-top: 4px; box-sizing: border-box; }
    button { margin-top: 18px; padding: 10px 20px; font-size: 16px; cursor: pointer; }
    #result { margin-top: 20px; font-size: 18px; }
    .error { color: #c00; }
    .disclaimer { margin-top: 28px; font-size: 13px; color: #555; border-top: 1px solid #ccc; padding-top: 12px; }
  </style>
</head>
<body>
  <h1>Dosage Calculator</h1>

  <label>Patient weight (kg)</label>
  <input type="number" id="weight" min="0" step="0.1">

  <label>Dose (mg/kg/day)</label>
  <input type="number" id="dosePerKg" min="0" step="0.1">

  <label>Number of doses per day</label>
  <input type="number" id="dosesPerDay" min="1" step="1">

  <button onclick="calculate()">Calculate</button>

  <div id="result"></div>

  <p class="disclaimer">Teaching prototype only. Not for clinical use. Verify every dose independently.</p>

  <script>
    function calculate() {
      const weight = parseFloat(document.getElementById('weight').value);
      const dosePerKg = parseFloat(document.getElementById('dosePerKg').value);
      const dosesPerDay = parseInt(document.getElementById('dosesPerDay').value);
      const result = document.getElementById('result');

      if (isNaN(weight) || isNaN(dosePerKg) || isNaN(dosesPerDay) ||
          weight <= 0 || dosePerKg <= 0 || dosesPerDay <= 0) {
        result.innerHTML = '<span class="error">Enter valid positive numbers in all fields.</span>';
        return;
      }

      const totalDaily = weight * dosePerKg;
      const perDose = totalDaily / dosesPerDay;

      result.innerHTML =
        'Total daily dose: <b>' + totalDaily.toFixed(1) + ' mg/day</b><br>' +
        'Per dose: <b>' + perDose.toFixed(1) + ' mg</b> (' + dosesPerDay + ' times/day)';
    }
  </script>
</body>
</html>