2 files changed, 137 insertions, 0 deletions
diff --git a/backend/static/index.html b/backend/static/index.html
new file mode 100644
index 0000000..afa1954
--- /dev/null
+++ b/backend/static/index.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <title></title>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <style>
+    body {
+      background-color: black;
+      color: white;
+    }
+
+    #container {
+      display: flex;
+      flex-wrap: wrap;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .dImg {
+      background-color: darkgray;
+      /* width: fit-content; */
+      width: 12rem;
+      padding: 10px;
+      border-radius: 20px;
+      margin-right: 25px;
+      margin-bottom: 25px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    @media all and (max-width: 960px) {
+      .dImg {
+        width: 9rem;
+      }
+    }
+
+    .dImg * {
+      margin: 5px;
+    }
+
+    .dImg p {
+      overflow-wrap: anywhere;
+    }
+
+    .dImg input[type='checkbox'] {
+      width: 20px;
+      height: 20px;
+      display: inline;
+    }
+
+    .dImg img {
+      border-radius: 30px;
+      aspect-ratio: 1 / 1;
+    }
+
+    .dImg label {
+      display: flex;
+      align-items: center;
+    }
+  </style>
+  <script src="index.js" defer></script>
+</head>
+
+<body>
+  <header>
+    <h2>Uploaded Images:</h2>
+    <button type="button" onclick="getFiles()">Reload</button>
+    <button type="button" onclick="selectAll()">Select all</button>
+    <button type="button" onclick="removeAllSel()">Remove selected</button>
+  </header><br>
+  <div id="container"></div>
+</body>
+
+</html>
diff --git a/backend/static/index.js b/backend/static/index.js
new file mode 100644
index 0000000..07f4c89
--- /dev/null
+++ b/backend/static/index.js
@@ -0,0 +1,59 @@
+const newDiv = `<!-- <div class="dImg"> -->
+      <p>$name</p><br>
+      <img src="upload/$name" alt="$name" width="120" height="120"/>
+      <button type="button" onclick="deleteFiles(['$name'])">Delete</button>
+      <button type="button" onclick="renameFile('$name')">Rename</button><br>
+      <label>
+        Select: 
+        <input type="checkbox" name="$name" />
+      </label>
+    <!-- </div> -->`
+
+function selectAll() {
+  for (const c of document.querySelectorAll("input[type='checkbox']")) {
+    c.checked = !c.checked
+  }
+}
+async function deleteFiles(names) {
+  if (!confirm("Are you sure about that file deleting thingy?")) return;
+  await fetch("/delete-files", {
+    method: "POST",
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify({ names }),
+  })
+  getFiles()
+}
+async function removeAllSel() {
+  const names = []
+  for (const c of [...document.querySelectorAll("input[type='checkbox']")].filter(i => i.checked)) {
+    names.push(c.name)
+  }
+  deleteFiles(names)
+}
+async function renameFile(on) {
+  const nn = prompt("What will be the new name of this beautiful picture?")
+  if (!nn) return;
+  await fetch("/rename-file", {
+    method: "POST",
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify({ nn, on }),
+  })
+  getFiles()
+}
+const cont = document.getElementById("container");
+async function getFiles() {
+  const files = await fetch("/files").then(res => res.json());
+  for (const d of document.querySelectorAll(".dImg")) d.remove()
+  for (const f of files) {
+    const div = document.createElement("div")
+    div.className = "dImg"
+    div.innerHTML = newDiv.replaceAll("$name", f);
+    cont.appendChild(div)
+  }
+}
+getFiles()
+