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