-
-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
33 lines (30 loc) · 3.16 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1, minimum-scale=1">
<title>7.0 HQ Helper</title>
<link rel="icon" href="./icons/logo_v2_192x192.png">
<link rel="manifest" href="./manifest.json">
</head>
<body>
<noscript>
<strong>Please enable JavaScript to continue.</strong>
</noscript>
<div id="app">
<style>#loading{height:100%;width:100%;position:fixed;z-index:1;margin-top:0px;top:0px}#loading-center{width:100%;height:100%;position:relative}#loading-center-absolute{position:absolute;left:50%;top:50%;height:60px;width:60px;margin-top:-30px;margin-left:-30px;-webkit-animation:loading-center-absolute 1s infinite;animation:loading-center-absolute 1s infinite}.object{width:20px;height:20px;background-color:black;float:left;-moz-border-radius:50% 50% 50% 50%;-webkit-border-radius:50% 50% 50% 50%;border-radius:50% 50% 50% 50%;margin-right:20px;margin-bottom:20px}.object:nth-child(2n+0){margin-right:0px}#object_one{-webkit-animation:object_one 1s infinite;animation:object_one 1s infinite}#object_two{-webkit-animation:object_two 1s infinite;animation:object_two 1s infinite}#object_three{-webkit-animation:object_three 1s infinite;animation:object_three 1s infinite}#object_four{-webkit-animation:object_four 1s infinite;animation:object_four 1s infinite}@-webkit-keyframes loading-center-absolute{100%{-ms-transform:rotate(360deg);-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes loading-center-absolute{100%{-ms-transform:rotate(360deg);-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes object_one{50%{-ms-transform:translate(20px,20px);-webkit-transform:translate(20px,20px);transform:translate(20px,20px)}}@keyframes object_one{50%{-ms-transform:translate(20px,20px);-webkit-transform:translate(20px,20px);transform:translate(20px,20px)}}@-webkit-keyframes object_two{50%{-ms-transform:translate(-20px,20px);-webkit-transform:translate(-20px,20px);transform:translate(-20px,20px)}}@keyframes object_two{50%{-ms-transform:translate(-20px,20px);-webkit-transform:translate(-20px,20px);transform:translate(-20px,20px)}}@-webkit-keyframes object_three{50%{-ms-transform:translate(20px,-20px);-webkit-transform:translate(20px,-20px);transform:translate(20px,-20px)}}@keyframes object_three{50%{-ms-transform:translate(20px,-20px);-webkit-transform:translate(20px,-20px);transform:translate(20px,-20px)}}@-webkit-keyframes object_four{50%{-ms-transform:translate(-20px,-20px);-webkit-transform:translate(-20px,-20px);transform:translate(-20px,-20px)}}@keyframes object_four{50%{-ms-transform:translate(-20px,-20px);-webkit-transform:translate(-20px,-20px);transform:translate(-20px,-20px)}}</style>
<div id="loading">
<div id="loading-center">
<div id="loading-center-absolute">
<div class="object" id="object_one"></div>
<div class="object" id="object_two"></div>
<div class="object" id="object_three"></div>
<div class="object" id="object_four"></div>
</div>
</div>
</div>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>