<!doctype html>
<html>
<meta charset="utf-8">
<meta name=viewport content="width=device-width, initial-scale=1">
<title>I am thunder</title>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/3.3.7/darkly/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdn.rawgit.com/lamhotsimamora/Download-JS/master/download.js" crossorigin="anonymous"></script>
<style>
#ls {
  display: none;
}
body {
  background-image: url("https://stats.wotapi.ru/assets/bg_dark.png");
  background-color: rgb(33,33,33);
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  color: white;
  font-family: sans serif;
}
a {
  color: white;
  text-decoration: none !important;
}
</style>

<div class="container">
    <h1 style="text-align: center;">¯\_(ツ)_/¯</h1>
    <ol id="breadcrumbs"></ol>
    <table class="table table-hover">
      <thead>
        <tr class="row" style="border-bottom: 1px dotted #9999;">
          <td colspan="4">
            <small class="pull-left text-muted" dir="ltr"><span class="itm_cnt">0</span> items, <span class="itm_size">0 bytes</span> in total</small>
          </td>
        </tr>
        <tr class="row" style="border-bottom: 1px dotted #9999;">
          <th class="text-right" data-sort="int">#</th>
          <th class="col-md-7 text-left" data-sort="string">Name</th>
          <th class="col-md-2 text-right" data-sort="int">Size</th>
          <th class="col-md-3 text-center" data-sort="int">Modified</th>
        </tr>
      </thead>
      <tfoot>
        <tr class="row" style="border-top: 1px dotted #9999;">
          <td colspan="4">
            <small class="pull-left text-muted" dir="ltr"><span class="itm_cnt">0</span> items, <span class="itm_size">0 bytes</span> in total</small>
          </td>
        </tr>
      </tfoot>
      <tbody id="filelist">
      </tbody>
    </table>
</div>

<script>
$(function() {
/////////////////////
var config = {
  "hidden_files": [
    "img", "css", "js", "audio", "favicon.ico", "index.html", "video.html",
  ],
  "types": {
    "file_type": {
      "audio": {
        "ext": ["mp3","wav","ogg"],
        "icon": "fa-file-sound-o",
      },
      "video": {
        "ext": ["avi","mp4","mkv","mov"],
        "icon": "fa-file-video-o",
      },
      "web": {
        "ext": ["html","htm","xml","js"],
        "icon": "fa-file-code-o",
      },
      "archives": {
        "ext": ["zip","rar","gz","tar"],
        "icon": "fa-file-archive-o",
      },
      "pdf": {
        "ext": ["pdf"],
        "icon": "fa-file-pdf-o",
      },
      "executable": {
        "ext": ["exe","bat","sh","ps1","cmd"],
        "icon": "fa-cogs",
      },
      "excel": {
        "ext": ["xls","xlsx"],
        "icon": "fa-file-excel-o",
      },
      "word": {
        "ext": ["doc","docx","odf"],
        "icon": "fa-file-word-o",
      },
      "text": {
        "ext": ["txt","rtf","reg"],
        "icon": "fa-file-text",
      },
      "powerpoint": {
        "ext": ["ppt","pptx","odf"],
        "icon": "fa-file-powerpoint-o",
      },
      "image": {
        "ext": ["jpg","jpeg","ico","png","gif","bmp"],
        "icon": "fa-file-image-o",
      },
    },
    "default": {
      "icon": "fa-file",
    },
    "directory": {
      "icon": "fa-folder",
    },
  }
}  
/////////////////////
  function getFileExt(filename) {
    return filename.slice((filename.lastIndexOf(".") - 1 >>> 0) + 2);
  }
  function humanFileSize(bytes, si) {
    let thresh = si ? 1000 : 1024;
    if(Math.abs(bytes) < thresh) {
      return bytes + ' B';
    }
    let units = si
      ? ['kB','MB','GB','TB','PB','EB','ZB','YB']
      : ['KiB','MiB','GiB','TiB','PiB','EiB','ZiB','YiB'];
    let u = -1;
    do {
      bytes /= thresh;
      ++u;
    } while(Math.abs(bytes) >= thresh && u < units.length - 1);
    return bytes.toFixed(1)+' '+units[u];
  }
  function getIcon(_ext) {
    if (_ext.toLowerCase() != "directory") {
      _fileTypes = config["types"]["file_type"]
      for (x in _fileTypes) {
        _exts = _fileTypes[x]["ext"];
        _icon = _fileTypes[x]["icon"];
        if (_exts.indexOf(_ext.toLowerCase())!= -1) {
          console.log("found in " + x + " -> " + _exts)
          return _icon
        }
      }
      return config["types"]["default"]["icon"];
    } else {
      return config["types"]["directory"]["icon"] // ?: "fa-folder"
    }
  }
  function generateTr(_config) {
    if (_config.size !== "DIR") {
      _config.size = humanFileSize(_config.size, true);
    }
    _download = (_config.type == "file" ) ? "download=\"" + _config.name + "\"" : "";
    _tr = `
    <tr class="row">
    <td class="text-muted text-right" data-sort-value="${_config.counter}">${_config.counter}</td>
    <td class="text-left" data-sort-value="${_config.name}" nowrap>
      <a href="${_config.location}" ${_download} data-modified="" data-type="${_config.type}" data-filename="${_config.name}" data-location="${_config.location}" style="width: 100%;">
        <i class="fa ${_config.icon}"></i>&nbsp;&nbsp;${_config.name}
      </a>
    </td>
    <td class="text-right" data-sort-value="${_config.size}" title="${_config.size}" nowrap>${_config.size}</td>
    <td class="text-right" data-sort-value="0" title="${_config.mtime}" nowrap>${_config.mtime}</td>
    </tr>
    `
    return _tr;
  }
///////////////////
/// @FIXME: do not work with root path
  let _pathname = $(location).prop("pathname").split("/").slice(0,-1);
  let _parent = _pathname.slice(0,-1).join("/");

  if (_parent == "") { _parent = "/" }
  
  console.log(_pathname);
  console.log(_parent);
  
  let ls = JSON.parse(document.getElementById("ls").innerHTML);
  let _tbody = "";
  let _counter = 1;
  let _total_size = 0;
  let _icon = "";
  let hidden = config["hidden_files"];

  _tbody += generateTr({
    "counter": 1, 
    "name": "..", 
    "icon": getIcon("directory"), 
    "location": _parent,
    "size": "DIR",
    "mtime": "",
    "type": "dir",
  });
  for (let i of ls) {
    // console.log(i);
    if (hidden.indexOf(i.name) != -1 ) {
      continue;
    }
    _counter++;
    _filename = i.name;
    _fileext = getFileExt(_filename);
    _location = _pathname.concat([_filename]).join("/");
    _size = i.size ? i.size : 0;
    _total_size += parseInt(_size);
    _mtime = i.mtime;
    _type = i.type;
    if (_type === "file") {
      _icon = getIcon(_fileext);
    } else if (_type === "directory") {
      _icon = getIcon(i.type);
      _size = "DIR";
    }
    _tbody += generateTr({
      "counter": _counter, 
      "name": _filename, 
      "icon": _icon, 
      "location": _location,
      "size": _size,
      "mtime": _mtime,
      "type": _type,
    });
  }
  $("span.itm_cnt").html(_counter);
  $("span.itm_size").html(humanFileSize(_total_size, true));
  $("#filelist").html(_tbody);

});
</script>

<div id="ls">
[
{ "name":"9e25ca0454822ae3667582bfc860652b", "type":"directory", "mtime":"Mon, 02 Jun 2025 13:53:40 GMT" },
{ "name":"b8d89b49a48c59a771ef653d9c01988e", "type":"directory", "mtime":"Fri, 05 Feb 2021 09:57:53 GMT" }
]  </div>
  <p style="text-align: center;">
    <span class="small" style="display: inline; visibility: visible; font-family: Verdana, Arial, sans-serif;">Powered and
      <font color="lime">e</font><font color="yellow">n</font><font color="lime">e</font><font color="yellow">r</font><font color="lime">g</font><font color="yellow">i</font><font color="lime">z</font><font color="yellow">e</font><font color="lime">d</font>
      by <a href="//iam.thunder.spb.ru/">thunder</a>
    </span>  
  </p>
</html>

