awesome-xlabs/launcher/localappdata/xlabs/data/launcher-ui/pages/settings.html

<div class="grid">
    <span id="data" class="container card">
        <span class="title">Settings</span>
        <span class="content">
            <p>
                <span class="two-grid">
                    <span>Advanced Warfare Installation</span>
                    <span>
                        <span class="input">
                            <input type="text" id="aw-install" readonly>
                            <button id="aw-browse">Browse</button>
                        </span>
                    </span>
                </span>
            </p>

            <p>
                <span class="two-grid">
                    <span>Ghosts Installation</span>
                    <span>
                        <span class="input">
                            <input type="text" id="ghosts-install" readonly>
                            <button id="ghosts-browse">Browse</button>
                        </span>
                    </span>
                </span>
            </p>

            <p>
                <span class="two-grid">
                    <span>Modern Warfare 2 Installation</span>
                    <span>
                        <span class="input">
                            <input type="text" id="mw2-install" readonly>
                            <button id="mw2-browse">Browse</button>
                        </span>
                    </span>
                </span>
            </p>

            <p>
                <span class="two-grid">
                    <span>Update Channel</span>
                    <span>
                        <span class="input">
                            <input type="radio" id="channel-main" name="channel" value="channel-main">
                            <label for="channel-main">Stable</label>
                        </span>
                        <span class="input">
                            <input type="radio" id="channel-dev" name="channel" value="channel-dev">
                            <label for="channel-dev">Experimental</label>
                        </span>
                    </span>
                </span>
            </p>
        </span>
    </span>
</div>

<style>
    #content>.grid {
        display: flex;
        width: 100%;
    }

    #data {
        flex: 1 1 auto;
    }

    #content .content>:first-child {
        margin-top: 0;
    }

    #content .content>:last-child {
        margin-bottom: 0;
    }

    #content button {
        cursor: pointer;
    }
</style>

<script>
    function handleChannelChange() {
        const id = this.id;
        const newChannel = id.substring(8);

        window.channel.then(channel => {
            if (channel == newChannel) {
                return;
            }

            const channelTexts = {
                'main': `You are about to switch to the <b>stable</b> channel.<br><br>Are you sure you want to do that?`,
                'dev': `You are about to switch to the <b>experimental</b> channel.<br><br>You will get more frequent updates, but overall stability may decrease.<br><br>Are you sure you want to do that?`,
            };

            const text = channelTexts[newChannel];

            window.showMessageBox("⚠ Warning",
                text, ["Yes", "Cancel"]).then(index => {
                    if (index == 0) {
                        executeCommand('switch-channel', newChannel);
                    } else {
                        checkCurrentChannelRadio();
                    }
                });
        });
    }

    function checkCurrentChannelRadio() {
        window.channel.then(channel => {
            document.querySelector(`input#channel-${channel}`).checked = true;
        });
    }

    checkCurrentChannelRadio();

    var nodes = document.querySelectorAll('input[name="channel"]');
    for (var i = 0; i < nodes.length; ++i) {
        nodes[i].onclick = handleChannelChange;
    }

    // set textbox path and save property to json
    document.querySelector("#aw-browse").onclick = function () {
        executeCommand('browse-folder').then(folder => {
            if (folder) {
                document.querySelector("#aw-install").value = folder;
                executeCommand('set-property', {
                    'aw-install': folder
                });
            }
        });
    }

    document.querySelector("#ghosts-browse").onclick = function () {
        executeCommand('browse-folder').then(folder => {
            if (folder) {
                document.querySelector("#ghosts-install").value = folder;
                executeCommand('set-property', {
                    'ghosts-install': folder
                });
            }
        });
    }

    document.querySelector("#mw2-browse").onclick = function () {
        executeCommand('browse-folder').then(folder => {
            if (folder) {
                document.querySelector("#mw2-install").value = folder;
                executeCommand('set-property', {
                    'mw2-install': folder
                });
            }
        });
    }

    // get path already set in config if path is set
    executeCommand('get-property', 'aw-install').then(folder => {
        if (folder) {
            document.querySelector("#aw-install").value = folder;
        }
    });

    executeCommand('get-property', 'ghosts-install').then(folder => {
        if (folder) {
            document.querySelector("#ghosts-install").value = folder;
        }
    });

    executeCommand('get-property', 'mw2-install').then(folder => {
        if (folder) {
            document.querySelector("#mw2-install").value = folder;
        }
    });
</script>