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                         var palette = [
  10                                 '2e3436',
  11                                 'a40000',
  12                                 '4e9a06',
  13                                 'c4a000',
  14                                 '3465a4',
  15                                 '75507b',
  16                                 'ce5c00',
  17                                 'babdb6',
  18                         ];
  19                         var $body = $('body');
  20                         var socket = io.connect('http://localhost');
  21                         var color_to_css = function(i) {
  22                                 return 'color: #' + palette[i] + '; ';
  23                         }
  24                         var bg_color_to_css = function(i) {
  25                                 return 'background-' + color_to_css(i);
  26                         }
  27                         var stylize = function (txt, style) {
  28                                 if(txt.length == 0 || style == 0) {
  29                                         return txt
  30                                 }
  31                                 css = ''
  32                                 if(style & 0x10000) css += 'font-weight: bold; ';
  33                                 if(style & 0x20000) css += 'text-decoration: underline; ';
  34                                 if(style & 0x40000) css += 'text-decoration: underline; '; // blink
  35                                 if(style & 0x80000) css += 'text-decoration: line-through; '; // invisible
  36                                 if(style & 0x000ff) css += color_to_css(style & 0xff);
  37                                 if(style & 0x0ff00) css += bg_color_to_css((style & 0xff00) >> 8);
  38                                 return $('<span style="'+css+'"></span>').text(txt);
  39                         }
  40                         socket.on('init', function (v) {
  41                                 $body.children().remove();
  42                                 for(i in v.text) {
  43                                         div = $('<div>');
  44                                         txt = ''
  45                                         a = 0;
  46                                         for(j in v.text[i]) {
  47                                                 if(v.attributes[i][j] != a) {
  48                                                         if(txt.length) {
  49                                                                 div.append(stylize(txt, a));
  50                                                                 txt = ''
  51                                                         }
  52                                                         a = v.attributes[i][j]
  53                                                 }
  54                                                 txt += v.text[i][j]
  55                                         }
  56                                         if(txt.length) {
  57                                                 div.append(stylize(txt, a));
  58                                         }
  59                                         $body.append(div);
  60                                 }
  61                         });
  62                 });
  63         </script>
  64         <style>
  65                 body {
  66                         color: #babdb6;
  67                         background: #2e3436;
  68                         font-family: monospace;
  69                         font-size: 12px;
  70                         line-height: 14px;
  71                         white-space: pre;
  72                 }
  73         </style>
  74 </head>
  75 <body>
  76 </body>
  77 </html>