From c6e6efa4b67b80b270b9bb5e815e724d679106b7 Mon Sep 17 00:00:00 2001
From: Marcin Kulik <marcin.kulik@gmail.com>
Date: Mon, 21 Nov 2011 23:17:11 +0100
Subject: [PATCH] JS & CSS from old Sinatra project

---
 app/assets/javascripts/ansi-interpreter.js | 183 ++++++
 app/assets/javascripts/misc.js             |  10 +
 app/assets/javascripts/player.js           |  73 +++
 app/assets/javascripts/terminal.js         | 305 ++++++++++
 app/assets/javascripts/utf8.js             |  68 +++
 app/assets/stylesheets/main.css            | 631 +++++++++++++++++++++
 app/assets/stylesheets/reset.css           |  88 +++
 7 files changed, 1358 insertions(+)
 create mode 100644 app/assets/javascripts/ansi-interpreter.js
 create mode 100644 app/assets/javascripts/misc.js
 create mode 100644 app/assets/javascripts/player.js
 create mode 100644 app/assets/javascripts/terminal.js
 create mode 100644 app/assets/javascripts/utf8.js
 create mode 100644 app/assets/stylesheets/main.css
 create mode 100644 app/assets/stylesheets/reset.css

diff --git a/app/assets/javascripts/ansi-interpreter.js b/app/assets/javascripts/ansi-interpreter.js
new file mode 100644
index 0000000..b1ce571
--- /dev/null
+++ b/app/assets/javascripts/ansi-interpreter.js
@@ -0,0 +1,183 @@
+SP.AnsiInterpreter = function(terminal) {
+  this.terminal = terminal;
+  this.compilePatterns();
+}
+
+SP.AnsiInterpreter.prototype = {
+  PATTERNS: {
+    "\x07": function(data) {
+      // bell
+    },
+
+    "\x08": function(data) {
+      this.terminal.bs();
+    },
+
+    "\x0a": function(data) {
+      this.terminal.cursorDown();
+    },
+
+    "\x0d": function(data) {
+      this.terminal.cr();
+    },
+
+    "\x0e": function(data) {
+    },
+
+    "\x0f": function(data) {
+    },
+
+    "\x82": function(data) { // Reserved (?)
+    },
+
+    "\x94": function(data) { // Cancel Character, ignore previous character
+    },
+
+    // 20 - 7e
+    "([\x20-\x7e]|\xe2..|[\xc5\xc4].)+": function(data, match) {
+      this.terminal.print(match[0]);
+    },
+
+    "\x1b\\(B": function(data) { // SCS (Set G0 Character SET)
+    },
+
+    "\x1b\\[(?:[0-9]+)?(?:;[0-9]+)*([\x40-\x7e])": function(data, match) {
+      this.params = [];
+      var re = /(\d+)/g;
+      var m;
+
+      while (m = re.exec(match[0])) {
+        this.params.push(parseInt(m[1]));
+      }
+
+      this.n = this.params[0];
+      this.m = this.params[1];
+
+      this.handleCSI(match[1]);
+    },
+
+    "\x1b\\[\\?([\x30-\x3f]+)([hlsr])": function(data, match) { // private standards
+      // h = Sets DEC/xterm specific mode (http://ttssh2.sourceforge.jp/manual/en/about/ctrlseq.html#decmode)
+      // l = Resets mode (http://ttssh2.sourceforge.jp/manual/en/about/ctrlseq.html#mode)
+      // 1001 + s = ?
+      // 1001 + r = ?
+
+      if (match[1] == '1049') {
+        if (match[2] == 'h') {
+          // 1049 + h = Save cursor position, switch to alternate screen buffer, and clear screen.
+          this.terminal.saveCursor();
+          this.terminal.switchToAlternateBuffer();
+          this.terminal.clearScreen();
+        } else if (match[2] == 'l') {
+          // 1049 + l = Clear screen, switch to normal screen buffer, and restore cursor position.
+          this.terminal.clearScreen();
+          this.terminal.switchToNormalBuffer();
+          this.terminal.restoreCursor();
+        }
+      } else if (match[1] == '1002') {
+        // 2002 + h / l = mouse tracking stuff
+      } else if (match[1] == '1') {
+        // 1 + h / l = cursor keys stuff
+      }
+    },
+
+    "\x1b\x3d": function(data) { // DECKPAM - Set keypad to applications mode (ESCape instead of digits)
+    },
+
+    "\x1b\x3e": function(data) { // DECKPNM - Set keypad to numeric mode (digits intead of ESCape seq)
+    },
+
+    "\x1b\\\x5d[012]\x3b(?:.)*?\x07": function(data, match) { // OSC - Operating System Command (terminal title)
+    },
+
+    "\x1b\\[>c": function(data) { // Secondary Device Attribute request (?)
+    },
+
+    "\x1bP([^\\\\])*?\\\\": function(data) { // DCS, Device Control String
+    },
+
+    "\x1b\x37": function(data) { // save cursor pos and char attrs
+      this.terminal.saveCursor();
+    },
+
+    "\x1b\x38": function(data) { // restore cursor pos and char attrs
+      this.terminal.restoreCursor();
+    }
+  },
+
+  handleCSI: function(term) {
+    switch(term) {
+      case "@":
+        this.terminal.reserveCharacters(this.n);
+        break;
+      case "A":
+        this.terminal.cursorUp(this.n || 1);
+        break;
+      case "B":
+        this.terminal.cursorDown(this.n || 1);
+        break;
+      case "C":
+        this.terminal.cursorForward(this.n || 1);
+        break;
+      case "D":
+        this.terminal.cursorBack(this.n || 1);
+        break;
+      case "H":
+        this.terminal.setCursorPos(this.n || 1, this.m || 1);
+        break;
+      case "J":
+        this.terminal.eraseData(this.n || 0);
+        break;
+      case "K":
+        this.terminal.eraseLine(this.n || 0);
+        break;
+      case "l": // l, Reset mode
+        console.log("(TODO) reset: " + this.n);
+        break;
+      case "m":
+        this.terminal.setSGR(this.params);
+        break;
+      case "r": // Set top and bottom margins (scroll region on VT100)
+        break;
+      default:
+        console.log('no handler for CSI term: ' + term);
+    }
+  },
+
+  compilePatterns: function() {
+    this.COMPILED_PATTERNS = [];
+    var regexp;
+
+    for (re in this.PATTERNS) {
+      regexp = new RegExp('^' + re);
+      this.COMPILED_PATTERNS.push([regexp, this.PATTERNS[re]]);
+    }
+  },
+
+  feed: function(data) {
+    var match;
+    var handler;
+
+    while (data.length > 0) {
+      match = handler = null;
+
+      for (var i=0; i<this.COMPILED_PATTERNS.length; i++) {
+        var pattern = this.COMPILED_PATTERNS[i];
+        match = pattern[0].exec(data);
+        if (match) {
+          handler = pattern[1];
+          break;
+        }
+      }
+
+      if (handler) {
+        handler.call(this, data, match);
+        data = data.slice(match[0].length)
+      } else {
+        return data;
+      }
+    }
+
+    return '';
+  }
+}
diff --git a/app/assets/javascripts/misc.js b/app/assets/javascripts/misc.js
new file mode 100644
index 0000000..785cccc
--- /dev/null
+++ b/app/assets/javascripts/misc.js
@@ -0,0 +1,10 @@
+Function.prototype.bind = function(object) {
+  var func = this;
+  return function() {
+    return func.apply(object, arguments);
+  };
+};
+
+String.prototype.times = function(n) {
+  return Array.prototype.join.call({length:n+1}, this);
+};
diff --git a/app/assets/javascripts/player.js b/app/assets/javascripts/player.js
new file mode 100644
index 0000000..c3eabb4
--- /dev/null
+++ b/app/assets/javascripts/player.js
@@ -0,0 +1,73 @@
+var SP = {};
+
+var speed = 1.0;
+var minDelay = 0.01;
+
+SP.Player = function(cols, lines, data, time) {
+  this.terminal = new SP.Terminal(cols, lines);
+  this.interpreter = new SP.AnsiInterpreter(this.terminal);
+  this.data = data;
+  this.time = time;
+  this.dataIndex = 0;
+  this.frame = 0;
+  this.currentData = "";
+  console.log("started");
+  this.nextFrame();
+};
+
+SP.Player.prototype = {
+  nextFrame: function() {
+    var timing = this.time[this.frame];
+
+    if (!timing) {
+      console.log("finished");
+      return;
+    }
+
+    this.terminal.restartCursorBlink();
+
+    var run = function() {
+      var rest = this.interpreter.feed(this.currentData);
+      this.terminal.renderDirtyLines();
+      var n = timing[1];
+
+      if (rest.length > 0)
+        console.log('rest: ' + rest);
+
+      this.currentData = rest + this.data.slice(this.dataIndex, this.dataIndex + n);
+      this.dataIndex += n;
+      this.frame += 1;
+
+      if (rest.length > 20) {
+        var s = rest.slice(0, 10);
+        var hex = '';
+        for (i=0; i<s.length; i++) {
+          hex += '0x' + s[i].charCodeAt(0).toString(16) + ',';
+        }
+        console.log("failed matching: '" + s + "' (" + hex + ")");
+        return;
+      }
+
+      if (!window.stopped) {
+        this.nextFrame();
+      }
+    }.bind(this);
+
+
+    if (timing[0] > minDelay) {
+      setTimeout(run, timing[0] * 1000 * (1.0 / speed));
+    } else {
+      run();
+    }
+  }
+}
+
+$(function() {
+  $(window).bind('keyup', function(event) {
+      if (event.keyCode == 27) {
+        window.stopped = true;
+      }
+  });
+});
+
+$(function() { new SP.Player(cols, lines, data, time) });
diff --git a/app/assets/javascripts/terminal.js b/app/assets/javascripts/terminal.js
new file mode 100644
index 0000000..7223714
--- /dev/null
+++ b/app/assets/javascripts/terminal.js
@@ -0,0 +1,305 @@
+SP.Terminal = function(cols, lines) {
+  this.cols = cols;
+  this.lines = lines;
+  this.cursorLine = 0;
+  this.cursorCol = 0;
+  this.normalBuffer = [];
+  this.alternateBuffer = [];
+  this.lineData = this.normalBuffer;
+  this.fg = this.bg = undefined;
+  this.dirtyLines = [];
+  this.initialize();
+};
+
+SP.Terminal.prototype = {
+  initialize: function() {
+    var container = $(".player .term");
+    this.element = container;
+    this.renderLine(0); // we only need 1 line
+    this.element.css({ width: this.element.width(), height: this.element.height() * this.lines });
+  },
+
+  getLine: function(n) {
+    n = (typeof n != "undefined" ? n : this.cursorLine);
+
+    var line = this.lineData[n];
+
+    if (typeof line == 'undefined') {
+      line = this.lineData[n] = [];
+      this.fill(n, 0, this.cols, ' ');
+    }
+
+    return line;
+  },
+
+  clearScreen: function() {
+    this.lineData.length = 0;
+    this.cursorLine = this.cursorCol = 0;
+    this.element.empty();
+  },
+
+  switchToNormalBuffer: function() {
+    this.lineData = this.normalBuffer;
+    this.updateScreen();
+  },
+
+  switchToAlternateBuffer: function() {
+    this.lineData = this.alternateBuffer;
+    this.updateScreen();
+  },
+
+  renderLine: function(n) {
+    var html = this.getLine(n);
+
+    if (n == this.cursorLine) {
+      html = html.slice(0, this.cursorCol).concat(['<span class="cursor">' + (html[this.cursorCol] || '') + "</span>"], html.slice(this.cursorCol + 1) || []);
+    }
+
+    var missingLines = this.lineData.length - this.element.find('.line').length;
+
+    for (var i = 0; i < missingLines; i++) {
+      var row = $('<span class="line">');
+      this.element.append(row);
+      this.element.append("\n");
+      this.element.scrollTop(100000);//row.offset().top);
+    }
+
+    this.element.find(".line:eq(" + n + ")").html(html.join(''));
+  },
+
+  renderDirtyLines: function() {
+    var updated = [];
+
+    for (var i=0; i<this.dirtyLines.length; i++) {
+      var n = this.dirtyLines[i];
+      if (updated.indexOf(n) == -1) {
+        this.renderLine(n);
+        updated.push(n);
+      }
+    }
+
+    this.dirtyLines = [];
+  },
+
+  updateLine: function(n) {
+    n = (typeof n != "undefined" ? n : this.cursorLine);
+    this.dirtyLines.push(n);
+  },
+
+  updateScreen: function() {
+    this.dirtyLines = [];
+
+    for (var l=0; l<this.lineData.length; l++) {
+      this.dirtyLines.push(l);
+    }
+  },
+
+  setSGR: function(codes) {
+    if (codes.length == 0) {
+      codes = [0];
+    }
+
+    for (var i=0; i<codes.length; i++) {
+      var n = codes[i];
+
+      if (n === 0) {
+        this.fg = this.bg = undefined;
+        this.bright = false;
+      } else if (n == 1) {
+        this.bright = true;
+      } else if (n >= 30 && n <= 37) {
+        this.fg = n - 30;
+      } else if (n >= 40 && n <= 47) {
+        this.bg = n - 40;
+      } else if (n == 38) {
+        this.fg = codes[i+2];
+        i += 2;
+      } else if (n == 48) {
+        this.bg = codes[i+2];
+        i += 2;
+      }
+    }
+  },
+
+  setCursorPos: function(line, col) {
+    line -= 1;
+    col -= 1;
+    var oldLine = this.cursorLine;
+    this.cursorLine = line;
+    this.cursorCol = col;
+    this.updateLine(oldLine);
+    this.updateLine();
+  },
+
+  saveCursor: function() {
+    this.savedCol = this.cursorCol;
+    this.savedLine = this.cursorLine;
+  },
+
+  restoreCursor: function() {
+    var oldLine = this.cursorLine;
+
+    this.cursorLine = this.savedLine;
+    this.cursorCol = this.savedCol;
+
+    this.updateLine(oldLine);
+    this.updateLine();
+  },
+
+  cursorLeft: function() {
+    if (this.cursorCol > 0) {
+      this.cursorCol -= 1;
+      this.updateLine();
+    }
+  },
+
+  cursorRight: function() {
+    if (this.cursorCol < this.cols) {
+      this.cursorCol += 1;
+      this.updateLine();
+    }
+  },
+
+  cursorUp: function() {
+    if (this.cursorLine > 0) {
+      this.cursorLine -= 1;
+      this.updateLine(this.cursorLine);
+      this.updateLine(this.cursorLine+1);
+    }
+  },
+
+  cursorDown: function() {
+    this.cursorLine += 1;
+    this.updateLine(this.cursorLine);
+    this.updateLine(this.cursorLine-1);
+  },
+
+  cursorForward: function(n) {
+    for (var i=0; i<n; i++) this.cursorRight();
+  },
+
+  cursorBack: function(n) {
+    for (var i=0; i<n; i++) this.cursorLeft();
+  },
+
+  cr: function() {
+    this.cursorCol = 0;
+    this.updateLine();
+  },
+
+  bs: function() {
+    if (this.cursorCol > 0) {
+      this.getLine()[this.cursorCol - 1] = ' ';
+      this.cursorCol -= 1;
+      this.updateLine();
+    }
+  },
+
+  print: function(text) {
+    text = Utf8.decode(text);
+
+    for (var i=0; i<text.length; i++) {
+      if (this.cursorCol >= this.cols) {
+        this.cursorLine += 1;
+        this.cursorCol = 0;
+      }
+
+      this.fill(this.cursorLine, this.cursorCol, 1, text[i]);
+      this.cursorCol += 1;
+    }
+
+    this.updateLine();
+  },
+
+  eraseData: function(n) {
+    if (n == 0) {
+      this.eraseLine(0);
+      for (var l=this.cursorLine+1; l<this.lineData.length; l++) {
+        this.lineData[l] = [];
+        this.updateLine(l);
+      }
+    } else if (n == 1) {
+      for (var l=0; l<this.cursorLine; l++) {
+        this.lineData[l] = [];
+        this.updateLine(l);
+      }
+      this.eraseLine(n);
+    } else if (n == 2) {
+      for (var l=0; l<this.lineData.length; l++) {
+        this.lineData[l] = [];
+        this.updateLine(l);
+      }
+    }
+  },
+
+  eraseLine: function(n) {
+    if (n == 0) {
+      this.fill(this.cursorLine, this.cursorCol, this.cols - this.cursorCol, ' ');
+      // this.lineData[this.cursorLine] = this.lineData[this.cursorLine].slice(0, this.cursorCol);
+      // this.lineData[this.cursorLine] = this.lineData[this.cursorLine].slice(0, this.cursorCol) + " ".times(this.cols - this.cursorCol);
+      this.updateLine();
+    } else if (n == 1) {
+      this.fill(this.cursorLine, 0, this.cursorCol, ' ');
+      // this.lineData[this.cursorLine] = " ".times(this.cursorCol).split('').concat(this.lineData[this.cursorLine].slice(this.cursorCol));
+      // this.lineData[this.cursorLine] = " ".times(this.cursorCol) + this.lineData[this.cursorLine].slice(this.cursorCol);
+      this.updateLine();
+    } else if (n == 2) {
+      this.fill(this.cursorLine, 0, this.cols, ' ');
+      // this.lineData[this.cursorLine] = [] // " ".times(this.cols);
+      this.updateLine();
+    }
+  },
+
+  reserveCharacters: function(n) {
+    var line = this.getLine();
+    this.lineData[this.cursorLine] = line.slice(0, this.cursorCol).concat(" ".times(n).split(''), line.slice(this.cursorCol, this.cols - n));
+    this.updateLine();
+  },
+
+  fill: function(line, col, n, char) {
+    var prefix = '', postfix = '';
+
+    if (this.fg !== undefined || this.bg !== undefined || this.bright) {
+      prefix = '<span class="';
+      var brightOffset = this.bright ? 8 : 0;
+
+      if (this.fg !== undefined) {
+        prefix += ' fg' + (this.fg + brightOffset);
+      } else if (this.bright) {
+        prefix += ' bright';
+      }
+
+      if (this.bg !== undefined) {
+        prefix += ' bg' + this.bg;
+      }
+
+      prefix += '">';
+      postfix = '</span>';
+    }
+
+    var char = prefix + char + postfix;
+
+    var lineArr = this.getLine(line);
+
+    for (var i=0; i<n; i++) {
+      lineArr[col+i] = char;
+    }
+  },
+
+  blinkCursor: function() {
+    var cursor = this.element.find(".cursor");
+    if (cursor.hasClass("inverted")) {
+      cursor.removeClass("inverted");
+    } else {
+      cursor.addClass("inverted");
+    }
+  },
+
+  restartCursorBlink: function() {
+    if (this.cursorTimerId) {
+      clearInterval(this.cursorTimerId);
+      this.cursorTimerId = null;
+    }
+    this.cursorTimerId = setInterval(this.blinkCursor.bind(this), 500);
+  }
+};
diff --git a/app/assets/javascripts/utf8.js b/app/assets/javascripts/utf8.js
new file mode 100644
index 0000000..cc51ef1
--- /dev/null
+++ b/app/assets/javascripts/utf8.js
@@ -0,0 +1,68 @@
+/**
+*
+*  UTF-8 data encode / decode
+*  http://www.webtoolkit.info/
+*
+**/
+ 
+var Utf8 = {
+ 
+	// public method for url encoding
+	encode : function (string) {
+		string = string.replace(/\r\n/g,"\n");
+		var utftext = "";
+ 
+		for (var n = 0; n < string.length; n++) {
+ 
+			var c = string.charCodeAt(n);
+ 
+			if (c < 128) {
+				utftext += String.fromCharCode(c);
+			}
+			else if((c > 127) && (c < 2048)) {
+				utftext += String.fromCharCode((c >> 6) | 192);
+				utftext += String.fromCharCode((c & 63) | 128);
+			}
+			else {
+				utftext += String.fromCharCode((c >> 12) | 224);
+				utftext += String.fromCharCode(((c >> 6) & 63) | 128);
+				utftext += String.fromCharCode((c & 63) | 128);
+			}
+ 
+		}
+ 
+		return utftext;
+	},
+ 
+	// public method for url decoding
+	decode : function (utftext) {
+		var string = "";
+		var i = 0;
+		var c = c1 = c2 = 0;
+ 
+		while ( i < utftext.length ) {
+ 
+			c = utftext.charCodeAt(i);
+ 
+			if (c < 128) {
+				string += String.fromCharCode(c);
+				i++;
+			}
+			else if((c > 191) && (c < 224)) {
+				c2 = utftext.charCodeAt(i+1);
+				string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
+				i += 2;
+			}
+			else {
+				c2 = utftext.charCodeAt(i+1);
+				c3 = utftext.charCodeAt(i+2);
+				string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
+				i += 3;
+			}
+ 
+		}
+ 
+		return string;
+	}
+ 
+}
diff --git a/app/assets/stylesheets/main.css b/app/assets/stylesheets/main.css
new file mode 100644
index 0000000..ab0196e
--- /dev/null
+++ b/app/assets/stylesheets/main.css
@@ -0,0 +1,631 @@
+.clear {
+  clear: both;
+  display: block;
+  visibility: hidden;
+}
+
+body {
+  background-color: #E7E7DE;
+  margin: 0;
+  padding: 0;
+}
+
+body, div, p {
+  font-family: arial, helvetica;
+  font-size: 12px;
+}
+
+/* 325A66 */
+/* DEA140 */
+/* A32B26 */
+/* 590D0B */
+
+h1 {
+  color: #3e3e3e;
+  font-family: 'Trebuchet MS';
+  font-size: 42px;
+  padding: 15px 0;
+}
+
+h2 {
+  color: #3e3e3e;
+  font-family: 'Trebuchet MS';
+  font-size: 26px;
+  padding: 15px 15px 40px 15px;
+}
+
+#top {
+  position: relative;
+  height: 80px;
+}
+
+#logo {
+  display: block;
+  width: 300px;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+#menu {
+  display: block;
+  width: 300px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  font-size: 11px;
+  font-family: Verdana;
+}
+
+#menu .links {
+  background-color: #172322;
+  list-style: none;
+  padding: 10px;
+  border-bottom-left-radius: 10px;
+}
+
+#menu .links li {
+  color: #eee;
+  display: inline-block;
+  margin-right: 20px;
+}
+
+#all {
+  margin: 0 auto;
+  width: 980px;
+  text-align: left;
+}
+
+#main {
+  background-color: white;
+  width: 980px;
+  font-size: 11px;
+  border-top-left-radius: 10px;
+}
+
+.player {
+  /* border: 1px solid #777;*/
+  /* background-color: #333;*/
+  float: left;
+  display: block;
+  padding: 0px;
+  margin: 0px 0px 30px 20px;
+  position: relative;
+}
+
+.term {
+  padding: 2px;
+  margin: 0px;
+  display: block;
+  font-family: 'Droid Sans Mono', Monospace;
+  white-space: pre;
+  background-color: black;
+  line-height: 1.2em;
+  color: #ccc;
+  overflow: auto;
+  overflow-x: hidden;
+}
+
+.term .line {
+  font-size: 12px;
+  /* background-color: black;*/
+  /* padding: 0;*/
+  /* margin: 0;*/
+}
+
+.line span.cursor, .line .cursor > span {
+  background-color: #D3D7CF;
+}
+
+.line span.cursor.inverted, .line .cursor.inverted > span {
+  background-color: inherit;
+}
+
+.hud {
+  background-color: #333;
+  opacity: 0.85;
+  position: absolute;
+  left: 20px;
+  right: 20px;
+  bottom: 10px;
+  display: none;
+  height: 30px;
+  color: white;
+}
+
+.player:hover .hud {
+  display: block;
+}
+
+.bright { font-weight: bold }
+
+/* Foregrounds: */
+
+/* ansi colors */
+
+  .fg0 { color: #000000 }
+  .fg1 { color: #CC0000 }
+  .fg2 { color: #4E9A06 }
+  .fg3 { color: #C4A000 }
+  .fg4 { color: #3465A4 }
+  .fg5 { color: #75507B }
+  .fg6 { color: #06989A }
+  .fg7 { color: #D3D7CF }
+  .fg8 { color: #555753; font-weight: bold }
+  .fg9 { color: #EF2929; font-weight: bold }
+ .fg10 { color: #8AE234; font-weight: bold }
+ .fg11 { color: #FCE94F; font-weight: bold }
+ .fg12 { color: #729FCF; font-weight: bold }
+ .fg13 { color: #AD7FA8; font-weight: bold }
+ .fg14 { color: #34E2E2; font-weight: bold }
+ .fg15 { color: #EEEEEC; font-weight: bold }
+
+/* rgb 256 colors */
+
+ .fg16 { color: #000000 }
+ .fg17 { color: #000033 }
+ .fg18 { color: #000066 }
+ .fg19 { color: #000099 }
+ .fg20 { color: #0000cc }
+ .fg21 { color: #0000ff }
+ .fg22 { color: #003300 }
+ .fg23 { color: #003333 }
+ .fg24 { color: #003366 }
+ .fg25 { color: #003399 }
+ .fg26 { color: #0033cc }
+ .fg27 { color: #0033ff }
+ .fg28 { color: #006600 }
+ .fg29 { color: #006633 }
+ .fg30 { color: #006666 }
+ .fg31 { color: #006699 }
+ .fg32 { color: #0066cc }
+ .fg33 { color: #0066ff }
+ .fg34 { color: #009900 }
+ .fg35 { color: #009933 }
+ .fg36 { color: #009966 }
+ .fg37 { color: #009999 }
+ .fg38 { color: #0099cc }
+ .fg39 { color: #0099ff }
+ .fg40 { color: #00cc00 }
+ .fg41 { color: #00cc33 }
+ .fg42 { color: #00cc66 }
+ .fg43 { color: #00cc99 }
+ .fg44 { color: #00cccc }
+ .fg45 { color: #00ccff }
+ .fg46 { color: #00ff00 }
+ .fg47 { color: #00ff33 }
+ .fg48 { color: #00ff66 }
+ .fg49 { color: #00ff99 }
+ .fg50 { color: #00ffcc }
+ .fg51 { color: #00ffff }
+ .fg52 { color: #330000 }
+ .fg53 { color: #330033 }
+ .fg54 { color: #330066 }
+ .fg55 { color: #330099 }
+ .fg56 { color: #3300cc }
+ .fg57 { color: #3300ff }
+ .fg58 { color: #333300 }
+ .fg59 { color: #333333 }
+ .fg60 { color: #333366 }
+ .fg61 { color: #333399 }
+ .fg62 { color: #3333cc }
+ .fg63 { color: #3333ff }
+ .fg64 { color: #336600 }
+ .fg65 { color: #336633 }
+ .fg66 { color: #336666 }
+ .fg67 { color: #336699 }
+ .fg68 { color: #3366cc }
+ .fg69 { color: #3366ff }
+ .fg70 { color: #339900 }
+ .fg71 { color: #339933 }
+ .fg72 { color: #339966 }
+ .fg73 { color: #339999 }
+ .fg74 { color: #3399cc }
+ .fg75 { color: #3399ff }
+ .fg76 { color: #33cc00 }
+ .fg77 { color: #33cc33 }
+ .fg78 { color: #33cc66 }
+ .fg79 { color: #33cc99 }
+ .fg80 { color: #33cccc }
+ .fg81 { color: #33ccff }
+ .fg82 { color: #33ff00 }
+ .fg83 { color: #33ff33 }
+ .fg84 { color: #33ff66 }
+ .fg85 { color: #33ff99 }
+ .fg86 { color: #33ffcc }
+ .fg87 { color: #33ffff }
+ .fg88 { color: #660000 }
+ .fg89 { color: #660033 }
+ .fg90 { color: #660066 }
+ .fg91 { color: #660099 }
+ .fg92 { color: #6600cc }
+ .fg93 { color: #6600ff }
+ .fg94 { color: #663300 }
+ .fg95 { color: #663333 }
+ .fg96 { color: #663366 }
+ .fg97 { color: #663399 }
+ .fg98 { color: #6633cc }
+ .fg99 { color: #6633ff }
+.fg100 { color: #666600 }
+.fg101 { color: #666633 }
+.fg102 { color: #666666 }
+.fg103 { color: #666699 }
+.fg104 { color: #6666cc }
+.fg105 { color: #6666ff }
+.fg106 { color: #669900 }
+.fg107 { color: #669933 }
+.fg108 { color: #669966 }
+.fg109 { color: #669999 }
+.fg110 { color: #6699cc }
+.fg111 { color: #6699ff }
+.fg112 { color: #66cc00 }
+.fg113 { color: #66cc33 }
+.fg114 { color: #66cc66 }
+.fg115 { color: #66cc99 }
+.fg116 { color: #66cccc }
+.fg117 { color: #66ccff }
+.fg118 { color: #66ff00 }
+.fg119 { color: #66ff33 }
+.fg120 { color: #66ff66 }
+.fg121 { color: #66ff99 }
+.fg122 { color: #66ffcc }
+.fg123 { color: #66ffff }
+.fg124 { color: #990000 }
+.fg125 { color: #990033 }
+.fg126 { color: #990066 }
+.fg127 { color: #990099 }
+.fg128 { color: #9900cc }
+.fg129 { color: #9900ff }
+.fg130 { color: #993300 }
+.fg131 { color: #993333 }
+.fg132 { color: #993366 }
+.fg133 { color: #993399 }
+.fg134 { color: #9933cc }
+.fg135 { color: #9933ff }
+.fg136 { color: #996600 }
+.fg137 { color: #996633 }
+.fg138 { color: #996666 }
+.fg139 { color: #996699 }
+.fg140 { color: #9966cc }
+.fg141 { color: #9966ff }
+.fg142 { color: #999900 }
+.fg143 { color: #999933 }
+.fg144 { color: #999966 }
+.fg145 { color: #999999 }
+.fg146 { color: #9999cc }
+.fg147 { color: #9999ff }
+.fg148 { color: #99cc00 }
+.fg149 { color: #99cc33 }
+.fg150 { color: #99cc66 }
+.fg151 { color: #99cc99 }
+.fg152 { color: #99cccc }
+.fg153 { color: #99ccff }
+.fg154 { color: #99ff00 }
+.fg155 { color: #99ff33 }
+.fg156 { color: #99ff66 }
+.fg157 { color: #99ff99 }
+.fg158 { color: #99ffcc }
+.fg159 { color: #99ffff }
+.fg160 { color: #cc0000 }
+.fg161 { color: #cc0033 }
+.fg162 { color: #cc0066 }
+.fg163 { color: #cc0099 }
+.fg164 { color: #cc00cc }
+.fg165 { color: #cc00ff }
+.fg166 { color: #cc3300 }
+.fg167 { color: #cc3333 }
+.fg168 { color: #cc3366 }
+.fg169 { color: #cc3399 }
+.fg170 { color: #cc33cc }
+.fg171 { color: #cc33ff }
+.fg172 { color: #cc6600 }
+.fg173 { color: #cc6633 }
+.fg174 { color: #cc6666 }
+.fg175 { color: #cc6699 }
+.fg176 { color: #cc66cc }
+.fg177 { color: #cc66ff }
+.fg178 { color: #cc9900 }
+.fg179 { color: #cc9933 }
+.fg180 { color: #cc9966 }
+.fg181 { color: #cc9999 }
+.fg182 { color: #cc99cc }
+.fg183 { color: #cc99ff }
+.fg184 { color: #cccc00 }
+.fg185 { color: #cccc33 }
+.fg186 { color: #cccc66 }
+.fg187 { color: #cccc99 }
+.fg188 { color: #cccccc }
+.fg189 { color: #ccccff }
+.fg190 { color: #ccff00 }
+.fg191 { color: #ccff33 }
+.fg192 { color: #ccff66 }
+.fg193 { color: #ccff99 }
+.fg194 { color: #ccffcc }
+.fg195 { color: #ccffff }
+.fg196 { color: #ff0000 }
+.fg197 { color: #ff0033 }
+.fg198 { color: #ff0066 }
+.fg199 { color: #ff0099 }
+.fg200 { color: #ff00cc }
+.fg201 { color: #ff00ff }
+.fg202 { color: #ff3300 }
+.fg203 { color: #ff3333 }
+.fg204 { color: #ff3366 }
+.fg205 { color: #ff3399 }
+.fg206 { color: #ff33cc }
+.fg207 { color: #ff33ff }
+.fg208 { color: #ff6600 }
+.fg209 { color: #ff6633 }
+.fg210 { color: #ff6666 }
+.fg211 { color: #ff6699 }
+.fg212 { color: #ff66cc }
+.fg213 { color: #ff66ff }
+.fg214 { color: #ff9900 }
+.fg215 { color: #ff9933 }
+.fg216 { color: #ff9966 }
+.fg217 { color: #ff9999 }
+.fg218 { color: #ff99cc }
+.fg219 { color: #ff99ff }
+.fg220 { color: #ffcc00 }
+.fg221 { color: #ffcc33 }
+.fg222 { color: #ffcc66 }
+.fg223 { color: #ffcc99 }
+.fg224 { color: #ffcccc }
+.fg225 { color: #ffccff }
+.fg226 { color: #ffff00 }
+.fg227 { color: #ffff33 }
+.fg228 { color: #ffff66 }
+.fg229 { color: #ffff99 }
+.fg230 { color: #ffffcc }
+.fg231 { color: #ffffff }
+
+/* Backgrounds: */
+
+/* ansi colors */
+
+  .bg0 { background-color: #000000 }
+  .bg1 { background-color: #CC0000 }
+  .bg2 { background-color: #4E9A06 }
+  .bg3 { background-color: #C4A000 }
+  .bg4 { background-color: #3465A4 }
+  .bg5 { background-color: #75507B }
+  .bg6 { background-color: #06989A }
+  .bg7 { background-color: #D3D7CF }
+  .bg8 { background-color: #555753 }
+  .bg9 { background-color: #EF2929 }
+ .bg10 { background-color: #8AE234 }
+ .bg11 { background-color: #FCE94F }
+ .bg12 { background-color: #729FCF }
+ .bg13 { background-color: #AD7FA8 }
+ .bg14 { background-color: #34E2E2 }
+ .bg15 { background-color: #EEEEEC }
+
+/* rgb 256 colors */
+
+ .bg16 { background-color: #000000 }
+ .bg17 { background-color: #000033 }
+ .bg18 { background-color: #000066 }
+ .bg19 { background-color: #000099 }
+ .bg20 { background-color: #0000cc }
+ .bg21 { background-color: #0000ff }
+ .bg22 { background-color: #003300 }
+ .bg23 { background-color: #003333 }
+ .bg24 { background-color: #003366 }
+ .bg25 { background-color: #003399 }
+ .bg26 { background-color: #0033cc }
+ .bg27 { background-color: #0033ff }
+ .bg28 { background-color: #006600 }
+ .bg29 { background-color: #006633 }
+ .bg30 { background-color: #006666 }
+ .bg31 { background-color: #006699 }
+ .bg32 { background-color: #0066cc }
+ .bg33 { background-color: #0066ff }
+ .bg34 { background-color: #009900 }
+ .bg35 { background-color: #009933 }
+ .bg36 { background-color: #009966 }
+ .bg37 { background-color: #009999 }
+ .bg38 { background-color: #0099cc }
+ .bg39 { background-color: #0099ff }
+ .bg40 { background-color: #00cc00 }
+ .bg41 { background-color: #00cc33 }
+ .bg42 { background-color: #00cc66 }
+ .bg43 { background-color: #00cc99 }
+ .bg44 { background-color: #00cccc }
+ .bg45 { background-color: #00ccff }
+ .bg46 { background-color: #00ff00 }
+ .bg47 { background-color: #00ff33 }
+ .bg48 { background-color: #00ff66 }
+ .bg49 { background-color: #00ff99 }
+ .bg50 { background-color: #00ffcc }
+ .bg51 { background-color: #00ffff }
+ .bg52 { background-color: #330000 }
+ .bg53 { background-color: #330033 }
+ .bg54 { background-color: #330066 }
+ .bg55 { background-color: #330099 }
+ .bg56 { background-color: #3300cc }
+ .bg57 { background-color: #3300ff }
+ .bg58 { background-color: #333300 }
+ .bg59 { background-color: #333333 }
+ .bg60 { background-color: #333366 }
+ .bg61 { background-color: #333399 }
+ .bg62 { background-color: #3333cc }
+ .bg63 { background-color: #3333ff }
+ .bg64 { background-color: #336600 }
+ .bg65 { background-color: #336633 }
+ .bg66 { background-color: #336666 }
+ .bg67 { background-color: #336699 }
+ .bg68 { background-color: #3366cc }
+ .bg69 { background-color: #3366ff }
+ .bg70 { background-color: #339900 }
+ .bg71 { background-color: #339933 }
+ .bg72 { background-color: #339966 }
+ .bg73 { background-color: #339999 }
+ .bg74 { background-color: #3399cc }
+ .bg75 { background-color: #3399ff }
+ .bg76 { background-color: #33cc00 }
+ .bg77 { background-color: #33cc33 }
+ .bg78 { background-color: #33cc66 }
+ .bg79 { background-color: #33cc99 }
+ .bg80 { background-color: #33cccc }
+ .bg81 { background-color: #33ccff }
+ .bg82 { background-color: #33ff00 }
+ .bg83 { background-color: #33ff33 }
+ .bg84 { background-color: #33ff66 }
+ .bg85 { background-color: #33ff99 }
+ .bg86 { background-color: #33ffcc }
+ .bg87 { background-color: #33ffff }
+ .bg88 { background-color: #660000 }
+ .bg89 { background-color: #660033 }
+ .bg90 { background-color: #660066 }
+ .bg91 { background-color: #660099 }
+ .bg92 { background-color: #6600cc }
+ .bg93 { background-color: #6600ff }
+ .bg94 { background-color: #663300 }
+ .bg95 { background-color: #663333 }
+ .bg96 { background-color: #663366 }
+ .bg97 { background-color: #663399 }
+ .bg98 { background-color: #6633cc }
+ .bg99 { background-color: #6633ff }
+.bg100 { background-color: #666600 }
+.bg101 { background-color: #666633 }
+.bg102 { background-color: #666666 }
+.bg103 { background-color: #666699 }
+.bg104 { background-color: #6666cc }
+.bg105 { background-color: #6666ff }
+.bg106 { background-color: #669900 }
+.bg107 { background-color: #669933 }
+.bg108 { background-color: #669966 }
+.bg109 { background-color: #669999 }
+.bg110 { background-color: #6699cc }
+.bg111 { background-color: #6699ff }
+.bg112 { background-color: #66cc00 }
+.bg113 { background-color: #66cc33 }
+.bg114 { background-color: #66cc66 }
+.bg115 { background-color: #66cc99 }
+.bg116 { background-color: #66cccc }
+.bg117 { background-color: #66ccff }
+.bg118 { background-color: #66ff00 }
+.bg119 { background-color: #66ff33 }
+.bg120 { background-color: #66ff66 }
+.bg121 { background-color: #66ff99 }
+.bg122 { background-color: #66ffcc }
+.bg123 { background-color: #66ffff }
+.bg124 { background-color: #990000 }
+.bg125 { background-color: #990033 }
+.bg126 { background-color: #990066 }
+.bg127 { background-color: #990099 }
+.bg128 { background-color: #9900cc }
+.bg129 { background-color: #9900ff }
+.bg130 { background-color: #993300 }
+.bg131 { background-color: #993333 }
+.bg132 { background-color: #993366 }
+.bg133 { background-color: #993399 }
+.bg134 { background-color: #9933cc }
+.bg135 { background-color: #9933ff }
+.bg136 { background-color: #996600 }
+.bg137 { background-color: #996633 }
+.bg138 { background-color: #996666 }
+.bg139 { background-color: #996699 }
+.bg140 { background-color: #9966cc }
+.bg141 { background-color: #9966ff }
+.bg142 { background-color: #999900 }
+.bg143 { background-color: #999933 }
+.bg144 { background-color: #999966 }
+.bg145 { background-color: #999999 }
+.bg146 { background-color: #9999cc }
+.bg147 { background-color: #9999ff }
+.bg148 { background-color: #99cc00 }
+.bg149 { background-color: #99cc33 }
+.bg150 { background-color: #99cc66 }
+.bg151 { background-color: #99cc99 }
+.bg152 { background-color: #99cccc }
+.bg153 { background-color: #99ccff }
+.bg154 { background-color: #99ff00 }
+.bg155 { background-color: #99ff33 }
+.bg156 { background-color: #99ff66 }
+.bg157 { background-color: #99ff99 }
+.bg158 { background-color: #99ffcc }
+.bg159 { background-color: #99ffff }
+.bg160 { background-color: #cc0000 }
+.bg161 { background-color: #cc0033 }
+.bg162 { background-color: #cc0066 }
+.bg163 { background-color: #cc0099 }
+.bg164 { background-color: #cc00cc }
+.bg165 { background-color: #cc00ff }
+.bg166 { background-color: #cc3300 }
+.bg167 { background-color: #cc3333 }
+.bg168 { background-color: #cc3366 }
+.bg169 { background-color: #cc3399 }
+.bg170 { background-color: #cc33cc }
+.bg171 { background-color: #cc33ff }
+.bg172 { background-color: #cc6600 }
+.bg173 { background-color: #cc6633 }
+.bg174 { background-color: #cc6666 }
+.bg175 { background-color: #cc6699 }
+.bg176 { background-color: #cc66cc }
+.bg177 { background-color: #cc66ff }
+.bg178 { background-color: #cc9900 }
+.bg179 { background-color: #cc9933 }
+.bg180 { background-color: #cc9966 }
+.bg181 { background-color: #cc9999 }
+.bg182 { background-color: #cc99cc }
+.bg183 { background-color: #cc99ff }
+.bg184 { background-color: #cccc00 }
+.bg185 { background-color: #cccc33 }
+.bg186 { background-color: #cccc66 }
+.bg187 { background-color: #cccc99 }
+.bg188 { background-color: #cccccc }
+.bg189 { background-color: #ccccff }
+.bg190 { background-color: #ccff00 }
+.bg191 { background-color: #ccff33 }
+.bg192 { background-color: #ccff66 }
+.bg193 { background-color: #ccff99 }
+.bg194 { background-color: #ccffcc }
+.bg195 { background-color: #ccffff }
+.bg196 { background-color: #ff0000 }
+.bg197 { background-color: #ff0033 }
+.bg198 { background-color: #ff0066 }
+.bg199 { background-color: #ff0099 }
+.bg200 { background-color: #ff00cc }
+.bg201 { background-color: #ff00ff }
+.bg202 { background-color: #ff3300 }
+.bg203 { background-color: #ff3333 }
+.bg204 { background-color: #ff3366 }
+.bg205 { background-color: #ff3399 }
+.bg206 { background-color: #ff33cc }
+.bg207 { background-color: #ff33ff }
+.bg208 { background-color: #ff6600 }
+.bg209 { background-color: #ff6633 }
+.bg210 { background-color: #ff6666 }
+.bg211 { background-color: #ff6699 }
+.bg212 { background-color: #ff66cc }
+.bg213 { background-color: #ff66ff }
+.bg214 { background-color: #ff9900 }
+.bg215 { background-color: #ff9933 }
+.bg216 { background-color: #ff9966 }
+.bg217 { background-color: #ff9999 }
+.bg218 { background-color: #ff99cc }
+.bg219 { background-color: #ff99ff }
+.bg220 { background-color: #ffcc00 }
+.bg221 { background-color: #ffcc33 }
+.bg222 { background-color: #ffcc66 }
+.bg223 { background-color: #ffcc99 }
+.bg224 { background-color: #ffcccc }
+.bg225 { background-color: #ffccff }
+.bg226 { background-color: #ffff00 }
+.bg227 { background-color: #ffff33 }
+.bg228 { background-color: #ffff66 }
+.bg229 { background-color: #ffff99 }
+.bg230 { background-color: #ffffcc }
+.bg231 { background-color: #ffffff }
+
+.description {
+  color: #666;
+  font-family: arial, helvetica;
+  font-size: 16px;
+  margin: 20px;
+}
+
+.description p {
+  margin-bottom: 20px;
+}
diff --git a/app/assets/stylesheets/reset.css b/app/assets/stylesheets/reset.css
new file mode 100644
index 0000000..b5b012c
--- /dev/null
+++ b/app/assets/stylesheets/reset.css
@@ -0,0 +1,88 @@
+/* html5doctor.com Reset Stylesheet v1.6.1
+Last Updated: 2010-09-17
+Author: Richard Clark - http://richclarkdesign.com
+*/
+html, body, div, span, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+abbr, address, cite, code,
+del, dfn, em, img, ins, kbd, q, samp,
+small, strong, sub, sup, var,
+b, i,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section, summary,
+time, mark, audio, video {
+    margin:0;
+    padding:0;
+    border:0;
+    outline:0;
+    font-size:100%;
+    vertical-align:baseline;
+    background:transparent;
+}
+body {
+    line-height:1;
+}
+article,aside,details,figcaption,figure,
+footer,header,hgroup,menu,nav,section {
+    display:block;
+}
+nav ul {
+    list-style:none;
+}
+blockquote, q {
+    quotes:none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+    content:'';
+    content:none;
+}
+a {
+    margin:0;
+    padding:0;
+    font-size:100%;
+    vertical-align:baseline;
+    background:transparent;
+}
+/* change colours to suit your needs */
+ins {
+    background-color:#ff9;
+    color:#000;
+    text-decoration:none;
+}
+/* change colours to suit your needs */
+mark {
+    background-color:#ff9;
+    color:#000;
+    font-style:italic;
+    font-weight:bold;
+}
+del {
+    text-decoration: line-through;
+}
+abbr[title], dfn[title] {
+    border-bottom:1px dotted;
+    cursor:help;
+}
+table {
+    border-collapse:collapse;
+    border-spacing:0;
+}
+/* change border colour to suit your needs */
+hr {
+    display:block;
+    height:1px;
+    border:0;
+    border-top:1px solid #cccccc;
+    margin:1em 0;
+    padding:0;
+}
+
+input, select {
+    vertical-align:middle;
+    margin-top: 0;
+}
+