128 lines
2.8 KiB
HTML
128 lines
2.8 KiB
HTML
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<link href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAAAAAAAAAAAAAAAAAAAAA
|
|
AAAAAAAlJSUAAGIAAP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
|
|
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAIiIiIgAAAAAAAAAgAAAAAAAAAAAAADIiIiIi
|
|
IiIjMhERERERESMyERERERERIzIREREREREjMhERIRERESMyERIiIiERIzIRESEREREjMhERERER
|
|
ESMyERERERERIzIREREREREjMiIiIiIiIiMAAAAAAAAAAAAAAAAAAAAAAAAAAIABAACAAQAAgAEA
|
|
AIABAACAAQAAgAEAAIABAACAAQAAgAEAAIABAACAAQAA" rel="icon" type="image/x-icon" />
|
|
<style>
|
|
body {
|
|
margin: 0px;
|
|
font-family: sans-serif;
|
|
}
|
|
.app {
|
|
--main-bg-color: white;
|
|
--main-fg-color: black;
|
|
--main-link-color: unset;
|
|
--odd-row-bg-color: #d8d8d8;
|
|
--grey-color: #555;
|
|
--dark-mode-transition: all 1s ease;
|
|
|
|
background-color: var(--main-bg-color);
|
|
color: var(--main-fg-color);
|
|
padding: 8px;
|
|
|
|
transition: var(--dark-mode-transition);
|
|
}
|
|
.light_switch {
|
|
display: none;
|
|
}
|
|
.light_switch_label {
|
|
cursor: pointer;
|
|
padding: 8px;
|
|
|
|
background-color: var(--main-fg-color);
|
|
color: var(--main-bg-color);
|
|
}
|
|
.light_switch_label::before {
|
|
content: "[ ] ";
|
|
}
|
|
a {
|
|
color: var(--main-link-color);
|
|
transition: var(--dark-mode-transition);
|
|
}
|
|
th {
|
|
color: var(--main-fg-color);
|
|
transition: var(--dark-mode-transition);
|
|
}
|
|
td {
|
|
padding: 0;
|
|
}
|
|
td > * {
|
|
padding: 10px;
|
|
display: block;
|
|
}
|
|
.entry {
|
|
text-decoration: none;
|
|
}
|
|
.grey {
|
|
color: var(--grey-color);
|
|
text-align: right;
|
|
transition: var(--dark-mode-transition);
|
|
}
|
|
.entry_list {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-bottom: 1em;
|
|
}
|
|
tbody tr:nth-child(odd) {
|
|
background-color: var(--odd-row-bg-color);
|
|
transition: var(--dark-mode-transition);
|
|
}
|
|
|
|
/* Dark mode colors */
|
|
[type="checkbox"]:checked + .app {
|
|
--main-bg-color: black;
|
|
--main-fg-color: white;
|
|
--main-link-color: white;
|
|
--odd-row-bg-color: #333;
|
|
--grey-color: #aaa;
|
|
}
|
|
[type="checkbox"]:checked + .app .light_switch_label::before {
|
|
content: "[X] ";
|
|
}
|
|
</style>
|
|
<title>{{path}} {{server_name}}</title>
|
|
</head>
|
|
<body>
|
|
<input type="checkbox" class="light_switch" id="light_switch">
|
|
|
|
<div class="app">
|
|
<p>{{server_name}}</p>
|
|
|
|
<p>{{path}}</p>
|
|
|
|
<table class="entry_list">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Size</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
<tr>
|
|
<td><a class="entry" href="../">📁 ../</a></td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
{{#each entries}}
|
|
<tr>
|
|
<td><a class="entry" href="{{this.encoded_file_name}}{{this.trailing_slash}}">
|
|
{{this.icon}} {{this.file_name}}{{this.trailing_slash}}</a></td>
|
|
<td><span class="grey">{{this.size}}</span></td>
|
|
</tr>
|
|
{{/each}}
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
<!-- Doesn't work perfectly yet -->
|
|
<label for="light_switch" class="light_switch_label">Dark mode</label>
|
|
</page>
|
|
</body>
|
|
</html>
|