joshua/fhqwhgads
1
0
Fork 0
mirror of https://github.com/seigler/fhqwhgads synced 2025-07-26 22:46:08 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

first revision, created it

Browse source
This commit is contained in:
Joshua Seigler 2014-12-19 15:19:58 -05:00
parent f9d14fcd3d
commit e226475f42
6 changed files with 113 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
assets/fonts/computerfont-webfont.eot Normal file
View file

Binary file not shown.

BIN
assets/fonts/computerfont-webfont.ttf Normal file
View file

Binary file not shown.

BIN
assets/fonts/computerfont-webfont.woff Normal file
View file

Binary file not shown.

BIN
assets/fonts/computerfont-webfont.woff2 Normal file
View file

Binary file not shown.

10
assets/fonts/font.css Normal file
View 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
View 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&gt;<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>