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

Lots of style fixes

Browse Source
This commit is contained in:
Wim Brand
2019-07-17 23:19:57 +02:00
parent 67824d617d
commit 177219feb7
20 changed files with 360 additions and 448 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,7 +7,7 @@
<style>
.file_manager {
position: absolute;
padding: 0px 8px 0px 8px;
padding: 0;
background-color: var(--body_color);
box-shadow: #000000 8px 8px 50px 5px;
left:100px;
@@ -25,7 +25,7 @@
.file_manager > .nav_bar > .breadcrumbs {flex: 1; margin: 1px 10px; min-width: 100px;}
.file_manager > .status_bar {text-align: left;}
.file_manager > .directory_area {
margin: 0 -8px 0 -8px;
margin: 0;
padding: 5px;
max-height: 500px;
overflow-x: hidden;
@@ -47,7 +47,7 @@
{{template "menu" .}}
<br/>
<div class="file_manager">
<div class="nav_bar highlight_light border_top border_bottom">
<div class="nav_bar highlight_light">
<button>⇐</button>
<button>⇑</button>
<button style="margin-right: 16px;">⇒</button>
@@ -68,7 +68,7 @@
</a>
{{end}}
</div>
<div class="status_bar highlight_light border_top border_bottom">
<div class="status_bar highlight_light">
13 items (5 directories, 7 files). Total size: 1.23 GB
</div>
</div>

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

@@ -9,7 +9,7 @@
{{template "menu" .}}
<h1>Please confirm that you want to log out of your pixeldrain account</h1>
<form method="POST" action="/logout" class="highlight_light border_top border_bottom">
<form method="POST" action="/logout" class="highlight_light">
<input type="submit" value="I want to log out of pixeldrain on this computer" class="button_highlight"/>
</form>
<br/>

137
res/template/account/register.html
View File

@@ -1,137 +0,0 @@
{{define "register"}}<!DOCTYPE html>
<html>
<head>
{{template "meta_tags" "Register"}}
{{template "user_style" .}}
<script type="text/javascript">var apiEndpoint = '{{.APIEndpoint}}';</script>
<script src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body>
<div id='body' class="body">
{{template "menu" .}}
<h1>Register a new Pixeldrain account</h1>
<div id="submit_result"></div>
<form onSubmit="return submitForm();" class="highlight_dark border_top border_bottom">
<table style="margin-left: auto; margin-right: auto; text-align: left; max-width: 30em;">
<tr class="form">
<td>Username</td>
<td><input id="register_username" type="text" autocomplete="username" class="form_input"/></td>
</tr>
<tr class="form"><td colspan="2">used for logging into your account<br/><hr/></td></tr>
<tr class="form">
<td>E-mail address</td>
<td><input id="register_email" type="text" autocomplete="email" class="form_input"/></td>
</tr>
<tr class="form"><td colspan="2">
not required. your e-mail address will only be used for
password resets and important account notifications<br/>
<hr/>
</td></tr>
<tr class="form">
<td>Password</td>
<td><input id="register_password1" type="password" autocomplete="new-password" class="form_input"/></td>
</tr>
<tr class="form">
<td>Password verification</td>
<td><input id="register_password2" type="password" autocomplete="new-password" class="form_input"/></td>
</tr>
<tr class="form">
<td colspan="2">
you need to enter your password twice so we can
verify that you have not made any typing errors<br/>
<hr/>
</td>
</tr>
{{if ne .Other "none"}}<tr class="form">
<td>
Turing test<br/>
(Click the white box)
</td>
<td style="text-align: center;">
<div class="g-recaptcha" data-theme="dark" data-sitekey="{{.Other}}"></div>
</td>
</tr>
<tr class="form">
<td colspan="2">
the reCaptcha turing test verifies that you are not
an evil robot that is trying to flood the website
with fake accounts<br/><hr/>
</td>
</tr>{{end}}
<tr class="form">
<td colspan="2" style="text-align: right;">
<input type="submit" value="Register" class="button_highlight"/>
</td>
</tr>
</table>
</form>
<br/>
Welcome to the club!<br/>
{{template "footer"}}
</div>
<script type="text/javascript">
function submitForm(){
var uname = document.getElementById("register_username").value;
var email = document.getElementById("register_email").value;
var passwd1 = document.getElementById("register_password1").value;
var passwd2 = document.getElementById("register_password2").value;
var capt;
try {
capt = grecaptcha.getResponse();
} catch (err) {
console.log("Error occurred while reading captcha: "+err);
}
if (passwd1 !== passwd2) {
alert("Passwords do not match! Good thing we checked.");
return false;
}
var req = new XMLHttpRequest();
req.onreadystatechange = function(){
if (this.readyState === 4) {
var response = JSON.parse(req.responseText);
var resultDiv = document.getElementById("submit_result");
if (response.success) {
resultDiv.className = "border_top border_bottom highlight_green";
resultDiv.innerHTML = 'Registration completed! You can now <a href="/login">log in to your account</a>.<br/>'
+ "We're glad to have you on board, have fun sharing!";
} else {
resultDiv.className = "border_top border_bottom highlight_red";
var resultHtml = "Something went wrong, please correct these problems and try again:<br/><ul>";
for (err in response.errors) {
resultHtml += "<li>"+ response.errors[err].message +"</li>";
}
resultHtml += "</ul>";
resultDiv.innerHTML = resultHtml;
}
// On small screens the whole form won't fit on the screen,
// so we need to scroll up to show the user the result of
// the form submission
window.scrollTo(0, 0);
console.log(response);
}
}
req.open("POST", apiEndpoint+"/user/register", true);
var data = new FormData();
data.append("username", uname);
data.append("email", email);
data.append("password", passwd1);
data.append("recaptcha_response", capt);
req.send(data);
return false;
}
</script>
{{template "analytics"}}
</body>
</html>
{{end}}

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

@@ -8,7 +8,7 @@
<body>
{{template "menu" .}}
<div class="highlight_middle border_bottom">
<div class="highlight_middle">
These files were uploaded while logged in to your pixeldrain account,
<a href="/history">click here</a> to view files uploaded anonymously
in this browser.

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

@@ -10,7 +10,7 @@
<div id='body' class="body">
{{template "menu" .}}
<h1 class="highlight_middle border_bottom">Welcome home, {{.Username}}!</h1>
<h1 class="highlight_middle">Welcome home, {{.Username}}!</h1>
<h2>Actions</h2>
<ul>
@@ -19,7 +19,7 @@
</ul>
<h2>Your most recently uploaded files:</h2>
<div class="highlight_dark border_top border_bottom">
<div class="highlight_dark">
{{$files := .PixelAPI.UserFiles 0 18}}
{{range $files.Files}}
<a class="file_button" href="/u/{{.ID}}" target="_blank">
@@ -33,7 +33,7 @@
<a href="/user/files" class="button">...All my files</a>
</div>
<h2>Your most recently created lists:</h2>
<div class="highlight_dark border_top border_bottom">
<div class="highlight_dark">
{{$lists := .PixelAPI.UserLists 0 18}}
{{range $lists.Lists}}
<a class="file_button" href="/l/{{.ID}}" target="_blank">

1
res/template/admin.html
View File

@@ -112,7 +112,6 @@
);
function setData(){
this.class = "button_highlight";
$.get(apiEndpoint+"/admin/files/timeseries?days="+days+"&interval="+interval, function(response){
console.log(response);
if (response.success) {

165
res/template/file_viewer.html
View File

@@ -6,15 +6,13 @@
<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?v2"/>
<link rel="stylesheet" href="/res/style/layout.css?v2"/>
<link rel="stylesheet" href="/res/style/viewer.css?v3"/>
<link rel="stylesheet" href="/res/style/layout.css?v3"/>
<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"/>
<!-- <link rel="alternate" type="application/json+oembed" th:href="*{oEmbedHref}" th:title="*{ogTitle}" /> OEmbed will return soon -->
{{template "bgpattern"}}
{{.OGData}}
@@ -26,81 +24,90 @@
</head>
<body>
<div id="listNavigator">
<div id="listNavigatorItems"></div>
<div id="arrow-left" alt="Previous Item" onClick="ListNavigator.previousItem();"></div>
<div id="arrow-right" alt="Next Item" onClick="ListNavigator.nextItem();"></div>
</div>
<button id="button-expand-toolbar" onClick="Toolbar.toggle();">Show Toolbar</button>
<div id="toolbar">
<!-- Ugly workaround to get rid of the scrollbar in non-webkit browsers -->
<div>
<div>
<button class="toolbar_button button_full_width" onClick="Toolbar.toggle();">Hide Toolbar</button>
<div id="file_viewer" class="file_viewer">
<div id="file_viewer_headerbar" class="highlight_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/tray32.png" alt="Back to the Home page" style="height: 1em;"/>
<!-- Yo -->
</a>
<span id="file_viewer_headerbar_title" class="file_viewer_headerbar_title">{{.Title}}</span>
<div id="list_navigator_buttons" class="list_navigator_buttons"></div>
<button id="button_close_file_viewer" class="button_close_file_viewer button_red" onClick="window.close();">X</button>
</div>
<div id="listNavigator" class="list_navigator">
<div id="listNavigatorItems"></div>
</div>
<div id="file_viewer_window" class="file_viewer_window">
<div id="toolbar" class="file_viewer_toolbar">
<!-- Ugly workaround to get rid of the scrollbar in non-webkit browsers -->
<div>
<div>
<div id="stat_views_label" class="toolbar_label">Views</div>
<div id="stat_views" style="text-align: center;">N/A</div>
<div id="stat_downloads_label" class="toolbar_label">Downloads</div>
<div id="stat_downloads" style="text-align: center;">N/A</div>
<div id="stat_views_label" class="toolbar_label">Views</div>
<div id="stat_views" style="text-align: center;">N/A</div>
<div id="stat_downloads_label" class="toolbar_label">Downloads</div>
<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"/>
<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"/>
<span>Copy</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"/>
<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"/>
<span>Details</span>
</button>
{{template "advertisement" .}}
<a href="/" id="btnHome" class="toolbar_button button_full_width button">
<img src="/res/img/pixeldrain_small.png" alt="Back to the Home page"/>
<span>Home</span>
</a>
<button id="btnDownload" class="toolbar_button button_full_width" onClick="Toolbar.download();">
<img src="/res/img/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"/>
<span>Copy</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"/>
<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"/>
<span>Details</span>
</button>
{{template "advertisement" .}}
<!-- This frame will load the download URL when a download button is pressed -->
<iframe id="download_frame" style="display: none; width: 1px; height: 1px;"></iframe>
</div>
</div>
</div>
<!-- This frame will load the download URL when a download button is pressed -->
<iframe id="download_frame" style="display: none; width: 1px; height: 1px;"></iframe>
<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=You%20can%20view%20it%20here%20' + window.location.href);">
<img src="/res/img/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;"/>
<br/>Reddit
</button>
<button class="sharebar-button button_full_width" onClick="window.open('https://twitter.com/share?text=Check%20out%20this%20file%20on%20%23Pixeldrain&url=' + window.location.href);">
<img src="/res/img/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;"/>
<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;"/>
<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;"/>
<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;" />
</div>
</div>
</div>
<div id="sharebar" class="sidebar">
Share on:<br/>
<button class="sharebar-button button_full_width" onClick="window.open('mailto:please@set.address?subject=File%20on%20PixelDrain&body=You%20can%20view%20it%20here%20' + window.location.href);">
<img src="/res/img/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;"/>
<br/>Reddit
</button>
<button class="sharebar-button button_full_width" onClick="window.open('https://twitter.com/share?text=Check%20out%20this%20file%20on%20%23Pixeldrain&url=' + window.location.href);">
<img src="/res/img/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;"/>
<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;"/>
<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;"/>
<br/>Voat
</button>
</div>
<div id="details_popup" class="popup details_popup border_bottom">
<div id="details_popup_title" class="highlight_light border_top border_bottom">
<div id="details_popup" class="popup details_popup">
<div id="details_popup_title" class="highlight_headerbar">
File Info
<button style="position: absolute; top: 3px; right: 3px;" class="button_red" onclick="DetailsWindow.toggle();">X</button>
</div>
@@ -147,23 +154,19 @@
</span>
</div>
</div>
<div id="captcha_popup" class="popup captcha_popup border_bottom">
<div id="captcha_popup_title" class="highlight_light border_top border_bottom"></div>
<div id="captcha_popup" class="popup captcha_popup">
<div id="captcha_popup_title" class="highlight_headerbar"></div>
<div id="captcha_popup_content" class="content_area"></div>
<br/>
<div id="captcha_popup_captcha" style="text-align: center;"></div>
</div>
<div id="filepreview">
<img src="/res/img/misc/loadthink.gif" style="margin-top: 20%; width: 200px; height: 200px;" />
</div>
<script src="/res/misc/chartjs/Chart.min.js"></script>
<script src="/res/script/jquery.js"></script>
<script src="/res/script/Keyboard.js"></script>
<script src="/res/script/Toolbar.js?v1"></script>
<script src="/res/script/Viewer.js?v1"></script>
<script src="/res/script/ListNavigator.js"></script>
<script src="/res/script/Toolbar.js?v2"></script>
<script src="/res/script/Viewer.js?v2"></script>
<script src="/res/script/ListNavigator.js?v2"></script>
<script>
// This info gets filled in on the server side to prevent having to make an API call right after the page loads.

2
res/template/fragments/footer.html
View File

@@ -1,6 +1,6 @@
{{define "footer"}}
<br/>
<div class="highlight_dark border_top border_bottom">
<div class="highlight_dark">
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>
Reddit:&nbsp;<a href="https://reddit.com/r/pixeldrain" target="_blank">/r/pixeldrain</a>

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

@@ -3,11 +3,11 @@
{{.PreFormHTML}}
{{if eq .Submitted true}}
{{if eq .SubmitSuccess true}}
<div id="submit_result" class="highlight_green border_top border_bottom">
<div id="submit_result" class="highlight_green">
{{index .SubmitMessages 0}}
</div>
{{else}}
<div id="submit_result" class="highlight_red border_top border_bottom">
<div id="submit_result" class="highlight_red">
Something went wrong, please correct these errors before continuing:<br/>
<ul>
{{range $msg := .SubmitMessages}}
@@ -18,7 +18,7 @@
{{end}}
{{end}}
<form class="highlight_dark border_top border_bottom" method="POST">
<form class="highlight_dark" method="POST">
<input type="text" name="form" value="{{.Name}}" style="display: none;" readonly="readonly"/>
{{if ne .Username ""}}
<!-- The invisible username field is so browsers know which user the form was for -->

2
res/template/fragments/menu.html
View File

@@ -1,5 +1,5 @@
{{define "menu"}}
<div id="navigation" class="highlight_light border_top border_bottom navigation">
<div id="navigation" class="highlight_headerbar navigation">
<a href="/">Home</a>
<a href="{{if .Authenticated}}/user/files{{else}}/history{{end}}">My&nbsp;Files</a>
{{if .Authenticated}}<a href="/user/lists">My&nbsp;Lists</a>{{end}}

7
res/template/history.html
View File

@@ -12,12 +12,13 @@
<body>
<div id='body' class="body">
{{template "menu" .}}
<br/>
<p>
Here are all files you have previously uploaded to PixelDrain using this computer.
This data is saved locally in your web browser and gets updated every time you upload a file through your current browser.
<br/><br/>
</p>
<br/>
<div id="uploadedFiles" class="highlight_dark border_top border_bottom"></div>
<div id="uploadedFiles" class="highlight_dark"></div>
{{template "footer"}}
</div>
<script src="/res/script/history.js"></script>

8
res/template/home.html
View File

@@ -22,7 +22,7 @@
<br/>
<div id="body" class="body">
{{template "menu" .}}
<div class="highlight_middle border_bottom">
<div class="highlight_middle">
<input id="file_input_field" type="file" name="file" multiple="multiple"/>
<button id="select_file_button" class="big_button button_highlight">Upload Files</button>
<button id="text_button" class="big_button button_highlight" onClick="window.location.href = '/t/'">Upload Text</button><br/>
@@ -31,7 +31,7 @@
<div id="uploads_queue"></div>
</div>
<div class="highlight_dark border_bottom">
<div class="highlight_dark">
<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>
@@ -55,8 +55,8 @@
<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_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/>
</div>
<h2>Questions and Answers</h2>

2
res/template/maintenance.html
View File

@@ -9,7 +9,7 @@
<img id="header_image" class="header_image" src="/res/img/header_neuropol.png" alt="Header image"/>
<br/>
<div id='body' class="body">
<div id="header" class="highlight_light border_top border_bottom" style="font-size: 2em; line-height: 1.2em;">
<div id="header" class="highlight_light" style="font-size: 2em; line-height: 1.2em;">
Pixeldrain is under maintenanace
</div>
<p>

10
res/template/widgets.html
View File

@@ -19,13 +19,13 @@
<h5>Size 5 header</h5>
<h6>Size 6 header</h6>
<div class="highlight_light border_top">Light highlight</div>
<div class="highlight_light">Light highlight</div>
<div class="highlight_middle">Middle highlight</div>
<div class="highlight_dark border_bottom">Dark highlight</div>
<div class="highlight_dark">Dark highlight</div>
<br/>
<div class="highlight_light border_bottom border_top">Light highlight with borders</div>
<div class="highlight_middle border_bottom border_top">Middle highlight with borders</div>
<div class="highlight_dark border_bottom border_top">Dark highlight with borders</div>
<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/>