Initial Release

2026-05-23 16:50:43 -07:00
commit 06b6c5b00c
22 changed files with 553 additions and 0 deletions
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="/private/styles.css?v={{ .Version }}">
+    <link rel="icon" href="/private/favicon.png?v={{ .Version }}">
+    <title>Browser: {{ .Path }}</title>
+    <style>
+        a.entry[data-type="directory"] div.icon {
+            background-image: url("/private/icon_folder.png?v={{ .Version }}");
+        }
+
+        a.entry[data-type="directory"]:hover div.icon {
+            background-image: url("/private/icon_folder_open.png?v={{ .Version }}");
+        }
+    </style>
+</head>
+
+<body>
+    <div class="foreground">
+        <div class="header">
+            <span class="pathname">{{ .Path }}</span>
+            <div class="actions">
+                <span>Links:</span>
+                <a href="/">Top</a>
+                <a href="https://pancakz.net">Homepage</a>
+
+                <span>Sort:</span>
+                <form method="POST" action="/preferences/sort">
+                    <input type="hidden" name="sort" value="alpha">
+                    <input type="hidden" name="redirect" value="{{ .Path }}">
+                    <button type="submit">Alphabetical</button>
+                </form>
+                <form method="POST" action="/preferences/sort">
+                    <input type="hidden" name="sort" value="modified">
+                    <input type="hidden" name="redirect" value="{{ .Path }}">
+                    <button type="submit">Modified</button>
+                </form>
+            </div>
+        </div>
+        <hr>
+        <div class="directory">
+
+            {{ if .Parent }}
+            <a class="entry" data-type="directory" data-ignore="true" href="{{ .Parent }}">
+                <div class="icon"></div>
+                <span class="filename">../</span>
+            </a>
+            {{ end }}
+
+            {{ range .Item }}
+            {{ if .IsDir }}
+            <a class="entry" data-type="directory" href="{{ EncodeURI .Name }}/" title="{{ .Name }}&#10;Modified: {{ .ModTime.Format "2006-01-02 15:04" }}">
+                <div class="icon"></div>
+                <span class="filename">{{ .Name }}</span>
+            </a>
+            {{ else }}
+            <a class="entry" data-type="file" href="{{ EncodeURI .Name }}" title="Name: {{ .Name }}&#10;Size: {{ GetEntrySizeHuman .Size }}&#10;Modified: {{ .ModTime.Format "2006-01-02 15:04" }}">
+                <img class="icon" src="/private/{{ GetEntryIcon .Name .IsDir }}?v={{ $.Version }}">
+                <span class="filename">{{ .Name }}</span>
+            </a>
+            {{ end }}
+            {{ end }}
+
+        </div>
+    </div>
+    <div class="pattern"></div>
+    <div class="graphic"></div>
+</body>
+
+</html>
@@ -0,0 +1,109 @@
+body {
+    margin: 0;
+}
+
+::-webkit-scrollbar {
+    display: none;
+}
+
+a,
+button {
+    border: 0;
+    padding: 0;
+    font-family: Times, serif;
+    background: transparent;
+    text-decoration: underline;
+    color: blue;
+    cursor: pointer;
+    font-size: 1em;
+}
+
+div.foreground {
+    background: #88cecb;
+    box-sizing: border-box;
+    padding: 16px;
+    min-height: 180px;
+}
+
+div.pattern {
+    background: url("/private/bg_pattern.png?v={{ .Version }}");
+    background-repeat: repeat-x;
+    height: 152px;
+}
+
+div.graphic {
+    background: url("/private/bg_graphic.png?v={{ .Version }}");
+    width: 256px;
+    height: 259px;
+    position: absolute;
+    margin-top: 32px;
+    right: 2%;
+}
+
+div.header {
+    display: flex;
+    justify-content: space-between;
+}
+
+div.header div.actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+div.directory {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+a.entry[data-type="directory"] div.icon {
+    background-size: 32px 32px;
+    height: 32px;
+    width: 32px;
+}
+
+a.entry {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100px;
+    padding: 8px;
+    text-align: center;
+    text-decoration: none;
+    color: inherit;
+}
+
+a.entry img.icon {
+    height: 32px;
+    width: 32px;
+}
+
+a.entry span.filename {
+    font-size: 0.8em;
+    margin-top: 4px;
+    color: blue;
+    text-decoration: underline;
+    word-break: break-word;
+}
+
+@media (max-width: 600px) {
+
+    a.entry {
+        padding: 4px;
+        width: 100%;
+        text-align: left;
+        flex-direction: unset;
+        gap: 8px;
+    }
+
+    a.entry img.icon,
+    a.entry[data-type="directory"] div.icon {
+        background-size: 1em 1em;
+        height: 1em;
+        width: 1em;
+    }
+
+    a.entry span.filename {
+        font-size: 1em;
+    }
+}