-
Notifications
You must be signed in to change notification settings - Fork 42
/
Copy pathindex.html
88 lines (88 loc) · 2.89 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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" Content ="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<title>WebMC</title>
<link id="favicon" rel="icon" href="#" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="./mc.css" />
<script src="./src/main.js" type="module"></script>
<style id="mcpage-preload">
mcpage-preload {
position: absolute; top: 0;
width: 100vw;
text-align: center;
height: 100vh;
overflow: hidden;
background: #1D1F21;
transition: opacity 1s ease;
z-index: 100000;
}
mcpage-preload p {
padding-top: calc(40vh + 1em);
margin-top: 0;
animation: loading-blink 1.3s infinite ease-out;
}
@keyframes loading-blink {
50% { color: transparent; }
}
mcpage-preload img {
position: fixed;
bottom: 60%; left: 50%;
transform: translateX(-50%);
}
mcpage-preload slot > ul, ::slotted(ul) {
list-style: none;
margin: 20px;
padding: 0;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
line-height: 1.2em;
}
mcpage-preload .left {
text-align: start;
direction: rtl;
width: 50%;
float: left;
}
mcpage-preload .right {
text-align: start;
width: 50%;
float: right;
}
mcpage-preload .progress {
line-height: 1rem;
}
mcpage-preload progress {
-webkit-appearance: none;
-moz-appearance: none;
background-color: #555;
height: 8px;
border: 0;
vertical-align: top;
transform: translate(0, 0.5rem) translate(0, -50%);
}
mcpage-preload progress::-webkit-progress-bar {
background-color: transparent;
}
mcpage-preload progress::-webkit-progress-value {
background-color: #8f8;
}
mcpage-preload progress::-moz-progress-bar {
background-color: #8f8;
}
</style>
</head>
<body>
<mcpage-preload>
<img src="./texture/jumpingBlock.gif" />
<p>Loading...</p>
<div class="progress"><progress value="0" max="0"></progress> <span class="loadingCount">0</span> / <span class="loadedCount">0</span></div>
<div class="left"><slot name="loading"><ul></ul></slot></div>
<div class="right"><slot name="loaded"><ul></ul></slot></div>
<ul slot="loading"></ul>
<ul slot="loaded"></ul>
</mcpage-preload>
</body>
</html>