inav-configurator/tabs/magnetometer.html

<div class="tab-magnetometer">
    <div class="content_wrapper" style="height: calc(80% - 40px)">
        <div class="tab_title" data-i18n="tabMagnetometer">Magnetometer</div>
        <div class="note spacebottom">
            <div class="note_spacer">
                <p i18n="magnetometerHelp"></p>
            </div>
        </div>
        <div style="height: calc(100% - 150px);">
            <div id="model">
                <div class="model-and-info">
                    <div id="interactive_block">
                        <div id="canvas_wrapper">
                            <canvas id="canvas"></canvas>
                        </div>
                        <a class="reset" href="#" data-i18n="initialSetupButtonResetZaxis"></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="config-section gui_box grey">
            <div class="spacer_box">
                <div id="alignment-info" class="info-box">
                    <span data-i18n="magnetometerInfo"></span>
                </div>
                <div class="select" style="display: flex; justify-content: left;">
                    <select id="magalign" class="magalign">
                        <option value="0">Default</option>
                        <!-- list generated here -->
                    </select>
                    <label for="magalign" data-i18n="magnetometerOrientationPreset"></label>
                </div>
                <div class="select" style="display: flex; justify-content: left;">
                    <select id="element_to_show">
                        <option value="0" selected>Magnetometer</option>
                        <option value="1">XYZ</option>
                        <!-- list generated here -->
                    </select>
                    <label for="element_to_show" data-i18n="magnetometerElementToShow"></label>
                </div>

                <table class="axis-table">
                    <thead>
                    <tr>
                        <td style="width: 5%; padding-bottom: 10px;">
                            <p class="table-title">
                                Axis
                            </p>
                        </td>
                        <td style="width: 90%; padding-bottom: 10px;">
                            <p class="table-title">
                                Slider
                            </p>
                        </td>
                        <td style="width: 5%; padding-bottom: 10px;">
                            <a class="table-title">
                                Value [degree]
                            </a>

                        </td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td class="info">
                            <p class="title" data-i18n="configurationSensorAlignmentMagPitch"></p>
                        </td>
                        <td>
                            <div id="roll_slider" class="slider"></div>
                        </td>
                        <td>
                            <input type="number" id="alignRoll" class="tab-magnetometer" data-setting="tz_offset"
                                   data-setting-multiplier="1"
                                   step="1" min="-180" max="180"/>
                        </td>
                    </tr>
                    <tr>
                        <td class="info">
                            <p class="title" data-i18n="configurationSensorAlignmentMagRoll"></p>
                        </td>
                        <td>
                            <div id="pitch_slider" class="slider"></div>
                        </td>
                        <td>
                            <input type="number" id="alignPitch" class="tab-magnetometer" data-setting="tz_offset"
                                   data-setting-multiplier="1"
                                   step="1" min="-180" max="180"/>
                        </td>
                    </tr>
                    <tr>
                        <td class="info">
                            <p class="title" data-i18n="configurationSensorAlignmentMagYaw"></p>
                        </td>
                        <td>
                            <div id="yaw_slider" class="slider"></div>
                        </td>
                        <td>
                            <input type="number" id="alignYaw" class="tab-magnetometer" data-setting="tz_offset"
                                   data-setting-multiplier="1"
                                   step="1" min="-180" max="360"/>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="content_toolbar">
            <div class="btn save_btn">
                <a class="save" href="#" data-i18n="configurationButtonSave"></a>
            </div>
        </div>
    </div>
</div>

<div id="tab-auxiliary-templates">
    <table class="modes">
        <tbody>
        <tr class="mode">
            <td class="info">
                <p class="name"></p>
                <div class="buttons">
                    <a class="addRange" href="#" i18n="auxiliaryAddRange"></a>
                </div>
            </td>
            <td class="ranges"></td>
        </tr>
        </tbody>
    </table>
    <div class="range">
        <div class="channelInfo">
            <select class="channel">
                <option value=""></option>
            </select>
            <div class="limits">
                <p class="lowerLimit">
                    <span i18n="auxiliaryMin"></span>: <span class="lowerLimitValue"></span>
                </p>
                <p class="upperLimit">
                    <span i18n="auxiliaryMax"></span>: <span class="upperLimitValue"></span>
                </p>
            </div>
        </div>
        <div class="channel-slider pips-channel-range">
            <div class="marker"></div>
        </div>
        <div class="delete">
            <a class="deleteRange" href="#">&nbsp;</a>
        </div>
    </div>
    <table>
        <tr class="modeSection">
            <td colspan="2">
                <div class="modeSectionArea"><p class="modeSectionName"></p></div>
            </td>
        </tr>
    </table>
</div>