6ebe889d5e
Improved user interface Added Nightlight user interface page Added Welcome page for new users Added 12 User Interface Themes Added option for custom theme, including font Separated settings page into 6 sub-pages Fixed Favicon not working Fixed Alexa discovery bug Added options to specify receiving brightness/color/effect from notifications Added effect intensity setting. Only experimental use by 3 effects (blink) at the moment Improved speed of Access point availability on initial setup Removed need to reboot after enabling NTP time TODO: IX bug Updating readmes
134 lines
7.3 KiB
HTML
134 lines
7.3 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<title>UI Settings</title>
|
||
<script>
|
||
function gId(s)
|
||
{
|
||
return document.getElementById(s);
|
||
}
|
||
function S()
|
||
{
|
||
GetV();Ct();
|
||
}
|
||
function H()
|
||
{
|
||
window.open("https://github.com/Aircoookie/WLED/wiki/Settings#user-interface-settings");
|
||
}
|
||
function B()
|
||
{
|
||
window.open("/settings","_self");
|
||
}
|
||
function Ct()
|
||
{
|
||
if (gId("co").selected)
|
||
{
|
||
gId("cth").style.display="block";
|
||
} else
|
||
{
|
||
gId("cth").style.display="none";
|
||
}
|
||
}
|
||
function GetV()
|
||
{
|
||
var d = document;
|
||
}
|
||
</script>
|
||
<style>
|
||
:root {
|
||
--aCol: #eee;
|
||
--bCol: #ccc;
|
||
--cCol: #b9b9b9;
|
||
--dCol: #049;
|
||
--sCol: #777;
|
||
--cFn: Verdana;
|
||
}
|
||
body {
|
||
font-family: var(--cFn), Helvetica, sans-serif;
|
||
text-align: center;
|
||
background: var(--cCol);
|
||
color: var(--dCol);
|
||
line-height: 200%;
|
||
margin: 0;
|
||
background-attachment: fixed;
|
||
}
|
||
hr {
|
||
border-color: var(--dCol);
|
||
filter: drop-shadow( -5px -5px 5px var(--sCol) );
|
||
}
|
||
button {
|
||
background: var(--bCol);
|
||
color: var(--dCol);
|
||
border: 0.3ch solid var(--bCol);
|
||
display: inline-block;
|
||
font-family: var(--cFn), Helvetica, sans-serif;
|
||
filter: drop-shadow( -5px -5px 5px var(--sCol) );
|
||
font-size: 20px;
|
||
margin: 8px;
|
||
margin-top: 12px;
|
||
}
|
||
.helpB {
|
||
text-align: left;
|
||
position: absolute;
|
||
width:60px;
|
||
}
|
||
input {
|
||
background: var(--bCol);
|
||
color: var(--dCol);
|
||
border: 0.5ch solid var(--bCol);
|
||
filter: drop-shadow( -5px -5px 5px var(--sCol) );
|
||
font-family: var(--cFn), Helvetica, sans-serif;
|
||
}
|
||
select {
|
||
background: var(--bCol);
|
||
color: var(--dCol);
|
||
border: 0.5ch solid var(--bCol);
|
||
filter: drop-shadow( -5px -5px 5px var(--sCol) );
|
||
font-family: var(--cFn), Helvetica, sans-serif;
|
||
}
|
||
input[type=number] {
|
||
width: 3em;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body onload="S()">
|
||
<form id="form_s" name="Sf" method="post">
|
||
<div class="helpB"><button type="button" onclick="H()">?</button></div>
|
||
<button type="button" onclick="B()">Back</button><button type="submit" name="SUBM">Save</button><hr>
|
||
<h2>Web Setup</h2>
|
||
Server description: <input name="DESC" maxlength="32"><br>
|
||
Use HSB sliders instead of RGB by default: <input type="checkbox" name="COLMD"><br>
|
||
Color Theme:
|
||
<select name="THEME" onchange="Ct()">
|
||
<option value="0" selected>Night</option>
|
||
<option value="1">Modern</option>
|
||
<option value="2">Bright</option>
|
||
<option value="3">Wine</option>
|
||
<option value="4">Electric</option>
|
||
<option value="5">Mint</option>
|
||
<option value="6">Amber</option>
|
||
<option value="7">Club</option>
|
||
<option value="8">Air</option>
|
||
<option value="9">Nixie</option>
|
||
<option value="10">Terminal</option>
|
||
<option value="11">Placeholder</option>
|
||
<option value="12">Placeholder</option>
|
||
<option value="13">Placeholder</option>
|
||
<option value="14">The End</option>
|
||
<option value="15" id="co">Custom</option>
|
||
</select><br>
|
||
<div id="cth">
|
||
Please specify your custom hex colors (e.g. FF0000 for red)<br>
|
||
Custom accent color: <input maxlength=9 name="CCOL0"><br>
|
||
Custom background: <input maxlength=9 name="CCOL1"><br>
|
||
Custom panel color: <input maxlength=9 name="CCOL2"><br>
|
||
Custom icon color: <input maxlength=9 name="CCOL3"><br>
|
||
Custom shadow: <input maxlength=9 name="CCOL4"><br>
|
||
Custom text color: <input maxlength=9 name="CCOL5"><br>
|
||
</div>
|
||
Use font: <input maxlength=32 name="CFONT"><br>
|
||
Make sure the font you use is installed on your system!<br>
|
||
<hr><button type="button" onclick="B()">Back</button><button type="submit" name="SUBM">Save</button>
|
||
</form>
|
||
</body>
|
||
</html> |