<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>TeaClient</title>

        <style type="text/css">
            html, body {
                background: #18BC9C;
                user-select: none;
            }

            body {
                text-align: center;
                position: absolute;

                top: 0;
                bottom: 0;
                right: 0;
                left: 0;

                margin-left: 18px;
                margin-right: 18px;

                display: flex;
                flex-direction: column;
                justify-content: center;

                -ms-overflow-style: none;
                -webkit-app-region: drag;
            }

            img {
                position: absolute;
                display: block;

                width: 200px;
                height: 200px;
            }

            .smoke {
                z-index: 2;
            }
            .logo {
                z-index: 1;
            }

            .container-logo {
                align-self: center;
                position: relative;
                display: inline-block;

                width: 200px;
                height: 200px;
            }

            .container-info a {
                display: inline-block;
                color: #FFFFFF;
                font-family: "Arial",serif;
                font-size: 20px;
            }

            .container-bar {
                position: relative;
                margin-top: 5px;
                border: white solid 2px;
                height: 18px;
            }

            .container-bar .bar {
                z-index: 1;
                position: absolute;
                display: block;

                background: whitesmoke;
                border: none;
                width: 0%;
                height: 100%;
            }
        </style>

        <script type="application/ecmascript">const exports = {};</script>
        <script type="application/ecmascript" src="loader.js"></script>
    </head>
    <body>
        <div class="container-logo">
            <img class="logo" src="img/logo.svg">
            <img class="smoke" src="img/smoke.png">
        </div>
        <div class="container-info">
            <a id="loading-text">Loading... Please wait!</a>
            <div class="container-bar">
                <div class="bar"></div>
            </div>
        </div>
    </body>
</html>