Update index.html

index.html

@@ -149,125 +149,137 @@
 </div>
 
 <script>
+  function showTab(id) {
+    document.querySelectorAll(".tab").forEach(tab => tab.classList.remove("active"));
+    document.querySelectorAll("nav button").forEach(btn => btn.classList.remove("active"));
+    document.getElementById(id).classList.add("active");
+    document.getElementById("tab-" + id).classList.add("active");
+
+    if (id === "filemanager") refreshFileList();
+  }
+
   function saveSetup() {
-  const data = {
-    username: document.getElementById("username").value,
-    password: document.getElementById("password").value,
-    startcmd: document.getElementById("startcmd").value
-  };
+    const data = {
+      username: document.getElementById("username").value,
+      password: document.getElementById("password").value,
+      startcmd: document.getElementById("startcmd").value
+    };
 
-  fetch("/setup", {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify(data)
-  }).then(res => res.json())
-    .then(res => alert("Saved!"))
-    .catch(err => alert("Error saving setup."));
-}
+    fetch("/setup", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(data)
+    }).then(res => res.json())
+      .then(res => alert("Saved!"))
+      .catch(err => alert("Error saving setup."));
+  }
 
-function startConsole() {
-  fetch("/console/start", { method: "POST" })
-    .then(res => res.json())
-    .then(data => {
-      document.getElementById("consoleOutput").value += ">>> Console started\n";
-    });
-}
+  function startConsole() {
+    fetch("/console/start", { method: "POST" })
+      .then(res => res.json())
+      .then(data => {
+        document.getElementById("output").textContent += ">>> Console started\n";
+      });
+  }
 
-function stopConsole() {
-  fetch("/console/stop", { method: "POST" })
-    .then(res => res.json())
-    .then(data => {
-      document.getElementById("consoleOutput").value += ">>> Console stopped\n";
-    });
-}
+  function stopConsole() {
+    fetch("/console/stop", { method: "POST" })
+      .then(res => res.json())
+      .then(data => {
+        document.getElementById("output").textContent += ">>> Console stopped\n";
+      });
+  }
 
-function sendInput() {
-  const input = document.getElementById("consoleInput").value;
-  fetch("/console/input", {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ input })
-  })
-    .then(res => res.json())
-    .then(data => {
-      document.getElementById("consoleOutput").value += data.output + "\n";
-      document.getElementById("consoleInput").value = "";
-    });
-}
+  function sendInput() {
+    const input = document.getElementById("consoleInput").value;
+    fetch("/console/input", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ input })
+    })
+      .then(res => res.json())
+      .then(data => {
+        document.getElementById("output").textContent += data.output + "\n";
+        document.getElementById("consoleInput").value = "";
+      });
+  }
 
-function refreshFileList() {
-  fetch("/files")
-    .then(res => res.json())
-    .then(files => {
-      const list = document.getElementById("fileList");
-      list.innerHTML = "";
-      files.forEach(name => {
-        const li = document.createElement("li");
-        li.textContent = name;
-        list.appendChild(li);
+  function refreshFileList() {
+    fetch("/files")
+      .then(res => res.json())
+      .then(files => {
+        const list = document.getElementById("fileList");
+        list.innerHTML = "";
+        files.forEach(name => {
+          const entry = document.createElement("div");
+          entry.className = "file-entry";
+          entry.textContent = name;
+          list.appendChild(entry);
+        });
       });
-    });
-}
+  }
 
-function createFile() {
-  const name = prompt("File name:");
-  if (!name) return;
-  fetch("/file/create", {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ name })
-  }).then(() => refreshFileList());
-}
+  function createFile() {
+    const name = prompt("File name:");
+    if (!name) return;
+    fetch("/file/create", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ name })
+    }).then(() => refreshFileList());
+  }
 
-function createFolder() {
-  const name = prompt("Folder name:");
-  if (!name) return;
-  fetch("/folder/create", {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ name })
-  }).then(() => refreshFileList());
-}
+  function createFolder() {
+    const name = prompt("Folder name:");
+    if (!name) return;
+    fetch("/folder/create", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ name })
+    }).then(() => refreshFileList());
+  }
 
-function deleteItem() {
-  const name = prompt("File/Folder name to delete:");
-  if (!name) return;
-  fetch("/delete", {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ name })
-  }).then(() => refreshFileList());
-}
+  function deleteItem() {
+    const name = prompt("File/Folder name to delete:");
+    if (!name) return;
+    fetch("/delete", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ name })
+    }).then(() => refreshFileList());
+  }
 
-function renameItem() {
-  const oldName = prompt("Old name:");
-  const newName = prompt("New name:");
-  if (!oldName || !newName) return;
-  fetch("/rename", {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ old_name: oldName, new_name: newName })
-  }).then(() => refreshFileList());
-}
+  function renameItem() {
+    const oldName = prompt("Old name:");
+    const newName = prompt("New name:");
+    if (!oldName || !newName) return;
+    fetch("/rename", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ old_name: oldName, new_name: newName })
+    }).then(() => refreshFileList());
+  }
 
-function uploadFile() {
-  const fileInput = document.getElementById("uploadFile");
-  const file = fileInput.files[0];
-  const formData = new FormData();
-  formData.append("file", file);
+  function uploadFile() {
+    const fileInput = document.getElementById("uploadFile");
+    const file = fileInput.files[0];
+    if (!file) return;
+    const formData = new FormData();
+    formData.append("file", file);
 
-  fetch("/upload", {
-    method: "POST",
-    body: formData
-  }).then(() => {
-    alert("Uploaded!");
-    refreshFileList();
-    fileInput.value = "";
-  });
-}
+    fetch("/upload", {
+      method: "POST",
+      body: formData
+    }).then(() => {
+      alert("Uploaded!");
+      refreshFileList();
+      fileInput.value = "";
+    });
+  }
 
-window.onload = refreshFileList;
+  window.onload = () => {
+    refreshFileList();
+  };
 </script>
-
 </body>
 </html>