<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>