WLED/wled00/data/settings_ui.htm
cschwinne 30ee42732e Added support for default secondary color saving
Started big rework with seperated settings page, new page design, themes, effect intensity, hue sync...
2018-01-27 23:28:20 +01:00

116 lines
6.0 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>UI Settings</title>
<script>
function gId(s) //abbrev
{
return document.getElementById(s);
}
function GetV()
{
//values injected by server while sending HTML
Ct();
}
function H()
{
window.open("https://github.com/Aircoookie/WLED/wiki/Settings");
}
function B()
{
window.open("/settings","_self");
}
function Ct()
{
if (gId("co").selected)
{
gId("cth").style.display="block";
} else
{
gId("cth").style.display="none";
}
}
</script>
<style>
:root {
--aCol: #D9B310;
--bCol: #0B3C5D;
--cCol: #1D2731;
--dCol: #328CC1;
--sCol: #000;
}
body {
font-family: Verdana, 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;
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) );
}
select {
background: var(--bCol);
color: var(--dCol);
border: 0.5ch solid var(--bCol);
filter: drop-shadow( -5px -5px 5px var(--sCol) );
}
input[type=number] {
width: 3em;
}
.cD {
display:none;
}
</style>
</head>
<body onload="GetV()">
<form id="form_s" name="Sf" action="set-settings" 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">Colorful</option>
<option value="3">Classic</option>
<option value="4" id="co">Custom</option>
</select><br>
<div id="cth" class="cD">
Please specify your custom hex colors (e.g. #00FF0000 for red)<br>
Custom accent color: <input maxlength=9 name="CACOL"><br>
Custom background: <input maxlength=9 name="CBCOL"><br>
Custom panel color: <input maxlength=9 name="CCCOL"><br>
Custom text color: <input maxlength=9 name="CDCOL"><br>
Custom shadow: <input maxlength=9 name="CSCOL"><br>
</div>
<hr><button type="button" onclick="B()">Back</button><button type="submit" name="SUBM">Save</button>
</form>
</body>
</html>