gui completed, just urls

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);
   }