resent-1.8/javascript/animTest.html

258 lines
18 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="EaglercraftX 1.8 test directory HTML page" />
<meta name="keywords" content="eaglercraft, eaglercraftx, minecraft, 1.8, 1.8.8" />
<title>EaglercraftX 1.8</title>
<meta property="og:locale" content="en-US" />
<meta property="og:type" content="website" />
<meta property="og:title" content="EaglercraftX 1.8" />
<meta property="og:description" content="test directory HTML page" />
<link type="image/png" rel="shortcut icon" href="favicon.png" />
<script type="text/javascript" src="classes.js"></script>
<script type="text/javascript" src="fix-webm-duration.js"></script>
<style>
@font-face {
font-family: Aller;
src: url(Aller_Bd.ttf);
}
html {
font-family: sans-serif;
text-align: center;
}
#progresstext {
font-weight: bold;
top: 30vh;
position: relative;
font-size: 1.75vw;
}
#clienttitle {
position: relative;
top: 25vh;
font-size: 8vw;
font-family: Aller;
transition: all 0.4s;
}
#clientversion {
position: absolute;
top: 31vh;
left: 74vw;
font-size: 2.5vw;
color: gray;
font-family: Aller;
transition: all 0.4s;
}
#progress {
width: 10%;
height: 5.5vh;
display: block;
border-radius: 10vw;
background-color: black;
transition: all 0.5s;
margin-top: -2.6vh;
margin-left: -1.3vw;
}
.ratio {
position: relative;
top: 13vh;
font-size: 2vh;
font-family: Aller;
opacity: 0;
transition: opacity 0.4s;
}
.ratio.show {
opacity: 1;
}
#meter {
width: 80vw;
margin:auto;
top: 28vh;
height: 0.2vh;
position: relative;
border: 5px solid black;
border-radius: 20vw;
padding: 1.15vw;
}
#dividk {
background-color: white;
position: absolute;
top: 0px;
left: 0px;
width: 100vw;
height: 100vh;
}
#mojang {
position: absolute;
left: 50vw;
top: 35vh;
width: 50vw;
filter: invert(100%);
transform: translate(-50%);
opacity: 0;
}
</style>
</head>
<body style="margin:0px;width:100vw;height:100vh;overflow:hidden;" id="game_frame">
<div id = "dividk">
<h1 id="clienttitle">Resent Client</h1>
<img id="mojang" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDIwMDEwOTA0Ly9FTiIKICJodHRwOi8vd3d3LnczLm9yZy9UUi8yMDAxL1JFQy1TVkctMjAwMTA5MDQvRFREL3N2ZzEwLmR0ZCI+CjxzdmcgdmVyc2lvbj0iMS4wIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiB3aWR0aD0iMjI1NS4wMDAwMDBwdCIgaGVpZ2h0PSI1NzIuMDAwMDAwcHQiIHZpZXdCb3g9IjAgMCAyMjU1LjAwMDAwMCA1NzIuMDAwMDAwIgogcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgbWVldCI+Cgo8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCw1NzIuMDAwMDAwKSBzY2FsZSgwLjEwMDAwMCwtMC4xMDAwMDApIgpmaWxsPSIjMDAwMDAwIiBzdHJva2U9Im5vbmUiPgo8cGF0aCBkPSJNNTc5MiA1NDIwIGMtNzU4IC03OCAtMTM1NSAtNjI1IC0xNTAxIC0xMzc1IC02NyAtMzQ2IC0xMiAtNzM0IDE1MQotMTA2MCAyMDIgLTQwNiA1NDcgLTcwNSA5NzggLTg0OSAxOTggLTY2IDI4OSAtODAgNTI1IC04MCAyMjggMCAzMDEgMTAgNDg1CjY1IDM0NiAxMDIgNjU2IDMxOSA4NzkgNjE1IDEwOSAxNDYgMjIxIDM4MSAyNjkgNTY5IDgyIDMxNiA3OCA1OTYgLTExIDkxMQotMTc3IDYxOCAtNzExIDEwODggLTEzNTIgMTE4OSAtMTE4IDE4IC0zMTkgMjUgLTQyMyAxNXogbTM2MyAtODgxIGMyNTEgLTY1CjQ2MSAtMjUyIDU2MiAtNDk5IDQ0IC0xMDcgNTcgLTE3OSA1NiAtMzEwIC0xIC0yMzcgLTg3IC00MjkgLTI2NiAtNTk2IC0zMTcKLTI5NSAtNzk4IC0yOTcgLTExMDkgLTUgLTEyMSAxMTMgLTE5MSAyMjEgLTIzNiAzNjEgLTExNSAzNTggMzMgNzQ5IDM1OSA5NTMKMTkxIDExOSA0MTcgMTUzIDYzNCA5NnoiLz4KPHBhdGggZD0iTTIwMCA1MzYwIGMtMjAgLTIwIC0yMCAtMzMgLTIwIC0xNjIwIGwwIC0xNjAxIDI1IC0yNCAyNCAtMjUgMzUwIDAKYzM2NyAwIDM5NCAzIDQwNSA0NCAzIDExIDYgNTIxIDYgMTEzMSAwIDc3MCAzIDExMjIgMTEgMTE1MCAxNCA1MiAxMDIgMTM5CjE0OCAxNDggMTkgNCA5NCA3IDE2OCA3IDE0NiAwIDE4NSAtMTAgMjM2IC01OCA2NSAtNjIgNjIgLTE0IDY3IC04MjAgbDUgLTczNAoyNCAtMTkgYzIyIC0xOCA0MyAtMTkgMzcwIC0xOSAxOTAgMCAzNTYgMyAzNjkgNiA1MyAxNSA1MiA2IDUyIDc3NCAwIDY4MCAxCjcxMiAxOSA3NDggMTEgMjAgMzIgNDkgNDggNjQgNTEgNDkgODkgNTggMjQzIDU4IDE1NyAwIDE5MiAtOSAyNDggLTYzIDcyIC02OQo2NyAzMyA2OSAtMTIzMSBsMyAtMTEzOSAyMiAtMjQgMjEgLTIzIDM1OSAwIDM1OSAwIDI0IDI1IDI1IDI0IDAgMTE4NiAwIDExODYKLTI1IDI0IGMtMjQgMjUgLTI1IDI1IC0yMzMgMjUgLTIzMSAwIC0yODAgOCAtMzY0IDYxIC0yNSAxNyAtNjYgNTEgLTkxIDc4Ci05NSAxMDEgLTExOSAxOTUgLTExNyA0NDEgMyAyMTAgMyAyMDYgLTE2IDIyNCAtMTQgMTQgLTE1NiAxNiAtMTQxNSAxNiAtMTM4NgowIC0xMzk5IDAgLTE0MTkgLTIweiIvPgo8cGF0aCBkPSJNODgzMCA1MzYwIGMtMTkgLTE5IC0yMCAtMzMgLTIwIC0zODQgbDAgLTM2NSAyNiAtMjAgYzI2IC0yMSAzMyAtMjEKODEzIC0yMSA1OTkgMCA3OTAgLTMgNzk5IC0xMiA5IC05IDEyIC0xODcgMTIgLTczOCAwIC04MjAgMyAtNzkwIC03MyAtODU2Ci0yMyAtMjAgLTUyIC00MCAtNjQgLTQ1IC0xMyAtNSAtMTk1IC05IC00MDUgLTEwIC00MjQgLTEgLTQ3MiA0IC02MTAgNjMgLTI3MgoxMTUgLTQ1OCAzNjEgLTUwOCA2NzMgLTYgMzYgLTE2IDY1IC0yNyA3MyAtMTMgOSAtMTA0IDEyIC0zNzQgMTIgLTE5NyAwIC0zNjUKLTMgLTM3NCAtNiAtMzUgLTE0IC00MiAtNTYgLTI5IC0xNzcgNjUgLTU2NyA0MTQgLTEwNTUgOTI5IC0xMjk3IDEyMSAtNTcgMjI1Ci05MiAzNzYgLTEyNyAxMTIgLTI1IDEyMSAtMjYgNTk4IC0zMCAzNjUgLTQgNDg5IC0yIDUwNiA3IDQwIDIxIDQ1IDUxIDQ1IDI2NAowIDIzMSA3IDI2NyA2OSAzNjQgNDcgNzIgMTM4IDE0NCAyMTQgMTY5IDQwIDEyIDEwNyAxOCAyODAgMjIgMjExIDYgMjMwIDcKMjQzIDI1IDEyIDE3IDE0IDE5OSAxNCAxMjA4IDAgMTE3NSAwIDExODggLTIwIDEyMDggLTIwIDIwIC0zMyAyMCAtMTIxMCAyMAotMTE3NyAwIC0xMTkwIDAgLTEyMTAgLTIweiIvPgo8cGF0aCBkPSJNMTMwOTUgNTM2OSBjLTEzMyAtMjMgLTE3OSAtMzUgLTI4NSAtNzAgLTYzNSAtMjA5IC0xMDcxIC03NzMgLTExMjAKLTE0NDkgLTEzIC0xODAgLTEzIC0xNjY5IDAgLTE3MDcgNiAtMTcgMjIgLTM1IDM2IC00MiAxNyAtNyAxMzUgLTExIDM3NSAtMTEKbDM1MCAwIDI0IDI1IDI1IDI0IDAgODQ1IGMwIDkxNCAtMSA5MDUgNTUgMTA1MiA5MSAyNDEgMzAyIDQzMiA1NjAgNTA2IDc4IDIyCjkyIDIzIDQ5MSAyMyBsNDEwIDAgNDIgLTI4IGMyMyAtMTUgNTQgLTQ2IDY5IC02OSBsMjggLTQxIDMgLTI2MCAzIC0yNTkgLTI1Ci01MyBjLTI4IC01NiAtNzggLTk4IC0xMzcgLTExNSAtMjAgLTYgLTIzMCAtMTAgLTUxMSAtMTAgLTQ2MyAwIC00NzkgLTEgLTQ5OAotMjAgLTExIC0xMSAtMjIgLTMwIC0yNSAtNDIgLTMgLTEzIC01IC0xNzggLTMgLTM2NiBsMyAtMzQ0IDI0IC0xOSBjMjIgLTE4CjQ2IC0xOSA1MDAgLTE5IDMwNSAwIDQ5MCAtNCA1MTQgLTExIDQ5IC0xMyAxMTUgLTczIDEzOCAtMTI0IDE3IC0zNiAxOSAtNzEKMTkgLTM0MyBsMCAtMzAzIDI1IC0yNCAyNCAtMjUgMzYwIDAgYzM1OCAwIDM2MCAwIDM4MSAyMiAyMCAyMiAyMCAyOCAyMCAxMjE0CjAgMTA3MCAtMiAxMTk0IC0xNiAxMjA4IC0yMyAyNCAtNDAgMjUgLTI3NCAyOCBsLTIxNSAzIC02NSAzMiBjLTk5IDQ5IC0xNjMKMTExIC0yMDcgMjAxIGwtMzggNzcgLTMgMjE1IGMtMSAxMTggLTUgMjI1IC03IDIzNyAtMTIgNTUgNCA1MyAtNTE4IDUyIC0yNjUKLTEgLTUwNCAtNSAtNTMyIC0xMHoiLz4KPHBhdGggZD0iTTE1NDMwIDUzNjAgYy0yMCAtMjAgLTIwIC0zMyAtMjAgLTE2MjAgbDAgLTE2MDEgMjUgLTI0IDI0IC0yNSAzNTEKMCBjMzQ4IDAgMzgyIDMgNDAyIDM0IDQ
<h2 id="clientversion">3.6</h2>
<p id="progresstext">0%</p>
<p class="ratio" >use <a href="./badwifi/index.html">this link</a> if your internet is bad</p>
<div id="meter">
<span style="width: 0%" id="progress"></span>
</div>
<script type="text/javascript">
let versionNum = "";
let hasSiteInteractionHappened = false;
document.addEventListener("click", () =>{
hasSiteInteractionHappened = true;
});
setTimeout(() => {
document.getElementsByClassName("ratio")[0].className = "ratio show";
}, 2000);
function setVersion(version){
document.getElementById("clientversion").innerText = version;
versionNum = version;
}
function setBarProg(event, epkSize){
let progress = Math.round(event.loaded/1024/1024);
let size = Math.round(epkSize/1024/1024);
document.getElementById("progress").style.width = (Math.round(progress/size*100)+3.5)+"%";
document.getElementById("progresstext").innerText = Math.round(event.loaded/epkSize*10000)/100 + "% " + "(" + Math.round(event.loaded/1024/1024) + "MB" + "/" + Math.round(epkSize/1024/1024) + "MB)";
// why would you need to set the progress text in a different function???
}
function die(){
document.getElementById( "meter" ).style.display = "none";
document.getElementsByClassName("ratio")[0].className = "ratio";
document.getElementById("progresstext").innerText = "Decompressing Assets (May take 1-2 minutes on a slow device)";
}
let interval;
function enable(){
document.getElementById("progresstext").innerText = "Click anywhere on the screen to start Resent!";
let title = document.getElementById("clienttitle");
let versionText = document.getElementById("clientversion");
title.style.fontSize = "10vw";
versionText.style.left = "81vw";
versionText.style.top = "31vh";
versionText.style.fontSize = "3.5vw";
interval = setInterval(() => {
// checks if user clicked the screen
enableClick();
}, 10);
}
function enableClick(){
if (hasSiteInteractionHappened){
loading();
// gets rid of the loop made before in enable func
clearInterval(interval);
}
}
function loading(){
let title = document.getElementById("clienttitle");
let versionText = document.getElementById("clientversion");
title.style.fontSize = "8vw";
versionText.style.left = "74vw";
versionText.style.top = "31vh";
versionText.style.fontSize = "2.5vw";
document.getElementById("progresstext").innerText = "Loading Resent "+versionNum;
//test
setTimeout(() => {
showMojang();
}, 1000);
}
function showMojang(){
document.getElementById("dividk").style.transition = "background-color 0.2s";
document.getElementById("dividk").style.backgroundColor = "#f0323e";
document.getElementById("clienttitle").style.transition = "opacity 0.2s";
document.getElementById("clienttitle").style.opacity = "0";
document.getElementById("clientversion").style.transition = "opacity 0.2s";
document.getElementById("clientversion").style.opacity = "0";
document.getElementById("mojang").style.opacity = "1";
document.getElementById("progresstext").style.color = "white";
//test
setTimeout(() => {
die2();
}, 1000);
}
function die2(){
document.getElementById("progresstext").style.transition = "opacity 0.4s";
document.getElementById("progresstext").style.opacity = "0";
document.getElementById("mojang").style.transition = "all 0.4s";
document.getElementById("mojang").style.top = "50vh";
document.getElementById("mojang").style.transform = "translate(-50%, -50%)";
setTimeout(() => {
document.getElementById("mojang").style.transition = "all 0.7s";
document.getElementById("mojang").style.width = "135vw";
document.getElementById("dividk").style.transition = "opacity 0.4s";
document.getElementById("dividk").style.opacity = "0";
setTimeout(() => {
document.getElementById("dividk").style.display = "none";
}, 200);
}, 500);
}
</script>
<doNotCopyThis-kone>
<script type="text/javascript">
// this is for testing loading animations only
// do not copy this script tag
let event = {loaded: 0};
setTimeout(() => {
setTimeout(() => {
event.loaded = 100000;
setBarProg(event, 90928854);
}, 500);
setTimeout(() => {
event.loaded = 21400000;
setBarProg(event, 90928854);
}, 1500);
setTimeout(() => {
event.loaded = 74900000;
setBarProg(event, 90928854);
}, 2500);
setTimeout(() => {
event.loaded = 90928854;
setBarProg(event, 90928854);
}, 3500);
setTimeout(() => {
die();
}, 4000);
setTimeout(() => {
enable();
}, 4500);
}, 1000);
</script>
</doNotCopyThis-kone>
</div>
</body>
</html>