Embed resources into templates

res/include/img/spinner.svg

@@ -0,0 +1,33 @@
+<svg version="1.1"
+	class="svg-loader"
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	x="0px"
+	y="0px"
+	viewBox="0 0 80 80"
+	xml:space="preserve">
+	<path
+		fill="#D43B11"
+		d="M10,40c0,0,0-0.4,0-1.1c0-0.3,0-0.8,0-1.3c0-0.3,0-0.5,0-0.8c0-0.3,0.1-0.6,0.1-0.9c0.1-0.6,0.1-1.4,0.2-2.1
+		c0.2-0.8,0.3-1.6,0.5-2.5c0.2-0.9,0.6-1.8,0.8-2.8c0.3-1,0.8-1.9,1.2-3c0.5-1,1.1-2,1.7-3.1c0.7-1,1.4-2.1,2.2-3.1
+		c1.6-2.1,3.7-3.9,6-5.6c2.3-1.7,5-3,7.9-4.1c0.7-0.2,1.5-0.4,2.2-0.7c0.7-0.3,1.5-0.3,2.3-0.5c0.8-0.2,1.5-0.3,2.3-0.4l1.2-0.1
+		l0.6-0.1l0.3,0l0.1,0l0.1,0l0,0c0.1,0-0.1,0,0.1,0c1.5,0,2.9-0.1,4.5,0.2c0.8,0.1,1.6,0.1,2.4,0.3c0.8,0.2,1.5,0.3,2.3,0.5
+		c3,0.8,5.9,2,8.5,3.6c2.6,1.6,4.9,3.4,6.8,5.4c1,1,1.8,2.1,2.7,3.1c0.8,1.1,1.5,2.1,2.1,3.2c0.6,1.1,1.2,2.1,1.6,3.1
+		c0.4,1,0.9,2,1.2,3c0.3,1,0.6,1.9,0.8,2.7c0.2,0.9,0.3,1.6,0.5,2.4c0.1,0.4,0.1,0.7,0.2,1c0,0.3,0.1,0.6,0.1,0.9
+		c0.1,0.6,0.1,1,0.1,1.4C74,39.6,74,40,74,40c0.2,2.2-1.5,4.1-3.7,4.3s-4.1-1.5-4.3-3.7c0-0.1,0-0.2,0-0.3l0-0.4c0,0,0-0.3,0-0.9
+		c0-0.3,0-0.7,0-1.1c0-0.2,0-0.5,0-0.7c0-0.2-0.1-0.5-0.1-0.8c-0.1-0.6-0.1-1.2-0.2-1.9c-0.1-0.7-0.3-1.4-0.4-2.2
+		c-0.2-0.8-0.5-1.6-0.7-2.4c-0.3-0.8-0.7-1.7-1.1-2.6c-0.5-0.9-0.9-1.8-1.5-2.7c-0.6-0.9-1.2-1.8-1.9-2.7c-1.4-1.8-3.2-3.4-5.2-4.9
+		c-2-1.5-4.4-2.7-6.9-3.6c-0.6-0.2-1.3-0.4-1.9-0.6c-0.7-0.2-1.3-0.3-1.9-0.4c-1.2-0.3-2.8-0.4-4.2-0.5l-2,0c-0.7,0-1.4,0.1-2.1,0.1
+		c-0.7,0.1-1.4,0.1-2,0.3c-0.7,0.1-1.3,0.3-2,0.4c-2.6,0.7-5.2,1.7-7.5,3.1c-2.2,1.4-4.3,2.9-6,4.7c-0.9,0.8-1.6,1.8-2.4,2.7
+		c-0.7,0.9-1.3,1.9-1.9,2.8c-0.5,1-1,1.9-1.4,2.8c-0.4,0.9-0.8,1.8-1,2.6c-0.3,0.9-0.5,1.6-0.7,2.4c-0.2,0.7-0.3,1.4-0.4,2.1
+		c-0.1,0.3-0.1,0.6-0.2,0.9c0,0.3-0.1,0.6-0.1,0.8c0,0.5-0.1,0.9-0.1,1.3C10,39.6,10,40,10,40z">
+		<animateTransform
+			attributeType="xml"
+			attributeName="transform"
+			type="rotate"
+			from="0 40 40"
+			to="360 40 40"
+			dur="0.6s"
+			repeatCount="indefinite"/>
+	</path>
+</svg>

res/include/script/ListNavigator.js

@@ -182,7 +182,7 @@ var ListNavigator = {
 		btnDownloadList.setAttribute("onClick", "Toolbar.downloadList();");
 
 		var btnDownloadListImg = document.createElement("img");
-		btnDownloadListImg.setAttribute("src", "/res/img/floppy_small.png");
+		btnDownloadListImg.setAttribute("src", "{{template `floppy_small.png`}}");
 		btnDownloadListImg.setAttribute("alt", "Download List");
 
 		var btnDownloadListText = document.createElement("span");
@@ -199,7 +199,7 @@ var ListNavigator = {
 		btnShuffle.setAttribute("onClick", "ListNavigator.toggleShuffle();");
 
 		var btnShuffleImg = document.createElement("img");
-		btnShuffleImg.setAttribute("src", "/res/img/shuffle_small.png");
+		btnShuffleImg.setAttribute("src", "{{template `shuffle_small.png`}}");
 		btnShuffleImg.setAttribute("alt", "Shuffle playback order");
 
 		var btnShuffleText = document.createElement("span");

res/include/script/compiled/home.js

@@ -0,0 +1,385 @@
+var FinishedUpload = /** @class */ (function () {
+    function FinishedUpload() {
+    }
+    return FinishedUpload;
+}());
+var uploader = null;
+var finishedUploads = new Array();
+var totalUploads = 0;
+var queueDiv = document.getElementById("uploads_queue");
+var UploadProgressBar = /** @class */ (function () {
+    function UploadProgressBar(file) {
+        this.file = file;
+        this.name = file.name;
+        this.queueNum = totalUploads;
+        this.uploadDiv = document.createElement("a");
+        totalUploads++;
+        this.uploadDiv.classList.add("file_button");
+        this.uploadDiv.style.opacity = "0";
+        this.uploadDiv.innerText = "Queued\n" + this.file.name;
+        queueDiv.appendChild(this.uploadDiv);
+        // Browsers don't render the transition if the opacity is set and
+        // updated in the same frame. So we have to wait a frame (or more)
+        // before changing the opacity to make sure the transition triggers
+        var d = this.uploadDiv; // `this` stops working after constructor ends
+        window.setTimeout(function () { d.style.opacity = "1"; }, 100);
+    }
+    UploadProgressBar.prototype.onProgress = function (progress) {
+        this.uploadDiv.innerText = "Uploading... " + Math.round(progress * 1000) / 10 + "%\n" + this.file.name;
+        this.uploadDiv.style.background = 'linear-gradient('
+            + 'to right, '
+            + 'var(--file_background_color) 0%, '
+            + 'var(--highlight_color) ' + ((progress * 100)) + '%, '
+            + 'var(--file_background_color) ' + ((progress * 100) + 1) + '%)';
+    };
+    UploadProgressBar.prototype.onFinished = function (id) {
+        finishedUploads[this.queueNum] = {
+            id: id,
+            name: this.file.name
+        };
+        this.uploadDiv.style.background = 'var(--file_background_color)';
+        this.uploadDiv.href = '/u/' + id;
+        this.uploadDiv.target = "_blank";
+        var fileImg = document.createElement("img");
+        fileImg.src = apiEndpoint + '/file/' + id + '/thumbnail';
+        fileImg.alt = this.file.name;
+        var linkSpan = document.createElement("span");
+        linkSpan.style.color = "var(--highlight_color)";
+        linkSpan.innerText = window.location.hostname + "/u/" + id;
+        this.uploadDiv.innerHTML = ""; // Remove uploading progress
+        this.uploadDiv.appendChild(fileImg);
+        this.uploadDiv.appendChild(document.createTextNode(this.file.name));
+        this.uploadDiv.appendChild(document.createElement("br"));
+        this.uploadDiv.appendChild(linkSpan);
+    };
+    UploadProgressBar.prototype.onFailure = function (error) {
+        this.uploadDiv.innerHTML = ""; // Remove uploading progress
+        this.uploadDiv.style.background = 'var(--danger_color)';
+        this.uploadDiv.appendChild(document.createTextNode(this.file.name));
+        this.uploadDiv.appendChild(document.createElement("br"));
+        this.uploadDiv.appendChild(document.createTextNode("Upload failed after three tries:"));
+        this.uploadDiv.appendChild(document.createElement("br"));
+        this.uploadDiv.appendChild(document.createTextNode(error));
+    };
+    return UploadProgressBar;
+}());
+function handleUploads(files) {
+    if (uploader === null) {
+        uploader = new UploadManager();
+    }
+    for (var i = 0; i < files.length; i++) {
+        uploader.uploadFile(new UploadProgressBar(files.item(i)));
+    }
+}
+// List creation
+function createList(title, anonymous) {
+    if (uploader.uploading()) {
+        var cont = confirm("Some files have not finished uploading yet. Creating a list now " +
+            "will exclude those files.\n\nContinue?");
+        if (!cont) {
+            return;
+        }
+    }
+    var postData = {
+        "title": title,
+        "anonymous": anonymous,
+        "files": new Array()
+    };
+    for (var i = 0; i < finishedUploads.length; i++) {
+        postData.files.push({
+            "id": finishedUploads[i].id
+        });
+    }
+    var xhr = new XMLHttpRequest();
+    xhr.open("POST", apiEndpoint + "/list");
+    xhr.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
+    xhr.onreadystatechange = function () {
+        if (xhr.readyState !== 4) {
+            return;
+        }
+        var resp = JSON.parse(xhr.response);
+        if (xhr.status < 400) {
+            // Request is a success
+            var div = document.createElement("div");
+            div.className = "file_button";
+            div.innerHTML = '<img src="' + apiEndpoint + '/list/' + resp.id + '/thumbnail"/>'
+                + "List creation finished!<br/>"
+                + title + "<br/>"
+                + '<a href="/l/' + resp.id + '" target="_blank">' + window.location.hostname + '/l/' + resp.id + '</a>';
+            document.getElementById("uploads_queue").appendChild(div);
+            window.open('/l/' + resp.id, '_blank');
+        }
+        else {
+            console.log("status: " + xhr.status + " response: " + xhr.response);
+            var div = document.createElement("div");
+            div.className = "file_button";
+            div.innerHTML = "List creation failed<br/>"
+                + "The server responded with:<br/>"
+                + resp.message;
+            document.getElementById("uploads_queue").append(div);
+        }
+    };
+    xhr.send(JSON.stringify(postData));
+}
+// Form upload handlers
+// Relay click event to hidden file field
+document.getElementById("select_file_button").onclick = function () {
+    document.getElementById("file_input_field").click();
+};
+document.getElementById("file_input_field").onchange = function (evt) {
+    handleUploads(evt.target.files);
+    // This resets the file input field
+    document.getElementById("file_input_field").nodeValue = "";
+};
+/*
+ * Drag 'n Drop upload handlers
+ */
+document.ondragover = function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+};
+document.ondragenter = function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+};
+document.addEventListener('drop', function (e) {
+    if (e.dataTransfer && e.dataTransfer.files.length > 0) {
+        e.preventDefault();
+        e.stopPropagation();
+        handleUploads(e.dataTransfer.files);
+    }
+});
+function copyText(text) {
+    // Create a textarea to copy the text from
+    var ta = document.createElement("textarea");
+    ta.setAttribute("readonly", "readonly");
+    ta.style.position = "absolute";
+    ta.style.left = "-9999px";
+    ta.value = text; // Put the text in the textarea
+    // Add the textarea to the DOM so it can be seleted by the user
+    document.body.appendChild(ta);
+    ta.select(); // Select the contents of the textarea
+    var success = document.execCommand("copy"); // Copy the selected text
+    document.body.removeChild(ta); // Remove the textarea
+    return success;
+}
+// Create list button
+document.getElementById("btn_create_list").addEventListener("click", function (evt) {
+    var title = prompt("You are creating a list containing " + finishedUploads.length + " files.\n"
+        + "What do you want to call it?", "My New Album");
+    if (title === null) {
+        return;
+    }
+    createList(title, false);
+});
+var btnCopyLinks = document.getElementById("btn_copy_links");
+btnCopyLinks.addEventListener("click", function () {
+    var text = "";
+    // Add the text to the textarea
+    for (var i = 0; i < finishedUploads.length; i++) {
+        // Example: https://pixeldrain.com/u/abcd1234: Some_file.png
+        text += window.location.protocol + "//" + window.location.hostname + "/u/" + finishedUploads[i].id +
+            " " + finishedUploads[i].name + "\n";
+    }
+    var defaultButtonText = btnCopyLinks.innerHTML;
+    // Copy the selected text
+    if (copyText(text)) {
+        btnCopyLinks.classList.add("button_highlight");
+        btnCopyLinks.innerHTML = "Links copied to clipboard!";
+        // Return to normal
+        setTimeout(function () {
+            btnCopyLinks.innerHTML = defaultButtonText;
+            btnCopyLinks.classList.remove("button_highlight");
+        }, 60000);
+    }
+    else {
+        btnCopyLinks.classList.add("button_red");
+        btnCopyLinks.innerHTML = "Copying links failed";
+        setTimeout(function () {
+            btnCopyLinks.innerHTML = defaultButtonText;
+            btnCopyLinks.classList.remove("button_red");
+        }, 60000);
+    }
+});
+var btnCopyBBCode = document.getElementById("btn_copy_bbcode");
+btnCopyBBCode.addEventListener("click", function () {
+    var text = "";
+    // Add the text to the textarea
+    for (var i = 0; i < finishedUploads.length; i++) {
+        // Example: [url=https://pixeldrain.com/u/abcd1234]Some_file.png[/url]
+        text += "[url=" + window.location.protocol + "//" + window.location.hostname +
+            "/u/" + finishedUploads[i].id + "]" +
+            finishedUploads[i].name + "[/url]\n";
+    }
+    var defaultButtonText = btnCopyBBCode.innerHTML;
+    // Copy the selected text
+    if (copyText(text)) {
+        btnCopyBBCode.classList.add("button_highlight");
+        btnCopyBBCode.innerHTML = "BBCode copied to clipboard!";
+        // Return to normal
+        setTimeout(function () {
+            btnCopyBBCode.innerHTML = defaultButtonText;
+            btnCopyBBCode.classList.remove("button_highlight");
+        }, 60000);
+    }
+    else {
+        btnCopyBBCode.classList.add("button_red");
+        btnCopyBBCode.innerHTML = "Copying links failed";
+        setTimeout(function () {
+            btnCopyBBCode.innerHTML = defaultButtonText;
+            btnCopyBBCode.classList.remove("button_red");
+        }, 60000);
+    }
+});
+var Cookie;
+(function (Cookie) {
+    function read(name) {
+        var result = new RegExp('(?:^|; )' + encodeURIComponent(name) + '=([^;]*)').exec(document.cookie);
+        return result ? result[1] : null;
+    }
+    Cookie.read = read;
+    function write(name, value, days) {
+        if (!days) {
+            days = 365 * 20;
+        }
+        var date = new Date();
+        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+        var expires = "; expires=" + date.toUTCString();
+        document.cookie = name + "=" + value + expires + "; path=/";
+    }
+    Cookie.write = write;
+    function remove(name) {
+        write(name, "", -1);
+    }
+    Cookie.remove = remove;
+})(Cookie || (Cookie = {}));
+var UploadManager = /** @class */ (function () {
+    function UploadManager() {
+        this.uploadQueue = new Array();
+        this.uploadThreads = new Array();
+        this.maxThreads = 3;
+    }
+    UploadManager.prototype.uploadFile = function (file) {
+        console.debug("Adding upload to queue");
+        this.uploadQueue.push(file);
+        if (this.uploadThreads.length < this.maxThreads) {
+            console.debug("Starting upload thread");
+            var thread_1 = new UploadWorker(this);
+            this.uploadThreads.push(thread_1);
+            setTimeout(function () { thread_1.start(); }, 0); // Start a new upload thread
+        }
+        else {
+            for (var i = 0; i < this.uploadThreads.length; i++) {
+                this.uploadThreads[i].start();
+            }
+        }
+    };
+    UploadManager.prototype.uploading = function () {
+        for (var i = 0; i < this.uploadThreads.length; i++) {
+            if (this.uploadThreads[i].isUploading()) {
+                return true;
+            }
+        }
+        return false;
+    };
+    UploadManager.prototype.grabFile = function () {
+        if (this.uploadQueue.length > 0) {
+            return this.uploadQueue.shift();
+        }
+        else {
+            return undefined;
+        }
+    };
+    return UploadManager;
+}());
+var UploadWorker = /** @class */ (function () {
+    function UploadWorker(manager) {
+        this.tries = 0;
+        this.uploading = false;
+        this.manager = manager;
+    }
+    UploadWorker.prototype.isUploading = function () { return this.uploading; };
+    UploadWorker.prototype.start = function () {
+        if (!this.uploading) {
+            this.newFile();
+        }
+    };
+    UploadWorker.prototype.newFile = function () {
+        var file = this.manager.grabFile();
+        if (file === undefined) { // No more files in the queue. We're finished
+            this.uploading = false;
+            console.debug("No files left in queue");
+            return; // Stop the thread
+        }
+        this.uploading = true;
+        this.tries = 0;
+        this.upload(file);
+    };
+    UploadWorker.prototype.upload = function (file) {
+        console.debug("Starting upload of " + file.name);
+        var that = this; // jquery changes the definiton of "this"
+        var formData = new FormData();
+        formData.append("name", file.name);
+        formData.append('file', file.file);
+        var xhr = new XMLHttpRequest();
+        xhr.open("POST", apiEndpoint + "/file");
+        xhr.timeout = 21600000; // 6 hours, to account for slow connections
+        // Update progess bar on progress
+        xhr.upload.addEventListener("progress", function (evt) {
+            if (evt.lengthComputable) {
+                file.onProgress(evt.loaded / evt.total);
+            }
+        });
+        xhr.onreadystatechange = function () {
+            if (xhr.readyState !== 4) {
+                return;
+            }
+            console.log("status: " + xhr.status);
+            if (xhr.status >= 100 && xhr.status < 400) {
+                var resp = JSON.parse(xhr.response);
+                // Request is a success
+                file.onFinished(resp.id);
+                that.setHistoryCookie(resp.id);
+                that.newFile(); // Continue uploading on this thread
+            }
+            else {
+                var value, message;
+                if (xhr.status >= 400) {
+                    var resp = JSON.parse(xhr.response);
+                    value = resp.value;
+                    message = resp.message;
+                }
+                console.log("Upload error. status: " + xhr.status + " response: " + xhr.response);
+                if (that.tries === 3) {
+                    file.onFailure(value, message);
+                    setTimeout(function () { that.newFile(); }, 2000); // Try to continue
+                    return; // Upload failed
+                }
+                // Try again
+                that.tries++;
+                setTimeout(function () { that.upload(file); }, that.tries * 5000);
+            }
+        };
+        xhr.send(formData);
+    };
+    UploadWorker.prototype.setHistoryCookie = function (id) {
+        // Make sure the user is not logged in, for privacy. This keeps the
+        // files uploaded while logged in and anonymously uploaded files
+        // separated
+        if (Cookie.read("pd_auth_key") !== null) {
+            return;
+        }
+        var uc = Cookie.read("pduploads");
+        // First upload in this browser
+        if (uc === null) {
+            Cookie.write("pduploads", id + ".", undefined);
+            return;
+        }
+        if (uc.length > 2000) {
+            // Cookie is becoming too long, drop the oldest two files
+            uc = uc.substring(uc.indexOf(".") + 1).substring(uc.indexOf(".") + 1);
+        }
+        Cookie.write("pduploads", uc + id + ".", undefined);
+    };
+    return UploadWorker;
+}());

res/include/style/layout.css

@@ -10,44 +10,29 @@
 /* Fonts */
 
 @font-face {
-	font-family: 'Ubuntu';
+	font-family: 'default';
+	font-display: fallback;
 	font-style: normal;
-	font-weight: 400;
-	font-display: fallback;
-    text-rendering: optimizeLegibility;
+	font-weight: normal;
+	text-rendering: optimizeLegibility;
 	src:
-		local('Ubuntu'),
-		local('Ubuntu Regular'),
-		local('Ubuntu, Regular'),
-		local('Ubuntu-Regular'),
-		url(/res/misc/Ubuntu-R.ttf) format('truetype');
+		local('Cantarell'),
+		local('Cantarell Regular'),
+		local('Cantarell, Regular'),
+		local('Cantarell-Regular'),
+		url("/res/misc/Cantarell-Regular.otf") format("opentype");
 }
 @font-face {
-	font-family: 'Lato Thin';
+	font-family: 'light';
 	font-display: fallback;
-    font-style: normal;
-    font-weight: normal;
-    text-rendering: optimizeLegibility;
+	font-style: normal;
+	font-weight: normal;
+	text-rendering: optimizeLegibility;
 	src:
-		local('Lato Thin'),
-		local('Lato, Thin'),
-		local('Lato-Thin'),
-		local('Lato Hairline'),
-		local('Lato, Hairline'),
-		local('Lato-Hairline'),
-		url(/res/misc/LatoLatin-Thin.ttf) format('truetype');
-}
-@font-face {
-	font-family: 'Lato';
-	font-display: fallback;
-    font-style: normal;
-    font-weight: normal;
-    text-rendering: optimizeLegibility;
-	src:
-		local('Lato Regular'),
-		local('Lato, Regular'),
-		local('Lato-Regular'),
-		url(/res/misc/Lato-Regular.ttf) format('truetype');
+		local('Cantarell Light'),
+		local('Cantarell, Light'),
+		local('Cantarell-Light'),
+		url("/res/misc/Cantarell-Light.otf") format("opentype");
 }
 
 /* Page rendering configuration */
@@ -58,7 +43,7 @@ body{
 	background-color: #0d0d0d; /* Fallback */
 	background-color: var(--body_color);
 	background-repeat: repeat;
-	font-family: 'Ubuntu';
+	font-family: "default";
 	margin: 0;
 	line-height: 1.5em;
 	color: #bfbfbf; /* Fallback */
@@ -174,11 +159,10 @@ body{
 	color: #bfbfbf; /* Fallback */
 	color: var(--text_color);
 	text-align: center;
-	padding: 4px 6px;
+	padding: 6px 6px;
 	margin: 0.3em 15px 0.3em 15px;
-	font-family: "Lato Thin", sans-serif;
-	font-weight: bold;
-	font-size: 1.5em;
+	font-family: "light";
+	font-size: 1.6em;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	transition: background-color 0.5s;
@@ -197,6 +181,9 @@ body{
 	text-shadow: 0 0 20px #000000;
 	padding: 30px 10px 30px 10px;
 }
+body, .checkers {
+	background-image: url("{{bgPattern}}");
+}
 
 .highlight_dark,
 .highlight_middle,
@@ -255,12 +242,12 @@ h1, h2, h3, h4, h5, h6 {
 	margin-left: 10px;
 	margin-right: 10px;
 }
-h1{font-size: 2em;    font-family: "Lato Thin";}
-h2{font-size: 1.75em; font-family: "Lato Thin";}
-h3{font-size: 1.5em;  font-family: "Lato Thin";}
-h4{font-size: 1.25em; font-family: "Lato";}
-h5{font-size: 1em;    font-family: "Lato";}
-h6{font-size: .75em;  font-family: "Lato";}
+h1{font-size: 2em;    font-family: "light";   font-weight: normal;}
+h2{font-size: 1.75em; font-family: "light";   font-weight: normal;}
+h3{font-size: 1.5em;  font-family: "light";   font-weight: normal;}
+h4{font-size: 1.25em; font-family: "default"; font-weight: normal;}
+h5{font-size: 1em;    font-family: "default"; font-weight: normal;}
+h6{font-size: .75em;  font-family: "default"; font-weight: normal;}
 h3, h2{border-bottom: 1px var(--layer_3_color_border) solid;} /* Differentiate it a bit, else it just looks like bold text */
 
 p, .indent {
@@ -325,7 +312,6 @@ pre{
 	margin: 10px !important;
 	border-radius: 5px;
 	font-size: 1.8em;
-	font-weight: normal;
 }
 
 .progress_bar{
@@ -403,7 +389,7 @@ button,
 input[type="submit"],
 input[type="button"],
 input[type="color"],
-select{
+select {
 	display: inline-block;
 	box-sizing: border-box;
 	border-radius: 2px;
@@ -416,7 +402,6 @@ select{
 	line-height: 1em;
 	overflow: hidden;
 	text-decoration: none;
-	font-family: inherit;
 	color: #bfbfbf; /* Fallback */
 	color: var(--input_text_color);
 	outline: 0;
@@ -435,7 +420,7 @@ button:focus,
 input[type="submit"]:focus,
 input[type="button"]:focus,
 input[type="color"]:focus,
-select:focus{
+select:focus {
 	color: #bfbfbf; /* Fallback */
 	color: var(--input_text_color);
 	text-decoration: none;
@@ -479,7 +464,6 @@ input[type="number"]{
 	padding: 3px 5px;
 	color: var(--input_text_color);
 	height: 26px;
-	font-family: 'Ubuntu', sans-serif;
 	font-size: 1em;
 	vertical-align: middle;
 	outline: 0;

res/static/script/compiled/README

@@ -1,4 +0,0 @@
-All files in this directory are compiled typescript files. You can find the
-sources in /res/typescript.
-
-Have fun typing!

res/static/script/compiled/home.js

@@ -89,39 +89,68 @@ function createList(title, anonymous) {
             "id": finishedUploads[i].id
         });
     }
-    $.ajax({
-        url: "/api/list",
-        contentType: "application/json",
-        method: "POST",
-        data: JSON.stringify(postData),
-        dataType: "json",
-        success: function (response) {
+    var xhr = new XMLHttpRequest();
+    xhr.open("POST", apiEndpoint + "/list");
+    xhr.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
+    xhr.onreadystatechange = function () {
+        if (xhr.readyState !== 4) {
+            return;
+        }
+        if (xhr.status == 200 || xhr.status == 0) {
+            // Request is a success
             var resultString = "<div class=\"file_button\">"
-                + '<img src="' + apiEndpoint + '/list/' + response.id + '/thumbnail"/>'
+                + '<img src="' + apiEndpoint + '/list/' + xhr.response.id + '/thumbnail"/>'
                 + "List creation finished!<br/>"
                 + title + "<br/>"
-                + "<a href=\"/l/" + response.id + "\" target=\"_blank\">" + window.location.hostname + "/l/" + response.id + "</a>"
+                + "<a href=\"/l/" + xhr.response.id + "\" target=\"_blank\">" + window.location.hostname + "/l/" + xhr.response.id + "</a>"
                 + "</div>";
-            $('#uploads_queue').append($(resultString).hide().fadeIn('slow').css("display", ""));
-            $("#uploads_queue").animate({
-                scrollTop: $("#uploads_queue").prop("scrollHeight")
-            }, 1000);
-            window.open('/l/' + response.id, '_blank');
-        },
-        error: function (xhr, status, error) {
-            console.log("xhr:");
-            console.log(xhr);
-            console.log("status:");
-            console.log(status);
-            console.log("error:");
-            console.log(error);
+            document.getElementById("uploads_queue").append(resultString);
+            window.open('/l/' + xhr.response.id, '_blank');
+        }
+        else {
+            console.log("status: " + xhr.status + " response: " + xhr.response);
             var resultString = "<div class=\"file_button\">List creation failed<br/>"
                 + "The server responded with this: <br/>"
-                + xhr.responseJSON.message
+                + xhr.response.message
                 + "</div>";
-            $('#uploads_queue').append($(resultString).hide().fadeIn('slow').css("display", ""));
+            document.getElementById("uploads_queue").append(resultString);
         }
-    });
+    };
+    xhr.send(JSON.stringify(postData));
+    // $.ajax({
+    // 	url: "/api/list",
+    // 	contentType: "application/json",
+    // 	method: "POST",
+    // 	data: JSON.stringify(postData),
+    // 	dataType: "json",
+    // 	success: function(response) {
+    // 		var resultString = "<div class=\"file_button\">"
+    // 			+ '<img src="'+apiEndpoint+'/list/'+response.id+'/thumbnail"/>'
+    // 			+ "List creation finished!<br/>"
+    // 			+ title + "<br/>"
+    // 			+ "<a href=\"/l/" + response.id + "\" target=\"_blank\">"+window.location.hostname+"/l/" + response.id + "</a>"
+    // 			+ "</div>";
+    // 		$('#uploads_queue').append(
+    // 			$(resultString).hide().fadeIn('slow').css("display", "")
+    // 		);
+    // 		window.open('/l/'+response.id, '_blank');
+    // 	},
+    // 	error: function(xhr, status, error) {
+    // 		console.log("xhr:");
+    // 		console.log(xhr);
+    // 		console.log("status:");
+    // 		console.log(status);
+    // 		console.log("error:");
+    // 		console.log(error);
+    // 		var resultString = "<div class=\"file_button\">List creation failed<br/>"
+    // 			+ "The server responded with this: <br/>"
+    // 			+ xhr.responseJSON.message
+    // 			+ "</div>";
+    // 		$('#uploads_queue').append(
+    // 			$(resultString).hide().fadeIn('slow').css("display", "")
+    // 		);
+    // 	}
+    // });
 }
 // Form upload handlers
 // Relay click event to hidden file field
@@ -319,39 +348,35 @@ var UploadWorker = /** @class */ (function () {
     };
     UploadWorker.prototype.upload = function (file) {
         console.debug("Starting upload of " + file.name);
+        var that = this; // jquery changes the definiton of "this"
         var formData = new FormData();
         formData.append("name", file.name);
         formData.append('file', file.file);
-        var that = this; // jquery changes the definiton of "this"
-        $.ajax({
-            type: 'POST',
-            url: apiEndpoint + "/file",
-            data: formData,
-            timeout: 21600000,
-            cache: false,
-            async: true,
-            crossDomain: false,
-            contentType: false,
-            processData: false,
-            xhr: function () {
-                var xhr = new XMLHttpRequest();
-                xhr.upload.addEventListener("progress", function (evt) {
-                    if (evt.lengthComputable) {
-                        file.onProgress(evt.loaded / evt.total);
-                    }
-                }, false);
-                return xhr;
-            },
-            success: function (data) {
-                file.onFinished(data.id);
-                that.setHistoryCookie(data.id);
-                console.log("Done: " + data.id);
+        var xhr = new XMLHttpRequest();
+        xhr.open("POST", apiEndpoint + "/file");
+        xhr.timeout = 21600000; // 6 hours, to account for slow connections
+        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
+        // Update progess bar on progress
+        xhr.onprogress = function (evt) {
+            if (evt.lengthComputable) {
+                file.onProgress(evt.loaded / evt.total);
+            }
+        };
+        xhr.onreadystatechange = function () {
+            if (xhr.readyState !== 4) {
+                return;
+            }
+            if (xhr.status == 200 || xhr.status == 0) {
+                // Request is a success
+                file.onFinished(xhr.response.id);
+                that.setHistoryCookie(xhr.response.id);
+                console.log("Done: " + xhr.response.id);
                 that.newFile(); // Continue uploading on this thread
-            },
-            error: function (xhr, status, error) {
-                console.log("status: " + status + " error: " + error);
+            }
+            else {
+                console.log("status: " + xhr.status + " response: " + xhr.response);
                 if (that.tries === 3) {
-                    file.onFailure(status, error);
+                    file.onFailure(xhr.response.value, xhr.response.message);
                     setTimeout(function () { that.newFile(); }, 2000); // Try to continue
                     return; // Upload failed
                 }
@@ -359,7 +384,45 @@ var UploadWorker = /** @class */ (function () {
                 that.tries++;
                 setTimeout(function () { that.upload(file); }, that.tries * 3000);
             }
-        });
+        };
+        xhr.send(formData);
+        // $.ajax({
+        // 	type: 'POST',
+        // 	url: apiEndpoint+"/file",
+        // 	data: formData,
+        // 	timeout: 21600000, // 6 hours, to account for slow connections
+        // 	cache: false,
+        // 	async: true,
+        // 	crossDomain: false,
+        // 	contentType: false,
+        // 	processData: false,
+        // 	xhr: function () {
+        // 		var xhr = new XMLHttpRequest();
+        // 		xhr.upload.addEventListener("progress", function (evt) {
+        // 			if (evt.lengthComputable) {
+        // 				file.onProgress(evt.loaded / evt.total)
+        // 			}
+        // 		}, false);
+        // 		return xhr;
+        // 	},
+        // 	success: function (data) {
+        // 		file.onFinished(data.id)
+        // 		that.setHistoryCookie(data.id)
+        // 		console.log("Done: " + data.id)
+        // 		that.newFile() // Continue uploading on this thread
+        // 	},
+        // 	error: function (xhr, status, error){
+        // 		console.log("status: "+status+" error: "+error)
+        // 		if (that.tries === 3) {
+        // 			file.onFailure(status, error)
+        // 			setTimeout(function(){that.newFile()}, 2000) // Try to continue
+        // 			return; // Upload failed
+        // 		}
+        // 		// Try again
+        // 		that.tries++
+        // 		setTimeout(function(){that.upload(file)}, that.tries*3000)
+        // 	}
+        // });
     };
     UploadWorker.prototype.setHistoryCookie = function (id) {
         // Make sure the user is not logged in, for privacy. This keeps the

res/static/typescript/home/home.ts

@@ -68,6 +68,7 @@ class UploadProgressBar implements FileUpload {
 		this.uploadDiv.appendChild(linkSpan)
 	}
 	public onFailure(error: string) {
+		this.uploadDiv.innerHTML = "" // Remove uploading progress
 		this.uploadDiv.style.background = 'var(--danger_color)'
 		this.uploadDiv.appendChild(document.createTextNode(this.file.name))
 		this.uploadDiv.appendChild(document.createElement("br"))
@@ -109,43 +110,35 @@ function createList(title: string, anonymous: boolean){
 		});
 	}
 
-	$.ajax({
-		url: "/api/list",
-		contentType: "application/json",
-		method: "POST",
-		data: JSON.stringify(postData),
-		dataType: "json",
-		success: function(response) {
-			var resultString = "<div class=\"file_button\">"
-				+ '<img src="'+apiEndpoint+'/list/'+response.id+'/thumbnail"/>'
+	var xhr = new XMLHttpRequest()
+	xhr.open("POST", apiEndpoint+"/list")
+	xhr.setRequestHeader("Content-Type", "application/json; charset=UTF-8")
+	xhr.onreadystatechange = function(){
+		if (xhr.readyState !== 4) {return;}
+		var resp = JSON.parse(xhr.response);
+
+		if (xhr.status < 400) {
+			// Request is a success
+			var div = document.createElement("div")
+			div.className = "file_button";
+			div.innerHTML = '<img src="'+apiEndpoint+'/list/'+resp.id+'/thumbnail"/>'
 				+ "List creation finished!<br/>"
 				+ title + "<br/>"
-				+ "<a href=\"/l/" + response.id + "\" target=\"_blank\">"+window.location.hostname+"/l/" + response.id + "</a>"
-				+ "</div>";
-			$('#uploads_queue').append(
-				$(resultString).hide().fadeIn('slow').css("display", "")
-			);
-			$("#uploads_queue").animate({
-				scrollTop: $("#uploads_queue").prop("scrollHeight")
-			}, 1000);
-			window.open('/l/'+response.id, '_blank');
-		},
-		error: function(xhr, status, error) {
-			console.log("xhr:");
-			console.log(xhr);
-			console.log("status:");
-			console.log(status);
-			console.log("error:");
-			console.log(error);
-			var resultString = "<div class=\"file_button\">List creation failed<br/>"
-				+ "The server responded with this: <br/>"
-				+ xhr.responseJSON.message
-				+ "</div>";
-			$('#uploads_queue').append(
-				$(resultString).hide().fadeIn('slow').css("display", "")
-			);
+				+ '<a href="/l/'+resp.id+'" target="_blank">'+window.location.hostname+'/l/'+resp.id+'</a>';
+			document.getElementById("uploads_queue").appendChild(div);
+			window.open('/l/'+resp.id, '_blank');
+		} else {
+			console.log("status: "+xhr.status+" response: "+xhr.response)
+			var div = document.createElement("div")
+			div.className = "file_button";
+			div.innerHTML = "List creation failed<br/>"
+				+ "The server responded with:<br/>"
+				+ resp.message;
+			document.getElementById("uploads_queue").append(div);
 		}
-	});
+	}
+
+	xhr.send(JSON.stringify(postData));
 }
 
 // Form upload handlers

res/static/typescript/home/tsconfig.json

@@ -1,11 +1,10 @@
 {
 	"compilerOptions": {
-		"outFile": "../../script/compiled/home.js"
+		"outFile": "../../../include/script/compiled/home.js"
 	},
 	"files": [
 		"home.ts",
 		"../lib/cookie.ts",
-		"../lib/jquery.d.ts",
 		"../lib/uploader.ts"
 	]
 }

res/static/typescript/lib/uploader.ts

@@ -5,7 +5,7 @@ interface FileUpload {
 	name: string
 	onProgress(progress: number)
 	onFinished(id: string)
-	onFailure(response: JQuery.Ajax.ErrorTextStatus, error: string)
+	onFailure(errorID: string, errorMessage: string)
 }
 
 class UploadManager {
@@ -84,37 +84,38 @@ class UploadWorker {
 		formData.append("name", file.name)
 		formData.append('file', file.file)
 
-		$.ajax({
-			type: 'POST',
-			url: apiEndpoint+"/file",
-			data: formData,
-			timeout: 21600000, // 6 hours, to account for slow connections
-			cache: false,
-			async: true,
-			crossDomain: false,
-			contentType: false,
-			processData: false,
-			xhr: function () {
-				var xhr = new XMLHttpRequest();
-				xhr.upload.addEventListener("progress", function (evt) {
-					if (evt.lengthComputable) {
-						file.onProgress(evt.loaded / evt.total)
-					}
-				}, false);
-				return xhr;
-			},
-			success: function (data) {
-				file.onFinished(data.id)
-				that.setHistoryCookie(data.id)
-				console.log("Done: " + data.id)
+		var xhr = new XMLHttpRequest()
+		xhr.open("POST", apiEndpoint+"/file")
+		xhr.timeout = 21600000 // 6 hours, to account for slow connections
 
+		// Update progess bar on progress
+		xhr.upload.addEventListener("progress", function (evt) {
+			if (evt.lengthComputable) {
+				file.onProgress(evt.loaded / evt.total)
+			}
+		});
+
+		xhr.onreadystatechange = function(){
+			if (xhr.readyState !== 4) {return;}
+			console.log("status: "+xhr.status)
+
+			if (xhr.status >= 100 && xhr.status < 400) {
+				var resp = JSON.parse(xhr.response);
+				// Request is a success
+				file.onFinished(resp.id)
+				that.setHistoryCookie(resp.id)
 				that.newFile() // Continue uploading on this thread
-			},
-			error: function (xhr, status, error){
-				console.log("status: "+status+" error: "+error)
+			} else {
+				var value, message
+				if (xhr.status >= 400) {
+					var resp = JSON.parse(xhr.response);
+					value = resp.value
+					message = resp.message
+				}
+				console.log("Upload error. status: "+xhr.status+" response: "+xhr.response)
 
 				if (that.tries === 3) {
-					file.onFailure(status, error)
+					file.onFailure(value, message)
 
 					setTimeout(function(){that.newFile()}, 2000) // Try to continue
 					return; // Upload failed
@@ -122,9 +123,11 @@ class UploadWorker {
 
 				// Try again
 				that.tries++
-				setTimeout(function(){that.upload(file)}, that.tries*3000)
+				setTimeout(function(){that.upload(file)}, that.tries*5000)
 			}
-		});
+		}
+
+		xhr.send(formData)
 	}
 
 	private setHistoryCookie(id: string){

res/static/yo.html

@@ -1 +0,0 @@
-yo

res/template/admin.html

@@ -4,7 +4,6 @@
 	<head>
 		{{template "meta_tags" "Administrator panel"}}
 		{{template "user_style" .}}
-		<script type="text/javascript">var apiEndpoint = '{{.APIEndpoint}}';</script>
 	</head>
 	<body>
 		{{$isAdmin := .PixelAPI.UserIsAdmin}}
@@ -24,9 +23,11 @@
 					<canvas id="bandwidth_chart"></canvas>
 				</div>
 
+				<script src="/res/script/Chart.min.js"></script>
 				<script src="/res/script/jquery.js"></script>
-				<script src="/res/misc/chartjs/Chart.min.js"></script>
 				<script>
+				var apiEndpoint = '{{.APIEndpoint}}';
+
 				Chart.defaults.global.defaultFontColor = "#b3b3b3";
 				Chart.defaults.global.defaultFontSize = 15;
 				Chart.defaults.global.defaultFontFamily = "Ubuntu";

res/template/file_viewer.html

@@ -6,19 +6,17 @@
 		<meta charset="UTF-8"/>
 		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 		{{template "user_style" .}}
-		<link rel="stylesheet" href="/res/style/viewer.css?v5"/>
-		<link rel="stylesheet" href="/res/style/layout.css?v5"/>
 		<link rel="shortcut icon" href="/res/img/tray32.png"/>
 		<link rel="icon" sizes="180x180" href="/res/img/pixeldrain.png"/>
 		<link rel="icon" sizes="256x256" href="/res/img/pixeldrain_big.png"/>
 		<meta name="theme-color" content="#75AD38"/>
 
-		{{.OGData}}
+		<style>
+		{{template `viewer.css`}}
+		{{template `layout.css`}}
+		</style>
 
-		<script type="text/javascript">
-			var apiEndpoint = '{{.APIEndpoint}}';
-			var captchaKey = '{{.Other.CaptchaKey}}';
-		</script>
+		{{.OGData}}
 	</head>
 
 	<body>
@@ -26,7 +24,7 @@
 			<div id="file_viewer_headerbar" class="highlight_1 file_viewer_headerbar">
 				<button id="button_toggle_toolbar" class="button_toggle_toolbar" onClick="Toolbar.toggle();">☰</button>
 				<a href="/" id="button_home" class="button button_home">
-					<img src="/res/img/pixeldrain_transparent.png"
+					<img src="{{template `pixeldrain_icon.png`}}"
 						alt="Back to the Home page"
 						style="height: 1.5em; margin: -0.2em; margin-right: 0.2em;"/>
 				</a>
@@ -49,19 +47,19 @@
 							<div id="stat_downloads" style="text-align: center;">N/A</div>
 
 							<button id="btnDownload" class="toolbar_button button_full_width" onClick="Toolbar.download();">
-								<img src="/res/img/floppy_small.png" alt="Download this file"/>
+								<img src="{{template `floppy_small.png`}}" alt="Download this file"/>
 								<span>Download</span>
 							</button>
 							<button id="btnCopy" class="toolbar_button button_full_width" onClick="Toolbar.copyUrl();">
-								<img src="/res/img/clipboard_small.png" alt="Copy file URL to clipboard"/>
+								<img src="{{template `clipboard_small.png`}}" alt="Copy file URL to clipboard"/>
 								<span><u>C</u>opy Link</span>
 							</button>
 							<button id="btnShare" class="toolbar_button button_full_width" onClick="Sharebar.toggle();">
-								<img src="/res/img/share_small.png" alt="Share this file on social media"/>
+								<img src="{{template `share_small.png`}}" alt="Share this file on social media"/>
 								<span>Share</span>
 							</button>
 							<button id="btnDetails" class="toolbar_button button_full_width" onClick="DetailsWindow.toggle();">
-								<img src="/res/img/info_small.png" alt="Help"/>
+								<img src="{{template `info_small.png`}}" alt="Help"/>
 								<span>Deta<u>i</u>ls</span>
 							</button>
 							{{template "advertisement" .}}
@@ -75,33 +73,34 @@
 				<div id="sharebar" class="file_viewer_sharebar">
 					Share on:<br/>
 					<button class="sharebar-button button_full_width" onClick="window.open('mailto:please@set.address?subject=File%20on%20PixelDrain&body=' + window.location.href);">
-						<img src="/res/img/social_email.png" alt="Share on E-Mail" style="width:40px; height: 40px;"/>
+						<img src="{{template `social_email.png`}}" alt="Share on E-Mail" style="width:40px; height: 40px;"/>
 						<br/>E-Mail
 					</button>
 					<button class="sharebar-button button_full_width" onclick="window.open('https://www.reddit.com/submit?url=' + window.location.href);">
-						<img src="/res/img/social_reddit.png" alt="Share on Reddit" style="width:40px; height: 40px;"/>
+						<img src="{{template `social_reddit.png`}}" alt="Share on Reddit" style="width:40px; height: 40px;"/>
 						<br/>Reddit
 					</button>
 					<button class="sharebar-button button_full_width" onClick="window.open('https://twitter.com/share?url=' + window.location.href);">
-						<img src="/res/img/social_twitter.png" alt="Share on Twitter" style="width:40px; height: 40px;"/>
+						<img src="{{template `social_twitter.png`}}" alt="Share on Twitter" style="width:40px; height: 40px;"/>
 						<br/>Twitter
 					</button>
 					<button class="sharebar-button button_full_width" onClick="window.open('http://www.facebook.com/sharer.php?u=' + window.location.href);">
-						<img src="/res/img/social_facebook.png" alt="Share on Facebook" style="width:40px; height: 40px;"/>
+						<img src="{{template `social_facebook.png`}}" alt="Share on Facebook" style="width:40px; height: 40px;"/>
 						<br/>Facebook
 					</button>
 					<button class="sharebar-button button_full_width" onClick="window.open('http://www.tumblr.com/share/link?url=' + window.location.href);">
-						<img src="/res/img/social_tumblr.png" alt="Share on Tumblr" style="width:40px; height: 40px;"/>
+						<img src="{{template `social_tumblr.png`}}" alt="Share on Tumblr" style="width:40px; height: 40px;"/>
 						<br/>Tumblr
 					</button>
 					<button class="sharebar-button button_full_width" onClick="window.open('https://voat.co/submit?linkpost=true&url=' + window.location.href);">
-						<img src="/res/img/social_voat.png" alt="Share on Voat" style="width:40px; height: 40px;"/>
+						<img src="{{template `social_voat.png`}}" alt="Share on Voat" style="width:40px; height: 40px;"/>
 						<br/>Voat
 					</button>
 				</div>
 
 				<div id="filepreview" class="file_viewer_file_preview">
-					<img src="/res/img/misc/loadthink.gif" style="margin-top: 20%; width: 200px; height: 200px;" />
+					<!-- <img src="{{template `loadthink.gif`}}" style="margin-top: 20%; width: 200px; height: 200px;" /> -->
+					<div class="image" style="margin-top: 20%; width: 100px; height: 100px;">{{template "spinner.svg"}}</div>
 				</div>
 			</div>
 		</div>
@@ -162,12 +161,16 @@
 			<div id="captcha_popup_captcha" style="text-align: center;"></div>
 		</div>
 
-		<script src="/res/misc/chartjs/Chart.min.js"></script>
+		<script src="/res/script/Chart.min.js"></script>
 		<script src="/res/script/jquery.js"></script>
-		<script src="/res/script/Toolbar.js?v7"></script>
-		<script src="/res/script/Viewer.js?v7"></script>
-		<script src="/res/script/ListNavigator.js?v7"></script>
-		<script>
+		<script type="text/javascript">
+			var apiEndpoint = '{{.APIEndpoint}}';
+			var captchaKey = '{{.Other.CaptchaKey}}';
+
+			{{template `Toolbar.js`}}
+			{{template `Viewer.js`}}
+			{{template `ListNavigator.js`}}
+
 			// This info gets filled in on the server side to prevent having to make an API call right after the page loads.
 			// Just to slice another few milliseconds from the load time :)
 			window.addEventListener("load", function(){

res/template/fragments/advertisement.html

@@ -4,14 +4,14 @@
 	{{if ne (isBrave .UserAgent) true}}
 	Use the Brave web browser for a faster and safer web!<br/>
 	<a href="https://brave.com/pix009" id="btnBrave" class="button toolbar_button button_full_width button_highlight">
-		<img src="/res/img/brave_lion.png" alt="Brave lion"/>
+		<img src="{{template `brave_lion.png`}}" alt="Brave lion"/>
 		<span>Get Brave</span>
 	</a>
 	<br/>
 	or <a href="https://medium.com/pixeldrain/advertising-on-pixeldrain-a-more-honest-approach-d5e00e3f0c29">learn why pixeldrain supports Brave</a>
 	{{else}}
 	Thank you for using Brave! Please consider supporting pixeldrain with a tip
-	<img src="/res/img/bat_logo_color.png" style="height: 1em; width: 1em;" />
+	<img src="{{template `bat_logo_color.png`}}" style="height: 1em; width: 1em;" />
 	{{end}}
 </div>
 <br/>

res/template/fragments/form.html

@@ -29,7 +29,7 @@
 					{{if eq $field.Type "textarea"}}
 						<td colspan="2">
 							{{$field.Label}}<br/>
-							<textarea id="input_{{$field.Name}}" name="{{$field.Name}}" class="form_input" style="width: 100%; height: 5em; resize: vertical;">{{$field.DefaultValue}}</textarea>
+							<textarea id="input_{{$field.Name}}" name="{{$field.Name}}" class="form_input" style="width: 100%; height: 10em; resize: vertical;">{{$field.DefaultValue}}</textarea>
 						</td>
 					{{else}}
 						<td>{{$field.Label}}</td>

res/template/fragments/meta_tags.html

@@ -2,7 +2,6 @@
 <title>{{.}} ~ PixelDrain</title>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
-<link rel="stylesheet" href="/res/style/layout.css?v4" />
 <link rel="shortcut icon" href="/res/img/tray32.png" />
 <meta name="theme-color" content="#75AD38" />
 <link rel="icon" sizes="180x180" href="/res/img/pixeldrain.png" />

res/template/fragments/user_style.html

@@ -1,10 +1,6 @@
 {{define "user_style"}}
 <style>
 {{.UserStyle}}
-
-body,
-.checkers {
-	background-image: url("/res/img/{{bgPattern}}");
-}
+{{template "layout.css"}}
 </style>
 {{end}}

res/template/history.html

@@ -5,8 +5,6 @@
 		{{template "user_style" .}}
 		<script src="res/script/jquery.js"></script>
 		<script src="res/script/jquery-cookie.js"></script>
-		<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"/>
-		<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
 		<script type="text/javascript">var apiEndpoint = '{{.APIEndpoint}}';</script>
 	</head>
 	<body>
@@ -23,7 +21,7 @@
 				<div id="uploadedFiles" class="highlight_dark"></div>
 			</div></div>
 			{{template "page_bottom" .}}
-		<script src="/res/script/history.js"></script>
+		<script>{{template `history.js`}}</script>
 		{{template "analytics"}}
 	</body>
 </html>{{end}}

res/template/home.html

@@ -4,7 +4,6 @@
 	<head>
 		{{template "meta_tags" "Free file sharing service"}}
 		{{template "user_style" .}}
-		<script type="text/javascript">var apiEndpoint = '{{.APIEndpoint}}';</script>
 	</head>
 	<body>
 		{{template "page_top" .}}
@@ -65,9 +64,12 @@
 
 		{{template "page_bottom"}}
 
-		<script src="/res/script/jquery-2.1.4.min.js"></script>
-		<script type="text/javascript">var API_URL = "/api";</script>
-		<script src="/res/script/compiled/home.js"></script>
+		<script type="text/javascript">
+		var apiEndpoint = '{{.APIEndpoint}}';
+		var API_URL = "/api";
+		{{template "home.js"}}
+		</script>
+
 		{{template "analytics"}}
 	</body>
 </html>

res/template/paste.html

@@ -4,7 +4,6 @@
 	<head>
 		{{template "meta_tags" "Text Upload"}}
 		{{template "user_style" .}}
-		<script src="/res/script/jquery-2.1.4.min.js"></script>
 
 		<style>
 			#toolbar {
@@ -46,11 +45,11 @@
 	<body>
 		<div id="toolbar">
 			<button class="toolbar_button button_full_width" onClick="uploadText();">
-				<img src="/res/img/upload_small.png" alt="Start Upload"/>
+				<img src="{{template `upload_small.png`}}" alt="Start Upload"/>
 				<span>Upload</span>
 			</button>
 			<a href="/" class="button toolbar_button button_full_width">
-				<img src="/res/img/pixeldrain_transparent.png" alt="Back to the Home page"/>
+				<img src="{{template `pixeldrain_icon.png`}}" alt="Back to the Home page"/>
 				<span>Home</span>
 			</a>
 			<br/><br/>
@@ -60,7 +59,10 @@
 		<div class="textarea_container">
 			<textarea id="textarea" class="textarea" placeholder="Your text here..." autofocus="autofocus"></textarea>
 		</div>
-		<script src="/res/script/compiled/textupload.js"></script>
+
+		<script src="/res/script/jquery.js"></script>
+		<script>{{template "textupload.js"}}</script>
+
 		{{template "analytics"}}
 	</body>
 </html>

res/template/widgets.html

@@ -2,16 +2,14 @@
 <!DOCTYPE html>
 <html>
 	<head>
-		{{template "meta_tags" "Widget showcase"}}
+		{{template "meta_tags" "Free file sharing service"}}
 		{{template "user_style" .}}
-		<script type="text/javascript">var apiEndpoint = '{{.APIEndpoint}}';</script>
 	</head>
 	<body>
+		{{template "page_top" .}}
 		<img id="header_image" class="header_image" src="/res/img/header_neuropol.png" alt="Header image"/>
 		<br/>
-		<div id="body" class="body">
-			{{template "menu" .}}
-
+		<div class="page_content"><div class="limit_width">
 			<h1>Widget showcase</h1>
 			<h2>Size 2 header</h2>
 			<h3>Size 3 header</h3>
@@ -23,10 +21,6 @@
 			<div class="highlight_middle">Middle highlight</div>
 			<div class="highlight_dark">Dark highlight</div>
 			<br/>
-			<div class="highlight_light">Light highlight with borders</div>
-			<div class="highlight_middle">Middle highlight with borders</div>
-			<div class="highlight_dark ">Dark highlight with borders</div>
-			<br/>
 			Link <a href="#">A link to someplace</a>.
 			<hr/>
 			Buttons <button>Regular ol' button!</button>
@@ -67,8 +61,8 @@
 			Color <input type="color" name="favcolor" value="#ff0000">
 
 			<br/>
-			{{template "footer"}}
-		</div>
+		</div></div>
+		{{template "page_bottom"}}
 	</body>
 </html>
 {{end}}