unoseistres/mobile.html

## mobile.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 biatch");
				/* console.log("mobile"); */
			});

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


			socket.on ('backcolor', function(data){
				console.log(data);
				document.body.style.backgroundColor= "#000000";
				/* document.getElementById('body').innerHTML = "#000000"; */
			});

/////////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


			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;
				accZ = Math.round(e.accelerationIncludingGravity.z*10) / 10;

				movement = 10;

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


				if (x >= 2){

				console.log ("greater than two");
				var color = (document.body.style.backgroundColor= "#F25858");

				}else{
				console.log ("less than two");
				var color =	(document.body.style.backgroundColor= "#AF88EC");
				}


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

			}


});

			var sendColor = function(body){
					console.log("coloring" + body);
					socket.emit('backcolor', body);
			};


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

			};


		</script>
		<style>
		#accel2 {
		visibility: hidden;
		}

		body{
			background-color: fuchsia;
		}
		</style>

	</head>
 <body>
 <p id="accel"> "accelerometer of phone"</p>
 <p id="accel2"> "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);">

 <input id="body" name="body">
 <input type="submit" value="submit" onclick="sendColor(document.getElementById('body').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 biatch");
	/* console.log("mobile"); */
	});

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


	socket.on ('backcolor', function(data){
	console.log(data);
	document.body.style.backgroundColor= "#000000";
	/* document.getElementById('body').innerHTML = "#000000"; */
	});

	/////////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


	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;
	accZ = Math.round(e.accelerationIncludingGravity.z*10) / 10;

	movement = 10;

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



	if (x >= 2){

	console.log ("greater than two");
	var color = (document.body.style.backgroundColor= "#F25858");

	}else{
	console.log ("less than two");
	var color = (document.body.style.backgroundColor= "#AF88EC");
	}


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

	}


	});

	var sendColor = function(body){
	console.log("coloring" + body);
	socket.emit('backcolor', body);
	};



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

	};




	</script>
	<style>
	#accel2 {
	visibility: hidden;
	}

	body{
	background-color: fuchsia;
	}
	</style>

	</head>
	<body>
	<p id="accel"> "accelerometer of phone"</p>
	<p id="accel2"> "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);">

	<input id="body" name="body">
	<input type="submit" value="submit" onclick="sendColor(document.getElementById('body').value);">


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