-
Notifications
You must be signed in to change notification settings - Fork 1
/
load.html
76 lines (74 loc) · 1.46 KB
/
load.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
<!DOCTYPE html>
<html>
<head>
<title id="t">Loading TeaBag...</title>
<!-- © Logan Brown -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
<link rel='icon' href='https://lb123658.github.io/tea/img/favicon.png' type='image/png'/>
<style>
body {
background: #2F3137;
}
* {
font-family: 'Montserrat', sans-serif;
user-select: none;
-webkit-user-select: none;
color: white;
}
#tea {
position: absolute;
bottom: 0px;
right: 0px;
width: 100%;
user-select: none;
z-index: -1;
max-height: 650px;
}
#text {
font-size: 25px;
text-align: center;
width: 500px;
position: absolute;
top: 200px;
left: 50%;
margin-left: -250px;
animation-name: slide;
animation-duration: 1.5s;
animation-iteration-count: 1;
}
#big {
font-size: 50px;
}
@keyframes slide {
0% {transform: translate(0px, 80px); opacity: 0.0;}
100% {transform: translate(0px, 0px); opacity: 1;}
}
#loader {
position: absolute;
top: 350px;
height: 30px;
left: 10%;
width: 80%;
background: lightgrey;
animation-name: loading;
animation-duration: 1.8s;
animation-iteration-count: 1;
}
@keyframes loading {
0% {width: 0%;}
100% {width: 80%;}
}
</style>
<body onload="setTimeout(load, 2000)">
<img src="https://raw.githubusercontent.com/LB123658/tea/main/img/login.png" id="tea">
<p id="text"><span id="big">Loading...</span></p>
<div id="loader">
</div>
<script>
function load() {
location.replace("game");
}
</script>
</body>
</html>