config.html

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="css/config/config.css"/>
    </head>
    <body>
        <div id="settings-panel">
            <div id="settings-header">
                <span id="settings-title">SETTINGS</span>
                <span id="settings-help" class="btn"><a href="https://github.com/mkaminsky11/Codex/issues/new" target="_blank">REPORT AN ISSUE</a></span>
                <span id="settings-apply" class="btn">SAVE</span>
            </div>
            <div id="settings-body">
                <div class="settings-collapse"><span class="settings-collapse-button" id="job-gauges-collapse">+</span><span>JOB GAUGES</span></div>
                <div id="gauge-settings" class="settings-category">
                    <div class="settings-row rows">
                        <div class="settings-row-2 settings-row-2-header row">
                            <span class="row-title">Edges</span>
                            <select id="codex-edges">
                                <option value="round" selected>Rounded</option>
                                <option value="corners">Corners</option>
                                <option value="silver">Silver</option>
                            </select>
                        </div>
                        <div class="settings-row-2 settings-row-2-header row">
                            <span class="row-title">Scaling</span>
                            <input id="codex-zoom"/>
                        </div>
                        <div class="settings-row-2 settings-row-2-header row">
                            <span class="row-title">Font Size</span>
                            <input id="codex-fontsize"/>
                        </div>
                        
                        <div class="settings-row-2 settings-row-2-header row">
                            <span class="row-title">Justify Right</span>
                            <input id="codex-justify-right" type="checkbox"/>
                        </div>
                        <div class="settings-row-2 settings-row-2-header row">
                            <span class="row-title">Reverse</span>
                            <input id="codex-reverse-row" type="checkbox"/>
                        </div>
                        <div class="settings-row-2 settings-row-2-header row">
                            <span class="row-title">Small Icons</span>
                            <input id="codex-small-icons" type="checkbox"/>
                        </div>
                        <div class="settings-row-2 settings-row-2-header row">
                            <span class="row-title">Horizontal Gauges</span>
                            <input id="codex-horizontal-gauges" type="checkbox"/>
                        </div>
                    </div>

                    <div class="settings-row rows">
                        <div class="settings-row-2 settings-row-2-header row">
                            <span class="row-title">Time visible after buff ends (milliseconds)</span>
                            <input id="codex-timeout"/>
                        </div>
                        <div class="settings-row-2 settings-row-2-header row">
                            <span class="row-title">Timer refresh (milliseconds)</span>
                            <input id="codex-refresh"/>
                        </div>
                        <div class="settings-row-2 settings-row-2-header row">
                            <span class="row-title">Flash when DoTs low</span>
                            <input id="codex-danger" type="checkbox"/>
                        </div>
                        <div class="settings-row-2 settings-row-2-header row">
                            <span class="row-title">Glow around active bars</span>
                            <input id="codex-glow" type="checkbox"/>
                        </div>
                    </div>

                    <div class="settings-row row">
                        <span class="row-title">Jobs</span>
                    </div>
                </div>

                <div class="settings-collapse"><span class="settings-collapse-button" id="buffs-collapse">+</span><span>PARTY BUFFS</span></div>
                <div id="buffs-settings" class="settings-category">
                    <div class="settings-row row">
                        <span class="row-title">Always show party member's personal buffs (enabled for AST automatically)</span>
                        <input id="codex-all-personals" type="checkbox"/>
                    </div>
                    <div class="settings-row row">
                        <span class="row-title">Show own personal buffs</span>
                        <input id="codex-own-personals" type="checkbox"/>
                    </div>
                    <div class="settings-row row">
                        <span class="row-title">Small buffs</span>
                        <input id="codex-buffs-small" type="checkbox"/>
                    </div>
                </div>
            </div>
        </div>
    </body>
    
    <script src="js/config/index.js" type="module"></script>
</html>