betaflight-configurator/tabs/initial_setup.html

<div class="tab-initial_setup">
    <div class="section">
        <a class="calibrateAccel" href="#">Calibrate Accelerometer</a>
        <p>
            Place board or frame on <strong style="color: green;">leveled</strong> surface, proceed with calibration, ensure platform is <strong style="color: red;">not</strong> moving during calibration period.
        </p>
    </div>
    <div class="section">
        <a class="calibrateMag" href="#">Calibrate Magnetometer</a>
        <p>
            Move multirotor atleast <strong>360</strong> degrees on all axis of rotation. You have <strong style="color: red;">30 seconds</strong> to perform this task.
        </p>
    </div>
    <div class="section">
        <a class="resetSettings" href="#">Reset Settings</a>
        <p>
            Restore <span style="color: red">all</span> settings to <strong>default</strong>.
        </p>
    </div>
    <div class="section">
        <a class="backup" href="#">Backup</a>
        <a class="restore" href="#">Restore</a>
        <p>
            <strong>Backup</strong> your configuration in case of an accident. (<strong>CLI</strong> settings are <strong style="color: red;">not</strong> included).
        </p>
    </div>
    <div id="interactive_block">
        <span class="model"></span>
        <a class="reset" href="#" title="Reset Z">Reset Z axis</a>
        <div id="perspective">
            <div id="cube">
                <div id="cubePITCH">
                    <div id="cubeROLL">
                        <div class="face one">BOTTOM</div>
                        <div class="face two">BACK</div>
                        <div class="face three">RIGHT</div>
                        <div class="face four">FRONT</div>
                        <div class="face five">LEFT</div>
                        <div class="face six">TOP</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="left" style="width: 510px">
        <div class="battery">
            <span class="head">Battery</span>
            <div class="fields">
                <dl>
                    <dt>Voltage:</dt><dd class="bat-voltage">0 V</dd>
                    <dt>Min Cell Voltage:</dt><dd><input type="number" name="mincellvoltage" step="0.1" min="1" max="5" value="0" /></dd>
                    <dt>Max Cell Voltage:</dt><dd><input type="number" name="maxcellvoltage" step="0.1" min="1" max="5" value="0" /></dd>
                    <dt>Voltage Scale:</dt><dd><input type="number" name="voltagescale" min="10" max="200" value="0" /></dd>
                </dl>
            </div>
        </div>
        <div class="throttle">
            <span class="head">Throttle Settings</span>
            <div class="fields">
                <dl>
                    <dt>Minimum:</dt><dd><input type="number" name="minthrottle" min="0" max="2000" value="0" /></dd>
                    <dt>Maximum:</dt><dd><input type="number" name="maxthrottle" min="0" max="2000" value="0" /></dd>
                    <dt>Failsafe:</dt><dd><input type="number" name="failsafe_throttle" min="1000" max="2000" value="0" /></dd>
                    <dt title="Minimum Command">MinCommand:</dt><dd><input type="number" name="mincommand" min="0" max="2000" value="0" /></dd>
                </dl>
            </div>
        </div>
        <div class="acc-trim">
            <span class="head">Accelerometer trims</span>
            <div class="fields">
                <dl>
                    <dt>Pitch:</dt><dd><input type="number" name="pitch" min="-300" max="300" value="0" /></dd>
                    <dt>Roll:</dt><dd><input type="number" name="roll" min="-300" max="300" value="0" /></dd>
                </dl>
            </div>
        </div>
        <a class="update" href="#">Save</a>
    </div>
    <div class="magnetometer">
        <span class="head">Magnetometer</span>
        <div class="fields">
            <dl>
                <dt>Declination:</dt><dd><input type="number" name="mag_declination" step="0.1" min="-180" max="180" value="0" /></dd>
            </dl>
        </div>
    </div>
    <div class="compass-wrapper">
        <div id="compass">
            <span>N</span>
            <span>E</span>
            <span>S</span>
            <span>W</span>
            <div class="pointer">
                <span class="tip"></span>
                <span class="stick"></span>
            </div>
            <div class="value"></div>
        </div>
    </div>
</div>