<!DOCTYPE HTML>
<html>
<title>LED WEB AUTOMATION</title>
  <head>
    <meta charset="utf-8">
  </head>
<body><h1>LED WEB AUTOMATION</h1>
<h2>Windows 10 IoT: progetto Python con Raspberry Pi 2</h2>
<h3>Accensione e spegnimento di quattro LED da web</h3>
<h4>©2015 Pier Calderan</h4>
<style>
body {
	font-family: sans-serif;
	font-weight: normal;
	margin: 10px;
	color: #555;
	background-color: #eee;
}

form
{
	margin: 40px 0;
}

div
{
	clear: both;
	margin: 0 50px;
}

input.switch:empty
{
	margin-left: -999px;
}
input.switch:empty ~ label
{
position: relative;
float: left;
line-height: 1.6em;
text-indent: 4em;
margin: 0.2em 0;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

input.switch:empty ~ label:before, input.switch:empty ~ label:after
{
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
content: ' ';
width: 3.6em;
background-color: #ccc;
border-radius: 0.3em;
box-shadow: inset 0 0.2em 0 rgba(0,0,0,0.3);
-webkit-transition: all 100ms ease-in;
transition: all 100ms ease-in;
}

input.switch:empty ~ label:after
{
	width: 1.4em;
	top: 0.1em;
	bottom: 0.1em;
	margin-left: 0.1em;
	background-color: #fff;
	border-radius: 0.15em;
	box-shadow: inset 0 -0.2em 0 rgba(0,0,0,0.2);
}

input.switch:checked ~ label:before
{
	background-color: #c33;
}

input.switch:checked ~ label:after
{
	margin-left: 2.1em;
}

input.switch2:empty
{
	margin-left: -999px;
}

input.switch2:empty ~ label
{
	position: relative;
	float: left;
	line-height: 1.6em;
	text-indent: 4em;
	margin: 0.2em 0;
	cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

input.switch2:empty ~ label:before, input.switch2:empty ~ label:after
{
	position: absolute;
	display: block;
	top: 0;
	bottom: 0;
	left: 0;
	content: ' ';
	width: 1.8em;
	background-color: #000;
	border-radius: 0.3em;
	box-shadow: inset 0 0.2em 0 rgba(0,0,0,0.3);
	-webkit-transition: all 100ms ease-in;
  transition: all 100ms ease-in;
}

input.switch2:empty ~ label:after
{
	width: 1.4em;
	top: 0.1em;
	bottom: 0.1em;
	margin-left: 0.1em;
	background-color: #fff;
	border-radius: 0.15em;
	box-shadow: inset 0 -0.2em 0 rgba(0,0,0,0.2);
}

input.switch2:checked ~ label:after
{
	margin-left: 0.1em;
}
a{text-decoration:none;} 
</style>

<body onload="check()">

<form  action="" method="get">
<div>
<input type="checkbox" id="switch1" name="id" value="1" class="switch" OnClick="fun(1)"/>
<label for="switch1">LED 1</label>
</div>
<div>	
<input type="checkbox" id="switch2" name="id" value="2" class="switch" OnClick="fun(2)"/>
<label for="switch2">LED 2</label>
</div>
<div>	
<input type="checkbox" id="switch3" name="id" value="3" class="switch" OnClick="fun(3)"/>
<label for="switch3">LED 3</label>
</div>
<div>	
<input type="checkbox" id="switch4" name="id" value="4" class="switch" OnClick="fun(4)"/>
<label for="switch4">LED 4</label>
</div>
<br><br>
<div>	
<input type="submit" value="Invia"/>
</div>
</form>
<br> <br>

<div id="textDiv"></div>

<script>
function check()
{
var text = document.getElementById("textDiv");

for (var t=1;t<5;t++)
{
var swit="switch"+t;
var dox = document.getElementById(swit);
var x1 = docCookies.getItem(t);

if(x1=="false") dox.checked=false;
if(x1=="true") dox.checked=true;
}
}

function fun(str)
{
 if (str>0)
{
	var swit="switch"+str;
	var check=document.getElementById(swit);
	docCookies.setItem(str, check.checked);
}
 if (str==0)
{
	for (var t=1;t<5;t++)
	{
	var swit="switch"+t;
	document.getElementById(swit).checked.checked=false;
	docCookies.setItem(t, "false");
	}
}
}
</script>


<script>
docCookies = {
  getItem: function (sKey) {
    if (!sKey || !this.hasItem(sKey)) { return null; }
    return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1"));
  },

  setItem: function (sKey, sValue, vEnd, sPath, sDomain, bSecure) {
    if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/.test(sKey)) { return; }
    var sExpires = "";
    if (vEnd) {
      switch (typeof vEnd) {
        case "number": sExpires = "; max-age=" + vEnd; break;
        case "string": sExpires = "; expires=" + vEnd; break;
        case "object": if (vEnd.hasOwnProperty("toGMTString")) { sExpires = "; expires=" + vEnd.toGMTString(); } break;
      }
    }
    document.cookie = escape(sKey) + "=" + escape(sValue) + sExpires + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "") + (bSecure ? "; secure" : "");
  },
  removeItem: function (sKey) {
    if (!sKey || !this.hasItem(sKey)) { return; }
    var oExpDate = new Date();
    oExpDate.setDate(oExpDate.getDate() - 1);
    document.cookie = escape(sKey) + "=; expires=" + oExpDate.toGMTString() + "; path=/";
  },
  hasItem: function (sKey) { return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie); }
};
</script>

</body>
</html>