Spaces:
Running
Running
| <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="favicon.ico"> | |
| <link rel="stylesheet" href="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="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="browser-firefox.png" alt="Firefox browser"></a> | |
| <a href="https://www.google.com/chrome" target="_blank"><img src="browser-chrome.png" alt="Chrome browser"></a> | |
| <a href="https://www.apple.com/safari/" target="_blank"><img src="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="browser-firefox.png" alt="Firefox browser"></a> | |
| <a href="https://www.google.com/chrome" target="_blank"><img src="browser-chrome.png" alt="Chrome browser"></a> | |
| <a href="https://www.apple.com/safari/" target="_blank"><img src="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('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('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 = "/c4c07f153778d8abf1842ac44b3ff052.js"; | |
| var config = { | |
| dataUrl: "/001c52bdff2d026bf96010d609ff9d11.data", | |
| frameworkUrl: "/0d343d2d6a85b10bff5a18cd9d60d9d8.js", | |
| codeUrl: "/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> | |