| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182 | <!DOCTYPE html><html>  <head>    <meta charset='utf-8'>     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />    <title>listing directory {directory}</title>    <style>{style}</style>    <script>      function $(id){        var el = 'string' == typeof id          ? document.getElementById(id)          : id;        el.on = function(event, fn){          if ('content loaded' == event) {            event = window.attachEvent ? "load" : "DOMContentLoaded";          }          el.addEventListener            ? el.addEventListener(event, fn, false)            : el.attachEvent("on" + event, fn);        };        el.all = function(selector){          return $(el.querySelectorAll(selector));        };        el.each = function(fn){          for (var i = 0, len = el.length; i < len; ++i) {            fn($(el[i]), i);          }        };        el.getClasses = function(){          return this.getAttribute('class').split(/\s+/);        };        el.addClass = function(name){          var classes = this.getAttribute('class');          el.setAttribute('class', classes            ? classes + ' ' + name            : name);        };        el.removeClass = function(name){          var classes = this.getClasses().filter(function(curr){            return curr != name;          });          this.setAttribute('class', classes.join(' '));        };        return el;      }      function search() {        var str = $('search').value.toLowerCase();        var links = $('files').all('a');        links.each(function(link){          var text = link.textContent.toLowerCase();          if ('..' == text) return;          if (str.length && ~text.indexOf(str)) {            link.addClass('highlight');          } else {            link.removeClass('highlight');          }        });      }      $(window).on('content loaded', function(){        $('search').on('keyup', search);      });    </script>  </head>  <body class="directory">    <input id="search" type="text" placeholder="Search" autocomplete="off" />    <div id="wrapper">      <h1><a href="/">~</a>{linked-path}</h1>      {files}    </div>  </body></html>
 |