dan-mckay/index.html

## index.html
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>photoresistor</title>
        <style media="screen">
            html, body{
                min-height: 100%;
            }

            #myDiv {
                width: 600px;
                padding: 10px;
                margin: 40px auto;
                background-color: #000;
                color: #fff;
                -moz-border-radius: 18px;
                -webkit-border-radius: 18px;
                border-radius: 18px;
                -moz-box-shadow: 0px 0px 15px #000000;
                -webkit-box-shadow: 0px 0px 15px #000000;
                box-shadow: 0px 0px 15px #000000;
                -webkit-transform: perspective(600);

            }

        </style>
        <script src="/socket.io/socket.io.js"></script>
        <script>
            var socket = io.connect('http://127.0.0.1:8000');
            socket.on('value', function(e) {
                var photoValue = e.val;

                var body = document.querySelector('body');

                //var html = '<p>' + e.val + '</p>';
                //console.log(e.val);
                //document.getElementById('output').innerHTML = html;
                body.style.backgroundColor = 'rgb(' + photoValue + ',' + photoValue + ',' + photoValue + ')';

            });
            socket.on('reading', function(e) {
                var potValue = e.value;
                var div = document.getElementById('myDiv');
                //var h1 = document.querySelector('h1');
                //div.style.webkitTransform = 'rotateX(' + potValue + 'deg)';
                //div.style.webkitTransform = 'rotateY(' + potValue + 'deg)';
                //h1.innerHTML = potValue;
                div.style.opacity = potValue / 10;
            });
        </script>
    </head>
    <body id="body" class="twilight">
        <div id="myDiv">
            <h1>Lorem Ipsum</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis accumsan dictum. Nunc dictum vestibulum dolor vitae aliquam. Donec placerat, lectus eget auctor vestibulum, orci magna porttitor nibh, fermentum mollis ipsum nunc non lectus. Etiam laoreet nibh sed libero accumsan sit amet lacinia neque ultrices. Aliquam erat volutpat. Donec nisi purus, malesuada vitae porttitor in, sagittis eget enim. Pellentesque lacinia dignissim tincidunt. Nunc viverra tortor in risus aliquam sed placerat dolor tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed in urna risus. Curabitur tortor tellus, dictum vitae dignissim ut, cursus id lacus. Praesent tristique lectus id sapien commodo nec malesuada nisi consectetur.</p>

            <p>Nam viverra nisl quis metus pretium commodo. Etiam a mi eu ligula luctus consequat quis et turpis. Vivamus fringilla tellus id urna pulvinar vestibulum. Nam luctus purus a erat lacinia aliquet. Maecenas sed tempor tortor. Sed at nulla nisi, ac mattis odio. Aliquam eleifend felis quis nulla sagittis scelerisque. Nulla facilisi. Praesent ut felis urna. Nulla justo orci, consectetur ut molestie eu, iaculis sed tortor. Nullam eu ante lacus.</p>

            <p>Donec sed quam et leo adipiscing commodo. Pellentesque nec urna turpis. Nulla venenatis velit nec ligula lacinia laoreet blandit velit commodo. Donec nibh augue, laoreet ac commodo varius, pretium id sem. In hac habitasse platea dictumst. Vivamus accumsan purus quis sem ornare pharetra. In eleifend, metus ut semper bibendum, est enim faucibus diam, id ornare diam nisl non lorem. Mauris dui ligula, sagittis at luctus ac, adipiscing ac augue. Nulla iaculis ante eu velit auctor a euismod massa placerat. In sit amet dictum eros. Duis et sem quis neque volutpat porta. In velit magna, tempus a congue non, pellentesque eu mi. Etiam facilisis posuere dui nec dictum. Curabitur at justo pretium tortor venenatis congue. Sed id viverra quam. Donec vitae ligula non massa venenatis interdum vel sit amet orci.</p>
        </div>
    </body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>photoresistor</title>
	<style media="screen">
	html, body{
	min-height: 100%;
	}

	#myDiv {
	width: 600px;
	padding: 10px;
	margin: 40px auto;
	background-color: #000;
	color: #fff;
	-moz-border-radius: 18px;
	-webkit-border-radius: 18px;
	border-radius: 18px;
	-moz-box-shadow: 0px 0px 15px #000000;
	-webkit-box-shadow: 0px 0px 15px #000000;
	box-shadow: 0px 0px 15px #000000;
	-webkit-transform: perspective(600);

	}

	</style>
	<script src="/socket.io/socket.io.js"></script>
	<script>
	var socket = io.connect('http://127.0.0.1:8000');
	socket.on('value', function(e) {
	var photoValue = e.val;

	var body = document.querySelector('body');

	//var html = '<p>' + e.val + '</p>';
	//console.log(e.val);
	//document.getElementById('output').innerHTML = html;
	body.style.backgroundColor = 'rgb(' + photoValue + ',' + photoValue + ',' + photoValue + ')';

	});
	socket.on('reading', function(e) {
	var potValue = e.value;
	var div = document.getElementById('myDiv');
	//var h1 = document.querySelector('h1');
	//div.style.webkitTransform = 'rotateX(' + potValue + 'deg)';
	//div.style.webkitTransform = 'rotateY(' + potValue + 'deg)';
	//h1.innerHTML = potValue;
	div.style.opacity = potValue / 10;
	});
	</script>
	</head>
	<body id="body" class="twilight">
	<div id="myDiv">
	<h1>Lorem Ipsum</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis accumsan dictum. Nunc dictum vestibulum dolor vitae aliquam. Donec placerat, lectus eget auctor vestibulum, orci magna porttitor nibh, fermentum mollis ipsum nunc non lectus. Etiam laoreet nibh sed libero accumsan sit amet lacinia neque ultrices. Aliquam erat volutpat. Donec nisi purus, malesuada vitae porttitor in, sagittis eget enim. Pellentesque lacinia dignissim tincidunt. Nunc viverra tortor in risus aliquam sed placerat dolor tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed in urna risus. Curabitur tortor tellus, dictum vitae dignissim ut, cursus id lacus. Praesent tristique lectus id sapien commodo nec malesuada nisi consectetur.</p>

	<p>Nam viverra nisl quis metus pretium commodo. Etiam a mi eu ligula luctus consequat quis et turpis. Vivamus fringilla tellus id urna pulvinar vestibulum. Nam luctus purus a erat lacinia aliquet. Maecenas sed tempor tortor. Sed at nulla nisi, ac mattis odio. Aliquam eleifend felis quis nulla sagittis scelerisque. Nulla facilisi. Praesent ut felis urna. Nulla justo orci, consectetur ut molestie eu, iaculis sed tortor. Nullam eu ante lacus.</p>

	<p>Donec sed quam et leo adipiscing commodo. Pellentesque nec urna turpis. Nulla venenatis velit nec ligula lacinia laoreet blandit velit commodo. Donec nibh augue, laoreet ac commodo varius, pretium id sem. In hac habitasse platea dictumst. Vivamus accumsan purus quis sem ornare pharetra. In eleifend, metus ut semper bibendum, est enim faucibus diam, id ornare diam nisl non lorem. Mauris dui ligula, sagittis at luctus ac, adipiscing ac augue. Nulla iaculis ante eu velit auctor a euismod massa placerat. In sit amet dictum eros. Duis et sem quis neque volutpat porta. In velit magna, tempus a congue non, pellentesque eu mi. Etiam facilisis posuere dui nec dictum. Curabitur at justo pretium tortor venenatis congue. Sed id viverra quam. Donec vitae ligula non massa venenatis interdum vel sit amet orci.</p>
	</div>
	</body>
	</html>