michael34435 · March 1, 2016 14:32
diff --git a/gistfile1.js b/gistfile1.js
 <!DOCTYPE html>
 <html id="play">
 <head>
 	<title>Bling Bling</title>
 	<link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
 	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>
    <audio autoplay loop>
        <source src="audio/Doh_De_Oh.mp3">
    </audio>


    <div class="vertical">
    	<img src="img/logo.gif">
        <div class="pointer"></div>
        <div class="button">
            <input type="checkbox" value="1" id="18" name="">
            <label for="18">
                <div class="click" id = "eyes"></div>
            </label>
        </div>
        <div id="pointer"></div>
        
 	<script type="text/javascript" src="slick/jquery-1.12.0.min.js"></script>
 	<script>
 		$(document).ready(function(){
 		  $("#eyes").click(function(){
 //			alert("Click Me!");
 		  });
 	  	});
 	</script>
    	<script>
    	        var xhr = new XMLHTTPRequest();
    	        var url = 'http://192.168.43.36:8080';
 		  $('#eyes').on('div click',function(){
 			xhr.open('GET', url + '/changeBlinkStatus');
 			xhr.send();
 		  });
 		
        var pointer = document.getElementById('pointer'),
            w = pointer.offsetWidth;

        pointer.style.height = w +'px';


        if(window.DeviceOrientationEvent) {

          window.addEventListener('deviceorientation', function(event) {
                var alpha;
                //  判斷是否為 iOS 裝置
                if(event.webkitpointerHeading) {
                  alpha = event.webkitpointerHeading; // iOS 裝置必須使用 event.webkitpointerHeading
                  pointer.style.WebkitTransform = 'rotate(-' + alpha + 'deg)';
                  show.innerHTML = alpha;
                }
                else {
                  alpha = event.alpha;
                  webkitAlpha = alpha;
                  if(!window.chrome) {
                    webkitAlpha = alpha-270;
                  }
                }

                pointer.style.Transform = 'rotate(' + alpha + 'deg)';
                pointer.style.WebkitTransform = 'rotate('+ webkitAlpha + 'deg)';
                pointer.style.MozTransform = 'rotate(-' + alpha + 'deg)'; 
 		
 		xhr.open('GET', url + '/pointer/' + alpha);
 		xhr.send();
 	      }, false);
        }else{
          document.querySelector('body').innerHTML = '你的瀏覽器不支援喔';
        }
        </script>
    </div>
    
    <div class="horizontal">
    	<p>請直向使用您的手機</p>
    	<p>Please browse this web vertically</p>
    </div>

    <div class="computer">
    	<p>請使用手機瀏覽此網頁</p>
    	<p>Please use your mobile to browse this website</p>
    </div>
 </body>
 </html>
	<!DOCTYPE html>
	<html id="play">
	<head>
	<title>Bling Bling</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body>
	<audio autoplay loop>
	<source src="audio/Doh_De_Oh.mp3">
	</audio>


	<div class="vertical">
	<img src="img/logo.gif">
	<div class="pointer"></div>
	<div class="button">
	<input type="checkbox" value="1" id="18" name="">
	<label for="18">
	<div class="click" id = "eyes"></div>
	</label>
	</div>
	<div id="pointer"></div>

	<script type="text/javascript" src="slick/jquery-1.12.0.min.js"></script>
	<script>
	$(document).ready(function(){
	$("#eyes").click(function(){
	// alert("Click Me!");
	});
	});
	</script>
	<script>
	var xhr = new XMLHTTPRequest();
	var url = 'http://192.168.43.36:8080';
	$('#eyes').on('div click',function(){
	xhr.open('GET', url + '/changeBlinkStatus');
	xhr.send();
	});

	var pointer = document.getElementById('pointer'),
	w = pointer.offsetWidth;

	pointer.style.height = w +'px';


	if(window.DeviceOrientationEvent) {

	window.addEventListener('deviceorientation', function(event) {
	var alpha;
	// 判斷是否為 iOS 裝置
	if(event.webkitpointerHeading) {
	alpha = event.webkitpointerHeading; // iOS 裝置必須使用 event.webkitpointerHeading
	pointer.style.WebkitTransform = 'rotate(-' + alpha + 'deg)';
	show.innerHTML = alpha;
	}
	else {
	alpha = event.alpha;
	webkitAlpha = alpha;
	if(!window.chrome) {
	webkitAlpha = alpha-270;
	}
	}

	pointer.style.Transform = 'rotate(' + alpha + 'deg)';
	pointer.style.WebkitTransform = 'rotate('+ webkitAlpha + 'deg)';
	pointer.style.MozTransform = 'rotate(-' + alpha + 'deg)';

	xhr.open('GET', url + '/pointer/' + alpha);
	xhr.send();
	}, false);
	}else{
	document.querySelector('body').innerHTML = '你的瀏覽器不支援喔';
	}
	</script>
	</div>

	<div class="horizontal">
	<p>請直向使用您的手機</p>
	<p>Please browse this web vertically</p>
	</div>

	<div class="computer">
	<p>請使用手機瀏覽此網頁</p>
	<p>Please use your mobile to browse this website</p>
	</div>
	</body>
	</html>