controls.html

<div class="row-fluid text-center">
    <h2>Puca Power <small><a href="https://github.com/llamasoft/Puca-Power/blob/master/CHANGES.md" id="pucaPowerVersion"></a></small></h2>
</div>
<!--
    So it turns out that I'm not great at designing user interfaces.
    I had to relearn HTML5 and Bootstrap 2.3.2 to hack this together.
    If you have any experience building UIs, please feel free to contact me on GitHub.

    Setting IDs are based on the variable they will be stored in.
    Examples:
        alertOnBundle      -> alert.onBundle
        alertSoundFile     -> alert.soundFile
        filterCardsByValue -> filter.cardsByValue
-->
<div class="row-fluid">
    <div class="span4">
        <legend>Auto-refresh Settings</legend>
        <div class="form-inline">
            <label>Reload interval:</label>
            <div class="input-append">
                <input id="reloadInterval" type="number" class="input-mini" min="10" step="1">
                <span class="add-on">seconds</span>
            </div>
        </div>

        <h3><!-- spacing hack --></h3>
        <div class="form-inline">
            <label class="checkbox">
                <input id="disableInfScroll" type="checkbox">
                Disable the <abbr title="scrolling down loads more trades if available (if you have fewer than 200 matched trades, leave this checked)">infinite scroll</abbr> feature
            </label>
        </div>

        <h3><!-- spacing hack --></h3>
        <div class="form-inline">
            <button id="start" class="btn btn-success span5">Start</button>
            <button id="stop" class="btn span3">Stop</button>
        </div>
    </div>

    <div class="span4">
        <legend>Alert Settings</legend>
        <div class="form-inline">
            <label class="checkbox">
                <input id="alertOnBundle" type="checkbox">
                Alert on <abbr title="one or more cards from a single member">trade bundles</abbr> over
            </label>
            <div class="input-append">
                <input id="alertBundleThreshold" type="number" class="input-mini" min="1" step="1">
                <span class="add-on">points</span>
            </div>
        </div>

        <div class="form-inline">
            <label class="checkbox">
                <input id="alertColorizeBundleRows" type="checkbox">
                Colorize bundle rows
            </label>
            <input id="alertColorizeBundleColor" type="color" class="input-small">
        </div>

        <h3><!-- spacing hack --></h3>
        <div class="form-inline">
            <label class="checkbox">
                <input id="alertOnOutgoing" type="checkbox">
                Alert on <abbr title="trades from a member you have unshipped cards for">add-on trades</abbr>
            </label>
        </div>

        <div class="form-inline">
            <label class="checkbox">
                <input id="alertColorizeOutgoingRows" type="checkbox">
                Colorize add-on trade rows
            </label>
            <input id="alertColorizeOutgoingColor" type="color" class="input-small">
        </div>

        <h3><!-- spacing hack --></h3>
        <div class="form-inline">
            <label class="checkbox">
                <input type="checkbox" id="alertPlaySound">
                Play sound on alert
            </label>
            <div class="input-append">
                <input id="alertSoundFile" class="input-small" type="url" placeholder="http://">
                <span class="add-on"><i id="alertPreviewSound" class="icon-play"></i></span>
            </div>
        </div>

        <div class="form-inline">
            <label class="checkbox">
                <input type="checkbox" id="alertChangeTitle">
                Change page title on alert
            </label>
        </div>
    </div>

    <div class="span4">
        <legend>Filter Settings</legend>
        <span class="help-block text-center">
            <small><strong>Note:</strong> Filters only apply to trades not part of an alert</small>
        </span>
        <div class="form-inline">
            <label class="checkbox">
                <input type="checkbox" id="filterCardsByValue">
                Filter cards worth less than
            </label>
            <div class="input-append">
                <input id="filterCardsMinValue" type="number" class="input-mini" min="1" step="1">
                <span class="add-on">points</span>
            </div>
        </div>

        <h3><!-- spacing hack --></h3>
        <div class="form-inline">
            <label class="checkbox">
                <input type="checkbox" id="filterMembersByPoints">
                Filter members with less than
            </label>
            <div class="input-append">
                <input id="filterMembersMinPoints" type="number" class="input-mini" min="1" step="1">
                <span class="add-on">points</span>
            </div>
        </div>
    </div>
</div>

<div class="row-fluid">
    <div class="span8">
        <legend>Notifications</legend>
        <ul id="noteList">
            <li id="defaultNote" class="noteItem muted">None</li>
        </ul>
    </div>
    <div class="span4">
        <legend>Storage Settings</legend>
        <div class="form-inline">
            <button id="save" class="btn btn-success span5">Save and Apply</button>
            <button id="reset" class="btn btn-warning span3">Reset</button>
        </div>
    </div>
    <audio id="alertSound"></audio>
</div>
<hr />