$topstat = file_get_contents("top.status");
$bottomstat = file_get_contents("bottom.status");

if ($topstat == 1) {
	$topled = '(rgb(0,255,0), 30%, rgb(0,128,0));box-shadow:0px 0px 15px 1px rgb(0,255,0)';
}

if ($topstat == 0) {
	$topled = '(rgb(0,0,0), 30%, rgb(0,64,0))';
}

if ($bottomstat == 1) {
	$bottomled = '(rgb(0,255,0), 30%, rgb(0,128,0));box-shadow:0px 0px 15px 1px rgb(0,255,0)';
}

if ($bottomstat == 0) {
	$bottomled = '(rgb(0,0,0), 30%, rgb(0,64,0))';
}

echo "<!DOCTYPE html>
<html lang='en'>
	<head>
		<script src='scripts/jquery.min.js'></script>
		<title>Light Controller</title>
		<link href='//fonts.googleapis.com/css?family=Raleway:400,300,600' rel='stylesheet' type='text/css'>
		<link href='style.css' rel='stylesheet' type='text/css'>
		<link rel='icon' type='image/png' href='images/favicon.ico'>
		<meta name='viewport' content='width=device-width, initial-scale=1'>
	</head>
	<body> 
		<div class='container'>
			<center>
				<h2>
					LitePi<img src='./images/light.png' height='35px' style='-webkit-filter:hue-rotate(3deg);-webkit-filter:brightness(130%);filter:hue-rotate(3deg);filter:brightness(130%);'>
				</h2>
				<div class='outlet' style='width: 307px;height:460px;background-image:url(images/plate.png);'>
					<a href='invtop.php'><img src='./images/outlet.png' style='height:135px;margin:60px 10px 20px 67px;float:left;'></a>
					<div style='float:left;width:20px;height:20px;border-radius:10px;background:radial-gradient$topled;margin:60px 0px 0px 0px;'></div>
					<img src='./images/screw.png' height='30px' style='margin:0px 28px 0px;'>
					<a href='invbottom.php'><img src='./images/outlet.png' style='height:135px;margin:10px 10px 60px 67px;float:left;'></a>
					<div style='float:left;width:20px;height:20px;border-radius:10px;background:radial-gradient$bottomled;margin:10px 0px 0px 0px;'></div>
				</div>
			</center>
		</div>
	</body>
</html>"