unoseistres/index.html

## index.html
<html>
	<head>
		<script type="text/javascript" src="/socket.io/socket.io.js"></script>
		<script type="text/javascript">

			var socket = io.connect('http://104.131.93.171');

			socket.on('connect', function() {
				console.log("Connected");
			});

			// Receive from any event
			socket.on('chatmessage', function (data) {
				console.log(data);
				document.getElementById('messages').innerHTML = "" + data +
 + "" + document.getElementById('messages').innerHTML;
			});


/////////MOBILE ACCEL CODE

 var isMobile = {
					Android: function() {
						return navigator.userAgent.match(/Android/i);
						},
					BlackBerry: function() {
						return navigator.userAgent.match(/BlackBerry/i);
						},
					iOS: function() {
						return navigator.userAgent.match(/iPhone|iPad|iPod/i);
						},
					Opera: function() {
						return navigator.userAgent.match(/Opera Mini/i);
						},
					Windows: function() {
						return navigator.userAgent.match(/IEMobile/i);
						},
					any: function() {

return (isMobile.Android() || isMobile.BlackBerry() || 	isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};


//check acceleramtor ONLY if it is MOBILE

 			if(isMobile.any()){

			window.addEventListener('load', function() {

				window.URL = window.URL || window.webkitURL || window.mozURL || 				window.msURL; navigator.getUserMedia = navigator.getUserMedia ||				navigator.webkitGetUserMedia || navigator.mozGetUserMedia || 				navigator.msGetUserMedia;


			window.ondevicemotion = function(e) {
				/* console.log("hi"); */
				var x = e.accelerationIncludingGravity.x;
				var y = e.accelerationIncludingGravity.y;
				var z = e.accelerationIncludingGravity.z;

				accX = Math.round(e.accelerationIncludingGravity.x*10) / 10;
				accY = Math.round(e.accelerationIncludingGravity.y*10) / 10;

				movement = 10;

				x = -(accX / 10) * movement;
				y = -(accY / 10) * movement;


				if (x >= 2){
					document.body.style.backgroundColor= "#F25858";
				}else{
					document.body.style.backgroundColor= "#AF88EC";
				}


			document.getElementById("accel").innerHTML = x + " " + y + " " + z;

			}

});

}


			var sendmessage = function(message) {
				console.log("chatmessage: " + message);
				socket.emit('chatmessage', message);
			};

			/*
var changeBackground = function(){
				console.log("all background changed!");
				socket.emit();
			}
*/

		</script>
		<style>
		p{
		visibility: hidden;
		}


		body{
			background-color: fuchsia;
		}


		</style>

	</head>
 <body>
 <p id="accel"> "accelerometer of phone"</p>

 <div id="messages">
 No Messages Yet
 </div>
 <input type="text" id="message" name="message">
 <input type="submit" value="submit" onclick="sendmessage(document.getElementById('message').value);">

<!--  //color selector  -->
 <input type = "color" onchange="selectColor(this.value)">
 </body>
</html>
	<html>
	<head>
	<script type="text/javascript" src="/socket.io/socket.io.js"></script>
	<script type="text/javascript">

	var socket = io.connect('http://104.131.93.171');

	socket.on('connect', function() {
	console.log("Connected");
	});

	// Receive from any event
	socket.on('chatmessage', function (data) {
	console.log(data);
	document.getElementById('messages').innerHTML = "" + data +
	+ "" + document.getElementById('messages').innerHTML;
	});


	/////////MOBILE ACCEL CODE

	var isMobile = {
	Android: function() {
	return navigator.userAgent.match(/Android/i);
	},
	BlackBerry: function() {
	return navigator.userAgent.match(/BlackBerry/i);
	},
	iOS: function() {
	return navigator.userAgent.match(/iPhone\|iPad\|iPod/i);
	},
	Opera: function() {
	return navigator.userAgent.match(/Opera Mini/i);
	},
	Windows: function() {
	return navigator.userAgent.match(/IEMobile/i);
	},
	any: function() {

	return (isMobile.Android() \|\| isMobile.BlackBerry() \|\| isMobile.iOS() \|\| isMobile.Opera() \|\| isMobile.Windows());
	}
	};


	//check acceleramtor ONLY if it is MOBILE

	if(isMobile.any()){

	window.addEventListener('load', function() {

	window.URL = window.URL \|\| window.webkitURL \|\| window.mozURL \|\| window.msURL; navigator.getUserMedia = navigator.getUserMedia \|\| navigator.webkitGetUserMedia \|\| navigator.mozGetUserMedia \|\| navigator.msGetUserMedia;



	window.ondevicemotion = function(e) {
	/* console.log("hi"); */
	var x = e.accelerationIncludingGravity.x;
	var y = e.accelerationIncludingGravity.y;
	var z = e.accelerationIncludingGravity.z;

	accX = Math.round(e.accelerationIncludingGravity.x*10) / 10;
	accY = Math.round(e.accelerationIncludingGravity.y*10) / 10;

	movement = 10;

	x = -(accX / 10) * movement;
	y = -(accY / 10) * movement;



	if (x >= 2){
	document.body.style.backgroundColor= "#F25858";
	}else{
	document.body.style.backgroundColor= "#AF88EC";
	}


	document.getElementById("accel").innerHTML = x + " " + y + " " + z;

	}

	});

	}


	var sendmessage = function(message) {
	console.log("chatmessage: " + message);
	socket.emit('chatmessage', message);
	};

	/*
	var changeBackground = function(){
	console.log("all background changed!");
	socket.emit();
	}
	*/

	</script>
	<style>
	p{
	visibility: hidden;
	}



	body{
	background-color: fuchsia;
	}


	</style>

	</head>
	<body>
	<p id="accel"> "accelerometer of phone"</p>

	<div id="messages">
	No Messages Yet
	</div>
	<input type="text" id="message" name="message">
	<input type="submit" value="submit" onclick="sendmessage(document.getElementById('message').value);">

	<!-- //color selector -->
	<input type = "color" onchange="selectColor(this.value)">
	</body>
	</html>