index.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3 <head>
   4         <title>Remote Terminal Viewer</title>
   5         <script src="/jquery.js"></script>
   6         <script src="/socket.io/socket.io.js"></script>
   7         <script>
   8                 $(function() {
   9                         // 8-14 are bolded versions
  10                         var palette = [
  11                                 '2e3436',
  12                                 'cc0000',
  13                                 '4e9a06',
  14                                 'c4a000',
  15                                 '3465a4',
  16                                 '75507b',
  17                                 '06989a',
  18                                 'd3d7cf',
  19                                 '555753',
  20                                 'ef2929',
  21                                 '8ae234',
  22                                 'fce94f',
  23                                 '729fcf',
  24                                 'ad7fa8',
  25                                 '34e2e2',
  26                                 'eeeeec'
  27                         ];
  28                         var $body = $('body');
  29                         var socket = io.connect('http://localhost');
  30                         var color_to_css = function(i) {
  31                                 index = i & 0xff
  32                                 // lighten the basic 8 colors when they're bold
  33                                 if (i & 0x10000 && index < 8) {
  34                                         index += 8;
  35                                 }
  36                                 return 'color: #' + palette[index] + '; ';
  37                         }
  38                         var bg_color_to_css = function(i) {
  39                                 return 'background-' + color_to_css((i&0x10000) | ((i&0xff00) >> 8));
  40                         }
  41                         var stylize = function (txt, style) {
  42                                 if (txt.length == 0 || style == 0) {
  43                                         return txt
  44                                 }
  45                                 css = ''
  46                                 if(style & 0x10000) css += 'font-weight: bold; ';
  47                                 if(style & 0x20000) css += 'text-decoration: underline; ';
  48                                 if(style & 0x40000) css += 'text-decoration: underline; '; // blink
  49                                 if(style & 0x80000) css += 'text-decoration: line-through; '; // invisible
  50                                 if(style & 0x000ff) css += color_to_css(style);
  51                                 if(style & 0x0ff00) css += bg_color_to_css(style);
  52                                 return $('<span style="'+css+'"></span>').text(txt);
  53                         }
  54                         socket.on('init', function (v) {
  55                                 $body.children().remove();
  56                                 for(i in v.text) {
  57                                         div = $('<div>');
  58                                         txt = ''
  59                                         a = 0;
  60                                         for(j in v.text[i]) {
  61                                                 if(v.attributes[i][j] != a) {
  62                                                         if(txt.length) {
  63                                                                 div.append(stylize(txt, a));
  64                                                                 txt = ''
  65                                                         }
  66                                                         a = v.attributes[i][j]
  67                                                 }
  68                                                 txt += v.text[i][j]
  69                                         }
  70                                         if(txt.length) {
  71                                                 div.append(stylize(txt, a));
  72                                         }
  73                                         $body.append(div);
  74                                 }
  75                         });
  76                 });
  77         </script>
  78         <style>
  79                 body {
  80                         color: #d3d7cf;
  81                         background: #2e3436;
  82                         font-family: monospace;
  83                         font-size: 12px;
  84                         line-height: 14px;
  85                         white-space: pre;
  86                 }
  87         </style>
  88 </head>
  89 <body>
  90 </body>
  91 </html>