mirror of
https://github.com/seigler/fhqwhgads
synced 2025-07-26 22:46:08 +00:00
added node and grunt stuff, improved cursor and selection handling
This commit is contained in:
Joshua Seigler
parent
e226475f42
commit
edae59d5e7
23 changed files with 487 additions and 114 deletions
3
.gitignore
vendored
3
.gitignore
vendored
|
|
@ -1,3 +1,4 @@
|
||||||
# https://git-scm.com/docs/gitignore
|
# https://git-scm.com/docs/gitignore
|
||||||
# https://help.github.com/articles/ignoring-files
|
# https://help.github.com/articles/ignoring-files
|
||||||
# Example .gitignore files: https://github.com/github/gitignore
|
# Example .gitignore files: https://github.com/github/gitignore
|
||||||
|
/node_modules/
|
||||||
|
|
|
||||||
129
Gruntfile.js
Normal file
129
Gruntfile.js
Normal file
|
|
@ -0,0 +1,129 @@
|
||||||
|
module.exports = function (grunt) {
|
||||||
|
|
||||||
|
// Project configuration.
|
||||||
|
grunt.initConfig({
|
||||||
|
pkg: grunt.file.readJSON('package.json'),
|
||||||
|
|
||||||
|
copy: {
|
||||||
|
build: {
|
||||||
|
cwd: 'src',
|
||||||
|
src: [
|
||||||
|
'**',
|
||||||
|
'!**/*.less',
|
||||||
|
'!**/*.css',
|
||||||
|
'!**/*.js',
|
||||||
|
'!**/*.xcf'
|
||||||
|
],
|
||||||
|
dest: 'build',
|
||||||
|
expand: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
clean: {
|
||||||
|
build: {
|
||||||
|
src: [ 'build' ]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
cleanempty: {
|
||||||
|
build: {
|
||||||
|
options: {
|
||||||
|
files: false,
|
||||||
|
folders: true
|
||||||
|
},
|
||||||
|
src: [ 'build/**/*' ]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
uglify: {
|
||||||
|
build: {
|
||||||
|
options: {
|
||||||
|
compress: false,
|
||||||
|
beautify: true,
|
||||||
|
mangle: false
|
||||||
|
},
|
||||||
|
files: {
|
||||||
|
'build/application.js': [ 'src/**/*.js', '!src/assets/javascript/index.js', 'src/assets/javascript/index.js' ]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
less: {
|
||||||
|
build: {
|
||||||
|
options: {
|
||||||
|
relativeUrls: true
|
||||||
|
},
|
||||||
|
files: {
|
||||||
|
'build/compiled-styles.css': 'src/site.less'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
autoprefixer: {
|
||||||
|
build: {
|
||||||
|
expand: true,
|
||||||
|
src: [ 'build/**/*.css' ]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
options: {
|
||||||
|
livereload: true
|
||||||
|
},
|
||||||
|
stylesheets: {
|
||||||
|
files: ['src/**/*.less', 'src/**/*.css'],
|
||||||
|
tasks: [ 'stylesheets' ]
|
||||||
|
},
|
||||||
|
scripts: {
|
||||||
|
files: 'src/**/*.js',
|
||||||
|
tasks: [ 'scripts' ]
|
||||||
|
},
|
||||||
|
copy: {
|
||||||
|
files: [ 'src/**', '!src/**/*.less', '!src/**/*.css', '!src/**/*.js' ],
|
||||||
|
tasks: [ 'copy', 'cleanempty' ]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
php: {
|
||||||
|
watch: {
|
||||||
|
options: {
|
||||||
|
hostname: '0.0.0.0',
|
||||||
|
port: 1337,
|
||||||
|
base: 'build'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Load plugins
|
||||||
|
grunt.loadNpmTasks('grunt-contrib-copy');
|
||||||
|
grunt.loadNpmTasks('grunt-contrib-clean');
|
||||||
|
grunt.loadNpmTasks('grunt-cleanempty');
|
||||||
|
grunt.loadNpmTasks('grunt-contrib-uglify');
|
||||||
|
grunt.loadNpmTasks('grunt-contrib-less');
|
||||||
|
grunt.loadNpmTasks('grunt-autoprefixer');
|
||||||
|
grunt.loadNpmTasks('grunt-contrib-watch');
|
||||||
|
grunt.loadNpmTasks('grunt-php');
|
||||||
|
|
||||||
|
// Default task(s).
|
||||||
|
grunt.registerTask(
|
||||||
|
'default',
|
||||||
|
'Default is to build everything, then watch for changes',
|
||||||
|
['build', 'php:watch', 'watch']
|
||||||
|
);
|
||||||
|
grunt.registerTask(
|
||||||
|
'stylesheets',
|
||||||
|
'Compiles the stylesheets.',
|
||||||
|
[ 'less', 'autoprefixer' ]
|
||||||
|
);
|
||||||
|
grunt.registerTask(
|
||||||
|
'scripts',
|
||||||
|
'Compiles the scripts.',
|
||||||
|
[ 'uglify' ]
|
||||||
|
);
|
||||||
|
grunt.registerTask(
|
||||||
|
'build',
|
||||||
|
'Compiles all of the assets and copies the files to the build directory.',
|
||||||
|
[ 'clean', 'copy', 'stylesheets', 'scripts', 'cleanempty' ]
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
@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;
|
|
||||||
}
|
|
||||||
15
build/application.js
Normal file
15
build/application.js
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
(function() {
|
||||||
|
function syncTyping() {
|
||||||
|
var beforeSelection, selection, afterSelection;
|
||||||
|
beforeSelection = this.value.slice(0, this.selectionStart);
|
||||||
|
selection = this.value.slice(this.selectionStart, this.selectionEnd);
|
||||||
|
afterSelection = this.value.slice(this.selectionEnd);
|
||||||
|
document.getElementById("typing").innerHTML = beforeSelection + (this.selectionStart == this.selectionEnd ? "<span id='cursor'></span>" : "") + "<span id='selection'>" + selection + "</span>" + afterSelection;
|
||||||
|
}
|
||||||
|
var commandline = document.getElementById("command");
|
||||||
|
commandline.value = "";
|
||||||
|
commandline.focus();
|
||||||
|
commandline.onkeydown = syncTyping;
|
||||||
|
commandline.onkeyup = syncTyping;
|
||||||
|
commandline.onselect = syncTyping;
|
||||||
|
})();
|
||||||
17
build/assets/images/scanline.svg
Normal file
17
build/assets/images/scanline.svg
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
<?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>
|
||||||
|
After Width: | Height: | Size: 892 B |
128
build/compiled-styles.css
Normal file
128
build/compiled-styles.css
Normal file
|
|
@ -0,0 +1,128 @@
|
||||||
|
*,
|
||||||
|
*:after,
|
||||||
|
*:before {
|
||||||
|
box-sizing: inherit;
|
||||||
|
}
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
height: 100%;
|
||||||
|
line-height: 1;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
label,
|
||||||
|
label:before,
|
||||||
|
label:after {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
label {
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
padding: 1em;
|
||||||
|
font-family: computerfontregular, monospace;
|
||||||
|
color: #009900;
|
||||||
|
font-size: 4vw;
|
||||||
|
overflow: hidden;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
label:before {
|
||||||
|
content: "";
|
||||||
|
z-index: -1;
|
||||||
|
top: -8vw;
|
||||||
|
bottom: -8vw;
|
||||||
|
-webkit-animation: scroll 10s linear infinite;
|
||||||
|
animation: scroll 10s linear infinite;
|
||||||
|
background: url('/assets/images/scanline.svg');
|
||||||
|
background-size: 115vw 15vw;
|
||||||
|
background-repeat: repeat-y;
|
||||||
|
background-position: 50% 0%;
|
||||||
|
}
|
||||||
|
#commandLine {
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
#command {
|
||||||
|
position: absolute;
|
||||||
|
margin-top: 1.25em;
|
||||||
|
z-index: -2;
|
||||||
|
}
|
||||||
|
#cursor {
|
||||||
|
position: absolute;
|
||||||
|
display: inline-block;
|
||||||
|
border-left: 0.1em solid;
|
||||||
|
margin-bottom: -0.2em;
|
||||||
|
height: 1em;
|
||||||
|
-webkit-animation: blink 1s linear infinite;
|
||||||
|
animation: blink 1s linear infinite;
|
||||||
|
}
|
||||||
|
#selection {
|
||||||
|
color: black;
|
||||||
|
background-color: #009900;
|
||||||
|
}
|
||||||
|
@-webkit-keyframes blink {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
40% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
90% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes blink {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
40% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
90% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-webkit-keyframes scroll {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: translate3d(0, -7.5vw, 0);
|
||||||
|
transform: translate3d(0, -7.5vw, 0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
-webkit-transform: translate3d(0, 7.5vw, 0);
|
||||||
|
transform: translate3d(0, 7.5vw, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes scroll {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: translate3d(0, -7.5vw, 0);
|
||||||
|
transform: translate3d(0, -7.5vw, 0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
-webkit-transform: translate3d(0, 7.5vw, 0);
|
||||||
|
transform: translate3d(0, 7.5vw, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: 'computerfontregular';
|
||||||
|
src: url('/assets/fonts/computerfont-webfont.eot');
|
||||||
|
src: url('/assets/fonts/computerfont-webfont.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url('/assets/fonts/computerfont-webfont.woff2') format('woff2'),
|
||||||
|
url('/assets/fonts/computerfont-webfont.woff') format('woff'),
|
||||||
|
url('/assets/fonts/computerfont-webfont.ttf') format('truetype');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
20
build/index.php
Normal file
20
build/index.php
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
<!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>
|
||||||
|
<style><?php include('compiled-styles.css'); ?></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="" /><span id="typing"></span></div>
|
||||||
|
</label>
|
||||||
|
</form>
|
||||||
|
<script type="application/javascript"><?php include('application.js'); ?></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
103
index.html
103
index.html
|
|
@ -1,103 +0,0 @@
|
||||||
<!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>
|
|
||||||
23
package.json
Normal file
23
package.json
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
{
|
||||||
|
"name": "fhqwhgads.bit",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"description": "novelty site",
|
||||||
|
"main": "src/scripts/index.js",
|
||||||
|
"scripts": {
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
|
},
|
||||||
|
"author": "Joshua Seigler",
|
||||||
|
"license": "CC BY 4.0",
|
||||||
|
"devDependencies": {
|
||||||
|
"grunt": "~0.4.5",
|
||||||
|
"grunt-contrib-copy": "~0.7.0",
|
||||||
|
"grunt-contrib-clean": "~0.6.0",
|
||||||
|
"grunt-contrib-less": "~0.12.0",
|
||||||
|
"grunt-autoprefixer": "~2.0.0",
|
||||||
|
"grunt-contrib-watch": "~0.6.1",
|
||||||
|
"grunt-contrib-uglify": "~0.6.0",
|
||||||
|
"grunt-cleanempty": "~1.0.1",
|
||||||
|
"grunt-php": "~1.1.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
89
src/assets/css/style.less
Normal file
89
src/assets/css/style.less
Normal file
|
|
@ -0,0 +1,89 @@
|
||||||
|
@consoleColor: #090;
|
||||||
|
|
||||||
|
*, *:after, *:before {
|
||||||
|
box-sizing: inherit;
|
||||||
|
}
|
||||||
|
html, body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
height: 100%;
|
||||||
|
line-height: 1;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
label, label:before, label:after {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
label {
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
padding: 1em;
|
||||||
|
font-family: computerfontregular, monospace;
|
||||||
|
color: @consoleColor;
|
||||||
|
font-size: 4vw;
|
||||||
|
overflow: hidden;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
label:before {
|
||||||
|
content: "";
|
||||||
|
z-index: -1;
|
||||||
|
top: -8vw;
|
||||||
|
bottom: -8vw;
|
||||||
|
animation: scroll 10s linear infinite;
|
||||||
|
background: url('/assets/images/scanline.svg');
|
||||||
|
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);
|
||||||
|
//}
|
||||||
|
#commandLine {
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
#command {
|
||||||
|
position: absolute;
|
||||||
|
margin-top: 1.25em;
|
||||||
|
z-index: -2;
|
||||||
|
}
|
||||||
|
#cursor {
|
||||||
|
position: absolute;
|
||||||
|
display: inline-block;
|
||||||
|
border-left: 0.1em solid;
|
||||||
|
margin-bottom: -0.2em;
|
||||||
|
height: 1em;
|
||||||
|
animation: blink 1s linear infinite;
|
||||||
|
}
|
||||||
|
#selection {
|
||||||
|
color: black;
|
||||||
|
background-color: @consoleColor;
|
||||||
|
}
|
||||||
|
@keyframes blink {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
40% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
90% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes scroll {
|
||||||
|
0% {
|
||||||
|
transform: translate3d(0,-7.5vw,0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translate3d(0,7.5vw,0);
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
src/assets/fonts/computerfont-webfont.eot
Normal file
BIN
src/assets/fonts/computerfont-webfont.eot
Normal file
Binary file not shown.
BIN
src/assets/fonts/computerfont-webfont.ttf
Normal file
BIN
src/assets/fonts/computerfont-webfont.ttf
Normal file
Binary file not shown.
BIN
src/assets/fonts/computerfont-webfont.woff
Normal file
BIN
src/assets/fonts/computerfont-webfont.woff
Normal file
Binary file not shown.
BIN
src/assets/fonts/computerfont-webfont.woff2
Normal file
BIN
src/assets/fonts/computerfont-webfont.woff2
Normal file
Binary file not shown.
10
src/assets/fonts/font.css
Normal file
10
src/assets/fonts/font.css
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: 'computerfontregular';
|
||||||
|
src: url('/assets/fonts/computerfont-webfont.eot');
|
||||||
|
src: url('/assets/fonts/computerfont-webfont.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url('/assets/fonts/computerfont-webfont.woff2') format('woff2'),
|
||||||
|
url('/assets/fonts/computerfont-webfont.woff') format('woff'),
|
||||||
|
url('/assets/fonts/computerfont-webfont.ttf') format('truetype');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
17
src/assets/images/scanline.svg
Normal file
17
src/assets/images/scanline.svg
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
<?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>
|
||||||
|
After Width: | Height: | Size: 892 B |
20
src/index.php
Normal file
20
src/index.php
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
<!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>
|
||||||
|
<style><?php include('compiled-styles.css'); ?></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="" /><span id="typing"></span></div>
|
||||||
|
</label>
|
||||||
|
</form>
|
||||||
|
<script type="application/javascript"><?php include('application.js'); ?></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
15
src/scripts/index.js
Normal file
15
src/scripts/index.js
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
(function(){
|
||||||
|
function syncTyping() {
|
||||||
|
var beforeSelection, selection, afterSelection;
|
||||||
|
beforeSelection = this.value.slice(0, this.selectionStart);
|
||||||
|
selection = this.value.slice(this.selectionStart, this.selectionEnd)
|
||||||
|
afterSelection = this.value.slice(this.selectionEnd)
|
||||||
|
document.getElementById("typing").innerHTML = beforeSelection + (this.selectionStart == this.selectionEnd ? "<span id='cursor'></span>" : "") + "<span id='selection'>" + selection + "</span>" + afterSelection;
|
||||||
|
}
|
||||||
|
var commandline = document.getElementById("command");
|
||||||
|
commandline.value = "";
|
||||||
|
commandline.focus();
|
||||||
|
commandline.onkeydown = syncTyping;
|
||||||
|
commandline.onkeyup = syncTyping;
|
||||||
|
commandline.onselect = syncTyping;
|
||||||
|
}());
|
||||||
2
src/site.less
Normal file
2
src/site.less
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
@import 'assets/css/style.less';
|
||||||
|
@import (inline) 'assets/fonts/font.css';
|
||||||
Loading…
Add table
Add a link
Reference in a new issue