gui completed, just urls

.gitignore

@@ -6,3 +6,5 @@ client/node_modules/
 
 # Ignore node_modules in the server folder
 server/node_modules/
+
+server/public/

client/links.json

@@ -9,7 +9,7 @@
 			"height": 45,
 			"x": 2635,
 			"y": 440,
-			"url": "adorability-fundementalism"
+			"url": "kawaii-aestethics-wholesome"
 		  },
 		  {
 			"id": "HistoryKawaii",
@@ -17,7 +17,7 @@
 			"height": 45,
 			"x": 2525,
 			"y": 593,
-			"url": "history-of-kawaii"
+			"url": "kawaii-history"
 		  },
 		  {
 			"id": "CuteFactor",
@@ -38,15 +38,15 @@
 					"height": 45,
 					"x": 4137,
 					"y": 447,
-					"url": "kawaii-asmr"
+					"url": "consumerism/kawaii-unboxing-consumerism"
 				},
 				{
-					"id": "Title",
+					"id": "compilations",
 					"width": 222,
 					"height": 41,
 					"x": 4400,
 					"y": 990,
-					"url": "kawaii-asmr"
+					"url": "consumerism/kawaii-unboxing-consumerism"
 					}
 			]
 		},
@@ -59,7 +59,7 @@
 						"height": 46,
 						"x": 5265,
 						"y": 500,
-						"url": "aspiring-wholesome"
+						"url": "mental-health"
 					}
 				]
 		},
@@ -85,7 +85,7 @@
 						"height": 62,
 						"x": 6821,
 						"y": 490,
-						"url": "aesthetical-unsettlement"
+						"url": "kawaii-aesthetic-creepy"
 					},
 					{
 						"id": "happycore-aesthetic",
@@ -138,7 +138,7 @@
 						"height": 43,
 						"x": 7670,
 						"y": 460,
-						"url": "FF91AF"
+						"url": "baker-miller-pink"
 					},
 					{
 						"id": "baker-miller-pink",
@@ -180,7 +180,7 @@
 						"height": 52,
 						"x": 3650,
 						"y": 1467,
-						"url": "kawaii-gamer-setup"
+						"url": "gaming"
 					}
 				]
 		},
@@ -193,7 +193,7 @@
 						"height": 60,
 						"x": 4966,
 						"y": 1514,
-						"url": "kawaii-NSFW"
+						"url": "kawaii-nsfw"
 					}
 				]
 		},
@@ -245,12 +245,12 @@
 						"height": 83,
 						"x": 7120,
 						"y": 1729,
-						"url": "kawaii-eyes"
+						"url": "kawaii-tanks"
 					}
 				]
 		},
 		{
-			"section_name": "klashnikitty",
+			"section_name": "kalashnikitty",
 				"links": [
 					{
 						"id": "Title",
@@ -258,7 +258,7 @@
 						"height": 77,
 						"x": 6989,
 						"y": 2481,
-						"url": "klashnikitty"
+						"url": "kalashnikitty"
 					}
 				]
 		},
@@ -271,7 +271,7 @@
 						"height": 100,
 						"x": 2713,
 						"y": 2915,
-						"url": "waifu"
+						"url": "waifus"
 					},
 					{
 						"id": "waifu-small",
@@ -279,7 +279,7 @@
 						"height": 40,
 						"x": 2434,
 						"y": 3022,
-						"url": "waifu-small"
+						"url": "waifu-small-url"
 					}
 
 				]
@@ -301,7 +301,7 @@
 						"height": 47,
 						"x": 3957,
 						"y": 2871,
-						"url": "greatest-troll"
+						"url": "greatest-troll-url"
 					}
 
 				]
@@ -315,7 +315,7 @@
 						"height": 63,
 						"x": 5791,
 						"y": 3156,
-						"url": "edgelord-meme"
+						"url": "kawayoku-memes"
 					}
 				]
 		},
@@ -328,7 +328,7 @@
 						"height": 65,
 						"x": 5682,
 						"y": 3773,
-						"url": "armed-neko"
+						"url": "anime/anime/armed-anime-girls"
 					}
 				]
 		},
@@ -341,20 +341,7 @@
 						"height": 55,
 						"x": 6693,
 						"y": 3726,
-						"url": "guns-fetishism"
-					}
-				]
-		},
-		{
-			"section_name": "guns-fetishism",
-				"links": [
-					{
-						"id": "Title",
-						"width": 411,
-						"height": 55,
-						"x": 6693,
-						"y": 3726,
-						"url": "guns-fetishism"
+						"url": "gun-fetishism"
 					}
 				]
 		},
@@ -372,7 +359,7 @@
 				]
 		},
 		{
-			"section_name": "eager-eggs",
+			"section_name": "easter-egg",
 				"links": [
 					{
 						"id": "Title",
@@ -380,7 +367,7 @@
 						"height": 353,
 						"x": 8093,
 						"y": 3837,
-						"url": "eager-eggs"
+						"url": "easter-egg"
 					}
 				]
 		},
@@ -393,20 +380,7 @@
 						"height": 63,
 						"x": 7221,
 						"y": 4250,
-						"url": "decorative-tactical"
-					}
-				]
-		},
-		{
-			"section_name": "azur-lane",
-				"links": [
-					{
-						"id": "Title",
-						"width": 323,
-						"height": 71,
-						"x": 5719,
-						"y": 4614,
-						"url": "azur-lane"
+						"url": "weebs-weapons"
 					}
 				]
 		},
@@ -427,7 +401,7 @@
 						"height": 22,
 						"x": 5950,
 						"y": 4731,
-						"url": "antropomorphic"
+						"url": "antropomorphic-url"
 					}
 				]
 		},
@@ -448,7 +422,7 @@
 						"height": 23,
 						"x": 4382,
 						"y": 5659,
-						"url": "comment-1"
+						"url": "comment-1-url"
 					},
 					{
 						"id": "comment-2",
@@ -456,7 +430,7 @@
 						"height": 23,
 						"x": 4639,
 						"y": 5736,
-						"url": "comment-2"
+						"url": "comment-2-url"
 					},
 					{
 						"id": "enlistment-tracker",
@@ -464,7 +438,7 @@
 						"height": 30,
 						"x": 4731,
 						"y": 5920,
-						"url": "enlistment-tracker"
+						"url": "enlistment-tracker-url"
 					}
 				]
 		},
@@ -477,7 +451,7 @@
 						"height": 67,
 						"x": 3600,
 						"y": 5020,
-						"url": "japanese-self-defence-force"
+						"url": "kawaii-tanks/Kawaii Tanks/cute-japan-military"
 					},
 					{
 						"id": "cute-aspects",
@@ -485,7 +459,7 @@
 						"height": 50,
 						"x": 3512,
 						"y": 5127,
-						"url": "cute-aspects"
+						"url": "cute-aspects-url"
 					}
 				]
 		},
@@ -511,7 +485,7 @@
 						"height": 207,
 						"x": 3504,
 						"y": 5915,
-						"url": "facts"
+						"url": "articles-and-books"
 					}
 				]
 		},
@@ -524,7 +498,7 @@
 						"height": 73,
 						"x": 4111,
 						"y": 3799,
-						"url": "armed-hentai"
+						"url": "anime/anime/armed-hentai-porn-nsfw-trigger"
 					}
 				]
 		},
@@ -545,7 +519,7 @@
 						"height": 59,
 						"x": 2576,
 						"y": 3865,
-						"url": "embracing-fantasies"
+						"url": "embracing-fantasies-url"
 					}
 				]
 		},
@@ -558,7 +532,7 @@
 						"height": 30,
 						"x": 8650,
 						"y": 4939,
-						"url": "marichka-art"
+						"url": "marichka-art-url"
 					},
 					{
 						"id": "TPB",
@@ -566,7 +540,7 @@
 						"height": 30,
 						"x": 8646,
 						"y": 4988,
-						"url": "TPB"
+						"url": "TPB-url"
 					},
 					{
 						"id": "patria",
@@ -574,7 +548,7 @@
 						"height": 27,
 						"x": 8652,
 						"y": 5035,
-						"url": "TPB"
+						"url": "TPB-url"
 					}
 				]
 		}

server/index.html

@@ -16,7 +16,7 @@
 	.index-cont{
 		display: flex;
 		flex-direction: column;
-		margin-bottom: 25px;
+		margin-bottom: 50px;
 		gap: 12.5px;
 	}
 
@@ -52,6 +52,9 @@
 		text-decoration: none;
 		filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.2));
 		align-items: center;
+		width: 100px;
+		height: 200px;
+		overflow: hidden;
 	}
 
 	.folder img{
@@ -72,15 +75,23 @@
 		cursor: pointer;
 		filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.2));
 		align-items: center;
+		width: 100px;
+		height: 200px;
+		max-width: 100px;
+		max-height: 200px;
+		overflow: hidden;
 	}
 
 	.file img {
-		width: 50px;
+		width: 75px;
 		height: auto;
 	}
 
 	.info-name {
 		padding-top: 12.5px;
+		flex-wrap: wrap;
+		max-width: 100px;
+		max-height: 50px;
 	}
   </style>
   <script>

server/server.js

@@ -52,9 +52,9 @@ app.get("*", (req, res) => {
 		if (isFileTypeToOpenInNewTab(fileExtension)) {
 			fileLocationEncoding = 'http://localhost:3000/' + convertedString
 			linkAttributes = `onclick="window.open('${fileLocationEncoding}', 'fileWindow', 'width=600,height=400');"`;
-			icon = getFileIcon(fileExtension)
+			icon = getFileIcon(fileExtension, decodeURIComponent(convertedString))
 			return `<div class='file' ${linkAttributes}>
-						<img src='/icons/${icon}'>
+						${icon}
 						<span class='info-name'>${file}</span>
 					</div>`;
 		} else {
@@ -69,7 +69,7 @@ app.get("*", (req, res) => {
 
     // Replace the placeholder with the dynamically generated content
     const finalHtml = indexContent.replace(dynamicContentPlaceholder, 
-		`<div class='index-cont'><span class='index-txt'>Index of ${req.path}</span>
+		`<div class='index-cont'><span class='index-txt'>Index of ${decodeURIComponent(req.path)}</span>
 			<a class='return-cont' href='${parentDirectory === '/' ? '/' : parentDirectory}'>
 				<img src='/icons/back.png'>
 				<span> Parent Directory </span>
@@ -94,6 +94,10 @@ app.get("*", (req, res) => {
 		const fileStream = fs.createReadStream(filePath);
 		res.set("Content-Type", "video/mp4");
 		fileStream.pipe(res);
+	} else if(fileExtension === ".docx") {
+		const fileStream = fs.createReadStream(filePath);
+		res.set("Content-Type", "application/vnd.openxmlformats-officedocument.wordprocessingml.document");
+		fileStream.pipe(res);
 	} else {
       // For other file types, set content type and send file.
       const contentType = getContentType(fileExtension);
@@ -104,18 +108,26 @@ app.get("*", (req, res) => {
 });
 
 // Set file icon
-function getFileIcon(fileExtension){
+function getFileIcon(fileExtension, filePath){
 	switch (fileExtension) {
 		case ".txt":
-			return "generic.gif";
+			return "<img src='/icons/generic.gif'>";
 		case ".png":
-			return "image2.gif";
+			return `<img src="${filePath}" alt="${path.basename(filePath)}" class="thumbnail" />`;
+		case ".jfif":
+		case ".jpeg":
+		case ".jpg":
+			return `<img src="${filePath}" alt="${path.basename(filePath)}" class="thumbnail" />`;
+		case ".gif":
+			return `<img src="${filePath}" alt="${path.basename(filePath)}" class="thumbnail" />`;
 		case ".pdf":
-			return "text.png"
+		case ".odt":
+		case ".docx":
+			return "<img src='/icons/text.png'>"
 		case ".mp4":
-			return "movie.gif"
+			return "<img src='/icons/movie.gif'>"
 		default:
-			return "unknown.gif";
+			return "<img src='/icons/unknown.gif'>";
 		}
 }
 
@@ -126,9 +138,20 @@ function getContentType(fileExtension) {
       return "text/plain";
     case ".png":
       return "image/png";
+	case ".jpg":
+	  return "image/jpg";
+	case ".jpeg":
+	  return "image/jpeg";
+	case ".jfif":
+	  return "image/jpeg";
+	case ".gif":
+	  return "image/gif";
 	case ".mp4":
 	  return "video/mp4";
-    // Add more content types as needed
+	case ".odt":
+	  return "application/vnd.oasis.opendocument.text"
+	case ".docx":
+	  return "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
     default:
       return "application/octet-stream";
   }
@@ -136,7 +159,7 @@ function getContentType(fileExtension) {
 
 // Function to check if the file type should open in a new window/tab
 function isFileTypeToOpenInNewTab(fileExtension) {
-	const supportedFileTypes = [".pdf", ".png", ".txt", ".mp4"]; // Add more file types as needed
+	const supportedFileTypes = [".pdf", ".png", ".txt", ".mp4", ".jpg", ".jfif", ".gif", ".jpeg", ".odt", ".docx"]; // Add more file types as needed
 	return supportedFileTypes.includes(fileExtension);
   }