AnderShell 3000

├── AUTHORS ├── monofonto.eot ├── monofonto.otf ├── monofonto.ttf ├── monofonto.woff ├── README.md ├── LICENSE ├── index.html ├── main.js ├── style.css └── monofonto.svg /AUTHORS: -------------------------------------------------------------------------------- 1 | Anders Evenrud 2 | -------------------------------------------------------------------------------- /monofonto.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bombcheck/retro-css-shell-demo/master/monofonto.eot -------------------------------------------------------------------------------- /monofonto.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bombcheck/retro-css-shell-demo/master/monofonto.otf -------------------------------------------------------------------------------- /monofonto.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bombcheck/retro-css-shell-demo/master/monofonto.ttf -------------------------------------------------------------------------------- /monofonto.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bombcheck/retro-css-shell-demo/master/monofonto.woff -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | A retro-looking shell using CSS and JavaScript 2 | 3 | 4 | Somewhat inspired by PipBoy and old-school UNIX terminals 5 | 6 | [See it in action here](http://andersevenrud.github.io/shell/) 7 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2011-2013, Anders Evenrud 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without 5 | modification, are permitted provided that the following conditions are met: 6 | 7 | 1. Redistributions of source code must retain the above copyright notice, this 8 | list of conditions and the following disclaimer. 9 | 2. Redistributions in binary form must reproduce the above copyright notice, 10 | this list of conditions and the following disclaimer in the documentation 11 | and/or other materials provided with the distribution. 12 | 13 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 14 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 15 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 16 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR 17 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 18 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 19 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND 20 | ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 21 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 22 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 23 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | AnderShell 3000 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |

13 |

14 |

15 | 16 |

17 |

18 |

19 |

20 |

21 |

22 | 23 |

24 | 25 | 26 | 30 | 33 |

34 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | /** 2 | * AnderShell - Just a small CSS demo 3 | * 4 | * Copyright (c) 2011-2013, Anders Evenrud 5 | * All rights reserved. 6 | * 7 | * Redistribution and use in source and binary forms, with or without 8 | * modification, are permitted provided that the following conditions are met: 9 | * 10 | * 1. Redistributions of source code must retain the above copyright notice, this 11 | * list of conditions and the following disclaimer. 12 | * 2. Redistributions in binary form must reproduce the above copyright notice, 13 | * this list of conditions and the following disclaimer in the documentation 14 | * and/or other materials provided with the distribution. 15 | * 16 | * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 17 | * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 18 | * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 19 | * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR 20 | * ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 21 | * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 22 | * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND 23 | * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 24 | * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 25 | * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 26 | */ 27 | (function() { 28 | 29 | var $output; 30 | var _inited = false; 31 | var _locked = false; 32 | var _buffer = []; 33 | var _obuffer = []; 34 | var _ibuffer = []; 35 | var _cwd = "/"; 36 | var _prompt = function() { return _cwd + " $ "; }; 37 | var _history = []; 38 | var _hindex = -1; 39 | var _lhindex = -1; 40 | 41 | var _filetree = { 42 | 'documents': {type: 'dir', files: { 43 | 'example1': {type: 'file', mime: 'text/plain', content: "This is just an example file"}, 44 | 'example2': {type: 'file', mime: 'text/plain', content: "This is just an example file. What did you think it was?"}, 45 | 'example3': {type: 'file', mime: 'text/plain', content: "This is just an example file. I'm super cereal!"}, 46 | 'example4': {type: 'file', mime: 'text/plain', content: "This is just an example file. Such wow!"}, 47 | 'example5': {type: 'file', mime: 'text/plain', content: "This is just an example file. Jelly much?"} 48 | }}, 49 | 'storage': {type: 'dir', files: { 50 | }}, 51 | 'AUTHORS': {type: 'file', mime: 'text/plain', content: "Created by Anders Evenrud \n\nThis is a demo using CSS only for graphics (no images), and JavaScript for a basic command line"}, 52 | 'README' : {type: 'file', mime: 'text/plain', content: 'All you see here is CSS. No images were used or harmed in creation of this demo'}, 53 | 'LICENSE': {type: 'file', mime: 'text/plain', content: "Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE."} 54 | }; 55 | 56 | var _commands = { 57 | 58 | sound: function(volume, duration, freq) { 59 | if ( !window.webkitAudioContext ) { 60 | return ['Your browser does not support his feature :(']; 61 | } 62 | 63 | volume = ((volume || '').replace(/[^0-9]/g, '') << 0) || 100; 64 | duration = ((duration || '').replace(/[^0-9]/g, '') << 0) || 1; 65 | freq = ((freq || '').replace(/[^0-9]/g, '') << 0) || 1000; 66 | 67 | var context = new webkitAudioContext(); 68 | var osc = context.createOscillator(); 69 | var vol = context.createGainNode(); 70 | 71 | vol.gain.value = volume/100; 72 | osc.frequency.value = freq; 73 | osc.connect(vol); 74 | vol.connect(context.destination); 75 | osc.start(context.currentTime); 76 | 77 | setTimeout(function() { 78 | osc.stop(); 79 | osc = null; 80 | context = null; 81 | vol = null; 82 | }, duration*1000); 83 | 84 | return ([ 85 | 'Volume: ' + volume, 86 | 'Duration: ' + duration, 87 | 'Frequenzy: ' + freq 88 | ]).join("\n"); 89 | }, 90 | 91 | ls: function(dir) { 92 | dir = parsepath((dir || _cwd)); 93 | 94 | var out = []; 95 | var iter = getiter(dir); 96 | 97 | var p; 98 | var tree = (iter && iter.type == 'dir') ? iter.files : _filetree; 99 | var count = 0; 100 | var total = 0; 101 | 102 | for ( var i in tree ) { 103 | if ( tree.hasOwnProperty(i) ) { 104 | p = tree[i]; 105 | if ( p.type == 'dir' ) { 106 | out.push(format('{0} {1} {2}', padRight('<'+i+'>', 20), padRight(p.type, 20), '0')); 107 | } else { 108 | out.push(format('{0} {1} {2}', padRight(i, 20), padRight(p.mime, 20), p.content.length)); 109 | total += p.content.length; 110 | } 111 | count++; 112 | } 113 | } 114 | 115 | out.push(format("\n{0} file(s) in total, {1} byte(s)", count, total)); 116 | 117 | return out.join("\n"); 118 | }, 119 | 120 | cd: function(dir) { 121 | if ( !dir ) { 122 | return (["You need to supply argument: dir"]).join("\n"); 123 | } 124 | 125 | var dirname = parsepath(dir); 126 | var iter = getiter(dirname); 127 | if ( dirname == '/' || (iter && iter.type == 'dir')) { 128 | _cwd = dirname; 129 | return (['Entered: ' + dirname]).join("\n"); 130 | } 131 | 132 | return (["Path not found: " + dirname]).join("\n"); 133 | }, 134 | 135 | cat: function(file) { 136 | if ( !file ) { 137 | return (["You need to supply argument: filename"]).join("\n"); 138 | } 139 | 140 | var filename = parsepath(file); 141 | var iter = getiter(filename); 142 | if ( !iter ) { 143 | return (["File not found: " + filename]).join("\n"); 144 | } 145 | 146 | return iter.content; 147 | }, 148 | 149 | cwd: function() { 150 | return (['Current directory: ' + _cwd]).join("\n"); 151 | }, 152 | 153 | clear: function() { 154 | return false; 155 | }, 156 | 157 | contact: function(key) { 158 | key = key || ''; 159 | var out = []; 160 | 161 | switch ( key.toLowerCase() ) { 162 | case 'email' : 163 | window.open('mailto:andersevenrud@gmail.com'); 164 | break; 165 | case 'github' : 166 | window.open('https://github.com/andersevenrud/'); 167 | break; 168 | case 'linkedin' : 169 | window.open('http://www.linkedin.com/in/andersevenrud'); 170 | break; 171 | case 'youtube' : 172 | window.open('https://www.youtube.com/user/andersevenrud'); 173 | break; 174 | case 'worpress' : 175 | window.open('http://anderse.wordpress.com/'); 176 | break; 177 | case 'twitter' : 178 | window.open('https://twitter.com/#!/andersevenrud'); 179 | break; 180 | case 'google+' : 181 | window.open('https://profiles.google.com/101576798387217383063?rel=author'); 182 | break; 183 | 184 | default : 185 | if ( key.length ) { 186 | out = ['Invalid key: ' + key]; 187 | } else { 188 | out = [ 189 | "Contact information:\n", 190 | 'Name: Anders Evenrud', 191 | 'Email: andersevenrud@gmail.com', 192 | 'Github: https://github.com/andersevenrud/', 193 | 'LinkedIn: http://www.linkedin.com/in/andersevenrud', 194 | 'YouTube: https://www.youtube.com/user/andersevenrud', 195 | 'Wordpress: http://anderse.wordpress.com/', 196 | 'Twitter: https://twitter.com/#!/andersevenrud', 197 | 'Google+: https://profiles.google.com/101576798387217383063?rel=author' 198 | ]; 199 | } 200 | break; 201 | } 202 | 203 | return out.join("\n"); 204 | }, 205 | 206 | help: function() { 207 | var out = [ 208 | 'help This command', 209 | 'contact How to contact author', 210 | 'contact Open page (example: `email` or `google+`)', 211 | 'clear Clears the screen', 212 | 'ls List current (or given) directory contents', 213 | 'cd Enter directory', 214 | 'cat Show file contents', 215 | 'sound [, , ] Generate a sound (WebKit only)', 216 | '' 217 | ]; 218 | 219 | return out.join("\n"); 220 | } 221 | 222 | }; 223 | 224 | ///////////////////////////////////////////////////////////////// 225 | // UTILS 226 | ///////////////////////////////////////////////////////////////// 227 | 228 | function setSelectionRange(input, selectionStart, selectionEnd) { 229 | if (input.setSelectionRange) { 230 | input.focus(); 231 | input.setSelectionRange(selectionStart, selectionEnd); 232 | } 233 | else if (input.createTextRange) { 234 | var range = input.createTextRange(); 235 | range.collapse(true); 236 | range.moveEnd('character', selectionEnd); 237 | range.moveStart('character', selectionStart); 238 | range.select(); 239 | } 240 | } 241 | 242 | function format(format) { 243 | var args = Array.prototype.slice.call(arguments, 1); 244 | var sprintfRegex = /\{(\d+)\}/g; 245 | 246 | var sprintf = function (match, number) { 247 | return number in args ? args[number] : match; 248 | }; 249 | 250 | return format.replace(sprintfRegex, sprintf); 251 | } 252 | 253 | 254 | function padRight(str, l, c) { 255 | return str+Array(l-str.length+1).join(c||" ") 256 | } 257 | 258 | function padCenter(str, width, padding) { 259 | var _repeat = function(s, num) { 260 | for( var i = 0, buf = ""; i < num; i++ ) buf += s; 261 | return buf; 262 | }; 263 | 264 | padding = (padding || ' ').substr( 0, 1 ); 265 | if ( str.length < width ) { 266 | var len = width - str.length; 267 | var remain = ( len % 2 == 0 ) ? "" : padding; 268 | var pads = _repeat(padding, parseInt(len / 2)); 269 | return pads + str + pads + remain; 270 | } 271 | 272 | return str; 273 | } 274 | 275 | function parsepath(p) { 276 | var dir = (p.match(/^\//) ? p : (_cwd + '/' + p)).replace(/\/+/g, '/'); 277 | return realpath(dir) || '/'; 278 | } 279 | 280 | function getiter(path) { 281 | var parts = (path.replace(/^\//, '') || '/').split("/"); 282 | var iter = null; 283 | 284 | var last = _filetree; 285 | while ( parts.length ) { 286 | var i = parts.shift(); 287 | if ( !last[i] ) break; 288 | 289 | if ( !parts.length ) { 290 | iter = last[i]; 291 | } else { 292 | last = last[i].type == 'dir' ? last[i].files : {}; 293 | } 294 | } 295 | 296 | return iter; 297 | } 298 | 299 | function realpath(path) { 300 | var parts = path.split(/\//); 301 | var path = []; 302 | for ( var i in parts ) { 303 | if ( parts.hasOwnProperty(i) ) { 304 | if ( parts[i] == '.' ) { 305 | continue; 306 | } 307 | 308 | if ( parts[i] == '..' ) { 309 | if ( path.length ) { 310 | path.pop(); 311 | } 312 | } else { 313 | path.push(parts[i]); 314 | } 315 | } 316 | } 317 | 318 | return path.join('/'); 319 | } 320 | 321 | window.requestAnimFrame = (function(){ 322 | return window.requestAnimationFrame || 323 | window.webkitRequestAnimationFrame || 324 | window.mozRequestAnimationFrame || 325 | function( callback ){ 326 | window.setTimeout(callback, 1000 / 60); 327 | }; 328 | })(); 329 | 330 | ///////////////////////////////////////////////////////////////// 331 | // SHELL 332 | ///////////////////////////////////////////////////////////////// 333 | 334 | (function animloop(){ 335 | requestAnimFrame(animloop); 336 | 337 | if ( _obuffer.length ) { 338 | $output.value += _obuffer.shift(); 339 | _locked = true; 340 | 341 | update(); 342 | } else { 343 | if ( _ibuffer.length ) { 344 | $output.value += _ibuffer.shift(); 345 | 346 | update(); 347 | } 348 | 349 | _locked = false; 350 | _inited = true; 351 | } 352 | })(); 353 | 354 | function print(input, lp) { 355 | update(); 356 | _obuffer = _obuffer.concat(lp ? [input] : input.split('')); 357 | } 358 | 359 | function update() { 360 | $output.focus(); 361 | var l = $output.value.length; 362 | setSelectionRange($output, l, l); 363 | $output.scrollTop = $output.scrollHeight; 364 | } 365 | 366 | function clear() { 367 | $output.value = ''; 368 | _ibuffer = []; 369 | _obuffer = []; 370 | print(""); 371 | } 372 | 373 | function command(cmd) { 374 | print("\n"); 375 | if ( cmd.length ) { 376 | var a = cmd.split(' '); 377 | var c = a.shift(); 378 | if ( c in _commands ) { 379 | var result = _commands[c].apply(_commands, a); 380 | if ( result === false ) { 381 | clear(); 382 | } else { 383 | print(result || "\n", true); 384 | } 385 | } else { 386 | print("Unknown command: " + c); 387 | } 388 | 389 | _history.push(cmd); 390 | } 391 | print("\n\n" + _prompt()); 392 | 393 | _hindex = -1; 394 | } 395 | 396 | function nextHistory() { 397 | if ( !_history.length ) return; 398 | 399 | var insert; 400 | if ( _hindex == -1 ) { 401 | _hindex = _history.length - 1; 402 | _lhindex = -1; 403 | insert = _history[_hindex]; 404 | } else { 405 | if ( _hindex > 1 ) { 406 | _lhindex = _hindex; 407 | _hindex--; 408 | insert = _history[_hindex]; 409 | } 410 | } 411 | 412 | if ( insert ) { 413 | if ( _lhindex != -1 ) { 414 | var txt = _history[_lhindex]; 415 | $output.value = $output.value.substr(0, $output.value.length - txt.length); 416 | update(); 417 | } 418 | _buffer = insert.split(''); 419 | _ibuffer = insert.split(''); 420 | } 421 | } 422 | 423 | window.onload = function() { 424 | $output = document.getElementById("output"); 425 | $output.contentEditable = true; 426 | $output.spellcheck = false; 427 | $output.value = ''; 428 | 429 | $output.onkeydown = function(ev) { 430 | var k = ev.which || ev.keyCode; 431 | var cancel = false; 432 | 433 | if ( !_inited ) { 434 | cancel = true; 435 | } else { 436 | if ( k == 9 ) { 437 | cancel = true; 438 | } else if ( k == 38 ) { 439 | nextHistory(); 440 | cancel = true; 441 | } else if ( k == 40 ) { 442 | cancel = true; 443 | } else if ( k == 37 || k == 39 ) { 444 | cancel = true; 445 | } 446 | } 447 | 448 | if ( cancel ) { 449 | ev.preventDefault(); 450 | ev.stopPropagation(); 451 | return false; 452 | } 453 | 454 | if ( k == 8 ) { 455 | if ( _buffer.length ) { 456 | _buffer.pop(); 457 | } else { 458 | ev.preventDefault(); 459 | return false; 460 | } 461 | } 462 | 463 | return true; 464 | }; 465 | 466 | $output.onkeypress = function(ev) { 467 | ev.preventDefault(); 468 | if ( !_inited ) { 469 | return false; 470 | } 471 | 472 | var k = ev.which || ev.keyCode; 473 | if ( k == 13 ) { 474 | var cmd = _buffer.join('').replace(/\s+/, ' '); 475 | _buffer = []; 476 | command(cmd); 477 | } else { 478 | if ( !_locked ) { 479 | var kc = String.fromCharCode(k); 480 | _buffer.push(kc); 481 | _ibuffer.push(kc); 482 | } 483 | } 484 | 485 | return true; 486 | }; 487 | 488 | $output.onfocus = function() { 489 | update(); 490 | }; 491 | 492 | $output.onblur = function() { 493 | update(); 494 | }; 495 | 496 | window.onfocus = function() { 497 | update(); 498 | }; 499 | 500 | print("Initializing AnderShell 3000 v0.1 ....................................................\n"); 501 | print("Copyright (c) 2014 Anders Evenrud \n\n", true); 502 | 503 | //print("------------------------------------------------------------------------------------------------------------------"); 504 | print(" @@@ @@@ @@@ @@@@@@@@ @@@ @@@@@@@ @@@@@@ @@@@@@@@@@ @@@@@@@@ \n", true); 505 | print(" @@@ @@@ @@@ @@@@@@@@ @@@ @@@@@@@@ @@@@@@@@ @@@@@@@@@@@ @@@@@@@@ \n", true); 506 | print(" @@! @@! @@! @@! @@! !@@ @@! @@@ @@! @@! @@! @@! \n", true); 507 | print(" !@! !@! !@! !@! !@! !@! !@! @!@ !@! !@! !@! !@! \n", true); 508 | print(" @!! !!@ @!@ @!!!:! @!! !@! @!@ !@! @!! !!@ @!@ @!!!:! \n", true); 509 | print(" !@! !!! !@! !!!!!: !!! !!! !@! !!! !@! ! !@! !!!!!: \n", true); 510 | print(" !!: !!: !!: !!: !!: :!! !!: !!! !!: !!: !!: \n", true); 511 | print(" :!: :!: :!: :!: :!: :!: :!: !:! :!: :!: :!: \n", true); 512 | print(" :::: :: ::: :: :::: :: :::: ::: ::: ::::: :: ::: :: :: :::: \n", true); 513 | print(" :: : : : : :: :: : :: : : :: :: : : : : : : : :: :: \n", true); 514 | print("\n\n\n", true); 515 | 516 | print(padCenter("All graphics are created using CSS, no static files or images\n", 113), true); 517 | 518 | print("\n\n\n\n\n", true); 519 | print("Type 'help' for a list of available commands.\n", true); 520 | print("\n\n" + _prompt()); 521 | 522 | }; 523 | 524 | })(); 525 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /** 2 | * AnderShell - Just a small CSS demo 3 | * 4 | * Copyright (c) 2011-2013, Anders Evenrud 5 | * All rights reserved. 6 | * 7 | * Redistribution and use in source and binary forms, with or without 8 | * modification, are permitted provided that the following conditions are met: 9 | * 10 | * 1. Redistributions of source code must retain the above copyright notice, this 11 | * list of conditions and the following disclaimer. 12 | * 2. Redistributions in binary form must reproduce the above copyright notice, 13 | * this list of conditions and the following disclaimer in the documentation 14 | * and/or other materials provided with the distribution. 15 | * 16 | * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 17 | * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 18 | * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 19 | * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR 20 | * ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 21 | * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 22 | * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND 23 | * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 24 | * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 25 | * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 26 | */ 27 | 28 | @font-face { 29 | font-family : MyFont; 30 | font-weight : normal; 31 | font-style : normal; 32 | src : url('monofonto.eot'); 33 | src : url('monofonto.eot?#iefix') format('embedded-opentype'), 34 | url('monofonto.woff') format('woff'), 35 | url('monofonto.ttf') format('truetype'), 36 | url('monofonto.svg#monofonto') format('svg'); 37 | } 38 | 39 | * { 40 | margin : 0; 41 | padding : 0; 42 | outline : none; 43 | } 44 | 45 | body { 46 | background-color : #000; 47 | webkit-touch-callout: none; 48 | -webkit-user-select: none; 49 | -khtml-user-select: none; 50 | -moz-user-select: none; 51 | -ms-user-select: none; 52 | -o-user-select: none; 53 | user-select: none; 54 | } 55 | 56 | #ga { 57 | position : absolute; 58 | bottom : 5px; 59 | left : 5px; 60 | z-index : -1; 61 | } 62 | 63 | #info { 64 | position : absolute; 65 | bottom : 5px; 66 | right : 5px; 67 | font-family : Monospace; 68 | color : #fff; 69 | font-size : 10px; 70 | text-align : right; 71 | } 72 | 73 | #outer { 74 | width : 1080px; 75 | height : 680px; 76 | 77 | left : 50%; 78 | top : 50%; 79 | margin-left : -540px; 80 | margin-top : -340px; 81 | position : absolute; 82 | background : #1D1D1D; 83 | box-shadow : inset 0px 0px 1px 10px #000; 84 | border-radius : 20px; 85 | } 86 | #outer:before { 87 | content : ''; 88 | position : absolute; 89 | top : 0px; 90 | left : 0px; 91 | right : 0px; 92 | bottom : 0px; 93 | background : #000; 94 | z-index : 2; 95 | 96 | background: -moz-linear-gradient(-45deg, rgba(149,149,149,0.5) 0%, rgba(13,13,13,0.55) 19%, rgba(1,1,1,0.64) 50%, rgba(10,10,10,0.69) 69%, rgba(51,51,51,0.73) 84%, rgba(22,22,22,0.76) 93%, rgba(27,27,27,0.78) 100%); /* FF3.6+ */ 97 | background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(149,149,149,0.5)), color-stop(19%,rgba(13,13,13,0.55)), color-stop(50%,rgba(1,1,1,0.64)), color-stop(69%,rgba(10,10,10,0.69)), color-stop(84%,rgba(51,51,51,0.73)), color-stop(93%,rgba(22,22,22,0.76)), color-stop(100%,rgba(27,27,27,0.78))); /* Chrome,Safari4+ */ 98 | background: -webkit-linear-gradient(-45deg, rgba(149,149,149,0.5) 0%,rgba(13,13,13,0.55) 19%,rgba(1,1,1,0.64) 50%,rgba(10,10,10,0.69) 69%,rgba(51,51,51,0.73) 84%,rgba(22,22,22,0.76) 93%,rgba(27,27,27,0.78) 100%); /* Chrome10+,Safari5.1+ */ 99 | background: -o-linear-gradient(-45deg, rgba(149,149,149,0.5) 0%,rgba(13,13,13,0.55) 19%,rgba(1,1,1,0.64) 50%,rgba(10,10,10,0.69) 69%,rgba(51,51,51,0.73) 84%,rgba(22,22,22,0.76) 93%,rgba(27,27,27,0.78) 100%); /* Opera 11.10+ */ 100 | background: -ms-linear-gradient(-45deg, rgba(149,149,149,0.5) 0%,rgba(13,13,13,0.55) 19%,rgba(1,1,1,0.64) 50%,rgba(10,10,10,0.69) 69%,rgba(51,51,51,0.73) 84%,rgba(22,22,22,0.76) 93%,rgba(27,27,27,0.78) 100%); /* IE10+ */ 101 | background: linear-gradient(135deg, rgba(149,149,149,0.5) 0%,rgba(13,13,13,0.55) 19%,rgba(1,1,1,0.64) 50%,rgba(10,10,10,0.69) 69%,rgba(51,51,51,0.73) 84%,rgba(22,22,22,0.76) 93%,rgba(27,27,27,0.78) 100%); /* W3C */ 102 | border-radius : 20px; 103 | 104 | opacity : .5; 105 | } 106 | #outer:after { 107 | content : ''; 108 | position : absolute; 109 | top : 0px; 110 | left : 0px; 111 | right : 0px; 112 | bottom : 0px; 113 | background-color : #ddd; 114 | opacity : .1; 115 | border-radius : 20px; 116 | z-index : 1; 117 | } 118 | 119 | #led { 120 | position : absolute; 121 | bottom : 22px; 122 | left : 22px; 123 | height : 5px; 124 | width : 5px; 125 | background : #00ff00; 126 | box-shadow : 0px 0px 2px 2px #00ff00; 127 | border : 1px solid rgba(0, 100, 0, .5); 128 | border-radius : 5px; 129 | } 130 | #led:before { 131 | content : ''; 132 | position : absolute; 133 | left : 0px; 134 | top : 0px; 135 | right : 0px; 136 | bottom : 0px; 137 | box-shadow : 0px 0px 4px 5px rgba(20, 255, 20, .5); 138 | border-radius : 5px; 139 | opacity : .5; 140 | 141 | -webkit-animation: pulseled 5s linear infinite; 142 | -moz-animation: pulseled 5s linear infinite; 143 | -ms-animation: pulseled 5s linear infinite; 144 | animation: pulseled 5s linear infinite; 145 | } 146 | #led:after { 147 | content : ''; 148 | position : absolute; 149 | left : 0px; 150 | top : 0px; 151 | right : 0px; 152 | bottom : 0px; 153 | background: -moz-radial-gradient(center, ellipse cover, rgba(161,255,0,0.45) 0%, rgba(33,244,22,0.61) 100%); /* FF3.6+ */ 154 | background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(161,255,0,0.45)), color-stop(100%,rgba(33,244,22,0.61))); /* Chrome,Safari4+ */ 155 | background: -webkit-radial-gradient(center, ellipse cover, rgba(161,255,0,0.45) 0%,rgba(33,244,22,0.61) 100%); /* Chrome10+,Safari5.1+ */ 156 | background: -o-radial-gradient(center, ellipse cover, rgba(161,255,0,0.45) 0%,rgba(33,244,22,0.61) 100%); /* Opera 12+ */ 157 | background: -ms-radial-gradient(center, ellipse cover, rgba(161,255,0,0.45) 0%,rgba(33,244,22,0.61) 100%); /* IE10+ */ 158 | background: radial-gradient(ellipse at center, rgba(161,255,0,0.45) 0%,rgba(33,244,22,0.61) 100%); /* W3C */ 159 | box-shadow : 0px 0px 2px 2px rgba(200, 255, 200, .5); 160 | border-radius : 5px; 161 | opacity : .5; 162 | 163 | -webkit-animation: pulseled 5s linear infinite; 164 | -moz-animation: pulseled 5s linear infinite; 165 | -ms-animation: pulseled 5s linear infinite; 166 | animation: pulseled 5s linear infinite; 167 | } 168 | 169 | #screen { 170 | width : 1000px; 171 | height : 600px; 172 | position : absolute; 173 | left : 50%; 174 | top : 50%; 175 | margin-left : -500px; 176 | margin-top : -300px; 177 | border-radius : 20px; 178 | box-shadow : 0px 0px 1px 3px rgba(10, 10, 10, .7); 179 | background : #000; 180 | overflow : hidden; 181 | z-index : 3; 182 | } 183 | 184 | #screen:before { 185 | content : ''; 186 | width : 1000px; 187 | height : 600px; 188 | position : absolute; 189 | top : 0px; 190 | left : 0px; 191 | 192 | background-color: #000; 193 | background: linear-gradient(#fff 50%, #000 50%); 194 | background-size: 100% 4px; 195 | background-repeat: repeat-y; 196 | 197 | opacity : .14; 198 | box-shadow : inset 0px 0px 10px 10px rgba(0, 0, 0, .8); 199 | border-radius : 20px; 200 | z-index : 10; 201 | 202 | -webkit-animation: pulse 5s linear infinite; 203 | -moz-animation: pulse 5s linear infinite; 204 | -ms-animation: pulse 5s linear infinite; 205 | animation: pulse 5s linear infinite; 206 | } 207 | 208 | #screen:after { 209 | content : ''; 210 | width : 1020px; 211 | height : 620px; 212 | position : absolute; 213 | top : -10px; 214 | left : -10px; 215 | background-color : #00ff77; 216 | background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%, rgba(0,0,0,0.62) 45%, rgba(0,9,4,0.6) 47%, rgba(0,255,119,1) 100%); /* FF3.6+ */ 217 | background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,1)), color-stop(45%,rgba(0,0,0,0.62)), color-stop(47%,rgba(0,9,4,0.6)), color-stop(100%,rgba(0,255,119,1))); /* Chrome,Safari4+ */ 218 | background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%,rgba(0,0,0,0.62) 45%,rgba(0,9,4,0.6) 47%,rgba(0,255,119,1) 100%); /* Chrome10+,Safari5.1+ */ 219 | background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%,rgba(0,0,0,0.62) 45%,rgba(0,9,4,0.6) 47%,rgba(0,255,119,1) 100%); /* Opera 12+ */ 220 | background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%,rgba(0,0,0,0.62) 45%,rgba(0,9,4,0.6) 47%,rgba(0,255,119,1) 100%); /* IE10+ */ 221 | background: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%,rgba(0,0,0,0.62) 45%,rgba(0,9,4,0.6) 47%,rgba(0,255,119,1) 100%); /* W3C */ 222 | box-shadow : inset 0px 0px 40px 40px rgba(100, 100, 100, .5); 223 | border-radius : 20px; 224 | opacity : .1; 225 | z-index : 11; 226 | } 227 | 228 | #layer { 229 | position : absolute; 230 | top : 0px; 231 | left : 0px; 232 | bottom : -10px; 233 | right : -10px; 234 | padding : 40px; 235 | overflow : hidden; 236 | z-index : 1; 237 | border-radius : 20px; 238 | box-shadow : inset 0px 0px 5px 5px rgba(255, 255, 255, .1); 239 | 240 | background: -moz-radial-gradient(center, ellipse cover, rgba(0,255,119,0.45) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */ 241 | background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,255,119,0.45)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */ 242 | background: -webkit-radial-gradient(center, ellipse cover, rgba(0,255,119,0.45) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */ 243 | background: -o-radial-gradient(center, ellipse cover, rgba(0,255,119,0.45) 0%,rgba(255,255,255,0) 100%); /* Opera 12+ */ 244 | background: -ms-radial-gradient(center, ellipse cover, rgba(0,255,119,0.45) 0%,rgba(255,255,255,0) 100%); /* IE10+ */ 245 | background: radial-gradient(ellipse at center, rgba(0,255,119,0.45) 0%,rgba(255,255,255,0) 100%); /* W3C */ 246 | 247 | -webkit-transform-origin : 50% 50%; 248 | -webkit-transform: perspective(200px) rotateX(.5deg) skewX(2deg) scale(1.03); 249 | -moz-transform-origin : 50% 50%; 250 | -moz-transform: perspective(200px) rotateX(.5deg) skewX(2deg) scale(1.03); 251 | transform-origin : 50% 50%; 252 | transform: perspective(200px) rotateX(.5deg) skewX(2deg) scale(1.03); 253 | 254 | -webkit-animation: glitch 1s linear infinite; 255 | -moz-animation: glitch 1s linear infinite; 256 | -ms-animation: glitch 1s linear infinite; 257 | animation: glitch 1s linear infinite; 258 | 259 | opacity : .9; 260 | } 261 | #layer:after { 262 | content : ''; 263 | width : 1000px; 264 | height : 600px; 265 | position : absolute; 266 | top : 0px; 267 | left : 0px; 268 | background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */ 269 | background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */ 270 | background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */ 271 | background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%,rgba(255,255,255,0) 100%); /* Opera 12+ */ 272 | background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */ 273 | background: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%,rgba(255,255,255,0) 100%); /* W3C */ 274 | opacity : .1; 275 | } 276 | 277 | 278 | #overlay { 279 | width : 1000px; 280 | height : 600px; 281 | position : absolute; 282 | left : 50%; 283 | top : 50%; 284 | margin-left : -500px; 285 | margin-top : -300px; 286 | border-radius : 20px; 287 | z-index : 100; 288 | } 289 | #overlay:before { 290 | content : ''; 291 | position : absolute; 292 | top : 0px; 293 | left : -50px; 294 | width : 1100px; 295 | height : 50px; 296 | 297 | background : #fff; 298 | background: -moz-linear-gradient(top, rgba(255,0,0,0) 0%, rgba(255,250,250,1) 50%, rgba(255,255,255,0.98) 51%, rgba(255,0,0,0) 100%); /* FF3.6+ */ 299 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,0,0,0)), color-stop(50%,rgba(255,250,250,1)), color-stop(51%,rgba(255,255,255,0.98)), color-stop(100%,rgba(255,0,0,0))); /* Chrome,Safari4+ */ 300 | background: -webkit-linear-gradient(top, rgba(255,0,0,0) 0%,rgba(255,250,250,1) 50%,rgba(255,255,255,0.98) 51%,rgba(255,0,0,0) 100%); /* Chrome10+,Safari5.1+ */ 301 | background: -o-linear-gradient(top, rgba(255,0,0,0) 0%,rgba(255,250,250,1) 50%,rgba(255,255,255,0.98) 51%,rgba(255,0,0,0) 100%); /* Opera 11.10+ */ 302 | background: -ms-linear-gradient(top, rgba(255,0,0,0) 0%,rgba(255,250,250,1) 50%,rgba(255,255,255,0.98) 51%,rgba(255,0,0,0) 100%); /* IE10+ */ 303 | background: linear-gradient(to bottom, rgba(255,0,0,0) 0%,rgba(255,250,250,1) 50%,rgba(255,255,255,0.98) 51%,rgba(255,0,0,0) 100%); /* W3C */ 304 | opacity : .01; 305 | 306 | -webkit-transform-origin : 50% 50%; 307 | -webkit-transform: perspective(1000px) skewX(3deg); 308 | 309 | -webkit-animation: vline 1.25s linear infinite; 310 | -moz-animation: vline 1.25s linear infinite; 311 | -ms-animation: vline 1.25s linear infinite; 312 | animation: vline 1.25s linear infinite; 313 | } 314 | #overlay:after { 315 | content : ''; 316 | position : absolute; 317 | top : -1px; 318 | left : -1px; 319 | width : 1002px; 320 | height : 602px; 321 | border-radius : 20px; 322 | box-shadow: 0 2px 6px rgba(100,100,100,0.2), 323 | inset 0 1px rgba(200,200,200,0.1), 324 | inset 0 10px rgba(200,200,200,0.05), 325 | inset 0 10px 20px rgba(255,255,255,0.05), 326 | inset 0 -15px 30px rgba(100,100,100,0.1); 327 | 328 | } 329 | 330 | #output { 331 | resize : none; 332 | -webkit-appearance: none; 333 | -webkit-border-radius: 0px; 334 | -moz-appearance: none; 335 | -moz-border-radius: 0px; 336 | overflow : hidden; 337 | white-space : pre; 338 | border : 0 none; 339 | display : block !important; 340 | width : 100%; 341 | height : 100%; 342 | -webkit-box-sizing: border-box; 343 | -moz-box-sizing: border-box; 344 | box-sizing: border-box; 345 | background : transparent; 346 | font-family : MyFont, Monospace; 347 | font-size : 15px; 348 | line-height : 20px; 349 | /*color : #00ff77;*/ 350 | color : #18FF62; 351 | text-shadow : 0px 0px 2px rgba(10, 255, 10, .8); 352 | opacity : .99; 353 | 354 | background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%, rgba(0,0,0,0.19) 100%); /* FF3.6+ */ 355 | background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.19))); /* Chrome,Safari4+ */ 356 | background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0.19) 100%); /* Chrome10+,Safari5.1+ */ 357 | background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0.19) 100%); /* Opera 12+ */ 358 | background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0.19) 100%); /* IE10+ */ 359 | background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%,rgba(0,0,0,0.19) 100%); /* W3C */ 360 | 361 | -webkit-transform-origin : 50% 50%; 362 | -webkit-transform: perspective(200px) skewX(.5deg); 363 | -moz-transform-origin : 50% 50%; 364 | -moz-transform: perspective(200px) skewX(.5deg); 365 | 366 | -webkit-animation: shifter 5s linear infinite; 367 | -moz-animation: shifter 5s linear infinite; 368 | -ms-animation: shifter 5s linear infinite; 369 | animation: shifter 5s linear infinite; 370 | } 371 | #output:after { 372 | content : ''; 373 | position : absolute; 374 | top : -1px; 375 | left : -1px; 376 | right : -1px; 377 | bottom : -1px; 378 | 379 | background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%, rgba(0,0,0,0.30) 100%); /* FF3.6+ */ 380 | background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.30))); /* Chrome,Safari4+ */ 381 | background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0.30) 100%); /* Chrome10+,Safari5.1+ */ 382 | background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0.30) 100%); /* Opera 12+ */ 383 | background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0.30) 100%); /* IE10+ */ 384 | background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%,rgba(0,0,0,0.30) 100%); /* W3C */ 385 | } 386 | 387 | @-webkit-keyframes glitch { 388 | 0% {-webkit-transform: scale(1, 1.002); } 389 | 50% {-webkit-transform: scale(1, 1.0001); } 390 | 100% {-webkit-transform: scale(1.001, 1); } 391 | } 392 | @-moz-keyframes glitch { 393 | 0% {-moz-transform: scale(1, 1.002); } 394 | 50% {-moz-transform: scale(1, 1.0001); } 395 | 100% {-moz-transform: scale(1.001, 1); } 396 | } 397 | @-ms-keyframes glitch { 398 | 0% {-ms-transform: scale(1, 1.002); } 399 | 50% {-ms-transform: scale(1, 1.0001); } 400 | 100% {-ms-transform: scale(1.001, 1); } 401 | } 402 | 403 | @-webkit-keyframes pulse { 404 | 0% {-webkit-transform: scale(1.001); opacity: .14; } 405 | 8% {-webkit-transform: scale(1.000); opacity: .13; } 406 | 15% {-webkit-transform: scale(1.004); opacity: .14; } 407 | 30% {-webkit-transform: scale(1.002); opacity: .11; } 408 | 100% {-webkit-transform: scale(1.000); opacity: .14; } 409 | } 410 | @-moz-keyframes pulse { 411 | 0% {-moz-transform: scale(1.001); opacity: .14; } 412 | 8% {-moz-transform: scale(1.000); opacity: .13; } 413 | 15% {-moz-transform: scale(1.004); opacity: .14; } 414 | 30% {-moz-transform: scale(1.002); opacity: .11; } 415 | 100% {-moz-transform: scale(1.000); opacity: .14; } 416 | } 417 | @-ms-keyframes pulse { 418 | 0% {-ms-transform: scale(1.001); opacity: .14; } 419 | 8% {-ms-transform: scale(1.000); opacity: .13; } 420 | 15% {-ms-transform: scale(1.004); opacity: .14; } 421 | 30% {-ms-transform: scale(1.002); opacity: .11; } 422 | 100% {-ms-transform: scale(1.000); opacity: .14; } 423 | } 424 | 425 | @-webkit-keyframes pulseled { 426 | 0% {-webkit-transform: scale(1.001); opacity: .50; } 427 | 8% {-webkit-transform: scale(1.000); opacity: .25; } 428 | 15% {-webkit-transform: scale(1.004); opacity: .50; } 429 | 30% {-webkit-transform: scale(1.002); opacity: .40; } 430 | 100% {-webkit-transform: scale(1.000); opacity: .50; } 431 | } 432 | @-moz-keyframes pulseled { 433 | 0% {-moz-transform: scale(1.001); opacity: .50; } 434 | 8% {-moz-transform: scale(1.000); opacity: .25; } 435 | 15% {-moz-transform: scale(1.004); opacity: .50; } 436 | 30% {-moz-transform: scale(1.002); opacity: .40; } 437 | 100% {-moz-transform: scale(1.000); opacity: .50; } 438 | } 439 | @-ms-keyframes pulseled { 440 | 0% {-ms-transform: scale(1.001); opacity: .50; } 441 | 8% {-ms-transform: scale(1.000); opacity: .25; } 442 | 15% {-ms-transform: scale(1.004); opacity: .50; } 443 | 30% {-ms-transform: scale(1.002); opacity: .40; } 444 | 100% {-ms-transform: scale(1.000); opacity: .50; } 445 | } 446 | 447 | @-webkit-keyframes shifter { 448 | 0% {-webkit-transform: perspective(200px) skewX(.5deg); text-shadow : 0px 0px 2px rgba(10, 255, 10, .8); } 449 | 8% {-webkit-transform: perspective(400px) skewX(1.0deg) scale(1.0001); } 450 | 15% {-webkit-transform: perspective(200px) skewX(.6deg) skewY(-.05deg); text-shadow : 0px 0px 2px rgba(100, 0, 100, .5); } 451 | 30% {-webkit-transform: perspective(200px) skewX(.6deg); } 452 | 100% {-webkit-transform: perspective(200px) skewX(.1deg); text-shadow : 1px 0px 2px rgba(100, 255, 100, 1); } 453 | } 454 | @-moz-keyframes shifter { 455 | 0% {-moz-transform: perspective(200px) skewX(.5deg); text-shadow : 0px 0px 2px rgba(10, 255, 10, .8); } 456 | 8% {-moz-transform: perspective(400px) skewX(1.0deg) scale(1.0001); } 457 | 15% {-moz-transform: perspective(200px) skewX(.6deg) skewY(-.05deg); text-shadow : 0px 0px 2px rgba(100, 0, 100, .5); } 458 | 30% {-moz-transform: perspective(200px) skewX(.6deg); } 459 | 100% {-moz-transform: perspective(200px) skewX(.1deg); text-shadow : 1px 0px 2px rgba(100, 255, 100, 1); } 460 | } 461 | @-ms-keyframes shifter { 462 | 0% {-ms-transform: perspective(200px) skewX(.5deg); text-shadow : 0px 0px 2px rgba(10, 255, 10, .8); } 463 | 8% {-ms-transform: perspective(400px) skewX(1.0deg) scale(1.0001); } 464 | 15% {-ms-transform: perspective(200px) skewX(.6deg) skewY(-.05deg); text-shadow : 0px 0px 2px rgba(100, 0, 100, .5); } 465 | 30% {-ms-transform: perspective(200px) skewX(.6deg); } 466 | 100% {-ms-transform: perspective(200px) skewX(.1deg); text-shadow : 1px 0px 2px rgba(100, 255, 100, 1); } 467 | } 468 | 469 | @-webkit-keyframes vline { 470 | 0% { top: 0px;} 471 | 100% { top: 100%;} 472 | } 473 | @-moz-keyframes vline { 474 | 0% { top: 0px;} 475 | 100% { top: 100%;} 476 | } 477 | @-ms-keyframes vline { 478 | 0% { top: 0px;} 479 | 100% { top: 100%;} 480 | } 481 | -------------------------------------------------------------------------------- /monofonto.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 958 | --------------------------------------------------------------------------------