428 lines
22 KiB
HTML
428 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Uniclock 3.0</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="site.css">
|
|
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" sizes="16x16">
|
|
<script src="jquery_360.js"></script>
|
|
<script src="page.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="info-popup">
|
|
<div id="popup-box" class="max-width">
|
|
<div id="popup-close-btn">X</div>
|
|
<h2>Random Input</h2>
|
|
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
|
|
</div>
|
|
</div>
|
|
<div id="menu-holder">
|
|
<div class="floating-menu">
|
|
<div class="max-width">
|
|
<table id="menu">
|
|
<tr></tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="content max-width">
|
|
<div class="form">
|
|
<div page="main">
|
|
<div class="header">
|
|
<br>
|
|
<div class="control-holder">
|
|
<label for="version">Version</label>
|
|
<span id="versionHeader" class="info medium" pagemenu="settings"></span>
|
|
</div>
|
|
<div class="control-holder">
|
|
<label>Current Time</label>
|
|
<span id="currentTime" class="info medium"></span>
|
|
</div>
|
|
<div class="control-holder temperature-holder">
|
|
<label>Temperature</label>
|
|
<span id="temperature" class="info medium"></span>
|
|
</div>
|
|
<div class="control-holder temperature-holder2">
|
|
<label>Temperature-2</label>
|
|
<span id="temperature2" class="info medium"></span>
|
|
</div>
|
|
<div class="control-holder humidity-holder">
|
|
<label>Humidity</label>
|
|
<span id="humidity" class="info medium"></span>
|
|
</div>
|
|
<div class="control-holder humidity-holder2">
|
|
<label>Humidity-2</label>
|
|
<span id="humidity2" class="info medium"></span>
|
|
</div>
|
|
<div class="control-holder pressure-holder">
|
|
<label>Pressure</label>
|
|
<span id="pressure" class="info medium"></span>
|
|
</div>
|
|
<div class="control-holder lux-holder">
|
|
<label>Illuminance</label>
|
|
<span id="lux" class="info medium"></span>
|
|
</div>
|
|
<div class="control-holder">
|
|
<label>WiFi RSSI dB</label>
|
|
<span id="rssi" class="info medium"></span>
|
|
</div>
|
|
</div>
|
|
<div class="control-holder">
|
|
<label>Alarm</label>
|
|
<input id="alarmEnable" type="checkbox" class="switch">
|
|
<span class="switcher-text left non-selectable" for="alarmEnable">off</span>
|
|
<span class="switcher non-selectable" for="alarmEnable"></span>
|
|
<span class="switcher-text right non-selectable" for="alarmEnable">on</span>
|
|
</div>
|
|
|
|
<div class="control-holder">
|
|
<label for="alarmTime">Alarm Time</label>
|
|
<div class="multiple-input">
|
|
<select id="alarmTimeHours" class="number-select two-digit" min="0" max="23"></select>
|
|
<span>:</span>
|
|
<select id="alarmTimeMinutes" class="number-select two-digit" min="0" max="59" step="1"></select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="control-holder">
|
|
<label for="alarmPeriod">Alarm End (sec)</label>
|
|
<input type="range" min="1" max="240" class="slider" id="alarmPeriod">
|
|
</div>
|
|
<div class="control-holder radar-holder">
|
|
<label>Radar</label>
|
|
<input id="enableRadar" type="checkbox" class="switch">
|
|
<span class="switcher-text left non-selectable" for="enableRadar">off</span>
|
|
<span class="switcher non-selectable" for="enableRadar"></span>
|
|
<span class="switcher-text right non-selectable" for="enableRadar">on</span>
|
|
</div>
|
|
<div class="control-holder radar-holder">
|
|
<label>Radar Timeout (min)</label>
|
|
<input type="range" min="1" max="60" class="slider" id="radarTimeout">
|
|
</div>
|
|
<div class="control-holder lux-holder">
|
|
<label>AutoDimmer</label>
|
|
<input id="enableAutoDim" type="checkbox" class="switch">
|
|
<span class="switcher-text left non-selectable" for="enableAutoDim">off</span>
|
|
<span class="switcher non-selectable" for="enableAutoDim"></span>
|
|
<span class="switcher-text right non-selectable" for="enableAutoDim">on</span>
|
|
</div>
|
|
</div>
|
|
<!-- display settings -->
|
|
<div page="display" class="tube-holder">
|
|
<br>
|
|
<div class="control-holder">
|
|
<label>Manual Override</label>
|
|
<input id="manualOverride" type="checkbox" class="switch two-side">
|
|
<span class="switcher-text left non-selectable" for="manualOverride">DAY</span>
|
|
<span class="switcher non-selectable" for="manualOverride"></span>
|
|
<span class="switcher-text right non-selectable" for="manualOverride">NIGHT</span>
|
|
</div>
|
|
|
|
<div class="control-holder wordclock-holder">
|
|
<label>Display Mode</label>
|
|
<input id="set12_24" type="checkbox" class="switch two-side">
|
|
<span class="switcher-text left non-selectable" for="set12_24">12h</span>
|
|
<span class="switcher non-selectable" for="set12_24"></span>
|
|
<span class="switcher-text right non-selectable" for="set12_24">24h</span>
|
|
</div>
|
|
|
|
<div class="control-holder wordclock-holder">
|
|
<label>Zero Handling</label>
|
|
<input id="showZero" type="checkbox" class="switch">
|
|
<span class="switcher-text left non-selectable" for="showZero">Hide</span>
|
|
<span class="switcher non-selectable" for="showZero"></span>
|
|
<span class="switcher-text right non-selectable" for="showZero">Show</span>
|
|
</div>
|
|
|
|
<div class="control-holder wordclock-holder">
|
|
<label>Blinking Dots</label>
|
|
<input id="enableBlink" type="checkbox" class="switch">
|
|
<span class="switcher-text left non-selectable" for="enableBlink">off</span>
|
|
<span class="switcher non-selectable" for="enableBlink"></span>
|
|
<span class="switcher-text right non-selectable" for="enableBlink">on</span>
|
|
</div>
|
|
<div class="control-holder wordclock-holder">
|
|
<label>Double Blink</label>
|
|
<input id="enableDoubleBlink" type="checkbox" class="switch">
|
|
<span class="switcher-text left non-selectable" for="enableDoubleBlink">off</span>
|
|
<span class="switcher non-selectable" for="enableDoubleBlink"></span>
|
|
<span class="switcher-text right non-selectable" for="enableDoubleBlink">on</span>
|
|
</div>
|
|
<div class="control-holder">
|
|
<label>Time Zone</label>
|
|
<select id="utc_offset" class="number-select" min="-12" max="12" prefix="(UTC " suffix=":00)"></select>
|
|
</div>
|
|
|
|
<div class="control-holder">
|
|
<label title="Daylight saving time">DST</label>
|
|
<input id="enableDST" type="checkbox" class="switch">
|
|
<span class="switcher-text left non-selectable" for="enableDST">off</span>
|
|
<span class="switcher non-selectable" for="enableDST"></span>
|
|
<span class="switcher-text right non-selectable" for="enableDST">on</span>
|
|
</div>
|
|
|
|
<div class="control-holder">
|
|
<label for="animMode">Animation Mode</label>
|
|
<!-- <select id="animMode" class="number-select" min="0" max="6" step="1" prefix="Animation_" suffix=""></select> -->
|
|
<select id="animMode">
|
|
<option value="0">Off</option>
|
|
<option value="1">1 Count Up</option>
|
|
<option value="2">2 Count Down</option>
|
|
<option value="3">3 Shift Right</option>
|
|
<option value="4">4 Shift Left</option>
|
|
<option value="5">5 Transition</option>
|
|
<option value="6">Random 1-5</option>
|
|
<option value="7">Random 1-4</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="control-holder wordclock-holder">
|
|
<label for="interval">Cathode Protect</label>
|
|
<input type="range" min="0" max="60" class="slider" id="interval">
|
|
</div>
|
|
|
|
|
|
<div class="control-holder">
|
|
<label>Auto Day/Night</label>
|
|
<input id="enableAutoShutoff" type="checkbox" class="switch">
|
|
<span class="switcher-text left non-selectable" for="enableAutoShutoff">off</span>
|
|
<span class="switcher non-selectable" for="enableAutoShutoff"></span>
|
|
<span class="switcher-text right non-selectable" for="enableAutoShutoff">on</span>
|
|
</div>
|
|
|
|
<div class="control-holder">
|
|
<label>Day Brightness</label>
|
|
<input type="range" min="1" class="slider" id="dayBright">
|
|
</div>
|
|
<div class="control-holder">
|
|
<label>Night Brightness</label>
|
|
<input type="range" min="0" class="slider" id="nightBright">
|
|
</div>
|
|
|
|
<div class="control-holder">
|
|
<label>Day</label>
|
|
<div class="multiple-input">
|
|
<select id="dayTimeHours" class="number-select two-digit" min="0" max="23"></select>
|
|
<span>:</span>
|
|
<select id="dayTimeMinutes" class="number-select two-digit" min="0" max="59" step="5"></select>
|
|
</div>
|
|
</div>
|
|
<div class="control-holder">
|
|
<label>Night</label>
|
|
<div class="multiple-input">
|
|
<select id="nightTimeHours" class="number-select two-digit" min="0" max="23"></select>
|
|
<span>:</span>
|
|
<select id="nightTimeMinutes" class="number-select two-digit" min="0" max="59" step="5"></select>
|
|
</div>
|
|
</div>
|
|
<div class="control-holder wordclock-holder">
|
|
<label>Display Time/Date</label>
|
|
<input id="enableTimeDisplay" type="checkbox" class="switch">
|
|
<span class="switcher-text left non-selectable" for="enableTimeDisplay">off</span>
|
|
<span class="switcher non-selectable" for="enableTimeDisplay"></span>
|
|
<span class="switcher-text right non-selectable" for="enableTimeDisplay">on</span>
|
|
</div>
|
|
<div class="control-holder">
|
|
<label for="dateMode">Date Format</label>
|
|
<select id="dateMode">
|
|
<option value="0">dd/mm/yyyy</option>
|
|
<option value="1">mm/dd/yyyy</option>
|
|
<option value="2">yyyy/mm/dd</option>
|
|
</select>
|
|
</div>
|
|
<div class="control-holder wordclock-holder">
|
|
<label>Date Repeat (min)</label>
|
|
<input type="range" min="0" max="10" class="slider" id="dateRepeatMin">
|
|
</div>
|
|
<div class="control-holder temperature-holder">
|
|
<label>Temp/H. Repeat (min)</label>
|
|
<input type="range" min="0" max="10" class="slider" id="tempRepeatMin">
|
|
</div>
|
|
<div class="control-holder temperature-holder">
|
|
<label>Temperature Format</label>
|
|
<input id="tempCF" type="checkbox" class="switch two-side">
|
|
<span class="switcher-text left non-selectable" for="tempCF">C</span>
|
|
<span class="switcher non-selectable" for="tempCF"></span>
|
|
<span class="switcher-text right non-selectable" for="tempCF">F</span>
|
|
</div>
|
|
<div class="control-holder wordclock-holder">
|
|
<label>Date seconds</label>
|
|
<div class="multiple-input">
|
|
<select id="dateStart" class="number-select two-digit" min="0" max="59"></select>
|
|
<span>-</span>
|
|
<select id="dateEnd" class="number-select two-digit" min="0" max="59" step="1"></select>
|
|
</div>
|
|
</div>
|
|
<div class="control-holder temperature-holder">
|
|
<label>Temperature seconds</label>
|
|
<div class="multiple-input">
|
|
<select id="tempStart" class="number-select two-digit" min="0" max="59"></select>
|
|
<span>-</span>
|
|
<select id="tempEnd" class="number-select two-digit" min="0" max="59" step="1"></select>
|
|
</div>
|
|
</div>
|
|
<div class="control-holder humidity-holder">
|
|
<label>Humidity seconds</label>
|
|
<div class="multiple-input">
|
|
<select id="humidStart" class="number-select two-digit" min="0" max="59"></select>
|
|
<span>-</span>
|
|
<select id="humidEnd" class="number-select two-digit" min="0" max="59" step="1"></select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- RGB settings -->
|
|
<div page="rgb" class="tube-holder">
|
|
<br>
|
|
<div class="control-holder rgb-holder">
|
|
<label for="rgbEffect">RGB Effect</label>
|
|
<select id="rgbEffect">
|
|
<option value="0">OFF</option>
|
|
<option value="1">Fixed Color</option>
|
|
<option value="2">Rainbow Flow</option>
|
|
<option value="3">Rainbow Stepper</option>
|
|
<option value="4">Color Dimmer</option>
|
|
<option value="5">Color Changer</option>
|
|
<option value="6">Color FlowChanger</option>
|
|
<option value="7">Color FlowChanger Random-1</option>
|
|
<option value="8">Color FlowChanger Random-2</option>
|
|
<option value="9">Color FlowChanger Random-3</option>
|
|
<option value="10">Knight Rider's KITT</option>
|
|
</select>
|
|
</div>
|
|
<div class="control-holder rgb-holder">
|
|
<label>RGB Brightness</label>
|
|
<input type="range" min="8" max="255" class="slider" id="rgbBrightness">
|
|
</div>
|
|
<div class="control-holder">
|
|
<label>Fixed Color</label>
|
|
<div id="color-select-holder">
|
|
<div>
|
|
<input type="range" min="1" max="255" class="slider" id="rgbFixColor">
|
|
</div>
|
|
<div>
|
|
<div id="selectedColor"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="control-holder rgb-holder">
|
|
<label>Direction</label>
|
|
<input id="rgbDir" type="checkbox" class="switch two-side">
|
|
<span class="switcher-text left non-selectable" for="rgbDir">left</span>
|
|
<span class="switcher non-selectable" for="rgbDir"></span>
|
|
<span class="switcher-text right non-selectable" for="rgbDir">right</span>
|
|
</div>
|
|
|
|
<div class="control-holder">
|
|
<label for="rgbSpeed">Animation Speed</label>
|
|
<input type="range" min="1" max="255" class="slider" id="rgbSpeed">
|
|
</div>
|
|
</div>
|
|
<!-- WiFi settings -->
|
|
<div page=wifi>
|
|
<br>
|
|
<div class="control-holder">
|
|
<label>WiFi SSID</label>
|
|
<input type="text" id="wifiSsid">
|
|
</div>
|
|
<div class="control-holder">
|
|
<label>WiFi Password</label>
|
|
<input type="text" id="wifiPsw">
|
|
</div>
|
|
<div class="control-holder">
|
|
<label>AP SSID</label>
|
|
<input type="text" id="ApSsid">
|
|
</div>
|
|
<div class="control-holder">
|
|
<label>AP Password</label>
|
|
<input type="text" id="ApPsw">
|
|
</div>
|
|
<div class="control-holder">
|
|
<label>WiFi Mode</label>
|
|
<input id="wifiMode" type="checkbox" class="switch">
|
|
<span class="switcher-text left non-selectable" for="wifiMode">AP</span>
|
|
<span class="switcher non-selectable" for="wifiMode"></span>
|
|
<span class="switcher-text right non-selectable" for="wifiMode">Client</span>
|
|
</div>
|
|
<div class="control-holder">
|
|
<label>Ntp Server</label>
|
|
<input type="text" id="NtpServer">
|
|
</div>
|
|
<div class="control-holder mqtt-holder">
|
|
<label>MQTT Enable</label>
|
|
<input id="mqttEnable" type="checkbox" class="switch">
|
|
<span class="switcher-text left non-selectable" for="mqttEnable">off</span>
|
|
<span class="switcher non-selectable" for="mqttEnable"></span>
|
|
<span class="switcher-text right non-selectable" for="mqttEnable">on</span>
|
|
</div>
|
|
<div class="control-holder mqtt-holder">
|
|
<label>MQTT Address</label>
|
|
<input type="text" id="mqttBrokerAddr">
|
|
</div>
|
|
<div class="control-holder mqtt-holder">
|
|
<label>MQTT User</label>
|
|
<input type="text" id="mqttBrokerUser">
|
|
</div>
|
|
<div class="control-holder mqtt-holder">
|
|
<label>MQTT Password</label>
|
|
<input type="text" id="mqttBrokerPsw">
|
|
</div>
|
|
<div class="control-holder mqtt-holder">
|
|
<label>MQTT Refresh (sec)</label>
|
|
<input type="range" min="10" max="100" class="slider" id="mqttBrokerRefresh">
|
|
</div>
|
|
</div>
|
|
<div page="settings" hidden="true">
|
|
<br><br>
|
|
<!-- Sensor corrections -->
|
|
<div class="control-holder temperature-holder">
|
|
<label>Temperature#1</label>
|
|
<input type="range" min="-5" max="5" step="0.1" class="slider" id="corrT0">
|
|
</div>
|
|
<div class="control-holder temperature-holder2">
|
|
<label>Temperature#2</label>
|
|
<input type="range" min="-5" max="5" step="0.1" class="slider" id="corrT1">
|
|
</div>
|
|
<div class="control-holder humidity-holder">
|
|
<label>Humidity#1</label>
|
|
<input type="range" min="-25" max="25" step="0.1" class="slider" id="corrH0">
|
|
</div>
|
|
<div class="control-holder humidity-holder2">
|
|
<label>Humidity#2</label>
|
|
<input type="range" min="-25" max="25" step="0.1" class="slider" id="corrH1">
|
|
</div>
|
|
<div class="control-holder wordclock-holder">
|
|
<label>CathodeProtect (minutes)</label>
|
|
<input type="range" min="1" max="60" step="1" class="slider" id="cathProtMin">
|
|
</div>
|
|
<div class="control-holder">
|
|
<label>Firmware Server</label>
|
|
<input type="text" id="firmware">
|
|
</div>
|
|
<br><br><br>
|
|
<div class="control-holder">
|
|
<button id="cath-prot-btn" onclick="areYouSure('cathodeProtect')">Cathode Protect</button>
|
|
<button id="fw-update-btn" onclick="areYouSure('firmwareupdate')">Firmware Update</button>
|
|
<button id="restart-btn" onclick="areYouSure('reset')">Restart</button>
|
|
<button id="factory-reset-btn" onclick="areYouSure('factoryreset')">Factory Reset</button>
|
|
</div>
|
|
<div id="clock-details">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="separator"></div>
|
|
<div class="footer">
|
|
© 2020-22 Peter Gautier<span>-</span><a href="mailto: gautier.p62@gmail.com">gautier.p62@gmail.com</a><br>
|
|
Modified by Claude for the RetroModding NixieIN12v2 clock<span>-</span><a href="https://mangavalk.com/mangavalk/nixie-clock" target="_blank">mangavalk.com/mangavalk/nixie-clock</a><br>
|
|
<div id="version" class="info" pagemenu="settings"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
|
|
</html> |