<!doctype html>
<meta charset="utf-8" />

<head>
    <link rel="stylesheet" href="./common.css" type="text/css" />

    <style>
        html,
        body {
            width: 100%;
            height: 100%;
        }

        body {
            background: none;
            user-select: none;
            -webkit-app-region: drag;
            overflow: hidden;
        }

        .wrapper {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border-radius: 8px;
            border: 1px solid var(--fg-semi-trans);
            background: var(--bg);
        }

        .message {
            top: 70%;
            word-break: break-word;
            padding: 0 16px;
            position: absolute;
            font-size: 14px
        }

        p {
            text-align: center;
        }

        img {
            width: 128px;
            height: 128px;
            object-fit: contain;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <img draggable="false" src="vesktop://assets/splash" alt="" role="presentation" />
        <p>Loading Vesktop...</p>
        <p class="message"></p>
    </div>
</body>

<script>
    document.addEventListener("DOMContentLoaded", () => {
        const messageElement = document.querySelector('.message');
        VesktopSplashNative.onUpdateMessage(message => {
            messageElement.textContent = message;
        })
    });
</script>