initial commit

2025-09-12 16:18:15 +03:00
commit 20555c23a4
4 changed files with 356 additions and 0 deletions
--- a/views/index.html
+++ b/views/index.html
@@ -0,0 +1,160 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Downloads Manager</title>
+
+    <style>
+      .container {
+        max-width: 1920px;
+        width: 100%;
+        margin: 0 auto;
+      }
+
+      .title {
+        text-align: center;
+      }
+
+      .header {
+        max-width: 900px;
+        width: 100%;
+        margin: 24px auto;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 8px;
+      }
+
+      #delete-form {
+        max-width: 900px;
+        width: 100%;
+        margin: 0 auto;
+      }
+
+      .list {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        padding: 0;
+      }
+
+      .item {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 16px;
+        padding: 4px;
+      }
+
+      .item:hover {
+        background-color: #aaa;
+      }
+
+      .item a {
+        all: unset;
+        cursor: pointer;
+        color: #000;
+      }
+
+      .item_directory a {
+        color: blue;
+      }
+
+      .item__left {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+
+      .submit-btn {
+        width: 100%;
+        border: none;
+        background-color: #b00420;
+        color: #fff;
+        cursor: pointer;
+        padding: 12px;
+        border-radius: 6px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1 class="title">Downloads Manager</h1>
+
+      <div class="header">
+        <div>
+          <label>
+            <input type="checkbox" name="directories-first" />
+            Directories first
+          </label>
+        </div>
+        <div>
+          <select name="sort">
+            <option value="oldest" selected>Oldest</option>
+            <option value="newest">Newest</option>
+          </select>
+        </div>
+      </div>
+
+      <form method="post" action="/delete" id="delete-form">
+        <ul class="list">
+          {{range .Entries}}
+          <li class="item {{if .IsDir}}item_directory{{else}}item_file{{end}}">
+            <div class="item__left">
+              <input type="checkbox" name="files" value="{{.Path}}" />
+              <a href="{{.Path}}">{{.Name}}</a>
+            </div>
+            <span>{{.ModifiedAt}}</span>
+          </li>
+          {{end}}
+        </ul>
+        <button type="submit" class="submit-btn">Delete selected files</button>
+
+        <script>
+          const deleteForm = document.querySelector("form#delete-form");
+          deleteForm.addEventListener("submit", (e) => {
+            const ok = confirm("are you sure?");
+            if (!ok) {
+              e.preventDefault();
+              return;
+            }
+          });
+
+          const directoriesCheckbox = document.querySelector(
+            'input[name="directories-first"]',
+          );
+          const sortSelect = document.querySelector('select[name="sort"]');
+
+          directoriesCheckbox.addEventListener("change", (e) => {
+            const params = new URLSearchParams(location.search);
+            if (e.target.checked) {
+              params.set("directoriesFirst", "");
+            } else {
+              params.delete("directoriesFirst");
+            }
+            location.search = params.toString();
+          });
+
+          sortSelect.addEventListener("change", (e) => {
+            const params = new URLSearchParams(location.search);
+            params.set("sort", e.target.value);
+            location.search = params.toString();
+          });
+
+          window.addEventListener("load", () => {
+            const params = new URLSearchParams(location.search);
+            if (params.has("directoriesFirst")) {
+              directoriesCheckbox.checked = true;
+            }
+
+            if (params.has("sort")) {
+              sortSelect.value = params.get("sort");
+            }
+          });
+        </script>
+      </form>
+    </div>
+  </body>
+</html>