<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Index of {{path}}</title>
<style>
body {
font-family:
system-ui,
-apple-system,
sans-serif;
margin: 40px auto;
max-width: 900px;
padding: 0 20px;
color: #333;
background: #fafafa;
}
header {
margin-bottom: 30px;
border-bottom: 1px solid #ddd;
padding-bottom: 15px;
}
header h1 {
margin: 0;
font-weight: 500;
font-size: 1.8em;
}
header p {
margin: 5px 0 0;
color: #666;
}
main {
background: #fff;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}
table {
width: 100%;
border-collapse: collapse;
}
thead {
background: #f5f5f5;
}
th {
text-align: left;
padding: 12px 15px;
font-weight: 600;
color: #555;
border-bottom: 2px solid #eee;
}
td {
padding: 12px 15px;
border-bottom: 1px solid #eee;
}
tr:hover {
background: #f9f9f9;
}
a {
color: #3498db;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.icon {
width: 24px;
padding-right: 10px;
color: #7f8c8d;
}
.size {
font-family: monospace;
color: #95a5a6;
}
.time {
white-space: nowrap;
color: #95a5a6;
}
footer {
margin-top: 30px;
text-align: center;
color: #aaa;
font-size: 0.9em;
}
@media (max-width: 600px) {
.size,
.time {
display: none;
}
}
</style>
</head>
<body>
<header>
<h1>Index of {{path}}</h1>
<p>{{authority}}</p>
</header>
<main>
<table>
<thead>
<tr>
<th>Name</th>
<th class="size">Size</th>
<th class="time">Modified</th>
</tr>
</thead>
<tbody>
{% for entry in entries %}
<tr>
<td>
<a href="{{entry}}">
{% if entry %}
<span class="icon">📁</span>
{% else %}
<span class="icon">📄</span>
{% endif %}
{{entry}}
</a>
</td>
<td class="size">N/A</td>
<td class="time">N/A</td>
</tr>
{% endfor %}
</tbody>
</table>
</main>
<footer>
<p>File Browser • Templated by Tera</p>
</footer>
</body>
</html>