Add web fonts, dix donation page, tweak file detail popup

res/static/script/DetailsWindow.js

@@ -13,9 +13,9 @@ var DetailsWindow = {
 	},
 	setDetails: function (file) {
 		if (Viewer.isList) {
-			//  Lists give incomplete file information, so we have to request
+			// Lists give incomplete file information, so we have to request
-			//  more details in the background. File descriptions only exist in
+			// more details in the background. File descriptions only exist in
-			//  lists, so for that we use the data provided in the page source
+			// lists, so for that we use the data provided in the page source
 			$.ajax({
 				dataType: "json",
 				url: apiEndpoint + "/file/" + file.id + "/info",
@@ -25,7 +25,7 @@ var DetailsWindow = {
 						+ "<tr><td>Name<td><td>" + escapeHTML(data.name) + "</td></tr>"
 						+ "<tr><td>Url<td><td><a href=\"/u/" + data.id + "\">/u/" + data.id + "</a></td></tr>"
 						+ "<tr><td>Mime Type<td><td>" + escapeHTML(data.mime_type) + "</td></tr>"
-						+ "<tr><td>Id<td><td>" + data.id + "</td></tr>"
+						+ "<tr><td>IS<td><td>" + data.id + "</td></tr>"
 						+ "<tr><td>Size<td><td class=\"bytecounter\">" + data.size + "</td></tr>"
 						+ "<tr><td>Upload Date<td><td>" + data.date_upload + "</td></tr>"
 						+ "<tr><td>Description<td><td>" + escapeHTML(file.description) + "</td></tr>"
@@ -38,7 +38,7 @@ var DetailsWindow = {
 				"<table>"
 				+ "<tr><td>Name<td><td>" + escapeHTML(file.name) + "</td></tr>"
 				+ "<tr><td>Mime Type<td><td>" + escapeHTML(file.mime_type) + "</td></tr>"
-				+ "<tr><td>Id<td><td>" + file.id + "</td></tr>"
+				+ "<tr><td>ID<td><td>" + file.id + "</td></tr>"
 				+ "<tr><td>Size<td><td class=\"bytecounter\">" + file.size + "</td></tr>"
 				+ "<tr><td>Upload Date<td><td>" + file.date_upload + "</td></tr>"
 				+ "</table>"

res/static/script/Toolbar.js

@@ -16,15 +16,17 @@ var Toolbar = {
 				Sharebar.toggle();
 			}
 
-			$("#toolbar").animate({left: "-132"}, 400);
+			$("#toolbar").animate(    {left: "-132"}, 400);
-			$("#filepreview").animate({left: "0"}, 400);
+			$("#filepreview").animate({left: "0"},    400);
+			$("#info_popup").animate( {left: "20"},   400);
 
 			$("#button-expand-toolbar").css("visibility", "visible");
 
 			this.visible = false;
 		} else {
-			$("#toolbar").animate({left: "0"}, 400);
+			$("#toolbar").animate(    {left: "0"},   400);
 			$("#filepreview").animate({left: "122"}, 400);
+			$("#info_popup").animate( {left: "142"}, 400);
 
 			setTimeout(function(){
 				if(this.visible){

res/static/style/layout.css

@@ -13,7 +13,8 @@
 	font-family: 'Ubuntu';
 	font-style: normal;
 	font-weight: 400;
-	font-display: auto;
+	font-display: fallback;
+    text-rendering: optimizeLegibility;
 	src:
 		local('Ubuntu'),
 		local('Ubuntu Regular'),
@@ -22,10 +23,11 @@
 		url(/res/misc/Ubuntu-R.ttf) format('truetype');
 }
 @font-face {
-	font-family: 'Lato';
+	font-family: 'Lato Thin';
-	font-style: normal;
+	font-display: fallback;
-	font-weight: 100;
+    font-style: normal;
-	font-display: auto;
+    font-weight: normal;
+    text-rendering: optimizeLegibility;
 	src:
 		local('Lato Thin'),
 		local('Lato, Thin'),
@@ -33,7 +35,19 @@
 		local('Lato Hairline'),
 		local('Lato, Hairline'),
 		local('Lato-Hairline'),
-		url(/res/misc/Lato-Hairline.ttf) format('truetype');
+		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');
 }
 
 /* Page rendering configuration */
@@ -87,7 +101,7 @@ body{
 	padding: 4px 6px;
 	margin: 0 4px;
 	text-decoration: none;
-	font-family: "Lato", sans-serif;
+	font-family: "Lato Thin", sans-serif;
 	font-weight: bold;
 	font-size: 26px;
 }
@@ -148,6 +162,12 @@ body{
 /* Common elements */
 
 h1, h2, h3, h4, h5, h6 {line-height: 1em;}
+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";}
 h3{border-bottom: 1px var(--accent_color_light_border) solid;} /* Differentiate it a bit, else it just looks like bold text */
 
 hr{

res/template/apidoc.html

@@ -32,7 +32,7 @@
 	<body>
 		<div id='body' class="body">
 			{{template "menu" .}}
-			<h1>PixelDrain API Documentation</h1>
+			<h1>Pixeldrain API Documentation</h1>
 			<p>
 				Welcome to the Pixeldrain API documentation.
 				<br/>

res/template/donation.html

@@ -1,86 +1,41 @@
+{{define "donation"}}
 <!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org">
+<html>
 	<head>
-		<title>Thank you for supporting Pixeldrain!</title>
+		{{template "meta_tags" "Thank you for supporting Pixeldrain!"}}
-		<meta charset="UTF-8"/>
+		{{template "user_style" .}}
-		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-		<link rel="stylesheet" href="/res/style/layout.css"/>
-		<link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'/>
-		<link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet" type="text/css"/>
-		<link rel="shortcut icon" href="/res/img/tray32.png"/>
-		<meta name="theme-color" content="#9FCF6C"/>
-		<link rel="icon" sizes="180x180" href="/res/img/pixeldrain.png"/>
-		<link rel="icon" sizes="256x256" href="/res/img/pixeldrain_big.png"/>
-		
-		<style>
-			body, .checkers{
-				background-image: url("/res/img/checker6.png");
-				background-attachment: fixed;
-			}
-		</style>
-
-		<meta name="description" content="PixelDrain is a free file sharing service, you 
-			  can upload any file and you will be given a shareable link right away. 
-			  PixelDrain also supports previews for images, videos, audio, PDFs and much more.
-			  Uncensored, unmonitored and unmoderated."/>
-		<meta property="og:type" content="website" />
-		<meta property="og:title" content="Thanks! ~ PixelDrain" />
-		<meta property="og:site_name" content="PixelDrain" />
-		<meta property="og:description" content="Instant file and screenshot sharing." />
-		<meta property="og:url" content="http://pixeldra.in/" />
-		<meta property="og:image" content="/res/img/pixeldrain_big.png" />
-		<meta property="og:image:type" content="image/png" />
 	</head>
-
 	<body>
 		<div id="body" class="body">
-			<div th:replace="fragments :: menu"></div>
+			{{template "menu" .}}
-			<br/><br/>
+			<br/>
-			<span th:switch="${donation_success}">
+			{{$success := .URLQuery.Get "success"}}
-				<span th:case="true">
+			{{if eq $success "true"}}
-					<span th:switch="${user_authenticated}">
+				{{if .Authenticated}}
-						<span th:case="false">
+					Dear {{.Username}},
-							Thank you for your donation! You are amazing.
+					<br/><br/>
-							<br/><br/>
+					Thank you for your donation. I really appreciate it!
-							Sincerely,<br/>
-							Fornax
-						</span>
-						<span th:case="true">
-							Dear <span th:text="${user.getUsername()}"></span>, 
-							<br/><br/>
-							Thank you for your donation. I really appreciate it!
-							<br/><br/>
-							Sincerely,<br/>
-							Fornax
-						</span>
-					</span>
-				</span>
-				
-				<span th:case="false">
-					It seems you have canceled your donation. I don't blame you, money is expensive :)
 					<br/><br/>
 					Sincerely,<br/>
-					Fornax</span>
+					Fornax
-			</span>
+				{{else}}
+					Thank you for your donation! You are amazing.
+					<br/><br/>
+					Sincerely,<br/>
+					Fornax
+				{{end}}
+			{{else}}
+				It seems you have canceled your donation. I don't blame you, money is expensive :)
+				<br/><br/>
+				If this was not your intention, you're welcome to try again by clicking this button:
+				<a class="button" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=WU49A5NHPAZ9G&source=url">Donate with PayPal</a>
+				<br/><br/>
+				Sincerely,<br/>
+				Fornax
+			{{end}}
 			{{template "footer"}}
 		</div>
-		
+		{{template "analytics"}}
-		<!-- Google Analytics Tracking Code -->
-		<script>
-		(function (i, s, o, g, r, a, m) {
-			i['GoogleAnalyticsObject'] = r;
-			i[r] = i[r] || function () {
-				(i[r].q = i[r].q || []).push(arguments)
-			}, i[r].l = 1 * new Date();
-			a = s.createElement(o),
-				m = s.getElementsByTagName(o)[0];
-			a.async = 1;
-			a.src = g;
-			m.parentNode.insertBefore(a, m)
-		})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
-
-		ga('create', 'UA-24463738-4', 'auto');
-		ga('send', 'pageview');
-		</script>
 	</body>
 </html>
+{{end}}

res/template/file_info_popup.html

@@ -1,36 +0,0 @@
-{{define "file_info_popup"}}
-<h3>About</h3>
-PixelDrain is a file sharing platform. 
-<a href="/" target="_blank">Visit the main site for more information.</a>
-
-<h3>Keyboard Controls</h3>
-<table>
-	<tr><td colspan="2">File Shortcuts</td></tr>
-	<tr><td>c</td><td> = Copy URL of this page</td></tr>
-	<tr><td>i</td><td> = Toggle details window (this window)</td></tr>
-	<tr><td>s</td><td> = Download the file you are currently viewing</td></tr>
-	<tr><td colspan="2">List Shortcuts</td></tr>
-	<tr><td>a or &#8592;</td><td> = View previous item in list</td></tr>
-	<tr><td>d or &#8594;</td><td> = View next item in list</td></tr>
-	<tr><td>r</td><td> = Toggle shuffle (<b><u>r</u></b>andom)</td></tr>
-	<tr><td>SHIFT + s</td><td> = Download all the files in the list as a zip archive</td></tr>
-</table>
-
-<h3>Credits</h3>
-All server side code written by 
-<a target="_blank" href="https://fornaxian.com/">Fornax (me)</a>.
-
-<br/><br/>
-
-Code syntax highlighting is by 
-<a target="_blank" href="https://github.com/google/code-prettify">
-	Google Code-prettify
-</a>.
-
-<br/><br/>
-
-Thanks to the Mozilla team for their wonderful PDF viewer 
-<a target="_blank" href="https://github.com/mozilla/pdf.js">pdf.js</a>.
-
-<br/><br/>
-{{end}}

res/template/file_viewer.html

@@ -122,11 +122,12 @@
 		</div>
 
 		<div id="info_popup" class="full_popup">
-			<img alt="Close" src="/res/img/cross.png"
+			<img
-			     style="position: absolute; top: 5px; right: 5px; width: 40px; height: 40px; cursor: pointer;"
+				alt="Close"
-			     onclick="DetailsWindow.toggle();"/>
+				src="/res/img/cross.png"
-			Click the help button again to close this overlay.<br/>
+				style="position: absolute; top: 5px; right: 5px; width: 40px; height: 40px; cursor: pointer;"
-
+				onclick="DetailsWindow.toggle();"
+			/>
 			<h3>File Info</h3>
 			<span id="info_file_details"></span>
 			<span id="info_about">

res/template/home.html

@@ -4,7 +4,6 @@
 	<head>
 		{{template "meta_tags" "Free file sharing service"}}
 		{{template "user_style" .}}
-		<script src="/res/script/jquery-2.1.4.min.js"></script>
 		<script type="text/javascript">var apiEndpoint = '{{.APIEndpoint}}';</script>
 	</head>
 
@@ -105,14 +104,7 @@
 					Donations will be used for paying storage contracts with Sia
 					hosts)
 				</li>
-				<li>PayPal:
+				<li><a class="button button_highlight" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=WU49A5NHPAZ9G&source=url">Donate with PayPal</a></li>
-					<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
-						<input type="hidden" name="cmd" value="_s-xclick" />
-						<input type="hidden" name="hosted_button_id" value="WU49A5NHPAZ9G" />
-						<input type="image" src="https://www.paypalobjects.com/en_GB/i/btn/btn_donate_SM.gif" border="0" name="submit" alt="PayPal – The safer, easier way to pay online!" />
-						<img alt="" border="0" src="https://www.paypalobjects.com/nl_NL/i/scr/pixel.gif" width="1" height="1" />
-					</form>
-				</li>
 			</ul>
 
 			<h2>Legality</h2>
@@ -140,6 +132,7 @@
 			{{template "footer"}}
 		</div>
 
+		<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>
 		{{template "analytics"}}

webcontroller/web_controller.go

@@ -55,6 +55,7 @@ func New(r *httprouter.Router, prefix string, conf *conf.PixelWebConfig) *WebCon
 	r.GET(p+"/u/:id/preview" /*   */, wc.serveFilePreview)
 	r.GET(p+"/l/:id" /*           */, wc.serveListViewer)
 	r.GET(p+"/t" /*               */, wc.serveTemplate("paste", false))
+	r.GET(p+"/donation" /*        */, wc.serveTemplate("donation", false))
 
 	// User account pages
 	r.GET(p+"/register" /*        */, wc.serveRegister)