192 lines
4.9 KiB
Django/Jinja
192 lines
4.9 KiB
Django/Jinja
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Index of {{dirname}}</title>
|
|
|
|
<style>
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--background: #111;
|
|
--color: #CCC;
|
|
--link: #004ffc;
|
|
--visited: #2149a0;
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
:root {
|
|
--background: #FFF;
|
|
--color: #000;
|
|
--link: #004ffc;
|
|
--visited: #2149a0;
|
|
}
|
|
}
|
|
|
|
body {
|
|
font-family: monospace;
|
|
font-size: 1.2em;
|
|
background-color: var(--background);
|
|
color: var(--color);
|
|
}
|
|
|
|
a {
|
|
color: var(--link);
|
|
}
|
|
|
|
a:visited {
|
|
color: var(--visited);
|
|
}
|
|
|
|
td {
|
|
margin: 0px;
|
|
border: 0px;
|
|
padding: 0px 8px;
|
|
}
|
|
|
|
tr:nth-child(2) td {
|
|
padding-top: 4px;
|
|
}
|
|
|
|
td:first-child {
|
|
text-align: center;
|
|
}
|
|
|
|
th {
|
|
border-bottom: double;
|
|
padding-bottom: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
footer {
|
|
padding-top: 15px;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
h1 {
|
|
margin-bottom: 0.25em;
|
|
}
|
|
|
|
p {
|
|
margin: 0.25em auto 0.50em auto;
|
|
padding: 0;
|
|
}
|
|
|
|
td p {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<h1>Index of {{dirname}}</h1>
|
|
{% if description %}{{ description | md }}{% endif %}
|
|
<table>
|
|
<tr>
|
|
<th>
|
|
|
|
</th>
|
|
<th>
|
|
Name
|
|
</th>
|
|
<th>
|
|
Last Modified
|
|
</th>
|
|
<th>
|
|
Size
|
|
</th>
|
|
<th>
|
|
Description
|
|
</th>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
{{ "BACK" | iconize }}
|
|
</td>
|
|
<td>
|
|
<a href="..">..</a>
|
|
</td>
|
|
<td>
|
|
</td>
|
|
<td>
|
|
</td>
|
|
<td>
|
|
</td>
|
|
</tr>
|
|
{% for file in directories %}
|
|
<tr>
|
|
<td data-value="{{ file.format }}">
|
|
{{ file.format | iconize }}
|
|
</td>
|
|
<td data-value="{{ file.filename }}">
|
|
<a href="{{ file.filename }}">{{ file.filename }}</a>
|
|
</td>
|
|
<td data-value="{{ file.modified }}">
|
|
{{ file.modified | time }}
|
|
</td>
|
|
<td data-value="">
|
|
|
|
</td>
|
|
<td>
|
|
{{ file.description | md }}
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
{% for file in files %}
|
|
<tr>
|
|
<td data-value="{{ file.format }}">
|
|
{% if not file.icon %}
|
|
{{ file.format | iconize }}
|
|
{% else %}
|
|
{{ file.icon | from_ico }}
|
|
{% endif %}
|
|
</td>
|
|
<td data-value="{{ file.filename }}">
|
|
<a href="{{ file.filename }}">{{ file.filename }}</a>
|
|
</td>
|
|
<td data-value="{{ file.modified }}">
|
|
{{ file.modified | time }}
|
|
</td>
|
|
<td data-value="{{ file.size }}">
|
|
{{ file.size | size }}
|
|
</td>
|
|
<td>
|
|
{{ file.description | md }}
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</table>
|
|
<footer>
|
|
Directory index by <a href="https://github.com/aviinl" target="_BLANK">Avii</a> - Loading took {{ loading }}ms
|
|
</footer>
|
|
|
|
<script>
|
|
var getCellValue = function (tr, idx) { console.log(tr, idx); return tr.children[idx].dataset.value || tr.children[idx].innerText || tr.children[idx].textContent; }
|
|
|
|
var comparer = function (idx, asc) {
|
|
return function (a, b) {
|
|
return function (v1, v2) {
|
|
return v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2);
|
|
}(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));
|
|
}
|
|
};
|
|
|
|
// do the work...
|
|
Array.prototype.slice.call(document.querySelectorAll('th')).forEach(function (th) {
|
|
th.addEventListener('click', function () {
|
|
var table = th.parentNode;
|
|
while (table.tagName.toUpperCase() != 'TABLE') table = table.parentNode;
|
|
Array.prototype.slice.call(table.querySelectorAll('tr:nth-child(n+2)'))
|
|
.sort(comparer(Array.prototype.slice.call(th.parentNode.children).indexOf(th), this.asc = !this.asc))
|
|
.forEach(function (tr) { table.appendChild(tr) });
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |