espurna/code/html/src/panel-thermostat.html

<form id="form-thermostat" class="pure-form pure-form-aligned form-settings">
    <div class="panel" id="panel-thermostat">

        <div class="header">
            <h1>THERMOSTAT</h1>
            <h2>Thermostat configuration</h2>
        </div>

        <div class="page">

            <fieldset>
                <legend>General</legend>

                <div class="pure-control-group">
                    <label>Enable Thermostat</label>
                    <input class="checkbox-toggle" type="checkbox" name="thermostatEnabled">
                </div>

                <div class="pure-control-group">
                    <label>Thermostat Mode</label>
                    <input class="checkbox-toggle" type="checkbox" name="thermostatMode">
                </div>

                <div class="pure-control-group">
                    <label for="thermostatOperationMode">Operation mode</label>
                    <input name="thermostatOperationMode" type="text" readonly>
                </div>

            </fieldset>

            <fieldset>

                <legend>Temperature range</legend>

                <div class="pure-control-group">
                    <label>Maximum</label>
                    <input id="tempRangeMaxInput" name="tempRangeMax" type="number" min="1" max="100" data="20" required >
                    <span class="pure-form-message-inline" data-key="thermostatTmpUnit">
                    </span>
                </div>

                <div class="pure-control-group">
                    <label>Minimum</label>
                    <input id="tempRangeMinInput" name="tempRangeMin" type="number" min="0" max="99" data="10" required >
                    <span class="pure-form-message-inline" data-key="thermostatTmpUnit">
                    </span>
                </div>

            </fieldset>

            <fieldset>

                <legend>Remote sensor</legend>

                <div class="pure-control-group">
                    <label for="remoteSensorName">Remote sensor name</label>
                    <input name="remoteSensorName" type="text">
                </div>

                <div class="pure-control-group">
                    <label for="remoteTmp">Remote temperature</label>
                    <input name="remoteTmp" type="text" readonly>
                    <span class="pure-form-message-inline" data-key="thermostatTmpUnit">
                    </span>
                </div>

                <div class="pure-control-group">
                    <label for="remoteTempMaxWait">Remote temperature waiting</label>
                    <input name="remoteTempMaxWait" type="number" min="0" max="1800" data="120" required >
                    <span class="pure-form-message-inline">
                        (seconds)
                    </span>
                </div>

            </fieldset>

            <fieldset>

                <legend>Operation mode</legend>

                <div class="pure-control-group">
                    <label for="maxOnTime">Max heating time</label>
                    <input name="maxOnTime" type="number" min="0" max="180" data="30" required >
                    <span class="pure-form-message-inline">
                        (minutes)
                    </span>
                </div>

                <div class="pure-control-group">
                    <label for="minOffTime">Min rest time</label>
                    <input name="minOffTime" type="number" min="0" max="60" data="10" required >
                    <span class="pure-form-message-inline">
                        (minutes)
                    </span>
                </div>

            </fieldset>

            <fieldset>

                <legend>Autonomous mode</legend>

                <div class="pure-control-group">
                    <label for="aloneOnTime">Heating time</label>
                    <input name="aloneOnTime" type="number" min="0" max="180" data="5" required >
                    <span class="pure-form-message-inline">
                        (minutes)
                    </span>
                </div>

                <div class="pure-control-group">
                    <label for="aloneOffTime">Rest time</label>
                    <input name="aloneOffTime" type="number" min="0" max="180" data="55" required >
                    <span class="pure-form-message-inline">
                        (minutes)
                    </span>
                </div>

            </fieldset>

            <fieldset>

                <legend>Time worked</legend>

                <div class="pure-control-group">
                    <label for="burnToday">Today</label>
                    <input type="text" name="burnToday" readonly>
                </div>

                <div class="pure-control-group">
                    <label for="burnYesterday">Yesterday</label>
                    <input type="text" name="burnYesterday" readonly>
                </div>

                <div class="pure-control-group">
                    <label for="burnThisMonth">Current month</label>
                    <input type="text" name="burnThisMonth" readonly>
                </div>

                <div class="pure-control-group">
                    <label for="burnPrevMonth">Previous month</label>
                    <input type="text" name="burnPrevMonth" readonly>
                </div>

                <div class="pure-control-group">
                    <label for="burnTotal">Total</label>
                    <input type="text" name="burnTotal" readonly>
                </div>

                <div class="pure-controls">
                    <button type="button" class="pure-button button-thermostat-reset-counters">Reset counters</button>
                </div>

            </fieldset>
        </div>
    </div>
</form>