<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>OA</title>
  <style>
    html {
      overflow: hidden;
    }

    body {
      overflow: auto;
      height: 100vh;
      width: 100vw;
      font-family: Arial, sans-serif;
      background-color: #f4f4f9;
      margin: 0;
      padding: 0;
      background: #f0f0f0;
    }

    .header {
      background: #fff;
      width: 100vw;
      height: 4rem;
      font-size: 2rem;
      padding-left: 4rem;
      box-sizing: border-box;
      box-shadow: 0px 0px 20px 0px rgb(0 0 0 / 10%);
      /* 垂直居中 */
      display: flex;
      align-items: center;
    }

    .header a,
    .header span {
      display: contents;
    }

    .header svg {
      height: 1.75rem;
      width: 1.75rem;
    }

    .header svg:hover {
      opacity: 0.7;
    }

    .container {
      padding: 2rem 2rem 0.5rem 2rem;
      box-sizing: border-box;
      width: 100vw;
      height: calc(100vh - 4rem);
      display: flex;
      flex-direction: column;
      justify-content: start;
      align-items: center;
    }

    .core {
      width: 70%;
      min-height: 50%;
      background: #fff;
      border-radius: 1rem;
      box-shadow: 0 2px 5px 1px rgb(0 0 0 / 5%);
    }

    .meta {
      border-bottom: solid 1px #000;
      height: 3rem;
      font-size: 1.25rem;
      line-height: 2rem;
      padding: 0.5rem 2rem;
      box-sizing: border-box;
      display: flex;
      gap: 1rem;
    }

    .core-box {
      padding: 0.5rem 0rem;
      box-sizing: border-box;
      height: calc(100% - 3rem);
      overflow: auto;
    }

    .line {
      padding: 0.5rem 2rem;
      display: flex;
      align-items: center;
      height: 2rem;
      font-size: 1rem;
      line-height: 2rem;
    }

    .line:hover {
      background: rgb(143 185 217 / 19%);
    }

    a:link {
      text-decoration: none;
      font-weight: bold;
    }

    a:hover {
      opacity: 0.8;
    }

    .line .icon {
      height: 1rem;
      width: 1rem;
      margin-right: 0.5rem;
    }

    .footer {
      margin-top: 2rem;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 0.75rem;
      color: #555;
    }

    .footer a {
      color: inherit;
    }
  </style>
</head>

<body>
  <div class="header">
    <a href="{{.root}}" class="icon-home"><svg t="1729512687765" viewBox="0 0 1024 1024" version="1.1"
        xmlns="http://www.w3.org/2000/svg" p-id="3059" width="200" height="200">
        <path
          d="M946.5 505L560.1 118.8l-25.9-25.9c-12.3-12.2-32.1-12.2-44.4 0L77.5 505c-12.3 12.3-18.9 28.6-18.8 46 0.4 35.2 29.7 63.3 64.9 63.3h42.5V940h691.8V614.3h43.4c17.1 0 33.2-6.7 45.3-18.8 12.1-12.1 18.7-28.2 18.7-45.3 0-17-6.7-33.1-18.8-45.2zM568 868H456V664h112v204z m217.9-325.7V868H632V640c0-22.1-17.9-40-40-40H432c-22.1 0-40 17.9-40 40v228H238.1V542.3h-96l370-369.7 23.1 23.1L882 542.3h-96.1z"
          p-id="3060"></path>
      </svg></a>
    &nbsp;/
    {{ range .path }}{{if .}}
    <span><a class="path_tag">{{.}}</a></span>
    /
    {{end}}{{end}}
  </div>
  <div class="container">
    <div class="core">
      <div class="meta">
        <span>{{.cdir}} directory</span>
        <span>{{.cfile}} files</span>
        <span>{{.size}}</span>
      </div>
      <div class="core-box">
        {{ range .dirs }}
        <div class="line">
          <svg t="1729514186035" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="2563" width="200" height="200" fill="#eabc28">
            <path
              d="M880 298.4H521L403.7 186.2c-1.5-1.4-3.5-2.2-5.5-2.2H144c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V330.4c0-17.7-14.3-32-32-32zM840 768H184V256h188.5l119.6 114.4H840V768z"
              p-id="2564"></path>
          </svg>
          <div style="flex: 1"><a href="{{index . 1}}">{{index . 0}}</a></div>
          <div style="flex: 0 0 10rem">{{index . 2}}</div>
          <div style="flex: 0 0 10rem" class="2localtime">{{index . 3}}</div>
        </div>
        {{end}}
        {{ range .files }}
        <div class="line">
          <svg t="1729514318320" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="2709" width="200" height="200">
            <path
              d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326z m1.8 562H232V136h302v216c0 23.2 18.8 42 42 42h216v494z"
              p-id="2710"></path>
          </svg>
          <div style="flex: 1"><a href="{{index . 1}}">{{index . 0}}</a></div>
          <div style="flex: 0 0 10rem">{{index . 2}}</div>
          <div style="flex: 0 0 10rem" class="2localtime">{{index . 3}}</div>
        </div>
        {{end}}
        <div style="height: 5rem;"></div>
      </div>
    </div>
    <div class="footer">
      Powered by&ensp;<a href="https://veypi.com">veypi</a>
    </div>
  </div>
</body>

<script>
  // 当文档加载完成后执行
  document.addEventListener("DOMContentLoaded", function () {
    var divs = document.getElementsByClassName('path_tag');
    var base = "{{.root}}"
    for (var i = 0; i < divs.length; i++) {
      var div = divs[i];
      if (div.textContent) {
        base = base + div.textContent + "/"
        div.setAttribute('href', base)
      }
    }
    var divs = document.getElementsByClassName('2localtime');
    for (var i = 0; i < divs.length; i++) {
      var div = divs[i];
      if (div.textContent) {
        div.textContent = new Date(div.textContent).toLocaleString();
      }
    }
  });
</script>

</html>
