-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfront_end.h
8 lines (5 loc) · 6.33 KB
/
front_end.h
1
2
3
4
5
6
7
8
#include <Arduino.h>
#ifndef FRONT_END_H
#define FRONT_END_H
String html = "<!DOCTYPE html><html><head><meta charset=utf-8><meta content=\"width=device-width,initial-scale=1\" name=viewport><title></title><style>div,nav *{position:relative}i,nav .a:after,p{position:absolute}input,nav *,select{font-size:15px;background:#fff}nav *,p{text-align:center}body{background:-webkit-linear-gradient(90deg,#485563 10%,#29323c 90%);background:-moz-linear-gradient(90deg,#485563 10%,#29323c 90%);background:-ms-linear-gradient(90deg,#485563 10%,#29323c 90%);background:-o-linear-gradient(90deg,#485563 10%,#29323c 90%);background:linear-gradient(90deg,#485563 10%,#29323c 90%);font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:20px;color:#fff}div{width:100%;margin:0 auto}h1{font-size:32px;margin:10px 0}h2{font-size:24px;margin:5px 0}nav{overflow:hidden;padding:3px;margin:0}nav *{float:left;width:23.5%;height:15px;padding:10px 0;margin:0 0 10px 2%;border-radius:3px;cursor:pointer;color:#000}#cp,input,p,select{width:100%}nav :nth-child(4n+1){margin-left:0}nav .a:after{content:'';display:block;top:-2px;bottom:-2px;left:-2px;right:-2px;border-radius:7px;border:2px solid #7BC3FF}i,p{left:0}#cp{clear:both;display:block;height:200px;cursor:crosshair}.hdn,i{display:none}input,select{display:block;position:relative;margin:0 0 10px;padding:10px;border:none;border-radius:3px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0}input:focus,select:focus{padding:8px;border-radius:3px;border:2px solid #7BC3FF}#settings{cursor:pointer}i{top:0;right:0;bottom:0;background:rgba(0,0,0,.7)}p{top:50%;margin-top:-12px;color:#fff}@media only screen and (min-width:641px){div{width:640px}h1{font-size:48px;margin:30px 0}h2{font-size:36px;margin:10px 0}nav *{height:15px;padding:20px 0;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}nav :hover{background:#eee}nav :active{background:#ddd}nav .a:after{top:-3px;right:-3px;bottom:-3px;left:-3px;border-width:3px}input,select{padding:20px 10px;margin:0 0 20px}input:focus,select:focus{padding:17px 7px;border-width:3px}}</style><body><div><h1></h1><h2>Colors</h2><nav id=c><a id=c0></a> <a id=c1></a> <a id=c2></a> <a id=c3></a> <a id=c4></a> <a id=c5></a> <a id=c6></a> <a id=c7></a></nav><canvas id=cp></canvas><h2>Mode</h2><nav><a id=m0>Static Color</a> <a id=m1>HSV Fade</a> <a id=m2>Speed Up</a> <a id=m3>Brightness Up</a> <a id=m4>Off</a> <a id=m5>Random Fade</a> <a id=m6>Speed Down</a> <a id=m7>Brightness Down </a></nav><h2 id=settings>Settings</h2><form action=/set class=hdn method=post><b>Device name</b> <input name=n> <b>Network type</b><select name=w><option value=1>Access Point<option value=2>Station<option value=3>Open Access Point<option value=4>Open Network Station</select><b>Network SSID</b> <input name=s> <b>Network password</b> <input type=password name=p> <b>Confirm password</b> <input type=password name=c> <input type=submit></form></div><i><p></p></i><script>!function(){function e(e,t){var n=1;if(0==n)t=n=e=t;else{var c=function(e,t,n){return 0>n&&(n+=1),n>1&&--n,1/6>n?e+6*(t-e)*n:.5>n?t:2/3>n?e+(t-e)*(2/3-n)*6:e},o=.5>t?t*(1+n):t+n-t*n,r=2*t-o;t=c(r,o,e+1/3),n=c(r,o,e),e=c(r,o,e-1/3)}return(\"0\"+Number(Math.round(255*t)).toString(16)).slice(-2)+(\"0\"+Number(Math.round(255*n)).toString(16)).slice(-2)+(\"0\"+Number(Math.round(255*e)).toString(16)).slice(-2)}function t(){var e=new XMLHttpRequest;e.onreadystatechange=function(){if(4==e.readyState)if(200===e.status){document.querySelector(\"i\").style.display=\"none\";var t=JSON.parse(e.responseText);document.querySelector(\"title\").innerHTML=t.n,document.querySelector(\"h1\").innerHTML=t.n,m&&(document.querySelector(\"[name=n]\").value=t.n,document.querySelector(\"[name=s]\").value=t.s,document.querySelector(\"[name=w]\").options[t.w-1].selected=\"selected\");for(var n=0;8>n;++n){var c=document.getElementById(\"c\"+n);c.style.background=\"#\"+t.c[n],c.className=n==t.a?\"a\":\"\",c=document.getElementById(\"m\"+n),c.className=n==t.m?\"a\":\"\"}m&&(m=!1)}else document.querySelector(\"i p\").innerHTML=\"Unable to process data from module. Check logs.\",document.querySelector(\"i\").style.display=\"inline-block\",console.log(e.status,e.responseText)},e.open(\"GET\",\"/status\",!0),e.send(null)}function n(e,t){if(h){var n,c;c=l.getBoundingClientRect(),t?(n=e.changedTouches[0].clientX-c.left,c=e.changedTouches[0].clientY-c.top):(n=e.clientX-c.left,c=e.clientY-c.top),a=n/l.clientWidth*360,i=c/l.clientHeight*100,document.querySelector(\"#c .a\").style.background=\"hsl(\"+a+\", 100%, \"+i+\"%)\",e.preventDefault()}}function c(e){return h=!0,y=document.querySelector(\"#c .a\").style.background,n(e),e.preventDefault(),!1}function o(n){if(h){h=null,clearInterval(r);var c=new XMLHttpRequest,o=document.getElementById(\"c\");c.open(\"POST\",\"/set\",!0),c.send(\"c\"+Array.prototype.slice.call(o.children).indexOf(o.querySelector(\".a\"))+\"=\"+e(a/360,i/100)),r=setInterval(t,5e3),n.preventDefault()}}for(var r,l,u,a,i,s,d,m=!0,f=0;8>f;++f)document.getElementById(\"c\"+f).onclick=function(){var e=f;return function(){var t=new XMLHttpRequest;t.open(\"POST\",\"/set\",!0),t.send(\"a=\"+e),this.parentNode.querySelector(\".a\").className=\"\",this.className=\"a\"}}();for(f=0;8>f;++f)document.getElementById(\"m\"+f).onclick=function(){var e=f;return function(){var t=new XMLHttpRequest;t.open(\"POST\",\"/set\",!0),t.send(\"m=\"+e),7!=e&&(this.parentNode.querySelector(\".a\").className=\"\",this.className=\"a\")}}();for(document.querySelector(\"#settings\").onclick=function(){document.querySelector(\"form\").classList.toggle(\"hdn\"),window.location=\"#settings\"},t(),r=setInterval(t,5e3),l=document.getElementById(\"cp\"),u=l.getContext(\"2d\"),l.width=l.clientWidth,l.height=l.clientHeight,d=0;d<=l.clientHeight;++d)for(s=0;s<l.clientWidth;++s)a=s/l.clientWidth*360,i=d/l.clientHeight*100,u.fillStyle=\"hsl(\"+a+\", 100%, \"+i+\"%)\",u.fillRect(s,d,1,1);var y,h=null;l.onmousedown=c,l.onmousemove=n,document.onmouseup=o,l.addEventListener(\"touchstart\",c,!1),l.addEventListener(\"touchmove\",function(e){n(e,!0)},!1),l.addEventListener(\"touchend\",o,!1),l.addEventListener(\"touchcancel\",function(){h=null,document.querySelector(\"#c .a\").style.background=y},!1)}();</script>";
#endif