mirror of
https://github.com/seigler/fhqwhgads
synced 2025-07-26 22:46:08 +00:00
first revision, created it
This commit is contained in:
parent
f9d14fcd3d
commit
e226475f42
6 changed files with 113 additions and 0 deletions
BIN
assets/fonts/computerfont-webfont.eot
Normal file
BIN
assets/fonts/computerfont-webfont.eot
Normal file
Binary file not shown.
BIN
assets/fonts/computerfont-webfont.ttf
Normal file
BIN
assets/fonts/computerfont-webfont.ttf
Normal file
Binary file not shown.
BIN
assets/fonts/computerfont-webfont.woff
Normal file
BIN
assets/fonts/computerfont-webfont.woff
Normal file
Binary file not shown.
BIN
assets/fonts/computerfont-webfont.woff2
Normal file
BIN
assets/fonts/computerfont-webfont.woff2
Normal file
Binary file not shown.
10
assets/fonts/font.css
Normal file
10
assets/fonts/font.css
Normal file
|
@ -0,0 +1,10 @@
|
|||
@font-face {
|
||||
font-family: 'computerfontregular';
|
||||
src: url('computerfont-webfont.eot');
|
||||
src: url('computerfont-webfont.eot?#iefix') format('embedded-opentype'),
|
||||
url('computerfont-webfont.woff2') format('woff2'),
|
||||
url('computerfont-webfont.woff') format('woff'),
|
||||
url('computerfont-webfont.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
103
index.html
Normal file
103
index.html
Normal file
|
@ -0,0 +1,103 @@
|
|||
<!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>
|
Loading…
Add table
Add a link
Reference in a new issue