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

added fake replies of "command not found"

Browse source
This commit is contained in:
Joshua Seigler 2014-12-20 14:35:45 -05:00
parent edae59d5e7
commit adae1b71a7
8 changed files with 90 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

21
build/application.js
View file

@ -1,4 +1,16 @@
(function() {
function escapeHTML(html) {
var fn = function(tag) {
var charsToReplace = {
"&": "&",
"<": "&lt;",
">": "&gt;",
'"': "&#34;"
};
return charsToReplace[tag] || tag;
};
return html.replace(/[&<>"]/g, fn);
}
function syncTyping() {
var beforeSelection, selection, afterSelection;
beforeSelection = this.value.slice(0, this.selectionStart);
@ -12,4 +24,13 @@
commandline.onkeydown = syncTyping;
commandline.onkeyup = syncTyping;
commandline.onselect = syncTyping;
function handleForm() {
var scrollback = document.getElementById("scrollback");
var val = this.command.value;
this.command.value = "";
document.getElementById("typing").innerHTML = "";
scrollback.innerHTML = scrollback.innerHTML + "a>" + escapeHTML(val) + "<br>Command not found.<br>";
return false;
}
document.forms[0].onsubmit = handleForm;
})();

26
build/assets/images/scanline.svg
View file

@ -1,17 +1,11 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg id="svg2" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="200" width="2000" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
<metadata id="metadata7">
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<dc:title/>
</cc:Work>
</rdf:RDF>
</metadata>
<g id="layer1" transform="translate(0,-852.36218)">
<rect id="rect2985" style="fill:#000000;" height="210" width="2000" y="847.36" x="0"/>
<path id="path2987" style="stroke-linejoin:miter;stroke:#003f00;stroke-linecap:butt;stroke-miterlimit:4;stroke-dasharray:none;stroke-width:5;fill:none;" d="M1995.1,857.28,4.9182,1047.4"/>
</g>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="2000"
height="200">
<g><path d="M 2000,0 0,200" style="fill:none;stroke:#003f00;stroke-width:5;" /></g>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 892 B

After

Width:  |  Height:  |  Size: 362 B

Before After
Before After

28
build/compiled-styles.css
View file

@ -19,24 +19,24 @@ label:after {
right: 0;
}
label {
top: 0;
bottom: 0;
min-height: 100%;
padding: 1em;
font-family: computerfontregular, monospace;
color: #009900;
font-size: 4vw;
font-size: 4vmax;
overflow: hidden;
word-break: break-all;
}
label:before {
content: "";
z-index: -1;
top: -8vw;
bottom: -8vw;
top: -8vmax;
bottom: -8vmax;
-webkit-animation: scroll 10s linear infinite;
animation: scroll 10s linear infinite;
background: url('/assets/images/scanline.svg');
background-size: 115vw 15vw;
background: url('/assets/images/scanline.svg') #000000;
background-size: 115vmax 15vmax;
background-repeat: repeat-y;
background-position: 50% 0%;
}
@ -97,22 +97,22 @@ label:before {
}
@-webkit-keyframes scroll {
0% {
-webkit-transform: translate3d(0, -7.5vw, 0);
transform: translate3d(0, -7.5vw, 0);
-webkit-transform: translate3d(0, -7.5vmax, 0);
transform: translate3d(0, -7.5vmax, 0);
}
100% {
-webkit-transform: translate3d(0, 7.5vw, 0);
transform: translate3d(0, 7.5vw, 0);
-webkit-transform: translate3d(0, 7.5vmax, 0);
transform: translate3d(0, 7.5vmax, 0);
}
}
@keyframes scroll {
0% {
-webkit-transform: translate3d(0, -7.5vw, 0);
transform: translate3d(0, -7.5vw, 0);
-webkit-transform: translate3d(0, -7.5vmax, 0);
transform: translate3d(0, -7.5vmax, 0);
}
100% {
-webkit-transform: translate3d(0, 7.5vw, 0);
transform: translate3d(0, 7.5vw, 0);
-webkit-transform: translate3d(0, 7.5vmax, 0);
transform: translate3d(0, 7.5vmax, 0);
}
}
@font-face {

3
build/index.php
View file

@ -4,6 +4,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
<title>FHQWHGADS</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<style><?php include('compiled-styles.css'); ?></style>
</head>
<body>
@ -12,7 +13,7 @@
<div id="scrollback">
i love u<br>-fhqwhgadshgnsdhjsdbkhsdabkfabkveybvf<br><br>
</div>
<div id="commandLine">a&gt;<input id="command" type="text" value="" /><span id="typing"></span></div>
<div id="commandLine">a&gt;<input id="command" name="command" type="text" value="" /><span id="typing"></span></div>
</label>
</form>
<script type="application/javascript"><?php include('application.js'); ?></script>

16
src/assets/css/style.less
View file

@ -16,23 +16,23 @@ label, label:before, label:after {
right: 0;
}
label {
top: 0;
bottom: 0;
min-height: 100%;
padding: 1em;
font-family: computerfontregular, monospace;
color: @consoleColor;
font-size: 4vw;
font-size: 4vmax;
overflow: hidden;
word-break: break-all;
}
label:before {
content: "";
z-index: -1;
top: -8vw;
bottom: -8vw;
top: -8vmax;
bottom: -8vmax;
animation: scroll 10s linear infinite;
background: url('/assets/images/scanline.svg');
background-size: 115vw 15vw;
background: url('/assets/images/scanline.svg') black;
background-size: 115vmax 15vmax;
background-repeat: repeat-y;
background-position: 50% 0%;
}
@ -81,9 +81,9 @@ label:before {
}
@keyframes scroll {
0% {
transform: translate3d(0,-7.5vw,0);
transform: translate3d(0,-7.5vmax,0);
}
100% {
transform: translate3d(0,7.5vw,0);
transform: translate3d(0,7.5vmax,0);
}
}

26
src/assets/images/scanline.svg
View file

@ -1,17 +1,11 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg id="svg2" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="200" width="2000" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
<metadata id="metadata7">
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<dc:title/>
</cc:Work>
</rdf:RDF>
</metadata>
<g id="layer1" transform="translate(0,-852.36218)">
<rect id="rect2985" style="fill:#000000;" height="210" width="2000" y="847.36" x="0"/>
<path id="path2987" style="stroke-linejoin:miter;stroke:#003f00;stroke-linecap:butt;stroke-miterlimit:4;stroke-dasharray:none;stroke-width:5;fill:none;" d="M1995.1,857.28,4.9182,1047.4"/>
</g>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="2000"
height="200">
<g><path d="M 2000,0 0,200" style="fill:none;stroke:#003f00;stroke-width:5;" /></g>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 892 B

After

Width:  |  Height:  |  Size: 362 B

Before After
Before After

3
src/index.php
View file

@ -4,6 +4,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
<title>FHQWHGADS</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<style><?php include('compiled-styles.css'); ?></style>
</head>
<body>
@ -12,7 +13,7 @@
<div id="scrollback">
i love u<br>-fhqwhgadshgnsdhjsdbkhsdabkfabkveybvf<br><br>
</div>
<div id="commandLine">a&gt;<input id="command" type="text" value="" /><span id="typing"></span></div>
<div id="commandLine">a&gt;<input id="command" name="command" type="text" value="" /><span id="typing"></span></div>
</label>
</form>
<script type="application/javascript"><?php include('application.js'); ?></script>

23
src/scripts/index.js
View file

@ -1,4 +1,17 @@
(function(){
function escapeHTML(html) {
var fn=function(tag) {
var charsToReplace = {
'&': '&amp;',
'<': '&lt;',
'>': '&gt;',
'"': '&#34;'
};
return charsToReplace[tag] || tag;
}
return html.replace(/[&<>"]/g, fn);
}
function syncTyping() {
var beforeSelection, selection, afterSelection;
beforeSelection = this.value.slice(0, this.selectionStart);
@ -12,4 +25,14 @@
commandline.onkeydown = syncTyping;
commandline.onkeyup = syncTyping;
commandline.onselect = syncTyping;
function handleForm() {
var scrollback = document.getElementById('scrollback');
var val = this.command.value;
this.command.value = '';
document.getElementById("typing").innerHTML = '';
scrollback.innerHTML = scrollback.innerHTML + 'a>' + escapeHTML(val) + '<br>Command not found.<br>';
return false;
}
document.forms[0].onsubmit = handleForm;
}());