up

Paused

App Files Files Community

semuthitamku commited on Sep 6, 2025

Commit

5058376

verified ·

1 Parent(s): d7d2554

Create public/index.html

Browse files

Files changed (1) hide show

public/index.html +409 -0

public/index.html ADDED Viewed

	@@ -0,0 +1,409 @@

+<!doctype html>
+<html lang="id">
+<head>
+  <meta charset="utf-8" />
+  <title>File Manager</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <style>
+    body.theme-dark {
+      --bg:#0f172a; --panel:#111827; --panel-alt:#0b1221;
+      --muted:#94a3b8; --txt:#e5e7eb; --link:#60a5fa;
+      --pri:#22c55e; --danger:#ef4444; --warn:#f59e0b;
+      --border:#1f2937; --border2:#334155; --btn-bg:#1f2937;
+      --shadow: 0 4px 18px rgba(0,0,0,.25);
+    }
+    body.theme-light {
+      --bg:#f8fafc; --panel:#ffffff; --panel-alt:#f1f5f9;
+      --muted:#475569; --txt:#0f172a; --link:#2563eb;
+      --pri:#16a34a; --danger:#dc2626; --warn:#d97706;
+      --border:#e2e8f0; --border2:#cbd5e1; --btn-bg:#eef2f7;
+      --shadow: 0 8px 24px rgba(15,23,42,.08);
+    }
+    body { margin:0; font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',arial;
+      background:var(--bg); color:var(--txt); transition: background .15s, color .15s; }
+    header { padding:16px 20px; display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--border); }
+    header h1 { margin:0; font-size:18px; font-weight:600; }
+    .bread a { color: var(--link); text-decoration:none; }
+    .bread span.sep { margin: 0 6px; color: var(--muted); }
+    main { padding:18px 20px; max-width:1100px; margin:auto; }
+    .bar { display:flex; gap:8px; flex-wrap: wrap; margin-bottom:12px; }
+    .bar input[type="text"] { background:var(--panel-alt); color:var(--txt);
+      border:1px solid var(--border); border-radius:8px; padding:8px 10px; min-width: 220px; }
+    .btn { background:var(--btn-bg); color:var(--txt); border:1px solid var(--border2);
+      padding:8px 12px; border-radius:8px; cursor:pointer; }
+    .btn:hover { filter:brightness(1.06); }
+    .btn.pri { background:#064e3b; border-color:#065f46; }
+    .btn.danger { background:#7f1d1d; border-color:#991b1b; }
+    .btn.warn { background:#7c2d12; border-color:#9a3412; }
+    .ghost { border:1px dashed var(--border); padding:10px; border-radius:8px; color:var(--muted); }
+    table { width:100%; border-collapse: collapse; background:var(--panel); border-radius:12px; overflow:hidden; }
+    th, td { padding:10px 12px; border-bottom:1px solid var(--border); }
+    th { text-align:left; color:var(--muted); font-weight:500; background:var(--panel-alt); }
+    tbody tr:hover { background:var(--panel-alt); }
+    .name { display:flex; align-items:center; gap:10px; }
+    .name a { color: var(--txt); text-decoration:none; }
+    .muted { color: var(--muted); }
+    .right { text-align:right; }
+    .actions { display:flex; gap:6px; }
+    .chip { font-size:12px; color:#0f172a; background:#a7f3d0; padding:2px 8px; border-radius:999px; }
+    footer { color: var(--muted); text-align:center; padding:12px; font-size:12px; }
+    .flex-gap { display:flex; gap:8px; align-items:center; flex-wrap: wrap; }
+    .spacer { flex:1; }
+    .hidden { display:none; }
+    .note { font-size:12px; color:var(--muted); }
+    .checkbox { width:18px; height:18px; }
+    .icon { width:18px; text-align:center; }
+    .toast { position:fixed; right:16px; bottom:16px; background:var(--panel); border:1px solid var(--border2);
+      padding:10px 12px; border-radius:8px; color:var(--txt); box-shadow:var(--shadow); }
+  </style>
+</head>
+<body class="theme-dark">
+  <header>
+    <h1>📁 File Manager</h1>
+    <div class="bread" id="breadcrumb"></div>
+    <span class="spacer"></span>
+    <button class="btn" id="themeToggle" title="Toggle theme">🌙 Dark</button>
+    <span class="note">TMPDIR</span>
+  </header>
+  <main>
+    <div class="bar">
+      <input type="text" id="urlInput" placeholder="https://contoh.com/file.tgz" />
+      <input type="text" id="filenameInput" placeholder="Nama file (opsional)" />
+      <button class="btn pri" id="fetchBtn">Save dari URL</button>
+      <input type="file" id="fileInput" multiple />
+      <button class="btn" id="uploadBtn">Upload</button>
+      <button class="btn" id="newFolderBtn">Folder Baru</button>
+      <select class="btn" id="archiveFormat" title="Pilih format arsip">
+        <option value="zip">ZIP</option>
+        <option value="tar">TAR</option>
+        <option value="tgz">TAR.GZ</option>
+      </select>
+      <button class="btn warn" id="zipBtn">Archive yang dipilih</button>
+      <button class="btn danger" id="deleteSelectedBtn">Hapus yang dipilih</button>
+      <span class="spacer"></span>
+      <span class="note">Klik nama file untuk download</span>
+    </div>
+    <div id="emptyState" class="ghost hidden">Folder ini kosong.</div>
+    <table id="table">
+      <thead>
+        <tr>
+          <th style="width:36px;"><input type="checkbox" id="selectAll" class="checkbox" /></th>
+          <th>Nama</th>
+          <th style="width:140px;">Ukuran</th>
+          <th style="width:200px;">Diubah</th>
+          <th style="width:220px;">Aksi</th>
+        </tr>
+      </thead>
+      <tbody id="tbody"></tbody>
+    </table>
+    <footer>
+      Storage root: os.tmpdir() • Mode private (tanpa autentikasi)
+    </footer>
+  </main>
+  <div id="toast" class="toast hidden"></div>
+  <script>
+    const tbody = document.getElementById("tbody");
+    const breadcrumb = document.getElementById("breadcrumb");
+    const emptyState = document.getElementById("emptyState");
+    const selectAll = document.getElementById("selectAll");
+    const urlInput = document.getElementById("urlInput");
+    const filenameInput = document.getElementById("filenameInput");
+    const fetchBtn = document.getElementById("fetchBtn");
+    const fileInput = document.getElementById("fileInput");
+    const uploadBtn = document.getElementById("uploadBtn");
+    const newFolderBtn = document.getElementById("newFolderBtn");
+    const zipBtn = document.getElementById("zipBtn");
+    const deleteSelectedBtn = document.getElementById("deleteSelectedBtn");
+    const archiveFormat = document.getElementById("archiveFormat");
+    const themeToggle = document.getElementById("themeToggle");
+    const toast = document.getElementById("toast");
+    let currentPath = new URLSearchParams(location.search).get("path") || "";
+    // Theme
+    function applyTheme(t) {
+      document.body.classList.remove("theme-dark","theme-light");
+      if (t === "light") {
+        document.body.classList.add("theme-light");
+        themeToggle.textContent = "☀️ Light";
+      } else {
+        document.body.classList.add("theme-dark");
+        themeToggle.textContent = "🌙 Dark";
+      }
+    }
+    function initTheme() {
+      const saved = localStorage.getItem("theme");
+      if (saved) applyTheme(saved);
+      else {
+        const prefersLight = window.matchMedia && window.matchMedia("(prefers-color-scheme: light)").matches;
+        applyTheme(prefersLight ? "light" : "dark");
+      }
+    }
+    themeToggle.onclick = () => {
+      const nowDark = document.body.classList.contains("theme-dark");
+      const next = nowDark ? "light" : "dark";
+      applyTheme(next);
+      localStorage.setItem("theme", next);
+    };
+    initTheme();
+    function showToast(msg, ms = 2200) {
+      toast.textContent = msg;
+      toast.classList.remove("hidden");
+      setTimeout(() => toast.classList.add("hidden"), ms);
+    }
+    function fmtSize(bytes) {
+      if (bytes == null) return "-";
+      const units = ["B","KB","MB","GB","TB"];
+      let i=0, n=bytes;
+      while (n >= 1024 && i < units.length-1) { n/=1024; i++; }
+      return (Math.round(n*10)/10) + " " + units[i];
+    }
+    function fmtDate(ms) {
+      const d = new Date(ms);
+      return d.toLocaleString();
+    }
+    function setPath(rel) {
+      currentPath = rel || "";
+      const url = new URL(location.href);
+      if (currentPath) url.searchParams.set("path", currentPath);
+      else url.searchParams.delete("path");
+      history.replaceState(null, "", url);
+      load();
+    }
+    async function load() {
+      const res = await fetch(`/api/list?path=${encodeURIComponent(currentPath)}`);
+      const data = await res.json();
+      render(data);
+    }
+    function render(data) {
+      breadcrumb.innerHTML = "";
+      data.breadcrumb.forEach((c, idx) => {
+        const a = document.createElement("a");
+        a.href = `?path=${encodeURIComponent(c.path)}`;
+        a.textContent = c.name;
+        a.onclick = (e) => { e.preventDefault(); setPath(c.path); };
+        breadcrumb.appendChild(a);
+        if (idx < data.breadcrumb.length - 1) {
+          const sep = document.createElement("span");
+          sep.textContent = "›";
+          sep.className = "sep";
+          breadcrumb.appendChild(sep);
+        }
+      });
+      tbody.innerHTML = "";
+      if (!data.items.length) emptyState.classList.remove("hidden"); else emptyState.classList.add("hidden");
+      data.items.forEach(item => {
+        const tr = document.createElement("tr");
+        const tdSel = document.createElement("td");
+        const cb = document.createElement("input");
+        cb.type = "checkbox"; cb.className = "checkbox";
+        cb.dataset.name = item.name;
+        tdSel.appendChild(cb);
+        const tdName = document.createElement("td");
+        tdName.className = "name";
+        const icon = document.createElement("span");
+        icon.className = "icon";
+        icon.textContent = item.isDir ? "📂" : "📄";
+        const link = document.createElement("a");
+        link.href = "#";
+        link.textContent = item.name;
+        if (item.isDir) {
+          link.onclick = (e) => { e.preventDefault(); setPath(item.relPath); };
+        } else {
+          link.onclick = (e) => {
+            e.preventDefault();
+            window.location = `/api/download?path=${encodeURIComponent(item.relPath)}`;
+          };
+        }
+        tdName.append(icon, link);
+        if (!item.isDir && item.archFormat) {
+          const chip = document.createElement("span");
+          chip.className = "chip";
+          chip.textContent = item.archFormat === "zip" ? "ZIP" : (item.archFormat === "tar" ? "TAR" : "TGZ");
+          tdName.appendChild(chip);
+        }
+        const tdSize = document.createElement("td");
+        tdSize.className = "right muted";
+        tdSize.textContent = fmtSize(item.size);
+        const tdTime = document.createElement("td");
+        tdTime.className = "muted";
+        tdTime.textContent = fmtDate(item.mtime);
+        const tdAct = document.createElement("td");
+        const actions = document.createElement("div");
+        actions.className = "actions";
+        const renameBtn = document.createElement("button");
+        renameBtn.className = "btn";
+        renameBtn.textContent = "Rename";
+        renameBtn.onclick = async () => {
+          const newName = prompt("Nama baru:", item.name);
+          if (!newName || newName === item.name) return;
+          const res = await fetch("/api/rename", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ path: item.relPath, newName })
+          });
+          const j = await res.json();
+          if (!res.ok) return showToast(j.error || "Gagal rename");
+          showToast("Berhasil di-rename");
+          load();
+        };
+        const delBtn = document.createElement("button");
+        delBtn.className = "btn danger";
+        delBtn.textContent = "Hapus";
+        delBtn.onclick = async () => {
+          if (!confirm(`Hapus ${item.name}?`)) return;
+          const res = await fetch(`/api/entry?path=${encodeURIComponent(item.relPath)}`, { method: "DELETE" });
+          const j = await res.json();
+          if (!res.ok) return showToast(j.error || "Gagal hapus");
+          showToast("Berhasil dihapus");
+          load();
+        };
+        if (!item.isDir && item.archFormat) {
+          const unzipBtn = document.createElement("button");
+          unzipBtn.className = "btn warn";
+          unzipBtn.textContent = "Unarchive";
+          unzipBtn.onclick = async () => {
+            const defaultName = item.name.replace(/(\.tar\.gz|\.tgz|\.zip|\.tar)$/i, "");
+            const destDefault = `${currentPath ? currentPath + "/" : ""}${defaultName}`;
+            const dest = prompt("Extract ke folder (opsional):", destDefault);
+            const body = dest ? { zipPath: item.relPath, destDir: dest } : { zipPath: item.relPath };
+            const res = await fetch("/api/unarchive", {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify(body)
+            });
+            const j = await res.json();
+            if (!res.ok) return showToast(j.error || "Gagal unarchive");
+            showToast("Berhasil di-extract");
+            load();
+          };
+          actions.appendChild(unzipBtn);
+        }
+        actions.append(renameBtn, delBtn);
+        tdAct.appendChild(actions);
+        tr.append(tdSel, tdName, tdSize, tdTime, tdAct);
+        tbody.appendChild(tr);
+      });
+      selectAll.checked = false;
+    }
+    async function archiveSelected() {
+      const selected = [...document.querySelectorAll('#tbody input[type="checkbox"]:checked')].map(cb => cb.dataset.name);
+      if (!selected.length) return showToast("Tidak ada yang dipilih");
+      let name = prompt("Nama file arsip (opsional, tanpa ekstensi):", "");
+      if (name === null) return;
+      const format = archiveFormat.value; // zip | tar | tgz
+      const res = await fetch("/api/archive", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ path: currentPath, entries: selected, name, format })
+      });
+      const j = await res.json();
+      if (!res.ok) return showToast(j.error || "Gagal membuat arsip");
+      showToast("Arsip dibuat");
+      load();
+    }
+    async function deleteSelected() {
+      const selected = [...document.querySelectorAll('#tbody input[type="checkbox"]:checked')].map(cb => cb.dataset.name);
+      if (!selected.length) return showToast("Tidak ada yang dipilih");
+      if (!confirm(`Hapus ${selected.length} item?`)) return;
+      for (const name of selected) {
+        const rel = currentPath ? currentPath + "/" + name : name;
+        const res = await fetch(`/api/entry?path=${encodeURIComponent(rel)}`, { method: "DELETE" });
+        if (!res.ok) {
+          const j = await res.json().catch(() => ({}));
+          showToast(j.error || `Gagal hapus ${name}`);
+          return;
+        }
+      }
+      showToast("Berhasil dihapus");
+      load();
+    }
+    fetchBtn.onclick = async () => {
+      const url = urlInput.value.trim();
+      const filename = filenameInput.value.trim();
+      if (!url) return showToast("URL kosong");
+      const body = { url, destDir: currentPath };
+      if (filename) body.filename = filename;
+      const res = await fetch("/api/fetch-url", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body)
+      });
+      const j = await res.json();
+      if (!res.ok) return showToast(j.error || "Gagal download dari URL");
+      showToast("Berhasil diunduh ke folder ini");
+      urlInput.value = ""; filenameInput.value = "";
+      load();
+    };
+    uploadBtn.onclick = async () => {
+      const files = fileInput.files;
+      if (!files || !files.length) return showToast("Pilih file terlebih dahulu");
+      const fd = new FormData();
+      for (const f of files) fd.append("files", f);
+      const res = await fetch(`/api/upload?path=${encodeURIComponent(currentPath)}`, {
+        method: "POST",
+        body: fd
+      });
+      const j = await res.json();
+      if (!res.ok) return showToast(j.error || "Gagal upload");
+      showToast("Upload selesai");
+      fileInput.value = "";
+      load();
+    };
+    newFolderBtn.onclick = async () => {
+      const name = prompt("Nama folder baru:");
+      if (!name) return;
+      const res = await fetch("/api/folder", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ parent: currentPath, name })
+      });
+      const j = await res.json();
+      if (!res.ok) return showToast(j.error || "Gagal membuat folder");
+      showToast("Folder dibuat");
+      load();
+    };
+    zipBtn.onclick = archiveSelected;
+    deleteSelectedBtn.onclick = deleteSelected;
+    selectAll.onchange = () => {
+      document.querySelectorAll('#tbody input[type="checkbox"]').forEach(cb => cb.checked = selectAll.checked);
+    };
+    load();
+  </script>
+</body>
+</html>