<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); } .fine { color: #444; font-size: 12px; } .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: "[ ] "; } .app 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>--> </div> <p class="fine"> Rendered by PTTH end server. Copyright 2020-2021 "Trish" ReactorScram. Licensed under the <a href="https://www.gnu.org/licenses/agpl-3.0.html">GNU AGPLv3.</a> <a href="https://six-five-six-four.com/git/reactor/ptth">Download source code</a> </p> </body> </html>