74 lines
3.5 KiB
HTML
74 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<body>
|
|
<div style="width: 100vw; top: 40%; position: absolute;">
|
|
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iODQyLjMyMDA3IiBoZWlnaHQ9IjEwMDAuMDAwMSI+CiAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTgyNC42NjYzNiA3NzkuMzAzNjNjLTE1LjEyMjk5IDM0LjkzNzI0LTMzLjAyMzY4IDY3LjA5Njc0LTUzLjc2MzggOTYuNjYzNzQtMjguMjcwNzYgNDAuMzA3NC01MS40MTgyIDY4LjIwNzgtNjkuMjU3MTcgODMuNzAxMi0yNy42NTM0NyAyNS40MzEzLTU3LjI4MjIgMzguNDU1Ni04OS4wMDk2NCAzOS4xOTYzLTIyLjc3NzA4IDAtNTAuMjQ1MzktNi40ODEzLTgyLjIxOTczLTE5LjYyOS0zMi4wNzkyNi0xMy4wODYxLTYxLjU1OTg1LTE5LjU2NzMtODguNTE1ODMtMTkuNTY3My0yOC4yNzA3NSAwLTU4LjU5MDgzIDYuNDgxMi05MS4wMjE5MyAxOS41NjczLTMyLjQ4MDUzIDEzLjE0NzctNTguNjQ2MzkgMTkuOTk5NC03OC42NTE5NiAyMC42Nzg0LTMwLjQyNTAxIDEuMjk2MjMtNjAuNzUxMjMtMTIuMDk4NS05MS4wMjE5My00MC4yNDU3LTE5LjMyMDM5LTE2Ljg1MTQtNDMuNDg2MzItNDUuNzM5NC03Mi40MzYwNy04Ni42NjQxLTMxLjA2MDc3OC00My43MDI0LTU2LjU5NzA0MS05NC4zNzk4My03Ni42MDI2MDktMTUyLjE1NTg2QzEwLjc0MDQxNiA2NTguNDQzMDkgMCA1OTguMDEyODMgMCA1MzkuNTA4NDVjMC02Ny4wMTY0OCAxNC40ODEwNDQtMTI0LjgxNzIgNDMuNDg2MzM2LTE3My4yNTQwMUM2Ni4yODE5NCAzMjcuMzQ4MjMgOTYuNjA4MTggMjk2LjY1NzggMTM0LjU2MzggMjc0LjEyNzZjMzcuOTU1NjYtMjIuNTMwMTYgNzguOTY2NzYtMzQuMDExMjkgMTIzLjEzMjEtMzQuNzQ1ODUgMjQuMTY1OTEgMCA1NS44NTYzMyA3LjQ3NTA4IDk1LjIzNzg0IDIyLjE2NiAzOS4yNzA0MiAxNC43NDAyOSA2NC40ODU3MSAyMi4yMTUzOCA3NS41NDA5MSAyMi4yMTUzOCA4LjI2NTE4IDAgMzYuMjc2NjgtOC43NDA1IDgzLjc2MjktMjYuMTY1ODcgNDQuOTA2MDctMTYuMTYwMDEgODIuODA2MTQtMjIuODUxMTggMTEzLjg1NDU4LTIwLjIxNTQ2IDg0LjEzMzI2IDYuNzg5OTIgMTQ3LjM0MTIyIDM5Ljk1NTU5IDE4OS4zNzY5OSA5OS43MDY4Ni03NS4yNDQ2MyA0NS41OTEyMi0xMTIuNDY1NzMgMTA5LjQ0NzMtMTExLjcyNTAyIDE5MS4zNjQ1Ni42Nzg5OSA2My44MDY3IDIzLjgyNjQzIDExNi45MDM4NCA2OS4zMTg4OCAxNTkuMDYzMDkgMjAuNjE2NjQgMTkuNTY3MjcgNDMuNjQwNjYgMzQuNjkwMjcgNjkuMjU3MSA0NS40MzA3LTUuNTU1MzEgMTYuMTEwNjItMTEuNDE5MzMgMzEuNTQyMjUtMTcuNjUzNzIgNDYuMzU2NjJ6TTYzMS43MDkyNiAyMC4wMDU3YzAgNTAuMDExNDEtMTguMjcxMDggOTYuNzA2OTMtNTQuNjg5NyAxMzkuOTI3ODItNDMuOTQ5MzIgNTEuMzgxMTgtOTcuMTA4MTcgODEuMDcxNjItMTU0Ljc1NDU5IDc2LjM4NjU5LS43MzQ1NC01Ljk5OTgzLTEuMTYwNDUtMTIuMzE0NDQtMS4xNjA0NS0xOC45NTAwMyAwLTQ4LjAxMDkxIDIwLjkwMDYtOTkuMzkyMDcgNTguMDE2NzgtMTQxLjQwMzE0IDE4LjUzMDI3LTIxLjI3MDk0IDQyLjA5NzQ2LTM4Ljk1NzQ0IDcwLjY3Njg1LTUzLjA2NjNDNTc4LjMxNTggOS4wMDIyOSA2MDUuMjkwMyAxLjMxNjIxIDYzMC42NTk4OCAwYy43NDA3NiA2LjY4NTc1IDEuMDQ5MzggMTMuMzcxOTEgMS4wNDkzOCAyMC4wMDUwNXoiLz4KPC9zdmc+Cg==" id="logo">
|
|
</div>
|
|
|
|
<div id="progresscontainer">
|
|
<div id="progressbar">
|
|
<div id="progressbarprogress">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|
|
<style>
|
|
body {
|
|
background-color: black;
|
|
}
|
|
|
|
#progresscontainer {
|
|
position: absolute;
|
|
width: 100vw;
|
|
bottom: 10%;
|
|
}
|
|
|
|
#progressbar {
|
|
margin: auto;
|
|
width: 400px;
|
|
height: 7px;
|
|
background-color: #262626;
|
|
border-radius: 30px;
|
|
border: #2c2c2c 1px solid;
|
|
}
|
|
|
|
#progressbarprogress {
|
|
width: 50%;
|
|
height: 100%;
|
|
background-color: #FFF;
|
|
border-radius: 30px;
|
|
border-top-right-radius: 0px;
|
|
border-bottom-right-radius: 0px;
|
|
}
|
|
|
|
#logo {
|
|
width: 90px;
|
|
margin-left: 47%;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
|
|
let width = 50;
|
|
|
|
document.addEventListener("keydown", function(event) {
|
|
if (event.key === "d") {
|
|
if (width === 100 ) {
|
|
return;
|
|
}
|
|
width = width + 1
|
|
}
|
|
if (event.key == "a") {
|
|
if (width === 0 ) {
|
|
return;
|
|
}
|
|
width = width - 1
|
|
}
|
|
if (event.key == "f") {
|
|
document.documentElement.requestFullscreen();
|
|
}
|
|
document.getElementById("progressbarprogress").style.width = width+"%";
|
|
});
|
|
</script>
|