pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Wim Brand
2019-02-18 21:11:42 +01:00
parent 1122b75025
commit 88bcb13bf2
12 changed files with 77 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
res/static/misc/Lato-Regular.ttf Normal file
View File

Binary file not shown.

BIN
res/static/misc/LatoLatin-Hairline.ttf Normal file
View File

Binary file not shown.

BIN
res/static/misc/LatoLatin-Thin.ttf Normal file
View File

Binary file not shown.

10
res/static/script/DetailsWindow.js
View File

@@ -13,9 +13,9 @@ var DetailsWindow = {
},
setDetails: function (file) {
if (Viewer.isList) {
// Lists give incomplete file information, so we have to request
// more details in the background. File descriptions only exist in
// lists, so for that we use the data provided in the page source
// Lists give incomplete file information, so we have to request
// more details in the background. File descriptions only exist in
// 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>"

8
res/static/script/Toolbar.js
View File

@@ -16,15 +16,17 @@ var Toolbar = {
Sharebar.toggle();
}
$("#toolbar").animate({left: "-132"}, 400);
$("#filepreview").animate({left: "0"}, 400);
$("#toolbar").animate( {left: "-132"}, 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){

34
res/static/style/layout.css
View File

@@ -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-style: normal;
font-weight: 100;
font-display: auto;
font-family: 'Lato Thin';
font-display: fallback;
font-style: normal;
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{

2
res/template/apidoc.html
View File

@@ -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/>

105
res/template/donation.html
View File

@@ -1,86 +1,41 @@
{{define "donation"}}
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html>
<head>
<title>Thank you for supporting Pixeldrain!</title>
<meta charset="UTF-8"/>
<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" />
{{template "meta_tags" "Thank you for supporting Pixeldrain!"}}
{{template "user_style" .}}
</head>
<body>
<div id="body" class="body">
<div th:replace="fragments :: menu"></div>
<br/><br/>
<span th:switch="${donation_success}">
<span th:case="true">
<span th:switch="${user_authenticated}">
<span th:case="false">
Thank you for your donation! You are amazing.
<br/><br/>
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 :)
{{template "menu" .}}
<br/>
{{$success := .URLQuery.Get "success"}}
{{if eq $success "true"}}
{{if .Authenticated}}
Dear {{.Username}},
<br/><br/>
Thank you for your donation. I really appreciate it!
<br/><br/>
Sincerely,<br/>
Fornax</span>
</span>
Fornax
{{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>
<!-- 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>
{{template "analytics"}}
</body>
</html>
{{end}}

36
res/template/file_info_popup.html
View File

@@ -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}}

11
res/template/file_viewer.html
View File

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

11
res/template/home.html
View File

@@ -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:
<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>
<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>
</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"}}