dualshock-tools.github.io/templates/finetune-modal.html

<div class="modal fade" id="finetuneModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="finetuneModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg modal-fullscreen-lg-down">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5 ds-i18n" id="finetuneModalLabel">Finetune stick calibration</h1>
        <button type="button" class="btn-close" aria-label="Close" onclick="finetune_cancel()"></button>
      </div>
      <div class="modal-body">
        <p class="ds-i18n">This screen allows to finetune raw calibration data on your controller</p>

        <div class="modal-header border-top-0 pt-0">
          <div class="btn-group w-100" role="group" aria-label="Finetune mode selection">
            <input type="radio" class="btn-check" name="finetuneMode" id="finetuneModeCenter" autocomplete="off" checked>
            <label class="btn btn-outline-primary ds-i18n" for="finetuneModeCenter">Center (L1)</label>

            <input type="radio" class="btn-check" name="finetuneMode" id="finetuneModeCircularity" autocomplete="off">
            <label class="btn btn-outline-primary ds-i18n" for="finetuneModeCircularity">Circularity (R1)</label>
          </div>
        </div>

        <div class="alert alert-info finetune-center-mode" role="alert">
          <i class="fas fa-info-circle"></i>&nbsp;&nbsp;
          <span class="ds-i18n">
            Move the stick to select it for tuning, then without touching the stick use the D-pad buttons to adjust the center point. Flick it and adjust it again if it is off center or flickers.
          </span>
        </div>
        <div class="alert alert-warning finetune-center-mode" role="alert" id="finetuneCenterWarning">
          <i class="fas fa-exclamation-triangle"></i>&nbsp;&nbsp;
          <span class="ds-i18n">
            Please release the stick to center position before adjusting with D-pad buttons.
          </span>
        </div>
        <div class="alert alert-success finetune-center-mode" role="alert" id="finetuneCenterSuccess">
          <i class="fas fa-check-circle"></i>&nbsp;&nbsp;
          <span class="ds-i18n">
            Press the D-pad or face buttons in the direction you want the stick position to move.
          </span>
        </div>
        <div class="alert alert-info finetune-circularity-mode" role="alert">
          <i class="fas fa-info-circle"></i>&nbsp;&nbsp;
          <span class="ds-i18n">
            While holding the stick to be adjusted straight up/down/left/right, <em>observe the highlighted value below the circle</em>,
            then use the D-pad buttons to adjust the value to ±0.99 (just below ±1.00).
          </span>
        </div>
        <div class="alert alert-warning finetune-circularity-mode" role="alert" id="finetuneCircularityWarning">
          <i class="fas fa-exclamation-triangle"></i>&nbsp;&nbsp;
          <span class="ds-i18n">
            Push the stick straight up/down/left/right as far as possible.
          </span>
        </div>
        <div class="alert alert-success finetune-circularity-mode" role="alert" id="finetuneCircularitySuccess">
          <i class="fas fa-check-circle"></i>&nbsp;&nbsp;
          <span class="ds-i18n">
            Press the D-pad or face buttons in the direction you want the stick position to move.
          </span>
        </div>
        <div style="width: 100%; display: flex; justify-content: center;">
          <div class="container-fluid">
            <div class="row">
              <div class="col col-lg-6 col-12">

                <div class="card text-bg-light" id="left-stick-card" style="height: 340px;">
                  <div class="card-header"><span class="ds-i18n">Left stick</span></div>
                  <div class="card-body">
                    <div class="container-fluid">
                      <div class="finetune-grid">
                        <div class="finetune-top finetune-center-mode">
                          <input id="finetuneLY" type="number" class="form-control" min="0" max="65535" value="0">
                        </div>
                        <div class="finetune-top finetune-circularity-mode">
                          <input id="finetuneLT" type="number" class="form-control" min="0" max="65535" value="0">
                        </div>
                        <div class="finetune-left finetune-circularity-mode">
                          <input id="finetuneLL" type="number" class="form-control" min="0" max="65535" value="0">
                        </div>
                        <div class="finetune-left finetune-center-mode">
                          <input id="finetuneLX" type="number" class="form-control" min="0" max="65535" value="0">
                        </div>
                        <div class="finetune-center">
                          <canvas id="finetuneStickCanvasL" width="150px" height="150px"></canvas>
                          <canvas id="finetuneStickCanvasL_large" width="210px" height="210px"></canvas>
                        </div>
                        <div class="finetune-right finetune-circularity-mode">
                          <input id="finetuneLR" type="number" class="form-control" min="0" max="65535" value="0">
                        </div>
                        <div class="finetune-bottom finetune-circularity-mode">
                          <input id="finetuneLB" type="number" class="form-control" min="0" max="65535" value="0">
                        </div>
                      </div>
                    </div>

                    <div class="px-2">
                      <div class="hstack">
                        <div class="vstack" style="text-align: center;">
                          <span>LX:</span>
                          <strong><pre id="finetuneStickCanvasLx-lbl" style="min-width: 80px;"></pre></strong>
                        </div>

                        <div class="vstack" style="text-align: center;">
                          <span>LY:</span>
                          <strong><pre id="finetuneStickCanvasLy-lbl" style="min-width: 80px;"></pre></strong>
                        </div>
                      </div>
                    </div>

                  </div>
                </div>
              </div> <!-- col -->

              <div class="col col-lg-6 col-12">
                <div class="card text-bg-light" id="right-stick-card" style="height: 340px;">
                  <div class="card-header"><span class="ds-i18n">Right stick</span></div>
                  <div class="card-body">
                    <div class="container-fluid">
                      <div class="finetune-grid">
                        <div class="finetune-top finetune-center-mode">
                          <input id="finetuneRY" type="number" class="form-control" min="0" max="65535" value="0">
                        </div>
                        <div class="finetune-top finetune-circularity-mode">
                          <input id="finetuneRT" type="number" class="form-control" min="0" max="65535" value="0">
                        </div>
                        <div class="finetune-left finetune-circularity-mode">
                          <input id="finetuneRL" type="number" class="form-control" min="0" max="65535" value="0">
                        </div>
                        <div class="finetune-left finetune-center-mode">
                          <input id="finetuneRX" type="number" class="form-control" min="0" max="65535" value="0">
                        </div>
                        <div class="finetune-center">
                          <canvas id="finetuneStickCanvasR" width="150px" height="150px"></canvas>
                          <canvas id="finetuneStickCanvasR_large" width="210px" height="210px"></canvas>
                        </div>
                        <div class="finetune-right finetune-circularity-mode">
                          <input id="finetuneRR" type="number" class="form-control" min="0" max="65535" value="0">
                        </div>
                        <div class="finetune-bottom finetune-circularity-mode">
                          <input id="finetuneRB" type="number" class="form-control" min="0" max="65535" value="0">
                        </div>
                      </div>

                      <div class="px-2">
                        <div class="hstack">
                          <div class="vstack" style="text-align: center;">
                            <span>RX:</span>
                            <strong><pre id="finetuneStickCanvasRx-lbl" style="min-width: 80px;"></pre></strong>
                          </div>

                          <div class="vstack" style="text-align: center;">
                            <span>RY:</span>
                            <strong><pre id="finetuneStickCanvasRy-lbl" style="min-width: 80px;"></pre></strong>
                          </div>
                        </div>
                      </div>

                    </div>
                  </div>
                </div> <!-- col -->
              </div> <!-- row -->
            </div>

          </div>
        </div>

        <div class="modal-footer">
          <div class="form-check me-auto">
            <input class="form-check-input" type="checkbox" id="showRawNumbersCheckbox">
            <label class="form-check-label ds-i18n" for="showRawNumbersCheckbox">Show raw numbers</label>
          </div>
          <div class="dropdown me-2">
            <a class="btn btn-link text-decoration-none" href="#" role="button" id="stepSizeDropdown" data-bs-toggle="dropdown" aria-expanded="false">
              <span class="ds-i18n">Step size</span>: <span id="stepSizeValue">1</span>
            </a>
            <ul class="dropdown-menu" aria-labelledby="stepSizeDropdown">
              <li><a class="dropdown-item" href="#" data-step="15">15</a></li>
              <li><a class="dropdown-item" href="#" data-step="14">14</a></li>
              <li><a class="dropdown-item" href="#" data-step="13">13</a></li>
              <li><a class="dropdown-item" href="#" data-step="12">12</a></li>
              <li><a class="dropdown-item" href="#" data-step="11">11</a></li>
              <li><a class="dropdown-item" href="#" data-step="10">10</a></li>
              <li><a class="dropdown-item" href="#" data-step="9">9</a></li>
              <li><a class="dropdown-item" href="#" data-step="8">8</a></li>
              <li><a class="dropdown-item" href="#" data-step="7">7</a></li>
              <li><a class="dropdown-item" href="#" data-step="6">6</a></li>
              <li><a class="dropdown-item" href="#" data-step="5">5</a></li>
              <li><a class="dropdown-item" href="#" data-step="4">4</a></li>
              <li><a class="dropdown-item" href="#" data-step="3">3</a></li>
              <li><a class="dropdown-item" href="#" data-step="2">2</a></li>
              <li><a class="dropdown-item" href="#" data-step="1">1</a></li>
            </ul>
          </div>
          <button type="button" class="btn btn-secondary ds-i18n" onclick="finetune_cancel()">Cancel</button>
          <button type="button" class="btn btn-primary ds-i18n" onclick="finetune_save()">Done</button>
        </div>
      </div>
    </div>
  </div>
</div>