diff --git a/srv/autoindex-script.js b/srv/autoindex-script.js
new file mode 100644
index 0000000..0d28d5a
--- /dev/null
+++ b/srv/autoindex-script.js
@@ -0,0 +1,48 @@
+document.addEventListener('DOMContentLoaded', function() {
+
+ function calculateSize(size) {
+ var sufixes = ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'EiB'];
+ var q = 0;
+
+ while (size / 1024 > 1) {
+ size = size / 1024;
+ q++;
+ }
+
+ return (Math.round(size * 100) / 100) + ' ' + sufixes[q];
+ }
+
+ if (window.location.pathname == '/') {
+ document.querySelector('.directory.go-up').style.display = 'none';
+ }
+
+ var path = window.location.pathname.split('/');
+ var nav = document.querySelector("nav#breadcrumbs ul");
+ var pathSoFar = '';
+
+ for (var i = 1; i < path.length - 1; i++) {
+ pathSoFar += '/' + decodeURI(path[i]);
+ nav.innerHTML += '' + decodeURI(path[i]) + '';
+ }
+
+ var mtimes = document.querySelectorAll("table#contents td.mtime a");
+
+ for (var i = 0; i < mtimes.length; i++) {
+ var mtime = mtimes[i].textContent;
+ if (mtime) {
+ var d = new Date(mtime);
+ mtimes[i].textContent = d.toLocaleString(navigator.language);
+ }
+ }
+
+ var sizes = document.querySelectorAll("table#contents td.size a");
+
+ for (var i = 1; i < sizes.length; i++) {
+ var size = sizes[i].textContent.slice(0, -2);
+ if (size) {
+ sizes[i].textContent = calculateSize(parseInt(size));
+ }
+ }
+
+}, false);
+
diff --git a/srv/autoindex-style.css b/srv/autoindex-style.css
new file mode 100644
index 0000000..d9e5fb6
--- /dev/null
+++ b/srv/autoindex-style.css
@@ -0,0 +1,191 @@
+/* soo much SHIT css */
+
+* {
+ box-sizing: border-box;
+}
+
+html {
+ margin: 0px;
+ padding: 0px;
+ height: 100%;
+ width: 100%;
+}
+
+body {
+ background: var(--background);
+}
+
+table#contents td a {
+ text-decoration: none;
+ display: block;
+ padding: 10px 30px 10px 30px;
+}
+
+table#contents {
+ width: 50%;
+ margin-left: auto;
+ margin-right: auto;
+ border-collapse: collapse;
+ border-width: 0px;
+}
+
+table#contents td {
+ padding: 0px;
+ word-wrap: none;
+ white-space: nowrap;
+}
+
+table#contents td.icon,
+table td.size,
+table td.mtime {
+ width: 1px;
+ white-space: nowrap;
+}
+
+table#contents td.icon a {
+ padding-left: 0px;
+ padding-right: 5px;
+}
+
+table#contents td.name a {
+ padding-left: 5px;
+}
+
+table#contents td.size a {
+ color: var(--text);
+}
+
+table#contents td.mtime a {
+ padding-right: 0px;
+ color: var(--text);
+}
+
+table#contents tr {
+ color: var(--text);
+}
+
+table#contents tr:hover {
+ color: var(--accent);
+}
+
+table#contents tr.separator td {
+ padding: 10px 30px 10px 30px
+}
+
+table#contents tr.separator td hr {
+ display: none;
+}
+
+nav#breadcrumbs {
+ margin-bottom: 50px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+nav#breadcrumbs ul {
+ list-style: none;
+ display: inline-block;
+ margin: 0px;
+ padding: 0px;
+}
+
+nav#breadcrumbs ul .icon {
+ font-size: 14px;
+}
+
+nav#breadcrumbs ul li:first-child a,
+table#contents tbody tr:first-child td:first-child a {
+ color: var(--primary);
+}
+
+nav#breadcrumbs ul:hover li:first-child a {
+ color: var(--text);
+}
+
+nav#breadcrumbs ul li {
+ float: left;
+}
+
+nav#breadcrumbs ul li a {
+ color: var(--text);
+ display: block;
+ background: var(--background-lighter);
+ text-decoration: none;
+ position: relative;
+ height: 40px;
+ line-height: 40px;
+ padding: 0 10px 0 5px;
+ text-align: center;
+ margin-right: 23px;
+}
+
+nav#breadcrumbs ul li:first-child a {
+ padding-left: 15px;
+ -moz-border-radius: 4px 0 0 4px;
+ -webkit-border-radius: 4px;
+ border-radius: 4px 0 0 4px;
+}
+
+nav#breadcrumbs ul li:first-child a:before {
+ border: none;
+}
+
+nav#breadcrumbs ul li:last-child a {
+ padding-right: 15px;
+ -moz-border-radius: 0 4px 4px 0;
+ -webkit-border-radius: 0;
+ border-radius: 0 4px 4px 0;
+}
+
+nav#breadcrumbs ul li:last-child a:after {
+ border: none;
+}
+
+nav#breadcrumbs ul li a:before,
+nav#breadcrumbs ul li a:after {
+ content: "";
+ position: absolute;
+ top: 0;
+ border: 0 solid var(--background-lighter);
+ border-width: 20px 10px;
+ width: 0;
+ height: 0;
+}
+
+nav#breadcrumbs ul li a:before {
+ left: -20px;
+ border-left-color: transparent;
+}
+
+nav#breadcrumbs ul li a:after {
+ left: 100%;
+ border-color: transparent;
+ border-left-color: var(--background-lighter);
+}
+
+nav#breadcrumbs ul li a:hover {
+ background-color: var(--primary);
+}
+
+nav#breadcrumbs ul li a:hover:before {
+ border-color: var(--primary);
+ border-left-color: transparent;
+}
+
+nav#breadcrumbs ul li a:hover:after {
+ border-left-color: var(--primary);
+}
+
+nav#breadcrumbs ul li a:active {
+ background-color: var(--accent);
+}
+
+nav#breadcrumbs ul li a:active:before {
+ border-color: var(--accent);
+ border-left-color: transparent;
+}
+
+nav#breadcrumbs ul li a:active:after {
+ border-left-color: var(--accent);
+}
diff --git a/srv/autoindex.xslt b/srv/autoindex.xslt
new file mode 100644
index 0000000..81c272c
--- /dev/null
+++ b/srv/autoindex.xslt
@@ -0,0 +1,70 @@
+
+
+
+
+
+
+ <?xml version="1.0" encoding="utf-8" ?>
+
+
+
+
+
+
+ <!DOCTYPE html>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ | ← |
+ .. |
+ |
+ |
+
+
+
+
+
|
+
+
+
+
+
+ |
+ |
+ |
+ |
+
+
+
+
+
+
|
+
+
+
+
+
+ |
+ |
+ B |
+ |
+
+
+
+
+