Spaces:
Running
Running
| <!-- Zappar WebGL template for Unity 2020 and above versions --> | |
| <!-- NFYNT --> | |
| <html lang="en-us"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
| <meta | |
| name="viewport" | |
| content="width=device-width, initial-scale=1.0, user-scalable=no" | |
| /> | |
| <link rel="shortcut icon" href="favicon.ico" /> | |
| <title>VirtualTryOn</title> | |
| <style> | |
| html { | |
| box-sizing: border-box; | |
| } | |
| *, | |
| *:before, | |
| *:after { | |
| box-sizing: inherit; | |
| } | |
| html, | |
| body { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| } | |
| canvas { | |
| display: block; | |
| } | |
| body { | |
| margin: 0; | |
| } | |
| #unity-container { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| #unity-canvas { | |
| width: 100%; | |
| height: 100%; | |
| /*background: #80747D;*/ | |
| background: rgba(248, 225, 244, 1); | |
| } | |
| #loading-cover { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| display: flex; | |
| justify-content: center; | |
| align-items: flex-end; | |
| padding-bottom: 40px; | |
| } | |
| .spinner-container { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| #unity-loading-bar { | |
| flex: 1 1 auto; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| #unity-progress-bar-empty { | |
| width: 80%; | |
| height: 24px; | |
| margin: 0px 20px 5px 10px; | |
| text-align: left; | |
| border: 1px solid #3a457d; | |
| padding: 2px; | |
| } | |
| #unity-progress-bar-full { | |
| width: 0%; | |
| height: 100%; | |
| background: #3a457d; | |
| } | |
| .light #unity-progress-bar-empty { | |
| border-color: black; | |
| } | |
| .light #unity-progress-bar-full { | |
| background: black; | |
| } | |
| #progress-text { | |
| color: #3a457d; | |
| font-family: "Bai Jamjuree", sans-serif; | |
| font-size: 16px; | |
| width: 80%; | |
| height: 24px; | |
| margin: 0px 20px 0px 10px; | |
| text-align: right; | |
| font-weight: bold; | |
| } | |
| #loading-text { | |
| color: #3a457d; | |
| font-family: "Bai Jamjuree", sans-serif; | |
| font-size: 14px; | |
| width: 80%; | |
| height: 24px; | |
| margin: 0px 20px 0px 10px; | |
| text-align: left; | |
| text-transform: uppercase; | |
| animation: blink 2s infinite; | |
| } | |
| @keyframes blink { | |
| 50% { | |
| opacity: 0; | |
| } | |
| } | |
| .spinner, | |
| .spinner:after { | |
| border-radius: 50%; | |
| width: 5em; | |
| height: 5em; | |
| } | |
| .spinner { | |
| margin: 10px; | |
| font-size: 10px; | |
| position: relative; | |
| text-indent: -9999em; | |
| border-top: 1.1em solid rgba(58, 69, 125, 1); | |
| border-right: 1.1em solid rgba(58, 69, 125, 1); | |
| border-bottom: 1.1em solid rgba(58, 69, 125, 1); | |
| border-left: 1.1em solid rgba(58, 69, 125, 0.5); | |
| transform: translateZ(0); | |
| animation: spinner-spin 1.1s infinite linear; | |
| } | |
| @keyframes spinner-spin { | |
| 0% { | |
| transform: rotate(0deg); | |
| } | |
| 100% { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="dark"> | |
| <div id="unity-container" class="unity-desktop"> | |
| <canvas id="unity-canvas"></canvas> | |
| </div> | |
| <div class="spinner-container" style="display: none"> | |
| <div class="spinner"></div> | |
| </div> | |
| <div id="loading-cover" style="display: none"> | |
| <div id="unity-loading-bar"> | |
| <div id="progress-text">0%</div> | |
| <div id="unity-progress-bar-empty" style="display: none"> | |
| <div id="unity-progress-bar-full"></div> | |
| </div> | |
| <div id="loading-text">Loading...</div> | |
| <!--<div class="spinner"></div>--> | |
| </div> | |
| </div> | |
| <script type="text/javascript" src="zappar-cv.js"></script> | |
| <script> | |
| var db = indexedDB.open("dummy_indexdb", 1); // iOS 14.6 fix; the call to open indexdb hangs forever otherwise | |
| const buildUrl = "Build"; | |
| const loaderUrl = buildUrl + "/33050ea7c3fd0dc8ee2d4c1203e4541f.loader.js"; | |
| const config = { | |
| dataUrl: buildUrl + "/6c57af02fed6351df97b1025e25cbc06.data.br", | |
| frameworkUrl: buildUrl + "/2bf33c6bee1953a469e389a9b96b6b2f.framework.js.br", | |
| codeUrl: buildUrl + "/261f404da3aefa4b1766740784d17a3c.wasm.br", | |
| streamingAssetsUrl: "StreamingAssets", | |
| companyName: "DefaultCompany", | |
| productName: "VirtualTryOn", | |
| productVersion: "0.1", | |
| //Useful when used along with Filename as Hashes option | |
| cacheControl: function (url) { | |
| // typically includes: .data, .bundle, .zpt | |
| if (url.match(/\.data/) || url.match(/\.bundle/) || url.match(/\.zpt/)) { | |
| return "immutable"; | |
| } | |
| if (url.match(/\.mp4/) || url.match(/\.custom/) || url.match(/\.zbin/)) { | |
| return "immutable"; | |
| } | |
| // Disable explicit caching for all other files. | |
| // Note: the default browser cache may cache them anyway. | |
| return "no-store"; | |
| }, | |
| }; | |
| const container = document.querySelector("#unity-container"); | |
| const canvas = document.querySelector("#unity-canvas"); | |
| const loadingCover = document.querySelector("#loading-cover"); | |
| const progressBarEmpty = document.querySelector("#unity-progress-bar-empty"); | |
| const progressBarFull = document.querySelector("#unity-progress-bar-full"); | |
| const progressText = document.querySelector("#progress-text"); | |
| const spinner = document.querySelector('.spinner'); | |
| if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) { | |
| container.className = "unity-mobile"; | |
| //config.matchWebGLToCanvasSize = false; | |
| //set devicePixelRatio=1; to avoid draining fillrate performance on mobile and override low DPI mode | |
| config.devicePixelRatio = window.devicePixelRatio; | |
| } | |
| loadingCover.style.display = ""; | |
| window.zappar = ZCV.initialize(); | |
| const script = document.createElement("script"); | |
| script.src = loaderUrl; | |
| //script.onload = () => { CreateUnityLoader(); }; | |
| document.body.appendChild(script); | |
| window.zappar.permission_request_ui_promise().then(WaitForZCVLoad); | |
| function WaitForZCVLoad() { | |
| if (zappar.loaded()) { | |
| CreateUnityLoader(); | |
| return; | |
| } | |
| setTimeout(WaitForZCVLoad, 500); | |
| } | |
| function CreateUnityLoader() { | |
| createUnityInstance(canvas, config, (progress) => { | |
| spinner.style.display = "none"; | |
| progressBarEmpty.style.display = ""; | |
| progressBarFull.style.width = `${100 * progress}%`; | |
| progressText.textContent = `${Math.round(100 * progress)}%`; | |
| }).then((unityInstance) => { | |
| loadingCover.style.display = "none"; | |
| window.uarGameInstance = unityInstance; | |
| }).catch((message) => { | |
| alert(message); | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> | |