index.html

<!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Rubik's Cube</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="static/main.css">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
        <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
        <script src="js/gl-matrix-min.js"></script>
        <script src="js/models.js"></script>
        <script src="js/rubiks.js"></script>
        <script id="fragmentShader" type="x-shader/x-fragment">
            varying highp vec4 position;
            varying highp vec3 normal;

            uniform bool lighting;
            uniform highp vec3 eyePosition;
            uniform highp vec4 ambient;
            uniform highp vec4 diffuse;
            uniform highp vec4 specular;
            uniform highp float shininess;

            const highp vec4 lightPosition = vec4(-20, -20, -20, 1); // point light
            const highp vec4 lightColor = vec4(1, 1, 1, 1);

            void main(void) {
                if (lighting) {
                    highp vec3 position = 0.5*position.xyz / position.w;
                    highp vec3 eyeDirection = normalize(eyePosition - position);
                    highp vec3 lightPosition = lightPosition.xyz / lightPosition.w;
                    highp vec3 lightDirection = normalize(lightPosition - position);
                    highp vec3 halfAngle = normalize(lightDirection + eyeDirection);
                    highp vec4 diffuseTerm = diffuse * lightColor * max(dot(normal, lightDirection), 0.0);
                    highp vec4 specularTerm = specular * lightColor * pow(max(dot(normal, halfAngle), 0.0), shininess);
                    gl_FragColor = diffuseTerm + specularTerm + ambient;
                } else {
                    gl_FragColor = ambient;
                }
            }
        </script>
        <script id="vertexShader" type="x-shader/x-vertex">
            attribute vec3 vertexPosition;
            attribute vec3 vertexNormal;

            uniform mat4 modelViewMatrix;
            uniform mat4 projectionMatrix;
            uniform mat3 normalMatrix;

            varying vec4 position;
            varying vec3 normal;

            void main(void) {
                position = modelViewMatrix * vec4(vertexPosition, 1.0);
                gl_Position = projectionMatrix * position;
                normal = normalize(normalMatrix * vertexNormal);
            }
       </script>
    </head>
    <body class="container">
        <div class="row fill">
            <div class="col-md-5 fill">
                <h3>Rubik's Cube</h3>
                <h5 class="text-muted">A WebGL Rubik's Cube</h5>
                <a href="https://github.com/tinnywang/rubiks-cube"><img src="static/GitHub-Mark-64px.png"></a>
                <div class="controls">
                    <div>Click and drag with <span class="control">left mouse</span> to rotate a layer</div>
                    <div>Click and drag with <span class="control">right mouse</span> to rotate the Rubik"s Cube</div>
                    <div><span class="control">Space</span> for perspective view</div>
                    <div><span class="control">W</span> for front view</div>
                    <div><span class="control">A</span> for left view</div>
                    <div><span class="control">S</span> for back view</div>
                    <div><span class="control">D</span> for right view</div>
                    <div><span class="control">E</span> for top view</div>
                    <div><span class="control">Q</span> for bottom view</div>
                </div>
                <form>
	                <p>
	                <button id="reset-cube" type="button" class="btn btn-primary btn-lg">Reset</button>
	                <button id="scramble-cube" type="button" class="btn btn-primary btn-lg">Scramble</button>
                	<label for"scramble-length">Length</label> <input type="number" id="scramble-length" min="1" value="20" />
					<pre id="moveList" class="@brand-info" style="margin-top:1em">moves will appear here</pre>
					</p>
	                <p>
	                <button id="run-alg" type="button" class="btn btn-primary btn-lg">Run algorithm</button><br/>
                	<label for"algorithm">Algorithm</label> <input  class="form-control" placeholder="Algorithm" type="text" id="algorithm" />
                	</p>
                </form>
				<table id="controls">
					<tr>
						<td><button class="btn" id="move-R">R</button></td>
						<td><button class="btn" id="move-L">L</button></td>
						<td><button class="btn" id="move-U">U</button></td>
						<td><button class="btn" id="move-D">D</button></td>
						<td><button class="btn" id="move-F">F</button></td>
						<td><button class="btn" id="move-B">B</button></td>
						<td><button class="btn" id="move-M">M</button></td>
						<td><button class="btn" id="move-E">E</button></td>
						<td><button class="btn" id="move-S">S</button></td>
					</tr>
					<tr>
						<td><button class="btn" id="move-R-prime">R'</button></td>
						<td><button class="btn" id="move-L-prime">L'</button></td>
						<td><button class="btn" id="move-U-prime">U'</button></td>
						<td><button class="btn" id="move-D-prime">D'</button></td>
						<td><button class="btn" id="move-F-prime">F'</button></td>
						<td><button class="btn" id="move-B-prime">B'</button></td>
						<td><button class="btn" id="move-M-prime">M'</button></td>
						<td><button class="btn" id="move-E-prime">E'</button></td>
						<td><button class="btn" id="move-S-prime">S'</button></td>
					</tr>
					<tr>
						<td><button class="btn" id="move-R2">R2</button></td>
						<td><button class="btn" id="move-L2">L2</button></td>
						<td><button class="btn" id="move-U2">U2</button></td>
						<td><button class="btn" id="move-D2">D2</button></td>
						<td><button class="btn" id="move-F2">F2</button></td>
						<td><button class="btn" id="move-B2">B2</button></td>
						<td><button class="btn" id="move-M2">M2</button></td>
						<td><button class="btn" id="move-E2">E2</button></td>
						<td><button class="btn" id="move-S2">S2</button></td>
					</tr>
				</table>
            </div>
            <div class="col-md-7 fill" width="400" height="400">
                <canvas id="glcanvas" width="400" height="400">
            </div>
        </div>
    </body>
</html>