!DOCTYPE html
html lang=en
head
  meta charset=utf-8
  meta name=viewport content=width=device-width, initial-scale=1

  !-- Bootstrap (建议使用国内或更快镜像) --
  link rel=stylesheet href=httpscdn.jsdelivr.netnpmbootstrap@3.4.1distcssbootstrap.min.css 
  
  !-- MathJax v3：更小、更快；仅加载 TeX-CHTML --
  script
    window.MathJax = {
      tex {
        inlineMath [['$', '$'], ['(', ')']]
      },
      svg {
        fontCache 'global'
      }
    };
  script
  script defer src=httpscdn.jsdelivr.netnpmmathjax@3es5tex-chtml.jsscript

  !-- jQuery + Bootstrap JS (defer 或 async) --
  script defer src=httpscdn.jsdelivr.netnpmjquery@3.6.4distjquery.min.jsscript
  script defer src=httpscdn.jsdelivr.netnpmbootstrap@3.4.1distjsbootstrap.min.jsscript

  titleDistance Calculator (Optimized)title

  style
    body {
      background-color #f7f7f7;
      color #333;
    }
     让容器水平居中并限制最大宽度 
    .container {
      max-width 800px;
      margin 0 auto;
      padding 15px;
    }
    .page-title {
      text-align center;
      margin-top 30px;
      margin-bottom 15px;
      color #005b96;
      font-weight 700;
    }
    .info-glyph {
      cursor pointer;
    }
    .panel-heading {
      font-weight 600;
      background-color #005b96 !important;
      color #fff !important;
    }
    .panel-input {
      border-left 5px solid #00b8b6;
    }
    .panel-output {
      border-left 5px solid #37b844;
    }
    fieldset {
      margin-top 15px;
      margin-bottom 20px;
    }
    .legend-text {
      font-size 1.1em;
      font-weight 600;
    }
    .calculate-btn {
      margin-top 15px;
      text-align center;
    }
  style
head

body
div class=container
  !-- 主标题 --
  h1 class=page-title
    Distance Between The Incident and The Refraction
    small
      span data-toggle=collapse 
            data-target=#info_on_Distance
            class=glyphicon glyphicon-info-sign info-glyph
      span
    small
  h1

  !-- 折叠面板：说明信息 --
  div id=info_on_Distance class=collapse
    div class=panel panel-default
      div class=panel-body
        p
          This calculator will help you calculate the distance between 
          the incident and the refraction of light passing through a 
          planar plate.
        p
        div class=text-center
          img src=httpswww.simtrum.comupload%E6%B5%8B%E8%AF%95%E5%95%86%E5%93%81CalculatorO-10.png 
               width=250 
               height=250
               alt=Light Refraction Diagram
        div
        hr
        h4 class=text-center
          $n_1 sin theta_1 = n_2 sin theta_2$
        h4
        h4 class=text-center
          $D = d,sin(theta_1 - theta_2)$
        h4
        p
          Where
          ul
            lib$n_1$b  Incident Refractive Indexli
            lib$n_2$b  Refraction Refractive Indexli
            lib$theta_1$b  Incident angleli
            lib$theta_2$b  Refraction angleli
            lib$d$b  The Thickness of The Plateli
          ul
        p
      div
    div
  div

  !-- 输入面板 --
  div class=panel panel-default panel-input
    div class=panel-headingInputdiv
    div class=panel-body
      fieldset
        legend class=legend-textIndiceslegend
        div class=row
          div class=col-xs-6
            label for=n1Incident Refractive Index, $n_1$label
            div class=input-group
              input 
                type=number 
                class=form-control 
                id=n1
                placeholder=e.g. 1.0 
              span class=input-group-addonunitlessspan
            div
          div
          div class=col-xs-6
            label for=n2Refraction Refractive Index, $n_2$label
            div class=input-group
              input 
                type=number 
                class=form-control 
                id=n2
                placeholder=e.g. 1.5 
              span class=input-group-addonunitlessspan
            div
          div
        div
      fieldset

      fieldset
        legend class=legend-textAngles & Thicknesslegend
        div class=row
          div class=col-xs-6
            label for=theta1Incident angle, $theta_1$ (deg)label
            div class=input-group
              input 
                type=number 
                class=form-control 
                id=theta1
                placeholder=e.g. 30 
              span class=input-group-addon°span
            div
          div
          div class=col-xs-6
            label for=thicknessThickness of plate, $d$ (mm)label
            div class=input-group
              input 
                type=number 
                class=form-control 
                id=thickness
                placeholder=e.g. 10 
              span class=input-group-addonmmspan
            div
          div
        div
      fieldset
    div
  div

  !-- 输出面板 --
  div class=panel panel-default panel-output
    div class=panel-headingOutputdiv
    div class=panel-body
      fieldset
        legend class=legend-textResultslegend
        div class=row
          div class=col-xs-6
            label for=distanceDistance $D$ (mm)label
            div class=input-group
              input 
                type=number 
                class=form-control 
                id=distance
                readonly 
              span class=input-group-addonmmspan
            div
          div
        div
      fieldset
      div class=calculate-btn text-center
        button class=btn btn-primary onclick=calculateDistance()
          span class=glyphicon glyphicon-refreshspan Calculate
        button
      div
    div
  div
div !-- container --

!-- 自定义脚本（放在body底部并deferasync可避免阻塞） --
script
function calculateDistance() {
   读取输入值
  var n1Value = parseFloat(document.getElementById('n1').value);
  var n2Value = parseFloat(document.getElementById('n2').value);
  var theta1Value = parseFloat(document.getElementById('theta1').value);
  var thicknessValue = parseFloat(document.getElementById('thickness').value);
  
   若有值为空，或非数值，则将输出置空并返回
  if (isNaN(n1Value)  isNaN(n2Value)  
      isNaN(theta1Value)  isNaN(thicknessValue)) {
    document.getElementById('distance').value = '';
    return;
  }

   计算
  var theta1Rad = theta1Value  Math.PI  180;      incident angle in radians
  var sinTheta2 = (n1Value  Math.sin(theta1Rad))  n2Value;
  
   若 sinTheta2 超过1，则说明总反射或者输入非法
  if (Math.abs(sinTheta2)  1) {
    document.getElementById('distance').value = 'Invalid (TIR)';
    return;
  }
  var theta2 = Math.asin(sinTheta2);
  var distance = thicknessValue  Math.sin(theta1Rad - theta2);

  document.getElementById('distance').value = distance.toFixed(4);
}
script
body
html