mirror of
https://github.com/seigler/fhqwhgads
synced 2025-07-26 22:46:08 +00:00
103 lines
2.3 KiB
HTML
103 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
|
|
<title>FHQWHGADS</title>
|
|
<link type="text/css" rel="stylesheet" href="assets/fonts/font.css"/>
|
|
<style>
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
line-height: 1;
|
|
}
|
|
label, label:before, label:after {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
label {
|
|
top: 0;
|
|
bottom: 0;
|
|
padding: 1em;
|
|
font-family: computerfontregular, monospace;
|
|
color: #090;
|
|
font-size: 4vw;
|
|
overflow: hidden;
|
|
}
|
|
label:before {
|
|
content: "";
|
|
z-index: -1;
|
|
top: -8vw;
|
|
bottom: -8vw;
|
|
animation: scroll 10s linear infinite;
|
|
background: linear-gradient(to bottom right, black 0%, black 49%, #030 49.5%, #030 50.5%, black 51%, black 100%) black;
|
|
background-size: 115vw 15vw;
|
|
background-repeat: repeat-y;
|
|
background-position: 50% 0%;
|
|
}
|
|
label:after {
|
|
content: "";
|
|
top: 0;
|
|
bottom: 0;
|
|
background-image: radial-gradient(20vw circle at 5vw 5vw, rgba(255,255,255,0.25) 5%, transparent);
|
|
}
|
|
#command {
|
|
position: absolute;
|
|
margin-top: 1.25em;
|
|
z-index: -2;
|
|
}
|
|
#commandLine:after {
|
|
content: "";
|
|
display: inline-block;
|
|
border-left: 0.5em solid;
|
|
margin-bottom: -0.2em;
|
|
height: 1em;
|
|
animation: blink 1s linear infinite;
|
|
}
|
|
@keyframes blink {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
10% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
60% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@keyframes scroll {
|
|
0% {
|
|
transform: translate3d(0,-7.5vw,0);
|
|
}
|
|
100% {
|
|
transform: translate3d(0,7.5vw,0);
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<form id="processor">
|
|
<label>
|
|
<div id="scrollback">
|
|
i love u<br>-fhqwhgadshgnsdhjsdbkhsdabkfabkveybvf<br><br>
|
|
</div>
|
|
<div id="commandLine">a><input id="command" type="text" value="" oninput="syncTyping(this)" /><span id="typing"></span></div>
|
|
</label>
|
|
</form>
|
|
<script>
|
|
function syncTyping(field) {
|
|
document.getElementById("typing").innerHTML = field.value;
|
|
}
|
|
document.getElementById("command").value = "";
|
|
document.getElementById("command").focus();
|
|
</script>
|
|
</body>
|
|
</html>
|