Spaces:

awacke1
/

DigitalCity

Running

App Files Files Community

awacke1 commited on Jun 4, 2022

Commit

66259c7

1 Parent(s): ab4259d

Upload index.html

Browse files

Files changed (1) hide show

index.html +180 -21

index.html CHANGED Viewed

@@ -1,24 +1,183 @@
 <!DOCTYPE html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>
-				You can modify this app directly by editing <i>index.html</i> in the
-				Files and versions tab.
-			</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank"
-					>Spaces documentation</a
-				>.
-			</p>
 		</div>
-	</body>
 </html>

 <!DOCTYPE html>
+<html lang="en-us">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<title>XR Digital City</title>
+    <link rel="shortcut icon" href="TemplateData/img/favicon.ico">
+    <link rel="stylesheet" href="TemplateData/css/style.css">
+</head>
+<body>
+	<div class="keepRatio">
+		<div id="gameContainer" class="unity-desktop webgl-content">
+			<button id="fullScreenButton" onclick="ToggleFullScreen()"></button>
+			<canvas id="gameCanvas"></canvas>
+			<div id="loadingBlock">
+				<img class="logo" src="TemplateData/img/Logo.png"></img>
+				<span class="subtitle"> CATCHPHRASE <br>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+				</span>
+				<div id="progressBar">
+					<div>LOADING ...</div>
+					<div class="centered">
+						<div id="emptyBar"></div>
+						<div id="fullBar"></div>
+					</div>
+				</div>
+				<div id="warningBrowserBlock" style="display:none;">
+					<div class="warningBrowserText">
+						Your browser may not be compatible with this website. For an optimal experience, we suggest you to download one of this popular web browsers.
+					</div>
+					<div class="browserIcons">
+						<a href="https://www.mozilla.org/firefox" target="_blank"><img src="TemplateData/img/browser-firefox.png" alt="Firefox browser"></a>
+						<a href="https://www.google.com/chrome" target="_blank"><img src="TemplateData/img/browser-chrome.png" alt="Chrome browser"></a>
+						<a href="https://www.apple.com/safari/" target="_blank"><img src="TemplateData/img/browser-safari.png" alt="Safari browser"></a>
+					</div>
+				</div>
+				<div id="warningMobileBlock" style="display:none;">
+					<div class="warningBrowserText">
+						Please note that Unity WebGL is not currently supported on mobiles.
+					</div>
+				</div>
+			</div>
+			<div id="errorBrowserBlock" style="display:none;">
+				<img class="logo" src="TemplateData/img/Logo.png"></img>
+				<span class="subtitle"> CATCHPHRASE <br>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+				</span>
+				<div id="errorContent" style="display:none;">
+					<div class="errorBrowserText">
+						Your browser does not support WebGL. <br> You can download one of this popular web browsers.
+					</div>
+					<div class="browserIcons">
+						<a href="https://www.mozilla.org/firefox" target="_blank"><img src="TemplateData/img/browser-firefox.png" alt="Firefox browser"></a>
+						<a href="https://www.google.com/chrome" target="_blank"><img src="TemplateData/img/browser-chrome.png" alt="Chrome browser"></a>
+						<a href="https://www.apple.com/safari/" target="_blank"><img src="TemplateData/img/browser-safari.png" alt="Safari browser"></a>
+					</div>
+				</div>
+			</div>
 		</div>
+    </div>
+	<script>
+		function ToggleFullScreen() {
+			var isInFullScreen = (document.fullscreenElement && document.fullscreenElement !== null) ||
+			(document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||
+			(document.msFullscreenElement && document.msFullscreenElement !== null);
+			var element = document.body.getElementsByClassName("webgl-content")[0];
+			if (!isInFullScreen) {
+				document.getElementById("fullScreenButton").style.backgroundImage="url('TemplateData/img/fullScreen_off.png')";
+				if (element.webkitRequestFullscreen) {
+					element.webkitRequestFullscreen();
+				} else if (element.msRequestFullscreen) {
+					element.msRequestFullscreen();
+				} else if (element.requestFullscreen) {
+					element.requestFullscreen();
+				}
+			}
+			else {
+				document.getElementById("fullScreenButton").style.backgroundImage="url('TemplateData/img/fullScreen_on.png')";
+				if (document.exitFullscreen) {
+					document.exitFullscreen();
+				} else if (document.webkitExitFullscreen) { //Chrome, Safari and Opera
+					document.webkitExitFullscreen();
+				} else if (document.msExitFullscreen) { //IE/Edge
+					document.msExitFullscreen();
+				}
+			}
+		}
+		function CheckCompatibility()
+		{
+			if (!hasWebGL()){
+				document.getElementById("errorBrowserBlock").style.display = "inherit";
+			}
+			else if ( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) )
+			{
+				document.getElementById("warningMobileBlock").style.display = "inherit";
+			}
+			else if (!isFirefox&&!isSafari&&!isChrome) {
+				document.getElementById("warningBrowserBlock").style.display = "inherit";
+			}
+		}
+		function hasWebGL() {
+			var supported;
+			try {
+				var canvas = document.createElement('canvas');
+				supported = !! window.WebGLRenderingContext && (canvas.getContext('webgl') || canvas.getContext('experimental-webgl'));
+			} catch(e) { supported = false; }
+			try {
+				// let is by no means required, but will help us rule out some old browsers/devices with potentially buggy implementations: http://caniuse.com/#feat=let
+				eval('let foo = 123;');
+			} catch (e) { supported = false; }
+			canvas = undefined;
+			return supported;
+		}
+		var isFirefox = typeof InstallTrigger !== 'undefined';
+		var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && safari.pushNotification));
+		var isChromium = window.chrome;
+		var winNav = window.navigator;
+		var vendorName = winNav.vendor;
+		var isOpera = typeof window.opr !== "undefined";
+		var isIEedge = winNav.userAgent.indexOf("Edge") > -1;
+		var isIOSChrome = winNav.userAgent.match("CriOS");
+		var isChrome =  isIOSChrome || (isChromium !== null && typeof isChromium !== "undefined" && vendorName === "Google Inc." && isOpera === false && isIEedge === false);
+		var buildUrl = "Build";
+		var loaderUrl = buildUrl + "/c4c07f153778d8abf1842ac44b3ff052.js";
+		var config = {
+        dataUrl: buildUrl + "/001c52bdff2d026bf96010d609ff9d11.data",
+        frameworkUrl: buildUrl + "/0d343d2d6a85b10bff5a18cd9d60d9d8.js",
+        codeUrl: buildUrl + "/fbc9d91b0effc450e63aec7cce3769d8.wasm",
+        streamingAssetsUrl: "StreamingAssets",
+        companyName: "DefaultCompany",
+        productName: "ANIKO",
+        productVersion: "0.1",
+      };
+		var container = document.querySelector("#gameContainer");
+		var canvas = document.querySelector("#gameCanvas");
+		var loadingBar = document.querySelector("#loadingBlock");
+		var progressBarFull = document.querySelector("#fullBar");
+		var progressBarEmpty = document.querySelector("#emptyBar");
+		var fullscreenButton = document.querySelector("#fullScreenButton");
+		if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
+			container.className = "unity-mobile";
+			config.devicePixelRatio = 1;
+		}
+		CheckCompatibility();
+		var script = document.createElement("script");
+		script.src = loaderUrl;
+		script.onload = () => {
+			createUnityInstance(canvas, config, (progress) => {
+			progressBarFull.style.width = 100 * progress + "%";
+			progressBarEmpty.style.width = (100 * (1 - progress)) + "%";
+		}).then((unityInstance) => {
+			loadingBar.style.display = "none";
+			fullscreenButton.onclick = () => {
+			ToggleFullScreen();
+		  };
+		}).catch((message) => {
+			alert(message);
+		});
+		};
+		document.body.appendChild(script);
+    </script>
+  </body>
 </html>