<!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>