diff --git a/web/public/css/general.css b/web/public/css/general.css
index 63e602e..acc0d66 100644
--- a/web/public/css/general.css
+++ b/web/public/css/general.css
@@ -60,7 +60,6 @@ main:hover {
box-sizing: border-box;
display: flex;
flex-direction: row;
- align-content: center;
justify-content: space-around;
}
diff --git a/web/public/css/tfm.css b/web/public/css/tfm.css
new file mode 100644
index 0000000..d5997c2
--- /dev/null
+++ b/web/public/css/tfm.css
@@ -0,0 +1,53 @@
+main {
+ position: relative;
+ height: 70vh;
+ max-width: 100%;
+}
+
+.contents-wrapper {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ justify-content: flex-start;
+ align-items: flex-start;
+ flex-wrap: wrap;
+ overflow-y: scroll;
+ overflow-x: hidden;
+}
+
+.item {
+ position: relative;
+ margin: 16px;
+ padding: 0;
+ width: 160px;
+ height: 160px;
+ border-radius: 20px;
+ background-image: url(/images/loader.gif);
+ background-size: cover;
+ background-position: center;
+ overflow: hidden;
+}
+
+.item .overlay {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background-color: #0000;
+}
+
+.item:hover .overlay {
+ background-color: #0002;
+}
+
+.item.selected .overlay {
+ background-color: #0004;
+}
+
+.thumb {
+ min-width: 100%;
+ min-height: 100%;
+}
diff --git a/web/public/js/tdbms.js b/web/public/js/tdbms.js
new file mode 100644
index 0000000..22218d3
--- /dev/null
+++ b/web/public/js/tdbms.js
@@ -0,0 +1,18 @@
+function tdb_query(trdb, trc, trb) {
+ output = null;
+ $.ajax({
+ url: "/TDBMS",
+ type: "POST",
+ contentType: "application/json",
+ data: `{"trdb":"${trdb}","trc":${trc},"trb":"${trb}"}`,
+ dataType: "json",
+ async: false,
+ success: function (resp) {
+ output = resp;
+ },
+ failure: function (err) {
+ alert(err);
+ }
+ });
+ return output;
+}
diff --git a/web/public/js/tfm.js b/web/public/js/tfm.js
new file mode 100644
index 0000000..56f4b65
--- /dev/null
+++ b/web/public/js/tfm.js
@@ -0,0 +1,39 @@
+$(window).on("load", function () {
+ sasa_load(-1);
+})
+
+$(document).keyup(function (e) {
+ if (e.key === "Escape") {
+ $(".selected").removeClass("selected");
+ }
+});
+
+$(document).on("click", ".item", function (e) {
+ let wasSelected = $(this).hasClass("selected");
+ if (!e.ctrlKey) {
+ $(".selected").removeClass("selected");
+ wasSelected = false;
+ }
+ if (wasSelected) {
+ $(this).removeClass("selected");
+ } else {
+ $(this).addClass("selected");
+ }
+});
+
+function sasa_load(id) {
+ resp = tdb_query("$TFM", 16, id < 0 ? "" : `${id}`);
+ if (resp == null) {
+ alert("Unauthorized, go to /auth and authorize");
+ return;
+ }
+ if (!resp.status) {
+ alert("Something went wrong");
+ return;
+ }
+ if (id < 0) {
+ resp.data.forEach((sasa) => {
+ $(".contents-wrapper").append(``);
+ });
+ }
+}
diff --git a/web/public/tfm.html b/web/public/tfm.html
new file mode 100644
index 0000000..b3179d0
--- /dev/null
+++ b/web/public/tfm.html
@@ -0,0 +1,38 @@
+
+
+
+
+
+ File Manager | Tanabata
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Tanabata File Manager
+
+
+
+
+
+
+