settings.html

<html>
    <head>
        <style>
            body {
                width: 350px;
                text-align: center;
                margin: 0;
            }
            .logo-container {
                margin-bottom: 4px;
                color: #ffffff;
                background-color: #2ab5ff;
                padding: 10px;
            }
            .option {
                margin-bottom: 4px;
            }
            .control-table {
                margin-bottom: 4px;
                display: inline-block;
            }
            .small-input {
                width: 64px;
            }
            .map-button-disabled {
                pointer-events: none;
                background-color: #aaa;
            }
        </style>
    </head>
    <body>
        <div class="logo-container">
            <img src="img/cs-text-64.png">
            <span id="version">?.?.?</span>
        </div>
        <div id="first-run-notification">
            If you already have Stadia open, you must refresh the window before ControlStadia will function.
            <button type="button" id="first-run-notification-close-button">I understand</button>
        </div>
        <div id="settings">
            <div id="finding-joysticks">
                Finding joysticks...
            </div>
            <div id="joystick-settings" style="display: none;">
                <div class="option">
                    <button type="button" id="gamepad-refresh-button">Refresh gamepads</button>
                </div>
                <div class="option">
                    <label for="gamepad-select">Select target gamepad</label>
                    <select id="gamepad-select"></select>
                </div>
                <table class="control-table">
                    <thead>
                        <tr>
                            <th>Control</td>
                            <th>Mapping</td>
                            <th>Scale</td>
                            <th>Offset</td>
                        </tr>
                    </thead>
                    <tbody id="control-list"></tbody>
                </table>
            </div>
            <div class="option">
                <label for="disable-controlstadia">Disable ControlStadia</label>
                <input type="checkbox" id="disable-controlstadia">
            </div>
            <div class="option">
                <label for="apply-button">Apply changes (causes refresh)</label>
                <button type="button" id="apply-button">Apply</button>
            </div>
            <div class="option">
                <label for="reset-button">Reset settings (causes refresh)</label>
                <button type="button" id="reset-button">Reset</button>
            </div>
        </div>
        <script src="settings.js"></script>
    </body>
</html>