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://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