Move files

webroot/assets/filepage.css

@@ -0,0 +1,168 @@
+* {
+	font-family: 'Poppins', sans-serif;
+}
+
+body {
+    background-color: #1f1f1f;
+    color: #fff;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    overflow-x: hidden;
+    min-height: 100vh;
+}
+
+.container {
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 5px;
+}
+
+.container img {
+    width: 100%;
+    height: auto;
+}
+
+.content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background-color: #1B1B1B;
+    padding: 5%;
+    border-radius: 10px;
+    width: 90%;
+    max-width: 800px;
+}
+
+h2, .purple {
+    color: #3c076e;
+    text-shadow: 2px 2px 4px #000;
+}
+
+h3 {
+    color: #fff;
+    text-shadow: 1px 1px 2px #000;
+}
+
+button, .button {
+    display: inline-block;
+    margin: 4px;
+    padding: 8px 16px;
+    background-color: #3c076e;
+    color: #fff;
+    text-decoration: none;
+    border-radius: 5px;
+    font-size: 20px;
+    transition: background-color 0.3s;
+    cursor: pointer;
+    text-shadow: 1px 1px 2px #000;
+    border: 2px solid #3c076e;
+    transition: transform 0.3s;
+}
+
+button:hover, .button:hover {
+    background-color: #370664;
+    border-color: #370664;
+    transform: scale(1.08);
+}
+
+.button-container {
+    display: flex;
+    justify-content: center;
+    margin-top: 2%;
+    margin-bottom: 2%;
+}
+
+textarea {
+    background-color: #131313;
+    color: #fff;
+    border: 2px solid #3c076e;
+    border-radius: 5px;
+    padding: 8px;
+    font-size: 16px;
+    resize: none;
+    overflow: auto;
+    transition: border-color 0.3s ease;
+    height: auto;
+    max-height: 80vh;
+    min-height: 20vh;
+    width: 100%;
+}
+
+textarea:focus {
+    outline: none;
+}
+
+textarea:hover {
+    border-color: #370664;
+}
+
+@media only screen and (max-width: 600px) {
+    .content {
+        padding: 8%;
+        width: 100%;
+    }
+}
+
+@media only screen and (min-width: 601px) and (max-width: 1024px) {
+    .content {
+        padding: 6%;
+        width: 90%;
+    }
+}
+
+@media only screen and (min-width: 1025px) {
+    .content {
+        padding: 5%;
+        width: 80%;
+    }
+}
+
+#notification-container {
+	position: fixed;
+	bottom: 0;
+	right: 0;
+	z-index: 10000;
+	transition: all 0.5s ease-in-out;
+	max-width: 100%;
+}
+
+.notification {
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+	margin: 10px;
+	padding: 15px;
+	color: white;
+	background-color: #333;
+	border-radius: 10px;
+	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+	transition: all 0.5s ease-in-out;
+	min-width: 15vw;
+	min-height: 6.5vh;
+	max-width: 30vw;
+	height: auto;
+	box-sizing: border-box;
+}
+
+.notification div:first-child {
+	border-right: 1px solid white;
+	padding-right: 10px;
+	margin-right: 10px;
+}
+
+.notification i {
+	margin-right: 10px;
+}
+
+#notification-message {
+	text-align: center;
+	margin-left: auto;
+	margin-right: auto;
+}

webroot/assets/filepage.js

@@ -0,0 +1,112 @@
+document.addEventListener("DOMContentLoaded", function() {
+    var waitingText = document.getElementById("waiting-text");
+    var content = document.getElementById("content");
+    if (waitingText && content) {
+        window.onload = function() {
+            document.getElementById("waiting-text").style.display = "none";
+            document.getElementById("content").style.display = "block";
+        };
+    }
+});
+
+function copyToClipboard(text) {
+    var replacementText = "... Content too long to copy. Download the file to view the full content.";
+    var searchText = "... Preview too long. Download the file to view the full content.";
+    if (text.length === 50073 && text.endsWith(searchText)) {
+        text = text.replace(searchText, replacementText);
+    }
+    var textArea = document.createElement("textarea");
+    textArea.value = text;
+    document.body.appendChild(textArea);
+    textArea.select();
+    document.execCommand("copy");
+    document.body.removeChild(textArea);
+    var btn = document.getElementById("copy");
+    if (btn.innerText === "Copy") {
+        btn.innerText = "Copied";
+        setTimeout(function() {
+            btn.innerText = "Copy";
+        }, 3000);
+    }
+}
+
+function downloadFile(fileId, originalName, fileType) {
+    originalName = atob(originalName);
+    $.ajax({
+        url: 'https://files.upload.xytriza.com/' + fileId,
+        method: 'GET',
+        xhrFields: {
+            responseType: 'blob'
+        },
+        success: function (data) {
+            var blob = new Blob([data], {type: fileType});
+            var url = window.URL.createObjectURL(blob);
+            var a = document.createElement('a');
+            a.href = url;
+            a.download = originalName;
+            document.body.appendChild(a);
+            a.click();        
+            document.body.removeChild(a);
+            window.URL.revokeObjectURL(url);
+            showSuccess("File downloaded successfully")
+        },
+        error: function(xhr, status, error) {
+            console.error('Error downloading file:', error +  ' (' + status + ')');
+            showError('Error downloading file: ' + error +  ' (' + status + ')');
+        }
+    });
+}
+
+function showNotification(message, type) {
+    var notification = document.createElement('div');
+    notification.className = 'notification ' + type;
+    notification.style.display = 'flex';
+    notification.style.flexDirection = 'row';
+    notification.style.alignItems = 'center';
+
+    var iconDiv = document.createElement('div');
+    var icon = document.createElement('i');
+    icon.className = type === 'Success' ? 'fas fa-check' : 'fas fa-times';
+    icon.style.color = type === 'Success' ? '#4CAF50' : '#f44336';
+    iconDiv.appendChild(icon);
+    notification.appendChild(iconDiv);
+
+    var textDiv = document.createElement('div');
+    textDiv.id = 'notification-message';
+    textDiv.style.display = 'flex';
+    textDiv.style.flexDirection = 'column';
+
+    var titleNode = document.createElement('h4');
+    titleNode.style.margin = '0';
+    titleNode.appendChild(document.createTextNode(type));
+    textDiv.appendChild(titleNode);
+
+    var messageNode = document.createElement('div');
+    messageNode.style.margin = '0';
+    messageNode.appendChild(document.createTextNode(message));
+    textDiv.appendChild(messageNode);
+
+    notification.appendChild(textDiv);
+
+    var container = document.getElementById('notification-container');
+    container.appendChild(notification);
+    notification.style.transform = 'translateY(100%)';
+    setTimeout(function() {
+        notification.style.transform = 'translateY(0)';
+    }, 100);
+
+    setTimeout(function() {
+        notification.style.transform = 'translateY(100%)';
+        setTimeout(function() {
+            container.removeChild(notification);
+        }, 500);
+    }, 5000);
+}
+
+function showSuccess(message) {
+    showNotification(message, 'Success');
+}
+
+function showError(message) {
+    showNotification(message, 'Error');
+}