OwlCyberSecurity - MANAGER

Edit File: index.html

<!DOCTYPE html>
<html lang="en-us">

<head>

*,
        *:before,
        *:after {
            box-sizing: inherit;
        }

body {
            width: 100%;
            height: 100%;
            margin: 0;
            background: white;
        }

canvas {
            width: 100%;
            height: 100%;
            display: block;
        }

#loading-cover {
            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: 10px 20px 20px 10px;
            text-align: left;
            border: 1px solid white;
            padding: 2px;
        }

#unity-progress-bar-full {
            width: 0%;
            height: 100%;
            background: white;
        }

.light #unity-progress-bar-empty {
            border-color: lightgray;
        }

.light #unity-progress-bar-full {
            background: #FF0097;
        }

.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(255, 255, 255, 0.2);
            border-right: 1.1em solid rgba(255, 255, 255, 0.2);
            border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
            border-left: 1.1em solid #ffffff;
            transform: translateZ(0);
            animation: spinner-spin 1.1s infinite linear;
        }

@keyframes spinner-spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
    </style>

<script>
        new vUnit({
            CSSMap: {
                '.vh_height': {
                    property: 'height',
                    reference: 'vh'
                },
                '.vh_width': {
                    property: 'width',
                    reference: 'vw'
                },
            },
        }).init();
    </script>

<script type="text/javascript" async>
    !function(e,t){a=e.createElement("script"),m=e.getElementsByTagName("script")[0],a.async=1,a.src=t,m.parentNode.insertBefore(a,m)}(document,"https://universal.wgplayer.com/tag/?lh="+window.location.hostname+"&wp="+window.location.pathname+"&ws="+window.location.search);
</script>

</head>

var gameInstance;
    createUnityInstance(document.querySelector("#unityCanvas"), {
        dataUrl: "Build/118.data.gz",
        frameworkUrl: "Build/118.framework.js.gz",
        codeUrl: "Build/118.wasm.gz",
        streamingAssetsUrl: "StreamingAssets",
        companyName: "Kawaii Games",
        productName: "Multifaces Avatar Maker",
        productVersion: "2",
    }, (progress) => {
        spinner.style.display = "none";
        progressBarEmpty.style.display = "";
        progressBarFull.style.width = `${100 * progress}%`;
    }).then(function (game) {
        loadingCover.style.display = "none";
        gameInstance = game;
    }).catch((message) => {
        alert(message);
    });
</script>

</body>

</html>