<!DOCTYPE html>
<html>
<head>
<title>Windows XP —tesigner</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<style>
body {
background: black;
color: white;
display: flex;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
align-items: center;
justify-content: center;
}
main {
width: 100%;
height: 480px;
max-width: 640px;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 0;
}
.image {
width: 120px;
position: relative;
left: 56px;
top: 7px;
margin-top: -7px;
}
.logo {
font-family: "Roboto", sans-serif;
}
.top {
font-weight: 300;
font-size: 17px;
line-height: 13px;
height: 15px;
opacity: 0.9;
}
.top .tm {
font-size: 9px;
position: relative;
top: -6px;
left: -3px;
}
.middle {
font-weight: 400;
font-size: 48px;
line-height: 40px;
height: 40px;
letter-spacing: -1.5px;
transform: scaleX(1.08);
margin-left: 8px;
}
.middle .tm {
font-weight: 300;
font-size: 9px;
position: relative;
top: -22px;
left: -11px;
}
.middle .xp {
font-size: 34px;
color: #dd6600;
float: right;
font-weight: 400;
position: relative;
top: -12px;
left: -10px;
}
.bottom {
font-weight: 300;
font-size: 31px;
line-height: 26px;
margin-left: 8px;
letter-spacing: -1px;
opacity: 0.95;
}
.loader {
position: relative;
margin-top: 55px;
width: 126px;
height: 15px;
background: url("https://cdn.glitch.com/2d6d5761-1157-4c99-8c63-be23b1e7fcc7%2Floader.png?1491247183670");
}
.mask {
overflow: hidden;
width: 120px;
margin-left: 4px;
margin-top: 3px;
}
.progress {
width: 22px;
height: 9px;
background: url("https://cdn.glitch.com/2d6d5761-1157-4c99-8c63-be23b1e7fcc7%2Fprogress.png?1491247183684");
position: relative;
left: -24px;
}
footer {
position: absolute;
left: 0;
right: 0;
bottom: 20px;;
font-family: Tahoma, monospace;
font-size: 12px;
opacity: 0.9;
display: flex;
justify-content: space-between;
}
footer a {
color: white;
text-decoration: none;
}
footer a:hover {
color: #ccc;
}
.sr-only {
border: 0;
clip: rect(0,0,0,0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
</style>
</head>
<body>
<main>
<div class="loader-spacer"></div>
<img class="image" src="https://cdn.glitch.com/2d6d5761-1157-4c99-8c63-be23b1e7fcc7%2FScreen%20Shot%202017-04-03%20at%202.33.56%20PM.png?1491244538708">
<div class="logo">
<div class="top">Microsoft<span aria-hidden="true" class="tm">®</span></div>
<div class="middle">Windows<span aria-hidden="true" class="tm">®</span> <span aria-hidden="true" class="xp">xp</span></div>
</div>
<div class="loader">
<div class="mask">
<div class="progress"></div>
</div>
</div>
<footer>
<div>
Copyright © Microsoft Corporation
</div>
<div>
<a href="http://tesigner.tr.gg">tesigner.tr.gg</a>
</div>
</footer>
</main>
<script>
var progressLeft = -24;
var $progress = document.querySelector(".progress");
var $main = document.querySelector("main");
var $note = document.querySelector(".loading-note");
var opacity = 0;
var noteOpacity = 0;
window.addEventListener("DOMContentLoaded", function() {
setInterval(function() {
progressLeft += 8;
if (progressLeft > 120) {
progressLeft = -24;
}
$progress.style.left = progressLeft + "px";
}, 100);
var interval = setInterval(function() {
opacity += 0.07;
if (opacity >= 1.0) {
clearInterval(interval);
}
$main.style.opacity = opacity;
}, 100);
setTimeout(function() {
var interval = setInterval(function() {
noteOpacity += 0.07;
if (noteOpacity >= 0.9) {
clearInterval(interval);
}
$note.style.opacity = noteOpacity;
}, 100);
}, 10000);
});
</script>
</body>
</html>
