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

Make the UI flatter

Browse Source
This commit is contained in:
Fornax
2022-01-03 14:02:50 +01:00
parent bdec963be0
commit 4f17c71b56
30 changed files with 239 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
res/include/style/layout.css
View File

@@ -7,19 +7,6 @@
--highlight_border: inset 0px 0px 5px 1px var(--highlight_color), 0px 0px 1px 0px var(--highlight_color); --highlight_border: inset 0px 0px 5px 1px var(--highlight_color), 0px 0px 1px 0px var(--highlight_color);
} }
/* Fonts */
@font-face {
font-family: 'light';
font-display: fallback;
font-style: normal;
font-weight: normal;
src:
local('Cantarell Light'),
local('Cantarell, Light'),
local('Cantarell-Light'),
url(/res/misc/Cantarell-Light.otf) format("opentype");
}
@font-face { @font-face {
font-family: 'Material Icons'; font-family: 'Material Icons';
font-style: normal; font-style: normal;
@@ -65,18 +52,24 @@ body{
font-family: system-ui, sans-serif; font-family: system-ui, sans-serif;
font-size: 17px; font-size: 17px;
line-height: 1.8em; line-height: 1.8em;
color: #b2b2b2; /* Fallback */
color: var(--text_color); color: var(--text_color);
background-color: var(--layer_2_color);
padding: 0; padding: 0;
} }
body, .checkers { .checkers {
background-image: url("{{bgPattern}}"); background-image: url("{{bgPattern}}");
background-color: #111111; /* Fallback */ background-color: #111111; /* Fallback */
background-color: var(--layer_1_color); background-color: var(--layer_1_color);
background-repeat: repeat; background-repeat: repeat;
background-attachment: fixed;
background-blend-mode: luminosity; background-blend-mode: luminosity;
} }
.inset {
padding-top: 70px;
box-shadow: inset 1px 1px 10px 0 var(--shadow_color);
border-radius: 16px;
text-align: center;
overflow: hidden;
}
/* Page layout elements */ /* Page layout elements */
.page_wrapper { .page_wrapper {
@@ -100,7 +93,7 @@ body, .checkers {
background: var(--input_color); background: var(--input_color);
border-radius: 0; border-radius: 0;
border-bottom-right-radius: 90%; border-bottom-right-radius: 90%;
box-shadow: 2px 2px 8px -3px var(--shadow_color); box-shadow: 0 0 6px -2px var(--shadow_color);
} }
.button_toggle_navigation:active { .button_toggle_navigation:active {
padding: 15px 15px 10px 15px; padding: 15px 15px 10px 15px;
@@ -109,23 +102,19 @@ body, .checkers {
.page_navigation { .page_navigation {
position: fixed; position: fixed;
backface-visibility: hidden; backface-visibility: hidden;
z-index: 99;
width: 18em; width: 18em;
height: 100%; height: 100%;
left: 0; left: 0;
float: left; float: left;
background-color: #1c1c1c; background-color: var(--layer_2_color);
background-color: var(--layer_1_color); padding: 20px 10px 10px 0;
padding: 20px 0 0.5em 0;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
text-align: left; text-align: left;
box-shadow: inset -8px 0px 8px -8px var(--shadow_color);
transition: left 0.5s; transition: left 0.5s;
} }
.page_body { .page_body {
position: absolute; position: absolute;
z-index: 200;
right: 0; right: 0;
height: auto; height: auto;
left: 18em; left: 18em;
@@ -134,9 +123,8 @@ body, .checkers {
text-align: center; /* Center the header and body */ text-align: center; /* Center the header and body */
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
z-index: 50; background-color: var(--layer_2_color);
transition: left 0.5s; transition: left 0.5s;
padding: 70px 0 100px 0;
} }
@media (max-width: 1000px) { @media (max-width: 1000px) {
.page_navigation { .page_navigation {
@@ -147,18 +135,6 @@ body, .checkers {
width: 100%; width: 100%;
} }
} }
.page_body > .page_content {
position: relative;
display: inline-block;
width: 100%;
height: auto;
padding: 0 0 20px 0;
background-color: #212121;
background-color: var(--layer_2_color);
box-shadow: 1px 1px 12px 0 var(--shadow_color);
clear: both;
}
.limit_width { .limit_width {
position: relative; position: relative;
display: inline-block; display: inline-block;
@@ -184,8 +160,9 @@ body, .checkers {
text-align: center; text-align: center;
padding: 4px; padding: 4px;
margin: 0.3em 15px 0.3em 15px; margin: 0.3em 15px 0.3em 15px;
font-family: "light", sans-serif; font-family: sans-serif;
font-size: 1.6em; font-weight: lighter;
font-size: 1.5em;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
transition: background-color 0.5s; transition: background-color 0.5s;
@@ -200,11 +177,6 @@ body, .checkers {
text-decoration: none; text-decoration: none;
} }
.inset {
box-shadow: inset 1px 1px 20px 0 #000000;
box-shadow: inset 1px 1px 20px 0 var(--shadow_color);
}
.highlight_dark, .highlight_dark,
.highlight_middle, .highlight_middle,
.highlight_light, .highlight_light,
@@ -223,22 +195,19 @@ body, .checkers {
overflow: hidden; overflow: hidden;
text-align: center; text-align: center;
padding: 4px; padding: 4px;
border-radius: 8px;
} }
.highlight_dark, .highlight_1 { .highlight_dark, .highlight_1 {
background-color: var(--layer_1_color); background-color: var(--layer_1_color);
box-shadow: 1px 1px 6px -2px var(--shadow_color);
} }
.highlight_middle, .highlight_2 { .highlight_middle, .highlight_2 {
background-color: var(--layer_2_color); background-color: var(--layer_2_color);
box-shadow: 1px 1px 6px -2px var(--shadow_color);
} }
.highlight_light, .highlight_3 { .highlight_light, .highlight_3 {
background-color: var(--layer_3_color); background-color: var(--layer_3_color);
box-shadow: 1px 1px 6px -2px var(--shadow_color);
} }
.highlight_lighter, .highlight_4 { .highlight_lighter, .highlight_4 {
background-color: var(--layer_4_color); background-color: var(--layer_4_color);
box-shadow: 1px 1px 6px -2px var(--shadow_color);
} }
.highlight_green { .highlight_green {
background-color: rgba(0, 255, 0, 0.05); background-color: rgba(0, 255, 0, 0.05);
@@ -273,43 +242,40 @@ h1, h2, h3, h4, h5, h6 {
line-height: 1em; line-height: 1em;
margin: 0.5em 10px; margin: 0.5em 10px;
font-weight: normal; font-weight: normal;
font-weight: lighter;
font-family: sans-serif;
} }
h1 { h1 {
font-size: 2.5em; font-size: 2.5em;
font-family: "light", sans-serif;
text-align: center; text-align: center;
margin-bottom: 50px;
} }
h2 { h2 {
font-size: 2em; font-size: 2em;
font-family: "light", sans-serif;
border-bottom: 1px var(--layer_4_color_border) solid; border-bottom: 1px var(--layer_4_color_border) solid;
} }
h3 { h3 {
font-size: 1.6em; font-size: 1.75em;
font-family: "light", sans-serif;
border-bottom: 1px var(--layer_3_color_border) solid; border-bottom: 1px var(--layer_3_color_border) solid;
} }
h4 { h4 {
font-size: 1.25em; font-size: 1.50em;
font-family: "light", sans-serif;
border-bottom: 1px var(--layer_2_color_border) solid; border-bottom: 1px var(--layer_2_color_border) solid;
} }
h5 { h5 {
font-size: 1em; font-size: 1.25em;
font-family: sans-serif;
border-bottom: 1px var(--layer_1_color_border) solid; border-bottom: 1px var(--layer_1_color_border) solid;
} }
h6{ h6 {
font-size: .75em; font-size: 1em;
font-family: sans-serif;
} }
p, .indent { p, .indent {
margin: 10px; margin: 10px;
} }
hr{ hr {
height: 1px; height: 1px;
border: none; border: none;
background-color: var(--input_color); background-color: var(--input_color);
@@ -513,13 +479,12 @@ select:disabled , select.disabled {
.tab_bar { .tab_bar {
display: block; display: block;
width: 100%; width: 100%;
margin: 0 0 16px 0;
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
white-space: nowrap; white-space: nowrap;
text-align: center; text-align: center;
background-color: var(--layer_1_color); background-color: var(--layer_1_color);
box-shadow: inset 0 -10px 8px -12px var(--shadow_color); box-shadow: inset 0 -10px 8px -12px var(--shadow_color), 0 0 10px var(--shadow_color);
} }
.tab_bar > button, .tab_bar > button,
.tab_bar > .button { .tab_bar > .button {

1
res/static/ads.txt
View File

@@ -1407,3 +1407,4 @@ onetag.com, 5cd7fb62fac7ec9, DIRECT
openx.com, 537133236, RESELLER, 6a698e2ec38604c6 openx.com, 537133236, RESELLER, 6a698e2ec38604c6
pubmatic.com, 158685, RESELLER, 5d62403b186f2ace pubmatic.com, 158685, RESELLER, 5d62403b186f2ace
rubiconproject.com, 13380, RESELLER, 0bfd66d529a55807 rubiconproject.com, 13380, RESELLER, 0bfd66d529a55807
triplelift.com, 10992, RESELLER, 6c33edb13117fd86

8
res/template/404.html
View File

@@ -7,8 +7,10 @@
<body> <body>
{{template "page_top" .}} {{template "page_top" .}}
<h1>This page does not exist!</h1> <div class="checkers inset">
<div class="page_content"><div class="limit_width"> <h1>This page does not exist!</h1>
</div>
<div class="limit_width">
<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
@@ -21,7 +23,7 @@
<p> <p>
Bye! Bye!
</p> </p>
</div></div> </div>
{{template "page_bottom" .}} {{template "page_bottom" .}}
{{template "analytics"}} {{template "analytics"}}
</body> </body>

8
res/template/451.html
View File

@@ -7,13 +7,15 @@
<body> <body>
{{template "page_top" .}} {{template "page_top" .}}
<h1>451, Unavailable For Legal Reasons</h1> <div class="checkers inset">
<div class="page_content"><div class="limit_width"> <h1>451, Unavailable For Legal Reasons</h1>
</div>
<div class="limit_width">
<p> <p>
Hello. This file has received an abuse report and has been taken Hello. This file has received an abuse report and has been taken
down. It cannot be shared anymore. down. It cannot be shared anymore.
</p> </p>
</div></div> </div>
{{template "page_bottom" .}} {{template "page_bottom" .}}
{{template "analytics"}} {{template "analytics"}}
</body> </body>

8
res/template/500.html
View File

@@ -7,8 +7,10 @@
<body> <body>
{{template "page_top" .}} {{template "page_top" .}}
<h1>You broke pixeldrain</h1> <div class="checkers inset">
<div class="page_content"><div class="limit_width"> <h1>You broke pixeldrain</h1>
</div>
<div class="limit_width">
<p> <p>
Great job. Great job.
</p> </p>
@@ -22,7 +24,7 @@
try again in a few minutes (or hours), or go back to the <a try again in a few minutes (or hours), or go back to the <a
href='/'>home page</a> and start over. href='/'>home page</a> and start over.
</p> </p>
</div></div> </div>
{{template "page_bottom" .}} {{template "page_bottom" .}}
{{template "analytics"}} {{template "analytics"}}
</body> </body>

1
res/template/admin.html
View File

@@ -15,7 +15,6 @@
</head> </head>
<body> <body>
{{template "page_top" .}} {{template "page_top" .}}
<h1>Admin Panel</h1>
<div id="page_content" class="page_content"></div> <div id="page_content" class="page_content"></div>
{{template "page_bottom" .}} {{template "page_bottom" .}}
</body> </body>

8
res/template/appearance.html
View File

@@ -7,8 +7,10 @@
<body> <body>
{{template "page_top" .}} {{template "page_top" .}}
<h1>Change website appearance</h1> <div class="checkers inset">
<div class="page_content"><div class="limit_width"> <h1>Change website appearance</h1>
</div>
<div class="limit_width">
<p> <p>
You can change how pixeldrain looks! Your theme choice will You can change how pixeldrain looks! Your theme choice will
be saved in a cookie. be saved in a cookie.
@@ -26,7 +28,7 @@
<input type="radio" id="style_deepsea" name="style"><label for="style_deepsea">Deep Sea Style</label><br/> <input type="radio" id="style_deepsea" name="style"><label for="style_deepsea">Deep Sea Style</label><br/>
<!--<input type="radio" id="style_sunny" name="style"><label for="style_sunny">Sunny Style</label>--> <!--<input type="radio" id="style_sunny" name="style"><label for="style_sunny">Sunny Style</label>-->
</div> </div>
</div></div> </div>
<script> <script>
// Style selector // Style selector

8
res/template/apps.html
View File

@@ -14,8 +14,10 @@
<body> <body>
{{template "page_top" .}} {{template "page_top" .}}
<h1>Apps</h1> <div class="checkers inset">
<div class="page_content"><div class="limit_width"> <h1>Apps</h1>
</div>
<div class="limit_width">
<h2>ShareX</h2> <h2>ShareX</h2>
<div class="specs"> <div class="specs">
Platform: Windows 7, 8.1 and 10 | Platform: Windows 7, 8.1 and 10 |
@@ -108,7 +110,7 @@
please send them to please send them to
<a href="mailto:support@pixeldrain.com">support@pixeldrain.com</a>. <a href="mailto:support@pixeldrain.com">support@pixeldrain.com</a>.
</p> </p>
</div></div> </div>
{{template "page_bottom" .}} {{template "page_bottom" .}}
{{template "analytics"}} {{template "analytics"}}
</body> </body>

12
res/template/email_confirm.html
View File

@@ -7,28 +7,26 @@
<body> <body>
{{template "page_top" .}} {{template "page_top" .}}
<div class="page_content"> <div class="limit_width">
<div class="limit_width"> {{if eq .Other "success"}}
{{if eq .Other "success"}}
<h1>Success!</h1> <h1>Success!</h1>
<p> <p>
Your account's e-mail address has been updated. Your account's e-mail address has been updated.
</p> </p>
{{else if eq .Other "not_found"}} {{else if eq .Other "not_found"}}
<h1>E-mail change failed</h1> <h1>E-mail change failed</h1>
<p> <p>
This e-mail change request does not exist or has expired. This e-mail change request does not exist or has expired.
Please try again if you still want to change your e-mail Please try again if you still want to change your e-mail
address. address.
</p> </p>
{{else}} {{else}}
<h1>Error</h1> <h1>Error</h1>
<p> <p>
Something went wrong while processing this request. Please Something went wrong while processing this request. Please
try again later. try again later.
</p> </p>
{{end}} {{end}}
</div>
</div> </div>
{{template "page_bottom" .}} {{template "page_bottom" .}}
{{template "analytics"}} {{template "analytics"}}

30
res/template/file_not_found.html
View File

@@ -7,8 +7,10 @@
<body> <body>
{{template "page_top" .}} {{template "page_top" .}}
<h1>404, File Not Found!</h1> <div class="checkers inset">
<div class="page_content"><div class="limit_width"> <h1>404, File Not Found!</h1>
</div>
<div class="limit_width">
<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:
@@ -18,7 +20,7 @@
The file has not been viewed for 30 days and has expired The file has not been viewed for 30 days and has expired
</li> </li>
<li> <li>
The user who uploaded the file has deleted it The person who uploaded the file has deleted it
</li> </li>
<li> <li>
Something went wrong on the pixeldrain servers causing the Something went wrong on the pixeldrain servers causing the
@@ -32,8 +34,7 @@
<p> <p>
I'm sorry for the inconvenience. I'm sorry for the inconvenience.
</p> </p>
</div>
</div></div>
{{template "page_bottom" .}} {{template "page_bottom" .}}
{{template "analytics"}} {{template "analytics"}}
</body> </body>
@@ -48,21 +49,28 @@
<body> <body>
{{template "page_top" .}} {{template "page_top" .}}
<h1>404, List Not Found!</h1> <div class="checkers inset">
<div class="page_content"><div class="limit_width"> <h1>404, List Not Found!</h1>
</div>
<div class="limit_width">
<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:
</p> </p>
<ul> <ul>
<li>All files in this list have not been viewed for 30 days and have expired</li> <li>
<li>Something went wrong on the pixeldrain servers causing the list to be temporarily unavailable</li> All files in this list have not been viewed for 30 days and
have expired
</li>
<li>
Something went wrong on the pixeldrain servers causing the
list to be temporarily unavailable
</li>
</ul> </ul>
<p> <p>
I'm sorry for the inconvenience. I'm sorry for the inconvenience.
</p> </p>
</div>
</div></div>
{{template "page_bottom" .}} {{template "page_bottom" .}}
{{template "analytics"}} {{template "analytics"}}
</body> </body>

9
res/template/file_viewer_compat.html
View File

@@ -24,8 +24,11 @@
<body> <body>
{{template "page_top" .}} {{template "page_top" .}}
<h1>{{.Title}}</h1>
<div class="page_content"><div class="limit_width"> <div class="checkers inset">
<h1>{{.Title}}</h1>
</div>
<div class="limit_width">
{{if eq .Other.Type "file"}} {{if eq .Other.Type "file"}}
Download <a href="{{.APIEndpoint}}/file/{{.Other.APIResponse.ID}}?download">{{.Other.APIResponse.Name}}</a> here. Download <a href="{{.APIEndpoint}}/file/{{.Other.APIResponse.ID}}?download">{{.Other.APIResponse.Name}}</a> here.
{{else}} {{else}}
@@ -63,7 +66,7 @@
<li><a href="https://www.apple.com/safari/">Safari</a> (Mac OS)</li> <li><a href="https://www.apple.com/safari/">Safari</a> (Mac OS)</li>
<li><a href="https://www.microsoft.com/en-us/edge">Edge</a> (Windows)</li> <li><a href="https://www.microsoft.com/en-us/edge">Edge</a> (Windows)</li>
</ul> </ul>
</div></div> </div>
{{template "analytics"}} {{template "analytics"}}
</body> </body>
</html> </html>

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

@@ -1,5 +1,4 @@
{{define "form"}} {{define "form"}}
<h1>{{.Title}}</h1>
{{.PreFormHTML}} {{.PreFormHTML}}
<form class="highlight_dark" method="POST"> <form class="highlight_dark" method="POST">
{{if eq .Submitted true}} {{if eq .Submitted true}}
@@ -111,10 +110,14 @@
<body> <body>
<div id='body' class="body"> <div id='body' class="body">
{{template "page_top" .}} {{template "page_top" .}}
<div class="page_content"><div class="limit_width"> <div class="checkers inset">
<h1>{{.Form.Title}}</h1>
</div>
<br/>
<div class="limit_width">
{{template "form" .Form}} {{template "form" .Form}}
<br/> <br/>
</div></div> </div>
{{template "page_bottom" .}} {{template "page_bottom" .}}
</div> </div>

8
res/template/fragments/markdown_wrapper.html
View File

@@ -7,10 +7,12 @@
<body> <body>
{{template "page_top" .}} {{template "page_top" .}}
<h1>{{.Title}}</h1> <div class="checkers inset">
<div class="page_content"><div class="limit_width"> <h1>{{.Title}}</h1>
</div>
<div class="limit_width">
{{.Other}} {{.Other}}
</div></div> </div>
{{template "page_bottom" .}} {{template "page_bottom" .}}
{{template "analytics"}} {{template "analytics"}}
</body> </body>

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

@@ -54,7 +54,7 @@ function resetMenu() {
{{end}} {{end}}
{{define "page_bottom"}} {{define "page_bottom"}}
<div class="highlight_dark"> <div class="inset checkers" style="padding-top: 150px">
<div style="display: inline-block; margin: 0 8px 0 8px;"> <div style="display: inline-block; margin: 0 8px 0 8px;">
Pixeldrain is a product by <a href="//fornaxian.tech" target="_blank">Fornaxian Technologies</a> Pixeldrain is a product by <a href="//fornaxian.tech" target="_blank">Fornaxian Technologies</a>
</div> </div>
@@ -71,6 +71,8 @@ function resetMenu() {
<span class="small_footer_text" style="font-size: .75em; line-height: .75em;"> <span class="small_footer_text" style="font-size: .75em; line-height: .75em;">
page rendered by {{.Hostname}} page rendered by {{.Hostname}}
</span> </span>
<br/>
<br/>
</div> </div>
</div><!-- end page_body --> </div><!-- end page_body -->
{{end}} {{end}}

10
res/template/history.html
View File

@@ -7,8 +7,12 @@
<body> <body>
<div id='body' class="body"> <div id='body' class="body">
{{template "page_top" .}} {{template "page_top" .}}
<h1>Upload History</h1>
<div class="page_content"><div class="limit_width"> <div class="checkers inset">
<h1>Upload History</h1>
</div>
<div class="limit_width">
<p> <p>
Here are all files you have previously uploaded to pixeldrain using this computer. 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. This data is saved locally in your web browser and gets updated every time you upload a file through your current browser.
@@ -16,7 +20,7 @@
<br/> <br/>
<div id="uploaded_files" class="highlight_dark"></div> <div id="uploaded_files" class="highlight_dark"></div>
</div></div> </div>
{{template "page_bottom" .}} {{template "page_bottom" .}}
</div> </div>
<script> <script>

25
res/template/home.html
View File

@@ -8,7 +8,7 @@
.header_image{ .header_image{
width: 100%; width: 100%;
max-width: 800px; max-width: 800px;
margin: 0 auto 50px auto; margin: auto;
} }
.feat_table { .feat_table {
display: flex; display: flex;
@@ -93,18 +93,21 @@
</head> </head>
<body> <body>
{{template "page_top" .}} {{template "page_top" .}}
<div class="checkers inset" style="padding-bottom: 60px;">
<picture> <picture>
<source media="(max-width: 800px)" srcset="/res/img/header_orbitron.png"> <source media="(max-width: 800px)" srcset="/res/img/header_orbitron.png">
<img class="header_image" src="/res/img/header_orbitron_wide.png" alt="Header image"> <img class="header_image" src="/res/img/header_orbitron_wide.png" alt="Header image">
</picture> </picture>
<br/> </div>
<!-- Svelte element --> <!-- Svelte element -->
<div id="uploader" class="page_content" style="margin-bottom: 50px;"></div> <div id="uploader" class="page_content"></div>
<h1>What is pixeldrain?</h1> <div class="checkers inset">
<div class="page_content"><div class="limit_width"> <h1>What is pixeldrain?</h1>
</div>
<div class="limit_width">
<p> <p>
Pixeldrain is a file sharing website built for speed and ease of Pixeldrain is a file sharing website built for speed and ease of
use. You can upload files you want to share online to our use. You can upload files you want to share online to our
@@ -472,7 +475,7 @@
logging in head to the <a href="/user/transactions">transactions logging in head to the <a href="/user/transactions">transactions
page</a> to deposit your coins. page</a> to deposit your coins.
</p> </p>
</div></div> </div>
<template id="tpl_file_expiry"> <template id="tpl_file_expiry">
<p> <p>

25
res/template/server_status.html
View File

@@ -1,25 +0,0 @@
{{define "server_status"}}<!DOCTYPE html>
<html lang="en">
<head>
{{template "meta_tags" "Server status"}}
{{template "user_style" .}}
<style>
.status_frame {
display: block;
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body>
{{template "page_menu" .}}
<div id="page_body" class="page_body" style="padding: 0; top: 0; bottom: 0;">
<iframe src="https://stats.uptimerobot.com/p9v2ktzyjm" class="status_frame"></iframe>
</div>
{{template "analytics"}}
</body>
</html>
{{end}}

5
res/template/user_buckets.html
View File

@@ -9,7 +9,10 @@
</head> </head>
<body> <body>
{{template "page_top" .}} {{template "page_top" .}}
<h1>My Buckets</h1>
<div class="checkers inset">
<h1>My Buckets</h1>
</div>
<div id="page_content" class="page_content"></div> <div id="page_content" class="page_content"></div>
{{template "page_bottom" .}} {{template "page_bottom" .}}

2
res/template/user_home.html
View File

@@ -16,8 +16,6 @@
<body> <body>
{{template "page_top" .}} {{template "page_top" .}}
<h1>Welcome home, {{.User.Username}}!</h1>
<div id="page_content" class="page_content"></div> <div id="page_content" class="page_content"></div>
{{template "page_bottom" .}} {{template "page_bottom" .}}

47
res/template/user_logout.html
View File

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

11
res/template/widgets.html
View File

@@ -7,10 +7,11 @@
</head> </head>
<body> <body>
{{template "page_top" .}} {{template "page_top" .}}
<img id="header_image" class="header_image" src="/res/img/header_neuropol.png" alt="Header image"/>
<br/> <div class="checkers inset">
<div class="page_content"><div class="limit_width">
<h1>Widget showcase</h1> <h1>Widget showcase</h1>
</div>
<div class="limit_width">
<h2>Size 2 header</h2> <h2>Size 2 header</h2>
<h3>Size 3 header</h3> <h3>Size 3 header</h3>
<h4>Size 4 header</h4> <h4>Size 4 header</h4>
@@ -62,8 +63,8 @@
Color <input type="color" name="favcolor" value="#ff0000"> Color <input type="color" name="favcolor" value="#ff0000">
<br/><br/> <br/><br/>
<iframe src="https://pixeldrain.com/u/Nygt1on4?embed" style="border: none; width: 640px; max-width: 100%; height: 480px; border-radius: 6px;"></iframe> <iframe src="https://pixeldrain.com/u/Nygt1on4?embed" style="border: none; width: 800px; max-width: 100%; height: 600px; max-height: 100%; border-radius: 16px;"></iframe>
</div></div> </div>
{{template "page_bottom" .}} {{template "page_bottom" .}}
</body> </body>
</html> </html>

11
svelte/src/admin_panel/Home.svelte
View File

@@ -10,8 +10,9 @@ let graphTimeout = null
let start_time = "" let start_time = ""
let end_time = "" let end_time = ""
let total_bandwidth = 0 let total_bandwidth = 0
let total_views = 0
let total_bandwidth_paid = 0 let total_bandwidth_paid = 0
let total_views = 0
let total_downloads = 0
const loadGraph = (minutes, interval, live) => { const loadGraph = (minutes, interval, live) => {
if (graphTimeout !== null) { clearTimeout(graphTimeout) } if (graphTimeout !== null) { clearTimeout(graphTimeout) }
if (live) { if (live) {
@@ -51,8 +52,9 @@ const loadGraph = (minutes, interval, live) => {
start_time = resp.views.timestamps[0] start_time = resp.views.timestamps[0]
end_time = resp.views.timestamps.slice(-1)[0]; end_time = resp.views.timestamps.slice(-1)[0];
total_bandwidth = resp.bandwidth.amounts.reduce((acc, val) => acc + val) total_bandwidth = resp.bandwidth.amounts.reduce((acc, val) => acc + val)
total_views = resp.views.amounts.reduce((acc, val) => acc + val)
total_bandwidth_paid = resp.bandwidth_paid.amounts.reduce((acc, val) => acc + val) total_bandwidth_paid = resp.bandwidth_paid.amounts.reduce((acc, val) => acc + val)
total_views = resp.views.amounts.reduce((acc, val) => acc + val)
total_downloads = resp.downloads.amounts.reduce((acc, val) => acc + val)
}) })
} }
@@ -176,8 +178,9 @@ onDestroy(() => {
<div class="highlight_dark"> <div class="highlight_dark">
Total usage from {start_time} to {end_time}<br/> Total usage from {start_time} to {end_time}<br/>
{formatDataVolume(total_bandwidth, 3)} bandwidth, {formatDataVolume(total_bandwidth, 3)} bandwidth,
{formatDataVolume(total_bandwidth_paid, 3)} paid bandwidth and {formatDataVolume(total_bandwidth_paid, 3)} paid bandwidth,
{formatThousands(total_views, 3)} views {formatThousands(total_views, 3)} views and
{formatThousands(total_downloads, 3)} downloads
</div> </div>
<br/> <br/>

32
svelte/src/admin_panel/Router.svelte
View File

@@ -26,7 +26,9 @@ onMount(() => {
}) })
</script> </script>
<div> <div class="checkers inset">
<h1>Admin Panel</h1>
<div class="tab_bar"> <div class="tab_bar">
<a class="button" <a class="button"
href="/admin" href="/admin"
@@ -75,18 +77,18 @@ onMount(() => {
Update global settings Update global settings
</a> </a>
</div> </div>
{#if page === "status"}
<Home></Home>
{:else if page === "block_files"}
<BlockFiles></BlockFiles>
{:else if page === "abuse_reports"}
<AbuseReports></AbuseReports>
{:else if page === "abuse_reporters"}
<AbuseReporters></AbuseReporters>
{:else if page === "ip_bans"}
<IpBans></IpBans>
{:else if page === "subscriptions"}
<Subscriptions></Subscriptions>
{/if}
</div> </div>
{#if page === "status"}
<Home></Home>
{:else if page === "block_files"}
<BlockFiles></BlockFiles>
{:else if page === "abuse_reports"}
<AbuseReports></AbuseReports>
{:else if page === "abuse_reporters"}
<AbuseReporters></AbuseReporters>
{:else if page === "ip_bans"}
<IpBans></IpBans>
{:else if page === "subscriptions"}
<Subscriptions></Subscriptions>
{/if}

55
svelte/src/home_page/HomePage.svelte
View File

@@ -391,15 +391,14 @@ const keydown = (e) => {
</div> </div>
{/if} {/if}
<div class="instruction" style="margin-top: 0;"> <div class="instruction limit_width" style="margin-top: 0; border-top: none;">
<div class="limit_width"> <span class="big_number">1</span>
<span class="big_number">1</span> <span class="instruction_text">Select files to upload</span>
<span class="instruction_text">Select files to upload</span> <br/>
<br/> You can also drop files on this page from your file manager or
You can also drop files on this page from your file paste an image from your clipboard
manager or paste an image from your clipboard
</div>
</div> </div>
<br/>
<input bind:this={file_input_field} on:change={file_input_change} type="file" name="file" multiple="multiple"/> <input bind:this={file_input_field} on:change={file_input_change} type="file" name="file" multiple="multiple"/>
<button on:click={() => { file_input_field.click() }} class="big_button button_highlight"> <button on:click={() => { file_input_field.click() }} class="big_button button_highlight">
@@ -417,22 +416,21 @@ const keydown = (e) => {
<a href="/about#content-policy">content policy</a>. <a href="/about#content-policy">content policy</a>.
<p> <p>
<div class="instruction" style="margin-bottom: 0;"> <div class="instruction limit_width" style="margin-bottom: 0;">
<div class="limit_width"> <span class="big_number">2</span>
<span class="big_number">2</span> <span class="instruction_text">Wait for the files to finish uploading</span>
<span class="instruction_text">Wait for the files to finish uploading</span> <br/>
<br/> <div class="stats_box">
<div class="stats_box"> <div>Size {formatDataVolume(total_size, 3)}</div>
<div>Size {formatDataVolume(total_size, 3)}</div> <div>Progress {(total_progress*100).toPrecision(3)}%</div>
<div>Progress {(total_progress*100).toPrecision(3)}%</div> <div>ETA {formatDuration(remaining_time, 0)}</div>
<div>ETA {formatDuration(remaining_time, 0)}</div> <div>Rate {formatDataVolume(total_rate, 3)}/s</div>
<div>Rate {formatDataVolume(total_rate, 3)}/s</div>
</div>
</div> </div>
</div> </div>
<div class="progress_bar_outer" style="margin-bottom: 1.5em;"> <div class="progress_bar_outer" style="margin-bottom: 1.5em;">
<div bind:this={progress_bar_inner} class="progress_bar_inner"></div> <div bind:this={progress_bar_inner} class="progress_bar_inner"></div>
</div> </div>
<br/>
<div id="file_drop_highlight" class="highlight_green" class:hide={!dragging}> <div id="file_drop_highlight" class="highlight_green" class:hide={!dragging}>
Gimme gimme gimme!<br/> Gimme gimme gimme!<br/>
@@ -443,12 +441,11 @@ const keydown = (e) => {
<UploadProgressBar bind:this={file.component} job={file}></UploadProgressBar> <UploadProgressBar bind:this={file.component} job={file}></UploadProgressBar>
{/each} {/each}
<div class="instruction"> <div class="instruction limit_width">
<div class="limit_width"> <span class="big_number">3</span>
<span class="big_number">3</span> <span class="instruction_text">Share the files</span>
<span class="instruction_text">Share the files</span>
</div>
</div> </div>
<br/>
{#if upload_queue.length > 1} {#if upload_queue.length > 1}
You can create an album to group your files together into one link<br/> You can create an album to group your files together into one link<br/>
@@ -507,8 +504,8 @@ const keydown = (e) => {
<br/> <br/>
{#if qr_visible} {#if qr_visible}
<img src="/api/misc/qr?text={encodeURIComponent(share_link)}" alt="QR code" style="width: 300px; max-width: 100%;"> <img src="/api/misc/qr?text={encodeURIComponent(share_link)}" alt="QR code" style="width: 300px; max-width: 100%;">
<br/>
{/if} {/if}
<br/>
<button bind:this={btn_copy_links} on:click={copy_links} disabled={state !== "finished"}> <button bind:this={btn_copy_links} on:click={copy_links} disabled={state !== "finished"}>
<i class="icon">content_copy</i> Copy <u>a</u>ll links to clipboard <i class="icon">content_copy</i> Copy <u>a</u>ll links to clipboard
</button> </button>
@@ -521,11 +518,9 @@ const keydown = (e) => {
<br/> <br/>
{#if window.user.subscription.name === ""} {#if window.user.subscription.name === ""}
<div class="instruction"> <div class="instruction limit_width">
<div class="limit_width"> <span class="big_number">4</span>
<span class="big_number">4</span> <span class="instruction_text">Support me on Patreon!</span>
<span class="instruction_text">Support me on Patreon!</span>
</div>
</div> </div>
<div class="limit_width"> <div class="limit_width">
<p> <p>

4
svelte/src/user_file_manager/DirectoryElement.svelte
View File

@@ -325,7 +325,7 @@ const node_click = (index) => {
{/each} {/each}
</div> </div>
</div> </div>
<div id="footer" class="status_bar highlight_1"> <div id="footer">
{statusBar} {statusBar}
</div> </div>
</div> </div>
@@ -382,6 +382,8 @@ const node_click = (index) => {
#footer { #footer {
flex-shrink: 0; flex-shrink: 0;
text-align: left; text-align: left;
background-color: var(--layer_1_color);
padding: 4px;
} }
.node { .node {

19
svelte/src/user_file_manager/FileManager.svelte
View File

@@ -256,8 +256,16 @@ onMount(() => {
<svelte:window on:keydown={keydown} on:hashchange={hashChange} /> <svelte:window on:keydown={keydown} on:hashchange={hashChange} />
<svetle:head>
<style>
#footer {
border-top-left-radius: 16px;
}
</style>
</svetle:head>
<div id="file_manager" class="file_manager"> <div id="file_manager" class="file_manager">
<div id="nav_bar" class="nav_bar highlight_1"> <div id="nav_bar" class="nav_bar" class:expanded={selecting}>
<button id="btn_menu" onclick="toggleMenu()"><i class="icon">menu</i></button> <button id="btn_menu" onclick="toggleMenu()"><i class="icon">menu</i></button>
<button on:click={toggleSelecting} id="btn_select" class:button_highlight={selecting}> <button on:click={toggleSelecting} id="btn_select" class:button_highlight={selecting}>
<i class="icon">select_all</i> Select <i class="icon">select_all</i> Select
@@ -271,7 +279,7 @@ onMount(() => {
</button> </button>
</div> </div>
{#if selecting} {#if selecting}
<div class="nav_bar highlight_3"> <div class="nav_bar">
<!-- Buttons to make a list and bulk delete files will show up here soon. Stay tuned ;-) --> <!-- Buttons to make a list and bulk delete files will show up here soon. Stay tuned ;-) -->
{#if contentType === "files"} {#if contentType === "files"}
<button on:click={createList}><i class="icon">list</i> Make list</button> <button on:click={createList}><i class="icon">list</i> Make list</button>
@@ -337,7 +345,6 @@ is collapsed */
#file_manager { #file_manager {
position: absolute; position: absolute;
padding: 0; padding: 0;
background-color: var(--layer_2_color);
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
@@ -347,6 +354,12 @@ is collapsed */
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
border-bottom-left-radius: 16px;
background-color: var(--layer_1_color);
padding: 4px;
}
.nav_bar.expanded {
border-bottom-left-radius: 0;
} }
.nav_bar > button { .nav_bar > button {
flex-shrink: 0; flex-shrink: 0;

32
svelte/src/user_home/Router.svelte
View File

@@ -33,7 +33,9 @@ onMount(() => {
<svelte:window on:popstate={get_page} /> <svelte:window on:popstate={get_page} />
<div> <div class="checkers inset">
<h1>Welcome home, {window.user.username}!</h1>
<div class="tab_bar"> <div class="tab_bar">
<a class="button" <a class="button"
href="/user" href="/user"
@@ -73,18 +75,18 @@ onMount(() => {
</a> </a>
{/if} {/if}
</div> </div>
{#if page === "home"}
<Home/>
{:else if page === "settings"}
<AccountSettings/>
{:else if page === "api_keys"}
<APIKeys/>
{:else if page === "connect_app"}
<ConnectApp/>
{:else if page === "transactions"}
<Transactions/>
{:else if page === "subscription"}
<Subscription/>
{/if}
</div> </div>
{#if page === "home"}
<Home/>
{:else if page === "settings"}
<AccountSettings/>
{:else if page === "api_keys"}
<APIKeys/>
{:else if page === "connect_app"}
<ConnectApp/>
{:else if page === "transactions"}
<Transactions/>
{:else if page === "subscription"}
<Subscription/>
{/if}

2
svelte/src/util/Modal.svelte
View File

@@ -86,7 +86,7 @@ const keydown = e => {
left: 50%; left: 50%;
transform: translate(-50%, -20%); transform: translate(-50%, -20%);
padding: 0; padding: 0;
border-radius: 20px 20px 8px 8px; border-radius: 20px 20px 16px 16px;
overflow: hidden; overflow: hidden;
text-align: left; text-align: left;
box-shadow: var(--shadow_color) 0px 0px 50px; box-shadow: var(--shadow_color) 0px 0px 50px;

2
webcontroller/user_style.go
View File

@@ -241,7 +241,7 @@ var sunnyPixeldrainStyle = pixeldrainStyleSheet{
Layer3Color: hsl{0, 1, 1}, Layer3Color: hsl{0, 1, 1},
Layer4Color: hsl{0, 1, 1}, Layer4Color: hsl{0, 1, 1},
ShadowColor: hsl{0, 0, 0.5}, ShadowColor: hsl{0, 0, 0},
} }
var solarizedDarkStyle = pixeldrainStyleSheet{ var solarizedDarkStyle = pixeldrainStyleSheet{

1
webcontroller/web_controller.go
View File

@@ -159,7 +159,6 @@ func New(
{GET, "brave" /* */, wc.serveMarkdown("brave.md", handlerOpts{})}, {GET, "brave" /* */, wc.serveMarkdown("brave.md", handlerOpts{})},
{GET, "acknowledgements" /**/, wc.serveMarkdown("acknowledgements.md", handlerOpts{})}, {GET, "acknowledgements" /**/, wc.serveMarkdown("acknowledgements.md", handlerOpts{})},
{GET, "business" /* */, wc.serveMarkdown("business.md", handlerOpts{})}, {GET, "business" /* */, wc.serveMarkdown("business.md", handlerOpts{})},
{GET, "server_status" /* */, wc.serveTemplate("server_status", handlerOpts{})},
{GET, "apps" /* */, wc.serveTemplate("apps", handlerOpts{})}, {GET, "apps" /* */, wc.serveTemplate("apps", handlerOpts{})},
// User account pages // User account pages