You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
OneAuth/oa/builtin/webdav/dir.html

206 lines
5.6 KiB
HTML

<!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="/" 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>/{{ 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 = "/"
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>