Simple page CSS & JS update.

Added simple UI as a separate page (/simple.htm).

wled00/data/simple.css

@@ -157,7 +157,7 @@ button:hover {
 
 .slider-icon
 {
-	transform: translate(6px,3px);
+	transform: translate(4px,3px);
 	color: var(--c-d);
 }
 
@@ -352,17 +352,17 @@ img {
 
 .sliderwrap {
 	height: 30px;
-	width: 240px;
+	width: 220px;
 	position: relative;
 }
 
 .sliderdisplay {
 	content:'';
 	position: absolute;
-	top: 13px; bottom: 13px;
+	top: 14px; bottom: 12px;
-	left: 10px; right: 10px;
+	left: 4px; right: 4px;
 	background: var(--c-4);
-	border-radius: 17px;
+	border-radius: 4px;
 	pointer-events: none;
 	z-index: -1;
 }
@@ -374,12 +374,13 @@ img {
 	border-radius: 10px;
 	background: var(--c-3);
 	color: var(--c-f);
-	padding: 4px 4px 2px;
+	padding: 4px;
 	font-size: 14px;
 	right: 5px;
 	transition: visibility 0.25s ease, opacity 0.25s ease;
 	opacity: 0;
 	visibility: hidden;
+	margin: 0 0 0 4px;
 }
 
 output.sliderbubbleshow {
@@ -393,9 +394,9 @@ output.sliderbubbleshow {
 
 input[type=range] {
 	-webkit-appearance: none;
-	width: 220px;
+	width: 100%;
-	padding: 0px;
+	padding: 0;
-	margin: 0px 10px 0px 10px;
+	margin: 0;
 	background-color: transparent;
 	cursor: pointer;
 }
@@ -411,7 +412,7 @@ input[type=range]::-webkit-slider-runnable-track {
 input[type=range]::-webkit-slider-thumb {
 	height: 16px;
 	width: 16px;
-	border-radius: 17px;
+	border-radius: 8px;
 	background: var(--c-f);
 	cursor: pointer;
 	-webkit-appearance: none;
@@ -426,7 +427,7 @@ input[type=range]::-moz-range-thumb {
 	border: 0px solid rgba(0, 0, 0, 0);
 	height: 16px;
 	width: 16px;
-	border-radius: 17px;
+	border-radius: 8px;
 	background: var(--c-f);
 	transform: translateY(7px);
 }
@@ -446,6 +447,7 @@ input[type=range]::-moz-range-thumb {
 #picker {
 	margin: 10px auto;
 	width: 260px;
+	display: none;
 }
 
 #rgbwrap {
@@ -577,7 +579,7 @@ input[type=number]::-webkit-outer-spin-button {
 
 .pwr {
 	color: var(--c-6);
-	transform: translate(2px, 3px);
+	/*transform: translate(2px, 3px);*/
 	cursor: pointer;
 }
 
@@ -585,6 +587,87 @@ input[type=number]::-webkit-outer-spin-button {
 	color: var(--c-f);
 }
 
+.check, .radio {
+	display: inline-block;
+	position: relative;
+	cursor: pointer;
+	text-align: center;
+}
+
+.schkl {
+	padding: 2px 2px 2px 16px;
+	margin: 0;
+}
+
+.check input, .radio input {
+	position: absolute;
+	opacity: 0;
+	cursor: pointer;
+	height: 0;
+	width: 0;
+}
+
+.checkmark, .radiomark {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	background-color: var(--c-3);
+	border: 1px solid var(--c-2);
+}
+
+.radiomark {
+	height: 24px;
+	width: 24px;
+	border-radius: 50%;
+}
+
+.checkmark {
+	height: 25px;
+	width: 25px;
+	border-radius: 10px;
+}
+
+.check:hover input ~ .checkmark {
+	background-color: var(--c-4);
+}
+
+.check input:checked ~ .checkmark {
+	background-color: var(--c-6);
+}
+
+.checkmark:after, .radiomark:after {
+	content: "";
+	position: absolute;
+	display: none;
+}
+
+.check input:checked ~ .checkmark:after, .radio input:checked ~ .radiomark:after {
+	display: block;
+}
+
+.check .checkmark:after {
+	left: 9px;
+	top: 5px;
+	width: 5px;
+	height: 10px;
+	border: solid var(--c-f);
+	border-width: 0 3px 3px 0;
+	-webkit-transform: rotate(45deg);
+	-ms-transform: rotate(45deg);
+	transform: rotate(45deg);
+}
+
+.radio .radiomark:after {
+	width: 12px;
+	height: 12px;
+	top: 50%;
+	left: 50%;
+	margin: -6px;
+	border-radius: 50%;
+	background: var(--c-f);
+}
+
 .h {
 	font-size: 13px;
 	color: var(--c-b);

wled00/data/simple.htm

@@ -44,16 +44,6 @@
     <div class="tabcontent">
         <div id="picker" class="center"></div>
 
-        <div id="wwrap" class="center">
-			<p class="label h">White channel</p>
-            <i class="icons slider-icon" id="wht" title="White channel">&#xe333;</i>
-			<div class="sliderwrap il">
-				<input id="sliderW" onchange="setColor(0)" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" />
-				<div class="sliderdisplay"></div>
-			</div>
-            <output class="sliderbubble"></output>
-		</div>
-
         <div id="qcs-w" class="center">
 			<div class="qcs" onclick="pC('#ff0000');" title="Red" style="background-color:#ff0000;"></div>
 			<div class="qcs" onclick="pC('#ffa000');" title="Orange" style="background-color:#ffa000;"></div>
@@ -73,6 +63,16 @@
 			<button class="xxs btn" onclick="selectSlot(2);">3</button>
 		</div>
 
+        <div id="wwrap" class="center">
+			<p class="label h">White channel</p>
+            <i class="icons slider-icon" id="wht" title="White channel">&#xe333;</i>
+			<div class="sliderwrap il">
+				<input id="sliderW" onchange="setColor(0)" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" />
+				<div class="sliderdisplay"></div>
+			</div>
+            <output class="sliderbubble"></output>
+		</div>
+
 		<div id="Segments" class="center">
 			<div id="segcont"></div>
 		</div>

wled00/data/simple.js

@@ -69,9 +69,9 @@ function applyCfg()
 	var bg = cfg.theme.color.bg;
 	if (bg) sCol('--c-1', bg);
 	var ccfg = cfg.comp.colors;
-	gId('picker').style.display = "none"; // ccfg.picker ? "block":"none";
+	//gId('picker').style.display = "none"; // ccfg.picker ? "block":"none";
 	//gId('rgbwrap').style.display = ccfg.rgb ? "block":"none";
-	gId('qcs-w').style.display = "block"; // ccfg.quick ? "block":"none";
+	gId('qcs-w').style.display = ccfg.quick ? "block":"none";
 	var l = cfg.comp.labels; //l = false;
 	var e = d.querySelectorAll('.tab-label');
 	for (var i=0; i<e.length; i++) e[i].style.display = l ? "block":"none";
@@ -556,7 +556,12 @@ function populateSegments(s)
 			cn +=
 `<div class="label h">${(inst.n&&inst.n!=='')?inst.n:('Segment '+y)}</div>
 <div>
-	<i class="icons pwr ${powered[i] ? "act":""}" id="seg${i}pwr" onclick="setSegPwr(${i})" title="${inst.n}">&#xe08f;</i>
+	<label class="check schkl">
+		&nbsp;
+		<input type="checkbox" id="seg${i}sel" onchange="selSeg(${i})" ${inst.sel ? "checked":""}>
+		<span class="checkmark schk"></span>
+	</label>
+	<i class="icons slider-icon pwr ${powered[i] ? "act":""}" id="seg${i}pwr" onclick="setSegPwr(${i})" title="${inst.n}">&#xe08f;</i>
 	<div id="sliderSeg${i}Bri" class="sliderwrap il">
 		<input id="seg${i}bri" class="noslide" onchange="setSegBri(${i})" oninput="updateTrail(this)" max="255" min="1" type="range" value="${inst.bri}" />
 		<div class="sliderdisplay"></div>
@@ -1055,7 +1060,8 @@ function tglBri(b=null)
 
 function tglCP()
 {
-	var p = gId(`picker`).style.display === "block";
+//	var p = gId(`picker`).style.display === "block";
+	var p = gId('buttonCP').className === "active";
 	gId('buttonCP').className = !p ? "active":"";
 	gId('picker').style.display = !p ? "block":"none";
 	var csl = gId(`csl`).style.display === "block";
@@ -1071,6 +1077,13 @@ function tglCs(i)
 	gId(`p${i}o2`).style.display = !pss? "block" : "none";
 }
 
+function selSeg(s)
+{
+	var sel = gId(`seg${s}sel`).checked;
+	var obj = {"seg": {"id": s, "sel": sel}};
+	requestJson(obj);
+}
+
 function tglPalDropdown()
 {
 	var p = gId('palDropdown').style;

wled00/wled_server.cpp

@@ -4,6 +4,9 @@
  * Integrated HTTP web server page declarations
  */
 
+bool handleIfNoneMatchCacheHeader(AsyncWebServerRequest* request);
+void setStaticContentCacheHeaders(AsyncWebServerResponse *response);
+
 //Is this an IP?
 bool isIp(String str) {
   for (size_t i = 0; i < str.length(); i++) {
@@ -164,6 +167,15 @@ void initServer()
                       size_t len, bool final) {handleUpload(request, filename, index, data, len, final);}
   );
 
+  server.on("/simple.htm", HTTP_GET, [](AsyncWebServerRequest *request){
+    if (handleFileRead(request, "/simple.htm")) return;
+    if (handleIfNoneMatchCacheHeader(request)) return;
+    AsyncWebServerResponse *response = request->beginResponse_P(200, "text/html", PAGE_simple, PAGE_simple_L);
+    response->addHeader(F("Content-Encoding"),"gzip");
+    setStaticContentCacheHeaders(response);
+    request->send(response);
+  });
+  
   //if OTA is allowed
   if (!otaLock){
     #ifdef WLED_ENABLE_FS_EDITOR