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

Convert every page to new layout

Browse Source
This commit is contained in:
Wim Brand
2019-09-17 23:38:40 +02:00
parent b1107236cd
commit 9f836801f2
28 changed files with 586 additions and 642 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
res/static/script/history.js
View File

@@ -58,5 +58,5 @@ function historyAddItem(json) {
+ ("00" + date.getDate()).slice(-2) + ("00" + date.getDate()).slice(-2)
+ "</a>"; + "</a>";
$("#uploadedFiles").append($(uploadItem).hide().fadeIn(2000)); $("#uploadedFiles").append($(uploadItem).hide().fadeIn(500));
} }

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

@@ -72,71 +72,81 @@ body{
.page_wrapper { .page_wrapper {
position: absolute; position: absolute;
display: flex;
flex-direction: column;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
overflow: hidden; overflow: hidden;
} }
.page_wrapper > .page_header {
flex-grow: 0;
flex-shrink: 0;
display: flex;
flex-direction: row;
line-height: 2em;
z-index: 101;
}
.page_wrapper > .page_header > span {
margin: 0 0.5em 0 0.5em;
}
.page_wrapper > .page_content_wrapper {
flex-grow: 1;
flex-shrink: 1;
position: relative;
display: inline-block;
width: auto;
height: auto;
margin: 0;
}
.page_wrapper > .page_content_wrapper > .page_navigation { .button_toggle_navigation {
position: absolute;
z-index: 300;
top: 0;
left: 0;
padding: 10px 20px 15px 10px;
font-size: 2em;
margin: 0;
background: var(--input_color);
border-radius: 0;
border-bottom-right-radius: 90%;
box-shadow: 2px 2px 8px -3px var(--shadow_color);
}
.page_wrapper > .page_navigation {
position: absolute; position: absolute;
width: 200px;
z-index: 100; z-index: 100;
width: 250px;
float: left; float: left;
background-color: var(--layer_1_color); background-color: var(--layer_1_color);
left: 0; left: 0;
bottom: 0; bottom: 0;
top: 0; top: 0;
padding: 0.5em 0 0.5em 0; padding: 20px 0 0.5em 0;
overflow-y: auto;
overflow-x: hidden;
text-align: left; text-align: left;
box-shadow: 2px 2px 8px var(--shadow_color); box-shadow: inset -10px 0px 10px -10px var(--shadow_color);
transition: left 0.5s; transition: left 0.5s;
} }
.page_wrapper > .page_content_wrapper > .page_content { .page_wrapper > .page_body {
position: absolute; position: absolute;
z-index: 200;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 200px; left: 250px;
min-width: 300px; min-width: 300px;
display: inline-block; display: inline-block;
text-align: center; /* Center the header and body */ text-align: center; /* Center the header and body */
overflow-y: scroll; overflow-y: auto;
overflow-x: hidden;
z-index: 50; z-index: 50;
transition: left 0.5s; transition: left 0.5s;
padding-top: 40px;
background-image: var(--background_pattern);
background-attachment: local;
} }
@media (max-width: 500px) { @media (max-width: 600px) {
.page_wrapper > .page_content_wrapper > .page_navigation { .page_wrapper > .page_navigation {
left: -210px; left: -250px;
} }
.page_wrapper > .page_content_wrapper > .page_content { .page_wrapper > .page_body {
left: 0; left: 0;
} }
} }
.page_wrapper > .page_content_wrapper > .page_content > .centered {
.page_wrapper > .page_body > .page_content {
position: relative;
display: inline-block;
width: 100%;
height: auto;
padding: 20px 0 20px 0;
background-color: var(--layer_2_color);
box-shadow: 1px 1px 20px 0 var(--shadow_color);
box-sizing: border-box;
clear: both;
}
.page_wrapper > .page_body > .page_content > .limit_width {
position: relative; position: relative;
display: inline-block; display: inline-block;
max-width: 1000px; max-width: 1000px;
@@ -148,6 +158,9 @@ body{
word-break: break-word; word-break: break-word;
clear: both; clear: both;
} }
.page_wrapper > .page_body > h1 {
text-shadow: 1px 1px 25px #000000;
}
/* Page contents */ /* Page contents */
@@ -158,59 +171,34 @@ body{
margin-bottom: 30px; margin-bottom: 30px;
} }
.page_wrapper > .page_content_wrapper > .page_navigation a { .page_wrapper > .page_navigation a {
float: none; float: none;
display: inline-block; display: block;
box-sizing: border-box; box-sizing: border-box;
color: #bfbfbf; /* Fallback */ color: #bfbfbf; /* Fallback */
color: var(--text_color); color: var(--text_color);
text-align: center; text-align: center;
padding: 4px 6px; padding: 4px 6px;
margin: 0.1em 0 0.1em 0; margin: 0.3em 15px 0.3em 15px;
width: 100%;
text-decoration: none;
font-family: "Lato Thin", sans-serif; font-family: "Lato Thin", sans-serif;
font-weight: bold; font-weight: bold;
font-size: 1.8em; font-size: 1.5em;
transition: box-shadow 5s; overflow: hidden;
text-overflow: ellipsis;
transition: background-color 0.5s;
border-radius: 5px;
} }
.page_wrapper > .page_content_wrapper > .page_navigation a:hover { .page_wrapper > .page_navigation a:hover {
background: linear-gradient(#82c13e, #6da234); background-color: var(--input_color);
background: linear-gradient(var(--highlight_color), var(--highlight_color_dark));
box-shadow: #82c13e, 1px 1px 4px #000000;
box-shadow: var(--highlight_border), 1px 1px 4px var(--shadow_color);
color: #000000;
color: var(--highlight_text_color);
transition: box-shadow 0.5s;
text-decoration: none; text-decoration: none;
} }
.page_wrapper > .page_content_wrapper > .page_navigation .icon {
display: none;
}
@media screen and (max-width: 35em) {
.navigation a:not(:first-child) {display: none;}
.navigation a.icon {
float: right;
display: block;
}
.navigation.responsive {position: relative;}
.navigation.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.navigation.responsive a {
float: none;
display: block;
text-align: left;
}
}
.inset { .inset {
box-shadow: inset 1px 1px 10px -1px var(--shadow_color); box-shadow: inset 1px 1px 20px 0 var(--shadow_color);
} }
.checkers { .checkers {
text-shadow: 0 0 20px #000000; text-shadow: 0 0 20px #000000;
padding: 30px 10px 30px 10px;
} }
.highlight_dark, .highlight_dark,
@@ -223,7 +211,7 @@ body{
position: relative; position: relative;
width: auto; width: auto;
height: auto; height: auto;
margin: 0; /* margin: 0; */
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
text-align: center; text-align: center;
@@ -231,16 +219,16 @@ body{
} }
.highlight_dark { .highlight_dark {
background-color: var(--layer_1_color); background-color: var(--layer_1_color);
box-shadow: 1px 1px var(--layer_1_shadow) -2px var(--shadow_color);} box-shadow: 1px 1px var(--layer_1_shadow) 0 var(--shadow_color);}
.highlight_middle { .highlight_middle {
background-color: var(--layer_2_color); background-color: var(--layer_2_color);
box-shadow: 1px 1px var(--layer_2_shadow) -2px var(--shadow_color);} box-shadow: 1px 1px var(--layer_2_shadow) 0 var(--shadow_color);}
.highlight_light { .highlight_light {
background-color: var(--layer_3_color); background-color: var(--layer_3_color);
box-shadow: 1px 1px var(--layer_3_shadow) -2px var(--shadow_color);} box-shadow: 1px 1px var(--layer_3_shadow) 0 var(--shadow_color);}
.highlight_headerbar { .highlight_headerbar {
background-color: var(--layer_4_color); background-color: var(--layer_4_color);
box-shadow: 1px 1px var(--layer_4_shadow) -2px var(--shadow_color);} box-shadow: 1px 1px var(--layer_4_shadow) 0 var(--shadow_color);}
.highlight_green { .highlight_green {
background-color: rgba(0, 255, 0, 0.05); background-color: rgba(0, 255, 0, 0.05);
border-color: #00d000;} border-color: #00d000;}
@@ -280,10 +268,10 @@ p, .indent {
} }
hr{ hr{
height: 8px; height: 1px;
border: none; border: none;
background: linear-gradient(var(--layer_1_color), var(--layer_3_color)); background-color: var(--input_color);
margin: 16px 0 16px 0; margin: 16px 16px 16px 16px;
} }
::-webkit-scrollbar{ ::-webkit-scrollbar{
@@ -307,7 +295,7 @@ a:hover {color: var(--highlight_color); text-decoration: underline;}
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
text-align: left; text-align: left;
max-width: 35em; max-width: 40em;
} }
table:not(.form) {border-collapse: collapse; width: 100%;} table:not(.form) {border-collapse: collapse; width: 100%;}
tr:not(.form) {border-bottom: 1px var(--layer_2_color_border) solid;} tr:not(.form) {border-bottom: 1px var(--layer_2_color_border) solid;}

11
res/template/404.html
View File

@@ -6,10 +6,9 @@
</head> </head>
<body> <body>
<div id="body" class="body"> {{template "page_top" .}}
{{template "menu" .}} <h1>This page does not exist!</h1>
<div class="page_content"><div class="limit_width">
<h1>This page does not exist!</h1>
<p> <p>
If you came here by a link from this very same website you can If you came here by a link from this very same website you can
tell me about it on tell me about it on
@@ -22,8 +21,8 @@
<p> <p>
Bye! Bye!
</p> </p>
{{template "footer"}} </div></div>
</div> {{template "page_bottom"}}
{{template "analytics"}} {{template "analytics"}}
</body> </body>
</html> </html>

11
res/template/500.html
View File

@@ -6,10 +6,9 @@
</head> </head>
<body> <body>
<div id='body' class="body"> <h1>You broke pixeldrain</h1>
{{template "menu" .}} {{template "page_top" .}}
<br/> <div class="page_content"><div class="limit_width">
<h1>You broke pixeldrain</h1>
<p> <p>
Great job. Great job.
</p> </p>
@@ -19,8 +18,8 @@
take a look at it. You can try again in a few minutes (or take a look at it. You can try again in a few minutes (or
hours), or go back to the <a href='/'>home page</a> and start over. hours), or go back to the <a href='/'>home page</a> and start over.
</p> </p>
{{template "footer"}} </div></div>
</div> {{template "page_bottom" .}}
{{template "analytics"}} {{template "analytics"}}
</body> </body>
</html> </html>

119
res/template/about.html Normal file
View File

@@ -0,0 +1,119 @@
{{define "about"}}<!DOCTYPE html>
<html>
<head>
{{template "meta_tags" "About"}}
{{template "user_style" .}}
</head>
<body>
{{template "page_top" .}}
<h1>About Pixeldrain</h1>
<div class="page_content"><div class="limit_width">
<h2>Questions and Answers</h2>
<h3>For how long will my files be stored?</h3>
<p>
Files will be removed if they have not been viewed for 60 days.
A view is counted when someone visits the file's download page
(pixeldrain.com/u/somefile) or views the file through a list the
file is included in (pixeldrain.com/l/somelist).
</p>
<p>
You cannot delete files yourself. Once a file has been uploaded
to pixeldrain it will stay there for at least 60 days. If you
accidentally upload something you shouldn't have, just don't
share the link. The file will expire eventually. File links are
not indexed or published anywhere. As long as you don't share it
nobody will see it.
</p>
<h3>Does pixeldrain cost any money?</h3>
<p>
No, pixeldrain is completely free at the moment. While there is
an advertisement on the file downloading page, it doesn't
generate nearly enough revenue to pay for maintaining this
service. That's why I'd really appreciate it if you could spare
some coins. Possible methods for donating are:
</p>
<ul>
<li>Bitcoin: <a href="bitcoin:1Ne7hGuvnfz9EFTRD3PLWVeaJTX9oA1QUr?label=Pixeldrain%20Donation">1Ne7hGuvnfz9EFTRD3PLWVeaJTX9oA1QUr</a></li>
<li>
BasicAttentionToken: Donate BAT by clicking the BAT icon in
your address bar. If you don't have Brave browser yet you
can download it here:
<a class="button button_highlight" href="https://brave.com/pix009" target="_blank">Install Brave</a>.
Installing and using Brave with this referral link also
counts as a 5$ donation.
</li>
<li>
Siacoin:
26117c19ca3975b315d663dcbbc19cf9c07274f441689d4392ed380b2337589ef1aacfbdc93f
(this address points directly at the storage backend.
Donations will be used for paying storage contracts with Sia
hosts)
</li>
<li>
PayPal:
<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>
<h3>Do I need to register an account?</h3>
<p>
Not if you don't want to. You're free to use pixeldrain
completely anonymously. Without a pixeldrain account you can
upload files, download files and create lists of files. And view
your uploaded files on the <a href="/history">history page</a>.
This page only shows files which were uploaded anonymously in
this web browser.
</p>
<p>
By registering an account on pixeldrain you will be able to
access your files from any device with a web browser. Files you
upload and lists you create will be linked to your pixeldrain
account and will show up on your <a href="/user">personal home
page</a>.
</p>
<h3>What cookies does pixeldrain use?</h3>
<p>
When uploading a file pixeldrain will install a cookie named
'pduploads'. This cookie keeps a dot-separated list of all files
you have uploaded anonymously in this browser. This cookie is
<b>only</b> used for viewing your upload history.
</p>
<p>
When logging in to a pixeldrain account a cookie named
'pd_auth_key' will be installed. This cookie keeps your login
session active. When you delete it you will be logged out of
your account.
</p>
<p>
When you use the style selector at the bottom of this page a
cookie called 'style' will be set. This cookie controls the
appearance of the website for you.
</p>
<h2>Legality</h2>
<p>
I cannot be held liable for any illegal and / or copyrighted
material that's uploaded by the users of this application.
Files uploaded to this website are subjected to local laws. If
laws are being broken, and I've been notified of the fact I'll
have to delete the offending content (as the server does not
support geo filtering yet). If you find any files on this domain
that break the law, please contact me at
<a href="mailto:abuse@pixeldrain.com">abuse@pixeldrain.com</a>,
and I'll take care of it.
<br/>Please share responsibly.
</p>
<p>
For other questions you can reach me at
<a href="mailto:support@pixeldrain.com">support@pixeldrain.com</a>
</p>
</div></div>
{{template "page_bottom"}}
{{template "analytics"}}
</body>
</html>
{{end}}

4
res/template/account/file_manager.html
View File

@@ -44,7 +44,7 @@
</head> </head>
<body> <body>
{{template "menu" .}} {{template "page_top" .}}
<br/> <br/>
<div class="file_manager"> <div class="file_manager">
<div class="nav_bar highlight_light"> <div class="nav_bar highlight_light">
@@ -73,7 +73,7 @@
</div> </div>
</div> </div>
{{template "page_bottom" .}}
{{template "analytics"}} {{template "analytics"}}
</body> </body>
</html> </html>

77
res/template/account/lists.html
View File

@@ -1,77 +0,0 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>List Browser ~ PixelDrain</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="/res/style/home.css"/>
<link rel="stylesheet" href="/res/style/season.css"/>
<link rel="stylesheet" href="/res/style/history.css"/>
<link rel="stylesheet" href="/res/style/menu.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 th:include="fragments :: background-pattern" th:inline="text"></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."/>
</head>
<body>
<div id='body' class="body">
<div th:replace="fragments :: menu"></div>
<br/>
<div style="margin-left: 0; margin-right: 0; text-align: center; font-size: 22px;">
<a th:href="'/account/lists?pageid=' + ${pageid - 1}">Previous</a>
&nbsp;&nbsp;&#60;--&nbsp;&nbsp;<span th:text="${pageid}">0</span>&nbsp;&nbsp;--&#62;&nbsp;&nbsp;
<a th:href="'/account/lists?pageid=' + ${pageid + 1}">Nextious</a>
</div>
<div id="uploadedFiles" class="uploadedFiles">
<div class="uploadItem" th:each="list,interation : ${lists}" th:inline="text">
<a th:href="'/l/' + ${list.get('id')}" target="_blank">
<img th:src="${list.get('image')}" alt="" class="uploadItemImage"/>
</a>
<a th:href="'/l/' + ${list.get('id')}" target="_blank" class="uploadItemText">
[[${list.get('title')}]]
<br/>
[[${list.get('fileCount')}]] Items
<br/>
<span th:text="${list.get('date')}"></span>
</a>
</div>
</div>
<div style="margin-left: 0; margin-right: 0; text-align: center; font-size: 22px;">
<a th:href="'/account/lists?pageid=' + ${pageid - 1}">Previous</a>
&nbsp;&nbsp;&#60;--&nbsp;&nbsp;<span th:text="${pageid}">0</span>&nbsp;&nbsp;--&#62;&nbsp;&nbsp;
<a th:href="'/account/lists?pageid=' + ${pageid + 1}">Nextious</a>
</div>
</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>
</body>
</html>

44
res/template/account/logout.html
View File

@@ -5,31 +5,33 @@
{{template "user_style" .}} {{template "user_style" .}}
</head> </head>
<body> <body>
<div id='body' class="body"> {{template "page_top" .}}
{{template "menu" .}} <h1>Please confirm that you want to log out of your pixeldrain account</h1>
<h1>Please confirm that you want to log out of your pixeldrain account</h1> <div class="page_content">
<form method="POST" action="/logout" class="highlight_light"> <br/>
<form method="POST" action="/logout">
<input type="submit" value="I want to log out of pixeldrain on this computer" class="button_highlight"/> <input type="submit" value="I want to log out of pixeldrain on this computer" class="button_highlight"/>
</form> </form>
<br/> <div class="limit_width">
<h2>Why do I need to confirm my logout?</h2> <br/>
<p> <h2>Why do I need to confirm my logout?</h2>
We need you to confirm your action so we can be sure that you <p>
really requested a logout. If we didn't do this, anyone (or any We need you to confirm your action so we can be sure that you
website) would be able to send you to this page and you would really requested a logout. If we didn't do this, anyone (or any
automatically get logged out of pixeldrain, which would be very website) would be able to send you to this page and you would
annoying. automatically get logged out of pixeldrain, which would be very
</p> annoying.
<p> </p>
To prevent this from happening we're verifying that you actually <p>
want to log out by making you click this button. Because this To prevent this from happening we're verifying that you actually
logout button triggers a different request type than normal want to log out by making you click this button. Because this
page visit we can confirm that you really want to log out. logout button triggers a different request type than normal
</p> page visit we can confirm that you really want to log out.
</p>
{{template "footer"}} </div>
</div> </div>
{{template "page_bottom" .}}
{{template "analytics"}} {{template "analytics"}}
</body> </body>
</html> </html>

95
res/template/account/user_files.html
View File

@@ -8,55 +8,56 @@
<body> <body>
{{template "page_top" .}} {{template "page_top" .}}
<br/> <h1>My Files</h1>
<div class="centered"> <div class="page_content">
These files were uploaded while logged in to your pixeldrain account, <p>
<a href="/history">click here</a> to view files uploaded anonymously These files were uploaded while logged in to your pixeldrain account,
in this browser. <a href="/history">click here</a> to view files uploaded anonymously
</div> in this browser.
<br/> </p>
<br/>
{{$limit := 200}}
{{$page := .URLQuery.Get "page" | pageNr}}
{{$files := .PixelAPI.UserFiles $page $limit}}
<div class="highlight_dark">
{{if ne $page 0}}
<a href="?page={{sub $page 4}}" class="button">🡄 4 Pages</a>
<a href="?page={{sub $page 2}}" class="button">⬅ 2 Pages</a>
<a href="?page={{sub $page 1}}" class="button button_highlight" style="margin-right: 2em;">← Last Page</a>
{{end}}
Page {{$page}}
{{if len $files.Files | eq $limit}}
<a href="?page={{add $page 1}}" class="button button_highlight" style="margin-left: 2em;">Next Page →</a>
<a href="?page={{add $page 2}}" class="button">2 Pages ⮕</a>
<a href="?page={{add $page 4}}" class="button">4 Pages 🡆</a>
{{end}}
</div>
<br/>
{{range $files.Files}}<!--
--><a class="file_button" href="/u/{{.ID}}" target="_blank">
<img src="{{$.APIEndpoint}}/file/{{.ID}}/thumbnail" alt="{{.Name}}" />
<span style="color: var(--highlight_color);">{{.Name}}</span>
<br/> <br/>
{{.DateUpload.Format "2006-01-02 15:04:05"}}
</a><!--
-->{{end}}
<br/> {{$limit := 200}}
<div class="highlight_dark"> {{$page := .URLQuery.Get "page" | pageNr}}
{{if ne $page 0}} {{$files := .PixelAPI.UserFiles $page $limit}}
<a href="?page={{sub $page 4}}" class="button">🡄 4 Pages</a> <div class="highlight_dark">
<a href="?page={{sub $page 2}}" class="button">⬅ 2 Pages</a> {{if ne $page 0}}
<a href="?page={{sub $page 1}}" class="button button_highlight" style="margin-right: 2em;">← Last Page</a> <a href="?page={{sub $page 4}}" class="button">🡄 4 Pages</a>
{{end}} <a href="?page={{sub $page 2}}" class="button">⬅ 2 Pages</a>
Page {{$page}} <a href="?page={{sub $page 1}}" class="button button_highlight" style="margin-right: 2em;">← Last Page</a>
{{if len $files.Files | eq $limit}} {{end}}
<a href="?page={{add $page 1}}" class="button button_highlight" style="margin-left: 2em;">Next Page →</a> Page {{$page}}
<a href="?page={{add $page 2}}" class="button">2 Pages ⮕</a> {{if len $files.Files | eq $limit}}
<a href="?page={{add $page 4}}" class="button">4 Pages 🡆</a> <a href="?page={{add $page 1}}" class="button button_highlight" style="margin-left: 2em;">Next Page →</a>
{{end}} <a href="?page={{add $page 2}}" class="button">2 Pages ⮕</a>
<a href="?page={{add $page 4}}" class="button">4 Pages 🡆</a>
{{end}}
</div>
<br/>
{{range $files.Files}}<!--
--><a class="file_button" href="/u/{{.ID}}" target="_blank">
<img src="{{$.APIEndpoint}}/file/{{.ID}}/thumbnail" alt="{{.Name}}" />
<span style="color: var(--highlight_color);">{{.Name}}</span>
<br/>
{{.DateUpload.Format "2006-01-02 15:04:05"}}
</a><!--
-->{{end}}
<br/>
<div class="highlight_dark">
{{if ne $page 0}}
<a href="?page={{sub $page 4}}" class="button">🡄 4 Pages</a>
<a href="?page={{sub $page 2}}" class="button">⬅ 2 Pages</a>
<a href="?page={{sub $page 1}}" class="button button_highlight" style="margin-right: 2em;">← Last Page</a>
{{end}}
Page {{$page}}
{{if len $files.Files | eq $limit}}
<a href="?page={{add $page 1}}" class="button button_highlight" style="margin-left: 2em;">Next Page →</a>
<a href="?page={{add $page 2}}" class="button">2 Pages ⮕</a>
<a href="?page={{add $page 4}}" class="button">4 Pages 🡆</a>
{{end}}
</div>
</div> </div>
{{template "page_bottom" .}} {{template "page_bottom" .}}

10
res/template/account/user_home.html
View File

@@ -9,12 +9,9 @@
<body> <body>
{{template "page_top" .}} {{template "page_top" .}}
<div class="checkers inset highlight_dark"> <h1>Welcome home, {{.Username}}!</h1>
<h1>Welcome home, {{.Username}}!</h1>
</div>
<div class="centered">
<div class="page_content"><div class="limit_width">
<h2>Actions</h2> <h2>Actions</h2>
<ul> <ul>
<li><a href="/user/change_password" class="button">Change my password</a></li> <li><a href="/user/change_password" class="button">Change my password</a></li>
@@ -50,7 +47,8 @@
<br/> <br/>
<a href="/user/lists" class="button">...All my lists</a> <a href="/user/lists" class="button">...All my lists</a>
</div> </div>
</div> <br/><br/>
</div></div>
{{template "page_bottom" .}} {{template "page_bottom" .}}

89
res/template/account/user_lists.html
View File

@@ -7,50 +7,53 @@
</head> </head>
<body> <body>
{{template "menu" .}} {{template "page_top" .}}
{{$limit := 200}} <h1>My Lists</h1>
{{$page := .URLQuery.Get "page" | pageNr}} <div class="page_content">
{{$lists := .PixelAPI.UserLists $page $limit}} {{$limit := 200}}
<div class="highlight_dark"> {{$page := .URLQuery.Get "page" | pageNr}}
{{if ne $page 0}} {{$lists := .PixelAPI.UserLists $page $limit}}
<a href="?page={{sub $page 4}}" class="button">🡄 4 Pages</a> <div class="highlight_dark">
<a href="?page={{sub $page 2}}" class="button">⬅ 2 Pages</a> {{if ne $page 0}}
<a href="?page={{sub $page 1}}" class="button button_highlight" style="margin-right: 2em;">← Last Page</a> <a href="?page={{sub $page 4}}" class="button">🡄 4 Pages</a>
{{end}} <a href="?page={{sub $page 2}}" class="button">⬅ 2 Pages</a>
Page {{$page}} <a href="?page={{sub $page 1}}" class="button button_highlight" style="margin-right: 2em;">← Last Page</a>
{{if len $lists.Lists | eq $limit}} {{end}}
<a href="?page={{add $page 1}}" class="button button_highlight" style="margin-left: 2em;">Next Page →</a> Page {{$page}}
<a href="?page={{add $page 2}}" class="button">2 Pages ⮕</a> {{if len $lists.Lists | eq $limit}}
<a href="?page={{add $page 4}}" class="button">4 Pages 🡆</a> <a href="?page={{add $page 1}}" class="button button_highlight" style="margin-left: 2em;">Next Page →</a>
{{end}} <a href="?page={{add $page 2}}" class="button">2 Pages ⮕</a>
<a href="?page={{add $page 4}}" class="button">4 Pages 🡆</a>
{{end}}
</div>
<br/>
{{range $lists.Lists}}<!--
--><a class="file_button" href="/l/{{.ID}}" target="_blank">
<img src="{{$.APIEndpoint}}/list/{{.ID}}/thumbnail" alt="{{.Title}}" />
<span style="color: var(--highlight_color);">{{.Title}}</span>
({{.FileCount}} Files)
<br/>
{{.DateCreated.Format "2006-01-02 15:04:05"}}
</a><!--
-->{{end}}
<br/>
<div class="highlight_dark">
{{if ne $page 0}}
<a href="?page={{sub $page 4}}" class="button">🡄 4 Pages</a>
<a href="?page={{sub $page 2}}" class="button">⬅ 2 Pages</a>
<a href="?page={{sub $page 1}}" class="button button_highlight" style="margin-right: 2em;">← Last Page</a>
{{end}}
Page {{$page}}
{{if len $lists.Lists | eq $limit}}
<a href="?page={{add $page 1}}" class="button button_highlight" style="margin-left: 2em;">Next Page →</a>
<a href="?page={{add $page 2}}" class="button">2 Pages ⮕</a>
<a href="?page={{add $page 4}}" class="button">4 Pages 🡆</a>
{{end}}
</div>
</div> </div>
<br/> {{template "page_bottom" .}}
{{range $lists.Lists}}<!--
--><a class="file_button" href="/l/{{.ID}}" target="_blank">
<img src="{{$.APIEndpoint}}/list/{{.ID}}/thumbnail" alt="{{.Title}}" />
<span style="color: var(--highlight_color);">{{.Title}}</span>
({{.FileCount}} Files)
<br/>
{{.DateCreated.Format "2006-01-02 15:04:05"}}
</a><!--
-->{{end}}
<br/>
<div class="highlight_dark">
{{if ne $page 0}}
<a href="?page={{sub $page 4}}" class="button">🡄 4 Pages</a>
<a href="?page={{sub $page 2}}" class="button">⬅ 2 Pages</a>
<a href="?page={{sub $page 1}}" class="button button_highlight" style="margin-right: 2em;">← Last Page</a>
{{end}}
Page {{$page}}
{{if len $lists.Lists | eq $limit}}
<a href="?page={{add $page 1}}" class="button button_highlight" style="margin-left: 2em;">Next Page →</a>
<a href="?page={{add $page 2}}" class="button">2 Pages ⮕</a>
<a href="?page={{add $page 4}}" class="button">4 Pages 🡆</a>
{{end}}
</div>
{{template "analytics"}} {{template "analytics"}}
</body> </body>
</html> </html>

11
res/template/account/user_settings.html
View File

@@ -7,16 +7,17 @@
</head> </head>
<body> <body>
<div id='body' class="body"> {{template "page_top" .}}
{{template "menu" .}} <h1>User configuration</h1>
<h1>User configuration</h1> <div class="page_content"><div class="limit_width">
<p>What would you like to do?</p> <p>What would you like to do?</p>
<ul> <ul>
<li><a href="/user/change_password">Change my password</a></li> <li><a href="/user/change_password">Change my password</a></li>
</ul> </ul>
{{template "footer"}} </div></div>
</div> {{template "page_bottom" .}}
{{template "analytics"}} {{template "analytics"}}
</body> </body>
</html> </html>

224
res/template/admin.html
View File

@@ -8,130 +8,130 @@
</head> </head>
<body> <body>
{{$isAdmin := .PixelAPI.UserIsAdmin}} {{$isAdmin := .PixelAPI.UserIsAdmin}}
<div id="body" class="body" style="max-width: 100%"> {{template "page_top" .}}
{{template "menu" .}} <div class="page_content">
{{if $isAdmin.IsAdmin}} {{if $isAdmin.IsAdmin}}
<h3>Bandwidth and views</h3>
<div class="highlight_dark">
<button onclick="days = 7; interval = 60; setData();">Week</button>
<button onclick="days = 14; interval = 60; setData();">Two Weeks</button>
<button onclick="days = 21; interval = 60; setData();">Three Weeks</button>
<button onclick="days = 30; interval = 1440; setData();">Month</button>
<button onclick="days = 60; interval = 1440; setData();">Two Months</button>
<button onclick="days = 91; interval = 1440; setData();">Quarter</button>
</div>
<div id="chart_container" class="chart-container" style="position: relative; width: 100%; height: auto;">
<canvas id="bandwidth_chart"></canvas>
</div>
<h3>Bandwidth and views</h3> <script src="/res/script/jquery.js"></script>
<div class="highlight_dark"> <script src="/res/misc/chartjs/Chart.min.js"></script>
<button onclick="days = 7; interval = 60; setData();">Week</button> <script>
<button onclick="days = 14; interval = 60; setData();">Two Weeks</button> Chart.defaults.global.defaultFontColor = "#b3b3b3";
<button onclick="days = 21; interval = 60; setData();">Three Weeks</button> Chart.defaults.global.defaultFontSize = 15;
<button onclick="days = 30; interval = 1440; setData();">Month</button> Chart.defaults.global.defaultFontFamily = "Ubuntu";
<button onclick="days = 60; interval = 1440; setData();">Two Months</button> Chart.defaults.global.aspectRatio = 2.5;
<button onclick="days = 91; interval = 1440; setData();">Quarter</button> Chart.defaults.global.elements.point.radius = 0;
</div> Chart.defaults.global.tooltips.mode = "index";
<div id="chart_container" class="chart-container" style="position: relative; width: 100%; height: auto;"> Chart.defaults.global.tooltips.axis = "x";
<canvas id="bandwidth_chart"></canvas> Chart.defaults.global.tooltips.intersect = false;
</div>
<script src="/res/script/jquery.js"></script> var days = 7;
<script src="/res/misc/chartjs/Chart.min.js"></script> var interval = 60;
<script> var graph = new Chart(
Chart.defaults.global.defaultFontColor = "#b3b3b3"; document.getElementById('bandwidth_chart'),
Chart.defaults.global.defaultFontSize = 15; {
Chart.defaults.global.defaultFontFamily = "Ubuntu"; type: 'line',
Chart.defaults.global.aspectRatio = 2.5; data: {
Chart.defaults.global.elements.point.radius = 0; datasets: [
Chart.defaults.global.tooltips.mode = "index";
Chart.defaults.global.tooltips.axis = "x";
Chart.defaults.global.tooltips.intersect = false;
var days = 7;
var interval = 60;
var graph = new Chart(
document.getElementById('bandwidth_chart'),
{
type: 'line',
data: {
datasets: [
{
label: "Bandwidth",
backgroundColor: "rgba(64, 255, 64, .05)",
borderColor: "rgba(128, 255, 128, 1)",
borderWidth: 1.5,
lineTension: 0.1,
fill: true,
yAxisID: "y_bandwidth"
}, {
label: "Views",
backgroundColor: "rgba(64, 64, 255, .1)",
borderColor: "rgba(128, 128, 255, 1)",
borderWidth: 1.5,
lineTension: 0.1,
fill: true,
yAxisID: "y_views"
}
]
},
options: {
scales: {
yAxes: [
{ {
type: "linear", label: "Bandwidth",
display: true, backgroundColor: "rgba(64, 255, 64, .05)",
position: "left", borderColor: "rgba(128, 255, 128, 1)",
id: "y_bandwidth", borderWidth: 1.5,
scaleLabel: { lineTension: 0.1,
display: true, fill: true,
labelString: "Bandwidth" yAxisID: "y_bandwidth"
},
ticks: {
callback: function(value, index, values) {
return Math.round((value*8/1e6)/(interval*60)) + " Mbps";
}
},
gridLines: {
color: "rgba(100, 255, 100, .1)"
}
}, { }, {
type: "linear", label: "Views",
display: true, backgroundColor: "rgba(64, 64, 255, .1)",
position: "right", borderColor: "rgba(128, 128, 255, 1)",
id: "y_views", borderWidth: 1.5,
scaleLabel: { lineTension: 0.1,
display: true, fill: true,
labelString: "Views" yAxisID: "y_views"
},
gridLines: {
color: "rgba(128, 128, 255, .2)"
}
}
],
xAxes: [
{
ticks: {
maxRotation: 20
},
gridLines: {
display: false
}
} }
] ]
},
options: {
scales: {
yAxes: [
{
type: "linear",
display: true,
position: "left",
id: "y_bandwidth",
scaleLabel: {
display: true,
labelString: "Bandwidth"
},
ticks: {
callback: function(value, index, values) {
return Math.round((value*8/1e6)/(interval*60)) + " Mbps";
}
},
gridLines: {
color: "rgba(100, 255, 100, .1)"
}
}, {
type: "linear",
display: true,
position: "right",
id: "y_views",
scaleLabel: {
display: true,
labelString: "Views"
},
gridLines: {
color: "rgba(128, 128, 255, .2)"
}
}
],
xAxes: [
{
ticks: {
maxRotation: 20
},
gridLines: {
display: false
}
}
]
}
} }
} }
);
function setData(){
$.get(apiEndpoint+"/admin/files/timeseries?days="+days+"&interval="+interval, function(response){
console.log(response);
if (response.success) {
window.graph.data.labels = response.labels;
window.graph.data.datasets[0].data = response.downloads;
window.graph.data.datasets[1].data = response.views;
window.graph.update();
}
});
} }
);
function setData(){ setData();
$.get(apiEndpoint+"/admin/files/timeseries?days="+days+"&interval="+interval, function(response){ </script>
console.log(response);
if (response.success) {
window.graph.data.labels = response.labels;
window.graph.data.datasets[0].data = response.downloads;
window.graph.data.datasets[1].data = response.views;
window.graph.update();
}
});
}
setData(); {{else}}
</script> <h1 style="text-align: center;">;)</h1>
{{end}}
{{else}} </div>
<h1 style="text-align: center;">;)</h1> {{template "page_bottom" .}}
{{end}}
{{template "footer"}}
</div> </div>
</body> </body>
</html> </html>

12
res/template/apidoc.html
View File

@@ -30,9 +30,10 @@
</head> </head>
<body> <body>
<div id='body' class="body"> {{template "page_top" .}}
{{template "menu" .}} <h1>Pixeldrain API Documentation</h1>
<h1>Pixeldrain API Documentation</h1>
<div class="page_content"><div class="limit_width">
<p> <p>
Welcome to the Pixeldrain API documentation. Welcome to the Pixeldrain API documentation.
<br/> <br/>
@@ -83,9 +84,8 @@
{{template "api-filesystem-path-post"}} {{template "api-filesystem-path-post"}}
{{template "api-filesystem-path-get"}} {{template "api-filesystem-path-get"}}
{{template "api-filesystem-path-delete"}} {{template "api-filesystem-path-delete"}}
</div></div>
{{template "footer"}} {{template "page_bottom" .}}
</div>
{{template "analytics"}} {{template "analytics"}}
</body> </body>
</html> </html>

8
res/template/donation.html
View File

@@ -6,8 +6,8 @@
{{template "user_style" .}} {{template "user_style" .}}
</head> </head>
<body> <body>
<div id="body" class="body"> {{template "page_top" .}}
{{template "menu" .}} <div class="page_content"><div class="limit_width">
<br/> <br/>
{{$success := .URLQuery.Get "success"}} {{$success := .URLQuery.Get "success"}}
{{if eq $success "true"}} {{if eq $success "true"}}
@@ -33,8 +33,8 @@
Sincerely,<br/> Sincerely,<br/>
Fornax Fornax
{{end}} {{end}}
{{template "footer"}} </div></div>
</div> {{template "page_bottom"}}
{{template "analytics"}} {{template "analytics"}}
</body> </body>
</html> </html>

22
res/template/file_not_found.html
View File

@@ -6,10 +6,9 @@
</head> </head>
<body> <body>
<div id="body" class="body"> {{template "page_top" .}}
{{template "menu" .}} <h1>404, File Not Found!</h1>
<br/> <div class="page_content"><div class="limit_width">
<h1>404, File Not Found!</h1>
<p> <p>
This file does not exist, or it has been removed. Possible This file does not exist, or it has been removed. Possible
reasons for this are: reasons for this are:
@@ -24,8 +23,8 @@
I'm sorry for the inconvenience. I'm sorry for the inconvenience.
</p> </p>
{{template "footer"}} </div></div>
</div> {{template "page_bottom" .}}
{{template "analytics"}} {{template "analytics"}}
</body> </body>
</html> </html>
@@ -38,10 +37,9 @@
</head> </head>
<body> <body>
<div id="body" class="body"> {{template "page_top" .}}
{{template "menu" .}} <h1>404, List Not Found!</h1>
<br/> <div class="page_content"><div class="limit_width">
<h1>404, List Not Found!</h1>
<p> <p>
This list does not exist, or it has been removed. Possible This list does not exist, or it has been removed. Possible
reasons for this are: reasons for this are:
@@ -56,8 +54,8 @@
I'm sorry for the inconvenience. I'm sorry for the inconvenience.
</p> </p>
{{template "footer"}} </div></div>
</div> {{template "page_bottom" .}}
{{template "analytics"}} {{template "analytics"}}
</body> </body>
</html> </html>

2
res/template/file_viewer.html
View File

@@ -13,8 +13,6 @@
<link rel="icon" sizes="256x256" href="/res/img/pixeldrain_big.png"/> <link rel="icon" sizes="256x256" href="/res/img/pixeldrain_big.png"/>
<meta name="theme-color" content="#75AD38"/> <meta name="theme-color" content="#75AD38"/>
{{template "bgpattern"}}
{{.OGData}} {{.OGData}}
<script type="text/javascript"> <script type="text/javascript">

3
res/template/fragments/bgpattern.html
View File

@@ -1,3 +0,0 @@
{{define "bgpattern"}}
<style>.checkers{background-image: url("/res/img/{{bgPattern}}");}</style>
{{end}}

13
res/template/fragments/form.html
View File

@@ -24,7 +24,7 @@
<!-- The invisible username field is so browsers know which user the form was for --> <!-- The invisible username field is so browsers know which user the form was for -->
<input type="text" autocomplete="username" value="{{.Username}}" style="display: none;" readonly="readonly"/> <input type="text" autocomplete="username" value="{{.Username}}" style="display: none;" readonly="readonly"/>
{{end}} {{end}}
<table style="margin-left: auto; margin-right: auto; text-align: left; max-width: 30em;"> <table class="form">
{{range $index, $field := .Fields}} {{range $index, $field := .Fields}}
<tr class="form"> <tr class="form">
<td>{{$field.Label}}</td> <td>{{$field.Label}}</td>
@@ -91,11 +91,12 @@
<body> <body>
<div id='body' class="body"> <div id='body' class="body">
{{template "menu" .}} {{template "page_top" .}}
<div class="page_content"><div class="limit_width">
{{template "form" .Form}} {{template "form" .Form}}
<br/>
{{template "footer"}} </div></div>
{{template "page_bottom" .}}
</div> </div>
{{template "analytics"}} {{template "analytics"}}

3
res/template/fragments/meta_tags.html
View File

@@ -2,12 +2,11 @@
<title>{{.}} ~ PixelDrain</title> <title>{{.}} ~ PixelDrain</title>
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="/res/style/layout.css"/> <link rel="stylesheet" href="/res/style/layout.css?v2"/>
<link rel="shortcut icon" href="/res/img/tray32.png"/> <link rel="shortcut icon" href="/res/img/tray32.png"/>
<meta name="theme-color" content="#75AD38"/> <meta name="theme-color" content="#75AD38"/>
<link rel="icon" sizes="180x180" href="/res/img/pixeldrain.png"/> <link rel="icon" sizes="180x180" href="/res/img/pixeldrain.png"/>
<link rel="icon" sizes="256x256" href="/res/img/pixeldrain_big.png"/> <link rel="icon" sizes="256x256" href="/res/img/pixeldrain_big.png"/>
{{template "bgpattern"}}
<meta name="description" content="Pixeldrain is a free file sharing service, you <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. can upload any file and you will be given a shareable link right away.

64
res/template/fragments/page_wrap.html
View File

@@ -1,55 +1,53 @@
{{define "page_top"}} {{define "page_top"}}
<div id="page_wrapper" class="page_wrapper"> <div id="page_wrapper" class="page_wrapper">
<div id="page_header" class="page_header highlight_headerbar navigation"> <button id="button_toggle_navigation" class="button_toggle_navigation" onClick="toggleMenu();">☰</button>
<button id="button_toggle_toolbar" class="button_toggle_toolbar" onClick="toggleMenu();">☰</button>
<span>Pixeldrain ~ Free file sharing</span>
</div>
<div id="page_content_wrapper" class="page_content_wrapper"> <div id="page_navigation" class="page_navigation">
<div id="page_navigation" class="page_navigation"> <a href="/">Home</a>
<a href="/">Home</a> <hr/>
<hr/> {{if .Authenticated}}<a href="/user">{{.Username}}</a>
{{if .Authenticated}}<a href="/user">{{.Username}}</a> <a href="/user/files">My Files</a>
<a href="{{if .Authenticated}}/user/files{{else}}/history{{end}}">My&nbsp;Files</a> <a href="/user/lists">My Lists</a>
{{if .Authenticated}}<a href="/user/lists">My&nbsp;Lists</a>{{end}} <a href="/logout">Log out</a>
<a href="/logout" style="vertical-align: 0.6em; font-size: 0.9em; padding: 1px;">(Log out)</a>{{else}} {{else}}
<a href="/login">Login</a> <a href="/login">Login</a>
<a href="/register">Register</a> <a href="/register">Register</a>
{{end}} <a href="/history">Upload History</a>
<hr/> {{end}}
<a href="/api">API</a> <hr/>
</div> <a href="/about">About</a>
<div id="page_content" class="page_content"> <!--<a href="/technology">Technology</a>-->
<a href="/api">API</a>
</div>
<div id="page_body" class="page_body">
{{end}} {{end}}
{{define "page_bottom"}} {{define "page_bottom"}}
<br/> <br/>
<div class="checkers inset" style="height: 100px;"></div> <div class="highlight_dark" style="margin-bottom: 100px;">
<div class="highlight_dark"> Pixeldrain is a product by <a href="//fornaxian.com" target="_blank">Fornaxian Technologies</a> |
Pixeldrain is a product by <a href="//fornaxian.com" target="_blank">Fornaxian Technologies</a> | Twitter:&nbsp;<a href="https://twitter.com/Fornax96" target="_blank">@Fornax96</a>
Twitter:&nbsp;<a href="https://twitter.com/Fornax96" target="_blank">@Fornax96</a> Reddit:&nbsp;<a href="https://reddit.com/r/pixeldrain" target="_blank">/r/pixeldrain</a>
Reddit:&nbsp;<a href="https://reddit.com/r/pixeldrain" target="_blank">/r/pixeldrain</a> Medium:&nbsp;<a href="https://medium.com/pixeldrain" target="_blank">Pixeldrain</a>
Medium:&nbsp;<a href="https://medium.com/pixeldrain" target="_blank">Pixeldrain</a> </div>
</div> </div><!-- end page_body -->
</div><!-- end page_content -->
</div><!-- end page_content_wrapper -->
</div><!-- end page_wrapper--> </div><!-- end page_wrapper-->
<script> <script>
var nav = document.getElementById("page_navigation"); var nav = document.getElementById("page_navigation");
var content = document.getElementById("page_content"); var body = document.getElementById("page_body");
function toggleMenu() { function toggleMenu() {
if (nav.offsetLeft === 0) { if (nav.offsetLeft === 0) {
// Menu is visible // Menu is visible
nav.style.left = -nav.clientWidth - 10 + "px"; nav.style.left = -nav.clientWidth + "px";
content.style.left = "0"; body.style.left = "0";
} else { } else {
// Menu is hidden // Menu is hidden
nav.style.left = "0"; nav.style.left = "0";
content.style.left = nav.clientWidth + "px"; body.style.left = nav.clientWidth + "px";
} }
} }
</script> </script>

9
res/template/fragments/user_style.html
View File

@@ -1,5 +1,14 @@
{{define "user_style"}} {{define "user_style"}}
<style> <style>
{{.UserStyle}} {{.UserStyle}}
body,
.checkers {
background-image: url("/res/img/{{bgPattern}}");
}
:root {
--background_pattern: url("/res/img/{{bgPattern}}");
}
</style> </style>
{{end}} {{end}}

20
res/template/history.html
View File

@@ -11,16 +11,18 @@
</head> </head>
<body> <body>
<div id='body' class="body"> <div id='body' class="body">
{{template "menu" .}} {{template "page_top" .}}
<p> <h1>Upload History</h1>
Here are all files you have previously uploaded to PixelDrain using this computer. <div class="page_content"><div class="limit_width">
This data is saved locally in your web browser and gets updated every time you upload a file through your current browser. <p>
</p> Here are all files you have previously uploaded to PixelDrain using this computer.
<br/> This data is saved locally in your web browser and gets updated every time you upload a file through your current browser.
</p>
<br/>
<div id="uploadedFiles" class="highlight_dark"></div> <div id="uploadedFiles" class="highlight_dark"></div>
{{template "footer"}} </div></div>
</div> {{template "page_bottom" .}}
<script src="/res/script/history.js"></script> <script src="/res/script/history.js"></script>
{{template "analytics"}} {{template "analytics"}}
</body> </body>

206
res/template/home.html
View File

@@ -9,153 +9,75 @@
<body> <body>
{{template "page_top" .}} {{template "page_top" .}}
<div class="checkers highlight_dark"> <img id="header_image" class="header_image" src="/res/img/header_neuropol.png" alt="Header image"/>
<img id="header_image" class="header_image" src="/res/img/header_neuropol.png" alt="Header image"/>
</div>
<br/> <br/>
<input id="file_input_field" type="file" name="file" multiple="multiple"/> <div class="page_content">
<button id="select_file_button" class="big_button button_highlight">Upload Files</button> <input id="file_input_field" type="file" name="file" multiple="multiple"/>
<button id="text_button" class="big_button button_highlight" onClick="window.location.href = '/t/'">Upload Text</button> <button id="select_file_button" class="big_button button_highlight">Upload Files</button>
<br/><br/> <button id="text_button" class="big_button button_highlight" onClick="window.location.href = '/t/'">Upload Text</button>
<br/>
By uploading files to Pixeldrain you accept that a cookie will be
placed in your web browser. More information below.
<br/><br/>
<div id="uploads_queue"></div>
<br/>
<button id="btn_create_list">Create list with uploaded files</button>
<button id="btn_copy_links">Copy links to clipboard</button>
<button id="btn_copy_bbcode">Copy BBCode to clipboard</button>
<br/>
<div class="centered">
<h1>What is Pixeldrain?</h1>
<p> <p>
Pixeldrain is a file sharing website built for speed and ease of By uploading files to Pixeldrain you accept that a cookie will
use. be placed in your web browser. More information on the <a
</p> href="/about">about</a> page
<p> <p>
The file size limit is 10 GB. There is no limit on the number of
files you can upload. A list can contain up to 10000 files.
</p>
<h2>Style selector</h2> <div id="uploads_queue"></div>
<div class="indent"> <br/>
<input type="radio" id="style_default" name="style"><label for="style_default">Pixeldrain Style</label><br/> <button id="btn_create_list">Create list with uploaded files</button>
<input type="radio" id="style_solarized_dark" name="style"><label for="style_solarized_dark">Solarized Dark Style</label><br/> <button id="btn_copy_links">Copy links to clipboard</button>
<input type="radio" id="style_maroon" name="style"><label for="style_maroon">Maroon Style</label><br/> <button id="btn_copy_bbcode">Copy BBCode to clipboard</button>
<input type="radio" id="style_hacker" name="style"><label for="style_hacker">Hacker Style</label><br/>
<input type="radio" id="style_canta" name="style"><label for="style_canta">Canta Style</label> <br/>
(Inspired by <a href="https://github.com/vinceliuice/Canta-theme" target="_blank">Canta GTK</a>)<br/> <div class="limit_width">
<input type="radio" id="style_arc" name="style"><label for="style_arc">Arc Style</label> <h1>What is Pixeldrain?</h1>
(Inspired by <a href="https://github.com/horst3180/Arc-theme" target="_blank">Arc GTK</a>)<br/> <p>
<input type="radio" id="style_sunny" name="style"><label for="style_sunny">Sunny Style</label> Pixeldrain is a file sharing website built for speed and
ease of use. Pixeldrain does not cost any money, though
donations are appreciated. For donation methods see the
<a href="/about">about</a> page.
</p>
<h2>How to use pixeldrain</h2>
<p>
Files can be uploaded by clicking the big green upload
button, or by dragging them onto this page from your file
manager. You can not upload directories at this time, only
files. The maximum file size you can upload is 10 GB.
</p>
<p>
You can also create lists, which are a collection of files.
Like a photo album, a music record or a video compilation.
To do this you need to upload a bunch of files at once. The
files will be saved in the order you upload them in. When
all files have finished uploading you click the "Create list
with uploaded files" button and you will be asked to enter a
name for your list. After picking a name the list will be
created and opened in a new window. If your browser blocks
the window you can also find a link to the list at the
bottom of your uploaded files.
</p>
<p>
For more information see the <a href="/about">about</a>
page.
</p>
<h2>Style selector</h2>
<p>
You can change how pixeldrain looks! Your theme choice will
be saved in a cookie.
</p>
<div class="indent">
<input type="radio" id="style_default" name="style"><label for="style_default">Pixeldrain Style</label><br/>
<input type="radio" id="style_solarized_dark" name="style"><label for="style_solarized_dark">Solarized Dark Style</label><br/>
<input type="radio" id="style_maroon" name="style"><label for="style_maroon">Maroon Style</label><br/>
<input type="radio" id="style_hacker" name="style"><label for="style_hacker">Hacker Style</label><br/>
<input type="radio" id="style_canta" name="style"><label for="style_canta">Canta Style</label>
(Inspired by <a href="https://github.com/vinceliuice/Canta-theme" target="_blank">Canta GTK</a>)<br/>
<input type="radio" id="style_arc" name="style"><label for="style_arc">Arc Style</label>
(Inspired by <a href="https://github.com/horst3180/Arc-theme" target="_blank">Arc GTK</a>)<br/>
<input type="radio" id="style_sunny" name="style"><label for="style_sunny">Sunny Style</label>
</div>
</div> </div>
<h2>Questions and Answers</h2>
<h3>For how long will my files be stored?</h3>
<p>
Files will be removed if they have not been viewed for 60 days.
A view is counted when someone visits the file's download page
(pixeldrain.com/u/somefile) or views the file through a list the
file is included in (pixeldrain.com/l/somelist).
</p>
<p>
You cannot delete files yourself. Once a file has been uploaded
to pixeldrain it will stay there for at least 60 days. If you
accidentally upload something you shouldn't have, just don't
share the link. The file will expire eventually. File links are
not indexed or published anywhere. As long as you don't share it
nobody will see it.
</p>
<h3>Does pixeldrain cost any money?</h3>
<p>
No, pixeldrain is completely free at the moment. While there is
an advertisement on the file downloading page, it doesn't
generate nearly enough revenue to pay for maintaining this
service. That's why I'd really appreciate it if you could spare
some coins. Possible methods for donating are:
</p>
<ul>
<li>Bitcoin: <a href="bitcoin:1Ne7hGuvnfz9EFTRD3PLWVeaJTX9oA1QUr?label=Pixeldrain%20Donation">1Ne7hGuvnfz9EFTRD3PLWVeaJTX9oA1QUr</a></li>
<li>
BasicAttentionToken: Donate BAT by clicking the BAT icon in
your address bar. If you don't have Brave browser yet you
can download it here:
<a class="button button_highlight" href="https://brave.com/pix009" target="_blank">Install Brave</a>.
Installing and using Brave with this referral link also
counts as a 5$ donation.
</li>
<li>
Siacoin:
26117c19ca3975b315d663dcbbc19cf9c07274f441689d4392ed380b2337589ef1aacfbdc93f
(this address points directly at the storage backend.
Donations will be used for paying storage contracts with Sia
hosts)
</li>
<li>
PayPal:
<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>
<h3>Do I need to register an account?</h3>
<p>
Not if you don't want to. You're free to use pixeldrain
completely anonymously. Without a pixeldrain account you can
upload files, download files and create lists of files. And view
your uploaded files on the <a href="/history">history page</a>.
This page only shows files which were uploaded anonymously in
this web browser.
</p>
<p>
By registering an account on pixeldrain you will be able to
access your files from any device with a web browser. Files you
upload and lists you create will be linked to your pixeldrain
account and will show up on your <a href="/user">personal home
page</a>.
</p>
<h3>What cookies does pixeldrain use?</h3>
<p>
When uploading a file pixeldrain will install a cookie named
'pduploads'. This cookie keeps a dot-separated list of all files
you have uploaded anonymously in this browser. This cookie is
<b>only</b> used for viewing your upload history.
</p>
<p>
When logging in to a pixeldrain account a cookie named
'pd_auth_key' will be installed. This cookie keeps your login
session active. When you delete it you will be logged out of
your account.
</p>
<p>
When you use the style selector at the bottom of this page a
cookie called 'style' will be set. This cookie controls the
appearance of the website for you.
</p>
<h2>Legality</h2>
<p>
I cannot be held liable for any illegal and / or copyrighted
material that's uploaded by the users of this application.
Files uploaded to this website are subjected to local laws. If
laws are being broken, and I've been notified of the fact I'll
have to delete the offending content (as the server does not
support geo filtering yet). If you find any files on this domain
that break the law, please contact me at
<a href="mailto:abuse@pixeldrain.com">abuse@pixeldrain.com</a>,
and I'll take care of it.
<br/>Please share responsibly.
</p>
<p>
For other questions you can reach me at
<a href="mailto:support@pixeldrain.com">support@pixeldrain.com</a>
</p>
</div> </div>
{{template "page_bottom"}} {{template "page_bottom"}}

3
res/template/paste.html
View File

@@ -11,7 +11,8 @@
position: absolute; position: absolute;
width: 8em; width: 8em;
height: 100%; height: 100%;
background-color: var(--layer_2_color) background-color: var(--layer_2_color);
text-align: center;
} }
.textarea_container { .textarea_container {
position: absolute; position: absolute;

14
webcontroller/user_account.go
View File

@@ -11,20 +11,6 @@ import (
"github.com/julienschmidt/httprouter" "github.com/julienschmidt/httprouter"
) )
func (wc *WebController) serveRegister(
w http.ResponseWriter,
r *http.Request,
p httprouter.Params,
) {
var tpld = wc.newTemplateData(w, r)
tpld.Other = wc.captchaKey()
err := wc.templates.Get().ExecuteTemplate(w, "register", tpld)
if err != nil {
log.Error("Error executing template '%s': %s", "register", err)
}
}
func (wc *WebController) serveLogout( func (wc *WebController) serveLogout(
w http.ResponseWriter, w http.ResponseWriter,
r *http.Request, r *http.Request,

2
webcontroller/user_style.go
View File

@@ -260,7 +260,7 @@ var maroonStyle = pixeldrainStyleSheet{
BodyColor: hsl{0, .6, .1}, BodyColor: hsl{0, .6, .1},
Layer1Color: hsl{0, .5, .07}, Layer1Color: hsl{0, .5, .07},
Layer1Shadow: 4, Layer1Shadow: 4,
Layer2Color: hsl{0, .8, .15}, Layer2Color: hsl{0, .6, .1}, // hsl{0, .8, .15},
Layer2Shadow: 7, Layer2Shadow: 7,
Layer3Color: hsl{0, .9, .2}, Layer3Color: hsl{0, .9, .2},
Layer3Shadow: 10, Layer3Shadow: 10,

2
webcontroller/web_controller.go
View File

@@ -70,9 +70,9 @@ func New(r *httprouter.Router, prefix string, conf *conf.PixelWebConfig) *WebCon
r.GET(p+"/t" /* */, wc.serveTemplate("paste", false)) r.GET(p+"/t" /* */, wc.serveTemplate("paste", false))
r.GET(p+"/donation" /* */, wc.serveTemplate("donation", false)) r.GET(p+"/donation" /* */, wc.serveTemplate("donation", false))
r.GET(p+"/widgets" /* */, wc.serveTemplate("widgets", false)) r.GET(p+"/widgets" /* */, wc.serveTemplate("widgets", false))
r.GET(p+"/about" /* */, wc.serveTemplate("about", false))
// User account pages // User account pages
r.GET(p+"/register_old" /* */, wc.serveRegister)
r.GET(p+"/register" /* */, wc.serveForm(wc.registerForm, false)) r.GET(p+"/register" /* */, wc.serveForm(wc.registerForm, false))
r.POST(p+"/register" /* */, wc.serveForm(wc.registerForm, false)) r.POST(p+"/register" /* */, wc.serveForm(wc.registerForm, false))
r.GET(p+"/login" /* */, wc.serveForm(wc.loginForm, false)) r.GET(p+"/login" /* */, wc.serveForm(wc.loginForm, false))