Added temporary mobile homepage

2013-01-29 18:46:04 +01:00
parent 9214a94f81
commit a9161ab097
1 changed files with 175 additions and 0 deletions
@@ -0,0 +1,175 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<title>HexGL dev page</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<link rel="stylesheet" href="css/fonts.css" type="text/css" charset="utf-8">
+		<style>
+			body {
+				background:#ccc;
+				padding:0;
+				margin:0;
+				overflow:hidden;
+				font-family:georgia;
+				text-align:center;
+				color: #666;
+			}
+			h1 {color: #666	; }
+			a { color:skyblue }
+			/*canvas { pointer-events:none; }*/
+			html, body, #main, canvas { width: 100%; height: 100%;}
+			#overlay, #titles{
+				position: absolute;
+				z-index: 1000;
+				top: 0;
+				left: 0;
+				bottom: 0;
+				right: 0;
+			}
+			#titles{
+				z-index: 1001;
+			}
+			#titles-logo{
+				position: absolute;
+				top: 0;
+				left: 0;
+				bottom: 0;
+				right: 40%;
+				background: #dedede;
+				text-align: center;
+				font-size: 4em;
+				font-weight: bold;
+				font-family: arial, sans-serif;
+				text-decoration: none;
+				color: #444444;
+			}
+			#titles-logo div{
+				display: block;
+				top: 50%;
+				position: absolute;
+				margin-top: -40px;
+				line-height: 80px;
+				width: 100%;
+				text-align: center;
+			}
+			#titles-buttons{
+				position: absolute;
+				left: 60%;
+				width: 40%;
+				height: 100%;
+				background: #bcbcbc;
+				border: none;
+				border-collapse: collapse;
+			}
+			#titles-button tr td{
+			}
+			.titles-button{
+				vertical-align: middle;
+				text-align: center;
+				font-size: 2em;
+				font-weight: bold;
+				font-family: arial, sans-serif;
+				text-decoration: none;
+				color: #444444;
+			}
+			.titles-button:hover, .titles-button:active, .titles-button:focus{
+				background: skyblue;
+			}
+		</style>
+		<link rel="stylesheet" href="css/touchcontroller.css" type="text/css" charset="utf-8">
+	</head>
+
+	<body>
+		<div id="titles">
+			<div id="titles-logo"><div>HexGL</div></div>
+			<table id="titles-buttons">
+				<tr><td class="titles-button" onclick="init(0);">START LOW</td></tr>
+				<tr><td class="titles-button" onclick="init(1);">START MID</td></tr>
+				<tr><td class="titles-button" onclick="init(2);">START HIGH</td></tr>
+			</table>
+		</div>
+		<div id="overlay"></div>
+		<div id="main"></div>
+
+		<script src="libs/Three.dev.js"></script>
+		<script src="libs/ShaderExtras.js"></script>
+		<script src="libs/postprocessing/EffectComposer.js"></script>
+		<script src="libs/postprocessing/RenderPass.js"></script>
+		<script src="libs/postprocessing/BloomPass.js"></script>
+		<script src="libs/postprocessing/ShaderPass.js"></script>
+		<script src="libs/postprocessing/MaskPass.js"></script>
+		<script src="libs/Detector.js"></script>
+		<script src="libs/Stats.js"></script>
+		<script src="libs/DAT.GUI.min.js"></script>
+
+		<script src="bkcore.coffee/TouchController.js"></script>
+
+		<script src="bkcore/Timer.js"></script>
+		<script src="bkcore/ImageData.js"></script>
+		<script src="bkcore/Utils.js"></script>
+
+		<script src="bkcore/threejs/RenderManager.js"></script>
+		<script src="bkcore/threejs/Shaders.js"></script>
+		<script src="bkcore/threejs/Particles.js"></script>
+		<script src="bkcore/threejs/Loader.js"></script>
+
+		<script src="bkcore/hexgl/HUD.js"></script>
+		<script src="bkcore/hexgl/RaceData.js"></script>
+		<script src="bkcore/hexgl/ShipControls.js"></script>
+		<script src="bkcore/hexgl/ShipEffects.js"></script>
+		<script src="bkcore/hexgl/CameraChase.js"></script>
+		<script src="bkcore/hexgl/Gameplay.js"></script>
+
+		<script src="bkcore/hexgl/tracks/Cityscape.js"></script>
+
+		<script src="bkcore/hexgl/HexGL.js"></script>
+
+		<script>
+
+			var SCREEN_WIDTH = window.innerWidth;
+			var SCREEN_HEIGHT = window.innerHeight;
+
+			var container, hudcontainer;
+
+			var hexGL;
+
+			function init(quality) {
+				document.getElementById("titles").style.display = "none";
+				hudcontainer = document.getElementById("overlay");
+				container = document.getElementById("main");
+
+				hexGL = new bkcore.hexgl.HexGL({
+					document: document,
+					width: SCREEN_WIDTH,
+					height: SCREEN_HEIGHT,
+					container: container,
+					overlay: overlay,
+					quality: quality,
+					track: 'Cityscape',
+					hud: false,
+					half: true
+				});
+
+				hexGL.load({
+					onLoad: function(){
+						console.log("ALL LOADED.");
+						hexGL.init();
+						hexGL.start();
+					},
+					onError: function(s){
+						console.log("ERROR ON "+s+".");
+					},
+					onProgress: function(p, t, n)
+					{
+						console.log("LOADED "+t+" : "+n+" ( "+p.loaded+" / "+p.total+" ).");
+					}
+				});
+			}
+			
+			//init();
+
+		</script>
+
+	</body>
+</html>