rayanfer32/thingspeak_demo_fiabilte.html

## thingspeak_demo_fiabilte.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Home</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>

</head>
<body>
    <div class="Main_head"
        <h1 id="Main_head">LIGHTS  </h1>
    </div>
    <div class="Control_Section">
        <h2>Lights Control</h2>
        <div class="button">
            <span>
                    <!-- https://api.thingspeak.com/update?api_key=FUEVXY43JRV45FHR&field1=0 -->
                <button id="ON" onclick="onState('FUEVXY43JRV45FHR', 1, 1)">ON</button> <!-- api, field Number, value -->
                <button id="OFF" onclick="offState('FUEVXY43JRV45FHR', 1, 0)">OFF</button> <!-- api, field Number, value -->
                <script>
                    function onState(api, field, value) {
                        $.post('https://api.thingspeak.com/update?api_key=' + api + '&field' + field + '=' + value);
                        console.log("HIGH");
                        alert("wait 15 secs");
                    }

                    function offState(api, field, value) {
                        $.post('https://api.thingspeak.com/update?api_key=' + api + '&field' + field + '=' + value);
                        console.log("LOW");alert("wait 15 secs");

                    }
                    function disabler(){
                        var btns=document.getElementsByClassName("button");


                    }
                    function readState(){
                        var status;
                        // https://api.thingspeak.com/channels/266256/fields/2/last.json
                    $.getJSON("https://api.thingspeak.com/channels/832714/fields/1/last.json?api_key=I4HQ6KLWWLUNZWCJ",function(data){
                        if(data.field1==1){status = "are on"}else{status = "are off";}
                        document.getElementById("Main_head").innerHTML="lights "+status
                        console.log(data.field1);
                    });
                    }
                    setInterval(readState,2000);
                </script>
            </span>
        </div>
    </div>
    <script src="https://gist.github.com/Rayanfer32/224ef2dd05eb7170d8d9ad9687d01653.js"></script>
</body>

<style>
        @import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
        @import url('https://fonts.googleapis.com/css?family=Viga');
body {
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: Roboto Slab, Viga, sans-serif;
	background-image: linear-gradient(to right, #319301 , #aa52c5);
	background-attachment: fixed;
}

.Main_head {
	position: relative;
	text-align: center;
	margin-top: 50px;
	font-size: 50px;
	color:#ffffff;
	font-weight: 600;
	letter-spacing: 1vh;
}

.Control_Section {
	z-index: -1;
	background-color: #dbdbdb79;
	margin: 10%;
	margin-top: 20px;
	border: 10px ;
  	padding: 10px;
	box-shadow: 5px 0px 100px 0px #dfdfdf79;
	color: #ffffff;
	border-radius: 100px;
}

.Control_Section h2 {
	margin: auto;
	text-align: center;
  	width: 100%;
	padding: 20px;
	letter-spacing: 2px;
	font-weight: bold;
}

span {
	display: inline;
}

.button{
	z-index: 1;
	text-align: center;
	opacity: 100px;
}

#ON {
	padding: 20px 20px;
	margin: 40px;
	background-color: #1eb40079;
	color: #ffffff;
	cursor: pointer;
	font-family: Viga;
	font-size: 40px;
	border: 5px solid #1eb40079;
	transition: 0.5s;
	border-radius: 100px;
}

#OFF {
	padding: 20px 20px;
	margin: 30px;
	background-color: #b4000079;
	color: #ffffff;
	cursor: pointer;
	font-family: Viga;
	font-size: 40px;
	border: 5px solid #b4000079;
	transition: 0.5s;
	border-radius: 100px;
}

#ON:hover {
	color: #1eb400;
	background-color: #dfffe7;
}

#OFF:hover {
	color: #b40000;
	background-color: #ffecec;
}


div #alert {
	display: none;
	z-index: 1;
	text-align: center;
	font-size: 30px;
	font-weight: bold;
}

#time {
	font-size: 50px;
	font-weight: bold;
	letter-spacing: 10px;
	color: red;
}
    </style>

</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Home</title>
	<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>

	</head>
	<body>
	<div class="Main_head"
	<h1 id="Main_head">LIGHTS </h1>
	</div>
	<div class="Control_Section">
	<h2>Lights Control</h2>
	<div class="button">
	<span>
	<!-- https://api.thingspeak.com/update?api_key=FUEVXY43JRV45FHR&field1=0 -->
	<button id="ON" onclick="onState('FUEVXY43JRV45FHR', 1, 1)">ON</button> <!-- api, field Number, value -->
	<button id="OFF" onclick="offState('FUEVXY43JRV45FHR', 1, 0)">OFF</button> <!-- api, field Number, value -->
	<script>
	function onState(api, field, value) {
	$.post('https://api.thingspeak.com/update?api_key=' + api + '&field' + field + '=' + value);
	console.log("HIGH");
	alert("wait 15 secs");
	}

	function offState(api, field, value) {
	$.post('https://api.thingspeak.com/update?api_key=' + api + '&field' + field + '=' + value);
	console.log("LOW");alert("wait 15 secs");

	}
	function disabler(){
	var btns=document.getElementsByClassName("button");


	}
	function readState(){
	var status;
	// https://api.thingspeak.com/channels/266256/fields/2/last.json
	$.getJSON("https://api.thingspeak.com/channels/832714/fields/1/last.json?api_key=I4HQ6KLWWLUNZWCJ",function(data){
	if(data.field1==1){status = "are on"}else{status = "are off";}
	document.getElementById("Main_head").innerHTML="lights "+status
	console.log(data.field1);
	});
	}
	setInterval(readState,2000);
	</script>
	</span>
	</div>
	</div>
	<script src="https://gist.github.com/Rayanfer32/224ef2dd05eb7170d8d9ad9687d01653.js"></script>
	</body>

	<style>
	@import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
	@import url('https://fonts.googleapis.com/css?family=Viga');
	body {
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: Roboto Slab, Viga, sans-serif;
	background-image: linear-gradient(to right, #319301 , #aa52c5);
	background-attachment: fixed;
	}

	.Main_head {
	position: relative;
	text-align: center;
	margin-top: 50px;
	font-size: 50px;
	color:#ffffff;
	font-weight: 600;
	letter-spacing: 1vh;
	}

	.Control_Section {
	z-index: -1;
	background-color: #dbdbdb79;
	margin: 10%;
	margin-top: 20px;
	border: 10px ;
	padding: 10px;
	box-shadow: 5px 0px 100px 0px #dfdfdf79;
	color: #ffffff;
	border-radius: 100px;
	}

	.Control_Section h2 {
	margin: auto;
	text-align: center;
	width: 100%;
	padding: 20px;
	letter-spacing: 2px;
	font-weight: bold;
	}

	span {
	display: inline;
	}

	.button{
	z-index: 1;
	text-align: center;
	opacity: 100px;
	}

	#ON {
	padding: 20px 20px;
	margin: 40px;
	background-color: #1eb40079;
	color: #ffffff;
	cursor: pointer;
	font-family: Viga;
	font-size: 40px;
	border: 5px solid #1eb40079;
	transition: 0.5s;
	border-radius: 100px;
	}

	#OFF {
	padding: 20px 20px;
	margin: 30px;
	background-color: #b4000079;
	color: #ffffff;
	cursor: pointer;
	font-family: Viga;
	font-size: 40px;
	border: 5px solid #b4000079;
	transition: 0.5s;
	border-radius: 100px;
	}

	#ON:hover {
	color: #1eb400;
	background-color: #dfffe7;
	}

	#OFF:hover {
	color: #b40000;
	background-color: #ffecec;
	}


	div #alert {
	display: none;
	z-index: 1;
	text-align: center;
	font-size: 30px;
	font-weight: bold;
	}

	#time {
	font-size: 50px;
	font-weight: bold;
	letter-spacing: 10px;
	color: red;
	}
	</style>

	</html>