.autoindex.html

<style>
  body > hr {
    display: none;
  }

  .yq-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .yq-row > * {
    flex: 1;
  }

  .yq-outer-box a {
    color: #000;
    padding: 10px 5px;
    margin: 0 -5px;
    white-space: nowrap;
    overflow: hidden;
    display: block;
    width: 100%;
    text-overflow: ellipsis;
    text-decoration: none;
  }

  .yq-outer-box a::before {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    width: 24px;
    text-align: center;
    line-height: 12px;
  }

  .yq-outer-box a.file::before {
    content: url("data:image/svg+xml;utf8,<svg width='15' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M10 8C8.34 8 7 6.66 7 5V1H3c-1.1 0-2 .9-2 2v13c0 1.1.9 2 2 2h9c1.1 0 2-.9 2-2V8h-4zM8 5c0 1.1.9 2 2 2h3.59L8 1.41V5zM3 0h5l7 7v9c0 1.66-1.34 3-3 3H3c-1.66 0-3-1.34-3-3V3c0-1.66 1.34-3 3-3z' fill='black'/></svg>");
  }

  .yq-outer-box a:hover {
    text-decoration: underline;
  }

  .yq-outer-box a.folder::before {
    content: url("data:image/svg+xml;utf8,<svg width='20' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M18.784 3.87a1.565 1.565 0 0 0-.565-.356V2.426c0-.648-.523-1.171-1.15-1.171H8.996L7.908.25A.89.89 0 0 0 7.302 0H2.094C1.445 0 .944.523.944 1.171v2.3c-.21.085-.398.21-.565.356a1.348 1.348 0 0 0-.377 1.004l.398 9.83C.42 15.393 1.048 16 1.8 16h15.583c.753 0 1.36-.586 1.4-1.339l.398-9.83c.021-.313-.125-.69-.397-.962zM1.843 3.41V1.191c0-.146.104-.272.25-.272H7.26l1.234 1.088c.083.042.167.104.293.104h8.282c.125 0 .25.126.25.272V3.41H1.844zm15.54 11.712H1.78a.47.47 0 0 1-.481-.46l-.397-9.83c0-.147.041-.252.125-.356a.504.504 0 0 1 .377-.147H17.78c.125 0 .272.063.377.147.083.083.125.209.125.334l-.418 9.83c-.021.272-.23.482-.481.482z' fill='black'/></svg>");
  }

  .yq-outer-box a.lambda::before {
    content: url("data:image/svg+xml; utf8,<svg width='15' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M3.5 14.4354H5.31622L7.30541 9.81311H7.43514L8.65315 13.0797C9.05676 14.1643 9.55405 14.5 10.7 14.5C11.0171 14.5 11.291 14.4677 11.5 14.4032V13.1572C11.3847 13.1766 11.2622 13.2024 11.1541 13.2024C10.6351 13.2024 10.3829 13.0281 10.1595 12.4664L8.02613 7.07586C7.21171 5.01646 6.54865 4.5 5.11441 4.5C4.83333 4.5 4.62432 4.53228 4.37207 4.59038V5.83635C4.56667 5.81052 4.66036 5.79761 4.77568 5.79761C5.64775 5.79761 5.9 6.0042 6.4045 7.19852L6.64234 7.77954L3.5 14.4354Z' fill='black'/><rect x='0.5' y='0.5' width='14' height='18' rx='2.5' stroke='black'/></svg>");
  }

  .yq-outer-box a.img::before {
    content: url("data:image/svg+xml;utf8,<svg width='16' height='19' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'><rect x='6' y='6' width='68' height='68' rx='5' ry='5'/><circle cx='24' cy='24' r='8'/><path d='M73 49L59 34 37 52m16 20L27 42 7 58'/></svg>");
  }
</style>
<script>
  function getClassName(filename) {
    if (!filename) {
      return 'file';
    }
    if (filename.endsWith('/')) {
      return 'folder';
    }
    const array = filename.split('.');
    let suffix = array[array.length - 1];
    if (!suffix) {
      return 'file';
    }
    suffix = suffix.toLowerCase();
    const img = ['gif', 'jpg', 'png', 'svg', 'jpeg', 'bmp'];
    if (img.includes(suffix)) {
      return 'img';
    }
    const lambda = ['java', 'js', 'ts', 'go', 'c', 'cpp', 'cs', 'py', 'sh', 'swift', 'php', 'html', 'css', 'xml', 'json', 'yml', 'yaml', 'md', 'log', 'ini', 'conf', 'properties', 'cmd', 'bat'];
    if (lambda.includes(suffix)) {
      return 'lambda';
    }
    return 'file';
  }

  function formatDate(date, time) {
    const mon = {
      Jan: '01',
      Feb: '02',
      Mar: '03',
      Apr: '04',
      May: '05',
      Jun: '06',
      Jul: '07',
      Aug: '08',
      Sep: '09',
      Oct: '10',
      Nov: '11',
      Dec: '12',
    };
    const [day, month, year] = date.split('-');
    return `${year}-${mon[month]}-${day} ${time}`;
  }

  function formatSize(size) {
    if (size === '-') {
      return '';
    }
    const units = ['B', 'KB', 'MB', 'GB', 'TB'];
    let s = Number(size);
    for (const u of units) {
      if (s < 1024) {
        return s.toFixed(2) + ' ' + u;
      }
      s = s / 1024;
    }
    return s.toFixed(2) + ' ' + units[units.length - 1];
  }

  function change() {
    const preElement = document.getElementsByTagName('pre')[0];
    const preClassName = preElement.className;
    if (preClassName) {
      return;
    }
    const outerBox = document.createElement('div');
    outerBox.classList.add('yq-outer-box');

    let row;
    preElement.childNodes.forEach((child) => {
      if (child.nodeType === Node.ELEMENT_NODE) {
        row = document.createElement('div');
        row.classList.add('yq-row');
        const name = document.createElement('a');
        name.href = child.href;
        name.innerText = child.text;
        name.classList.add(getClassName(child.text));
        row.appendChild(name);
        outerBox.appendChild(row);
      } else if (child.nodeType === Node.TEXT_NODE) {
        const text = child.nodeValue.trim();
        if (!text) {
          return;
        }
        const textArray = text.split(' ').filter((item) => item.trim());
        const lastModified = document.createElement('div');
        lastModified.innerText = formatDate(textArray[0], textArray[1]);
        lastModified.classList.add('last-modified');
        row.appendChild(lastModified);
        const size = document.createElement('div');
        size.innerText = formatSize(textArray[2]);
        size.classList.add('size');
        row.appendChild(size);
      }
    });

    document.body.removeChild(preElement);
    document.body.appendChild(outerBox);
  }

  change();
</script>