cat/myfancyindex
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

omagad

Browse source
This commit is contained in:
catmpeg 2026-02-17 22:34:08 +03:00
commit a17e99a52d
6 changed files with 105 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
JetBrainsMono-Bold.ttf Normal file
View file

Binary file not shown.

20
README.md Normal file
View file

@ -0,0 +1,20 @@
# My fancyindex
<img src="example.jpg" width=600>
## also you can see an example at https://cat.fs.tlpteam.ru/fancyindexexample/
## Usage
### clone repo to folder "fancyindex"
#### `$ git clone https://cat.fs.tlpteam.ru/git/cat/myfancyindex.git fancyindex`
### now you can use it like this in nginx
```
location /files/ {
fancyindex on;
fancyindex_exact_size off;
fancyindex_localtime on;
fancyindex_header /fancyindex/header.html;
fancyindex_footer /fancyindex/footer.html;
try_files $uri $uri/ =404;
}
```

BIN
background.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 913 KiB

BIN
example.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 275 KiB

2
footer.html Normal file
View file

@ -0,0 +1,2 @@
</body>
</html>

83
header.html Normal file
View file

@ -0,0 +1,83 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<style type="text/css">
@font-face{
font-family:'JetBrains Mono';
src:url('/fancyindex/JetBrainsMono-Bold.ttf') format('truetype');
font-weight:bold;
font-display:swap;
}
body,html {
background: #222 url(/fancyindex/background.png) center/cover fixed;
color:white;
font:16px 'JetBrains Mono',monospace;
}
.size,
.date {
text-shadow: 0 0 0.5rem black;
}
th {
text-align: left;
font-weight: bold;
background-color: rgba(34, 34, 34, 0.4);
border-bottom: 1px solid rgba(34, 34, 34, 0.4);
padding: 0.1em 0.5em;
}
td {
padding: 0.1em 0.5em;
background-color: rgba(34, 34, 34, 0.4);
}
h1 {
text-shadow: 0 0 0 black;
}
#list {border:1px solid #222;width:100%;}
a {color:white; text-decoration: none; filter: drop-shadow(0 0 0.4rem black);}
a:hover {color:whitesmoke; text-decoration: underline; filter: drop-shadow(0 0 0.4rem black);}
</style>
<title>QwQ</title>
</head>
<body>
<h1 style="text-align: center;" id="folder-name"></h1>
<script>
var ready = (callback) => {
if (document.readyState != "loading") callback();
else document.addEventListener("DOMContentLoaded", callback);
}
ready(() => {
document.body.childNodes.forEach((e) => {
if (e.nodeType == Node.TEXT_NODE && e.textContent.trim() !== "")
e.remove();
});
const path = window.location.pathname;
const segments = path.split('/').filter(Boolean);
const container = document.getElementById('folder-name');
container.innerHTML = "";
let homeLink = document.createElement("a");
homeLink.href = "/";
homeLink.textContent = "🏠";
container.appendChild(homeLink);
let currentPath = "";
segments.forEach((seg, i) => {
currentPath += "/" + seg;
let sep = document.createTextNode(" -> ");
container.appendChild(sep);
let link = document.createElement("a");
link.href = currentPath + "/";
link.textContent = seg;
container.appendChild(link);
});
});
</script>
</body>
</html>