Website Codes Form 1 HTML CSS
Uploaded by
Kim OliverWebsite Codes Form 1 HTML CSS
Uploaded by
Kim OliverWEBSITE CODES </div>
</div>
FORM 1 </body>
</html>
HTML:
CSS:
<!DOCTYPE html>
<html> body
<head> {
<meta charset="utf-8"> margin: 0px;
<meta name="viewport" content="width=device- padding: 0px;
width, initial-scale=1.0"> background: #262626;
<link rel="stylesheet" type="text/css" border: 2px;
href="index.css"> }
<title>LOGIN FORM</title> h1{
<link rel="icon" href="login.jpg"> color: white;
</head> text-align: center;
font-size: 138460px;
<body> }
<div class="whole"> .CU1{
position: absolute;
<div class="insidediv1"> top: -43%;
<div class="div1"> left: 40%;
<img src="client.jpg" id="image2" alt="client"> }
<div class="pad1"><b><p .CU2{
class="CU1">CLIENT</p></b></div> position: absolute;
<ul id="ul2"><a top: -43%;
href="client.html"><li><b>LOGIN</b></li></a></ul left: 25%;
> }
</div> .CU3{
</div> position: absolute;
top: -43%;
<div class="insidediv2"> left: 37%;
<div class="div2"> }
<div class="col-md-4"> #ul2 {
<img src="admin.jpg" id="image1" list-style: none;
alt="administrator"> text-align: center;
</div> }
<div class="pad2"><b><p #ul2 li {
class="CU2">ADMINISTRATOR</p></b></div> position: absolute;
<ul id="ul3"><a top: 80%;
href="login.html"><li><b>LOGIN</b></li></a></ul> left: 35%;
</div> font-size: 25px;
</div> float: left;
background: #f08080;
<div class="div3"> margin-left: 50px;
<img src="members.png" id="image3" width: 150px;
alt="members"> padding: 20px;
<div class="pad3"><b><p class="CU3">ABOUT text-align: center;
US</p></b></div> }
<ul id="ul1"><a .font li{
href="members.html"><li font-size: 100px;
class="see1"><b>SEE</b></li></a></ul>
65
} background: green;
#ul2 a { color: white;
color: black; }
text-align: center; #ul1 {
} list-style: none;
#ul2 li:hover { text-align: center;
background: green; }
color: white;
}
#ul3 { .whole{
list-style: none; position: absolute;
text-align: center; top: 50%;
} left: 50%;
#ul3 a { text-align: center;
color: black; transform: translate(-50%, -50%);
} width: 2546px;
#ul3 li:hover { height: 5000px;
background: green; background: #262626;
color: white; }
} .div1{
#ul3 li { position: absolute;
position: absolute; top: 55%;
top: 80.5%; left: 50%;
left: 34.5%; text-align: center;
font-size: 25px; transform: translate(-50%, -50%);
float: left; width: 950px;
background: skyblue; height: 600px;;
margin-left: 50px; border: 6px solid cyan;
width: 150px; border-top: 5px solid cyan;
padding: 20px; border-bottom: 5px solid cyan;
text-align: center; border-radius: 15px;
} border-top-left-radius: 6px;
border-top-right-radius: 5px;
#ul1 li { box-shadow: 0 0 0 0, 0 20px 35px
position: absolute; rgba(0,0,0,1);
top: 81%; background: #fff;
left: 35%; }
font-size: 25px; .div2{
float: left; position: absolute;
background: aqua; top: 39%;
margin-left: 50px; left: 50%;
width: 150px; padding-top: 5px red;
padding: 20px; text-align: center;
text-align: center; transform: translate(-50%, -50%);
} width: 950px;
#ul1 { height: 600px;
list-style: none; background: #fff;
text-align: center; border: 6px solid cyan;
} border-top: 5px solid cyan;
#ul1 a { border-bottom: 5px solid cyan;
color: black; border-radius: 15px;
} border-top-left-radius: 6px;
#ul1 li:hover { border-top-right-radius: 5px;
66
box-shadow: 0 0 0 0, 0 20px 35px color: white;
rgba(0,0,0,1); }
} .pad3{
.div3{ position: absolute;
position: absolute; top: 5%;
top: 71%; left: 50%;
left: 50%; text-align: center;
text-align: center; transform: translate(-50%, -50%);
transform: translate(-50%, -50%); width: 950px;
width: 950px; height: 100px;
height: 600px; background: #228b22;
background: #fff; border: 6px solid cyan;
border: 6px solid cyan; border-top: 5px solid cyan;
border-top: 5px solid cyan; border-bottom: transparent;
border-bottom: 5px solid cyan; border-top-left-radius: 6px;
border-radius: 15px; border-top-right-radius: 5px;
border-top-left-radius: 6px; font-size: 60px;
border-top-right-radius: 5px; color: white;
box-shadow: 0 0 0 0, 0 20px 35px }
rgba(0,0,0,1); #image1{
} position: absolute;
.pad1{ top: 48.5%;
position: absolute; left: 50.3%;
top: 5%; transform: translate(-50%, -50%);
left: 50%; width: 385px;
text-align: center; height: 400px;
transform: translate(-50%, -50%); }
width: 950px; #image2{
height: 100px; position: absolute;
background: red; top: 48%;
border: 6px solid cyan; left: 50.3%;
border-top: 5px solid cyan; transform: translate(-50%, -50%);
border-bottom: transparent; width: 410px;
border-top-left-radius: 6px; height: 430px;
border-top-right-radius: 5px; }
font-size: 60px;
color: white; #image3{
} position: absolute;
.pad2{ top: 48.5%;
position: absolute; left: 50.3%;
top: 5%; transform: translate(-50%, -50%);
left: 50%; width: 490px;
text-align: center; height: 385px;
transform: translate(-50%, -50%);
width: 950px; }
height: 100px; @media screen and (max-width:375px){
background: #008080; .whole{
border: 6px solid cyan; width: auto;
border-top: 5px solid cyan; }
border-bottom: transparent; .div1{
border-top-left-radius: 6px; position: absolute;
border-top-right-radius: 5px; width: 250px;
font-size: 60px; height: 250px;
67
top: 58%; }
left: auto; #ul1 li{
} width: 70px;
.div2{ height: 5px;
position: absolute; left: 9%;
width: 250px; top: 79%;
height: 250px; font-size: 10px;
top: 50%; text-align: center;
left: auto; }
} #ul3{
.div3{ left: -10%;
position: absolute; }
width: 250px; #ul1{
height: 250px; width: 50px;
top: 66%; height: 40px;
left: auto; }
} .pad1{
.h1{ width: 250px;
font-size: 20px; height: 40px;
} }
.CU1{ .pad2{
position: absolute; width: 250px;
font-size: 20px; height: 40px;
left: 35%; }
top: -30%; .pad3{
} width: 250px;
.CU2{ height: 40px;
position: absolute; }
font-size: 20px; #image1{
left: 19%; width: 150px;
top: -30%; height: 150px;
} }
.CU3{ #image2{
position: absolute; width: 150px;
font-size: 20px; height: 150px;
left: 33%; }
top: -30%; #image3{
} width: 145px;
#ul2 li{ height: 120px;
width: 70px; }
height: 5px; }
left: 9%;
top: 79%; FORM 2
font-size: 10px; HTML:
text-align: center;
} <!DOCTYPE html>
#ul3 li{ <html>
width: 70px; <head>
height: 5px; <meta charset="utf-8">
left: 9%; <meta name="viewport"
top: 79%; content="width=device-width, initial-scale=1.0"/>
font-size: 10px; <title>LOGGED IN AS
text-align: center; ADMINISTRATOR</title>
68
<script <div id="p3"></div>
src="https://www.gstatic.com/firebasejs/5.9.0/fire <div id="p4"></div>
base.js"></script> <div id="p5"></div>
<script <div id="p6"></div>
src="https://code.jquery.com/jquery-3.3.1.js" <div id="p7"></div>
integrity="sha256- <div id="p8"></div>
2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH <div id="p9"></div>
60=" crossorigin="anonymous"></script> <div id="p10"></div>
<link rel="stylesheet" href="water.css"> <div id="p11"></div>
<script src="water.js"></script> <div id="p12"></div>
<script type="text/javascript" src="jquery- <div id="p13"></div>
1.min.js"></script> <div id="p14"></div>
<script type="text/javascript"> <div id="p15"></div>
$(document).ready(function(){ <div id="p16"></div>
//waits the document to load <div id="p17"></div>
alert("THIS IS THE WATER <div id="p18"></div>
MONITORING SYTEM"); <div id="p19"></div>
}); <div id="p20"></div>
</script> <div id="p21"></div>
<link rel="icon" href="administrator.png"> <div id="p22"></div>
</head> <div id="p23"></div>
<body> <div id="p24"></div>
<div id="p25"></div>
<div class="all"> <div id="p26"></div>
<ul id="ul3"> <div id="p27"></div>
<a href="client.html"><li>CLIENT</li></a> <div id="p28"></div>
</ul> <div id="p29"></div>
<p class="gotoclient">GO TO:</p> <div id="p30"></div>
<div id="p31"></div>
<div id="p32"></div>
<ul id="ul4"> <div id="p33"></div>
<a <div id="p34"></div>
href="https://console.firebase.google.com/project <div id="p35"></div>
/thesis-5f846/database/thesis- <div id="p36"></div>
5f846/data"><li>FIREBASE</li></a> <div id="p37"></div>
</ul> <div id="p38"></div>
<p class="gotofirebase">GO TO:</p> <div id="p39"></div>
<div id="p40"></div>
<p class="head">IOT-BASED MULTI-LINKED WATER <div id="p41"></div>
DISPENSER MONITORING SYSTEM</p> <div id="p42"></div>
<p class="foot">All Rights Reserved S.Y 2018- <div id="p43"></div>
2019<br>Thesis is Life</p> <div id="p44"></div>
<div id="p45"></div>
<div class="div1"> <div id="p46"></div>
<p class="wd1">WATER DISPENSER 1</p> <div id="p47"></div>
<p class="dispenserstatus1">WATER <div id="p48"></div>
DISPENSER IS OFF</p> <div id="p49"></div>
<div class="indicator1"><p <div id="p50"></div>
class="waterleft1">Water Dispenser Full @20,000 <div id="p51"></div>
ml</p></div> <div id="p52"></div>
<div class="tank1"> <div id="p53"></div>
<div id="p1"></div> <div id="p54"></div>
<div id="p2"></div> <div id="p55"></div>
69
<div id="p56"></div> <div id="t16"></div>
<div id="p57"></div> <div id="t17"></div>
<div id="p58"></div> <div id="t18"></div>
<div id="p59"></div> <div id="t19"></div>
<div id="p60"></div> <div id="t20"></div>
<div id="p61"></div> <div id="t21"></div>
<div id="p62"></div> <div id="t22"></div>
<div id="p63"></div> <div id="t23"></div>
<div id="p64"></div> <div id="t24"></div>
<div id="p65"></div> <div id="t25"></div>
<div id="p66"></div> <div id="t26"></div>
<div id="p67"></div> <div id="t27"></div>
<div id="p68"></div> <div id="t28"></div>
<div id="p69"></div> <div id="t29"></div>
<div id="p70"></div> <div id="t30"></div>
<div id="p71"></div> <div id="t31"></div>
<div id="p72"></div> <div id="t32"></div>
<div id="p73"></div> <div id="t33"></div>
<div id="p74"></div> <div id="t34"></div>
<div id="p75"></div> <div id="t35"></div>
<div id="p76"></div> <div id="t36"></div>
<div id="p77"></div> <div id="t37"></div>
<div id="p78"></div> <div id="t38"></div>
<div id="p79"></div> <div id="t39"></div>
<div id="p80"></div> <div id="t40"></div>
</div> <div id="t41"></div>
</div> <div id="t42"></div>
<div id="t43"></div>
<div class="div2"> <div id="t44"></div>
<p class="wd2">WATER <div id="t45"></div>
DISPENSER 2</p> <div id="t46"></div>
<div class="indicator2"><p <div id="t47"></div>
class="waterleft2">Water Dispenser Full @20,000 <div id="t48"></div>
ml</p></div> <div id="t49"></div>
<p <div id="t50"></div>
class="dispenserstatus2">WATER DISPENSER IS <div id="t51"></div>
OFF</p> <div id="t52"></div>
<div class="tank2"> <div id="t53"></div>
<div id="t1"></div> <div id="t54"></div>
<div id="t2"></div> <div id="t55"></div>
<div id="t3"></div> <div id="t56"></div>
<div id="t4"></div> <div id="t57"></div>
<div id="t5"></div> <div id="t58"></div>
<div id="t6"></div> <div id="t59"></div>
<div id="t7"></div> <div id="t60"></div>
<div id="t8"></div> <div id="t61"></div>
<div id="t9"></div> <div id="t62"></div>
<div id="t10"></div> <div id="t63"></div>
<div id="t11"></div> <div id="t64"></div>
<div id="t12"></div> <div id="t65"></div>
<div id="t13"></div> <div id="t66"></div>
<div id="t14"></div> <div id="t67"></div>
<div id="t15"></div> <div id="t68"></div>
70
<div id="t69"></div> <div id="a29"></div>
<div id="t70"></div> <div id="a30"></div>
<div id="t71"></div> <div id="a31"></div>
<div id="t72"></div> <div id="a32"></div>
<div id="t73"></div> <div id="a33"></div>
<div id="t74"></div> <div id="a34"></div>
<div id="t75"></div> <div id="a35"></div>
<div id="t76"></div> <div id="a36"></div>
<div id="t77"></div> <div id="a37"></div>
<div id="t78"></div> <div id="a38"></div>
<div id="t79"></div> <div id="a39"></div>
<div id="t80"></div> <div id="a40"></div>
</div> <div id="a41"></div>
</div> <div id="a42"></div>
<div id="a43"></div>
<div class="div3"> <div id="a44"></div>
<p class="wd3">WATER <div id="a45"></div>
DISPENSER 3</p> <div id="a46"></div>
<div class="indicator3"><p <div id="a47"></div>
class="waterleft3">Water Dispenser Full @20,000 <div id="a48"></div>
ml</p></div> <div id="a49"></div>
<p <div id="a50"></div>
class="dispenserstatus3">WATER DISPENSER IS <div id="a51"></div>
OFF</p> <div id="a52"></div>
<div class="tank3"> <div id="a53"></div>
<div id="a1"></div> <div id="a54"></div>
<div id="a2"></div> <div id="a55"></div>
<div id="a3"></div> <div id="a56"></div>
<div id="a4"></div> <div id="a57"></div>
<div id="a5"></div> <div id="a58"></div>
<div id="a6"></div> <div id="a59"></div>
<div id="a7"></div> <div id="a60"></div>
<div id="a8"></div> <div id="a61"></div>
<div id="a9"></div> <div id="a62"></div>
<div id="a10"></div> <div id="a63"></div>
<div id="a11"></div> <div id="a64"></div>
<div id="a12"></div> <div id="a65"></div>
<div id="a13"></div> <div id="a66"></div>
<div id="a14"></div> <div id="a67"></div>
<div id="a15"></div> <div id="a68"></div>
<div id="a16"></div> <div id="a69"></div>
<div id="a17"></div> <div id="a70"></div>
<div id="a18"></div> <div id="a71"></div>
<div id="a19"></div> <div id="a72"></div>
<div id="a20"></div> <div id="a73"></div>
<div id="a21"></div> <div id="a74"></div>
<div id="a22"></div> <div id="a75"></div>
<div id="a23"></div> <div id="a76"></div>
<div id="a24"></div> <div id="a77"></div>
<div id="a25"></div> <div id="a78"></div>
<div id="a26"></div> <div id="a79"></div>
<div id="a27"></div> <div id="a80"></div>
<div id="a28"></div> </div>
71
</div> position: absolute;
<hr id="hr"> top: 28%;
</div> left: 40%;
</body> color: white;
</html> font-size: 28px;
}
CSS: .wd3{
position: absolute;
body top: 28%;
{ left: 73%;
background: #262626; color: white;
height: 100%; font-size: 28px;
width: 100%;
} }
.gotoclient{ .waterleft1{
position: absolute; position: absolute;
color: red; top: 20%;
font-size: 40px; left: 5%;
top: 14.5%; color: white;
left: 11%; font-size: 28px;
} }
.gotofirebase{
position: absolute; .indicator1{ /*Waterleft1 indicator*/
color: yellow; position: absolute;
font-size: 40px; top: 75%;
top: 14.5%; left: 15%;
left: 50%; transform: translate(-50%, -50%);
} width: 450px;
height: 100px;
.head{ border-radius: 5px;
color: white; background: blue;
text-align: center; color: white;
font-size: 50px; }
}
.foot{ .waterleft2{
position: absolute; position: absolute;
top: 90%; top: 20%;
left: 35%; left: 5%;
color: white; color: white;
text-align: center; font-size: 28px;
font-size: 40px; }
color: orange; .indicator2{ /*Waterleft2 indicator*/
} position: absolute;
top: 75%;
left: 47.5%;
.wd1{ transform: translate(-50%, -50%);
position: absolute; width: 450px;
top: 28%; height: 100px;
left: 8.5%; border-radius: 5px;
color: white; background: blue;
font-size: 28px; color: white;
} }
.wd2{ .waterleft3{
72
position: absolute; font-size: 25px;
top: 20%; float: left;
left: 5%; background: lightblue;
color: white; margin-left: 50px;
font-size: 28px; width: 150px;
padding: 20px;
} text-align: center;
.indicator3{ /*Waterleft3 indicator*/ }
position: absolute; #ul3 a {
top: 75%; color: black;
left: 80.5%; }
transform: translate(-50%, -50%); #ul3 li:hover {
width: 450px; background: green;
height: 100px; color: white;
border-radius: 5px; }
background: blue; #ul4 {
color: white; position: absolute;
} top: 15%;
.dispenserstatus1{ left: 54.3%;
position: absolute; list-style: none;
top: 67%; text-align: center;
left: 6.7%; }
color: green; #ul4 li {
font-size: 28px; font-size: 25px;
} float: left;
background: orange;
.dispenserstatus2{ margin-left: 50px;
position: absolute; width: 150px;
top: 67%; padding: 20px;
left: 39%; text-align: center;
color: green; }
font-size: 28px; #ul4 a {
} color: black;
}
.dispenserstatus3{ #ul4 li:hover {
position: absolute; background: green;
top: 67%; color: white;
left: 71.5%; }
color: green; .tank1
font-size: 28px; {
} position: absolute;
top: 50%;
a{ left: 15%;
color: white; transform: translate(-50%, -50%);
} width: 340px;
#ul3 { height: 500px;
position: absolute; border: 6px solid #fff;
top: 15%; border-top: 5px solid #fff;
left: 15%; border-radius: 5px;
list-style: none; border-top-left-radius: 6px;
text-align: center; border-top-right-radius: 5px;
} background: #262626;
#ul3 li {
73
box-shadow: 0 0 0 0, 0 20px 35px left: 11.5%;
rgba(0,0,0,1); border: none;
} background-color: green;
padding: 14px 28px;
.tank2 font-size: 16px;
{ cursor: pointer;
position: absolute; display: inline-block;
top: 50%; color: black;
left: 47.5%; font-size: 30px;
transform: translate(-50%, -50%); border-radius: 10px;
width: 340px; }
height: 500px; .btn1:hover {
border: 6px solid #fff; background-color: red;
border-top: 5px solid #fff; color: white;
border-radius: 5px; }
border-top-left-radius: 6px;
border-top-right-radius: 5px; .btn2{
background: #262626; position: absolute;
box-shadow: 0 0 0 0, 0 20px 35px top: 71%;
rgba(0,0,0,1); left: 44%;
} border: none;
.tank3 background-color: green;
{ padding: 14px 28px;
position: absolute; font-size: 16px;
top: 50%; cursor: pointer;
left: 80%; display: inline-block;
transform: translate(-50%, -50%); color: black;
width: 340px; font-size: 30px;
height: 500px; border-radius: 10px;
border: 6px solid #fff; }
border-top: 5px solid #fff; .btn2:hover {
border-radius: 5px; background-color: red;
border-top-left-radius: 6px; color: white;
border-top-right-radius: 5px; }
background: #262626;
box-shadow: 0 0 0 0, 0 20px 35px
rgba(0,0,0,1); .btn3{
} position: absolute;
top: 71%;
.all left: 77%;
{ border: blue;
position: absolute; background-color: green;
top: 65%; padding: 14px 28px;
left: 50%; font-size: 16px;
width: 2000px; cursor: pointer;
height: 1600px; display: inline-block;
transform: translate(-50%, -50%); color: black;
background: #262626; font-size: 30px;
} border-radius: 10px;
.btn1{ }
position: absolute; .btn3:hover {
top: 71%; background-color: red;
74
color: white; width: 340px;
} height: 6.25px;
background: blue;
}
/*For Water Level*/ #p6
{
position: absolute;
#p1 top: 93.75%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 100%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #p7
background: blue; {
} position: absolute;
#p2 top: 92.5%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 98.75%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #p8
background: blue; {
} position: absolute;
#p3 top: 91.25%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 97.5%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #p9
background: blue; {
} position: absolute;
#p4 top: 90%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 96.25%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #p10
background: blue; {
} position: absolute;
#p5 top: 88.75%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 95%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
75
} position: absolute;
#p11 top: 81.25%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 87.5%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #p17
background: blue; {
} position: absolute;
#p12 top: 80%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 86.25%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #p18
background: blue; {
} position: absolute;
#p13 top: 78.75%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 85%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #p19
background: blue; {
} position: absolute;
#p14 top: 77.5%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 83.75%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #p20
background: blue; {
} position: absolute;
#p15 top: 76.25%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 82.5%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #p21
background: blue; {
} position: absolute;
#p16 top: 75%;
{ left: 50%;
76
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #p27
background: blue; {
} position: absolute;
#p22 top: 67.5%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 73.75%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #p28
background: blue; {
} position: absolute;
#p23 top: 66.25%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 72.5%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #p29
background: blue; {
} position: absolute;
#p24 top: 65%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 71.25%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #p30
background: blue; {
} position: absolute;
#p25 top: 63.75%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 70%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #p31
background: blue; {
} position: absolute;
#p26 top: 62.5%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 68.75%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #p32
77
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 61.25%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #p38
background: blue; {
} position: absolute;
#p33 top: 53.75%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 60%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #p39
background: blue; {
} position: absolute;
#p34 top: 52.5%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 58.75%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #p40
background: blue; {
} position: absolute;
#p35 top: 51.25%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 57.5%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #p41
background: blue; {
} position: absolute;
#p36 top: 50%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 56.25%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #p42
background: blue; {
} position: absolute;
#p37 top: 48.75%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 55%; width: 340px;
78
height: 6.25px; #p48
background: blue; {
} position: absolute;
#p43 top: 41.25%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 47.5%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #p49
background: blue; {
} position: absolute;
#p44 top: 40%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 46.25%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #p50
background: blue; {
} position: absolute;
#p45 top: 38.75%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 45%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #p51
background: blue; {
} position: absolute;
#p46 top: 37.5%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 43.75%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #p52
background: blue; {
} position: absolute;
#p47 top: 36.25%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 42.5%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #p53
background: blue; {
} position: absolute;
79
top: 35%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #p59
background: blue; {
} position: absolute;
#p54 top: 27.5%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 33.75%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #p60
background: blue; {
} position: absolute;
#p55 top: 26.25%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 32.5%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #p61
background: blue; {
} position: absolute;
#p56 top: 25%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 31.25%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #p62
background: blue; {
} position: absolute;
#p57 top: 23.75%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 30%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #p63
background: blue; {
} position: absolute;
#p58 top: 22.5%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 28.75%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
80
} position: absolute;
#p64 top: 15%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 21.25%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #p70
background: blue; {
} position: absolute;
#p65 top: 13.75%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 20%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #p71
background: blue; {
} position: absolute;
#p66 top: 12.5%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 18.75%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #p72
background: blue; {
} position: absolute;
#p67 top: 11.25%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 17.5%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #p73
background: blue; {
} position: absolute;
#p68 top: 10%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 16.25%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #p74
background: blue; {
} position: absolute;
#p69 top: 8.75%;
{ left: 50%;
81
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #p80
background: blue; {
} position: absolute;
#p75 top: 1.25%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 7.5%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #t1
background: blue; {
} position: absolute;
#p76 top: 100%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 6.25%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #t2
background: blue; {
} position: absolute;
#p77 top: 98.75%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 5%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #t3
background: blue; {
} position: absolute;
#p78 top: 97.5%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 3.75%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #t4
background: blue; {
} position: absolute;
#p79 top: 96.25%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 2.5%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #t5
82
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 95%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #t11
background: blue; {
} position: absolute;
#t6 top: 87.5%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 93.75%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #t12
background: blue; {
} position: absolute;
#t7 top: 86.25%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 92.5%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #t13
background: blue; {
} position: absolute;
#t8 top: 85%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 91.25%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #t14
background: blue; {
} position: absolute;
#t9 top: 83.75%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 90%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #t15
background: blue; {
} position: absolute;
#t10 top: 82.5%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 88.75%; width: 340px;
83
height: 6.25px; #t21
background: blue; {
} position: absolute;
#t16 top: 75%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 81.25%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #t22
background: blue; {
} position: absolute;
#t17 top: 73.75%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 80%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #t23
background: blue; {
} position: absolute;
#t18 top: 72.5%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 78.75%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #t24
background: blue; {
} position: absolute;
#t19 top: 71.25%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 77.5%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #t25
background: blue; {
} position: absolute;
#t20 top: 70%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 76.25%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #t26
background: blue; {
} position: absolute;
84
top: 68.75%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #t32
background: blue; {
} position: absolute;
#t27 top: 61.25%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 67.5%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #t33
background: blue; {
} position: absolute;
#t28 top: 60%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 66.25%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #t34
background: blue; {
} position: absolute;
#t29 top: 58.75%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 65%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #t35
background: blue; {
} position: absolute;
#t30 top: 57.5%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 63.75%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #t36
background: blue; {
} position: absolute;
#t31 top: 56.25%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 62.5%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
85
} position: absolute;
#t37 top: 48.75%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 55%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #t43
background: blue; {
} position: absolute;
#t38 top: 47.5%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 53.75%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #t44
background: blue; {
} position: absolute;
#t39 top: 46.25%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 52.5%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #t45
background: blue; {
} position: absolute;
#t40 top: 45%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 51.25%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #t46
background: blue; {
} position: absolute;
#t41 top: 43.75%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 50%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #t47
background: blue; {
} position: absolute;
#t42 top: 42.5%;
{ left: 50%;
86
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #t53
background: blue; {
} position: absolute;
#t48 top: 35%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 41.25%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #t54
background: blue; {
} position: absolute;
#t49 top: 33.75%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 40%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #t55
background: blue; {
} position: absolute;
#t50 top: 32.5%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 38.75%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #t56
background: blue; {
} position: absolute;
#t51 top: 31.25%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 37.5%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #t57
background: blue; {
} position: absolute;
#t52 top: 30%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 36.25%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #t58
87
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 28.75%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #t64
background: blue; {
} position: absolute;
#t59 top: 21.25%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 27.5%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #t65
background: blue; {
} position: absolute;
#t60 top: 20%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 26.25%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #t66
background: blue; {
} position: absolute;
#t61 top: 18.75%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 25%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #t67
background: blue; {
} position: absolute;
#t62 top: 17.5%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 23.75%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #t68
background: blue; {
} position: absolute;
#t63 top: 16.25%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 22.5%; width: 340px;
88
height: 6.25px; #t74
background: blue; {
} position: absolute;
#t69 top: 8.75%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 15%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #t75
background: blue; {
} position: absolute;
#t70 top: 7.5%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 13.75%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #t76
background: blue; {
} position: absolute;
#t71 top: 6.25%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 12.5%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #t77
background: blue; {
} position: absolute;
#t72 top: 5%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 11.25%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #t78
background: blue; {
} position: absolute;
#t73 top: 3.75%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 10%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #t79
background: blue; {
} position: absolute;
89
top: 2.5%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #a5
background: blue; {
} position: absolute;
#t80 top: 95%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 1.25%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #a6
background: blue; {
} position: absolute;
#a1 top: 93.75%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 100%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #a7
background: blue; {
} position: absolute;
#a2 top: 92.5%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 98.75%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #a8
background: blue; {
} position: absolute;
#a3 top: 91.25%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 97.5%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #a9
background: blue; {
} position: absolute;
#a4 top: 90%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 96.25%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
90
} position: absolute;
#a10 top: 82.5%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 88.75%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #a16
background: blue; {
} position: absolute;
#a11 top: 81.25%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 87.5%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #a17
background: blue; {
} position: absolute;
#a12 top: 80%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 86.25%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #a18
background: blue; {
} position: absolute;
#a13 top: 78.75%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 85%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #a19
background: blue; {
} position: absolute;
#a14 top: 77.5%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 83.75%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #a20
background: blue; {
} position: absolute;
#a15 top: 76.25%;
{ left: 50%;
91
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #a26
background: blue; {
} position: absolute;
#a21 top: 68.75%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 75%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #a27
background: blue; {
} position: absolute;
#a22 top: 67.5%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 73.75%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #a28
background: blue; {
} position: absolute;
#a23 top: 66.25%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 72.5%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #a29
background: blue; {
} position: absolute;
#a24 top: 65%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 71.25%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #a30
background: blue; {
} position: absolute;
#a25 top: 63.75%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 70%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #a31
92
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 62.5%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #a37
background: blue; {
} position: absolute;
#a32 top: 55%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 61.25%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #a38
background: blue; {
} position: absolute;
#a33 top: 53.75%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 60%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #a39
background: blue; {
} position: absolute;
#a34 top: 52.5%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 58.75%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #a40
background: blue; {
} position: absolute;
#a35 top: 51.25%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 57.5%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #a41
background: blue; {
} position: absolute;
#a36 top: 50%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 56.25%; width: 340px;
93
height: 6.25px; #a47
background: blue; {
} position: absolute;
#a42 top: 42.5%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 48.75%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #a48
background: blue; {
} position: absolute;
#a43 top: 41.25%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 47.5%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #a49
background: blue; {
} position: absolute;
#a44 top: 40%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 46.25%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #a50
background: blue; {
} position: absolute;
#a45 top: 38.75%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 45%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #a51
background: blue; {
} position: absolute;
#a46 top: 37.5%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 43.75%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #a52
background: blue; {
} position: absolute;
94
top: 36.25%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #a58
background: blue; {
} position: absolute;
#a53 top: 28.75%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 35%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #a59
background: blue; {
} position: absolute;
#a54 top: 27.5%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 33.75%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #a60
background: blue; {
} position: absolute;
#a55 top: 26.25%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 32.5%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #a61
background: blue; {
} position: absolute;
#a56 top: 25%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 31.25%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #a62
background: blue; {
} position: absolute;
#a57 top: 23.75%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 30%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
95
} position: absolute;
#a63 top: 16.25%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 22.5%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #a69
background: blue; {
} position: absolute;
#a64 top: 15%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 21.25%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #a70
background: blue; {
} position: absolute;
#a65 top: 13.75%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 20%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #a71
background: blue; {
} position: absolute;
#a66 top: 12.5%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 18.75%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #a72
background: blue; {
} position: absolute;
#a67 top: 11.25%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 17.5%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #a73
background: blue; {
} position: absolute;
#a68 top: 10%;
{ left: 50%;
96
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #a79
background: blue; {
} position: absolute;
#a74 top: 2.5%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 8.75%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; #a80
background: blue; {
} position: absolute;
#a75 top: 1.25%;
{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 7.5%; width: 340px;
left: 50%; height: 6.25px;
transform: translate(-50%, -50%); background: blue;
width: 340px; }
height: 6.25px; @media screen and (max-width:375px){
background: blue; .head{
} position: absolute;
#a76 font-size: 30px;
{ top: -20%;
position: absolute; left: 5%;
top: 6.25%; width: 750px;
left: 50%; text-align: center;
transform: translate(-50%, -50%); }
width: 340px; .foot{
height: 6.25px; position: absolute;
background: blue; font-size: 30px;
} top: 550%;
#a77 left: 5%;
{ width: 750px;
position: absolute; text-align: center;
top: 5%; }
left: 50%; .all{
transform: translate(-50%, -50%); position: absolute;
width: 340px; top: 90%;
height: 6.25px; left: 46.5%;
background: blue; width: 100%;
} height: 100%;
#a78 }
{ .wd1{
position: absolute; position: absolute;
top: 3.75%; top: 33%;
left: 50%; left: -19%;
transform: translate(-50%, -50%); width: 300px;
width: 340px; }
height: 6.25px; .wd2{
97
position: absolute; .Solenoidvalvestatus2{
top: 33%; position: absolute;
left: 14%; top: 63%;
width: 300px; left: 10%;
} width: 375px;
.wd3{ }
position: absolute; .Solenoidvalvestatus3{
top: 33%; position: absolute;
left: 45%; top: 63%;
width: 300px; left: 45%;
} width: 400px;
.div1{ }
position: absolute; .btn1{
width: 100%; position: absolute;
height: 2000px; top: 72%;
top: 20%; left: -5%;
left: 90%; }
} .btn2{
.div2{ position: absolute;
position: absolute; top: 72.5%;
width: 100%; left: 28%;
height: 2000px; }
top: 160%; .btn3{
left: 60%; position: absolute;
} top: 72.5%;
.div3{ left: 58%;
position: absolute; }
width: 100%; #ul3 {
height: 2000px; position: absolute;
top: 300%; top: 50%;
left: 28%; left: 55%;
} }
.indicator1{ #ul4 {
position: absolute; position: absolute;
top: 68.5%; top: 24%;
left: 15%; left: 55%;
} }
.indicator2{ .gotoclient{
position: absolute; position: absolute;
top: 69%; top: 38.5%;
left: 50%; left: 88%;
} width: 200px;
.indicator3{ }
position: absolute; .gotofirebase{
top: 69%; position: absolute;
left: 80%; top: 12%;
} left: 88%;
.Solenoidvalvestatus1{ width: 200px;
position: absolute; }
top: 62.5%; #hr{
left: -20%; position: absolute;
width: 400px; left: 38%;
} width: 500px;
98
} <p class="alertwaterdispenser1">WATER
} DISPENSER 1 STATUS</p>
<div class="tank1"></div>
FORM 3 <div id="place1"><p
HTML: class="location1">Location: Engineering Building
<br>Room: 201
<!doctype html> <br>Exact Place: Near Desk 1
<!DOCTYPE html> <br>
<html> <br>No. of Empty Gallons:</p>
<head> <h1 id="galnum1">0</h1>
<title>LOGGED IN AS CLIENT</title> </div>
<meta charset="utf-8"> </div>
<meta name="viewport"
content="width=device-width, initial-scale=1.0"> <div class="div2">
<script <p class="second">WATER DISPENSER
src="https://www.gstatic.com/firebasejs/5.9.0/fire 2</p>
base.js"></script> <p class="alertwaterdispenser2">WATER
<script DISPENSER 2 STATUS</p>
src="https://code.jquery.com/jquery-3.3.1.js" <div class="tank2"></div>
integrity="sha256- <div id="place2">Location: Engineering
2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH Building
60=" crossorigin="anonymous"></script> <br>Room: 202
<link rel="stylesheet" type="text/css" <br>Exact Place: Near Desk 2
href="client.css"> <br>
<script src="client.js"></script> <br>No. of Empty Gallons:
<script type="client1.js"></script> <h1 id="galnum2">0</h1>
<script type="client1-2"></script> </div>
<script type="text/javascript" src="jquery- </div>
1.min.js"></script>
<script type="text/javascript"> <div class="div3">
$(document).ready(function(){ <p class="third">WATER DISPENSER 3</p>
//waits the document to load <p class="alertwaterdispenser3">WATER
alert("YOU ARE LOGGED DISPENSER 3 STATUS</p>
IN AS CLIENT"); <div class="tank3"></div>
}); <div id="place3">Location: Engineering
</script> Building
<br>Room: 203
<link rel="icon" href="clients.png"> <br>Exact Place: Near Desk 3
</head> <br>
<body> <br>No. of Empty Gallons:
<h1 id="galnum3">0</h1>
<div class="all"> </div>
<p class="head">IOT-BASED WATER DISPENSER </div>
MONITORING AND CONTROL SYSTEM</p>
</div>
<p class="gotomenu">GO TO:</p> </body>
<ul id="ul3"> </html>
<a
href="index.html"><li>MENU</li></a> CSS:
</ul>
body
<div class="div1"> {
<p class="first">WATER DISPENSER 1</p> margin: 0;
99
padding: 0; font-size: 30px;
background: #262626; }
} .third{
.head{ color: green;
color: white; position: absolute;
text-align: center; top: 27%;
font-size: 50px; left: 69%;
} font-size: 30px;
.gotomenu{ }
position: absolute;
top: 17.5%; a{
left: 16%; color: white;
color: red; }
font-size: 30px; .all
} {
p{ position: absolute;
color: white; top: 65%;
} left: 50%;
#ul3 { width: 2500px;
position: absolute; height: 1600px;
top: 17%; transform: translate(-50%, -50%);
left: 17%; background: #262626;
list-style: none; }
text-align: center;
} .tank1
#ul3 li { {
font-size: 25px; position: absolute;
float: left; top: 50%;
background: lightblue; left: 25%;
margin-left: 50px; transform: translate(-50%, -50%);
width: 150px; width: 440px;
padding: 20px; height: 500px;
text-align: center; border: 6px solid cyan;
} border-top: 5px solid cyan;
#ul3 a { border-bottom: 5px solid cyan;
color: black; border-radius: 15px;
} border-top-left-radius: 6px;
#ul3 li:hover { border-top-right-radius: 5px;
background: green; background-image: url(jug.jpg);
color: white; box-shadow: 0 0 0 0, 0 20px 35px
} rgba(0,0,0,1);
.first{ }
color: cyan; .tank2
position: absolute; {
top: 27%; position: absolute;
left: 19.5%; top: 50%;
font-size: 30px; left: 50%;
} transform: translate(-50%, -50%);
.second{ width: 440px;
color: red; height: 500px;
position: absolute; border: 6px solid red;
top: 27%; border-top: 5px solid red;
left: 44%; border-bottom: 5px solid red;
100
border-radius: 15px;
border-top-left-radius: 5px; #place2
border-top-right-radius: 5px; {
background-image: url(jug.jpg); position: absolute;
box-shadow: 0 0 0 0, 0 20px 35px top: 90%;
rgba(0,0,0,1); left: 50%;
} transform: translate(-50%, -50%);
.tank3 border: 6px solid red;
{ width: 440px;
position: absolute; height: 200px;
top: 50%; border-top-left-radius: 6px;
left: 75%; border-top-right-radius: 5px;
transform: translate(-50%, -50%); background: #262626;
width: 440px; font-size: 30px;
height: 500px; font-size-adjust: 50px;
border: 6px solid green; color: white;
border-top: 5px solid green; }
border-bottom: 5px solid green;
border-radius: 15px; #galnum2{
border-top-left-radius: 5px; position: absolute;
border-top-right-radius: 5px; top: 23%;
background-image: url(jug.jpg); left: 85%;
box-shadow: 0 0 0 0, 0 20px 35px transform: translate(-50%, -50%);
rgba(0,0,0,1); width: 90px;
} height: 90px;
#place1 background: #262626;
{ font-size: 100px;
position: absolute; font-size-adjust: 50px;
top: 90%; color: white;
left: 25%; }
transform: translate(-50%, -50%);
border: 6px solid cyan; #place3
width: 440px; {
height: 200px; position: absolute;
border-top-left-radius: 6px; top: 90%;
border-top-right-radius: 5px; left: 75%;
background: #262626; transform: translate(-50%, -50%);
font-size: 30px; border: 6px solid green;
font-size-adjust: 50px; width: 440px;
color: white; height: 200px;
} border-top-left-radius: 6px;
#galnum1{ border-top-right-radius: 5px;
position: absolute; background: #262626;
top: 23%; font-size: 30px;
left: 85%; font-size-adjust: 50px;
transform: translate(-50%, -50%); color: white;
width: 90px; }
height: 90px;
background: #262626; #galnum3{
font-size: 100px; position: absolute;
font-size-adjust: 50px; top: 20%;
color: white; left: 85%;
} transform: translate(-50%, -50%);
101
width: 90px; width: 500px;
height: 90px; }
background: #262626; .alertwaterdispenser1{
font-size: 100px; position: absolute;
font-size-adjust: 50px; top: 86%;
color: white; left: 28%;
} width: 500px;
.alertwaterdispenser1{ }
color: cyan; .alertwaterdispenser2{
position: absolute; position: absolute;
top: 75%; top: 186%;
left: 17%; left: 28%;
font-size: 30px; width: 500px;
} }
.alertwaterdispenser2{ .alertwaterdispenser3{
color: red; position: absolute;
position: absolute; top: 286%;
top: 75%; left: 28%;
left: 42%; width: 500px;
font-size: 30px; }
} .all{
.alertwaterdispenser3{ position: absolute;
color: green; width: 100%;
position: absolute; height: 100%;
top: 75%; left: 80%;
left: 67%; }
font-size: 30px; .head{
} position: absolute;
/*Design for iphone6/7/8 smart phones*/ font-size: 20px;
@media screen and (max-width:375px){ left: 20%;
#ul3{ top: -10%;
position: absolute; width: 500px;
left: 35%; }
top: 9.5%; .location1{
} position: absolute;
.gotomenu{ font-size: 20px;
position: absolute; left: 4%;
top: 2%; top: -9%;
left: 71%; width: 500px;
width: 100px; }
} .location2{
.first{ position: absolute;
left: 45%; font-size: 20px;
width: 500px; left: 4%;
} top: -9%;
.second{ width: 500px;
top: 126%; }
left: 45%; .location3{
width: 500px; position: absolute;
} font-size: 20px;
.third{ left: 4%;
top: 225%; top: -9%;
left: 45%; width: 500px;
102
} font-size: 20px;
.tank1{ }
position: absolute; #place3{
top: 60%; position: absolute;
left: 82%; top: 312%;
width: 300px; left: 83%;
height: 300px; width: 310px;
background-size: 300px; height: 123px;
} font-size: 20px;
.tank2{ }
position: absolute; #galnum1{
top: 160%; position: absolute;
left: 85%; font-size: 70px;
width: 300px; left: 90%;
height: 300px; top: 33%;
background-size: 300px; background: transparent;
} }
.tank3{ #galnum2{
position: absolute; position: absolute;
top: 260%; font-size: 70px;
left: 82%; left: 90%;
width: 300px; top: 33%;
height: 300px; background: transparent;
background-size: 300px; }
} #galnum3{
.div1{ position: absolute;
top: 50%; font-size: 70px;
left: 59%; left: 90%;
width: 100%; top: 33%;
} background: transparent;
.div2{ }
top: 150%; }
left: 59%;
width: 100%; JAVASCRIPT:
}
.div3{ var config = {
top: 200%; apiKey:
left: 59%; "AIzaSyDvo7E7NjKitMVCFyWfP3iyMxqio_ABPqY",
width: 100%; authDomain: "thesis-5f846.firebaseapp.com",
} databaseURL: "https://thesis-
#place1{ 5f846.firebaseio.com",
position: absolute; projectId: "thesis-5f846",
top: 110%; storageBucket: "thesis-5f846.appspot.com",
left: 82%; messagingSenderId: "194659622983"
width: 310px; };
height: 123px; firebase.initializeApp(config);
}
#place2{ $(document).ready(function(){
position: absolute; var database = firebase.database(); //Defining
top: 213%; database from firebase
left: 83%; var galnum1;
width: 310px; var galnum2;
height: 123px; var galnum3;
103
return true;
}}
database.ref().on("value", function(snap){ waterdispenserstatus3();
galnum1 = snap.val().galnum1;
galnum2 = snap.val().galnum2; });
galnum3 = snap.val().galnum3; });
p80 = snap.val().p80;
t80 = snap.val().t80;
a80 = snap.val().a80;
//Press reset button from the microcontroller to
send "0" value on the water dispenser status
//Error in increment will arise if either of the water
dispensers is not yet been replaced FORM 3
//before the other one has ran out of water. HTML:
//Codes for waterdispenser 1 Client Statud <!doctype html>
function waterdispenserstatus1(){ <!DOCTYPE html>
galnum1 = <html>
document.getElementById("galnum1"); <head>
if(p80 == 1){ <meta charset="utf-8">
let x = galnum1.innerHTML; <meta name="viewport"
x++; content="width=device-width, initial-scale=1.0">
galnum1.innerHTML = x; <title>LOGIN FORM</title>
}else{ <link rel="stylesheet" type="text/css"
return true; href="login.css">
}} <script src="login.js"></script>
waterdispenserstatus1(); <script type="text/javascript" src="jquery-
1.min.js"></script>
<script type="text/javascript">
//Codes for waterdispenser 2 Client Status $(document).ready(function(){
function waterdispenserstatus2(){ //waits the document to load
galnum2 = alert("Please Enter the
document.getElementById("galnum2"); necessary Information.");
if(t80 == 1){ });
let y = galnum2.innerHTML; </script>
y++; <link rel="icon" href="lock.png">
galnum2.innerHTML = y; </head>
}else{
return true; <body>
}} <div id="whole">
waterdispenserstatus2(); <div id="log">
<img src="lock.png">
//Codes for waterdispenser 3 Client Status <form name="myform">
function waterdispenserstatus3(){
galnum3 = <table>
document.getElementById("galnum3"); <input type="button" id="login" value="LOGIN"
if(a80 == 1){ onclick="Checkinfo();"/>
let z = galnum3.innerHTML; <tr>
z++; <td><label for="user"><a class="name">User
galnum3.innerHTML = z; Name</a></label></td>
}else{ <td><input type="text" id="user"></td>
104
</tr> left: 34%;
<tr> height: 50px;
<td><label for="pass"><a width: 200px;
class="name">Password</a></label></td> list-style: none;
<td><input text-align: center;
type="password" id="pass"></td> background: cyan;
</tr> }
</table> #login:hover {
</form> background: green;
</div> color: white;
</div> }
</body> .menu{
</html> position: absolute;
top: 60%;
left: 24%;
text-align: center;
}
CSS:
body form{
{ position: absolute;
margin: 0; left: 10%;
padding: 0; top: 26%;
background: #262626; }
} input{
.name{ width: 350px;
font-size: 27px; height: 50px;
} padding: 12px 20px;
img{ margin: 8px 0;
position: absolute; border-radius: 5px;
width: 200px; box-sizing: border-box;
height: 200px; font-size: 20px;
top: -19.5%; }
left: 36%; #log{
} position: absolute;
#whole { top: 53%;
position: absolute; left: 45%;
top: -1%; transform: translate(-50%, -50%);
left: -1%; height: 500px;
width: 3000px; width: 600px;
height: 100%; color: white;
list-style: none; border: 6px solid cyan;
text-align: center; border-top: 6px solid cyan;
background-position: center; border-bottom: 6px solid cyan;
background-repeat: no-repeat; border-bottom-left-radius: 12px;
background-size: cover; border-bottom-right-radius: 12px;
-moz-background-size: cover; border-top-left-radius: 12px;
-webkit-background-size: cover; border-top-right-radius: 12px;
-o-background-size: cover; }
@media screen and (max-width:375px){
} #whole{
#login { width: 100%;
position: absolute; height: 100%;
top: 170%; top: 9%;
105
left: 8%; top: 20%;
background-position: center; }
background-repeat: repeat; }
background-size: cover;
-moz-background-size: cover; JAVASCRIPT:
-webkit-background-size: cover;
-o-background-size: cover; function Checkinfo(){
} var ConfirmUserName = "thesis";
#log{ var Username =
position: absolute; document.getElementById("user").value;
top: 51%; var Confirmpassword = "thesis";
left: 46.5%; var password =
transform: translate(-50%, -50%); document.getElementById("pass").value;
height: 300px;
width: 350px; if ((Username == ConfirmUserName) &&
color: white; (password == Confirmpassword)){
border: 6px solid cyan; window.location="water.html";
border-top: 6px solid cyan; }else{
border-bottom: 6px solid cyan; alert("User Name or Password
border-bottom-left-radius: 12px; Don't Match!");
border-bottom-right-radius: 12px; }
border-top-left-radius: 12px; }
border-top-right-radius: 12px;
}
input{
width: 155px;
height: 50px;
padding: 12px 20px;
margin: 8px 0; FORM 4
border-radius: 5px; HTML:
box-sizing: border-box;
font-size: 20px; <!DOCTYPE html>
} <html>
#login{ <head>
position: absolute; <meta charset="utf-8">
top: 100%; <meta name="viewport" content="width=device-
left: 29%; width, initial-scale=1.0">
height: 50px; <link rel="stylesheet" type="text/css"
width: 100px; href="members.css">
list-style: none; <title>MEMBERS</title>
text-align: center; <link rel="icon" href="kami.png">
background: cyan; </head>
font-size: 10px;
} <body>
img{ <div class="whole">
position: absolute; <h1 id="portfolio"><b>PORTFOLIO</h1>
top: -28.5%; <div class="div1">
left: 30.5%; <img src="jose.jpg" id="image2" alt="member">
width: 140px; <div class="pad1"><b><p class="CU1">JOSE
height: 140px; VINCENT DOCENA</p></b></div>
} <div class="pad1-1"><b><p class="CU1-1">
form{ COURSE: BSECE-5A<br>
position: absolute; AGE: 21<br>
106
NATIONALITY: FILIPINO<br> transform: translate(-50%, -50%);
SEX: MALE<br> top: 9%;
RESIDENCE: TAFT E. SAMAR<br> left: 50%;
NATIONALITY: FILIPINO<br></p></b></div> font-size: 38px;
</div> color: white;
}
.CU1-1{
<div class="div2"> position: absolute;
<img src="pau.jpg" id="image1" alt="member"> text-align: center;
<div class="pad2"><b><p class="CU2">JOHN transform: translate(-50%, -50%);
PAUL CALADES</p></b></div> top: 39%;
<div class="pad2-2"><b><p class="CU2-2"> left: 50%;
COURSE: BSECE-5A<br> font-size: 36px;
AGE: 20<br> color: white;
NATIONALITY: FILIPINO<br> background-color: red;
SEX: MALE<br> }
RESIDENCE: ROSARIO N. SAMAR<br> .CU2{
NATIONALITY: FILIPINO<br> position: absolute;
</p></b></div></div> text-align: center;
transform: translate(-50%, -50%);
<div class="div3"> top: 9%;
<img src="kim.jpg" id="image3" left: 50%;
alt="members"> font-size: 38px;
<div class="pad3"><b><p class="CU3">KIM }
OLIVER VILLAR</p></b></div> .CU2-2{
<div class="pad3-3"><b><p class="CU3-3"> position: absolute;
COURSE: BSECE-5A<br> text-align: center;
AGE: 21<br> transform: translate(-50%, -50%);
NATIONALITY: FILIPINO<br> top: 39%;
SEX: MALE<br> left: 50%;
RESIDENCE: TACLOBAN CITY<br> font-size: 36px;
NATIONALITY: FILIPINO<br></p></b></div> color: white;
</div> background-color: blue;
</div> }
</body> .CU3{
</html> position: absolute;
text-align: center;
CSS: transform: translate(-50%, -50%);
top: 9%;
body left: 50%;
{ font-size: 38px;
margin: 0px; }
padding: 0px; .CU3-3{
position: absolute;
} text-align: center;
#portfolio{ transform: translate(-50%, -50%);
text-align: center; top: 39%;
font-size: 300px; left: 50%;
color: #ffd700; font-size: 36px;
} color: white;
.CU1{ background-color: green;
position: absolute; }
text-align: center;
107
border-radius: 15px;
.whole{ border-top-left-radius: 6px;
position: fixed; border-top-right-radius: 5px;
top: 50%; box-shadow: 0 0 0 0, 0 20px 35px
left: 50%; rgba(0,0,0,1);
right: 50%; }
text-align: center; .div3{
transform: translate(-50%, -50%); position: absolute;
width: 6800px; top: 54%;
height: 100%; left: 75%;
background-position: center; text-align: center;
background-repeat: no-repeat; transform: translate(-50%, -50%);
background-size: auto; width: 950px;
background-image: url(back.png); height: 1800px;
-moz-background-size: cover; background-image: url(face.jpg);
-webkit-background-size: cover; background-repeat: no-repeat;
-o-background-size: cover; background-size: cover;
} border: 6px solid cyan;
.div1{ border-top: 5px solid cyan;
position: absolute; border-bottom: 5px solid cyan;
top: 54%; border-radius: 15px;
left: 50%; border-top-left-radius: 6px;
text-align: center; border-top-right-radius: 5px;
transform: translate(-50%, -50%); box-shadow: 0 0 0 0, 0 20px 35px
width: 950px; rgba(0,0,0,1);
height: 1800px; }
border: 6px solid cyan; .pad1{
border-top: 5px solid cyan; position: absolute;
border-bottom: 5px solid cyan; top: 5%;
border-radius: 15px; left: 50%;
border-top-left-radius: 6px; text-align: center;
border-top-right-radius: 5px; transform: translate(-50%, -50%);
box-shadow: 0 0 0 0, 0 20px 35px width: 950px;
rgba(0,0,0,1); height: 100px;
background-image: url(face.jpg); background: red;
background-repeat: no-repeat; border: 5px solid cyan;
background-size: cover; border-bottom: transparent;
} border-top-left-radius: 5px;
color: white;
.div2{ border-top-right-radius: 5px;
position: absolute; }
top: 54%; .pad1-1{
left: 25%;
text-align: center; position: absolute;
transform: translate(-50%, -50%); top: 67%;
width: 950px; left: 50%;
height: 1800px; text-align: center;
background-image: url(face.jpg); transform: translate(-50%, -50%);
background-repeat: no-repeat; width: 950px;
background-size: cover; height: 1000px;
border: 6px solid cyan; background: transparent;
border-top: 5px solid cyan;
border-bottom: 5px solid cyan; }
108
transform: translate(-50%, -50%);
width: 950px;
.pad2{ height: 1000px;
position: absolute; background: transparent;
top: 5%;
left: 50%; }
text-align: center; #image1{
transform: translate(-50%, -50%); position: absolute;
width: 950px; top: 25%;
height: 100px; left: 50%;
background: blue; transform: translate(-50%, -50%);
border: 5px solid cyan; width: 585px;
border-bottom: transparent; height: 600px;
border-top-left-radius: 5px; box-shadow: 0 0 0 0, 0 20px 35px
border-top-right-radius: 5px; rgba(0,0,0,1);
font-size: 60px; }
color: white; #image2{
} position: absolute;
.pad2-2{ top: 25%;
left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 67%; width: 585px;
left: 50%; height: 600px;
text-align: center; box-shadow: 0 0 0 0, 0 20px 35px
transform: translate(-50%, -50%); rgba(0,0,0,1);
width: 950px; }
height: 1000px;
background: transparent; #image3{
position: absolute;
} top: 25%;
.pad3{ left: 50%;
position: absolute; transform: translate(-50%, -50%);
top: 5%; width: 585px;
left: 50%; height: 600px;
text-align: center; box-shadow: 0 0 0 0, 0 20px 35px
transform: translate(-50%, -50%); rgba(0,0,0,1);
width: 950px; }
height: 100px; @media screen and (max-width:375px){
background: green; body{
border: 5px solid cyan; height: 100%;
border-top: transparent; background: #262626;
border-bottom: transparent; }
border-top-left-radius: 5px; #portfolio{
border-top-right-radius: 5px; text-align: center;
font-size: 60px; font-size: 40px;
color: white; color: #ffd700;
} }
.pad3-3{ .CU1{
position: absolute;
position: absolute; text-align: center;
top: 67%; transform: translate(-50%, -50%);
left: 50%; top: 9.3%;
text-align: center; left: 50%;
109
font-size: 16px; transform: translate(-50%, -50%);
width: 300px; width: 375px;
} height: 100%;
.CU1-1{ background: #262626;
position: absolute; }
text-align: center; .div1{
transform: translate(-50%, -50%); top: 50%;
top: 37.5%; left: 50%;
left: 50%; text-align: center;
font-size: 12px; transform: translate(-50%, -50%);
width: 200px; width: 250px;
} height: 300px;
.CU2{ }
position: absolute;
text-align: center; .div2{
transform: translate(-50%, -50%); top: 114%;
top: 9%; left: 50%;
left: 50%; text-align: center;
font-size: 16px; transform: translate(-50%, -50%);
width: 300px; width: 250px;
} height: 300px;
.CU2-2{ }
position: absolute; .div3{
text-align: center; top: 178%;
transform: translate(-50%, -50%); left: 50%;
top: 37.5%; text-align: center;
left: 50%; transform: translate(-50%, -50%);
font-size: 12px; width: 250px;
width: 200px; height: 300px;
} }
.CU3{ .pad1{
position: absolute; top: 6%;
text-align: center; left: 50%;
transform: translate(-50%, -50%); text-align: center;
top: 9%; transform: translate(-50%, -50%);
left: 50%; width: 250px;
font-size: 16px; height: 40px;
width: 300px; }
} .pad1-1{
.CU3-3{ top: 81%;
position: absolute; left: 50%;
text-align: center; text-align: center;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
top: 37.5%; width: 200px;
left: 50%; height: 90px;
font-size: 12px; background: transparent;
width: 200px; border: 5px solid cyan;
} border-top-left-radius: 5px;
.whole{ border-top-right-radius: 5px;
position: absolute; border-bottom-left-radius: 5px;
top: 50%; border-bottom-right-radius: 5px;
left: 50%; font-size: 60px;
text-align: center; color: white;
110
} transform: translate(-50%, -50%);
.pad2{ width: 150px;
top: 6%; height: 150px;
left: 50%; }
text-align: center; #image2{
transform: translate(-50%, -50%); position: absolute;
width: 250px; top: 38.5%;
height: 40px; left: 50%;
} transform: translate(-50%, -50%);
.pad2-2{ width: 150px;
top: 81%; height: 150px;
left: 50%; }
text-align: center; #image3{
transform: translate(-50%, -50%); position: absolute;
width: 200px; top: 38.5%;
height: 90px; left: 50%;
background: transparent; transform: translate(-50%, -50%);
border: 5px solid cyan; width: 150px;
border-top-left-radius: 5px; height: 150px;
border-top-right-radius: 5px; }
border-bottom-left-radius: 5px; }
border-bottom-right-radius: 5px;
font-size: 60px;
color: white;
}
.pad3{
top: 6%;
left: 50%;
text-align: center;
transform: translate(-50%, -50%);
width: 250px;
height: 40px;
}
.pad3-3{
top: 81%;
left: 50%;
text-align: center;
transform: translate(-50%, -50%);
width: 200px;
height: 90px;
background: transparent;
border: 5px solid cyan;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
font-size: 60px;
color: white;
}
#image1{
position: absolute;
top: 38.5%;
left: 50%;
111
ADUINO & NODEMCU CODES
WATER DISPENSER 1
if (EEPROM.read(1) == 0xFF){
#include <Wire.h> EEPROM.put(1,totalMilliLitres);
#include <EEPROM.h> }
else
byte sensorInterrupt = 0; // 0 = digital pin 2 {
byte sensorPin = 2; EEPROM.get(1,totalMilliLitres);
}
}
// The hall-effect flow sensor outputs
approximately 4.5 pulses per second per
// litre/minute of flow. void loop() {
float calibrationFactor = 3; // put your main code here, to run repeatedly:
volatile byte pulseCount; delay(500);
float flowRate; dispRead = totalMl - totalMilliLitres;
unsigned int flowMilliLitres;
unsigned long totalMilliLitres, tempTotal=-1;
unsigned long oldTime; ArduinoUno.print(dispRead);
ArduinoUno.println("\n");
int totalMl = 20000;
int p80 = 80; delay(500);
int dispRead;
int Reset = 7;
if((millis() - oldTime) > 1000) // Only process
void setup() { counters once per second
// put your setup code here, to run once: {
Serial.begin(9600); // Disable the interrupt while calculating flow
ArduinoUno.begin(4800); rate and sending the value to
pinMode(sensorPin, INPUT); // the host
pinMode(Reset, INPUT); detachInterrupt(sensorInterrupt);
digitalWrite(sensorPin, HIGH);
// Because this loop may not complete in exactly
pulseCount = 0; 1 second intervals we calculate
flowRate = 0.0; // the number of milliseconds that have passed
flowMilliLitres = 0; since the last execution and use
totalMilliLitres = 0; // that to scale the output. We also apply the
oldTime = 0; calibrationFactor to scale the output
// based on the number of pulses per second per
units of measure (litres/minute in
// The Hall-effect sensor is connected to pin 2 // this case) coming from the sensor.
which uses interrupt 0. flowRate = ((1000.0 / (millis() - oldTime)) *
// Configured to trigger on a FALLING state change pulseCount) / calibrationFactor;
(transition from HIGH
// state to LOW state) // Note the time this processing pass was
attachInterrupt(sensorInterrupt, pulseCounter, executed. Note that because we've
FALLING); // disabled interrupts the millis() function won't
actually be incrementing right
112
// at this point, but it will still return the value it
was set to just before if (dispRead <= 18000){
// interrupts went away. p80 = 72;
oldTime = millis();
if (dispRead <= 17750){
// Divide the flow rate in litres/minute by 60 to p80 = 71;
determine how many litres have
// passed through the sensor in this 1 second if (dispRead <= 17500){
interval, then multiply by 1000 to p80 = 70;
// convert to millilitres.
flowMilliLitres = (flowRate / 60 * 1000); if (dispRead <= 17500){
p80 = 69;
// Add the millilitres passed in this second to the
cumulative total if (dispRead <= 17250){
totalMilliLitres += flowMilliLitres; p80 = 68;
EEPROM.put(1,totalMilliLitres);
} if (dispRead <= 17000){
p80 = 67;
// Reset the pulse counter so we can start
incrementing again if (dispRead <= 16750){
pulseCount = 0; p80 = 66;
// Enable the interrupt again now that we've if (dispRead <= 16500){
finished sending output p80 = 65;
attachInterrupt(sensorInterrupt, pulseCounter,
FALLING); if (dispRead <= 16250){
if (digitalRead(Reset) == HIGH) p80 = 64;
{
EEPROMreset(); if (dispRead <= 16000){
} p80 = 63;
Serial.println(p80); if (dispRead <= 15750){
p80 = 62;
if (dispRead <= 20000){
p80 = 80; if (dispRead <= 15500){
p80 = 61;
if (dispRead <= 19750){
p80 = 79; if (dispRead <= 15250){
p80 = 60;
if (dispRead <= 19500){
p80 = 78; if (dispRead <= 15000){
p80 = 59;
if (dispRead <= 19250){
p80 = 77; if (dispRead <= 14750){
p80 = 58;
if (dispRead <= 19000){
p80 = 76; if (dispRead <= 14500){
p80 = 57;
if (dispRead <= 18750){
p80 = 75; if (dispRead <= 14250){
p80 = 56;
if (dispRead <= 18500){
p80 = 74; if (dispRead <= 14000){
p80 = 55;
if (dispRead <= 18250){
p80 = 73; if (dispRead <= 13750){
113
p80 = 54; if (dispRead <= 9000){
p80 = 35;
if (dispRead <= 13500){
p80 = 53; if (dispRead <= 8750){
p80 = 34;
if (dispRead <= 13250){
p80 = 52; if (dispRead <= 8500){
p80 = 33;
if (dispRead <= 13000){
p80 = 51; if (dispRead <= 8250){
p80 = 32;
if (dispRead <= 12750){
p80 = 50; if (dispRead <= 8000){
p80 = 31;
if (dispRead <= 12500){
p80 = 49; if (dispRead <= 7750){
p80 = 30;
if (dispRead <= 12250){
p80 = 48; if (dispRead <= 7500){
p80 = 29;
if (dispRead <= 12000){
p80 = 47; if (dispRead <= 7250){
p80 = 28;
if (dispRead <= 11750){
p80 = 46; if (dispRead <= 7000){
p80 = 27;
if (dispRead <= 11500){
p80 = 45; if (dispRead <= 6750){
p80 = 26;
if (dispRead <= 11250){
p80 = 44; if (dispRead <= 6500){
p80 = 25;
if (dispRead <= 11000){
p80 = 43; if (dispRead <= 6250){
p80 = 24;
if (dispRead <= 10950){
p80 = 42; if (dispRead <= 6000){
p80 = 23;
if (dispRead <= 10500){
p80 = 41; if (dispRead <= 5750){
p80 = 22;
if (dispRead <= 10250){
p80 = 40; if (dispRead <= 5500){
p80 = 21;
if (dispRead <= 10000){
p80 = 39; if (dispRead <= 5250){
p80 = 20;
if (dispRead <= 9750){
p80 = 38; if (dispRead <= 5000){
p80 = 19;
if (dispRead <= 9500){
p80 = 37; if (dispRead <= 4750){
p80 = 18;
if (dispRead <= 9250){
p80 = 36; if (dispRead <= 4500){
p80 = 17;
114
if (dispRead <= 4250){ }
p80 = 16;
}
if (dispRead <= 4000){
p80 = 15; }
if (dispRead <= 3750){ }
p80 = 14;
}
if (dispRead <= 3500){
p80 = 13; }
if (dispRead <= 3250){ }
p80 = 12;
}
if (dispRead <= 3000){
p80 = 11; }
if (dispRead <= 2750){ }
p80 = 10;
}
if (dispRead <= 2550){
p80 = 9; }
if (dispRead <= 2250){ }
p80 = 8;
}
if (dispRead <= 2000){
p80 = 7; }
if (dispRead <= 1750){ }
p80 = 6;
}
if (dispRead <= 1500){
p80 = 5; }
if (dispRead <= 1250){ }
p80 = 4;
}
if (dispRead <= 1000){
p80 = 3; }
if (dispRead <= 750){ }
p80 = 2;
}
if (dispRead <= 500){
p80 = 1; }
if (dispRead <= 250){ }
p80 = 0;
} }
} }
} }
115
} }
} }
} }
} }
} }
} }
} }
} }
} }
} }
} }
} }
} }
} }
} }
} }
} }
} }
} }
} }
} }
} }
delay(10);
} }
} void pulseCounter()
{
} // Increment the pulse counter
pulseCount++;
} }
} void EEPROMreset()
116
{ // Configured to trigger on a FALLING state change
totalMilliLitres = 0; (transition from HIGH
for (int i = 0; i <EEPROM.length(); i++) { // state to LOW state)
EEPROM.write(i,0); attachInterrupt(sensorInterrupt, pulseCounter,
} FALLING);
if (EEPROM.read(1) == 0xFF) //To read byte from
WATER DISPENSER 2 (ARDUINO) the EEPEOM
{
EEPROM.put(1,totalMilliLitres); //To write any
#include <SoftwareSerial.h> data or object to the EEPROM
#include <Wire.h> }
else
#include <EEPROM.h> {
SoftwareSerial ArduinoUno(4,5); EEPROM.get(1,totalMilliLitres); //To read any
data type or object from the EEPROM
}
byte sensorInterrupt = 0; // 0 = digital pin 2 Serial.println(totalMilliLitres);
byte sensorPin = 2; }
void loop() {
// The hall-effect flow sensor outputs // put your main code here, to run repeatedly:
approximately 4.5 pulses per second per delay(500);
// litre/minute of flow.
float calibrationFactor = 5.45; Serial.println(dispRead);
dispRead = totalMl - totalMilliLitres;
volatile byte pulseCount;
int Reset = 7;
ArduinoUno.print(dispRead);
ArduinoUno.println("\n");
float flowRate;
unsigned int flowMilliLitres; delay(100);
unsigned long totalMilliLitres, tempTotal=-1;
unsigned long oldTime; if((millis() - oldTime) > 1000) // Only process
counters once per second
int totalMl = 20000; {
int dispRead; // Disable the interrupt while calculating flow
rate and sending the value to
void setup() { // the host
// put your setup code here, to run once: detachInterrupt(sensorInterrupt);
Serial.begin(9600);
ArduinoUno.begin(4800); // Because this loop may not complete in exactly
1 second intervals we calculate
pinMode(Reset, INPUT); // the number of milliseconds that have passed
pinMode(sensorPin, INPUT); since the last execution and use
digitalWrite(sensorPin, HIGH); // that to scale the output. We also apply the
calibrationFactor to scale the output
pulseCount = 0; // based on the number of pulses per second per
flowRate = 0.0; units of measure (litres/minute in
flowMilliLitres = 0; // this case) coming from the sensor.
totalMilliLitres = 0; flowRate = ((1000.0 / (millis() - oldTime)) *
oldTime = 0; pulseCount) / calibrationFactor;
// Note the time this processing pass was
// The Hall-effect sensor is connected to pin 2 executed. Note that because we've
which uses interrupt 0.
117
// disabled interrupts the millis() function won't #include "Adafruit_MQTT.h"
actually be incrementing right #include "Adafruit_MQTT_Client.h"
// at this point, but it will still return the value it
was set to just before
// interrupts went away. SoftwareSerial NodeMCU(D2,D3);
oldTime = millis(); int a80 = 80;
int waterleft3;
// Divide the flow rate in litres/minute by 60 to
determine how many litres have #define pot A0 // define our potentiometer at pin0
// passed through the sensor in this 1 second which is the ADC for the ESP8266 board (the only
interval, then multiply by 1000 to ADC pin available)
// convert to millilitres. /************************* WiFi Access Point
flowMilliLitres = (flowRate / 60 * 1000); *********************************/
// Add the millilitres passed in this second to the #define WLAN_SSID "MyAP" // enter your WiFi
cumulative total SSID
totalMilliLitres += flowMilliLitres; #define WLAN_PASS "12345678" // this is your
WiFi password
EEPROM.put(1,totalMilliLitres); /************************* Adafruit.io Setup
// Reset the pulse counter so we can start *********************************/
incrementing again
pulseCount = 0; #define MQTT_SERVER "192.168.254.152" //
change this to your Pi IP_address
// Enable the interrupt again now that we've #define MQTT_SERVERPORT 1883 // use
finished sending output 8883 for SSL
attachInterrupt(sensorInterrupt, pulseCounter, #define MQTT_USERNAME "" // empty (If broker
FALLING); has been configured with a username)
} #define MQTT_KEY "" // empty (If broker has
if (digitalRead(Reset) == HIGH) been configured with a password)
{
EEPROMreset(); /************ Global State (you don't need to
} change this!) ******************/
// Create an ESP8266 WiFiClient class to connect to
} the MQTT server.
WiFiClient client;
void pulseCounter() // or... use WiFiFlientSecure for SSL
{ //WiFiClientSecure client;
// Increment the pulse counter
pulseCount++; // Setup the MQTT client class by passing in the
} WiFi client and MQTT server and login details.
Adafruit_MQTT_Client mqtt(&client,
void EEPROMreset() MQTT_SERVER, MQTT_SERVERPORT,
{ MQTT_USERNAME, MQTT_KEY);
totalMilliLitres = 0;
for (int i = 0; i <EEPROM.length(); i++) { /****************************** data stream
EEPROM.write(i,0); publish/subscribe
} ***************************************/
}
Adafruit_MQTT_Publish a80_stream =
WATER DISPENSER 2 (NODEMCU) Adafruit_MQTT_Publish(&mqtt, MQTT_USERNAME
"a80"); // change the topic
#include <ESP8266WiFi.h>
#include <SoftwareSerial.h>
118
/*************************** Sketch Code a80 = 80;
************************************/
if (waterleft3 <= 19750){
// Bug workaround for Arduino 1.6.6, it seems to a80 = 79;
need a function declaration
// for some reason (only affects ESP8266, likely an if (waterleft3 <= 19500){
arduino-builder bug). a80 = 78;
void MQTT_connect();
if (waterleft3 <= 19250){
void setup() { a80 = 77;
Serial.begin(9600);
NodeMCU.begin(4800); if (waterleft3 <= 19000){
pinMode(D2,INPUT); a80 = 76;
pinMode(D3,OUTPUT);
Serial.println(F("Adafruit MQTT demo")); if (waterleft3 <= 18750){
a80 = 75;
// Connect to WiFi access point.
Serial.println(); Serial.println(); if (waterleft3 <= 18500){
Serial.print("Connecting to "); a80 = 74;
Serial.println(WLAN_SSID);
if (waterleft3 <= 18250){
WiFi.begin(WLAN_SSID, WLAN_PASS); a80 = 73;
while (WiFi.status() != WL_CONNECTED) {
delay(500); if (waterleft3 <= 18000){
Serial.print("."); a80 = 72;
}
Serial.println(); if (waterleft3 <= 17750){
a80 = 71;
Serial.println("WiFi connected");
Serial.println("IP address: "); if (waterleft3 <= 17500){
Serial.println(WiFi.localIP()); a80 = 70;
if (waterleft3 <= 17500){
a80 = 69;
}
if (waterleft3 <= 17250){
uint32_t x=0; a80 = 68;
void loop() { if (waterleft3 <= 17000){
// Ensure the connection to the MQTT server is a80 = 67;
alive (this will make the first
// connection and automatically reconnect when if (waterleft3 <= 16750){
disconnected). See the MQTT_connect a80 = 66;
// function definition further below.
if (waterleft3 <= 16500){
MQTT_connect(); a80 = 65;
while (NodeMCU.available() > 0) { if (waterleft3 <= 16250){
waterleft3 = NodeMCU.parseInt(); a80 = 64;
if (NodeMCU.read() == '\n'){
if (waterleft3 <= 16000){
a80 = 63;
a80_stream.publish(a80);
Serial.println(a80); if (waterleft3 <= 15750){
a80 = 62;
if (waterleft3 <= 20000){
119
if (waterleft3 <= 15500){
a80 = 61; if (waterleft3 <= 10950){
a80 = 42;
if (waterleft3 <= 15250){
a80 = 60; if (waterleft3 <= 10500){
a80 = 41;
if (waterleft3 <= 15000){
a80 = 59; if (waterleft3 <= 10250){
a80 = 40;
if (waterleft3 <= 14750){
a80 = 58; if (waterleft3 <= 10000){
a80 = 39;
if (waterleft3 <= 14500){
a80 = 57; if (waterleft3 <= 9750){
a80 = 38;
if (waterleft3 <= 14250){
a80 = 56; if (waterleft3 <= 9500){
a80 = 37;
if (waterleft3 <= 14000){
a80 = 55; if (waterleft3 <= 9250){
a80 = 36;
if (waterleft3 <= 13750){
a80 = 54; if (waterleft3 <= 9000){
a80 = 35;
if (waterleft3 <= 13500){
a80 = 53; if (waterleft3 <= 8750){
a80 = 34;
if (waterleft3 <= 13250){
a80 = 52; if (waterleft3 <= 8500){
a80 = 33;
if (waterleft3 <= 13000){
a80 = 51; if (waterleft3 <= 8250){
a80 = 32;
if (waterleft3 <= 12750){
a80 = 50; if (waterleft3 <= 8000){
a80 = 31;
if (waterleft3 <= 12500){
a80 = 49; if (waterleft3 <= 7750){
a80 = 30;
if (waterleft3 <= 12250){
a80 = 48; if (waterleft3 <= 7500){
a80 = 29;
if (waterleft3 <= 12000){
a80 = 47; if (waterleft3 <= 7250){
a80 = 28;
if (waterleft3 <= 11750){
a80 = 46; if (waterleft3 <= 7000){
a80 = 27;
if (waterleft3 <= 11500){
a80 = 45; if (waterleft3 <= 6750){
a80 = 26;
if (waterleft3 <= 11250){
a80 = 44; if (waterleft3 <= 6500){
a80 = 25;
if (waterleft3 <= 11000){
a80 = 43; if (waterleft3 <= 6250){
120
a80 = 24; if (waterleft3 <= 1500){
a80 = 5;
if (waterleft3 <= 6000){
a80 = 23; if (waterleft3 <= 1250){
a80 = 4;
if (waterleft3 <= 5750){
a80 = 22; if (waterleft3 <= 1000){
a80 = 3;
if (waterleft3 <= 5500){
a80 = 21; if (waterleft3 <= 750){
a80 = 2;
if (waterleft3 <= 5250){
a80 = 20; if (waterleft3 <= 500){
a80 = 1;
if (waterleft3 <= 5000){
a80 = 19; if (waterleft3 <= 250){
a80 = 0;
if (waterleft3 <= 4750){ }
a80 = 18;
if (waterleft3 <= 4500){ }}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}
a80 = 17; }}}}}}}}}}}}}}}}}}}}
delay(10);
if (waterleft3 <= 4250){
a80 = 16; }
if (waterleft3 <= 4000){ // Function to connect and reconnect as necessary
a80 = 15; to the MQTT server.
// Should be called in the loop function and it will
if (waterleft3 <= 3750){ take care if connecting.
a80 = 14; void MQTT_connect() {
int8_t ret;
if (waterleft3 <= 3500){
a80 = 13; // Stop if already connected.
if (mqtt.connected()) {
if (waterleft3 <= 3250){ return;
a80 = 12; }
if (waterleft3 <= 3000){ Serial.print("Connecting to MQTT... ");
a80 = 11;
uint8_t retries = 3;
if (waterleft3 <= 2750){ while ((ret = mqtt.connect()) != 0) { // connect will
a80 = 10; return 0 for connected
Serial.println(mqtt.connectErrorString(ret));
if (waterleft3 <= 2550){ Serial.println("Retrying MQTT connection in 5
a80 = 9; seconds...");
mqtt.disconnect();
if (waterleft3 <= 2250){ delay(5000); // wait 5 seconds
a80 = 8; retries--;
if (retries == 0) {
if (waterleft3 <= 2000){ // basically die and wait for WDT to reset me
a80 = 7; while (1);
}
if (waterleft3 <= 1750){ }
a80 = 6; Serial.println("MQTT Connected!");
}
121
if (EEPROM.read(1) == 0xFF) //To read byte from
WATER DISPENSER 3 (ARDUINO) the EEPEOM
{
EEPROM.put(1,totalMilliLitres); //To write any
#include <SoftwareSerial.h> data or object to the EEPROM
#include <Wire.h> }
else
#include <EEPROM.h> {
SoftwareSerial ArduinoUno(4,5); EEPROM.get(1,totalMilliLitres); //To read any
data type or object from the EEPROM
}
byte sensorInterrupt = 0; // 0 = digital pin 2 Serial.println(totalMilliLitres);
byte sensorPin = 2; }
void loop() {
// The hall-effect flow sensor outputs // put your main code here, to run repeatedly:
approximately 4.5 pulses per second per delay(500);
// litre/minute of flow.
float calibrationFactor = 5.45; Serial.println(dispRead);
dispRead = totalMl - totalMilliLitres;
volatile byte pulseCount;
int Reset = 7;
ArduinoUno.print(dispRead);
ArduinoUno.println("\n");
float flowRate;
unsigned int flowMilliLitres; delay(100);
unsigned long totalMilliLitres, tempTotal=-1;
unsigned long oldTime; if((millis() - oldTime) > 1000) // Only process
counters once per second
int totalMl = 20000; {
int dispRead; // Disable the interrupt while calculating flow
rate and sending the value to
void setup() { // the host
// put your setup code here, to run once: detachInterrupt(sensorInterrupt);
Serial.begin(9600);
ArduinoUno.begin(4800); // Because this loop may not complete in exactly
1 second intervals we calculate
pinMode(Reset, INPUT); // the number of milliseconds that have passed
pinMode(sensorPin, INPUT); since the last execution and use
digitalWrite(sensorPin, HIGH); // that to scale the output. We also apply the
calibrationFactor to scale the output
pulseCount = 0; // based on the number of pulses per second per
flowRate = 0.0; units of measure (litres/minute in
flowMilliLitres = 0; // this case) coming from the sensor.
totalMilliLitres = 0; flowRate = ((1000.0 / (millis() - oldTime)) *
oldTime = 0; pulseCount) / calibrationFactor;
// Note the time this processing pass was
// The Hall-effect sensor is connected to pin 2 executed. Note that because we've
which uses interrupt 0. // disabled interrupts the millis() function won't
// Configured to trigger on a FALLING state change actually be incrementing right
(transition from HIGH // at this point, but it will still return the value it
// state to LOW state) was set to just before
attachInterrupt(sensorInterrupt, pulseCounter, // interrupts went away.
FALLING); oldTime = millis();
122
// Divide the flow rate in litres/minute by 60 to int t80 = 80;
determine how many litres have
// passed through the sensor in this 1 second /************************* WiFi Access Point
interval, then multiply by 1000 to *********************************/
// convert to millilitres.
flowMilliLitres = (flowRate / 60 * 1000); #define WLAN_SSID "MyAP" // enter your WiFi
SSID
// Add the millilitres passed in this second to the #define WLAN_PASS "12345678" // this is your
cumulative total WiFi password
totalMilliLitres += flowMilliLitres;
/************************* Adafruit.io Setup
*********************************/
EEPROM.put(1,totalMilliLitres);
// Reset the pulse counter so we can start #define MQTT_SERVER "192.168.254.152" //
incrementing again change this to your Pi IP_address
pulseCount = 0; #define MQTT_SERVERPORT 1883 // use
8883 for SSL
// Enable the interrupt again now that we've #define MQTT_USERNAME "" // empty (If broker
finished sending output has been configured with a username)
attachInterrupt(sensorInterrupt, pulseCounter, #define MQTT_KEY "" // empty (If broker has
FALLING); been configured with a password)
}
if (digitalRead(Reset) == HIGH) /************ Global State (you don't need to
{ change this!) ******************/
EEPROMreset();
} // Create an ESP8266 WiFiClient class to connect to
the MQTT server.
WiFiClient client;
} // or... use WiFiFlientSecure for SSL
//WiFiClientSecure client;
void pulseCounter()
{ // Setup the MQTT client class by passing in the
// Increment the pulse counter WiFi client and MQTT server and login details.
pulseCount++; Adafruit_MQTT_Client mqtt(&client,
} MQTT_SERVER, MQTT_SERVERPORT,
MQTT_USERNAME, MQTT_KEY);
void EEPROMreset()
{ /****************************** data stream
totalMilliLitres = 0; publish/subscribe
for (int i = 0; i <EEPROM.length(); i++) { ***************************************/
EEPROM.write(i,0);
} Adafruit_MQTT_Publish t80_stream =
} Adafruit_MQTT_Publish(&mqtt, MQTT_USERNAME
"t80"); // change the topic
WATER DISPENSER 3 (NODEMCU)
#include <ESP8266WiFi.h> /*************************** Sketch Code
#include <SoftwareSerial.h> ************************************/
#include <FirebaseArduino.h>
#include "Adafruit_MQTT.h" // Bug workaround for Arduino 1.6.6, it seems to
#include "Adafruit_MQTT_Client.h" need a function declaration
// for some reason (only affects ESP8266, likely an
arduino-builder bug).
SoftwareSerial NodeMCU(D2,D3); void MQTT_connect();
int waterleft1;
void setup() {
123
Serial.begin(9600);
NodeMCU.begin(4800); if (waterleft1 <= 19000){
pinMode(D2,INPUT); t80 = 76;
pinMode(D3,OUTPUT);
Serial.println(F("Adafruit MQTT demo")); if (waterleft1 <= 18750){
t80 = 75;
// Connect to WiFi access point.
Serial.println(); Serial.println(); if (waterleft1 <= 18500){
Serial.print("Connecting to "); t80 = 74;
Serial.println(WLAN_SSID);
if (waterleft1 <= 18250){
WiFi.begin(WLAN_SSID, WLAN_PASS); t80 = 73;
while (WiFi.status() != WL_CONNECTED) {
delay(500); if (waterleft1 <= 18000){
Serial.print("."); t80 = 72;
}
Serial.println(); if (waterleft1 <= 17750){
t80 = 71;
Serial.println("WiFi connected");
Serial.println("IP address: "); if (waterleft1 <= 17500){
Serial.println(WiFi.localIP()); t80 = 70;
if (waterleft1 <= 17500){
t80 = 69;
}
if (waterleft1 <= 17250){
uint32_t x=0; t80 = 68;
void loop() { if (waterleft1 <= 17000){
// Ensure the connection to the MQTT server is t80 = 67;
alive (this will make the first
// connection and automatically reconnect when if (waterleft1 <= 16750){
disconnected). See the MQTT_connect t80 = 66;
// function definition further below.
if (waterleft1 <= 16500){
MQTT_connect(); t80 = 65;
if (waterleft1 <= 16250){
while (NodeMCU.available() > 0) { t80 = 64;
waterleft1 = NodeMCU.parseInt();
if (NodeMCU.read() == '\n'){ if (waterleft1 <= 16000){
Serial.println(waterleft1); t80 = 63;
t80_stream.publish(t80); if (waterleft1 <= 15750){
t80 = 62;
if (waterleft1 <= 20000){
t80 = 80; if (waterleft1 <= 15500){
t80 = 61;
if (waterleft1 <= 19750){
t80 = 79; if (waterleft1 <= 15250){
t80 = 60;
if (waterleft1 <= 19500){
t80 = 78; if (waterleft1 <= 15000){
t80 = 59;
if (waterleft1 <= 19250){
t80 = 77; if (waterleft1 <= 14750){
124
t80 = 58; if (waterleft1 <= 10000){
t80 = 39;
if (waterleft1 <= 14500){
t80 = 57; if (waterleft1 <= 9750){
t80 = 38;
if (waterleft1 <= 14250){
t80 = 56; if (waterleft1 <= 9500){
t80 = 37;
if (waterleft1 <= 14000){
t80 = 55; if (waterleft1 <= 9250){
t80 = 36;
if (waterleft1 <= 13750){
t80 = 54; if (waterleft1 <= 9000){
t80 = 35;
if (waterleft1 <= 13500){
t80 = 53; if (waterleft1 <= 8750){
t80 = 34;
if (waterleft1 <= 13250){
t80 = 52; if (waterleft1 <= 8500){
t80 = 33;
if (waterleft1 <= 13000){
t80 = 51; if (waterleft1 <= 8250){
t80 = 32;
if (waterleft1 <= 12750){
t80 = 50; if (waterleft1 <= 8000){
t80 = 31;
if (waterleft1 <= 12500){
t80 = 49; if (waterleft1 <= 7750){
t80 = 30;
if (waterleft1 <= 12250){
t80 = 48; if (waterleft1 <= 7500){
t80 = 29;
if (waterleft1 <= 12000){
t80 = 47; if (waterleft1 <= 7250){
t80 = 28;
if (waterleft1 <= 11750){
t80 = 46; if (waterleft1 <= 7000){
t80 = 27;
if (waterleft1 <= 11500){
t80 = 45; if (waterleft1 <= 6750){
t80 = 26;
if (waterleft1 <= 11250){
t80 = 44; if (waterleft1 <= 6500){
t80 = 25;
if (waterleft1 <= 11000){
t80 = 43; if (waterleft1 <= 6250){
t80 = 24;
if (waterleft1 <= 10950){
t80 = 42; if (waterleft1 <= 6000){
t80 = 23;
if (waterleft1 <= 10500){
t80 = 41; if (waterleft1 <= 5750){
t80 = 22;
if (waterleft1 <= 10250){
t80 = 40; if (waterleft1 <= 5500){
t80 = 21;
125
t80 = 2;
if (waterleft1 <= 5250){
t80 = 20; if (waterleft1 <= 500){
t80 = 1;
if (waterleft1 <= 5000){
t80 = 19; if (waterleft1 <= 250){
t80 = 0;
if (waterleft1 <= 4750){ }
t80 = 18;
}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}
if (waterleft1 <= 4500){ }}}}}}}}}}}}}}}}}}}
t80 = 17; delay(10);
if (waterleft1 <= 4250){
t80 = 16; }
if (waterleft1 <= 4000){ // Function to connect and reconnect as necessary
t80 = 15; to the MQTT server.
// Should be called in the loop function and it will
if (waterleft1 <= 3750){ take care if connecting.
t80 = 14; void MQTT_connect() {
int8_t ret;
if (waterleft1 <= 3500){
t80 = 13; // Stop if already connected.
if (mqtt.connected()) {
if (waterleft1 <= 3250){ return;
t80 = 12; }
if (waterleft1 <= 3000){ Serial.print("Connecting to MQTT... ");
t80 = 11;
uint8_t retries = 3;
if (waterleft1 <= 2750){ while ((ret = mqtt.connect()) != 0) { // connect will
t80 = 10; return 0 for connected
Serial.println(mqtt.connectErrorString(ret));
if (waterleft1 <= 2550){ Serial.println("Retrying MQTT connection in 5
t80 = 9; seconds...");
mqtt.disconnect();
if (waterleft1 <= 2250){ delay(5000); // wait 5 seconds
t80 = 8; retries--;
if (retries == 0) {
if (waterleft1 <= 2000){ // basically die and wait for WDT to reset me
t80 = 7; while (1);
}
if (waterleft1 <= 1750){ }
t80 = 6; Serial.println("MQTT Connected!");
}
if (waterleft1 <= 1500){
t80 = 5;
if (waterleft1 <= 1250){
t80 = 4;
if (waterleft1 <= 1000){
t80 = 3;
if (waterleft1 <= 750){
126
You might also like
- MSFT Windows Server 2012 R2 Member Server BaselineNo ratings yetMSFT Windows Server 2012 R2 Member Server Baseline47 pages
- Family Ojuju:wght@200 800&family Quicksand:wght@300 700&display SwapNo ratings yetFamily Ojuju:wght@200 800&family Quicksand:wght@300 700&display Swap25 pages
- MSFT Windows Server 2012 R2 Domain Controller BaselineNo ratings yetMSFT Windows Server 2012 R2 Domain Controller Baseline46 pages
- HTML, Body, Div, Span, Applet, Object, IframeNo ratings yetHTML, Body, Div, Span, Applet, Object, Iframe28 pages
- fswd lab manual(1-8) - (Program&Output only)-IT3511No ratings yetfswd lab manual(1-8) - (Program&Output only)-IT351165 pages
- React Portfolio App Development: Increase your online presence and create your personal brandFrom EverandReact Portfolio App Development: Increase your online presence and create your personal brandNo ratings yet
- (Chapter 24) Microwave Radio Communications and System Gain (178-186)No ratings yet(Chapter 24) Microwave Radio Communications and System Gain (178-186)9 pages
- Placeholder - Com - The Free Image Placeholder Service Favoured by DesignersNo ratings yetPlaceholder - Com - The Free Image Placeholder Service Favoured by Designers1 page
- The Branding Process of BNBranding... Insight First. AlwaysNo ratings yetThe Branding Process of BNBranding... Insight First. Always1 page
- Copy of WGU Study.com Course Mappings - JOSHNo ratings yetCopy of WGU Study.com Course Mappings - JOSH171 pages
- 6 - QB - Advanced Web Programming - SEM-6 - IT - 2023-Even PDFNo ratings yet6 - QB - Advanced Web Programming - SEM-6 - IT - 2023-Even PDF5 pages
- 1st Summative-Test-NET-12-for 2nd QuaterNo ratings yet1st Summative-Test-NET-12-for 2nd Quater5 pages
- Top 60 HTML Amp HTML5 Interview Questions Amp Answers 2022No ratings yetTop 60 HTML Amp HTML5 Interview Questions Amp Answers 20229 pages
- How To Save and Retrieve A Quality Center Test Resource - Joe Colantonio - Test Automation Geek Bibliomaniac Software ImagineerNo ratings yetHow To Save and Retrieve A Quality Center Test Resource - Joe Colantonio - Test Automation Geek Bibliomaniac Software Imagineer164 pages
